Programming & Web Design Articles

Cheat Sheet / Updated 11-21-2022

All blogs start in the same way: A person picks a blogging application, creates a blog, and publishes a post online. What happens then depends on each individual blogger. This Cheat Sheet supplements the information provided in Blogging All-in-One For Dummies and helps you find resources and tools to make your blog a unique place that allows you to reach your goals.

Cheat Sheet / Updated 11-14-2022

Coding, or computer programming, is your way of communicating with technology. It’s the new literacy you need to master to be successful in the coming decades. Like any form of communication, coding takes place through language. Just as there are many human languages (English, French, Mandarin, Spanish, and so on), there are many coding languages! Two examples of coding languages are Scratch and JavaScript. Scratch is perfect as a coding language for kids because it’s easy and fun to use, Scratch coding for kids allows you to build programs by snapping together commands in the same way you assemble a puzzle. JavaScript is a step up in difficulty because it’s an authentic programming language, used by real coders. JavaScript powers many technologies, and you can use it to make both apps for your phone and control code for operating electronics gadgets. You can ease into JavaScript by using blocks to build programs (just like Scratch) and then switching to text-based coding when you’re ready. Here, discover tips for creating programs in Scratch, coding JavaScript apps in App Lab, and writing JavaScript code in MakeCode to operate the micro:bit electronics board.

Article / Updated 10-19-2022

Whether you use a Mac, Windows, or Linux OS (operating system), you can find and install Python on your computer. The following sections give you instructions for each OS. How to install Python on Mac OSX To find and start Python on Mac OSX computers, follow these steps: Press Cmd+spacebar to open Spotlight. Type the word terminal. Or, from the Finder, select Finder→Go→Utilities→Terminal. The Terminal window opens. In the terminal, type python. The Python interpreter that's built in to Mac OSX opens. How to install Python on Windows Unfortunately, Python doesn't come on Windows. If you're running Windows, then you need to download and install Python by following the instructions here. Installing Python on Windows isn't difficult. If you can download a file from a website, you have the skills to install Python. Fortunately, the Python Foundation (the peeps who guide the development of Python) makes installable files available from its website. Firefox and Internet Explorer responded differently to the Python download website, so the instructions are based on which of these browsers you use. If you use a whole other browser altogether, try the Internet Explorer instructions. Installing with Firefox To install Python on a Windows machine with Firefox, follow these steps: Visit www.python.org/downloads. Click the button that says Download Python 2.7.9. Or, if it's there, click a more recent version number that starts with 2.7. Clicking this button automatically downloads and saves an msi file for you. If not, try the instructions for Internet Explorer. See Figure 1. Figure 1: Download Python with Firefox. When the download's complete, click the icon for Firefox's download tool. Click the file called python-2.7.9.msi (or the more recent version, if you downloaded one). Python 2.7.9 installs on your computer. Installing with Internet Explorer To install Python on a Windows machine with Internet Explorer, follow these steps: Visit www.python.org/downloads. From the menu bar, select Downloads→Windows. You can see the menu options in Figure 2. Figure 2: Download Python with Internet Explorer. Scroll down to the heading Python 2.7.9-2014-12-10. Or scroll to a more recent version, which starts with Python 2.7, if one is available. Under this heading, click the link titled Download Windows x86 MSI Installer. See Figure 3. This is a link for a 32-bit installation, which makes things work better with third-party libraries. Use the 32-bit installer even if you have a 64-bit machine and even if you have no idea what this paragraph is talking about. Figure 3: Python x86 MSI Installer. If you're asked to choose whether to run or save the file, choose Run. This downloads python2.7.9.msi and starts running the installer. If you get a security warning when the installer begins (or at random times during the installation), choose Run. Accept the default installation options that the installer provides. How to install Python for Linux If you're running Linux, confirm that you have version 2.7.9 of Python installed, rather than version 3. This shouldn't be a problem because Python 2.7 is installed by default in recent versions of OpenSuSE, Ubuntu, and Red Hat Fedora. In the nutty odd case when someone has Python 3 but not Python 2.7, read your distribution's documentation for how to use the package manager and get Python 2.7 and IDLE.

Article / Updated 10-19-2022

Tradition dictates that Hello World! be the first program that you write when you're learning a new programming language like Python. You're following in the footsteps of many great programmers when you create this project. To create your Hello World! program, follow these steps: Open your Start menu and choose Python (command line). You should get a prompt that looks like >>>. At the moment, you're doing everything in interactive mode in the Python interpreter. That's where the >>> comes in. Python shows you >>> when you're supposed to type something. At the prompt, type the following. Use a single quote at the start and the end — it's beside the Enter key: print('Hello World!') Press the Enter key. Python runs the code you typed. You see the output shown in Figure 1. Congratulations — you've written your first program. Welcome to the Python-programmers-in-training club. If you don't see what's in Figure 1, check that you typed in the text from Step 2 exactly as it's written: Check that the parentheses and single quotes are in the right places. Check that for each opening parenthesis there is a closing parenthesis. (Otherwise, you're left hanging. Check that for each opening quote there's a closing quote. Programming languages have their own grammar and punctuation rules. These rules are the language's syntax. Humans, can work most stuff out even if perfect not you're is grammar (See? You figured out what that sentence was trying to say), but Python pretty much freaks out if you get the syntax wrong.

Article / Updated 10-19-2022

While you can use Python to delete information from files, you may find you no longer need the file at all. The following steps describe how to delete files that you no longer need. Open a Python File window. You see an editor in which you can type the example code. Type the following code into the window — pressing Enter after each line: Choose Run→Run Module The application displays the File Removed! message. When you look in the directory that originally contained the ChangedFile.csv file, you see that the file is gone. The task looks simple in this case, and it is. All you need to do to remove a file is call os.remove() with the appropriate filename and path (Python defaults to the current directory, so you don’t need to specify a path if the file you want to remove is in the default directory). The ease with which you can perform this task is almost scary because it’s too easy. Putting safeguards in place is always a good idea. You may want to remove other items, so here are other functions you should know about: os.rmdir(): Removes the specified directory. The directory must be empty or Python will display an exception message. shutil.rmtree(): Removes the specified directory, all subdirectories, and all files. This function is especially dangerous because it removes everything without checking (Python assumes that you know what you’re doing). As a result, you can easily lose data using this function.

Article / Updated 09-30-2022

Depending on their histories, different SQL implementations support a variety of data types. The SQL specification recognizes nine predefined general types, shown in the lists below. Exact Numerics: INTEGER SMALLINT BIGINT NUMERIC DECIMAL DECFLOAT Approximate Numerics: REAL DOUBLE PRECISION FLOAT Boolean: BOOLEAN Character Strings: CHARACTER (CHAR) CHARACTER VARYING (VARCHAR) NATIONAL CHARACTER (NCHAR) NATIONAL CHARACTER VARYING (NVARCHAR) Datetimes: DATE TIME TIMESTAMP TIME WITH TIMEZONE TIMESTAMP WITH TIMEZONE Intervals: INTERVAL DAY INTERVAL YEAR Large Objects: BLOB CLOB Collection Types: ARRAY MULTISET Other Types: ROW XML

Article / Updated 09-30-2022

To ensure that database tables are designed in such a way that they will hold your data reliably, you need to be sure that they are not subject to modification anomalies. Normalizing your databases will give you that assurance. Compare the SQL criteria in the following list to the tables in your database. Doing so will alert you to the possibility of anomalies, when you find that your database is not sufficiently normalized. First Normal Form (1NF): Table must be two-dimensional, with rows and columns. Each row contains data that pertains to one thing or one portion of a thing. Each column contains data for a single attribute of the thing being described. Each cell (intersection of row and column) of the table must be single-valued. All entries in a column must be of the same kind. Each column must have a unique name. No two rows may be identical. The order of the columns and of the rows does not matter. Second Normal Form (2NF): Table must be in first normal form (1NF). All non-key attributes (columns) must be dependent on the entire key. Third Normal Form (3NF): Table must be in second normal form (2NF). Table has no transitive dependencies. Domain-Key Normal Form (DK/NF): Every constraint on the table is a logical consequence of the definition of keys and domains.

Article / Updated 09-19-2022

The primary purpose of an AJAX library like jQuery is to simplify AJAX requests for HTML5 and CSS3 programmers. It's hard to believe how easy this can be with jQuery. How to include a text file with AJAX Check out this clean code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax.html</title> <script type = "text/javascript" src = "jquery-1.10.2.min.js"></script> <script type = "text/javascript"> $(document).ready(getAJAX); function getAJAX(){ $("#output").load("hello.txt"); } </script> </head> <body> <div id = "output"></div> </body> </html> The HTML is very clean. It simply creates an empty div called output. This example does use AJAX, so if it isn't working, you might need to remember some details about how AJAX works. A program using AJAX should be run through a web server, not just from a local file. Also, the file being read should be on the same server as the program making the AJAX request. The load() mechanism described here is suitable for a basic situation where you want to load a plain-text or HTML code snippet into your pages. Building a poor man's CMS with AJAX AJAX and jQuery can be a very useful way to build efficient websites, even without server-side programming. Frequently a website is based on a series of smaller elements that can be swapped and reused. You can use AJAX to build a framework that allows easy reuse and modification of web content. Although nothing is all that shocking about the page from the user's perspective, a look at the code can show some surprises: <!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8"> <title>CMS Using AJAX</title> <link rel = "stylesheet" type = "text/css" href = "cmsStd.css" /> <script type = "text/javascript" src = "jquery-1.10.2.min.js"></script> <script type = "text/javascript"> $(init); function init(){ $("#heading").load("head.html"); $("#menu").load("menu.html"); $("#content1").load("story1.html"); $("#content2").load("story2.html"); $("#footer").load("footer.html"); }; </script> </head> <body> <div id = "all"> <!-- This div centers a fixed-width layout → <div id = "heading"> </div><!-- end heading div → <div id = "menu"> </div> <!-- end menu div → <div class = "content" id = "content1"> </div> <!-- end content div → <div class = "content" id = "content2"> </div> <!-- end content div → <div id = "footer"> </div> <!-- end footer div → </div> <!-- end all div → </body> </html> Look over the code, and you can see these interesting features: The page has no content! All the divs are empty. None of the text shown in the screen shot is present in this document, but all is pulled from smaller files dynamically. The page consists of empty named divs. Rather than any particular content, the page consists of placeholders with IDs. It uses jQuery. The jQuery library is used to vastly simplify loading data through AJAX calls. All contents are in separate files. Look through the directory, and you can see very simple HTML files that contain small parts of the page. For example, story1.html looks like this: <h2>Book I - Creating the HTML Foundation</h3> <ol> <li>Sound HTML Foundations</li> <li>It's All About Validation</li> <li>Choosing your Tools</li> <li>Managing Information with Lists and Tables</li> <li>Making Connections with Links</li> <li>Adding Images</li> <li>Creating forms</li> </ol> The init() method runs on document.ready. When the document is ready, the page runs the init() method. The init() method uses AJAX calls to dynamically load content. It's nothing more than a series of jQuery load() methods. This approach may seem like a lot of work, but it has some very interesting characteristics: If you're building a large site with several pages, you usually want to design the visual appearance once and reuse the same general template repeatedly. Also, you'll probably have some elements that will be consistent over several pages. You could simply create a default document and copy and paste it for each page, but this approach gets messy. What happens if you have created 100 pages according to a template and then need to change the header? You need to make the change on 100 different pages. The advantage of the template-style approach is code reuse. Just like the use of an external style allows you to multiply a style sheet across hundreds of documents, designing a template without content allows you to store code snippets in smaller files and reuse them. All 100 pages point to the same menu file, so if you want to change the menu, change one file and everything changes with it. Here's how you use this sort of approach: Create a single template for your entire site. Build basic HTML and CSS to manage the overall look and feel for your entire site. Don't worry about content yet. Just build placeholders for all the components of your page. Be sure to give each element an ID and write the CSS to get things positioned as you want. Add jQuery support. Make a link to the jQuery library, and make a default init() method. Put in code to handle populating those parts of the page that will always be consistent. Duplicate the template. After you have a sense of how the template will work, make a copy for each page of your site. Customize each page by changing the init() function. The only part of the template that changes is the init() function. All your pages will be identical, except they have customized init() functions that load different content. Load custom content into the divs with AJAX. Use the init()function to load content into each div. This is a great way to manage content, but it isn't quite a full-blown content-management system. Even AJAX can't quite allow you to store content on the web. More complex content management systems also use databases rather than files to handle content. You'll need some sort of server-side programming (like PHP) and usually a database (like mySQL) to handle this kind of work.

Article / Updated 09-19-2022

Arrays are groups of variables in JavaScript with a name. Arrays are similar to functions because they're used to manage complexity for HTML5 and CSS3 programming. An array is a special kind of variable. Use an array whenever you want to work with a list of similar data types. The following code shows a basic demonstration of arrays: <script type = "text/javascript"> //from genres.html //creating an empty array var genre = new Array(5); //storing data in the array genre[0] = "flight simulation"; genre[1] = "first-person shooters"; genre[2] = "driving"; genre[3] = "action"; genre[4] = "strategy"; //returning data from the array alert ("I like " + genre[4] + " games."); //]]> </script> The variable is a special variable because it contains many values. Essentially, it's a list of genres. The array(5) construct creates space in memory for five variables, all named genre. Accessing array data After you specify an array, you can work with the individual elements using square-bracket syntax. An integer identifies each element of the array. The index usually begins with. genre[0] = "flight simulation"; The preceding code assigns the text value “flight simulation” to the genre array variable at position 0. Most languages require all array elements to be the same type. JavaScript is very forgiving. You can combine all kinds of stuff in a JavaScript array. This flexibility can sometimes be useful, but be aware that this trick doesn't work in all languages. Generally, try to keep all the members of an array the same type. After you store the data in the array, you can use the same square-bracket syntax to read the information. The line alert ("I like " + genre[4] + " games."); finds element 4 of the genre array and includes it in an output message. Using arrays with for loops The main reason to use arrays is convenience. When you have a lot of information in an array, you can write code to work with the data quickly. Whenever you have an array of data, you commonly want to do something with each element in the array. Take a look at to see how you can do so: <script type = "text/javascript"> //from games.html //pre-loading an array var gameList = new Array("Flight Gear", "Sauerbraten", "Future Pinball", "Racer", "TORCS", "Orbiter", "Step Mania", "NetHack", "Marathon", "Crimson Fields"); var text = "; for (i = 0; i < gameList.length; i++){ text += "I love " + gameList[i] + "n"; } // end for loop alert(text); </script> Notice several things in this code: The array called gameList. This array contains the names of some great freeware games. The array is preloaded with values. If you provide a list of values when creating an array, JavaScript simply preloads the array with the values you indicate. You don't need to specify the size of the array if you preload it. A for loop steps through the array. Arrays and for loops are natural companions. The for loop steps through each element of the array. The array's length is used in the for loop condition. Rather than specifying the value 10, the array's length property was used in the loop. This practice is good because the for loop automatically adjusts to the size of the array when you add or remove elements. Do something with each element. Because goes from 0 to 9 (the array indices), you can easily print each value of the array. In this example, an output string was added to. Note the newline characters. The n combination is a special character that tells JavaScript to add a carriage return, such as you get by pressing the Enter key. If you want to completely ruin your productivity, Google some of these game names. They're absolutely incredible, and every one of them is free. You can't beat that.

Article / Updated 08-16-2022

One way of styling specific elements in CSS is to name your HTML elements. You name your code by using either the id or class attribute, and then style your code by referring to the id or class selector. Naming your code using the id attribute Use the id attribute to style one specific element on your web page. The id attribute can name any HTML element, and is always placed in the opening HTML tag. Additionally, each element can have only one id attribute value, and the attribute value must appear only once within the HTML file. After you define the attribute in the HTML file, you refer to the HTML element in your CSS by writing a hashtag (#) followed by the attribute value. Using the id attribute, the following code styles the Modern Seinfeld Twitter link the color red with a yellow background: HTML: <p><a href="http://twitter.com/SeinfeldToday" id="jerry">Modern Seinfeld</a></p> CSS: #jerry { color: red; background-color: yellow; } Naming your code using the class attribute Use the class attribute to style multiple elements on your web page. The class attribute can name any HTML element and is always placed in the opening HTML tag. The attribute value need not be unique within the HTML file. After you define the attribute in the HTML file, you refer to the HTML element by writing a period (.) followed by the attribute value. With the class attribute, the following code styles all the Parody Tech Twitter account links the color red with no underline: HTML: <ul> <li> <a href="<u>http://twitter.com/BoredElonMusk</u>" class="tech">Bored Elon Musk</a> </li> <li> <a href="<span style="text-decoration: underline;">http://twitter.com/VinodColeslaw</span>" class="tech">Vinod Coleslaw</a> </li> <li> <a href="<span style="text-decoration: underline;">http://twitter.com/Horse_ebooks</span>" class="tech">Horse ebooks</a> </li> </ul> CSS: .tech { color: red; text-decoration: none; } Proactively use a search engine, such as Google, to search for additional CSS effects. For example, if you want to increase the spacing between each list item, open your browser and search for list item line spacing css. Links appearing in the top ten results should include: W3Schools: A beginner tutorial site Stack Overflow: A discussion board for experienced developers Mozilla: A reference guide initially created by the foundation that maintains the Firefox browser and now maintained by a community of developers Each of these sites is a good place to start; be sure to look for answers that include example code.