You are previewing Front-End Web Development: The Big Nerd Ranch Guide.
O'Reilly logo
Front-End Web Development: The Big Nerd Ranch Guide

Book Description

The action in software development has shifted from packaged software to Software-as-a-Service (SAAS) built with front-end web development tools. All over the world, companies are desperate to hire software professionals with these new skills; job placement services are scrambling to find candidates. Front-End Web Development: The Big Nerd Ranch Guide brings together all the crucial JavaScript, HTML5, and CSS3 skills that experienced developers need to succeed in modern front-end development.

Writing for programmers coming from older platforms or different web paradigms, two Big Nerd Ranch boot camp trainers get you up-to-speed fast on tools and best practices you need right now. Each chapter guides you through essential concepts and APIs for front-end web development, as you build example applications that have been carefully crafted and refined through real-world instruction at Big Nerd Ranch's programming boot camps. Step by step, Chris Aquino and Todd Gandee show you how to create rich web experiences, modern websites, and outstanding web/mobile apps.

You'll learn how to:

  • Implement responsive UIs

  • Access remote web services

  • Architect apps with Ember.js

  • Debug and test your code with cutting-edge development tools

  • Harness Node.js and today's powerful npm open-source modules

  • And much more

  • This is the newest title in the Big Nerd Ranch Press series, straight from the world-class programming trainers at The Big Nerd Ranch.

    Table of Contents

    1. Title Page
    2. Acknowledgments
    3. Table of Contents
    4. Dedication
    5. Introduction
      1. Learning Front-End Web Development
      2. Prerequisites
      3. How This Book Is Organized
      4. How to Use This Book
      5. Challenges
      6. For the More Curious
      7. Using an eBook
    6. I. Core Browser Programming
      1. 1. Setting Up Your Development Environment
        1. Installing Google Chrome
        2. Installing and Configuring Atom
          1. Atom plug-ins
        3. Documentation and Reference Sources
        4. Crash Course in the Command Line
          1. Finding out what directory you are in
          2. Creating a directory
          3. Changing directories
          4. Listing files in a directory
          5. Getting administrator privileges
          6. Quitting a program
        5. Installing Node.js and browser-sync
        6. For the More Curious: Alternatives to Atom
      2. 2. Setting Up Your First Project
        1. Setting Up Ottergram
          1. Initial HTML
          2. Linking a stylesheet
          3. Adding content
          4. Adding images
        2. Viewing the Web Page in the Browser
        3. The Chrome Developer Tools
        4. For the More Curious: CSS Versions
        5. For the More Curious: The favicon.ico
        6. Silver Challenge: Adding a favicon.ico
      3. 3. Styles
        1. Creating a Styling Baseline
        2. Preparing the HTML for Styling
        3. Anatomy of a Style
        4. Your First Styling Rule
          1. The box model
        5. Style Inheritance
        6. Making Images Fit the Window
        7. Color
        8. Adjusting the Space Between Items
          1. Relationship selectors
        9. Adding a Font
        10. Bronze Challenge: Color Change
        11. For the More Curious: Specificity! When Selectors Collide…
      4. 4. Responsive Layouts with Flexbox
        1. Expanding the Interface
          1. Adding the detail image
          2. Horizontal layout for thumbnails
        2. Flexbox
          1. Creating a flex container
          2. Changing the flex-direction
          3. Grouping elements within a flex item
          4. The flex shorthand property
          5. Ordering, justifying, and aligning flex items
          6. Centering the detail image
        3. Absolute and Relative Positioning
      5. 5. Adaptive Layouts with Media Queries
        1. Resetting the Viewport
        2. Adding a Media Query
        3. Bronze Challenge: Portrait
        4. For the More Curious: Common Solutions (and Bugs) with Flexbox Layouts
        5. Gold Challenge: Holy Grail Layout
      6. 6. Handling Events with JavaScript
        1. Preparing the Anchor Tags for Duty
        2. Your First Script
        3. Overview of the JavaScript for Ottergram
        4. Declaring String Variables
        5. Working in the Console
        6. Accessing DOM Elements
        7. Writing the setDetails Function
          1. Accepting arguments by declaring parameters
        8. Returning Values from Functions
        9. Adding an Event Listener
        10. Accessing All the Thumbnails
        11. Iterating Through the Array of Thumbnails
        12. Silver Challenge: Link Hijack
        13. Gold Challenge: Random Otters
        14. For the More Curious: Strict Mode
        15. For the More Curious: Closures
        16. For the More Curious: NodeLists and HTMLCollections
        17. For the More Curious: JavaScript Types
      7. 7. Visual Effects with CSS
        1. Hiding and Showing the Detail Image
          1. Creating styles to hide the detail image
          2. Writing the JavaScript to hide the detail image
          3. Listening for the keypress event
          4. Showing the detail image again
        2. State Changes with CSS Transitions
          1. Working with the transform property
          2. Adding a CSS transition
          3. Using a timing function
          4. Transition on class change
          5. Triggering transitions with JavaScript
        3. Custom Timing Functions
        4. For the More Curious: Rules for Type Coercion
    7. II. Modules, Objects, and Forms
      1. 8. Modules, Objects, and Methods
        1. Modules
          1. The module pattern
          2. Modifying an object with an IIFE
        2. Setting Up CoffeeRun
        3. Creating the DataStore Module
        4. Adding Modules to a Namespace
        5. Constructors
          1. A constructor’s prototype
          2. Adding methods to the constructor
        6. Creating the Truck Module
          1. Adding orders
          2. Removing orders
        7. Debugging
          1. Locating bugs with the DevTools
          2. Setting the value of this with bind
        8. Initializing CoffeeRun on Page Load
          1. Creating the Truck instance
        9. Bronze Challenge: Truck ID for Non-Trekkies
        10. For the More Curious: Private Module Data
        11. Silver Challenge: Making data Private
        12. For the More Curious: Setting this in forEach’s Callback
      2. 9. Introduction to Bootstrap
        1. Adding Bootstrap
          1. How Bootstrap works
        2. Creating the Order Form
          1. Adding text input fields
            1. Linking a label and a form element
            2. Adding autofocus
            3. Adding an email input field
              1. Showing example input with placeholder text
          2. Offering choices with radio buttons
          3. Adding a dropdown menu
          4. Adding a range slider
          5. Adding Submit and Reset buttons
      3. 10. Processing Forms with JavaScript
        1. Creating the FormHandler Module
          1. Introduction to jQuery
          2. Importing jQuery
          3. Configuring instances of FormHandler with a selector
        2. Adding the submit Handler
          1. Extracting the data
          2. Accepting and calling a callback
        3. Using FormHandler
          1. Registering createOrder as a submit handler
        4. UI Enhancements
        5. Bronze Challenge: Supersize It
        6. Silver Challenge: Showing the Value as the Slider Changes
        7. Gold Challenge: Adding Achievements
      4. 11. From Data to DOM
        1. Setting Up the Checklist
        2. Creating the CheckList Module
        3. Creating the Row Constructor
          1. Creating DOM elements with jQuery
        4. Creating CheckList Rows on Submit
          1. Manipulating this with call
        5. Delivering an Order by Clicking a Row
          1. Creating the CheckList.prototype.removeRow method
          2. Removing overwritten entries
          3. Writing the addClickHandler method
          4. Calling addClickHandler
        6. Bronze Challenge: Adding the Strength to the Description
        7. Silver Challenge: Color Coding by Flavor Shot
        8. Gold Challenge: Allowing Order Editing
      5. 12. Validating Forms
        1. The required Attribute
        2. Validating with Regular Expressions
        3. Constraint Validation API
          1. Listening for the input event
          2. Associating the validation check with the input event
          3. Triggering the validity check
        4. Styling Valid and Invalid Elements
        5. Silver Challenge: Custom Validation for Decaf
        6. For the More Curious: The Webshims Library
      6. 13. Ajax
        1. XMLHttpRequest Objects
        2. RESTful Web Services
        3. The RemoteDataStore Module
        4. Sending Data to the Server
          1. Using jQuery’s $.post method
          2. Adding a callback
          3. Inspecting the Ajax request and response
        5. Retrieving Data from the Server
          1. Inspecting the response data
          2. Adding a callback argument
        6. Deleting Data from the Server
          1. Using jQuery’s $.ajax method
        7. Replacing DataStore with RemoteDataStore
        8. Silver Challenge: Validating Against the Remote Server
        9. For the More Curious: Postman
      7. 14. Deferreds and Promises
        1. Promises and Deferreds
        2. Returning Deferred
        3. Registering Callbacks with then
        4. Handling Failures with then
        5. Using Deferreds with Callback-Only APIs
        6. Giving DataStore a Promise
          1. Creating and returning Promises
          2. Resolving a Promise
          3. Promise-ifying the other DataStore methods
        7. Silver Challenge: Fallback to DataStore
    8. III. Real-Time Data
      1. 15. Introduction to Node.js
        1. Node and npm
          1. npm init
          2. npm scripts
        2. Hello, World
        3. Adding an npm Script
        4. Serving from Files
          1. Reading a file with the fs module
          2. Working with the request URL
          3. Using the path module
          4. Creating a custom module
          5. Using your custom module
        5. Error Handling
        6. For the More Curious: npm Module Registry
        7. Bronze Challenge: Creating a Custom Error Page
        8. For the More Curious: MIME Types
        9. Silver Challenge: Providing a MIME Type Dynamically
        10. Gold Challenge: Moving Error Handling to Its Own Module
      2. 16. Real-Time Communication with WebSockets
        1. Setting Up WebSockets
        2. Testing Your WebSockets Server
        3. Creating the Chat Server Functionality
        4. First Chat!
        5. For the More Curious: socket.io WebSockets Library
        6. For the More Curious: WebSockets as a Service
        7. Bronze Challenge: Am I Repeating Myself?
        8. Silver Challenge: Speakeasy
        9. Gold Challenge: Chat Bot
      3. 17. Using ES6 with Babel
        1. Tools for Compiling JavaScript
        2. The Chattrbox Client Application
        3. First Steps with Babel
          1. Class syntax
        4. Using Browserify for Packaging Modules
          1. Running the build process
        5. Adding the ChatMessage Class
        6. Creating the ws-client Module
          1. Connection handling
          2. Handling events and sending messages
          3. Sending and echoing a message
        7. For the More Curious: Compiling to JavaScript from Other Languages
        8. Bronze Challenge: Default Import Name
        9. Silver Challenge: Closed Connection Alert
        10. For the More Curious: Hoisting
        11. For the More Curious: Arrow Functions
      4. 18. ES6, the Adventure Continues
        1. Installing jQuery as a Node Module
        2. Creating the ChatForm Class
          1. Connecting ChatForm to the socket
        3. Creating the ChatList Class
        4. Using Gravatars
        5. Prompting for Username
        6. User Session Storage
        7. Formatting and Updating Message Timestamps
        8. Bronze Challenge: Adding Visual Effects to Messages
        9. Silver Challenge: Caching Messages
        10. Gold Challenge: Separate Chat Rooms
    9. IV. Application Architecture
      1. 19. Introduction to MVC and Ember
        1. Tracker
        2. Ember: An MVC Framework
          1. Installing Ember
          2. Creating an Ember application
          3. Starting up the server
        3. External Libraries and Addons
        4. Configuration
        5. For the More Curious: npm and Bower Install
        6. Bronze Challenge: Limiting Imports
        7. Silver Challenge: Adding Font Awesome
        8. Gold Challenge: Customizing the NavBar
      2. 20. Routing, Routes, and Models
        1. ember generate
        2. Nesting Routes
        3. Ember Inspector
        4. Assigning Models
        5. beforeModel
        6. For the More Curious: setupController and afterModel
      3. 21. Models and Data Binding
        1. Model Definitions
        2. createRecord
        3. get and set
        4. Computed Properties
        5. For the More Curious: Retrieving Data
        6. For the More Curious: Saving and Destroying Data
        7. Bronze Challenge: Changing the Computed Property
        8. Silver Challenge: Flagging New Sightings
        9. Gold Challenge: Adding Titles
      4. 22. Data – Adapters, Serializers, and Transforms
        1. Adapters
        2. Content Security Policy
        3. Serializers
        4. Transforms
        5. For the More Curious: Ember CLI Mirage
        6. Silver Challenge: Content Security
        7. Gold Challenge: Mirage
      5. 23. Views and Templates
        1. Handlebars
        2. Models
        3. Helpers
          1. Conditionals
          2. Loops with {{#each}}
          3. Binding element attributes
          4. Links
        4. Custom Helpers
        5. Bronze Challenge: Adding Link Rollovers
        6. Silver Challenge: Changing the Date Format
        7. Gold Challenge: Creating a Custom Thumbnail Helper
      6. 24. Controllers
        1. New Sightings
        2. Editing a Sighting
        3. Deleting a Sighting
        4. Route Actions
        5. Bronze Challenge: Sighting Detail Page
        6. Silver Challenge: Sighting Date
        7. Gold Challenge: Adding and Removing Witnesses
      7. 25. Components
        1. Iterator Items as Components
        2. Components for DRY Code
        3. Data Down, Actions Up
        4. Class Name Bindings
        5. Data Down
        6. Actions Up
        7. Bronze Challenge: Customizing the Alert Message
        8. Silver Challenge: Making the NavBar a Component
        9. Gold Challenge: Array of Alerts
    10. 26. Afterword
      1. The Final Challenge
      2. Shameless Plugs
      3. Thank You
    11. Index