starting to take over installed software. Think of the last time you downloaded and installed software for your computer – you may not even remember! Installed software like Windows Media Player and Winamp that play music and movies have been replaced with websites like YouTube and Netflix. Traditional installed word processor and spreadsheet software like Microsoft Word and Excel is starting to see competition from web software like Google Docs and Sheets. Google is even selling laptops called Chromebooks that contain no installed software, and instead rely exclusively on web software to provide functionality.
The remainder of this book focuses on developing and creating web software, not just because web software is growing rapidly but also because programs for the web are easier to learn and launch than traditional installed software.
With all this talk of programming, let us actually take a look at a web application built with code. Yelp.com is a website that allows you to search and find crowd-sourced reviews for local businesses like restaurants, nightlife, and shopping. As shown in Figure 1-6, Yelp did not always look as polished as it does today, but its purpose has stayed relatively constant over the years.
FIGURE 1-6: Yelp’s website in 2004 and in 2014.
Defining the app’s purpose and scope
Once you understand an app’s purpose, you can identify a few actionable tasks a user should be able to perform to achieve that purpose. Regardless of design, the Yelp’s website has always allowed users to do the following:
❯❯ Search local listings based on venue type and location.
❯❯ Browse listing results for address, hours, reviews, photos, and location on a map.
Successful web applications generally allow for completing only a few key tasks when using the app. Adding too many features to an app is called scope creep, which dilutes the strength of the existing features, and so is avoided by most developers. For example, it took Yelp, which has 30,000 restaurant reviews, exactly one decade after its founding to allow users to make reservations at those restaurants directly on its website.
Standing on the shoulders of giants
Developers make strategic choices and decide which parts of the app to code themselves, and on which parts of the app to use code built by others. Developers often turn to third-party providers for functionality that is either not core to the business or not an area of strength. In this way, apps stand on the shoulders of others, and benefit from others who have come before and solved challenging problems.
Yelp, for instance, displays local listing reviews and places every listing on a map. While Yelp solicits the reviews and writes the code to display basic listing data, it is Google, as shown in Figure 1-7, that develops the maps used on Yelp’s website. By using Google’s map application instead of building its own, Yelp created the first version of the app with fewer engineers than otherwise would have been required.
FIGURE 1-7: Google maps used for the Yelp web application.
Chapter 2
Programming for the Web
IN THIS CHAPTER
❯❯ Seeing the code powering websites you use every day
❯❯ Understanding the languages used to make websites
❯❯ Finding out how applications are created for mobile devices
“To think you can start something in your college dorm room … and build something a billion people use is crazy to think about. It’s amazing.”
Programming for the web allows you to reach massive audiences around the world faster than ever before. Four years after its 2004 launch, Facebook had 100 million users, and by 2012 it had over a billion. By contrast, it took desktop software years to reach even one million people. These days, mobile phones are increasing the reach of web applications. Although roughly 300 million desktop computers are sold every year, almost two billion mobile phones are sold in that time – and the number is steadily increasing.
In this chapter, you discover how websites are displayed on your computer or mobile device. I introduce the languages used to program websites and show you how mobile-device applications are made.
On desktop computers and mobile devices, web pages are displayed by applications called browsers. The most popular web browsers include Google Chrome, Mozilla Firefox (formerly Netscape Navigator), Microsoft Internet Explorer, and Apple Safari. Until now, you have likely interacted with websites you visit as an obedient user, and followed the rules the website has created by pointing and clicking when allowed. The first step to becoming a producer and programmer of websites is to peel back the web page, and see and play with the code underneath it all.
Hacking your favorite news website
What’s your favorite news website? By following a few steps, you can see and even modify the code used to create that website. (No need to worry; you won’t be breaking any rules by following these instructions.)
To “hack” your favorite news website, follow these steps:
1. Open your favorite news website using the Chrome browser.
In this example, I use www.huffingtonpost.com.
2. Place your mouse cursor over any static fixed headline and right-click once, which opens a contextual menu.
3. Then left-click once on the Inspect Element menu choice. (See Figure 2-1.)
The Developer Tools panel opens at the bottom of your browser. This panel shows you the code used to create this web page! Highlighted in blue is the specific code used to create the headline where you originally put your mouse cursor. (See Figure 2-2.)
4. Scan the
