Learning Web App Development

Learning

Web

_{App Development}

Semmy

Purewal

Table

of

Contents

Preface

xi

1.

The Workflow

1

TextEditors 1

Installing

SublimeText 2

SublimeText Basics 4

Version Control 6

Installing

Git 7

Unix Command-LineBasics 8

Git Basics 12

Browsers 20

Installing

Chrome 20

Summary

21

More Practiceand Further

_Reading

21

Memorization 21

SublimeText 22

EmacsandVim 22

UnixCommand 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 AnchorsandLists, Oh

_My!

29

Generalizations 32

Using

HTML Validation to

_Identify

Problems 35

Amazeriffic 38

Identifying

Structure 39

Visualizing

StructurewithaTree 41

Implementing

theStructurewithOurWorkflow 42

Structuring

theMainContent 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

MoreAboutHTML 51

3. The

_Style

53

Hello,

CSS! 53

Rulesets 56

Comments 57

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

withFonts 72

Resetting

Browser Inconsistencies 76

Using

CSS Lintto

_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

CSSSelectors Practice 93

Style

the

_FAQ

_Page

for Amazeriffic 94

Cascading

Rules 95

Responsiveness

and

_Responsive

Libraries 95

4. The

_{Interactivity}

97

Hello,

_JavaScript!

97

Our First Interactive

_App

99

TheStructure 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

JSLintto

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

AJAX

155

Accessing

anExternal

JSON

File 155

Overcoming

Browser

_Security

Restrictions 156

The get

JSON

Function 157

A

JSON Array

158

So What? 159

Getting Images

from Flickr 160

Adding

a

Tags

FeaturetoAmazeriffic 163

The_mapFunction 165

Adding

a

Tags

Tab 166

Building

theUI 167

Creating

anIntermediate

Tags

Data Structure 169

Tags

asPartofOur

Input

173

Summary

175

More Practice and Further

_Reading

176

Flickr Slideshow 176

Object

Practice 177

OtherAPIs 180

6.

The

Server 181

Setting Up

Your Environment 181

Installing

VirtualBox and

_Vagrant

182

Building

YourVirtual Machine 183

Connecting

toYourVirtual 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

Whats

_Happening

Here? 198

Storing

Counts 198

Modularizing

Our Tweet Counter 201

Importing

Our Module Into

_Express

201

Setting

Up

aClient 202

Creating

aServerfor Amazeriffic 204

Setting Up

Our Directories 204

Initializing

aGit

Repository

204

Building

the Server 204

Running

the Server 205

Posting

Informationtothe Server 205

Summary

208

More Practice and Further

_Reading

209

Installing Node.js

Locally

209

JSHint

andCSS Lint via NPM 209

Generalizing

Our Tweet CounterCode 210

PokerAPI 212

7.

The

Data Store

215

NoSQL

Versus

SQL

215

Redis 216

Interacting

with the Redis Command-Line Client 216

Installing

the Redis Moduleviaa

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-LineClient 223

Modeling

Datawith

_Mongoose

226

Storing

AmazerifficToDos 229

Summary

230

More Practiceand Further

_Reading

231

Poker API 231

Other Database References 231

8.

The Platform

233

Cloud

_Foundry

233

Creating

anAccount 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

RedistoYour

_App

241

Summary

246

More Practice

and

Further

_Reading

246

Poker API 246

OtherPlatforms 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,

andREST 259

Setting

Up

Routes

_by

ID 260

Using jQuery

for put and delete

Requests

261

HTTP

_Response

Codes 262

Model-View-Controller 263

Adding

UserstoAmazeriffic 264

Building

the UserModel 264

Building

the UserController 265

Setting Up

Routes 266

Improving

Our ToDo ControllerActions 268

Summary

270

MorePractice and Further

_Reading

271

Removing

ToDos 271

Adding

aUserAdmin

Page

272

Views

_Using

EJS and

Jade

273

Build Another

_App

273

Ruby

on Rails 273

Index

275