SlideShare a Scribd company logo
Learning Web App Development 1st Edition Semmy
Purewal pdf download
https://ebookgate.com/product/learning-web-app-development-1st-
edition-semmy-purewal/
Get Instant Ebook Downloads – Browse at https://ebookgate.com
Get Your Digital Files Instantly: PDF, ePub, MOBI and More
Quick Digital Downloads: PDF, ePub, MOBI and Other Formats
Learn iOS 7 App Development 1st Edition James Bucanek
https://ebookgate.com/product/learn-ios-7-app-development-1st-
edition-james-bucanek/
Learning Mobile App Development A Hands on Guide to
Building Apps with iOS and Android 1st Edition Jakob
Iversen
https://ebookgate.com/product/learning-mobile-app-development-a-
hands-on-guide-to-building-apps-with-ios-and-android-1st-edition-
jakob-iversen/
Pro Windows Phone App Development 3rd Edition Falafel
Software
https://ebookgate.com/product/pro-windows-phone-app-
development-3rd-edition-falafel-software/
Windows Store App Development C and XAML Pete Brown
https://ebookgate.com/product/windows-store-app-development-c-
and-xaml-pete-brown/
Wearable Android Android Wear and Google FIT App
Development 1st Edition Sanjay M. Mishra
https://ebookgate.com/product/wearable-android-android-wear-and-
google-fit-app-development-1st-edition-sanjay-m-mishra/
Web Development with Django Cookbook Bendoraitis
https://ebookgate.com/product/web-development-with-django-
cookbook-bendoraitis/
User Centered Web Development 1st Edition Jonathan
Lazar
https://ebookgate.com/product/user-centered-web-development-1st-
edition-jonathan-lazar/
Web Based instructional Learning 1st Edition Mehdi
Khosrow-Pour
https://ebookgate.com/product/web-based-instructional-
learning-1st-edition-mehdi-khosrow-pour-2/
Node Web Development Second Edition David Herron
https://ebookgate.com/product/node-web-development-second-
edition-david-herron/
Learning Web App Development 1st Edition Semmy Purewal
Learning Web App Development 1st Edition Semmy Purewal
Semmy Purewal
Learning Web App Development
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]
To my parents.
Thanks for all of your support and encouragement over the years!
Learning Web App Development 1st Edition Semmy Purewal
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
Using HTML Validation to 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
Responsiveness and Responsive Libraries 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
AJAX 155
Accessing an External 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
Setting Up a Client 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
Summary 246
More Practice and 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
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
realized I enjoyed the 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
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
Of course, this particular 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
General Comments on Code
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
This element signifies a 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
from publishers like O’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
Sylvan Kavanaugh and Mark 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
CHAPTER 1
The Workflow
Creating web 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
of editors that we’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
Figure 1-1. An HTML 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
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
Figure 1-4. Sublime after 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
Figure 1-5. Sublime after 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
Thisisarudimentaryapproachtoversioncontrol.Versioncontrolisaprocessthatallows
you to keep labeled 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
Figure 1-7. The Git 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
simulates a Unix terminal 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
hostname $ pwd
/Users/semmy
Although I 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
Desktop Downloads Movies Pictures
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
Figure 1-9. A tree 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
Now we’re ready to 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
Determining the status of 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
Figure 1-11. Sublime after 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
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
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
Initial commit
Like the four 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
Figure 1-12. A Git 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
them eventually. The point 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
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
With that in mind, 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
3. Open multiple files 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
Learning Web App Development 1st Edition Semmy Purewal
CHAPTER 2
The Structure
Over the 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
Another Random Document on
Scribd Without Any Related Topics
Learning Web App Development 1st Edition Semmy Purewal
Learning Web App Development 1st Edition Semmy Purewal
Learning Web App Development 1st Edition Semmy Purewal
The Project Gutenberg eBook of A Pictorial Atlas of Fossil
Remains, consisting of coloured illustrations selected
from Parkinson's "Organic remains of a former world,"
and Artis's "Antediluvian phytology."
This ebook is for the use of anyone anywhere in the United States and most other
parts of the world at no cost and with almost no restrictions whatsoever. You may
copy it, give it away or re-use it under the terms of the Project Gutenberg License
included with this ebook or online at www.gutenberg.org. If you are not located in
the United States, you will have to check the laws of the country where you are
located before using this eBook.
Title: A Pictorial Atlas of Fossil Remains, consisting of coloured illustrations selected
from Parkinson's "Organic remains of a former world," and Artis's
"Antediluvian phytology."
Author: Gideon Algernon Mantell
Release date: January 31, 2021 [eBook #64434]
Most recently updated: October 18, 2024
Language: English
Credits: Tom Cosmas from files generously provided by The Internet Archive. All
derived products are placed in the Public Domain.
*** START OF THE PROJECT GUTENBERG EBOOK A PICTORIAL ATLAS OF FOSSIL
REMAINS, CONSISTING OF COLOURED ILLUSTRATIONS SELECTED FROM
PARKINSON'S "ORGANIC REMAINS OF A FORMER WORLD," AND ARTIS'S
"ANTEDILUVIAN PHYTOLOGY." ***
Learning Web App Development 1st Edition Semmy Purewal
JOSEPH DINKEL. DEL. ET LITH. PRINTED BY M. & N. HANHAR
THE PERFECT SERIES OF THE BONES OF THE RIGHT FOOT OF THE
MOA, OR EXTINCT COLOSSAL OSTRICH-LIKE BIRD OF NEW ZEALAND
FOUND IMBEDDED IN AN ERECT POSITION, WITH THE CORRESPONDING
FOOT A YARD IN ADVANCE, IN A TURRARY DEPOSIT, AT WAIKOUAITI
IN THE MIDDLE ISLAND, BY WALTER MANTELL ESQRE OF
WELLINGTON.
FIGURES 1a
2a
3a
THE PLANTAR OR UNDER SURFACE OF THE FIRST,
SECOND & THIRD TOES. THE FIGURES ARE 1
/3 NATURAL SIZE LINEAR.
THE ORIGINAL BIRD WAS ABOUT 10 FEET HIGH.
A
PICTORIAL ATLAS
OF
FOSSIL REMAINS,
CONSISTING OF COLOURED
ILLUSTRATIONS
SELECTED FROM
PARKINSON'S "ORGANIC REMAINS OF A FORMER
WORLD;"
AND
ARTIS'S "ANTEDILUVIAN PHYTOLOGY."
WITH DESCRIPTIONS
BY GIDEON ALGERNON MANTELL, ESQ. LL.D. F.K.S.
VICE-PRESIDENT OF THE GEOLOGICAL SOCIETY,
FELLOW OF THE ROYAL COLLEGE OF SURGEONS OF ENGLAND, ETC.
AUTHOR OF "THE WONDERS OF GEOLOGY," ETC. ETC.
"All things in nature are engaged in writing their own history. The planet
and the pebble are attended by their shadows—the rolling rock leaves its
farrows on the mountain side—the river its channel in the soil—the animal
its bones in the stratum—the fern and the leaf inscribe their modest
epitaphs on the coal—the falling drop sculptures its story on the sand, or
on the stone—not a footstep on the snow or on the ground but traces in
characters more or less enduring the record of its progress."—Emerson.
With Seventy-four plates,
CONTAINING NEARLY NINE HUNDRED FIGURES.
LONDON:
H. G. BOHN, YORK STREET, COVENT GARDEN.
1850.
LONDON:
R. CLAY, PRINTER, BREAD STREET HILL.
TO
THE VERY REVEREND
WILLIAM BUCKLAND, D.D. F.R.S.
Dean of Westminster,
&c. &c. &c.
THIS WORK IS INSCRIBED
AS AN EXPRESSION OF THE HIGH RESPECT AND AFFECTIONATE REGARD
OF ONE WHO HAS FOR MORE THAN THIRTY YEARS
ENJOYED THE HONOUR AND PRIVILEGE OF HIS CORRESPONDENCE
AND FRIENDSHIP.
Chester Square, Pimlico,
January 1850.
PREFACE.
In the hope of promoting the diffusion of a taste for the cultivation of a peculiarly
interesting and attractive branch of Natural History, I have been induced, in
compliance with the suggestion of the eminent publisher of this volume, to arrange in
a connected series the Plates of the late Mr. Parkinson's "Organic Remains of a Former
World," and of Mr. Artis's "Antediluvian Phytology," with descriptions of the specimens
represented.
As I have been enabled, with the valuable assistance of my friend, John Morris,
Esq. F.G.S., the author of "A Catalogue of British Fossils," to append, in almost every
instance, the generic and specific names adopted by the most recent authorities, the
volume will, I trust, not only prove interesting to the general reader, as a beautiful
Pictorial Atlas of some of the most remarkable relics of the animals and plants of a
"Former World," but also constitute a valuable book of reference in the library of the
Geologist and Palæontologist, since it contains the names and localities of no
inconsiderable number of species and genera.
For the guidance of the unscientific reader who may desire further information on
any of the subjects treated of in the following pages, references are given to a few
general works on Geology and Fossil Remains.
Chester Square, Pimlico,
August 1850.
TABLE OF CONTENTS.
PAGE
Preface v
Description of the Frontispiece x
Introduction 13
Descriptions of the Plates.
FOSSIL REMAINS OF THE VEGETABLE KINGDOM.
(Plates I. to XXXIII. inclusive.)
Plate
I.—Various specimens of Fossil Wood, and
fragments of Plants
19
II.—Chiefly examples of silicified Wood 21
III.—Stigmaria, Calamites, and Wood 23
IV.—Fronds of various Fossil Ferns 25
V.—Different species of Ferns and other Plants 27
VI.—Principally Fossil Fruits from the London clay
of the Isle of Sheppey
29
VII.—Specimens of the Fruit of a species of Nipas,
or Molucca Palm; from the Isle of Sheppey
31
VIII.—Figures of different portions of beautiful
silicified Stems of Plants allied to the
Arborescent Ferns; from Chemnitz
33
IX.—Fossil Seed-vessels or Cones (Lepidostrobus)
of the Lepidodendron
35
X.—An aquatic Plant (Hydatica) in Coal shale 37
XI.—A fine specimen of another species of
Hydatica
39
XII.—A delicate aquatic Plant (Myriophyllites) in
Coal shale
41
XIII.—Portion of the Stem of the Calamites ramosus 43
XIV.
—Fragment of Stems of another species of
Calamite (Calamites dubius)
45
XV.
—Stem of a Calamite very much resembling the
Bamboo (Calamites pseudo-bambusia)
47
XVI.—Another species of Calamite (Calamites
approximatus)
49
XVII.—Stem of another kind of Calamite (Calamites
decoratus)
51
XVIII.—Fossil Stems allied to the Pandanus or Yucca
(Sternbergia transversa)
53
XIX.—Stem of a species of Sigillaria (Sigillaria
fibrosa)
55
XX.—Stem of another kind of Sigillaria 57
XXI.—Fossil Roots of Sigillaria (Stigmaria ficoides) 59
XXII.—Another species of Stigmaria (Stigmaria
verrucosa)
61
XXIII.—Fragment of a Stigmaria with large tubercles 63
XXIV.
—Part of a Stem of a tree allied to Sigillaria
(Aspidiaria cristata)
65
XXV.
—Stem of a Plant allied to the Arborescent
Ferns (Megaphyton)
67
XXVI.—Stem of a species of Lepidodendron 69
XXVII.—Fossil Plant allied to the Lepidodendron 71
XXVIII.—A beautiful fossil Fern resembling Osmunda
regalis (Neuropteris auriculata)
73
XXIX.—An elegant trifoliate Fern in Coal shale
(Neuropteris trifoliata)
75
XXX.—An exquisite specimen of fossil Fern
(Pecopteris Miltoni)
77
XXXI.—Another elegant Fern in Coal shale
(Pecopteris plumosa)
79
XXXII.—A very beautiful plumose Fern in Coal shale
(Alethopteris decurrens)
81
XXXIII.—A fossil Fruit or Seed-vessel in Coal shale
(Carpolithes marginatus)
83
FOSSIL REMAINS OF THE ANIMAL KINGDOM.
(Plates XXXIV. to LXXIV: inclusive.)
XXXIV.—A beautiful mass of Coral (Syringopora
geniculata) on Carboniferous limestone
87
XXXV.—Several kinds of fossil Corals
(Syringopora ramulosa, Catenipora
escharoides, &c.)
89
XXXVI.—Corals from different formations (Fungia,
Cyathophyllum)
91
XXXVII.—Various fossil Corals (Astrea,
Lithostrotion, Caryophyllia annularis)
93
XXXVIII.—Corals and Coral marbles
(Cyathophyllum, Astrea, Lithodendron)
95
XXXIX.—Fossil Corals, and Sponges or
Amorphozoa (Siphonia, Favosites,
Explanaria)
97
XL.—Various fossil Zoophytes (Clionites,
Millepora)
99
XLI.—A beautiful specimen of a cyathiform
fossil Zoophyte (Chenendopora Parkinsoni)
101
XLII.—Several kinds of Zoophytes in Flint
(Choanites, Siphonia, Jerea)
103
XLIII.—Various Corals and other Zoophytes
(Fungia polymorpha, Jerea pyriformis,
Ventriculite)
105
XLIV.—Silicified Sponges and other Zoophytes
(Scyphia, Cnemidium, Chenendopora)
107
XLV.—Several kinds of calcareous and silicified
Corals and other Zoophytes
109
XLVI.—A recent Pentacrinus (P. caput medusæ),
and a beautiful Fossil species
111
XLVII.—Numerous specimens of portions of
Stems, separate Ossicles, and Receptacles,
of various kinds of Encrinites and
Pentacrinites
113
XLVIII.—The Lily Encrinite (Encrinites
monileformis)
115
XLIX.—Remains of several kinds of Encrinites
and Encrinital marbles
117
L.—Chiefly specimens of the Pear Encrinite
of Bradford, in Wiltshire (Apiocrinus
Parkinsoni)
119
LI.—Several kinds of Crinoidea
(Actinocrinites, Pentacrinites)
121
LII.—Specimens of Pentacrinites from Lyme
Regis
123
LIII.—Fossil Star-fishes (Goniaster, Ophiura,
Cidaris)
125
LIV.—Various kinds of Echinites or fossil Sea-
urchins (Clypeaster, Ananchytes,
Discoidea, Conulus) 127
LV.—Several varieties of fossil Echini (Cidaris,
Nucleolites, Micraster, Spatangus) 129
LVI.—Echinites and echinital Spines 131
LVII.—Fossil univalve Shells (Euomphalus, &c.)
and Cololites
133
LVIII.—Fossil Shells of various kinds of
Cephalopoda (Nautilus, Orthoceras,
Lituties, &c.)
135
LIX.—Belemnites, Orthoceratites, and
Hippurites, &c.
137
LX.—Belemnites and Ammonites 139
LXI.—Hamites of several species; Scaphites,
Nummulites, &c.
141
LXII.—Fossil Foraminifera of several genera 143
LXIII.—Several species of Trigonia 145
LXIV.—Fossil bivalve Shells (Cucullæa,
Crassatella, Lima, Cardium, &c.), and the
anomalous bodies termed Trigonellites 147
LXV.—Fossil Shells of the genera Panopæa,
Teredina, &c.
149
LXVI.—Fossil Shells of the genera Ostrea,
Perna, Gryphea, &c.
151
LXVII.—Chiefly Shells of brachiopodous Mollusca,
(Terebratula, Spirifer, Productus, &c.) 153
LXVIII.—Fossil Crabs from Sheppey; Trilobites,
Insects, &c.
155
LXIX.—Remains of Turtles from Sheppey, and
Vertebræ of Crocodilian Reptiles from
Havre, and of the Mosasaurus
157
LXX.—The Jaws of the fossil Reptile of
Maestricht (Mosasaurus); and Teeth of
various kinds of Sharks and Rays
(Carcharias, Miliobatis, Pthychodus, &c.) 159
LXXI.—Skull and Antlers of the fossil Elk of
Ireland, and Teeth of the Mammoth
161
LXXII.—Fossil teeth of Hippopotamus,
Rhinoceros, Dinotherium, Palæotherium,
and Anoplotherium; and ungueal bone of
Megalonyx 163
LXXIII.—Skeleton of the Megatherium, and Teeth
of the fossil Bears of the Caverns
165
LXXIV.—Molar Teeth of Mastodon giganteus,
from Big-bone Lick, Kentucky
167
Frontispiece.—Foot of the Moa of New Zealand.
SUPPLEMENTARY NOTES.
1.Fossil Bears of the Caverns 166
2.The Belemnite ib.
3.Fossil Remains of Birds—Moa of New Zealand 172
4.Botanical Arrangement of Fossil Vegetables 175
5.Cephalopoda—Nautilus, Ammonite, &c. 180
6.Carboniferous Formations 181
7.Coal 182
8.Corals ib.
9.Cuvier's Principles of Palæontology 183
10.Fossil Edentata, Megatherium, &c. 184
11.Flint: Animal Remains in Siliceous Nodules 185
12.Foraminifera 186
13.The Gigantic extinct Irish Elk: Cervus
megaloceros
189
14.Fossil Infusoria ib.
15.The Mosasaurus, or Fossil Animal of Maestricht 191
16.Fossil Reptiles 192
17.
———————- of the Wealden: the Iguanodon
193,
202
18.——————————————— the
Pelorosaurus
197
19.Silicification and Siliceous Petrifactions ib.
20.Stigmariæ and Sigillariæ 198
Index 203
WORKS REFERRED TO IN THE DESCRIPTIONS.
Michelin, Iconographie Zoophytologie, Paris, 4to.
Göppert, H. R. Die Fossilen, Farrnkrauter,—forming vol. xvii. of the Nova
Acta Academiæ C. L. C. Naturæ Curiosorum. 1836, 4to.
Presl, C. B., Sternberg, Dr. G. Flora der Vorwelt, Part VII. and VIII. edited by
Presl.
Goldfuss, Dr. A., Petrefacta Germaniæ, folio, Dusseldorf, 1841-44.
Fossil Flora of Great Britain, by Dr. Lindley and Mr. Button.
Dr. Buckland's Bridgewater Essay on Geology and Mineralogy, 2 vols, with
numerous Plates.
The Wonders of Geology, 3 vols, sixth edition, 1849.
The Medals of Creation, 2 vols. 1844.
Geological Excursions round the Isle of Wight and along the adjacent Coast
of Dorsetshire, 1 vol. numerous Plates.
Thoughts on Animalcules, 1 vol. numerous coloured Plates, second edition,
1850.
Thoughts on a Pebble, with 30 Illustrations, eighth edition, 1850.
Lyell, Sir Charles, Travels in. America, 1845, and 1849.
DESCRIPTION OF THE FRONTISPIECE.
THE MOA OF NEW ZEALAND.
The Frontispiece represents the entire series of bones composing the right foot of
the Moa (Dinornis robustus), found imbedded in an erect position, with the
corresponding foot a yard in advance, in a turbary deposit, at Waikouaiti, in the
Middle Island of New Zealand, in 1849. The figures are one-third less in linear
dimensions than the originals.
Figures 1a, 2a, 3a, show the palmar, or under surface of the respective toes, and
exhibit the trochlear or articulating extremities of the phalangeal bones.
The ancient swamp or morass in which these matchless specimens were
imbedded, is situated on the shore, in a little creek or bay near Island Point, at the
mouth of the river Waikouaiti, and is covered by the sea except at the lowest tides.
Many remains of the largest species of Moa have from time to time been obtained
from this deposit; the bones sent to England by Dr. Mackellar, Mr. Percy Earle, and
others, figured and described in the Zoological Transactions by Professor Owen, were
from this locality.
The specimens figured were obtained by Mr. Walter Mantell, in 1849, when
visiting Waikouaiti, as Government Commissioner for the settlement of Native claims.
On the recession of the tide, the upper (or proximal) ends of the metatarsals were
just visible above the surface: these were carefully dug up, and all the bones of the
respective toes numbered, one by one, as they were extracted from the soil. In this
state they were sent to me, and have subsequently been articulated under my
direction, in their natural order of arrangement.[1]
[1] By the well-known eminent anatomical artist, Mr. Flower, of 22, Lambeth
Terrace, Lambeth Road.
The condition and position of the bones, and the nature of the deposit,—evidently
an ancient morass, in which the New Zealand flax (phormium tenax) once grew
luxuriantly,—remind us of the very similar circumstances in which the extinct gigantic
Elks in Ireland, and the Mastodons in America, have occasionally been found engulfed
in peat bogs and morasses; and, as my son emphatically observes, it is impossible to
arrive at any other conclusion than that the Moa to which these feet belonged, had
sunk down in the swamp, and perished on the spot. Vertebræ and other parts of a
skeleton of a bird of the same proportions, were dug up near the feet.
As the specimens under examination are the first examples in which the entire
series of the phalangeal and ungueal bones have been found in natural connexion
with the metatarsals, I subjoin the admeasurements of the several parts, to render
the peculiar construction of the feet in one species of the lost race of the colossal
birds of New Zealand, more obvious to those who may feel interested in the subject.
TARSO-METATARSAL BONES.
Inches.Lines.
Length of the shaft from the distal end of the middle
trochlea to the proximal extremity
17 0
Circumference of the proximal end 11 9
Transverse diameter, or width, of ditto 4 6
Antero-posterior diameter of ditto 3 6
Circumference of the middle of the shaft 6 3
Antero-posterior diameter of ditto 1 8
Transverse diameter of ditto 3 6
Width of the distal, or trochlear, end 6 3
Circumference of the trochlear end 15 6
Antero-posterior diameter of the middle trochlea 3 9
PHALANGEAL BONES.
Inner Toe.
(Fig. 1.)
Middle Toe.
(Fig. 2.)
Outer Toe.
(Fig. 3.)
Inches.Lines. Inches.Lines. Inches.Lines.
First, or
proximal
phalanx
{
Length 4 9 — 4 3 — 3 2
Circumference of
proximal end
6 6 — 6 9 — 5 9
Second
phalangeal
bone.
{
Length 1 9 — 2 6 — 1 9
Circumference of
proximal end
3 0 — 5 3 — 4 9
Third phalangeal
bone {
Length Ungueal.
{
3 0
}
4 0
— 1 9 — 1 0
Circumference of
proximal end
— 4 6 — 4 6
Third phalangeal
bone {
Length Ungueal.
{
3 0
}
4 2
— 0 11
Circumference of
proximal end
— 4 0
Fifth ungueal
bone {
Length 2 6
Circumference of
proximal end
3 9
The total length of the toes is as follows:—inner digit, 9½ inch.; middle, 11½
inch.; outer, 91/3 inch. The transverse diameter of the expanse of the foot, from the
distal extremity of the inner toe (fig. 1a), to that of the outer one (fig. 3a), is 15½
inches. The length from the posterior part of the trochlear extremity of the metatarsal
to the distal end of the ungueal of the middle toe (fig. 2a), is 13 inches. If to the
actual dimensions of the bones be added the proportional thickness of the
cartilaginous integuments, nails, &c., the length of the foot of the living bird may be
estimated at about 16 inches, and the breadth at 17 or 18 inches.
From the great width and solidity of the metatarsals, and the form and
corresponding size and strength of the phalangeals and ungueals, the ornithologist
will perceive that the feet of the Moa must have constituted powerful instruments for
scratching, digging, and uprooting the sub-terrestrial vegetable substances, which
Professor Owen, with great probability, infers, formed the chief sustenance of the
extinct colossal birds of New Zealand.
According to the relative proportions of the bones composing the hinder
extremities of the gigantic species of Moa, the corresponding tibia, or leg-bone, of
the feet above described, would be two feet nine inches in length, and the femur, or
thigh bone, nine and a half inches; the total height of the bird was probably about
ten feet.
Tibiæ, femora, and other bones of much larger proportions, (apparently of
Dinornis giganteus and D. ingens,) were obtained from the same locality; some of
these indicate birds of eleven or twelve feet in height; dimensions exceeding by one-
third those of the largest known existing species of Struthionidæ—the Ostrich.[2]
[2] Even from this imperfect description (and further anatomical details would
be irrelevant in the present work), the ornithologist cannot fail to observe the
peculiar characters exhibited by these extremities of the remarkable family of
birds, of which the diminutive Apteryx appears to be the only living
representative. But the Apteryx differs most essentially in the structure of the
cranium and mandibles, from the extinct types to which Professor Owen has given
the names of Dinornis, Palapteryx, Aptornis, &c.
With regard to the construction of the feet it may be further remarked, that
the length of the inner and outer toes is nearly equal, as in the Cassowary; but
the middle toe, which in the Cassowary is one-third longer than the other digits,
in the Moa scarcely exceeds in length by one-fifth, the inner and outer toes. The
ungueal segments are very large, being equal to one-third the length of the toes.
The phalangeals are relatively much shorter than in the Cassowary and Ostrich,
and wider than in the former, and more arched than in either of these living
struthious birds.
In the metatarsal the presence of the three elements whose fusion constitutes
the bone, is strongly marked; there does not appear to be any certain indications
of a posterior or hind toe, though Professor Owen imagines he has detected
feeble traces of a fourth digit: in that case the bird to which my specimens
belonged, would be termed Palapteryx. The crania found by Mr. Walter Mantell at
Waingongoro, and figured and described by Professor Owen in the Zoological
Transactions (Vol. III., Plates 52, 53, 54, 55), as Dinornis and Palapteryx, must
have belonged to birds of comparatively small stature. The skull with the adze-like
upper mandible, and the enormously-developed basi-occipitals and basi-sphenoids
(Dinornis, of Professor Owen, Plate 53), was found associated with many
vertebræ of the neck and back, and bones of the leg, of the same bird; and these
my son states indicated a height of from six to seven feet. The skull and the rest
of the skeleton were found imbedded in sand, and lying in their natural relative
position; unfortunately, all these precious remains, except the cranium, were
destroyed by a sudden rush of the natives to seize upon the exhumed relics! It
therefore yet remains to discover the cranial type that characterized the colossal
forms at present known only by other parts of the skeleton.
Referring the reader to the additional account of the fossil birds of New Zealand
given in a subsequent part of this volume (see Supplementary Notes, p. 173), I will
conclude this notice with a few general remarks. From the numerous facts relating to
the fossil remains of birds from our Antipodean colony, that have now been brought
under the consideration of the naturalists and geologists of this country, we may
safely conclude, that at a period geologically recent, but of immense antiquity in
relation to the human inhabitants of those Islands, New Zealand was densely peopled
by tribes of colossal struthious bipeds, of species and genera that have long since
become extinct. I believe that ages ere the advent of the Maori tribes, the Moa and
its kindred were the chief inhabitants of the country, and that from the period when
those Islands were taken possession of by man, the race gradually diminished, and
the colossal types were finally annihilated by human agency. That some of the largest
species were contemporary with the Maories, there can now be no reasonable doubt.
Apart from native traditions, and songs and tales in which allusions are made to the
gigantic magnitude and flowing plumage of the Moa, the collocation of calcined and
half roasted bones of the Dinornis, of dogs, and of the human species, in the ancient
fire-heaps of the aborigines, and the unequivocal marks of the celt or axe of jade on
some of the tibiæ,—the chips or cuts having evidently been made on the bones when
recent,—afford incontrovertible proof that the last of the Moas, like the last of the
Dodos, was annihilated by human agency.
From the remarkable size and strength of the thighs, legs, and feet of the Moas, it
is clear that the hinder limbs must have constituted powerful locomotive organs; and
when we consider the vast swarms of the largest species which existed at some
remote period, it seems highly probable that this family of colossal birds,—a family
unknown in any other part of the world,—was not originally confined within the
narrow geographical limits of modern New Zealand, but ranged over a vast continent
now submerged, and of which Phillip and Norfolk Islands, and Chatham and Auckland
Islands, and those of New Zealand, are the culminating points.
But whatever may be the result of future discoveries as to the relative age of the
bone-deposits, or the existence or extinction of any of the colossal species of Moa, or
the former extension of the race over countries now submerged, one astounding fact
must ever remain unassailable—the vast preponderance of the class Aves or Birds,
that prevailed, and which still prevails, in the fauna of New Zealand, to the almost
entire exclusion of mammalia and reptiles. Any palæontologist who saw only the
collections sent over by my son, must have been astonished at their extent and
variety. I may venture to affirm that such an assemblage of the fossil bones of birds
was never before seen in Europe: nearly fifteen hundred specimens, collected from
various parts of the country, with scarcely any intermixture of the remains of any
other class;—it is a phenomenon as startling as the exclusively reptilian character of
the fauna of the Wealden epoch. But the fauna of New Zealand, even at the present
time, presents a character as ornithic and as anomalous as its ancient one; for while
there are upwards of fifty or sixty genera of birds, there is but one indigenous
mammalian quadruped known to naturalists—a species of rat! In this respect,
therefore, as well as in its flora, in which ferns and other cellulosæ of peculiar types
prevail to an extent unknown elsewhere, the country offers a striking example of that
now acknowledged fact in natural history—a centre or focus of creation of certain
organic types. And this law, with whose operation during the palæozoic and
secondary ages modern geological researches have made us familiar, appears to have
continued in unabated energy to the present moment.
From what has been advanced, it is manifest that the present geographical
distribution of special groups of terrestrial animals and plants, displays as many
anomalies in the relative predominance of the different classes and orders over
certain areas, without relation to climatorial or other obvious physical conditions, as
can be traced in the natural records of the earlier ages of the world. The conclusion
therefore forces itself upon the mind, that throughout the vast periods of time to
which our retrospective knowledge extends, the geological changes of the earth's
surface, and the appearance and obliteration of species and genera, have been
governed by the same physical and organic laws; and that notwithstanding the
variable conditions of the land and the water, indicated by the sedimentary
formations, there was at no period a greater discrepancy in the assemblages of
certain types of the animal and vegetable kingdoms, than exists at present.
Of the nature of that law by which the extinction of a race of highly organized
beings is determined, and whose effects through innumerable ages palæontology has
in part revealed, we are as utterly ignorant as of that which governs the first
appearance of the minutest living animalcule which the powers of the microscope
enable us to descry; both are veiled in inscrutable mystery, the results only are within
the scope of our finite comprehension.[3]
[3] See the concluding part of Lecture VIII. § 46, Wonders of Geology, vol. ii.
p. 890.
INTRODUCTION.
The publication of Mr. Parkinson's "Organic Remains of a former World," at the
commencement of the present century, must be regarded as a memorable event in
the history of British Palæontology: it was the first attempt to give a familiar and
scientific account of the fossil relics of animals and plants, accompanied by figures of
the specimens described.
The three volumes[4] of which the work consisted, appeared at considerable
intervals; the last was published in 1811. Although nearly forty years have since
elapsed, and hundreds of geological works, of all kinds and degrees of merit, have
subsequently been issued, Mr. Parkinson's Plates, owing to their fidelity and beauty,
are still in such request, as to induce the proprietor, Mr. Bohn, now that the work is
out of print, to publish them, with the descriptions and modern names of the fossils
represented.
[4] Three volumes, in 4to.; price 10l. 10s.
I have added a few explanatory remarks, and in the "Supplementary Notes," have
given extended notices of some of the most interesting subjects, with the view of
rendering the volume more intelligible and acceptable to the general reader.
In looking through the original work of Mr. Parkinson, the instructed observer will
not fail to perceive the immense progress which the study of fossil animals and plants
has made since the period of its first appearance in 1811. At that time, the terms
Geology and Palæontology were unknown; all the sedimentary strata have since been
accurately defined and arranged, and names assigned to the respective systems or
formations; while the so-called Diluvial Epoch, which Mr. Parkinson, and even Baron
Cuvier, considered as established by incontrovertible physical evidence, has been
expunged from the chronology of geology. In Mr. Parkinson's volumes, no allusion will
be found to that most remarkable era in the earth's history which modern researches
have brought to light—the Age of Reptiles; the terms Ichthyosauri, Plesiosauri,
Iguanodon, Megalosaurus—now familiar as household words—are not inscribed on
their pages; all those marvellous beings of past ages have been discovered during
the last forty years; in short, the remark of an eminent critic is as true as it is
beautiful:—"Geology is a philosophy which never rests; its law is progress; a point
which yesterday was invisible is its goal to-day, and will be its starting-post to-
morrow."
I gladly avail myself of this opportunity to make a passing allusion to the excellent
and accomplished author, Mr. Parkinson. I had the pleasure and privilege of his
acquaintance in my youth, immediately after the publication of the third volume of
his valuable work. Mr. Parkinson was rather below the middle stature, with an
energetic, intelligent, and pleasing expression of countenance, and of mild and
courteous manners; readily imparting information, either on his favourite science, or
on professional subjects; for he was at that time actively engaged in medical practice
in Hoxton Square, and was the author of several valuable medical treatises. He kindly
showed and explained to me the principal objects in his cabinets, and pointed out
every source of information on fossil remains; a department of natural knowledge at
that time but little cultivated in England, but which peculiar circumstances had
contributed to render the engrossing object of my young and ardent mind. In after
years Mr. Parkinson warmly encouraged my attempts to elucidate the nature of the
strata and organic remains of my native county, Sussex, a district which was then
supposed to be destitute of geological interest; and he revised my drawings, and
favoured me with his remarks on many subjects treated of in my first work—"The
Fossils of the South Downs."[5]
[5] Published in 1822.
In 1822, Mr. Parkinson published "An Introduction to the Study of Fossil Organic
Remains, especially of those found in the British Strata; intended to aid the Student
in his Inquiries respecting the Nature of Fossils, and their Connexion with the
Formation of the Earth;" 1 vol. 8vo. with ten plates, principally of the genera of fossil
shells. He also contributed a few papers to the early volumes of the Geological
Society of London, of which he was one of the original members. After Mr.
Parkinson's death, his beautiful and choice collection was sold by auction, and its
contents widely dispersed. The fine series of silicified zoophytes was purchased by
Mr. Featherstonhaugh, and taken to America; and some years afterwards was
destroyed by a fire which consumed the museum in which it was placed.
As illustrative of the pleasing style of Mr. Parkinson's work, I subjoin an abstract of
the chapter, On the Pleasure and Advantages of a Knowledge of Fossil Remains. The
epistolary style was adopted; and the first letter is supposed to be penned by a friend
desirous of learning the nature of certain fossils he had observed on his journey to
Oxford:—
"I have lived long enough to witness many sad disappointments to the fond
dreams of happiness indulged by persons who, only intent on the acquisition of
riches, had neglected to cultivate any intellectual or ennobling pursuit; so that on
retiring from active life, they were unable to enjoy the leisure so dearly earned by
years of anxiety and care, and either relapsed into a state of miserable ennui, or gave
themselves up to the excitement of frivolous or vicious indulgences.
"Aware of the necessity of devoting the few leisure hours, which the duties of my
calling left at my disposal, to some rational and amusing occupation, I have always
cultivated, more or less assiduously, some branch of art or science, and thence
acquired an enthusiastic admiration for the beauties of nature, and an insatiable
curiosity to pry into the mysteries of the natural world. With this state of mind, I have
at length resolved to avail myself of the means my little fortune affords me to indulge
those feelings, and have, I trust, quitted the busy scenes of the world for ever.
"In pursuance of a plan long entertained of visiting the most interesting parts of
our island, I left London last week, accompanied by my daughter, and our old friend,
Frank Wilton, whose lively disposition and agreeable manners render him, as you well
know, an excellent companion. But he has made himself most acceptable to us on
another account;—his resolute scepticism with respect to the more rational, and his
submissive credulity as to the popular and traditional explanations of such natural
phenomena as are beyond his comprehension, are frequently productive of remarks
so quaint and humorous, as to contribute in no small degree to our enjoyment.
"Ere our first day's journey was completed, I discovered how insufficient was the
knowledge I possessed to enable me to form even a conjecture, as to the nature of
the very first objects which particularly arrested our attention. We were within a few
miles of Oxford, when Wilton, looking out of the carriage window, exclaimed, 'Bless
me! never before did I see roads mended with such materials!' This, of course, drew
my attention to what had so strongly excited his wonder; and I must confess that my
astonishment was but little less than his own; for I beheld a labourer with a large
hammer breaking to pieces a nearly circular ornamented stone, half as large as the
fore-wheel of our carriage, and resembling in form a coiled-up serpent, or snake. We
instantly stopped the chaise, and inquired of the man the name of the stone, and
where it came from. 'This, Sir,' he replied, 'is a snake-stone, and comes from yonder
quarry, where there are thousands of them.' Upon hearing this, we all alighted, and
with surprise examined some of the unbroken stones, which, though evidently
bearing the form of an unknown animal, were composed of solid rock. As we
sauntered along, the carriage following us, we came to a neat building on the road-
side, which a sign in the hedge opposite denoted to be a house of public
entertainment. Hoping to gain more satisfactory information respecting the objects
that had so much excited our curiosity, we entered this literally hedge ale-house, and
on being shown into a neat room, the casement of which, surrounded by roses and
honeysuckles in full bloom, opened into a garden redolent with fragrance and beauty,
from the wild profusion of its flowers and shrubs, we determined to rest awhile, and
partake of such refreshment as the cottage might afford. While these were preparing,
Frank Wilton, whose restless curiosity leaves nothing unobserved, was examining the
contents of the old oaken mantel-shelf, and suddenly cried out, 'Well! if the object of
travelling is to behold novelties and wonders, surely this county will afford that
gratification in the highest degree; for among the curious things on this mantel-piece,
there is not one of which I have ever seen its like before.' The articles now passed
under my examination, and with no better success; for I had never observed
anything similar, nor could I form a rational conjecture respecting their nature.
"While thus engaged, our landlady made her appearance, and from her we learnt
that this was her collection of curiosities, gathered from the neighbouring country;
and she readily imparted to us all she knew of the subject. Taking up one of the
stones, which resembled those we had seen on the road,—'This,' she said, 'is a
petrified snake, with which this neighbourhood abounds. These were once fairies that
inhabited these parts, and, for their crimes, were turned first into snakes, and then
into stones. Here'—showing a stone of a conical form—'is one of the fairies' night-
caps,[6] now also become stone.' 'Do, madam,' addressing Emma, 'pray observe this
pattern; is it possible lace-work like this should ever have been worked by human
hands? This—and this—are pieces of bones of giants, who lived here after the fairies
were destroyed.' These bones, she informed us, were frequently dug up in several
parts of the county, as well as innumerable thunderbolts,[7] some of which she also
showed us, affirming that they were the very thunderbolts by which the giants were
in their turn annihilated.
[6] A Cidaris, or turban-echinite; see Plate LIII.
[7] Belemnites, popularly termed "thunderbolts," Plate LIX.
"We all listened attentively to this discourse, and on my smiling, when she
withdrew, at the romantic account we had received, Wilton strenuously defended our
good landlady's narration, and declared, he thought it was not without a fair share of
probability. On the return of our hostess, I did not venture to express any doubt of
the truth of her story, but merely requested to know if she was aware of there being
anywhere a more extensive collection of similar curiosities. 'To be sure. Sir,' she
replied, 'our University has a museum full of them; and if you be going through
Oxford, it will be well worth your while to see it.'
"After taking refreshment, we left our kind and communicative hostess, but not
with an intention of immediately visiting the Museum of the University. On the
contrary, I felt that, without some previous knowledge of the objects to be examined,
our curiosity would be only excited, not gratified; and I resolved to defer our visit to
Oxford, until we had obtained the information necessary to insure us both pleasure
and profit in the investigation of the relics of interest it contained.
"Thus, my dear friend, at the very outset of my long anticipated holidays, I have
experienced considerable disappointment, and I confidently appeal to you to afford
me the information I require; for I know that you have successfully cultivated the
science which teaches the nature of these figured stones, or petrifactions, and
possess a valuable collection of these most extraordinary objects. You now, therefore,
have it in your power to add greatly to the delight and instruction I am anticipating
from my travels, by giving me an insight into the origin and nature of the petrified
remains which, I am told, are every where to be met with in the districts we are
about to visit."
Of Mr. Artis's Work, I need only mention that it was intended, as its title
expresses, to illustrate "The Fossil Remains of Plants peculiar to the Coal Formations
of Great Britain; selected for their novelty and interest from upwards of a Thousand
Specimens in the possession of the Author; by Edmund Tyrell Artis, Esq. F.S.A. F.G.S."
It was published by Nichols & Son, 1838. The plates are well executed, and faithfully
portray the original specimens.
Gallery of Organic Remains in the British Museum.
The collection of fossils in our national museum is now so varied and extensive,
and so admirably arranged by its eminent Curator, Charles König, Esq., F.R.S., and his
able assistants, Mr. Waterhouse and Mr. Woodward, that the intelligent reader whose
interest may be awakened by the beautiful and curious objects figured and described
in this volume, cannot fail to be highly gratified by inspecting leisurely the various
organic remains from all parts of the world, that are there displayed.
I gladly avail myself of this opportunity gratefully to acknowledge the liberality
and kindness I have at all times experienced from the Officers of the several
departments of Natural History in the British Museum, in promoting my scientific
researches, by affording me every facility to examine the vast stores of Information
placed under their guardianship.
Welcome to Our Bookstore - The Ultimate Destination for Book Lovers
Are you passionate about books and eager to explore new worlds of
knowledge? At our website, we offer a vast collection of books that
cater to every interest and age group. From classic literature to
specialized publications, self-help books, and children’s stories, we
have it all! Each book is a gateway to new adventures, helping you
expand your knowledge and nourish your soul
Experience Convenient and Enjoyable Book Shopping Our website is more
than just an online bookstore—it’s a bridge connecting readers to the
timeless values of culture and wisdom. With a sleek and user-friendly
interface and a smart search system, you can find your favorite books
quickly and easily. Enjoy special promotions, fast home delivery, and
a seamless shopping experience that saves you time and enhances your
love for reading.
Let us accompany you on the journey of exploring knowledge and
personal growth!
ebookgate.com

More Related Content

Similar to Learning Web App Development 1st Edition Semmy Purewal (20)

DOCX
Complete resource for web development
Tahmid Bin Taslim Rafi
 
PDF
Complete Download Web Development with Node and Express 2nd Edition Ethan Bro...
eriyahkatoh
 
PDF
Web Development with Node and Express 2nd Edition Ethan Brown
simsiraraman
 
PDF
Web dev syllabus
Adithcheshan
 
PDF
www.webre24h.com - [Wordware] advanced javascript, 3rd ed. - [easttom]
webre24h
 
PDF
Javascript Web Applications Otx Alex Maccaw
fahradzereit93
 
PDF
High Performance JavaScript Build Faster Web Application Interfaces 1st Editi...
yarecofuxxa58
 
PDF
Beginning JavaScript und CSS development with jQuery 1. ed Edition Richard York
easpjtibtv5782
 
PDF
Javascript The Definitive Guideactivate Your Web Pages 6th Ed Flanagan
reknesluima
 
PDF
Web+Dev+Syllabus.pdf
MohammadAhmad589157
 
PDF
Frontend Development The Ultimate Guide Sufyan Bin Uzayr
iredestyffe
 
PDF
full javascript Book by Abhishek singh.pdf
AbhishekSingh961152
 
PDF
Getting MEAN with Mongo Express Angular and Node 1st Edition Simon Holmes
sherajqublan
 
PDF
Getting MEAN with Mongo Express Angular and Node 1st Edition Simon Holmes
nqaoylllvg977
 
PDF
Node Up And Running Scalable Serverside Code With Javascript 1st Edition Tom ...
nunleyagika
 
PDF
Client Server Web Apps with JavaScript and Java 1st Edition Casimir Saternos
tomeooakesrq
 
PDF
How To Do Everything With JavaScript
Azharul Haque Shohan
 
PDF
Beginning JavaScript und CSS development with jQuery 1. ed Edition Richard York
lezueprogga
 
PDF
GDG-USAR Tech winter break 2024 USAR.pdf
raiaryan174
 
PDF
The road-to-learn-react
imdurgesh
 
Complete resource for web development
Tahmid Bin Taslim Rafi
 
Complete Download Web Development with Node and Express 2nd Edition Ethan Bro...
eriyahkatoh
 
Web Development with Node and Express 2nd Edition Ethan Brown
simsiraraman
 
Web dev syllabus
Adithcheshan
 
www.webre24h.com - [Wordware] advanced javascript, 3rd ed. - [easttom]
webre24h
 
Javascript Web Applications Otx Alex Maccaw
fahradzereit93
 
High Performance JavaScript Build Faster Web Application Interfaces 1st Editi...
yarecofuxxa58
 
Beginning JavaScript und CSS development with jQuery 1. ed Edition Richard York
easpjtibtv5782
 
Javascript The Definitive Guideactivate Your Web Pages 6th Ed Flanagan
reknesluima
 
Web+Dev+Syllabus.pdf
MohammadAhmad589157
 
Frontend Development The Ultimate Guide Sufyan Bin Uzayr
iredestyffe
 
full javascript Book by Abhishek singh.pdf
AbhishekSingh961152
 
Getting MEAN with Mongo Express Angular and Node 1st Edition Simon Holmes
sherajqublan
 
Getting MEAN with Mongo Express Angular and Node 1st Edition Simon Holmes
nqaoylllvg977
 
Node Up And Running Scalable Serverside Code With Javascript 1st Edition Tom ...
nunleyagika
 
Client Server Web Apps with JavaScript and Java 1st Edition Casimir Saternos
tomeooakesrq
 
How To Do Everything With JavaScript
Azharul Haque Shohan
 
Beginning JavaScript und CSS development with jQuery 1. ed Edition Richard York
lezueprogga
 
GDG-USAR Tech winter break 2024 USAR.pdf
raiaryan174
 
The road-to-learn-react
imdurgesh
 

Recently uploaded (20)

PDF
LAW OF CONTRACT (5 YEAR LLB & UNITARY LLB )- MODULE - 1.& 2 - LEARN THROUGH P...
APARNA T SHAIL KUMAR
 
PDF
People & Earth's Ecosystem -Lesson 2: People & Population
marvinnbustamante1
 
PPTX
HYDROCEPHALUS: NURSING MANAGEMENT .pptx
PRADEEP ABOTHU
 
PDF
CONCURSO DE POESIA “POETUFAS – PASSOS SUAVES PELO VERSO.pdf
Colégio Santa Teresinha
 
PDF
Knee Extensor Mechanism Injuries - Orthopedic Radiologic Imaging
Sean M. Fox
 
PDF
Chapter-V-DED-Entrepreneurship: Institutions Facilitating Entrepreneurship
Dayanand Huded
 
PPTX
MENINGITIS: NURSING MANAGEMENT, BACTERIAL MENINGITIS, VIRAL MENINGITIS.pptx
PRADEEP ABOTHU
 
PDF
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
PPTX
Stereochemistry-Optical Isomerism in organic compoundsptx
Tarannum Nadaf-Mansuri
 
PDF
Isharyanti-2025-Cross Language Communication in Indonesian Language
Neny Isharyanti
 
PPTX
A PPT on Alfred Lord Tennyson's Ulysses.
Beena E S
 
PPTX
Cultivation practice of Litchi in Nepal.pptx
UmeshTimilsina1
 
PDF
Dimensions of Societal Planning in Commonism
StefanMz
 
PDF
Lesson 2 - WATER,pH, BUFFERS, AND ACID-BASE.pdf
marvinnbustamante1
 
PDF
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - GLOBAL SUCCESS - CẢ NĂM - NĂM 2024 (VOCABULARY, ...
Nguyen Thanh Tu Collection
 
PPSX
HEALTH ASSESSMENT (Community Health Nursing) - GNM 1st Year
Priyanshu Anand
 
PPTX
grade 5 lesson matatag ENGLISH 5_Q1_PPT_WEEK4.pptx
SireQuinn
 
PPTX
PATIENT ASSIGNMENTS AND NURSING CARE RESPONSIBILITIES.pptx
PRADEEP ABOTHU
 
PDF
Women's Health: Essential Tips for Every Stage.pdf
Iftikhar Ahmed
 
PDF
ARAL_Orientation_Day-2-Sessions_ARAL-Readung ARAL-Mathematics ARAL-Sciencev2.pdf
JoelVilloso1
 
LAW OF CONTRACT (5 YEAR LLB & UNITARY LLB )- MODULE - 1.& 2 - LEARN THROUGH P...
APARNA T SHAIL KUMAR
 
People & Earth's Ecosystem -Lesson 2: People & Population
marvinnbustamante1
 
HYDROCEPHALUS: NURSING MANAGEMENT .pptx
PRADEEP ABOTHU
 
CONCURSO DE POESIA “POETUFAS – PASSOS SUAVES PELO VERSO.pdf
Colégio Santa Teresinha
 
Knee Extensor Mechanism Injuries - Orthopedic Radiologic Imaging
Sean M. Fox
 
Chapter-V-DED-Entrepreneurship: Institutions Facilitating Entrepreneurship
Dayanand Huded
 
MENINGITIS: NURSING MANAGEMENT, BACTERIAL MENINGITIS, VIRAL MENINGITIS.pptx
PRADEEP ABOTHU
 
Reconstruct, Restore, Reimagine: New Perspectives on Stoke Newington’s Histor...
History of Stoke Newington
 
Stereochemistry-Optical Isomerism in organic compoundsptx
Tarannum Nadaf-Mansuri
 
Isharyanti-2025-Cross Language Communication in Indonesian Language
Neny Isharyanti
 
A PPT on Alfred Lord Tennyson's Ulysses.
Beena E S
 
Cultivation practice of Litchi in Nepal.pptx
UmeshTimilsina1
 
Dimensions of Societal Planning in Commonism
StefanMz
 
Lesson 2 - WATER,pH, BUFFERS, AND ACID-BASE.pdf
marvinnbustamante1
 
BÀI TẬP BỔ TRỢ TIẾNG ANH 8 - GLOBAL SUCCESS - CẢ NĂM - NĂM 2024 (VOCABULARY, ...
Nguyen Thanh Tu Collection
 
HEALTH ASSESSMENT (Community Health Nursing) - GNM 1st Year
Priyanshu Anand
 
grade 5 lesson matatag ENGLISH 5_Q1_PPT_WEEK4.pptx
SireQuinn
 
PATIENT ASSIGNMENTS AND NURSING CARE RESPONSIBILITIES.pptx
PRADEEP ABOTHU
 
Women's Health: Essential Tips for Every Stage.pdf
Iftikhar Ahmed
 
ARAL_Orientation_Day-2-Sessions_ARAL-Readung ARAL-Mathematics ARAL-Sciencev2.pdf
JoelVilloso1
 
Ad

Learning Web App Development 1st Edition Semmy Purewal

  • 1. Learning Web App Development 1st Edition Semmy Purewal pdf download https://ebookgate.com/product/learning-web-app-development-1st- edition-semmy-purewal/ Get Instant Ebook Downloads – Browse at https://ebookgate.com
  • 2. Get Your Digital Files Instantly: PDF, ePub, MOBI and More Quick Digital Downloads: PDF, ePub, MOBI and Other Formats Learn iOS 7 App Development 1st Edition James Bucanek https://ebookgate.com/product/learn-ios-7-app-development-1st- edition-james-bucanek/ Learning Mobile App Development A Hands on Guide to Building Apps with iOS and Android 1st Edition Jakob Iversen https://ebookgate.com/product/learning-mobile-app-development-a- hands-on-guide-to-building-apps-with-ios-and-android-1st-edition- jakob-iversen/ Pro Windows Phone App Development 3rd Edition Falafel Software https://ebookgate.com/product/pro-windows-phone-app- development-3rd-edition-falafel-software/ Windows Store App Development C and XAML Pete Brown https://ebookgate.com/product/windows-store-app-development-c- and-xaml-pete-brown/
  • 3. Wearable Android Android Wear and Google FIT App Development 1st Edition Sanjay M. Mishra https://ebookgate.com/product/wearable-android-android-wear-and- google-fit-app-development-1st-edition-sanjay-m-mishra/ Web Development with Django Cookbook Bendoraitis https://ebookgate.com/product/web-development-with-django- cookbook-bendoraitis/ User Centered Web Development 1st Edition Jonathan Lazar https://ebookgate.com/product/user-centered-web-development-1st- edition-jonathan-lazar/ Web Based instructional Learning 1st Edition Mehdi Khosrow-Pour https://ebookgate.com/product/web-based-instructional- learning-1st-edition-mehdi-khosrow-pour-2/ Node Web Development Second Edition David Herron https://ebookgate.com/product/node-web-development-second- edition-david-herron/
  • 6. Semmy Purewal Learning Web App Development
  • 7. 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 [email protected]. 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]
  • 8. To my parents. Thanks for all of your support and encouragement over the years!
  • 10. 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
  • 11. Using HTML Validation to 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
  • 12. Responsiveness and Responsive Libraries 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
  • 13. AJAX 155 Accessing an External 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
  • 14. Setting Up a Client 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
  • 15. Summary 246 More Practice and 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
  • 16. 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
  • 17. realized I enjoyed the 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
  • 18. 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
  • 19. Of course, this particular 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 ([email protected]) 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
  • 20. General Comments on Code 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
  • 21. This element signifies a 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 [email protected]. 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
  • 22. from publishers like O’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 [email protected]. 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
  • 23. Sylvan Kavanaugh and Mark 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
  • 24. CHAPTER 1 The Workflow Creating web 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
  • 25. of editors that we’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
  • 26. Figure 1-1. An HTML 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
  • 27. 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
  • 28. Figure 1-4. Sublime after 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
  • 29. Figure 1-5. Sublime after 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
  • 30. Thisisarudimentaryapproachtoversioncontrol.Versioncontrolisaprocessthatallows you to keep labeled 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
  • 31. Figure 1-7. The Git 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
  • 32. simulates a Unix terminal 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
  • 33. hostname $ pwd /Users/semmy Although I 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
  • 34. Desktop Downloads Movies Pictures 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
  • 35. Figure 1-9. A tree 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 "[email protected]" 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
  • 36. Now we’re ready to 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
  • 37. Determining the status of 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
  • 38. Figure 1-11. Sublime after 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
  • 39. 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
  • 40. 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 <[email protected]> Date: Thu May 23 10:36:47 2013 -0400 Add second line to index.html commit 147deb5dbb3c935525f351a1154b35cb5b2af824 Author: Semmy Purewal <[email protected]> Date: Thu May 23 10:35:43 2013 -0400 Version Control | 17
  • 41. Initial commit Like the four 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
  • 42. Figure 1-12. A Git 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
  • 43. them eventually. The point 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
  • 44. 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
  • 45. With that in mind, 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
  • 46. 3. Open multiple files 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
  • 48. CHAPTER 2 The Structure Over the 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
  • 49. Another Random Document on Scribd Without Any Related Topics
  • 53. The Project Gutenberg eBook of A Pictorial Atlas of Fossil Remains, consisting of coloured illustrations selected from Parkinson's "Organic remains of a former world," and Artis's "Antediluvian phytology."
  • 54. This ebook is for the use of anyone anywhere in the United States and most other parts of the world at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re-use it under the terms of the Project Gutenberg License included with this ebook or online at www.gutenberg.org. If you are not located in the United States, you will have to check the laws of the country where you are located before using this eBook. Title: A Pictorial Atlas of Fossil Remains, consisting of coloured illustrations selected from Parkinson's "Organic remains of a former world," and Artis's "Antediluvian phytology." Author: Gideon Algernon Mantell Release date: January 31, 2021 [eBook #64434] Most recently updated: October 18, 2024 Language: English Credits: Tom Cosmas from files generously provided by The Internet Archive. All derived products are placed in the Public Domain. *** START OF THE PROJECT GUTENBERG EBOOK A PICTORIAL ATLAS OF FOSSIL REMAINS, CONSISTING OF COLOURED ILLUSTRATIONS SELECTED FROM PARKINSON'S "ORGANIC REMAINS OF A FORMER WORLD," AND ARTIS'S "ANTEDILUVIAN PHYTOLOGY." ***
  • 56. JOSEPH DINKEL. DEL. ET LITH. PRINTED BY M. & N. HANHAR THE PERFECT SERIES OF THE BONES OF THE RIGHT FOOT OF THE MOA, OR EXTINCT COLOSSAL OSTRICH-LIKE BIRD OF NEW ZEALAND FOUND IMBEDDED IN AN ERECT POSITION, WITH THE CORRESPONDING FOOT A YARD IN ADVANCE, IN A TURRARY DEPOSIT, AT WAIKOUAITI IN THE MIDDLE ISLAND, BY WALTER MANTELL ESQRE OF WELLINGTON. FIGURES 1a 2a 3a THE PLANTAR OR UNDER SURFACE OF THE FIRST, SECOND & THIRD TOES. THE FIGURES ARE 1 /3 NATURAL SIZE LINEAR. THE ORIGINAL BIRD WAS ABOUT 10 FEET HIGH.
  • 57. A PICTORIAL ATLAS OF FOSSIL REMAINS, CONSISTING OF COLOURED ILLUSTRATIONS SELECTED FROM PARKINSON'S "ORGANIC REMAINS OF A FORMER WORLD;" AND ARTIS'S "ANTEDILUVIAN PHYTOLOGY." WITH DESCRIPTIONS BY GIDEON ALGERNON MANTELL, ESQ. LL.D. F.K.S. VICE-PRESIDENT OF THE GEOLOGICAL SOCIETY, FELLOW OF THE ROYAL COLLEGE OF SURGEONS OF ENGLAND, ETC. AUTHOR OF "THE WONDERS OF GEOLOGY," ETC. ETC. "All things in nature are engaged in writing their own history. The planet and the pebble are attended by their shadows—the rolling rock leaves its farrows on the mountain side—the river its channel in the soil—the animal its bones in the stratum—the fern and the leaf inscribe their modest epitaphs on the coal—the falling drop sculptures its story on the sand, or
  • 58. on the stone—not a footstep on the snow or on the ground but traces in characters more or less enduring the record of its progress."—Emerson. With Seventy-four plates, CONTAINING NEARLY NINE HUNDRED FIGURES. LONDON: H. G. BOHN, YORK STREET, COVENT GARDEN. 1850. LONDON: R. CLAY, PRINTER, BREAD STREET HILL. TO THE VERY REVEREND WILLIAM BUCKLAND, D.D. F.R.S. Dean of Westminster, &c. &c. &c. THIS WORK IS INSCRIBED AS AN EXPRESSION OF THE HIGH RESPECT AND AFFECTIONATE REGARD OF ONE WHO HAS FOR MORE THAN THIRTY YEARS ENJOYED THE HONOUR AND PRIVILEGE OF HIS CORRESPONDENCE AND FRIENDSHIP.
  • 60. PREFACE. In the hope of promoting the diffusion of a taste for the cultivation of a peculiarly interesting and attractive branch of Natural History, I have been induced, in compliance with the suggestion of the eminent publisher of this volume, to arrange in a connected series the Plates of the late Mr. Parkinson's "Organic Remains of a Former World," and of Mr. Artis's "Antediluvian Phytology," with descriptions of the specimens represented. As I have been enabled, with the valuable assistance of my friend, John Morris, Esq. F.G.S., the author of "A Catalogue of British Fossils," to append, in almost every instance, the generic and specific names adopted by the most recent authorities, the volume will, I trust, not only prove interesting to the general reader, as a beautiful Pictorial Atlas of some of the most remarkable relics of the animals and plants of a "Former World," but also constitute a valuable book of reference in the library of the Geologist and Palæontologist, since it contains the names and localities of no inconsiderable number of species and genera. For the guidance of the unscientific reader who may desire further information on any of the subjects treated of in the following pages, references are given to a few general works on Geology and Fossil Remains. Chester Square, Pimlico, August 1850.
  • 61. TABLE OF CONTENTS. PAGE Preface v Description of the Frontispiece x Introduction 13 Descriptions of the Plates. FOSSIL REMAINS OF THE VEGETABLE KINGDOM. (Plates I. to XXXIII. inclusive.) Plate I.—Various specimens of Fossil Wood, and fragments of Plants 19 II.—Chiefly examples of silicified Wood 21 III.—Stigmaria, Calamites, and Wood 23 IV.—Fronds of various Fossil Ferns 25 V.—Different species of Ferns and other Plants 27 VI.—Principally Fossil Fruits from the London clay of the Isle of Sheppey 29 VII.—Specimens of the Fruit of a species of Nipas, or Molucca Palm; from the Isle of Sheppey 31 VIII.—Figures of different portions of beautiful silicified Stems of Plants allied to the Arborescent Ferns; from Chemnitz 33 IX.—Fossil Seed-vessels or Cones (Lepidostrobus) of the Lepidodendron 35 X.—An aquatic Plant (Hydatica) in Coal shale 37 XI.—A fine specimen of another species of Hydatica 39 XII.—A delicate aquatic Plant (Myriophyllites) in Coal shale 41 XIII.—Portion of the Stem of the Calamites ramosus 43
  • 62. XIV. —Fragment of Stems of another species of Calamite (Calamites dubius) 45 XV. —Stem of a Calamite very much resembling the Bamboo (Calamites pseudo-bambusia) 47 XVI.—Another species of Calamite (Calamites approximatus) 49 XVII.—Stem of another kind of Calamite (Calamites decoratus) 51 XVIII.—Fossil Stems allied to the Pandanus or Yucca (Sternbergia transversa) 53 XIX.—Stem of a species of Sigillaria (Sigillaria fibrosa) 55 XX.—Stem of another kind of Sigillaria 57 XXI.—Fossil Roots of Sigillaria (Stigmaria ficoides) 59 XXII.—Another species of Stigmaria (Stigmaria verrucosa) 61 XXIII.—Fragment of a Stigmaria with large tubercles 63 XXIV. —Part of a Stem of a tree allied to Sigillaria (Aspidiaria cristata) 65 XXV. —Stem of a Plant allied to the Arborescent Ferns (Megaphyton) 67 XXVI.—Stem of a species of Lepidodendron 69 XXVII.—Fossil Plant allied to the Lepidodendron 71 XXVIII.—A beautiful fossil Fern resembling Osmunda regalis (Neuropteris auriculata) 73 XXIX.—An elegant trifoliate Fern in Coal shale (Neuropteris trifoliata) 75 XXX.—An exquisite specimen of fossil Fern (Pecopteris Miltoni) 77 XXXI.—Another elegant Fern in Coal shale (Pecopteris plumosa) 79 XXXII.—A very beautiful plumose Fern in Coal shale (Alethopteris decurrens) 81 XXXIII.—A fossil Fruit or Seed-vessel in Coal shale (Carpolithes marginatus) 83 FOSSIL REMAINS OF THE ANIMAL KINGDOM. (Plates XXXIV. to LXXIV: inclusive.)
  • 63. XXXIV.—A beautiful mass of Coral (Syringopora geniculata) on Carboniferous limestone 87 XXXV.—Several kinds of fossil Corals (Syringopora ramulosa, Catenipora escharoides, &c.) 89 XXXVI.—Corals from different formations (Fungia, Cyathophyllum) 91 XXXVII.—Various fossil Corals (Astrea, Lithostrotion, Caryophyllia annularis) 93 XXXVIII.—Corals and Coral marbles (Cyathophyllum, Astrea, Lithodendron) 95 XXXIX.—Fossil Corals, and Sponges or Amorphozoa (Siphonia, Favosites, Explanaria) 97 XL.—Various fossil Zoophytes (Clionites, Millepora) 99 XLI.—A beautiful specimen of a cyathiform fossil Zoophyte (Chenendopora Parkinsoni) 101 XLII.—Several kinds of Zoophytes in Flint (Choanites, Siphonia, Jerea) 103 XLIII.—Various Corals and other Zoophytes (Fungia polymorpha, Jerea pyriformis, Ventriculite) 105 XLIV.—Silicified Sponges and other Zoophytes (Scyphia, Cnemidium, Chenendopora) 107 XLV.—Several kinds of calcareous and silicified Corals and other Zoophytes 109 XLVI.—A recent Pentacrinus (P. caput medusæ), and a beautiful Fossil species 111 XLVII.—Numerous specimens of portions of Stems, separate Ossicles, and Receptacles, of various kinds of Encrinites and Pentacrinites 113 XLVIII.—The Lily Encrinite (Encrinites monileformis) 115 XLIX.—Remains of several kinds of Encrinites and Encrinital marbles 117 L.—Chiefly specimens of the Pear Encrinite of Bradford, in Wiltshire (Apiocrinus Parkinsoni) 119 LI.—Several kinds of Crinoidea (Actinocrinites, Pentacrinites) 121
  • 64. LII.—Specimens of Pentacrinites from Lyme Regis 123 LIII.—Fossil Star-fishes (Goniaster, Ophiura, Cidaris) 125 LIV.—Various kinds of Echinites or fossil Sea- urchins (Clypeaster, Ananchytes, Discoidea, Conulus) 127 LV.—Several varieties of fossil Echini (Cidaris, Nucleolites, Micraster, Spatangus) 129 LVI.—Echinites and echinital Spines 131 LVII.—Fossil univalve Shells (Euomphalus, &c.) and Cololites 133 LVIII.—Fossil Shells of various kinds of Cephalopoda (Nautilus, Orthoceras, Lituties, &c.) 135 LIX.—Belemnites, Orthoceratites, and Hippurites, &c. 137 LX.—Belemnites and Ammonites 139 LXI.—Hamites of several species; Scaphites, Nummulites, &c. 141 LXII.—Fossil Foraminifera of several genera 143 LXIII.—Several species of Trigonia 145 LXIV.—Fossil bivalve Shells (Cucullæa, Crassatella, Lima, Cardium, &c.), and the anomalous bodies termed Trigonellites 147 LXV.—Fossil Shells of the genera Panopæa, Teredina, &c. 149 LXVI.—Fossil Shells of the genera Ostrea, Perna, Gryphea, &c. 151 LXVII.—Chiefly Shells of brachiopodous Mollusca, (Terebratula, Spirifer, Productus, &c.) 153 LXVIII.—Fossil Crabs from Sheppey; Trilobites, Insects, &c. 155 LXIX.—Remains of Turtles from Sheppey, and Vertebræ of Crocodilian Reptiles from Havre, and of the Mosasaurus 157 LXX.—The Jaws of the fossil Reptile of Maestricht (Mosasaurus); and Teeth of various kinds of Sharks and Rays (Carcharias, Miliobatis, Pthychodus, &c.) 159 LXXI.—Skull and Antlers of the fossil Elk of Ireland, and Teeth of the Mammoth 161
  • 65. LXXII.—Fossil teeth of Hippopotamus, Rhinoceros, Dinotherium, Palæotherium, and Anoplotherium; and ungueal bone of Megalonyx 163 LXXIII.—Skeleton of the Megatherium, and Teeth of the fossil Bears of the Caverns 165 LXXIV.—Molar Teeth of Mastodon giganteus, from Big-bone Lick, Kentucky 167 Frontispiece.—Foot of the Moa of New Zealand. SUPPLEMENTARY NOTES. 1.Fossil Bears of the Caverns 166 2.The Belemnite ib. 3.Fossil Remains of Birds—Moa of New Zealand 172 4.Botanical Arrangement of Fossil Vegetables 175 5.Cephalopoda—Nautilus, Ammonite, &c. 180 6.Carboniferous Formations 181 7.Coal 182 8.Corals ib. 9.Cuvier's Principles of Palæontology 183 10.Fossil Edentata, Megatherium, &c. 184 11.Flint: Animal Remains in Siliceous Nodules 185 12.Foraminifera 186 13.The Gigantic extinct Irish Elk: Cervus megaloceros 189 14.Fossil Infusoria ib. 15.The Mosasaurus, or Fossil Animal of Maestricht 191 16.Fossil Reptiles 192 17. ———————- of the Wealden: the Iguanodon 193, 202 18.——————————————— the Pelorosaurus 197 19.Silicification and Siliceous Petrifactions ib. 20.Stigmariæ and Sigillariæ 198 Index 203 WORKS REFERRED TO IN THE DESCRIPTIONS.
  • 66. Michelin, Iconographie Zoophytologie, Paris, 4to. Göppert, H. R. Die Fossilen, Farrnkrauter,—forming vol. xvii. of the Nova Acta Academiæ C. L. C. Naturæ Curiosorum. 1836, 4to. Presl, C. B., Sternberg, Dr. G. Flora der Vorwelt, Part VII. and VIII. edited by Presl. Goldfuss, Dr. A., Petrefacta Germaniæ, folio, Dusseldorf, 1841-44. Fossil Flora of Great Britain, by Dr. Lindley and Mr. Button. Dr. Buckland's Bridgewater Essay on Geology and Mineralogy, 2 vols, with numerous Plates. The Wonders of Geology, 3 vols, sixth edition, 1849. The Medals of Creation, 2 vols. 1844. Geological Excursions round the Isle of Wight and along the adjacent Coast of Dorsetshire, 1 vol. numerous Plates. Thoughts on Animalcules, 1 vol. numerous coloured Plates, second edition, 1850. Thoughts on a Pebble, with 30 Illustrations, eighth edition, 1850. Lyell, Sir Charles, Travels in. America, 1845, and 1849.
  • 67. DESCRIPTION OF THE FRONTISPIECE. THE MOA OF NEW ZEALAND. The Frontispiece represents the entire series of bones composing the right foot of the Moa (Dinornis robustus), found imbedded in an erect position, with the corresponding foot a yard in advance, in a turbary deposit, at Waikouaiti, in the Middle Island of New Zealand, in 1849. The figures are one-third less in linear dimensions than the originals. Figures 1a, 2a, 3a, show the palmar, or under surface of the respective toes, and exhibit the trochlear or articulating extremities of the phalangeal bones. The ancient swamp or morass in which these matchless specimens were imbedded, is situated on the shore, in a little creek or bay near Island Point, at the mouth of the river Waikouaiti, and is covered by the sea except at the lowest tides. Many remains of the largest species of Moa have from time to time been obtained from this deposit; the bones sent to England by Dr. Mackellar, Mr. Percy Earle, and others, figured and described in the Zoological Transactions by Professor Owen, were from this locality. The specimens figured were obtained by Mr. Walter Mantell, in 1849, when visiting Waikouaiti, as Government Commissioner for the settlement of Native claims. On the recession of the tide, the upper (or proximal) ends of the metatarsals were just visible above the surface: these were carefully dug up, and all the bones of the respective toes numbered, one by one, as they were extracted from the soil. In this state they were sent to me, and have subsequently been articulated under my direction, in their natural order of arrangement.[1] [1] By the well-known eminent anatomical artist, Mr. Flower, of 22, Lambeth Terrace, Lambeth Road. The condition and position of the bones, and the nature of the deposit,—evidently an ancient morass, in which the New Zealand flax (phormium tenax) once grew luxuriantly,—remind us of the very similar circumstances in which the extinct gigantic Elks in Ireland, and the Mastodons in America, have occasionally been found engulfed in peat bogs and morasses; and, as my son emphatically observes, it is impossible to arrive at any other conclusion than that the Moa to which these feet belonged, had sunk down in the swamp, and perished on the spot. Vertebræ and other parts of a skeleton of a bird of the same proportions, were dug up near the feet.
  • 68. As the specimens under examination are the first examples in which the entire series of the phalangeal and ungueal bones have been found in natural connexion with the metatarsals, I subjoin the admeasurements of the several parts, to render the peculiar construction of the feet in one species of the lost race of the colossal birds of New Zealand, more obvious to those who may feel interested in the subject. TARSO-METATARSAL BONES. Inches.Lines. Length of the shaft from the distal end of the middle trochlea to the proximal extremity 17 0 Circumference of the proximal end 11 9 Transverse diameter, or width, of ditto 4 6 Antero-posterior diameter of ditto 3 6 Circumference of the middle of the shaft 6 3 Antero-posterior diameter of ditto 1 8 Transverse diameter of ditto 3 6 Width of the distal, or trochlear, end 6 3 Circumference of the trochlear end 15 6 Antero-posterior diameter of the middle trochlea 3 9 PHALANGEAL BONES. Inner Toe. (Fig. 1.) Middle Toe. (Fig. 2.) Outer Toe. (Fig. 3.) Inches.Lines. Inches.Lines. Inches.Lines. First, or proximal phalanx { Length 4 9 — 4 3 — 3 2 Circumference of proximal end 6 6 — 6 9 — 5 9 Second phalangeal bone. { Length 1 9 — 2 6 — 1 9 Circumference of proximal end 3 0 — 5 3 — 4 9 Third phalangeal bone { Length Ungueal. { 3 0 } 4 0 — 1 9 — 1 0 Circumference of proximal end — 4 6 — 4 6 Third phalangeal bone { Length Ungueal. { 3 0 } 4 2 — 0 11 Circumference of proximal end — 4 0 Fifth ungueal bone { Length 2 6 Circumference of proximal end 3 9
  • 69. The total length of the toes is as follows:—inner digit, 9½ inch.; middle, 11½ inch.; outer, 91/3 inch. The transverse diameter of the expanse of the foot, from the distal extremity of the inner toe (fig. 1a), to that of the outer one (fig. 3a), is 15½ inches. The length from the posterior part of the trochlear extremity of the metatarsal to the distal end of the ungueal of the middle toe (fig. 2a), is 13 inches. If to the actual dimensions of the bones be added the proportional thickness of the cartilaginous integuments, nails, &c., the length of the foot of the living bird may be estimated at about 16 inches, and the breadth at 17 or 18 inches. From the great width and solidity of the metatarsals, and the form and corresponding size and strength of the phalangeals and ungueals, the ornithologist will perceive that the feet of the Moa must have constituted powerful instruments for scratching, digging, and uprooting the sub-terrestrial vegetable substances, which Professor Owen, with great probability, infers, formed the chief sustenance of the extinct colossal birds of New Zealand. According to the relative proportions of the bones composing the hinder extremities of the gigantic species of Moa, the corresponding tibia, or leg-bone, of the feet above described, would be two feet nine inches in length, and the femur, or thigh bone, nine and a half inches; the total height of the bird was probably about ten feet. Tibiæ, femora, and other bones of much larger proportions, (apparently of Dinornis giganteus and D. ingens,) were obtained from the same locality; some of these indicate birds of eleven or twelve feet in height; dimensions exceeding by one- third those of the largest known existing species of Struthionidæ—the Ostrich.[2] [2] Even from this imperfect description (and further anatomical details would be irrelevant in the present work), the ornithologist cannot fail to observe the peculiar characters exhibited by these extremities of the remarkable family of birds, of which the diminutive Apteryx appears to be the only living representative. But the Apteryx differs most essentially in the structure of the cranium and mandibles, from the extinct types to which Professor Owen has given the names of Dinornis, Palapteryx, Aptornis, &c. With regard to the construction of the feet it may be further remarked, that the length of the inner and outer toes is nearly equal, as in the Cassowary; but the middle toe, which in the Cassowary is one-third longer than the other digits, in the Moa scarcely exceeds in length by one-fifth, the inner and outer toes. The ungueal segments are very large, being equal to one-third the length of the toes. The phalangeals are relatively much shorter than in the Cassowary and Ostrich, and wider than in the former, and more arched than in either of these living struthious birds. In the metatarsal the presence of the three elements whose fusion constitutes the bone, is strongly marked; there does not appear to be any certain indications of a posterior or hind toe, though Professor Owen imagines he has detected feeble traces of a fourth digit: in that case the bird to which my specimens belonged, would be termed Palapteryx. The crania found by Mr. Walter Mantell at
  • 70. Waingongoro, and figured and described by Professor Owen in the Zoological Transactions (Vol. III., Plates 52, 53, 54, 55), as Dinornis and Palapteryx, must have belonged to birds of comparatively small stature. The skull with the adze-like upper mandible, and the enormously-developed basi-occipitals and basi-sphenoids (Dinornis, of Professor Owen, Plate 53), was found associated with many vertebræ of the neck and back, and bones of the leg, of the same bird; and these my son states indicated a height of from six to seven feet. The skull and the rest of the skeleton were found imbedded in sand, and lying in their natural relative position; unfortunately, all these precious remains, except the cranium, were destroyed by a sudden rush of the natives to seize upon the exhumed relics! It therefore yet remains to discover the cranial type that characterized the colossal forms at present known only by other parts of the skeleton. Referring the reader to the additional account of the fossil birds of New Zealand given in a subsequent part of this volume (see Supplementary Notes, p. 173), I will conclude this notice with a few general remarks. From the numerous facts relating to the fossil remains of birds from our Antipodean colony, that have now been brought under the consideration of the naturalists and geologists of this country, we may safely conclude, that at a period geologically recent, but of immense antiquity in relation to the human inhabitants of those Islands, New Zealand was densely peopled by tribes of colossal struthious bipeds, of species and genera that have long since become extinct. I believe that ages ere the advent of the Maori tribes, the Moa and its kindred were the chief inhabitants of the country, and that from the period when those Islands were taken possession of by man, the race gradually diminished, and the colossal types were finally annihilated by human agency. That some of the largest species were contemporary with the Maories, there can now be no reasonable doubt. Apart from native traditions, and songs and tales in which allusions are made to the gigantic magnitude and flowing plumage of the Moa, the collocation of calcined and half roasted bones of the Dinornis, of dogs, and of the human species, in the ancient fire-heaps of the aborigines, and the unequivocal marks of the celt or axe of jade on some of the tibiæ,—the chips or cuts having evidently been made on the bones when recent,—afford incontrovertible proof that the last of the Moas, like the last of the Dodos, was annihilated by human agency. From the remarkable size and strength of the thighs, legs, and feet of the Moas, it is clear that the hinder limbs must have constituted powerful locomotive organs; and when we consider the vast swarms of the largest species which existed at some remote period, it seems highly probable that this family of colossal birds,—a family unknown in any other part of the world,—was not originally confined within the narrow geographical limits of modern New Zealand, but ranged over a vast continent now submerged, and of which Phillip and Norfolk Islands, and Chatham and Auckland Islands, and those of New Zealand, are the culminating points. But whatever may be the result of future discoveries as to the relative age of the bone-deposits, or the existence or extinction of any of the colossal species of Moa, or the former extension of the race over countries now submerged, one astounding fact must ever remain unassailable—the vast preponderance of the class Aves or Birds,
  • 71. that prevailed, and which still prevails, in the fauna of New Zealand, to the almost entire exclusion of mammalia and reptiles. Any palæontologist who saw only the collections sent over by my son, must have been astonished at their extent and variety. I may venture to affirm that such an assemblage of the fossil bones of birds was never before seen in Europe: nearly fifteen hundred specimens, collected from various parts of the country, with scarcely any intermixture of the remains of any other class;—it is a phenomenon as startling as the exclusively reptilian character of the fauna of the Wealden epoch. But the fauna of New Zealand, even at the present time, presents a character as ornithic and as anomalous as its ancient one; for while there are upwards of fifty or sixty genera of birds, there is but one indigenous mammalian quadruped known to naturalists—a species of rat! In this respect, therefore, as well as in its flora, in which ferns and other cellulosæ of peculiar types prevail to an extent unknown elsewhere, the country offers a striking example of that now acknowledged fact in natural history—a centre or focus of creation of certain organic types. And this law, with whose operation during the palæozoic and secondary ages modern geological researches have made us familiar, appears to have continued in unabated energy to the present moment. From what has been advanced, it is manifest that the present geographical distribution of special groups of terrestrial animals and plants, displays as many anomalies in the relative predominance of the different classes and orders over certain areas, without relation to climatorial or other obvious physical conditions, as can be traced in the natural records of the earlier ages of the world. The conclusion therefore forces itself upon the mind, that throughout the vast periods of time to which our retrospective knowledge extends, the geological changes of the earth's surface, and the appearance and obliteration of species and genera, have been governed by the same physical and organic laws; and that notwithstanding the variable conditions of the land and the water, indicated by the sedimentary formations, there was at no period a greater discrepancy in the assemblages of certain types of the animal and vegetable kingdoms, than exists at present. Of the nature of that law by which the extinction of a race of highly organized beings is determined, and whose effects through innumerable ages palæontology has in part revealed, we are as utterly ignorant as of that which governs the first appearance of the minutest living animalcule which the powers of the microscope enable us to descry; both are veiled in inscrutable mystery, the results only are within the scope of our finite comprehension.[3] [3] See the concluding part of Lecture VIII. § 46, Wonders of Geology, vol. ii. p. 890.
  • 72. INTRODUCTION. The publication of Mr. Parkinson's "Organic Remains of a former World," at the commencement of the present century, must be regarded as a memorable event in the history of British Palæontology: it was the first attempt to give a familiar and scientific account of the fossil relics of animals and plants, accompanied by figures of the specimens described. The three volumes[4] of which the work consisted, appeared at considerable intervals; the last was published in 1811. Although nearly forty years have since elapsed, and hundreds of geological works, of all kinds and degrees of merit, have subsequently been issued, Mr. Parkinson's Plates, owing to their fidelity and beauty, are still in such request, as to induce the proprietor, Mr. Bohn, now that the work is out of print, to publish them, with the descriptions and modern names of the fossils represented. [4] Three volumes, in 4to.; price 10l. 10s. I have added a few explanatory remarks, and in the "Supplementary Notes," have given extended notices of some of the most interesting subjects, with the view of rendering the volume more intelligible and acceptable to the general reader. In looking through the original work of Mr. Parkinson, the instructed observer will not fail to perceive the immense progress which the study of fossil animals and plants has made since the period of its first appearance in 1811. At that time, the terms Geology and Palæontology were unknown; all the sedimentary strata have since been accurately defined and arranged, and names assigned to the respective systems or formations; while the so-called Diluvial Epoch, which Mr. Parkinson, and even Baron Cuvier, considered as established by incontrovertible physical evidence, has been expunged from the chronology of geology. In Mr. Parkinson's volumes, no allusion will be found to that most remarkable era in the earth's history which modern researches have brought to light—the Age of Reptiles; the terms Ichthyosauri, Plesiosauri, Iguanodon, Megalosaurus—now familiar as household words—are not inscribed on their pages; all those marvellous beings of past ages have been discovered during the last forty years; in short, the remark of an eminent critic is as true as it is beautiful:—"Geology is a philosophy which never rests; its law is progress; a point which yesterday was invisible is its goal to-day, and will be its starting-post to- morrow." I gladly avail myself of this opportunity to make a passing allusion to the excellent and accomplished author, Mr. Parkinson. I had the pleasure and privilege of his
  • 73. acquaintance in my youth, immediately after the publication of the third volume of his valuable work. Mr. Parkinson was rather below the middle stature, with an energetic, intelligent, and pleasing expression of countenance, and of mild and courteous manners; readily imparting information, either on his favourite science, or on professional subjects; for he was at that time actively engaged in medical practice in Hoxton Square, and was the author of several valuable medical treatises. He kindly showed and explained to me the principal objects in his cabinets, and pointed out every source of information on fossil remains; a department of natural knowledge at that time but little cultivated in England, but which peculiar circumstances had contributed to render the engrossing object of my young and ardent mind. In after years Mr. Parkinson warmly encouraged my attempts to elucidate the nature of the strata and organic remains of my native county, Sussex, a district which was then supposed to be destitute of geological interest; and he revised my drawings, and favoured me with his remarks on many subjects treated of in my first work—"The Fossils of the South Downs."[5] [5] Published in 1822. In 1822, Mr. Parkinson published "An Introduction to the Study of Fossil Organic Remains, especially of those found in the British Strata; intended to aid the Student in his Inquiries respecting the Nature of Fossils, and their Connexion with the Formation of the Earth;" 1 vol. 8vo. with ten plates, principally of the genera of fossil shells. He also contributed a few papers to the early volumes of the Geological Society of London, of which he was one of the original members. After Mr. Parkinson's death, his beautiful and choice collection was sold by auction, and its contents widely dispersed. The fine series of silicified zoophytes was purchased by Mr. Featherstonhaugh, and taken to America; and some years afterwards was destroyed by a fire which consumed the museum in which it was placed. As illustrative of the pleasing style of Mr. Parkinson's work, I subjoin an abstract of the chapter, On the Pleasure and Advantages of a Knowledge of Fossil Remains. The epistolary style was adopted; and the first letter is supposed to be penned by a friend desirous of learning the nature of certain fossils he had observed on his journey to Oxford:— "I have lived long enough to witness many sad disappointments to the fond dreams of happiness indulged by persons who, only intent on the acquisition of riches, had neglected to cultivate any intellectual or ennobling pursuit; so that on retiring from active life, they were unable to enjoy the leisure so dearly earned by years of anxiety and care, and either relapsed into a state of miserable ennui, or gave themselves up to the excitement of frivolous or vicious indulgences. "Aware of the necessity of devoting the few leisure hours, which the duties of my calling left at my disposal, to some rational and amusing occupation, I have always cultivated, more or less assiduously, some branch of art or science, and thence acquired an enthusiastic admiration for the beauties of nature, and an insatiable
  • 74. curiosity to pry into the mysteries of the natural world. With this state of mind, I have at length resolved to avail myself of the means my little fortune affords me to indulge those feelings, and have, I trust, quitted the busy scenes of the world for ever. "In pursuance of a plan long entertained of visiting the most interesting parts of our island, I left London last week, accompanied by my daughter, and our old friend, Frank Wilton, whose lively disposition and agreeable manners render him, as you well know, an excellent companion. But he has made himself most acceptable to us on another account;—his resolute scepticism with respect to the more rational, and his submissive credulity as to the popular and traditional explanations of such natural phenomena as are beyond his comprehension, are frequently productive of remarks so quaint and humorous, as to contribute in no small degree to our enjoyment. "Ere our first day's journey was completed, I discovered how insufficient was the knowledge I possessed to enable me to form even a conjecture, as to the nature of the very first objects which particularly arrested our attention. We were within a few miles of Oxford, when Wilton, looking out of the carriage window, exclaimed, 'Bless me! never before did I see roads mended with such materials!' This, of course, drew my attention to what had so strongly excited his wonder; and I must confess that my astonishment was but little less than his own; for I beheld a labourer with a large hammer breaking to pieces a nearly circular ornamented stone, half as large as the fore-wheel of our carriage, and resembling in form a coiled-up serpent, or snake. We instantly stopped the chaise, and inquired of the man the name of the stone, and where it came from. 'This, Sir,' he replied, 'is a snake-stone, and comes from yonder quarry, where there are thousands of them.' Upon hearing this, we all alighted, and with surprise examined some of the unbroken stones, which, though evidently bearing the form of an unknown animal, were composed of solid rock. As we sauntered along, the carriage following us, we came to a neat building on the road- side, which a sign in the hedge opposite denoted to be a house of public entertainment. Hoping to gain more satisfactory information respecting the objects that had so much excited our curiosity, we entered this literally hedge ale-house, and on being shown into a neat room, the casement of which, surrounded by roses and honeysuckles in full bloom, opened into a garden redolent with fragrance and beauty, from the wild profusion of its flowers and shrubs, we determined to rest awhile, and partake of such refreshment as the cottage might afford. While these were preparing, Frank Wilton, whose restless curiosity leaves nothing unobserved, was examining the contents of the old oaken mantel-shelf, and suddenly cried out, 'Well! if the object of travelling is to behold novelties and wonders, surely this county will afford that gratification in the highest degree; for among the curious things on this mantel-piece, there is not one of which I have ever seen its like before.' The articles now passed under my examination, and with no better success; for I had never observed anything similar, nor could I form a rational conjecture respecting their nature. "While thus engaged, our landlady made her appearance, and from her we learnt that this was her collection of curiosities, gathered from the neighbouring country;
  • 75. and she readily imparted to us all she knew of the subject. Taking up one of the stones, which resembled those we had seen on the road,—'This,' she said, 'is a petrified snake, with which this neighbourhood abounds. These were once fairies that inhabited these parts, and, for their crimes, were turned first into snakes, and then into stones. Here'—showing a stone of a conical form—'is one of the fairies' night- caps,[6] now also become stone.' 'Do, madam,' addressing Emma, 'pray observe this pattern; is it possible lace-work like this should ever have been worked by human hands? This—and this—are pieces of bones of giants, who lived here after the fairies were destroyed.' These bones, she informed us, were frequently dug up in several parts of the county, as well as innumerable thunderbolts,[7] some of which she also showed us, affirming that they were the very thunderbolts by which the giants were in their turn annihilated. [6] A Cidaris, or turban-echinite; see Plate LIII. [7] Belemnites, popularly termed "thunderbolts," Plate LIX. "We all listened attentively to this discourse, and on my smiling, when she withdrew, at the romantic account we had received, Wilton strenuously defended our good landlady's narration, and declared, he thought it was not without a fair share of probability. On the return of our hostess, I did not venture to express any doubt of the truth of her story, but merely requested to know if she was aware of there being anywhere a more extensive collection of similar curiosities. 'To be sure. Sir,' she replied, 'our University has a museum full of them; and if you be going through Oxford, it will be well worth your while to see it.' "After taking refreshment, we left our kind and communicative hostess, but not with an intention of immediately visiting the Museum of the University. On the contrary, I felt that, without some previous knowledge of the objects to be examined, our curiosity would be only excited, not gratified; and I resolved to defer our visit to Oxford, until we had obtained the information necessary to insure us both pleasure and profit in the investigation of the relics of interest it contained. "Thus, my dear friend, at the very outset of my long anticipated holidays, I have experienced considerable disappointment, and I confidently appeal to you to afford me the information I require; for I know that you have successfully cultivated the science which teaches the nature of these figured stones, or petrifactions, and possess a valuable collection of these most extraordinary objects. You now, therefore, have it in your power to add greatly to the delight and instruction I am anticipating from my travels, by giving me an insight into the origin and nature of the petrified remains which, I am told, are every where to be met with in the districts we are about to visit." Of Mr. Artis's Work, I need only mention that it was intended, as its title expresses, to illustrate "The Fossil Remains of Plants peculiar to the Coal Formations
  • 76. of Great Britain; selected for their novelty and interest from upwards of a Thousand Specimens in the possession of the Author; by Edmund Tyrell Artis, Esq. F.S.A. F.G.S." It was published by Nichols & Son, 1838. The plates are well executed, and faithfully portray the original specimens. Gallery of Organic Remains in the British Museum. The collection of fossils in our national museum is now so varied and extensive, and so admirably arranged by its eminent Curator, Charles König, Esq., F.R.S., and his able assistants, Mr. Waterhouse and Mr. Woodward, that the intelligent reader whose interest may be awakened by the beautiful and curious objects figured and described in this volume, cannot fail to be highly gratified by inspecting leisurely the various organic remains from all parts of the world, that are there displayed. I gladly avail myself of this opportunity gratefully to acknowledge the liberality and kindness I have at all times experienced from the Officers of the several departments of Natural History in the British Museum, in promoting my scientific researches, by affording me every facility to examine the vast stores of Information placed under their guardianship.
  • 77. Welcome to Our Bookstore - The Ultimate Destination for Book Lovers Are you passionate about books and eager to explore new worlds of knowledge? At our website, we offer a vast collection of books that cater to every interest and age group. From classic literature to specialized publications, self-help books, and children’s stories, we have it all! Each book is a gateway to new adventures, helping you expand your knowledge and nourish your soul Experience Convenient and Enjoyable Book Shopping Our website is more than just an online bookstore—it’s a bridge connecting readers to the timeless values of culture and wisdom. With a sleek and user-friendly interface and a smart search system, you can find your favorite books quickly and easily. Enjoy special promotions, fast home delivery, and a seamless shopping experience that saves you time and enhances your love for reading. Let us accompany you on the journey of exploring knowledge and personal growth! ebookgate.com