The Recap

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.