Table of Contents

Introduction

Learning Front-End Web Development

Prerequisites

How This Book Is Organized

How to Use This Book

Challenges

For the More Curious

Using an eBook

I. Core Browser Programming

1. Setting Up Your Development Environment

Installing Google Chrome

Installing and Configuring Atom

Atom plug-ins

Documentation and Reference Sources

Crash Course in the Command Line

Finding out what directory you are in

Creating a directory

Changing directories

Listing files in a directory

Getting administrator privileges

Quitting a program

Installing Node.js and browser-sync

For the More Curious: Alternatives to Atom

2. Setting Up Your First Project

Setting Up Ottergram

Initial HTML

Linking a stylesheet

Adding content

Adding images

Viewing the Web Page in the Browser

The Chrome Developer Tools

For the More Curious: CSS Versions

For the More Curious: The favicon.ico

Silver Challenge: Adding a favicon.ico

3. Styles

Creating a Styling Baseline

Preparing the HTML for Styling

Anatomy of a Style

Your First Styling Rule

The box model

Style Inheritance

Making Images Fit the Window

Color

Adjusting the Space Between Items

Relationship selectors

Adding a Font

Bronze Challenge: Color Change

For the More Curious: Specificity! When Selectors Collide…

4. Responsive Layouts with Flexbox

Expanding the Interface

Adding the detail image

Horizontal layout for thumbnails

Flexbox

Creating a flex container

Changing the flex-direction

Grouping elements within a flex item

The flex shorthand property

Ordering, justifying, and aligning flex items

Centering the detail image

Absolute and Relative Positioning

5. Adaptive Layouts with Media Queries

Resetting the Viewport

Adding a Media Query

Bronze Challenge: Portrait

For the More Curious: Common Solutions (and Bugs) with Flexbox Layouts

Gold Challenge: Holy Grail Layout

6. Handling Events with JavaScript

Preparing the Anchor Tags for Duty

Your First Script

Overview of the JavaScript for Ottergram

Declaring String Variables

Working in the Console

Accessing DOM Elements

Writing the setDetails Function

Accepting arguments by declaring parameters

Returning Values from Functions

Adding an Event Listener

Accessing All the Thumbnails

Iterating Through the Array of Thumbnails

Silver Challenge: Link Hijack

Gold Challenge: Random Otters

For the More Curious: Strict Mode

For the More Curious: Closures

For the More Curious: NodeLists and HTMLCollections

For the More Curious: JavaScript Types

7. Visual Effects with CSS

Hiding and Showing the Detail Image

Creating styles to hide the detail image

Writing the JavaScript to hide the detail image

Listening for the keypress event

Showing the detail image again

State Changes with CSS Transitions

Working with the transform property

Adding a CSS transition

Using a timing function

Transition on class change

Triggering transitions with JavaScript

Custom Timing Functions

For the More Curious: Rules for Type Coercion

II. Modules, Objects, and Forms

8. Modules, Objects, and Methods

Modules

The module pattern

Modifying an object with an IIFE

Setting Up CoffeeRun

Creating the DataStore Module

Adding Modules to a Namespace

Constructors

A constructor’s prototype

Adding methods to the constructor

Creating the Truck Module

Adding orders

Removing orders

Debugging

Locating bugs with the DevTools

Setting the value of this with bind

Initializing CoffeeRun on Page Load

Creating the Truck instance

Bronze Challenge: Truck ID for Non-Trekkies

For the More Curious: Private Module Data

Silver Challenge: Making data Private

For the More Curious: Setting this in forEach’s Callback

9. Introduction to Bootstrap

Adding Bootstrap

How Bootstrap works

Creating the Order Form

Adding text input fields

Offering choices with radio buttons

Adding a dropdown menu

Adding a range slider

Adding Submit and Reset buttons

10. Processing Forms with JavaScript

Creating the FormHandler Module

Introduction to jQuery

Importing jQuery

Configuring instances of FormHandler with a selector

Adding the submit Handler

Extracting the data

Accepting and calling a callback

Using FormHandler

Registering createOrder as a submit handler

UI Enhancements

Bronze Challenge: Supersize It

Silver Challenge: Showing the Value as the Slider Changes

Gold Challenge: Adding Achievements

11. From Data to DOM

Setting Up the Checklist

Creating the CheckList Module

Creating the Row Constructor

Creating DOM elements with jQuery

Creating CheckList Rows on Submit

Manipulating this with call

Delivering an Order by Clicking a Row

Creating the CheckList.prototype.removeRow method

Removing overwritten entries

Writing the addClickHandler method

Calling addClickHandler

Bronze Challenge: Adding the Strength to the Description

Silver Challenge: Color Coding by Flavor Shot

Gold Challenge: Allowing Order Editing

12. Validating Forms

The required Attribute

Validating with Regular Expressions

Constraint Validation API

Listening for the input event

Associating the validation check with the input event

Triggering the validity check

Styling Valid and Invalid Elements

Silver Challenge: Custom Validation for Decaf

For the More Curious: The Webshims Library

13. Ajax

XMLHttpRequest Objects

RESTful Web Services

The RemoteDataStore Module

Sending Data to the Server

Using jQuery’s $.post method

Adding a callback

Inspecting the Ajax request and response

Retrieving Data from the Server

Inspecting the response data

Adding a callback argument

Deleting Data from the Server

Using jQuery’s $.ajax method

Replacing DataStore with RemoteDataStore

Silver Challenge: Validating Against the Remote Server

For the More Curious: Postman

14. Deferreds and Promises

Promises and Deferreds

Returning Deferred

Registering Callbacks with then

Handling Failures with then

Using Deferreds with Callback-Only APIs

Giving DataStore a Promise

Creating and returning Promises

Resolving a Promise

Promise-ifying the other DataStore methods

Silver Challenge: Fallback to DataStore

III. Real-Time Data

15. Introduction to Node.js

Node and npm

npm init

npm scripts

Hello, World

Adding an npm Script

Serving from Files

Reading a file with the fs module

Working with the request URL

Using the path module

Creating a custom module

Using your custom module

Error Handling

For the More Curious: npm Module Registry

Bronze Challenge: Creating a Custom Error Page

For the More Curious: MIME Types

Silver Challenge: Providing a MIME Type Dynamically

Gold Challenge: Moving Error Handling to Its Own Module

16. Real-Time Communication with WebSockets

Setting Up WebSockets

Testing Your WebSockets Server

Creating the Chat Server Functionality

First Chat!

For the More Curious: socket.io WebSockets Library

For the More Curious: WebSockets as a Service

Bronze Challenge: Am I Repeating Myself?

Silver Challenge: Speakeasy

Gold Challenge: Chat Bot

17. Using ES6 with Babel

Tools for Compiling JavaScript

The Chattrbox Client Application

First Steps with Babel

Class syntax

Using Browserify for Packaging Modules

Running the build process

Adding the ChatMessage Class

Creating the ws-client Module

Connection handling

Handling events and sending messages

Sending and echoing a message

For the More Curious: Compiling to JavaScript from Other Languages

Bronze Challenge: Default Import Name

Silver Challenge: Closed Connection Alert

For the More Curious: Hoisting

For the More Curious: Arrow Functions

18. ES6, the Adventure Continues

Installing jQuery as a Node Module

Creating the ChatForm Class

Connecting ChatForm to the socket

Creating the ChatList Class

Using Gravatars

Prompting for Username

User Session Storage

Formatting and Updating Message Timestamps

Bronze Challenge: Adding Visual Effects to Messages

Silver Challenge: Caching Messages

Gold Challenge: Separate Chat Rooms

IV. Application Architecture

19. Introduction to MVC and Ember

Tracker

Ember: An MVC Framework

Installing Ember

Creating an Ember application

Starting up the server

External Libraries and Addons

Configuration

For the More Curious: npm and Bower Install

Bronze Challenge: Limiting Imports

Silver Challenge: Adding Font Awesome

Gold Challenge: Customizing the NavBar

20. Routing, Routes, and Models

ember generate

Nesting Routes

Ember Inspector

Assigning Models

beforeModel

For the More Curious: setupController and afterModel

21. Models and Data Binding

Model Definitions

createRecord

get and set

Computed Properties

For the More Curious: Retrieving Data

For the More Curious: Saving and Destroying Data

Bronze Challenge: Changing the Computed Property

Silver Challenge: Flagging New Sightings

Gold Challenge: Adding Titles

22. Data – Adapters, Serializers, and Transforms

Adapters

Content Security Policy

Serializers

Transforms

For the More Curious: Ember CLI Mirage

Silver Challenge: Content Security

Gold Challenge: Mirage

23. Views and Templates

Handlebars

Models

Helpers

Conditionals

Loops with {{#each}}

Binding element attributes

Links

Custom Helpers

Bronze Challenge: Adding Link Rollovers

Silver Challenge: Changing the Date Format

Gold Challenge: Creating a Custom Thumbnail Helper

24. Controllers

New Sightings

Editing a Sighting

Deleting a Sighting

Route Actions

Bronze Challenge: Sighting Detail Page

Silver Challenge: Sighting Date

Gold Challenge: Adding and Removing Witnesses

25. Components

Iterator Items as Components

Components for DRY Code

Data Down, Actions Up

Class Name Bindings

Data Down

Actions Up

Bronze Challenge: Customizing the Alert Message

Silver Challenge: Making the NavBar a Component

Gold Challenge: Array of Alerts

26. Afterword

The Final Challenge

Shameless Plugs

Thank You

Index