Front-End Web Development · the Big Nerd Ranch Guide (Opal Opal Parris' Library) by Aquino, Chris -- Read -- Imperial Library of Trantor

Index

Title Page Acknowledgments Table of Contents Dedication 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

Linking a label and a form element Adding autofocus Adding an email input field

Showing example input with placeholder text

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

← Prev
Back
Next →

← Prev
Back
Next →