Download to read offline
![Learning Web App Development
by Semmy Purewal
Copyright © 2014 Semmy Purewal. All rights reserved.
Printed in the United States of America.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are
alsoavailableformosttitles(http://my.safaribooksonline.com).Formoreinformation,contactourcorporate/
institutional sales department: 800-998-9938 or corporate@oreilly.com.
Editors: Simon St. Laurent and Meghan Blanchette
Production Editor: Kara Ebrahim
Copyeditor: Kim Cofer
Proofreader: Kiel Van Horn
Indexer: Judy McConville
Cover Designer: Randy Comer
Interior Designer: David Futato
Illustrator: Rebecca Demarest
February 2014: First Edition
Revision History for the First Edition:
2014-02-10: First release
See http://oreilly.com/catalog/errata.csp?isbn=9781449370190 for release details.
Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly
Media, Inc. Learning Web App Development, the image of German Grey Heath, and related trade dress are
trademarks of O’Reilly Media, Inc.
Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks.Wherethosedesignationsappearinthisbook,andO’ReillyMedia,Inc.wasawareofatrademark
claim, the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and author assume no
responsibility for errors or omissions, or for damages resulting from the use of the information contained
herein.
ISBN: 978-1-449-37019-0
[LSI]](https://image.slidesharecdn.com/2328094-250520122612-b9b77c16/85/Learning-Web-App-Development-1st-Edition-Semmy-Purewal-8-320.jpg)
![Our first commits!
We’re interested in tracking changes in our index.html file. To do that, we follow the
instructions Git gave us and add it to the repo with the git add command:
hostname $ git add index.html
Notice that Git doesn’t respond at all. That’s okay. We can double-check that everything
worked by typing git status again:
hostname $ git status
# On branch master
#
# Initial commit
#
# Changes to be committed:
# (use "git rm --cached <file>..." to unstage)
#
# new file: index.html
#
This gives us the feedback we were looking for. Notice that index.html is now listed
under the Changes to be committed heading.
Once we’ve added the new files to the repository, we would like to commit the initial
state of the repository. To do this, we use the git commit command along with the -m
flagandameaningfulmessageaboutwhathaschangedsincethelastcommit.Ourinitial
commit often looks something like this:
hostname $ git commit -m "Initial commit"
[master (root-commit) 147deb5] Initial commit
1 file changed, 1 insertion(+)
create mode 100644 index.html
This creates a snapshot of our project in time. We can always revert back to it later if
something goes wrong down the road. If we now type git status, we’ll see that in‐
dex.html no longer appears because it is being tracked and no changes have been made.
When we have no changes since our last commit, we say we have a “clean working
directory”:
hostname $ git status
# On branch master
nothing to commit (working directory clean)
It’s easy to forget to include the -m and a commit message when
committing. If that happens, however, you’ll most likely find your‐
self inside the Vim text editor (which is typically the default system
editor). If that happens you can get out of it by hitting a colon (:)
and then typing q! and pressing Enter to exit.
16 | Chapter 1: The Workflow](https://image.slidesharecdn.com/2328094-250520122612-b9b77c16/85/Learning-Web-App-Development-1st-Edition-Semmy-Purewal-40-320.jpg)
![Next, let’s modify index.html with a minor change. We’ll add a second line that says
“GoodbyeWorld!”Goaheadanddothatandsavethefileusingtheappropriatekeyboard
shortcut. Now let’s see how git status responds to this change:
hostname $ git status
# On branch master
# Changes not staged for commit:
# (use "git add <file>..." to update what will be committed)
# (use "git checkout -- <file>..." to discard changes in working directory)
#
# modified: index.html
#
no changes added to commit (use "git add" and/or "git commit -a")
Notice that Git tells us that index.html has been modified, but that it’s not staged for the
next commit. To add our modifications to the repository, we have to first git add the
modified file and then we have to git commit our changes. We may want to verify the
add has correctly happened by typing git status before the commit. This interaction
might look something like this:
hostname $ git add index.html
hostname $ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# modified: index.html
#
hostname $ git commit -m "Add second line to index.html"
[master 1c808e2] Add second line to index.html
1 file changed, 1 insertion(+)
Viewing the history of our repo
So now we’ve made two commits to our project and we can revert to those snapshots
at any time. In “More Practice and Further Reading” on page 21, I’ll link to a reference
that will show you how to revert to a previous commit and start coding from there. But
fornow,there’soneothercommandthatmaycomeinuseful.Wecanlookatourcommit
history by using git log:
hostname $ git log
commit 1c808e2752d824d815929cb7c170a04267416c04
Author: Semmy Purewal <semmy@semmy.me>
Date: Thu May 23 10:36:47 2013 -0400
Add second line to index.html
commit 147deb5dbb3c935525f351a1154b35cb5b2af824
Author: Semmy Purewal <semmy@semmy.me>
Date: Thu May 23 10:35:43 2013 -0400
Version Control | 17](https://image.slidesharecdn.com/2328094-250520122612-b9b77c16/85/Learning-Web-App-Development-1st-Edition-Semmy-Purewal-41-320.jpg)
![Summary
One of the most important aspects of web application development is getting used to
an efficient and effective workflow. A modern workflow involves three important tools:
a text editor, a version control system, and a web browser. Sublime Text is a popular,
cross-platform text editor that is useful for editing source code. Git is a commonly used
version control system that has a command-line interface. Chrome is an excellent web
browser for web development.
Before moving on, you should have all of the previously described tools installed on
your computer. You should also memorize the commands in Table 1-1 and Table 1-2,
which allow you to navigate your filesystem and interact with Git from the command
line.
Table 1-1. Unix commands
Command Description
pwd Print your current directory
ls List the contents of your current directory
ls -a List including all hidden files
cd [dir] Change to the directory called [dir]
mkdir [dir] Create a new directory called [dir]
Table 1-2. Git commands
Command Description
git init Initialize your repository
git status Display the status of your repository
git add [file(s)] Stage [files] for the next commit
git commit -m [msg] Commityourstagedfileswithmessage[msg]
git log Show the commit history
More Practice and Further Reading
Memorization
In teaching and learning, memorization often has a negative connotation. In my mind,
this view is mostly misguided, particularly when it relates to computer programming.
If you follow the mindset that “well, I can just look that up when I need it,” you’ll spend
more time looking up basic stuff than focusing on the more challenging things that
arise. Imagine, for instance, how much more difficult long division would be if you
didn’t have your multiplication tables memorized!
Summary | 21](https://image.slidesharecdn.com/2328094-250520122612-b9b77c16/85/Learning-Web-App-Development-1st-Edition-Semmy-Purewal-45-320.jpg)
Learning Web App Development 1st Edition Semmy Purewal
- 1. Learning Web AppDevelopment 1st Edition Semmy Purewal download https://ebookbell.com/product/learning-web-app-development-1st- edition-semmy-purewal-4656188 Explore and download more ebooks at ebookbell.com
- 2. Here are somerecommended products that we believe you will be interested in. You can click the link to download. Learning Web App Development Semmy Purewal https://ebookbell.com/product/learning-web-app-development-semmy- purewal-42302986 Practical Tensorflowjs Deep Learning In Web App Development 1st Ed Juan De Dios Santos Rivera https://ebookbell.com/product/practical-tensorflowjs-deep-learning-in- web-app-development-1st-ed-juan-de-dios-santos-rivera-22417548 Web App Development And Realtime Web Analytics With Python Develop And Integrate Machine Learning Algorithms Into Web Apps 1st Ed Nokeri https://ebookbell.com/product/web-app-development-and-realtime-web- analytics-with-python-develop-and-integrate-machine-learning- algorithms-into-web-apps-1st-ed-nokeri-36127710 Learning Web Design A Beginners Guide To Html Css Javascript And Web Graphics Jennifer Niederst Robbins https://ebookbell.com/product/learning-web-design-a-beginners-guide- to-html-css-javascript-and-web-graphics-jennifer-niederst- robbins-50195314
- 3. Learning Web DesignA Beginners Guide To Html Css Javascript And Web Graphics 5th Edition Jennifer Robbins https://ebookbell.com/product/learning-web-design-a-beginners-guide- to-html-css-javascript-and-web-graphics-5th-edition-jennifer- robbins-22682546 Learning Web Design A Beginners Guide To Xhtml Style Sheets And Web Graphics 3rd Edition Jennifer Niederst Robbins https://ebookbell.com/product/learning-web-design-a-beginners-guide- to-xhtml-style-sheets-and-web-graphics-3rd-edition-jennifer-niederst- robbins-2341732 Learning Web Design A Beginners Guide To Html Css Javascript And Web Graphics 4th Edition Jennifer Niederst Robbins https://ebookbell.com/product/learning-web-design-a-beginners-guide- to-html-css-javascript-and-web-graphics-4th-edition-jennifer-niederst- robbins-2608990 Learning Web Design A Beginners Guide To Html Css Javascript And Web Graphics 5th Edition Jennifer Niederst Robbins https://ebookbell.com/product/learning-web-design-a-beginners-guide- to-html-css-javascript-and-web-graphics-5th-edition-jennifer-niederst- robbins-34861334 Learning Webbased Virtual Reality 1st Ed Srushtika Neelakantam https://ebookbell.com/product/learning-webbased-virtual-reality-1st- ed-srushtika-neelakantam-44350680
- 7. Semmy Purewal Learning WebApp Development
- 8. Learning Web AppDevelopment by Semmy Purewal Copyright © 2014 Semmy Purewal. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are alsoavailableformosttitles(http://my.safaribooksonline.com).Formoreinformation,contactourcorporate/ institutional sales department: 800-998-9938 or corporate@oreilly.com. Editors: Simon St. Laurent and Meghan Blanchette Production Editor: Kara Ebrahim Copyeditor: Kim Cofer Proofreader: Kiel Van Horn Indexer: Judy McConville Cover Designer: Randy Comer Interior Designer: David Futato Illustrator: Rebecca Demarest February 2014: First Edition Revision History for the First Edition: 2014-02-10: First release See http://oreilly.com/catalog/errata.csp?isbn=9781449370190 for release details. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Learning Web App Development, the image of German Grey Heath, and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks.Wherethosedesignationsappearinthisbook,andO’ReillyMedia,Inc.wasawareofatrademark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein. ISBN: 978-1-449-37019-0 [LSI]
- 9. To my parents. Thanksfor all of your support and encouragement over the years!
- 11. Table of Contents Preface.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xi 1. The Workflow. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 Text Editors 1 Installing Sublime Text 2 Sublime Text Basics 4 Version Control 6 Installing Git 7 Unix Command-Line Basics 8 Git Basics 12 Browsers 20 Installing Chrome 20 Summary 21 More Practice and Further Reading 21 Memorization 21 Sublime Text 22 Emacs and Vim 22 Unix Command Line 23 More About Git 23 GitHub 23 2. The Structure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Hello, HTML! 25 Tags Versus Content 26 <p> Is for Paragraph 27 Comments 28 Headings and Anchors and Lists, Oh My! 29 Generalizations 32 The Document Object Model and Trees 33 v
- 12. Using HTML Validationto Identify Problems 35 Amazeriffic 38 Identifying Structure 39 Visualizing Structure with a Tree 41 Implementing the Structure with Our Workflow 42 Structuring the Main Content 46 Structuring the Footer 48 Summary 49 More Practice and Further Reading 49 Memorization 50 Tree Diagrams 50 Build the FAQ Page for Amazeriffic 51 More About HTML 51 3. The Style. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Hello, CSS! 53 Rulesets 56 Comments 56 Padding, Border, and Margin 57 Selectors 60 Classes 61 Pseudoclasses 62 More Complex Selectors 63 Cascading Rules 64 Inheritance 65 Layouts with Floats 66 The clear Property 71 Working with Fonts 72 Resetting Browser Inconsistencies 76 Using CSS Lint to Identify Potential Problems 78 Interacting and Troubleshooting with the Chrome Developer Tools 80 Styling Amazeriffic 82 The Grid 86 Creating the Columns 90 Adding and Manipulating Fonts 92 A Few More Modifications 92 Summary 92 More Practice and Further Reading 93 Memorization 93 CSS Selectors Practice 93 Style the FAQ Page for Amazeriffic 94 Cascading Rules 95 vi | Table of Contents
- 13. Responsiveness and ResponsiveLibraries 95 4. The Interactivity. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Hello, JavaScript! 97 Our First Interactive App 99 The Structure 100 The Style 102 The Interactivity 102 jQuery Generalizations 111 Setting Up a Project 111 Comments 112 Selectors 112 DOM Manipulation 112 Events and Asynchronicity 117 JavaScript Generalizations 120 Interacting with JavaScript in the Chrome JavaScript Console 120 Variables and Types 122 Functions 122 Selection 124 Iteration 125 Arrays 127 Using JSLint to Identify Potential Problems 128 Adding Interactivity to Amazeriffic 131 Getting Started 133 The Structure and Style 133 The Interactivity 134 Summary 140 More Practice and Further Reading 141 Memorization 141 jQuery Plug-ins 141 jQuery Selectors 142 FizzBuzz 143 Array Practice 143 Project Euler 146 Other JavaScript References 146 5. The Bridge. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Hello, JavaScript Objects! 149 Representing Playing Cards 150 Generalizations 152 Communication Between Computers 154 JSON 154 Table of Contents | vii
- 14. AJAX 155 Accessing anExternal JSON File 155 Overcoming Browser Security Restrictions 156 The getJSON Function 157 A JSON Array 158 So What? 159 Getting Images from Flickr 160 Adding a Tags Feature to Amazeriffic 163 The map Function 165 Adding a Tags Tab 166 Building the UI 167 Creating an Intermediate Tags Data Structure 169 Tags as Part of Our Input 173 Summary 175 More Practice and Further Reading 176 Flickr Slideshow 176 Object Practice 177 Other APIs 180 6. The Server. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Setting Up Your Environment 181 Installing VirtualBox and Vagrant 182 Building Your Virtual Machine 183 Connecting to Your Virtual Machine with SSH 184 Hello, Node.js! 186 Mental Models 187 Clients and Servers 187 Hosts and Guests 188 Practicalities 189 Hello, HTTP! 189 Modules and Express 191 Installing Express with NPM 192 Our First Express Server 192 Sending Your Client App 193 Generalizations 195 Counting Tweets 195 Getting Your Twitter Credentials 195 Connecting to the Twitter API 197 What’s Happening Here? 198 Storing Counts 198 Modularizing Our Tweet Counter 201 Importing Our Module Into Express 201 viii | Table of Contents
- 15. Setting Up aClient 202 Creating a Server for Amazeriffic 204 Setting Up Our Directories 204 Initializing a Git Repository 204 Building the Server 204 Running the Server 205 Posting Information to the Server 205 Summary 208 More Practice and Further Reading 209 Installing Node.js Locally 209 JSHint and CSS Lint via NPM 209 Generalizing Our Tweet Counter Code 210 Poker API 212 7. The Data Store. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 NoSQL Versus SQL 215 Redis 216 Interacting with the Redis Command-Line Client 216 Installing the Redis Module via a package.json File 217 Interacting with Redis in Our Code 219 Initializing the Counts from the Redis Store 220 Using mget to Get Multiple Values 222 MongoDB 222 Interacting with the MongoDB Command-Line Client 223 Modeling Data with Mongoose 226 Storing Amazeriffic ToDos 229 Summary 230 More Practice and Further Reading 231 Poker API 231 Other Database References 231 8. The Platform. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Cloud Foundry 233 Creating an Account 234 Getting Your App Ready for Deployment 234 Deploying Our App 235 Getting Information About Your Apps 237 Updating Your App 239 Deleting Apps from Cloud Foundry 240 Dependencies and package.json 240 Binding Redis to Your App 241 Binding MongoDB to Your App 245 Table of Contents | ix
- 16. Summary 246 More Practiceand Further Reading 246 Poker API 246 Other Platforms 247 9. The Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 Refactoring Our Client 249 Generalizing Meaningful Concepts 250 AJAXifying Our Tabs 253 Ridding Ourselves of Hacks 254 Handling AJAX Errors 256 Refactoring Our Server 257 Code Organization 257 HTTP Verbs, CRUD, and REST 259 Setting Up Routes by ID 260 Using jQuery for put and delete Requests 261 HTTP Response Codes 262 Model-View-Controller 263 Adding Users to Amazeriffic 264 Building the User Model 264 Building the User Controller 265 Setting Up Routes 266 Improving Our ToDo Controller Actions 268 Summary 270 More Practice and Further Reading 271 Removing ToDos 271 Adding a User Admin Page 272 Views Using EJS and Jade 273 Build Another App 273 Ruby on Rails 273 Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 x | Table of Contents
- 17. Preface In early 2008,after about six years of grad school and teaching part-time, I found myself hoping to land a job as a full-time computer science professor. It didn’t take me long to realize that professor jobs are really hard to come by, and obtaining a good one has almost as much to do with luck as it has to do with anything else. So I did what any self- respecting academic does when faced with a scary academic job market: I decided to make myself employable by learning how to develop web applications. Thismaysoundalittlestrange.Afterall,Ihadbeenstudyingcomputerscienceforabout nine years at that point, and had been teaching students how to develop software for about six years. Shouldn’t I have already known how to build web applications? It turns out that there’s a pretty large gap between practical, everyday software engineering and programming as taught by computer science departments at colleges and universities. In fact, my knowledge of web development was limited to HTML and a little CSS that I had taught myself at the time. Fortunately, I had several friends who were actively working in the web development world, and most of them seemed to be talking about a (relatively) new framework called Ruby on Rails. It seemed like a good place to focus my efforts. So I purchased several books on the topic and started reading online tutorials to get up to speed. And after a couple months of really trying to get it, I nearly gave up. Why? Because most of the books and tutorials started out with the assumption that I had already been developing web apps for years! And even though I had a pretty solid background in computer programming, I found all of the material extremely terse and difficulttofollow.Forexample,itturnsoutyoucantakeanawfullotofcomputerscience classes without ever coming across the Model-View-Controller design pattern, and some of the books assumed you understood that in the first chapter! Nevertheless, I managed to learn enough about web app development to get a few con‐ sulting gigs to support me until I managed to land a professor job. And through that, I xi
- 18. realized I enjoyedthe practical aspects of the field so much that I continued consulting outside of teaching. After a few years of doing both, I was offered the opportunity to teach my first class in Web Application Development at the University of North Carolina at Asheville. My initial inclination was to start with Ruby on Rails, but when I started reading the latest books and tutorials, I realized that they hadn’t improved much over the years. This isn’t to say that they aren’t good resources for people who already have a background in the basics, it’s just that they didn’t seem suitable for the students I was teaching. Sadly,butnotsurprisingly,theacademicbooksonwebdevelopmentarefarworse!Many of them contain outdated concepts and idioms, and don’t cover the topics in a way that make platforms like Ruby on Rails more accessible. I even reviewed one book that was updated in 2011 and still used table-based layouts and the <font> tag! I didn’t have much of a choice but to develop my course from scratch, creating all the material myself. I had done a little work in some consulting gigs with Node.js (server- side JavaScript) at the time, so I thought it would be interesting to try to teach a course that covered the same language on the client and server. Furthermore, I made it my goal to give the students enough background to launch into the self-study of Ruby on Rails if they decided to continue. This book consists largely of the material that I created while I was teaching this course at UNCA. It shows how to build a basic database-backed web application from scratch using JavaScript. This includes a basic web-development workflow (using a text editor and version control), the basics of client-side technologies (HTML, CSS, jQuery, Java‐ Script), the basics of server-side technologies (Node.js, HTTP, Databases), the basics of cloud deployment (Cloud Foundry), and some essential good code practices (functions, MVC, DRY). Along the way we’ll get to explore some of the fundamentals of the Java‐ Script language, how to program using arrays and objects, and the mental models that come along with this type of software development. Technology Choices For version control, I picked Git, because—well—it’s Git and it’s awesome. Plus, it gave my students the opportunity to learn to use GitHub, which is becoming immensely popular. Although I don’t cover GitHub in this book, it’s pretty easy to pick up once you get the hang of Git. I decided to use jQuery on the client because it’s still relatively popular and I enjoy working with it. I didn’t use any other frameworks on the client, although I do mention Twitter Bootstrap and Zurb Foundation in Chapter 3. I chose to stay away from modern client-side frameworks like Backbone or Ember, because I think they are confusing for people who are just starting out. Like Rails, however, you should be able to easily dive into them after reading this book. xii | Preface
- 19. On the server-side,I chose Express because it’s (relatively) lightweight and unopinio‐ nated. I decided against covering client- and server-side templating, because I think it’s essential to learn to do things by hand first. I decided against relational databases because it seemed like I couldn’t give a meaningful overview of the topic in the time I allotted to that aspect of the course. Instead, I chose MongoDB because it is widely used in the Node.js community and uses JavaScript as a query language. I also just happen to really like Redis so I provided coverage of that as well. I selected Cloud Foundry as the deployment platform because it was the only one of the three that I considered (including Heroku and Nodejitsu) that offered a free trial and didn’t require a credit card to set up external services. That said, the differences between the platforms aren’t huge, and going from one to another shouldn’t be too hard. Is This Book for You? This book is not designed to make you a “ninja” or a “rock star” or even a particularly good computer programmer. It won’t prepare you for immediate employment, nor can I promise that it will show you “the right way” to do things. On the other hand, it will give you a solid foundation in the essential topics that you’ll need in order to understand how the pieces of a modern web app fit together, and it will provide a launching point to further study on the topic. If you work your way through this book, you’ll know everything that I wish I had known when I was first starting out with Rails. You’ll get the most out of this book if you have a little experience programming and no previous experience with web development. At minimum, you probably should have seen basic programming constructs like if-else statements, loops, variables, and data types. That said, I won’t assume that you have any experience with object-oriented pro‐ gramming, nor any particular programming language. You can obtain the necessary background by following tutorials on Khan Academy or Code Academy, or by taking a programming course at your local community college. In addition to being used for self-study, I hope that this book can serve as a textbook for community classes in web application development, or perhaps a one-semester (14- week) college-level course. Learning with This Book Developing web applications is definitely a skill that you’ll need to learn by doing. With that in mind, I’ve written this book to be read actively. What this means is that you’ll get the most out of it if you’re sitting at a computer while reading it, and if you actually type in all the examples. Preface | xiii
- 20. Of course, thisparticular approach is fraught with peril—there is a danger that the code examples will not work if you don’t type them exactly as they appear. To alleviate that risk, I’ve created a GitHub repository with all of the examples in this book in working order. You can view them on the Web at http://www.github.com/semmypurewal/Lear ningWebAppDev. Because the full examples live there, I try to avoid redundantly in‐ cluding full code listings throughout. In addition, I leave big portions of the projects open-ended. When I do that, it’s because I want you to try to finish them on your own. I encourage you to do that before looking at the full examples I’ve posted online. Every chapter concludes with a set of practice problems and pointers to more information, so I encourage you to complete those as well. Teaching with This Book When I teach this material in a 14-week class, I usually spend about 2–3 weeks on the material in the first three chapters, and 3–4 weeks on the material in the last three. That means I spend the majority of the time on the middle three chapters, which cover Java‐ Script programming, jQuery, AJAX, and Node.js. The students that I teach seem to struggle the most with arrays and objects, so I spend extra time on those because I think they are so essential to computer programming in general. I definitely cover things in a more computer-sciency way than most books on this topic, so it might be a good fit for a course in computer science programs. Specifically, I cover mental models such as trees and hierarchical systems, and I try to emphasize functional programming approaches where they make sense (although I try not to draw attention to this in the narrative). If you find yourself teaching in a computer science program, you might choose to focus more clearly on these aspects of the material. I currently have no plans to post solutions to the practice problems (although that may changeifIgetalotofrequests),soyoucanfeelcomfortableassigningthemashomework and out-of-class projects. Where to Go for Help Asmentionedbefore,thereisaGitHubrepositorywithallofthecodesamplescontained in this book. In addition, you can check out http://learningwebappdev.com for errata and other updates as they are necessary. I also try to stay pretty accessible and would be glad to help if you need it. Feel free to tweet at me (@semmypurewal) with quick questions/comments, or email me any time (me@semmy.me) with longer questions. I also encourage you to use the “issues” feature of our GitHub repository to ask questions. I’ll do my best to respond as quickly as I can. xiv | Preface
- 21. General Comments onCode I’ve done my best to stay idiomatic and clear wherever possible. That said, those two goals are sometimes in conflict with each other. Therefore, there are times when I didn’t do things “the right way” for pedagogical reasons. I hope that those places are self- evident to experienced developers, and that they don’t cause any grief for novice devel‐ opers in the long run. All of the code should work fine in modern web browsers, and I’ve tested everything in Chrome. Obviously, I can’t guarantee things will work in older versions of Internet Explorer. Please let me know if you find any browser compatibility issues in the Internet Explorer 10+ or modern versions of any other browser. For the most part, I’ve followed idiomatic JavaScript, but there are a few places I’ve strayed. For example, I preferred double quotes instead of single quotes for strings, primarily because I’ve been working under the assumption that students may be coming from a Java/C++ background. I choose to use quotes around property names in object literals so that JSON doesn’t look too different from JavaScript objects. I also use $ as the first character in variables that are pointing to jQuery objects. I find that it maintains clarity and makes the code a little more readable for novices. Conventions Used in This Book The following typographical conventions are used in this book: Italic Indicates new terms, URLs, email addresses, filenames, and file extensions. Constant width Used for program listings, as well as within paragraphs to refer to program elements such as variable or function names, databases, data types, environment variables, statements, and keywords. Constant width bold Shows commands or other text that should be typed literally by the user. Constant width italic Shows text that should be replaced with user-supplied values or by values deter‐ mined by context. This element signifies a tip or suggestion. Preface | xv
- 22. This element signifiesa general note. This element indicates a warning or caution. Using Code Examples Supplemental material (code examples, exercises, etc.) is available for download at http://www.github.com/semmypurewal/LearningWebAppDev. This book is here to help you get your job done. In general, if example code is offered with this book, you may use it in your programs and documentation. You do not need to contact us for permission unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of ex‐ ample code from this book into your product’s documentation does require permission. We appreciate, but do not require, attribution. An attribution usually includes the title, author, publisher, and ISBN. For example: “Learning Web App Development by Semmy Purewal (O’Reilly). Copyright 2014 Semmy Purewal, 978-1-449-37019-0.” If you feel your use of code examples falls outside fair use or the permission given above, feel free to contact us at permissions@oreilly.com. Safari® Books Online Safari Books Online is an on-demand digital library that delivers expert content in both book and video form from the world’s leading authors in technology and business. Technology professionals, software developers, web designers, and business and crea‐ tive professionals use Safari Books Online as their primary resource for research, prob‐ lem solving, learning, and certification training. Safari Books Online offers a range of product mixes and pricing programs for organi‐ zations, government agencies, and individuals. Subscribers have access to thousands of books, training videos, and prepublication manuscripts in one fully searchable database xvi | Preface
- 23. from publishers likeO’Reilly Media, Prentice Hall Professional, Addison-Wesley Pro‐ fessional, Microsoft Press, Sams, Que, Peachpit Press, Focal Press, Cisco Press, John Wiley & Sons, Syngress, Morgan Kaufmann, IBM Redbooks, Packt, Adobe Press, FT Press, Apress, Manning, New Riders, McGraw-Hill, Jones & Bartlett, Course Technol‐ ogy, and dozens more. For more information about Safari Books Online, please visit us online. How to Contact Us Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 800-998-9938 (in the United States or Canada) 707-829-0515 (international or local) 707-829-0104 (fax) We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://oreil.ly/learning-web-app. To comment or ask technical questions about this book, send email to bookques tions@oreilly.com. For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com. Find us on Facebook: http://facebook.com/oreilly Follow us on Twitter: http://twitter.com/oreillymedia Watch us on YouTube: http://www.youtube.com/oreillymedia Acknowledgments Thanks to the nice folks in the Computer Science department at UNC Asheville for letting me teach this class twice. And, of course, thanks to the students who took the class for being patient with me as this material evolved. Thanks to my editor Meg Blanchette for doing her best to keep me on track and—of course—her constant patience with missed deadlines. I’m going to miss our weekly email exchanges! Thanks to Simon St. Laurent for offering lots of advice early on and helping me get the idea approved by O’Reilly. Preface | xvii
- 24. Sylvan Kavanaugh andMark Philips both did a very careful reading of every chapter and gave lots of very helpful feedback along the way. Emily Watson read the first four chapters and gave lots of thoughtful suggestions for improvements. Mike Wilson read the last four chapters and gave invaluable technical advice. I owe you all a debt of grat‐ itude and hope I can repay the favor one day. Bob Benites, Will Blasko, David Brown, Rebekah David, Andrea Fey, Eric Haughee, Bruce Hauman, John Maxwell, Susan Reiser, Ben Rosen, and Val Scarlata read various revisions of the material and provided helpful suggestions. I sincerely appreciate the time and effort they put in. You rock! Despite the all-around-excellence of the reviewers and friends who looked at the ma‐ terial,it’snearlyimpossibletowriteabooklikethiswithoutsometechnicalerrors,typos, and bad practices slipping through the cracks. I take full responsibility for all of them. xviii | Preface
- 25. CHAPTER 1 The Workflow Creatingweb applications is a complicated task involving lots of moving parts and interacting components. In order to learn how to do it, we have to break down these parts into manageable chunks and try to understand how they all fit together. Surpris‐ ingly, it turns out that the component we interact with most often doesn’t even involve code! In this chapter, we’ll explore the web application development workflow, which is the process that we use to build our applications. In doing so, we’ll learn the basics of some of the tools that make it a manageable and (mostly) painless process. These tools include a text editor, a version control system, and a web browser. We won’t study any of these in depth, but we’ll learn enough to get us started with client-side web programming. In Chapter 2, we’ll actually see this workflow in action as we’re studying HTML. If you’re familiar with these tools, you may want to scan the summary and the exercises at the end of the chapter and then move on. Text Editors The tool that you’ll interact with most often is your text editor. This essential, and sometimes overlooked, piece of technology is really the most important tool in your toolbox, because it is the program that you use to interact with your code. Because your code forms the concrete building blocks of your application, it’s really important that creating and modifying it is as easy as possible. In addition, you’ll usually be editing several files simultaneously, so it’s important that your text editor provide the ability to quickly navigate your filesystem. In the past, you may have spent a good deal of time writing papers or editing text documents with programs like Microsoft Word or Google Docs. These are not the types 1
- 26. of editors thatwe’re talking about. These editors focus more on formatting text than making it easy to edit text. The text editor that we’ll use has very few features that allow us to format text, but has an abundance of features that help us efficiently manipulate it. At the other end of the spectrum are Integrated Development Environments (IDEs) like Eclipse, Visual Studio, and XCode. These products usually have features that make it easy to manipulate code, but also have features that are important in enterprise software development. We won’t have the occasion to use any of those features in this book, so we’re going to keep it simple. So what kinds of text editors should we explore? Two primary categories of text editors are commonly used in modern web application development. The first are Graphical User Interface (GUI) editors. Because I’m assuming that you have some background in programming and computing, you’ve most likely experienced a Desktop GUI environ‐ ment. Therefore, these editors should be relatively comfortable for you. They respond well to the mouse as an input device and they have familiar menus that allow you to interact with your filesystem as you would any other program. Examples of GUI text editors include TextMate, Sublime Text, and Coda. The other category of text editors are terminal editors. These editors were designed before GUIs or mice even existed, so learning them can be challenging for people who are used to interacting with a computer via a GUI and a mouse. On the other hand, these editors can be much more efficient if you’re willing to take the time to learn one of them. The most commonly used editors that fall into this category are Emacs (shown in Figure 1-1) and Vim (shown in Figure 1-2). In this book, we’ll focus on using a GUI text editor called Sublime Text, but I encourage everyone to get some experience in either Emacs or Vim. If you continue on your web application development journey, it’s highly likely you’ll meet another developer who uses one of these editors. Installing Sublime Text Sublime Text (or Sublime, for short) is a popular text editor with several features that make it great for web development. In addition, it has the advantage that it’s cross- platform,whichmeansitshouldworkroughlythesamewhetheryou’reusingWindows, Linux, or Mac OS. It’s not free, but you can download an evaluation copy for free and use it for as long as you like. If you do like the editor and find that you’re using it a lot, I encourage you to purchase a license. 2 | Chapter 1: The Workflow
- 27. Figure 1-1. AnHTML document opened in Emacs Figure 1-2. An HTML document opened in Vim To install Sublime, visit http://www.sublimetext.com and click the Download link at the top. There you’ll find installers for all major platforms. Even though Sublime Text 3 is Text Editors | 3
- 28. in beta testing(at the time of this writing), I encourage you to give it a try. I used it for all the examples and screenshots in this book. Sublime Text Basics Once you have Sublime installed and run it, you’ll be presented with a screen that looks something like Figure 1-3. Figure 1-3. Sublime Text, after being opened for the first time The first thing you’ll want to do is create a new file. Do that by going to the File menu and clicking New. You can also do that by typing Ctrl-N in Windows and Linux or using Command-N in Mac OS. Now type Hello World! into the editor. The editor will look similar to Figure 1-4. You can change the appearance of the Sublime environment by going to the Sublime Text menu and following Preferences → Color Scheme. Try out a few different color schemes and find one that is comfortable for your eyes. It’s probably a good idea to spend some time exploring the theme options because you’ll spend a lot of time looking at your text editor. Note that you can also change the font size from the Font submenu under Preferences to make the text more readable. 4 | Chapter 1: The Workflow
- 29. Figure 1-4. Sublimeafter a new file is opened and Hello World! is typed into the file You probably noticed that Sublime changed the tab name from “untitled” to “Hello World!” as you typed. When you actually save, the default filename will be the text that appears in the tab name, but you’ll probably want to change it so that it doesn’t include any spaces. Once saved with a different name, the tab at the top will change to the actual filename. Notice that when you subsequently make any changes you’ll see the X on the right side of the tab change to a green circle—this means you have unsaved changes. After you’ve changed your theme and saved your file as hello, the editor will look similar to Figure 1-5. Because we’ll be working from the command line, it’s a good idea to avoid spaces or special characters in filenames. We’ll occasionally save files using the underscore ( _ ) character instead of a space, but try not to use any other nonnumeric or nonalphabetic characters. We’ll spend a lot of time editing code in Sublime, so we’ll obviously want to make sure we’re saving our changes from time to time. Because I expect that everyone has a little experience with code, I’ll assume that you’ve seen the edit-save-edit process before. On the other hand, there’s a related essential process that many new programmers don’t have experience with, and that’s called version control. Text Editors | 5
- 30. Figure 1-5. Sublimeafter the theme has been changed to Solarized (light) and the file has been saved as hello Version Control Imagine that you’re writing a long piece of fiction with a word processor. You’re peri‐ odically saving your work to avert disaster. But all of the sudden you reach a very im‐ portant plot point in your story and you realize that there is a significant part of your protagonist’s backstory that is missing. You decide to fill in some details, way back near the beginning of your story. So you go back to the beginning, but realize that there are two possibilities for the character. Because you don’t have your story completely out‐ lined, you decide to draft both possibilities to see where they go. So you copy your file into two places and save one as a file called StoryA and one as a file called StoryB. You draft out the two options of your story in each file. Believe it or not, this happens with computer programs far more often than it happens with novels. In fact, as you continue on you’ll find that a good portion of your coding time is spent doing something that is referred to as exploratory coding. This means that you’re just trying to figure out what you have to do to make a particular feature work the way it’s supposed to before you actually start coding it. Sometimes, the exploratory coding phase can spawn changes that span multiple lines in various code files of your application. Even beginning programmers will realize this sooner rather than later, and they will often implement a solution similar to the one just described. For example, beginners might copy their current code directory to another directory, change the name slightly, and continue on. If they realize that they’ve made a mistake, they can always revert back to the previous copy. 6 | Chapter 1: The Workflow
- 31. Thisisarudimentaryapproachtoversioncontrol.Versioncontrolisaprocessthatallows you to keeplabeled checkpoints in your code so you can always refer back to them (or even revert back to them) if it becomes necessary. In addition to that, version control is an essential tool for collaborating with other developers. We won’t emphasize that as often in this book, but it’s a good idea to keep it in mind. Many professional version control tools are available and they all have their own set of featuresandnuances.SomecommonexamplesincludeSubversion,Mercurial,Perforce, and CVS. In the web development community, however, the most popular version con‐ trol system is called Git. Installing Git Git has straightforward installers in both Mac OS and Windows. For Windows, we’ll use the msysgit project, which is available on GitHub as shown in Figure 1-6. The in‐ stallers are still available on Google Code and are linked from the GitHub page. Once you download the installer, double-click it and follow the instructions to get Git on your system. Figure 1-6. The msysgit home page For Mac OS, I prefer using the Git OS X installer shown in Figure 1-7. You simply download the prepackaged disk image, mount it, and then double-click the installer. At the time of this writing, the installer says that it is for Mac OS Snow Leopard (10.5), but it worked fine for me on my Mountain Lion (10.8) system. Version Control | 7
- 32. Figure 1-7. TheGit for OS X home page If you’re using Linux, you can install Git through your package management system. Unix Command-Line Basics There are graphical user interfaces to Git, but it’s much more efficient to learn to use it through the command line. Before you learn to do that, however, you’ll have to learn to navigate your filesystem using some basic Unix commands. Like I mentioned before, I am assuming you have a background in computing and programming so you’ve most likely interacted with a desktop GUI environment. This means that you’ve had to use the desktop environment to explore the files and folders stored on your machine. You typically do this through a filesystem navigator such as Finder for Mac OS or Windows Explorer in Windows. Navigating your computer’s filesystem from the command line is almost the same as navigating it using your system’s file browser. There are still files, and those files are organized into folders, but we refer to folders as directories. You can easily accomplish all the same tasks that you can accomplish in the file browser: you can move into a directory or out of a directory, see the files that are contained in a directory, and even open and edit files if you’re familiar with Emacs or Vim. The only difference is that there is no continuous visual feedback from the GUI, nor are you able to interact via a mouse. If you’re in Windows, you’ll do the following in the Git Bash prompt that you installed with the msysgit project described in the previous section. Git Bash is a program that 8 | Chapter 1: The Workflow
- 33. simulates a Unixterminal in Windows and gives you access to Git commands. To fire up the Git Bash prompt, you’ll navigate there via your Start menu. If you’re running Mac OS, you’ll use the Terminal program, which you can find in the Utilities directory of your Applications folder. If you’re using Linux, it depends a bit on the particular flavor you’re using, but there is usually an easily available Terminal program in your applica‐ tions. The default Mac OS terminal window is shown in Figure 1-8. Figure 1-8. A default terminal window in Mac OS Once you open the terminal, you’ll be greeted with a command prompt. It may look different depending on whether you’re using Windows or Mac OS, but it usually con‐ tains some information about your working environment. For instance, it may include your current directory, or maybe your username. In Mac OS, mine looks like this: Last login: Tue May 14 15:23:59 on ttys002 hostname $ _ Where am I? An important thing to keep in mind is that whenever you are at a terminal prompt, you are always in a directory. The first question you should ask yourself when presented with a command-line interface is “Which directory am I in?” There are two ways to answer this question from the command line. The first way is to use the pwd command, which stands for print working directory. The output will look something like this: Version Control | 9
- 34. hostname $ pwd /Users/semmy AlthoughI do use pwd on occasion, I definitely prefer to use the command ls, which roughly translates to list the contents of the current directory. This gives me more visual cues about where I am. In Mac OS, the output of ls looks something like this: hostname $ ls Desktop Downloads Movies Pictures Documents Library Music So ls is similar to opening a Finder or Explorer window in your home folder. The result of this command clues me in that I’m in my home directory because I see all of its subdirectories printed to the screen. If I don’t recognize the subdirectories contained in the directory, I’ll use pwd to get more information. Changing directories The next thing that you’ll want to do is navigate to a different directory than the one you’re currently in. If you’re in a GUI file browser, you can do this by simply double- clicking the current directory. It’s not any harder from the command line; you just have to remember the name of the command. It’s cd, which stands for change directory. So if you want to go into your Documents folder, you simply type: hostname $ cd Documents And now if you want to get some visual feedback on where you are, you can use ls: hostname $ ls Projects This tells you that there’s one subdirectory in your Documents directory, and that sub‐ directory is called Projects. Note that you may not have a Projects directory in your Documents directory unless you’ve previously created one. You may also see other files or directories listed if you’ve used your Documents directory to store other things in the past. Now that you’ve changed directories, running pwd will tell you your new location: hostname $ pwd /Users/semmy/Documents What happens if you want to go back to your home directory? In the GUI file browser, thereistypicallyabackbuttonthatallowsyoutomovetoanewdirectory.Intheterminal there is no such button. But you can still use the cd command with a minor change: use two periods (..) instead of a directory name to move back one directory: hostname $ cd .. hostname $ pwd /Users/semmy hostname $ ls 10 | Chapter 1: The Workflow
- 35. Desktop Downloads MoviesPictures Documents Library Music Creating directories Finally, you’ll want to make a directory to store all of your projects for this book. To do this, you’ll use the mkdir command, which stands for make directory: hostname $ ls Desktop Downloads Movies Pictures Documents Library Music hostname $ mkdir Projects hostname $ ls Desktop Downloads Movies Pictures Documents Library Music Projects hostname $ cd Projects hostname $ ls hostname $ pwd /Users/semmy/Projects Inthisinteractionwiththeterminal,youfirstlookatthecontentsofyourhomedirectory to make sure you know where you are with the ls command. After that, you use mkdir to create the Projects directory. Then you use ls to confirm that the directory has been created. Next, you use cd to enter the Projects directory, and then ls to list the contents. Note that the directory is currently empty, so ls has no output. Last, but not least, you use pwd to confirm that you are actually in the Projects directory. These four basic Unix commands are enough to get you started, but you’ll learn more as we move forward. I’ve included a handy table at the end of this chapter that describes and summarizes them. It’s a good idea to try to memorize them. Filesystems and trees Web development (and programming in general) is a very abstract art form. This roughly means that to do it effectively and efficiently, you’ll need to improve your ab‐ stract thinking skills. A big part of thinking abstractly is being able to quickly attach mental models to new ideas and structures. And one of the best mental models that can be applied in a wide variety of situations is a tree diagram. A tree diagram is simply a way of visualizing any kind of hierarchical structure. And because the Unix filesystem is a hierarchical structure, it’s a good idea to start practicing our mental visualizations on it. For example, consider a directory called Home that contains three other directories: Documents, Pictures, and Music. Inside the Pictures directory are five images. Inside the Documents directory is another directory called Projects. A tree diagram for this structure might look something like Figure 1-9. Version Control | 11
- 36. Figure 1-9. Atree diagram representing a file hierarchy It’s a good idea to keep this mental model in your head while you’re navigating the filesystem. In fact, I would recommend adding an asterisk (or something similar) that denotes your current directory and have that move as you’re moving through the filesystem. More generally speaking, if you try to attach a tree diagram to any hierarchical structure you’ll most likely find that it’s easier to understand and analyze. Because a large part of being an effective programmer comes from the programmer’s ability to quickly build mental models, it’s a good idea to practice attaching these tree diagrams to real-world hierarchical systems whenever they make sense. We’ll do that in a few instances throughout the rest of the book. Git Basics Nowthatwecannavigatethecommandline,we’rereadytolearnhowtokeepourproject under version control with Git. Configuring Git for the first time Like I mentioned before, Git is actually designed for large-scale collaboration among many programmers. Even though we’re going to use it for our personal projects, it will needtobeconfiguredsothatitcantrackourchangeswithsomeidentifyinginformation, specifically our name and email address. Open your terminal and type the following commands (changing my name and email address to yours, of course): hostname $ git config --global user.name "Semmy Purewal" hostname $ git config --global user.email "semmy@semmy.me" We’ll only need to do this once on our system! In other words, we don’t need to do this every time we want to create a project that we’re tracking with Git. 12 | Chapter 1: The Workflow
- 37. Now we’re readyto start tracking a project with Git. We’ll begin by navigating to our Projects folder if we’re not already there: hostname $ pwd /Users/semmy hostname $ cd Projects hostname $ pwd /Users/semmy/Projects Next we’ll create a directory called Chapter1, and we’ll list the contents of the directory to confirm that it’s there. Then we’ll enter the directory: hostname $ mkdir Chapter1 hostname $ ls Chapter1 hostname $ cd Chapter1 hostname $ pwd /Users/semmy/Projects/Chapter1 Initializing a Git repository Now we can put the Chapter1 directory under version control by initializing a Git repository with the git init command. Git will respond by telling us that it created an empty repository: hostname $ pwd /Users/semmy/Projects/Chapter1 hostname $ git init Initialized empty Git repository in /Users/semmy/Projects/Chapter1/.git/ NowtrytypingthelscommandagaintoseethefilesthatGithascreatedinthedirectory, and you’ll find there’s still nothing there! That’s not completely true—the .git directory is there, but we can’t see it because files prepended by a dot ( . ) are considered hidden files. To solve this, we can use ls with the -a (all) flag turned on by typing the following: hostname $ ls -a . .. .git This lists all of the directory contents, including the files prepended with a dot. You’ll even see the current directory listed (which is a single dot) and the parent directory (which is the two dots). If you’re interested, you can list the contents of the .git directory and you’ll see the filesystem that Git prepares for you: hostname $ ls .git HEAD config hooks objects branches description info refs We won’t have the occasion to do anything in this directory, so we can safely ignore it for now. But we will have the opportunity to interact with hidden files again, so it’s helpful to remember the -a flag on the ls command. Version Control | 13
- 38. Determining the statusof our repository Let’s open Sublime Text (if it’s still open from the previous section, close it and reopen it). Next, open the directory that we’ve put under version control. To do this, we simply select the directory in Sublime’s Open dialog box instead of a specific file. When you open an entire directory, a file navigation pane will open on the left side of the editor window—it should look similar to Figure 1-10. Figure 1-10. Sublime with the Chapter1 directory opened To create a new file in the Chapter1 directory, right-click (or Command-click on Mac OS) Chapter1 in the file navigation pane and select New File from the context menu. Thiswillopenanewfileasbefore,butwhenyousaveit,bydefaultitwillusetheChapter1 directory. Let’s save it as index.html. Once it has been named, double-click it and add the line “Hello World!” to the top of the file, as shown in Figure 1-11. 14 | Chapter 1: The Workflow
- 39. Figure 1-11. Sublimeafter the index.html file is added, edited, and saved Let’s see what has happened with our Git repo. Return to your terminal window and confirm you’re in the correct directory: hostname $ pwd /Users/semmy/Projects/Chapter1 hostname $ ls index.html Now type git status and you’ll see a response that looks something like this: hostname $ git status # On branch master # # Initial commit # # Untracked files: # (use "git add <file>..." to include in what will be committed) # # index.html There’s a lot of information here. We’re most interested in the section labeled Untracked files. Those are the files that are in our working directory, but are not currently under version control. Notice that our index.html file is there, ready to be committed to our Git repository. Version Control | 15
- 40. Our first commits! We’reinterested in tracking changes in our index.html file. To do that, we follow the instructions Git gave us and add it to the repo with the git add command: hostname $ git add index.html Notice that Git doesn’t respond at all. That’s okay. We can double-check that everything worked by typing git status again: hostname $ git status # On branch master # # Initial commit # # Changes to be committed: # (use "git rm --cached <file>..." to unstage) # # new file: index.html # This gives us the feedback we were looking for. Notice that index.html is now listed under the Changes to be committed heading. Once we’ve added the new files to the repository, we would like to commit the initial state of the repository. To do this, we use the git commit command along with the -m flagandameaningfulmessageaboutwhathaschangedsincethelastcommit.Ourinitial commit often looks something like this: hostname $ git commit -m "Initial commit" [master (root-commit) 147deb5] Initial commit 1 file changed, 1 insertion(+) create mode 100644 index.html This creates a snapshot of our project in time. We can always revert back to it later if something goes wrong down the road. If we now type git status, we’ll see that in‐ dex.html no longer appears because it is being tracked and no changes have been made. When we have no changes since our last commit, we say we have a “clean working directory”: hostname $ git status # On branch master nothing to commit (working directory clean) It’s easy to forget to include the -m and a commit message when committing. If that happens, however, you’ll most likely find your‐ self inside the Vim text editor (which is typically the default system editor). If that happens you can get out of it by hitting a colon (:) and then typing q! and pressing Enter to exit. 16 | Chapter 1: The Workflow
- 41. Next, let’s modifyindex.html with a minor change. We’ll add a second line that says “GoodbyeWorld!”Goaheadanddothatandsavethefileusingtheappropriatekeyboard shortcut. Now let’s see how git status responds to this change: hostname $ git status # On branch master # Changes not staged for commit: # (use "git add <file>..." to update what will be committed) # (use "git checkout -- <file>..." to discard changes in working directory) # # modified: index.html # no changes added to commit (use "git add" and/or "git commit -a") Notice that Git tells us that index.html has been modified, but that it’s not staged for the next commit. To add our modifications to the repository, we have to first git add the modified file and then we have to git commit our changes. We may want to verify the add has correctly happened by typing git status before the commit. This interaction might look something like this: hostname $ git add index.html hostname $ git status # On branch master # Changes to be committed: # (use "git reset HEAD <file>..." to unstage) # # modified: index.html # hostname $ git commit -m "Add second line to index.html" [master 1c808e2] Add second line to index.html 1 file changed, 1 insertion(+) Viewing the history of our repo So now we’ve made two commits to our project and we can revert to those snapshots at any time. In “More Practice and Further Reading” on page 21, I’ll link to a reference that will show you how to revert to a previous commit and start coding from there. But fornow,there’soneothercommandthatmaycomeinuseful.Wecanlookatourcommit history by using git log: hostname $ git log commit 1c808e2752d824d815929cb7c170a04267416c04 Author: Semmy Purewal <semmy@semmy.me> Date: Thu May 23 10:36:47 2013 -0400 Add second line to index.html commit 147deb5dbb3c935525f351a1154b35cb5b2af824 Author: Semmy Purewal <semmy@semmy.me> Date: Thu May 23 10:35:43 2013 -0400 Version Control | 17
- 42. Initial commit Like thefour Unix commands that we learned in the previous section, it’s really impor‐ tant to memorize these four Git commands. A handy chart in “Summary” on page 21 covers these commands. Saving versus committing In case it’s confusing, I want to take a moment to clearly differentiate between saving a file (through your text editor) and actually committing a change. When you save a file, you actually overwrite the file on your computer’s disk. That means that unless your text editor offers you some sort of built-in revision history, you can no longer access the old version of the file. Committing to a Git repository allows you to keep track of all the changes you made since the last time you committed the file. This means that you can always go back to a previous version of the file if you find that you’ve made an unrecoverable mistake in your file’s current state. At this point, it probably looks as though Git stores your code as a linear sequence of commits. That makes sense right now because you’ve learned a subset of Git that allows you to create a repository of where every commit follows exactly one other commit. We refer to the first commit as a parent commit and the second commit as a child commit. A Git repository with four commits looks similar to Figure 1-12. It’sworthnoting,however,thatacommitisaseriesofinstructionsfortakingyourproject to the next version. In other words, a Git commit doesn’t actually store the entire con‐ tents of your repository in the way that you would if you were to copy a directory to another directory. Instead, it only stores what needs to be changed: for example, a com‐ mit might store information like “add a line with Goodbye World" instead of storing the entire file. So it’s better to imagine a Git repository as a sequence of instructions. That’s why we write our commit messages in the present imperative tense—you can think of a commit as a series of instructions for taking your project from one state to the next. Why does all this matter? Actually, a Git repository may have a much more complex structure. A commit may have more than one child, and—in fact—more than one par‐ ent. Figure 1-13 shows an example of a more complex Git repository where both of those are true. 18 | Chapter 1: The Workflow
- 43. Figure 1-12. AGit repository with four commits Figure 1-13. A more complex Git repository Right now, we don’t know any Git commands that will allow us to create a structure like this, but if you continue on in your web app development journey, you’ll have to learn Version Control | 19
- 44. them eventually. Thepoint is that this should motivate you to start picturing your Git repo in a more visual way so that when things do get complex, you don’t get overwhelmed. Browsers The last tool that we’ll interact with regularly is the web browser. Because we’re learning to build applications that run in the web browser, it’s essential that we learn how to effectivelyuseourbrowserasadevelopertool,andnotjustasawindowintotheInternet. There are several excellent web browsers including Firefox, Safari, and Chrome. I would recommend becoming proficient in using the developer tools available in all of these browsers. But to keep everyone on the same page and to keep things simple, we’ll use Google Chrome as our browser of choice. Installing Chrome Whether you’re on Windows, Mac OS, or Linux, you can install Google Chrome easily by going to the Google Chrome web page. The installation process will, of course, vary, but the instructions are very clear. Once you install Chrome and run it for the first time, it should look something like Figure 1-14. Figure 1-14. Default Chrome window 20 | Chapter 1: The Workflow
- 45. Summary One of themost important aspects of web application development is getting used to an efficient and effective workflow. A modern workflow involves three important tools: a text editor, a version control system, and a web browser. Sublime Text is a popular, cross-platform text editor that is useful for editing source code. Git is a commonly used version control system that has a command-line interface. Chrome is an excellent web browser for web development. Before moving on, you should have all of the previously described tools installed on your computer. You should also memorize the commands in Table 1-1 and Table 1-2, which allow you to navigate your filesystem and interact with Git from the command line. Table 1-1. Unix commands Command Description pwd Print your current directory ls List the contents of your current directory ls -a List including all hidden files cd [dir] Change to the directory called [dir] mkdir [dir] Create a new directory called [dir] Table 1-2. Git commands Command Description git init Initialize your repository git status Display the status of your repository git add [file(s)] Stage [files] for the next commit git commit -m [msg] Commityourstagedfileswithmessage[msg] git log Show the commit history More Practice and Further Reading Memorization In teaching and learning, memorization often has a negative connotation. In my mind, this view is mostly misguided, particularly when it relates to computer programming. If you follow the mindset that “well, I can just look that up when I need it,” you’ll spend more time looking up basic stuff than focusing on the more challenging things that arise. Imagine, for instance, how much more difficult long division would be if you didn’t have your multiplication tables memorized! Summary | 21
- 46. With that inmind, I’m going to include a “Memorization” section at the end of the first few chapters that will cover the basic things that you should memorize before moving on to the next chapter. For this chapter, those things are all related to Git and the Unix command line. You should repeatedly do the following things until you can do them without looking at any documentation: 1. Create a new folder using the command line. 2. Enter that folder on the command line. 3. Create a text file in your text editor and save it as index.html in the new directory. 4. Initialize a Git repository from the command line. 5. Add and commit that file to the repository from the command line. What’s the best way to memorize this sequence of tasks? Simple: do it over and over again. I’ll pile more onto this task throughout the next few chapters, so it’s important to master these steps now. Sublime Text As I mentioned before, you’ll be spending a lot of time in your text editor, so it’s probably a good idea to move a little beyond the basics. The Sublime website has a great support page that has links to documentation and videos that demonstrate advanced features of the editor. I suggest that you explore the page and see if you can level up your Sublime skills. Emacs and Vim Nearly every web developer will eventually have to edit a file on a remote server. This means that you won’t be able to use a text editor that requires a GUI. Emacs and Vim are incredibly powerful editors that make doing so a breeze, but the learning curve on both is relatively steep. If you can find the time, it is really worthwhile to learn the basics of both editors, but it seems to me that Vim has become more common among web developers in recent years (full disclosure: I’m an Emacs user). The GNU home page has an excellent overview of Emacs, including a tutorial for be‐ ginners. O’Reilly also has several books on Emacs and Vim including Learning the vi and Vim Editors by Arnold Robbins, Elbert Hannah, and Linda Lamb and Learning GNU Emacs by Debra Cameron, James Elliott, Marc Loy, Eric S. Raymond, and Bill Rosenblatt. It would be to your benefit to learn how to do the following things in both editors: 1. Open and exit the editor. 2. Open, edit, and save an existing file. 22 | Chapter 1: The Workflow
- 47. 3. Open multiplefiles simultaneously. 4. Create a new file from within the editor and save it. 5. Search a file for a given word or phrase. 6. Cut and paste portions of text between two files. If you take the time to do that, you’ll get a pretty good sense of which editor you would prefer to spend more time with. Unix Command Line The Unix command line takes ages to master, but you’ve learned enough to get started. Inmyexperience,it’sfarbettertolearnthingsinthecontextofsolvingspecificproblems, but there are a few other basic commands that I use regularly. Using a Google search, learn about some of these common commands: cp, mv, rm, rmdir, cat, and less. These will all come in handy at various times. More About Git Git is an extraordinarily powerful tool—we’ve only barely scratched the surface of its capabilities. Fortunately, Scott Chacon has written Pro Git (Apress, 2009), a great book that covers many aspects of Git in a lot of detail. The first two chapters cover several features that will help you move through this book more efficiently, including reverting to previously committed versions of your repository. The third chapter of Chacon’s book covers the concept of branching in detail. Branching is a bit beyond the scope of this book, but I hinted at it earlier. I encourage you to explore this topic because the ability to easily and quickly branch your repository is really one of the best features of Git. GitHub GitHub is an online service that will host your Git repositories. If you keep your code open source, it’s free. If you want to create private Git repositories, GitHub’s cheapest plan is about $7 per month. I encourage you to sign up for the free plan and explore storing Git repositories on GitHub. GitHub’s help page walks you through setting up a GitHub account and connecting it to your Git repository. It also has a ton of useful information on both Git and GitHub in general. Use it to get started. More Practice and Further Reading | 23
- 49. CHAPTER 2 The Structure Overthe course of the next two chapters, we’re going to get an overview of two relatively important client-side topics: HTML and CSS. Because there’s no way that we can cover both of these in detail, these two chapters will be written primarily as a series of hands- on tutorials that will help you learn enough HTML and CSS to support the code ex‐ amples in the remainder of the book. “More Practice and Further Reading” on page 49 will encourage you to explore other resources. If you’re already familiar with HTML and CSS, it’s likely that you can comfortably move on to Chapter 4, which starts with client-side JavaScript. You may want to scan the chapters and read the summary at the end before doing so. Hello, HTML! HTML, which stands for HyperText Markup Language, is a technology that allows us to specify the structure of the visual elements (sometimes referred to as the user inter‐ face) of a web application. What do I mean when I say structure? Let’s take a look at a simple example. To get started, we’ll use the command line to create a directory called Chapter2 in our Projects directory. Recall that we’ll use the mkdir command for that. Next, let’s open that directory in Sublime Text using either the File menu or the shortcut keys. Create a new file called hello.html inside that directory. Type in the contents exactly as you see here: <!doctype html> <html> <head> <title>My First Web App</title> </head> <body> <h1>Hello, World!</h1> 25
- 50. </body> </html> Tags Versus Content Asyou’re typing, one of the things you may notice is that the document consists of two types of content. One type of content is normal text content like “My First Web App” and “Hello, World!” The other type of content, like <html> and <head>, is surrounded by angle brackets, and we refer to these elements as tags. Tags are a form of metadata, and this metadata is used to apply structure to the content of the page. Fire up Chrome and open the file in your web browser using the Open File option in the File menu. You’ll see something that looks similar to Figure 2-1. It’s a good idea to get the hang of keyboard shortcuts because it will make your workflow more efficient. The keyboard shortcut for open‐ ing a file in Chrome is Command-O if you’re in Mac OS. In Linux or Windows, it’s Ctrl-O. Figure 2-1. hello.html opened in Chrome Notice that the tags don’t appear, but the other content does. The “My First Web App” content appears as the title of the tab, while the “Hello, World” content appears in the body of the window. 26 | Chapter 2: The Structure
- 51. <p> Is forParagraph Now, we’ll make a minor modification by adding a paragraph with some lorem ipsum text, which is simply filler text that we can replace with actual copy later. You can cut and paste the text from the Wikipedia page for lorem ipsum: <!doctype html> <html> <head> <title>My First Web App</title> </head> <body> <h1>Hello, World!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </body> </html> Once we make the changes, we can save the changes to the document. Now we can go backtoourbrowserandreloadthepagebyclickingthecirculararrownexttotheaddress bar in Chrome. You should see the body of the browser update with the content, as illustrated in Figure 2-2. You can refresh this page with Ctrl-R in Windows and Command-R in Mac OS. This will be our typical workflow when editing web pages. We’ll open the file in our text editor, make some minor changes, and reload the web browser to see the changes. Hello, HTML! | 27
- 52. Figure 2-2. Modifiedexample1.html opened in Chrome Comments Comments are a convenient way to annotate our HTML. We start an HTML comment with <!-- and end a comment with -->. Here’s a simple example that’s built on the one in the previous section: <!doctype html> <html> <head> <title>Comment Example</title> </head> <body> <!-- This is the main heading --> <h1>Hello World!</h1> <!-- This is the main paragraph --> <p>I'm a main paragraph, most likely associated with the h1 tag since I'm so close to it!</p> </body> </html> Because computer programs are written for humans to read, it’s always a good idea to annotate some of the more complicated code. You’ll see examples of HTML comments peppered throughout the book and you’ll likely run into commented HTML on the Web. 28 | Chapter 2: The Structure
- 53. Headings and Anchorsand Lists, Oh My! Now that we’ve seen some examples of basic tags and comments, what other kinds of tags can we include in our markup? First, we can generalize the <h1> tag by creating <h2>, <h3>, <h4>, <h5>, and <h6> tags. They represent different heading levels, and are usually reserved for important content on the page. The most important heading content should be contained in an <h1> tag, whereas heading content of lesser importance should appear in the others: <!doctype html> <html> <head> <title>Heading Tag Examples</title> </head> <body> <!-- This is the main header --> <h1>This is very important!</h1> <!-- This is some content that might be associated with the important stuff --> <p>Important paragraph</p> <h2>This is a less important header</h2> <p>And here is some less important content</p> </body> </html> Another important tag in an HTML document is the <a> tag, which stands for anchor and is used to create links. The anchor tags are a unique characteristic of hypertext because they can link to other information, either on the current page or another web page altogether. To use anchor tags, we have to also include an HTML href attribute, which tells the browser where to go when a link is clicked. The href attribute goes inside the opening tag: <!doctype html> <html> <head> <title>Link Examples</title> </head> <body> <!-- the href attribute tells us where to go when the anchor element is clicked --> <p>Here is a <a href="http://www.google.com">link</a> to Google!</p> Hello, HTML! | 29
- 54. <p> <a href="http://www.example.com"> And thisis a link that is a little longer </a> </p> <p> And here is a link to <a href="http://www.facebook.com">www.facebook.com</a> </p> </body> </html> When we open this page in the web browser, we’ll get something that looks like Figure 2-3. Figure 2-3. A page with links using anchor tags All of the blue underlined text on the page is clickable, and when clicked it will take you to the page specified in the href attribute. One problem with this example is that it’s using paragraph elements to list content. Wouldn’t it be better if we had a specific tag that represented a list? It turns out that we have two of them! The <ol> tag and the <ul> tag represent ordered lists and unordered lists, respectively. Inside these lists, we have <li> tags that represent list items. In the previous example, it doesn’t look like the order of the links matters much, so perhaps an unordered list would be best: 30 | Chapter 2: The Structure
- 55. Another Random Documenton Scribd Without Any Related Topics
- 56. As Dean Swiftdied in 1745, at the green old age of seventy-eight, the above lines were probably written about the close of the previous century; and certainly not much progress was made for the comfort of passengers, as I can myself bear testimony. I well remember the lumbering, slow coach that used to convey me from London to Chichester thrice a year, when the holidays from Westminster came about. It started at five o'clock in the morning, reaching its destination late in the evening, six inside passengers being stuffed in a small space capable of holding four comfortably. At all the hills—and there are plenty on this road—we were politely asked to descend from the vehicle, as the wretched horses could scarcely drag their heavy load even on level ground. It was always considered in those days dangerous to mount the roof; still any risk was better than being stifled inside, and often have I, despite the inclemency of the weather, taken the box seat, getting thoroughly wet through before half my journey had been accomplished. This reminds me of a witticism of a guard who, being told by a passenger that he had tried every sort of waterproof coat, but that nothing would keep him dry, "Why, then," said the other, "don't you invest a penny in a Yarmouth bloater? Eat that, and I warrant you'll be dry all day?" None except those who have been victims to the misery of inside berths can imagine the wretchedness of them—a coach licensed to carry six inside—for so small was the space, so low was the roof, that the legs of the inmates were cramped, and their backs doubled up. Then the atmosphere was most oppressive—forty, sometimes fifty, stone of human beings huddled together, with both windows up. Again, the occupants—occasionally a fat nurse and a squalling baby; a farmer, rude in health and manners; a painted old Jezebel, redolent of Macassar oil and patchouli; a fledgling dandy, strong of musk; a bloated publican, on the verge of delirium tremens, who, as the old song says, "kept his spirits up by pouring spirits down;" a snuffy old maid, whose nasal organ was so supplied with "lundyfoot" that it set her companions sneezing immoderately. Then the inside
- 57. passengers were tobe fed, and a strong odour of cheese, apples, oranges, cakes, brandy, rum, gin, beer prevailed everywhere. Often in my early days have I travelled from London to Brighthelmstone (now called Brighton) in a coach thus described:— "Lewes and Brighthelmstone—new machine to hold four persons, by Charley, sets out by the 'George Inn,' in the Haymarket, St. James's at six o'clock in the morning, every Monday, Wednesday, and Friday, in one day to the 'Star' at Lewes, and the 'Old Ship' at Brighthelmstone, and returns from there every Tuesday, Thursday, and Saturday. Inside passengers to Lewes to pay thirteen shillings; to Brighthelmstone, sixteen shillings. To be allowed fourteen pounds weight of baggage, all above to pay one penny per pound." The above was a great improvement upon a coach previously drawn by six long-tailed black horses, thus described:— "Batchelor's Old Godstone, East Grinstead, and Lewes stage continues to set out every Tuesday at nine o'clock and Saturday at five o'clock from the 'Talbot Inn', in the Borough, returning every Monday and Thursday. Children in lap and outside passengers to pay half price. Half of the fare to be paid at booking. Performed, if God permit, by J. Batchelor." I may here remind my readers that when the Prince Regent, afterwards George IV., selected Brighton, as a marine residence, and squandered thousands and thousands of pounds upon the Pavilion, the journey from London to this then small fishing town occupied two days; the first night being passed at Reigate or at Cuckfield, according to the road the stage travelled. About seventy-five years ago an attempt was made to run through in one day, and, to the surprise of many, was accomplished; but it was not until 1823 that the Brighton road became (what it continued to be until the rail was introduced) the first in England for well- appointed coaches, first-rate teams, and gentleman-like drivers.
- 58. Harry Stevenson, whowas educated at Cambridge, was the first to introduce the fast light coach, called the "Waterwitch," and truly did he "witch the world with noble coachmanship." After a time this beau-ideal of dragsmen started another coach in lieu of the "Waterwitch," which he called the "Age," and which was unrivalled. Who that ever saw that fancy team, the skewbald, dun, chestnut, and roan, sightly and full of action, leave the Castle Square, witnessed that which never has been and never can be equalled, in this or in any other country. With Stevenson commenced the rage for driving public conveyances by noblemen and gentlemen, to which I shall refer in a future chapter. It may here not be out of place to lay before my readers a statement of the working of the stage-coaches in bygone days. In 1742 a stage-coach left London for Oxford at seven o'clock in the morning, and reached Uxbridge at midday. It arrived at High Wycombe at five in the evening, where it rested for the night, and proceeded at the same rate for the seat of learning on the morrow. Here, then, were ten hours consumed each day in travelling twenty-seven miles, and nearly two days in performing what was afterwards done under six hours by the "Defiance" and other coaches. To go from London to York used to take six days. In 1784 I read of the Edinburgh diligence, horsed with a pair, which set off daily from the "Saracen's Head," in the Gallowgate, Glasgow, at seven o'clock in the morning, and arrived at Edinburgh at eight o'clock at night. This conveyance stopped at Cumbernauld for an hour and a half in order to give the passengers time for breakfast, and again for the same time at Linlithgow for dinner. A third stoppage took place in order that the passengers might enjoy their tea, when they again proceeded on their road, and were finally set down safely in the Grassmarket of Edinburgh at eight o'clock at night. About this period there was a ponderous machine with six broad wheels, and drawn by eight horses, called the Newcastle waggon. In addition to passengers, it generally carried a great portion of the
- 59. Glasgow linen andcotton manufactures to the London market. It travelled at the rate of twenty-five miles a day, and was three weeks upon the road between Glasgow and London, resting always upon the Sundays. At that time the best mode of conveyance from Glasgow to the English capital was by a trading vessel from Borrowstounness; and so remarkable was a sight of London considered in Glasgow, that a worthy citizen who bore the same Christian and surname as another friend was, after his return from London, distinguished as "London John." The use of stage-coaches rapidly extended itself, and there was scarcely a town through which some stage-coach did not pass. After a time, the heavy six-inside lumbering vehicle gave way to the light four-inside fast coach; and from the year 1825 until the introduction of railways, nothing could exceed the "turns out" on the principal roads. In 1833 the distance between London and Shrewsbury (one hundred and fifty-four miles), Exeter (one hundred and seventy-one miles), and Manchester (one hundred and eighty-seven miles) was done in a day. The Mail to Holyhead performed the journey (two hundred and sixty-one miles) in twenty-seven hours, and that to Liverpool (two hundred and three miles) in twenty-one hours. The journey to Brighton was accomplished at the rate of twelve miles an hour, including stoppages, and the Bath, Bristol, Southampton, Oxford, and Cambridge coaches were famed for their excellent arrangements. In 1807 one of the Stamford stage-coaches that daily ran to London performed the journey (ninety-nine miles) in nine hours and four minutes from the time of starting; although the passengers were allowed time to breakfast and dine upon the road. The coach must necessarily have run at the rate of twelve miles an hour. The fast coach had nearly a horse to every mile of ground it ran, reckoning one way, or "one side of the ground"—for example, from London to Shrewsbury the distance is one hundred and fifty-eight miles, and the number of horses kept for the "Wonder" coach was one hundred and fifty.
- 60. The average priceof horses for these coaches was about £23. Fancy teams, and those working out of London, were rated considerably higher; but, taking a hundred miles of ground, well horsed, the above was about the mark. In these days it would be nearly if not quite double. The average period of each horse's service did not exceed four years.
- 61. CHAPTER II. DANGERS OFTRAVELLING—ANECDOTES OF HIGHWAYMEN—INNKEEPERS AND HIGHWAYMEN—STAGE-COACH ROBBERIES—A 'CUTE LADY—A JOURNEY TO LONDON UNDER DIFFICULTIES—TRAVELLING IN 1770— VANBRUGH'S DESCRIPTION OF AN M.P.'S JOURNEY—SYDNEY SMITH ON MODERN IMPROVEMENT. CHAPTER II. In the days I write of, Macaulay tells us that the mounted highwayman, a marauder known to the present generation only from books, was to be found on every main road. Hounslow Heath on the Great Western Road, Finchley Common on the Great Northern Road, were, perhaps, the most celebrated of these spots; but there was hardly an open common or steep hill which was not infested with these enterprising plunderers. Upon two occasions I fell in with these gentlemen of the road. Once, when travelling in very early youth from London to Goodwood, the Chichester coach was stopped by two ill-favoured scoundrels, who were about to levy black mail on the inside passengers, when, fortunately, the sound of a travelling-carriage was heard, and thinking, probably, that the inmates of it might be armed, the robbers scampered off. The second adventure occurred to me when returning very late at night from Tunbridge Wells in a dennet with my trusty batman, John Hargreaves, by my side. We were ascending the hill that leads into Sevenoaks, my servant walking up it and I driving, when I heard a shrill whistle from one side of the road, which was immediately
- 62. responded to. Anticipatingsome mischief, I said "Jump in," and, obedient to orders, Hargreaves did so. Happily, we had reached the summit of the hill, when one man rushed forward and attempted to seize the horse's bridle, while another tried to hang on behind the gig. Hargreaves had my stick in his hand, a good ash plant, with which he struck the fellow a blow across the face, which made him relax his hold, while I gave a smart lash of the whip to my most willing horse, who started off at a tremendous pace down the hill, leaving my assailant sprawling on the ground, and within an inch of having his head run over by the wheel. "Stage-coach robberies were of daily occurrence, and it was generally supposed that they were connived at by many innkeepers; so much so, indeed, that proclamations were issued warning all innkeepers that the eye of the Government was upon them. Their criminal connivance, it was affirmed, enabled banditti to infest the roads with impunity. That those suspicions were not without foundation is proved by the dying speeches of some penitent robbers of that age, who appear to have received from the innkeepers services much resembling those which Farquhar's 'Boniface' rendered to 'Gibbet.'" In the "Domestic Intelligence" I read that "several passengers, both men and women, to the number of fifteen, going in three or four coaches towards Bath and Bristol, were set upon by some highwaymen (supposed to be soldiers) well armed, about Stoke Church, in Oxfordshire (a very desolate part at that time), who robbed them all of very considerable value." Another adventure may not prove uninteresting. Two travellers were journeying together over a dreary common, when one remarked to the other that he trusted they should not fall in with any highwaymen, as he had one hundred pounds secreted in his boot. They had not gone many miles before they came to a most secluded spot, where four cross roads met; the new-laid earth round the
- 63. finger-post, and agibbet at some little distance, with a skeleton body suspended in chains to it, showed that two human beings had met with ignominious deaths. They had been companions in crime, and in robbing the Mail the guard had been killed. An offer of a free pardon and two hundred pounds reward had been proclaimed, when one of the wretches, actuated by vile lucre, turned King's evidence, and sacrificed his friend. Although he had taken part in the robbery, as he did not fire the fatal shot, his pardon was granted and the blood money awarded him. On the morning of the execution of his partner in guilt, remorse seized hold of the informer, and by his own hand he rid the country of a villain. The two travellers, who, I ought to say, had met accidentally at an inn, reached the spot I have described; the wind whistled across the heath—the chains of the gibbet clanked, the birds of carrion hovered over the new-made grave, in which the suicide had been buried, and the body of the murderer dangled in the air. As they passed the grave of the suicide, three men suddenly rushed forward, determined, as they swore, with a dreadful imprecation, to have the money or the lives of the travellers. "Spare our lives! Take all I have!" cried one. "Here it is!" offering a handful of silver. "That won't do!" responded the highwayman. "I'll soon see what you have about you!" "Stay!" said the other. "My companion has our money hid away in his boot." "Traitor!" exclaimed his companion, while one of the gang, with blackened face and cocked pistol, proceeded to take off the boots of the terrified victim. "If you've spoken false," shouted the first, "I'll give you an ounce of lead for your pains."
- 64. "He has spokentruth," responded the searcher. "Here's a prize—a hundred pounds in Bank of England notes!" Securing the money, the two travellers were blindfolded and bound to the finger-post, while the horse was taken out of their gig and turned loose on the common. It was nearly an hour before they were released from their position, during which period the ill-used victim vented his anger pretty loudly. Upon reaching the next town where a deposition was made before a magistrate, the worthy Justice commented in rather a severe strain upon the base conduct of the miscreant who had acted so treacherous a part. "Hear my palliation," meekly said the accused. "Stand down; I've heard enough;" vociferated the man in authority. "One word," continued the other. "My object was not to screen myself at another's expense. My companion told me he had one hundred pounds in his boot; I had twelve hundred pounds in my waistband. Had I been searched, that must have been discovered, and would probably have led to my companion being searched; so I thought it better to sacrifice the smaller to the larger sum. I now return the money I was the means of his being deprived of, and in future recommend him to be more prudent in keeping his own counsel." One more anecdote of the road must suffice:— Early in the present century a rider for a mercantile house in the City of London was attacked a few miles beyond Winchester, by a highwayman, who, taking him by surprise, robbed him of his purse and pocket-book, containing cash and notes to a considerable amount. "Sir," said the rider, with great presence of mind, "I have suffered you to take my property, and you are welcome to it. It is my master's, and the loss of it cannot do him much harm; but, as it will
- 65. look very cowardlyin me to have been robbed without making any resistance, I should take it kindly of you just to fire a pistol through my coat." "With all my heart," replied the highwayman; "where will you have the ball?" "Here," said the rider, "just by the side of the button." The highwayman was as good as his word, but the moment he fired the rider knocked him off his horse; and, having stunned him with the blow, aided by a labourer who came up at the time, lodged him safely in Winchester Gaol. As late as the year 1814 stage-coach robberies continued, for I find in 1814 the Stroud Mail was robbed of bank-notes to the amount of two thousand eight hundred pounds; and in the following year the Buckingham stage-coach was robbed of bills and notes to a considerable amount. Occasionally the victims of a robbery advertised for the loss of any valued article, as will be seen by the following whimsical and good- humoured appeal extracted from Salisbury's "Flying Post" of Oct. 27, 1696:— "Whereas six gentlemen (all of the same honourable profession), having been more than ordinary put to it for a little pocket money, did, on the 14th instant, in the evening, near Kentish Town, borrow of two persons (in a coach) a certain sum of money, without staying to give bond for the repayment, and whereas fancy was taken to the hat, peruke, cravat, sword, and cane of one of the creditors, which were all lent as freely as the money; these are, therefore, to desire the said worthies, how fond soever they may be of the other loans, to unfancy the cane again, and send it to Will's Coffee-House in Scotland-yard, it being too short for any such proper gentlemen as they are to walk with, and too small for any of their important uses, and withal only valuable as having been the gift of a friend."
- 66. As late asthe year 1750 carriages were stopped at noonday in Hyde Park, and even in Piccadilly, and pistols presented at the breasts of the most fashionable people. A celebrated highwayman, by name M'Lean, was that year taken and executed. So eager were persons of all classes to see him that three thousand persons visited him one day after his condemnation. The usual reward offered by Government for the apprehension of every highwayman was a hundred pounds. It was not safe to venture out after dark. Travellers were armed in broad daylight, as though they were going to battle. In Lady Walpole's Letters I find the following description of a very 'cute lady:— "Lady Browne and I were, as usual, going to the Duchess of Montrose's at seven o'clock. The evening was dark. In the close lane, under the park pale, and within twenty yards of the gate, a black figure pushed by between the chaise and the hedge on my side. I suspected it was a highwayman, and so, I found, did Browne, for she was speaking, and stopped. To divert her fears I was going to say, 'Is not that the apothecary going to the Duchess?' when I heard a voice cry 'Stop!' and then the figure came back to the chaise. I had the presence of mind before I let down the glass, to take out my watch and stuff it within my dress under the arm. He said, "'Your purses and watches?' "'I have no watch,' I replied. "'Then, your purse.' "I gave it to him; it had nine guineas in it. It was so dark that I could not see his hand, but I felt him take it. He then asked for Lady Browne's purse, and said, "'Don't be frightened, I will not hurt you.' "'No, you won't frighten the lady,' I said.
- 67. "'No, I giveyou my word I will not hurt you,' he replied. "Lady Browne gave him her purse, and was going to add her watch; but he said, "'I am much obliged to you; I wish you good night,' pulled off his hat, and rode away. "'Well,' said I, 'you will not be afraid of being robbed another time, for, you see, there is nothing in it.' "'Oh! but I am,' she said; 'and now I am in terror lest he return, for I have given him a purse with bad money in it, that I carry on purpose.'" Again we read that not only was it dangerous to travel in bygone days from a fear of being robbed and murdered, but the roads were so bad that scarcely a day passed but a coach stuck fast in the mud, and remained there until a team of cattle could be procured from some neighbouring farm to tug it out of the slough. On the best lines of communication the ruts were deep, the descents precipitous, and the road often such that it was hardly possible to distinguish it in the dusk from the uninclosed heath and fen which lay on both sides." "Ralph Thoresby, the antiquary, was in danger of losing his way on the Great North Road, between Barnby Moor and Tuxford, and actually lost it between Doncaster and York. Pepys and his wife, travelling in their own coach, lost their way between Newbury and Reading. In the course of the same tour they lost their way near Salisbury, and were in danger of having to pass the night on the Plain. It was only in fine weather that the whole breadth of the road was available for wheeled carriages. Often the mud lay deep on the right and the left, and only a narrow track of firm ground rose above the quagmire. At such times obstructions and quarrels were frequent, and the path was sometimes blocked up during a long time by carriers, neither of whom would break the way.
- 68. "Thoresby has recordedin his diary many perils and disasters that befell him. On one occasion he learned that the floods were out between Ware and London, that passengers had to swim for their lives, and that a higgler had perished in the attempt to cross. In consequence of these tidings he turned out of the high road, and was conducted across some meadows, where it was necessary for him to ride to the saddle skirts in water. In the course of another journey he narrowly escaped being swept away by an inundation of the Trent. "Of course, during the period the waters were out coaches ceased to run. Thoresby was afterwards detained at Stamford four days on account of the state of the roads, and then ventured to proceed only because fourteen Members of the House of Commons, who were going up in a body to Parliament with guides and numerous attendants, took him into their company." The great route through Wales to Holyhead was in such a state that, in 1685, Henry Hyde, Earl of Clarendon, Viceroy, on his way to Ireland, was five hours in travelling fourteen miles from St. Asaph to Conway. Between Conway and Beaumaris he was forced to walk great part of the way, and the Countess was carried in a litter. His coach was, with great difficulty, and by the help of many hands, brought after him entire. In general, carriages were taken to pieces at Conway, and borne on the shoulders of stout Welsh peasants to the Menai Strait. At that period, and long after, the passage in the ferry-boat at the Menai Strait was slow and tedious, and the packet-boat from Holyhead to Kingstown seldom crossed over under eight or ten hours. Now a man may, as I did last Autumn, breakfast in London, and sit down to a half-past seven dinner in Dublin. In Sussex the roads were so bad that when Prince George of Denmark visited the stately mansion of Petworth in wet weather he was six hours in going nine miles, and it was necessary that a body of sturdy hands should be on each side of his coach in order to prop
- 69. it. Of thecarriages which conveyed his retinue, several were upset and injured. A letter from one of his suite has been preserved, in which the unfortunate gentleman-in-waiting complains that during fourteen hours he never once alighted, except when his coach was overturned or stuck fast in the mud. Great contrast is offered in this narrative to the present state of travelling; "only, to be sure," as Macaulay writes, "people did get up again with their heads on after a roll in the Sussex mud, which, unhappily, is not always the case after a railway collision." Arthur Young, who travelled in Lancashire in 1770, has left us the following account of the state of the roads at that time. "I know not," he says, "in the whole range of language, terms sufficiently expressive to describe this awful road. Let me most seriously caution all travellers who may accidentally propose to travel this terrible country to avoid it as they would a pestilence, for a thousand to one they break their necks or their limbs by overthrows or breakings down. They will here meet with ruts which I actually measured four feet deep, and floating with mud, only from a wet Summer. What, therefore, must it be after a Winter? The only mending it receives is tumbling in some loose stones, which serve no other purpose than jolting a carriage in the most intolerable manner. Let me persuade all travellers to avoid this terrible country, which must either dislocate their bones with broken pavement or bury them in muddy sand." In a well-known passage, Arthur Young vents his spleen at the expense of the municipal authorities of Lancashire, and reproachfully reminds them that, thanks to their abominable highways, London often suffers from want of animal food, while country farmers are unable to get more than five farthings a pound for good beef! A coach and six is in our time never seen, except as part of some pageant; the frequent mention, therefore, of such equipages in old books is likely to mislead. We hear of private carriages and public
- 70. stage-coaches of six,and attribute to magnificence what was really the effect of a very disagreeable necessity. A pair of horses now would do ten times the work six did in the days I write of, and I cannot illustrate this better than by giving Vanbrugh's most humorous description of the way in which a country gentleman, newly chosen a Member of Parliament, came up to London. On that occasion all the exertions of six beasts, two of which had been taken from the plough, could not save the family coach from being embedded in a quagmire. The scene takes place at Uncle Richard's house in London, previous to the arrival of his nephew, Sir Francis Headpiece, a country gentleman and Parliament man, who was strongly addicted to malt- liquor and field sports. Although only forty-two years of age, it appears that Sir Francis had drunk two-and-thirty tuns of ale, while in the pursuit of the chase he had broken his right arm, his left leg, and both his collar-bones. Uncle Richard had just read his wiseacre nephew's letter, when James, the footman, enters hastily. "Sir, Sir," he exclaims, "they're all a-coming; here's John Moody arrived already. He's stamping about the streets in his dirty boots, asking every man he meets if they can tell where he may have a good lodging for a Parliament man, till he can hire such a house as becomes him. He tells them his lady and all the family are coming too, and that they are so nobly attended they care not a fig for anybody. Sir, they have added two cart-horses to the four old bays, because my Lady will have it said she came to town in her coach- and-six; and, ha, ha! heavy George, the ploughman, rides postilion." "Very well, James," responds his master, "the journey begins as it should do. Dost know whether they bring all the children with them?" "Only Squire Humphrey and Miss Betty, Sir; the other six are put to board, at half-a-crown a week a head, with Joan Grouse, at
- 71. Smokedunghill Farm." "Dost knowwhen they'll be here?" "Sir, they'd have been here last night, but that the old wheezy horse tired, and the two fore wheels came crash down at once in Waggonrut Lane. Sir, they were cruelly loaden, as I understand. My Lady herself, he says, laid on four mail-trunks, besides the great deal box which fat Tom and the monkey sat upon behind." "So." "Then within the coach there was Sir Francis, my Lady, the great fat lap-dog, Squire Humphrey, Miss Betty, my Lady's maid, Mrs. Handy, and Dolly the cook; but she was so ill with sitting backward that they mounted her into the coachbox." "Very well." "Then, Sir, for fear of a famine before they could get to the baiting- place, there were such baskets of plum-cake, Dutch gingerbread, Cheshire cheese, Naples biscuits, macaroons, neats' tongues, and cold boiled beef—and in case of sickness, such bottles of usquebagh, black cherry brandy, cinnamon-water, sack, tent, and strong beer, as made the old coach crack again; and for defence of this good cheer and my Lady's little pearl necklace, there was the family basket-hilt sword, the great Turkish scimitar, the old blunderbuss, a good bag of bullets, and a great horn of gunpowder." "Admirable." "Then for band-boxes, they were so bepiled up to Sir Francis's nose that he could only peep out at a chance hole with one eye, as if he were viewing the country through a perspective-glass." Sir John Vanbrugh, who wrote the above admirable account of a journey to London, was the grandson of a Protestant refugee from the Netherlands, and the son of a wealthy sugar-baker. Little is known of the history of his youth, or of that training which enabled
- 72. him not onlyto become one of the most celebrated English architects, but also, in conjunction with Congreve, to produce some excellent comedies. As an architect, he designed Castle Howard and Blenheim; as a dramatist, his most successful plays were "The Relapse" and "The Provoked Wife," and the uncompleted "Journey to London," which was worked up by Colley Cibber into "The Provoked Husband." "The good of ancient times let others state; I think it lucky I was born so late." So wrote Sydney Smith, and it is a sentiment that all must concur in. The witty divine goes on to state:— "A young man alive at this period hardly knows to what improvement of human life he has been introduced, and I would bring before his notice the following changes which have taken place in England since I first began to breathe in it the breath of life—a period amounting now to nearly seventy-three years. Gas was unknown. I groped about the streets of London in all but the utter darkness of a twinkling oil lamp, under the protection of watchmen in their grand climacteric, and exposed to every species of depredation and insult. I have been nine hours sailing from Dover to Calais before the invention of steam. It took me nine hours to go from Taunton to Bath before the invention of railroads, and I now go in six hours from London to Bath." The witty Reverend then proceeds to refer to wooden pavements instead of stone ones, the new police instead of the superannuated "Charleys," the well-appointed cab (what would he have said to the hansom)? in lieu of the lumbering hackney coach, waterproof instead of primitive pulp hats; he then calls the attention of the reader to the introduction of gentlemen's braces, colchicum, calomel, and clubs. He might have added, the greatest boons of all, the telegraph, which "wafts a sigh from Indus to the Pole," or,
- 73. unpoetically speaking, announcesin an incredibly short space of time the arrival of a friend in India or America, nor would he have omitted chloroform, which saves hours of agony and torture, and which is an especial blessing to the humbler classes, who, when undergoing some painful operation, have not the comforts of the wealthier class about them.
- 74. CHAPTER III. SLOW COACHES—FASTCOACHES—"THE WONDER" AND "BLENHEIM"— PUBLIC DINNERS TO THE DRIVERS—PRESENTATION OF A SILVER CUP TO A DRIVER OF "THE BLENHEIM"—THE YOUNG OXONIANS FAIRLY TAKEN IN—NIMROD ON THE SHREWSBURY AND CHESTER "HIGHFLYER"—BANEFUL EFFECTS OF RAILWAYS ON THE ROAD—"THE DESERTED VILLAGE"—WONDERFUL FEAT OF LOCOMOTION. CHAPTER III. The term "slow coach" became proverbial, and was applied not only to the lumbering six-inside vehicles that travelled at almost a snail's pace, but to every schoolboy and collegian who possessed little or no gumption. Unfortunately, in those days the Society for the Prevention of Cruelty to Animals did not exist, or many a hulking fellow would have been had up for his merciless use of the lash when urging his wretched cattle up a severe hill or over ruts recently laid down with large unbroken stones—smooth "macadamised" roads being not then in prospective existence. So heavy was the draught that an appeal was being constantly made to the passengers to alight and walk up any acclivity, which upon a wet day or when the mud was ankle-deep, was not a very pleasant thing. Such was the system of travelling in the good old times, as they were called, when every affair of life moved on at a quiet, jog-trot pace. But when competition of the most eager kind became the order of the day, it cannot be said that mails or coaches stood still. The Edinburgh Mail ran four hundred miles in forty hours, stoppages included. The Exeter day coach, the "Herald," went over its ground, one hundred and seventy-three miles, in twenty hours, an admirable performance, considering the natural unevenness of the country;
- 75. and the DevonportMail performed the journey, two hundred and twenty-seven miles, in twenty-two hours. The increase of speed was alarming to those who had been accustomed to the old-fashioned slow coaches, and the rate at which the new vehicles travelled was considered reckless risking of human life. It may not be here out of place to observe that the first requisite in a coach horse is action, and the second sound legs and feet, with blood and bone. The third desideratum is good wind, as the power of respiration is called, without which the first and second qualifications avail but little for any length of time. A clear-winded coach horse will always keep his condition, and consequently his health, because he does not feel distress on a reasonable length of ground. The hunter or racer is good or bad, chiefly in proportion to his powers of respiration, and such equally applies to the coach horse. The food most proper, then, for a coach horse in fast work is that which affords ample support, without having a pernicious influence on his wind; or to use a more elegant, though not more forcible, expression, that which does not impair his respiratory organs by pressing on them. To return to the fast coaches, so splendidly were they horsed, and so admirably well did they keep their time, that they fully merited the following eulogium. At a dinner given at Shrewsbury some five and thirty years ago by coachmen and guards to the Honourable Mr. Kenyon, that gentleman, in proposing the health of Mr. R. Taylor, coach proprietor, made some interesting statements on the subject of stage-coach travelling. Among other remarks, he said:— "As a coach proprietor, Mr. Taylor was one of the most spirited in England. He had, at one time, two of the very best coaches that ever ran—the "Hirondelle" and "Wonder." No coach established for itself a higher reputation than the former. On May 1st, (the precise year he could not recollect) it accomplished its journey of one
- 76. Welcome to ourwebsite – the perfect destination for book lovers and knowledge seekers. We believe that every book holds a new world, offering opportunities for learning, discovery, and personal growth. That’s why we are dedicated to bringing you a diverse collection of books, ranging from classic literature and specialized publications to self-development guides and children's books. More than just a book-buying platform, we strive to be a bridge connecting you with timeless cultural and intellectual values. With an elegant, user-friendly interface and a smart search system, you can quickly find the books that best suit your interests. Additionally, our special promotions and home delivery services help you save time and fully enjoy the joy of reading. Join us on a journey of knowledge exploration, passion nurturing, and personal growth every day! ebookbell.com