LESSONS

Events & jQuery

• DOM Events
• Event Listeners
• Selecting elements with jQuery
• jQuery methods
• Event Delegation
• Implicit Iteration

Materials

• Lesson 09 Slides
• Handout - Events & jQuery

Resources

• Lesson 09 Recording - Password: 6E=4l8!*
• jQuery documentation
• mouseover vs mouseenter
• jQuery events
• jQuery: Handling events
• jQuery on() method
• AirBnb JavaScript Style Guide: jQuery
• Is jQuery Still Relevant? (spoiler: YES!)
• jQuery: Event delegation
• jQuery Direct and Delegated Events
• Implicit vs Explicit Iteration in jQuery
• 🎥 Introduction to jQuery (vs JavaScript) (video)

Asynchronous JavaScript & Callbacks

• Passing and accepting functions as callbacks
• Promises & Fetch

Materials

• Lesson 11 Slides

Resources

• Lesson 11 Recording - Password: 8E.%+++@
• What the heck is a callback?
• Promises (MDN)
• Fetch (MDN)
• Using Promises
• Using Fetch
• Understanding how Promises work
• Postman: an app for building and testing API requests and responses
• 🎥 Callback Functions in JavaScript (video)

In-class lab: Feedr

• Project 2 overview & lab
• Template literals

Materials

• Lesson 13 Slides

Resources

• Lesson 13 Recording - Password: 4j*818Xc
• Project 2: Feedr description
• Feedr repo to fork
• JSON Formatter extension for Chrome
• Cross Origin Resource Sharing (CORS)
• Dealing with CORS (specific to Ionic framework, but contains some useful explanations)
• What is JSON-P?
• Template Literals in ES6
• Template Literals
• Taming Huge Collections of DOM Nodes

Closures & this

• Closures
• IIFEs
• Module pattern
• Context and this

Materials

• Lesson 15 Slides
• Handout - Closures & this

Resources

• Lesson 15 Recording - Password: 4Y?6.?79
• How do JavaScript closures work? (StackOverflow)
• Todd Motto on JavaScript scope
• Closures in JavaScript (MDN)
• 🎥 JavaScript Closures 101 (video)
• JavaScript Best Practices - Avoid Globals (W3)
• Currying in Functional JavaScript
• The Module Pattern
• Eloquent JavaScript, Chapter 10: Modules
• Module pattern example (css-tricks.com)
• 🎥 The basic module pattern (video)
• this (MDN)

Additional practice (optional)

• starter-code > optional > person-module

  Build a module that creates people objects by following the steps in the app.js file.

• starter-code > optional > iife-exercise

  Build a function that logs the value of a counter variable, using both the let and var keywords. A classic JavaScript brain teaser.

Deploying Your App

• Firebase Authentication
• Firebase Security
• Deploying to GitHub Pages
• Deploying to Firebase Hosting

Materials

• Lesson 17 Slides
• Handout - Deploying Your App

Resources

• Lesson 17 Recording - Password: 5r=Y$%.@
• Why it's safe to expose your Firebase API key to the public (Stack Overflow)
• Firebase launch checklist
• The Revealing Module Pattern
• Idea to website in 10 min with serverless architecture
• GitHub Pages overview (includes a video)
• 🎥 Introducing Firebase Hosting (video)
• 🎥 Getting Started with the Firebase Hosting on the Web (video)

Final Project Lab