The Recap

Posted on 03 February 2018 in Training

Before moving onto a bigger project, I thought it would be worth consolidating the past six sessions. We’ve tackled the following subjects:

1. Forms

  • Methods & actions
  • Input types & attributes
  • CSS pseudo classes on inputs

Task: Newsletter signup form

2. JS - Variables

  • What is a variable
  • Types of variables
  • Mutable types
  • Scope
  • Global scope
  • IIFEs
  • Render function

Task: Milage calculator

3. JS - More JavaScript

  • Imperative vs. Declarative
  • Shorthand operators
  • Ternary statements
  • Module/Singleton pattern
  • You might not need jQuery
  • Array methods: find, findIndex, filter, map, reduce & sort

Task: Wrangling array data

4. JS - DOM

  • What is the DOM
  • childNodes vs. children
  • HTMLCollection vs. NodeList
  • addEventListener
  • createElement
  • innerText vs. innerHTML
  • getAttribute, classlist, dataset & style
  • Finding elements with querySelector & querySelectorAll
  • Event delegation and bubbling

Task: TODO List

5. JS - AJAX

  • Polyfill.io
  • XMLHttpRequest
  • jQuery
  • Fetch
  • Axios
  • Asynchronous gotchas
  • Streaming, when to not use AJAX

Task: Load more posts

6. Video

  • Resonsive embedding
  • Video tag attributes
  • Source tag
  • .webm & .webp
  • Object-fit
  • Fullscreen API

Task: Video player

Today’s task(s)

I’ve created a bunch of small and smallish tasks to run through. Refer back to the previous session notes, there’s nothing we haven’t covered before. The tasks are in the training repository under: /2018-01-24/index.html. If you load up that file in Sublime/Chrome and check out the script tag.


Posted on 03 February 2018 in Training