Coding All-in-One For Dummies. Nikhil Abraham

a URL, such as huffingtonpost.com, into your browser, the following steps happen behind the scenes in the seconds before your page loads (see Figure 2-5):

      1. Your computer sends your request for the web page to a router. The router distributes Internet access throughout your home or workplace.

      2. The router passes your request on to your Internet service provider (ISP).

      In the United States, your ISP is a company like Comcast, Time Warner, AT&T, or Verizon.

      3. Your ISP then converts the words and characters in your URL – “huffingtonpost.com,” in my example – into a numerical address called the Internet Protocol address (or, more commonly, IP address).

      An IP address is a set of four numbers separated by periods (such as 192.168.1.1). Just like your physical address, this number is unique, and every computer has one. Your ISP has a digital phone book, similar to a physical phonebook, called a domain name server that’s used to convert text URLs into IP addresses.

      4. With the IP address located, your ISP knows which server on the Internet to forward your request to, and your personal IP address is included in this request.

      5. The website server receives your request and sends a copy of the web page code to your computer for your browser to display.

      6. Your web browser renders the code onto the screen.

      FIGURE 2-5: Steps followed to deliver a website to your browser.

      When you edited the website code using the Developer Tools, you modified only the copy of the website code that exists on your computer, so only you could see the change. When you reloaded the page, you started Steps 1 through 6 again, and retrieved a fresh copy of the code from the server, overwriting any changes you made on your computer.

      You may have heard of a software tool called an ad blocker. Ad blockers work by editing the local copy of website code, as you just did, to remove website advertisements. Ad blockers are controversial because websites use advertising revenue to pay for operating costs. If ad blockers continue rising in popularity, ad revenue could dry up, and websites may demand that readers pay to see their content.

      Watching out for your front end and back end

Now that you know how your browser accesses websites, let us dive deeper into the way the actual website is constructed. As shown in Figure 2-6, the code for websites, and for programs in general, can be divided into four categories, according to the code’s function:

      ❯❯ Appearance: Appearance is the visible part of the website, including content layout and any applied styling, such as font size, font typeface, and image size. This category is called the front end and is created using languages like HTML, CSS, and JavaScript.

      ❯❯ Logic: Logic determines what content to show and when. For example, a New Yorker accessing a news website should see New York weather, whereas Chicagoans accessing the same site should see Chicago weather. This category is part of the group called the back end and is created using languages like Ruby, Python, and PHP. These back end languages can modify the HTML, CSS, and JavaScript that is displayed to the user.

      ❯❯ Storage: Storage saves any data generated by the site and its users. User-generated content, preferences, and profile data must be stored for retrieval later. This category is part of the back end and is stored in databases like MongoDB and MySQL.

      ❯❯ Infrastructure: Infrastructure delivers the website from the server to you, the client machine. When the infrastructure is properly configured, no one notices it, but it can become noticeable when a website becomes unavailable because of high traffic from events like presidential elections, the Super Bowl, and natural disasters.

      FIGURE 2-6: Every website is made up of four different parts.

      Usually, website developers specialize in one or at most two of these categories. For example, an engineer might really understand the front end and logic languages or specialize only in databases. Website developers have strengths and specializations, and outside these areas their expertise is limited, much in the same way that Jerry Seinfeld, a terrific comedy writer, would likely make a terrible romance novelist.

      The rare website developer proficient in all four categories is referred to as a full stack developer. Usually, smaller companies hire full stack developers, whereas larger companies require the expertise that comes with specialization.

      Defining web and mobile applications

      Web applications are websites you visit using a web browser on any device. Websites optimized for use on a mobile device, like a phone or tablet, are called mobile web applications. By contrast, native mobile applications cannot be viewed using a web browser. Instead, native mobile applications are downloaded from an app store like the Apple App Store or Google Play and are designed to run on a specific device such as an iPhone or an Android tablet. Historically, desktop computers outnumbered and outsold mobile devices, but recently two major trends in mobile usage have occurred:

❯❯ In 2014, people with mobile devices outnumbered people with desktop computers. This gap is projected to continue increasing, as shown in Figure 2-7.

      ❯❯ Mobile-device users spend 80 percent of their time using native mobile applications and 20 percent of their time browsing mobile websites.

      FIGURE 2-7: Mobile devices have increased at a faster pace than desktops.

      The increase in mobile devices happened so quickly over the past 10 years that many companies are becoming “mobile first,” designing and developing the mobile version of their applications before the desktop version. WhatsApp and Instagram, two popular mobile applications, first built mobile applications, which continue to have more functionality than their regular websites.

Coding Web Applications

      Web applications are easier to build than mobile applications, require little to no additional software to develop and test, and run on all devices, including desktops, laptops, and mobile devices. Although mobile applications can perform many common web-application tasks, such as email, some tasks are still easier to perform using web applications. For example, booking travel is easier using web applications, especially since the steps necessary – reviewing flights, hotels, and rental cars, and then purchasing all three – are best achieved with multiple windows, access to a calendar, and the entry of substantial personal and payment information.

      The programming languages used to code basic web applications, further defined in the following sections, include HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript. Additional features can be added to these websites using languages like Python, Ruby, or PHP.

      Starting with HTML, CSS, and JavaScript

Simple websites, such as the one shown in Figure 2-8, are coded using HTML, CSS, and JavaScript:

      ❯❯ HTML is used to place text on the page.

      ❯❯ CSS is used to style that text.

      ❯❯ JavaScript is used to add interactive effects like the Twitter or Facebook Share button that allows you to share content on social networks and updates the number of other people who have shared the same content.