Advanced JavaScript fundamentals content kit

This content kit provides learning material to allow intermediate web developers to level up their skills, learning real world techniques to take them past rudimentary syntax towards a solid foundation of skills than can be utilized to create modern web applications. It'll be visual; you'll have fun along the way.

Technology level: This content kit focuses on advanced JavaScript techniques: most of this content is well-supported across modern web browsers. Where this is not the case, the content will be clearly labeled. The examples make use of polyfills where possible to ensure maximum browser compatibility.

The base support level for the content kit is IE10.

For any issues, submit issues against the Advanced JS fundamentals CK Github repo.

Versioning information

Version 0.1, current as of June 21st 2015.

This content kit is published under the Mozilla Public License, version 2.0. (A fairly permissive license, compatible with MDN, which allows good reuse.) You can substitute it for another suitable license if you wish.

What should the presenter have?

What hardware and software will the presenter ideally have?

• Software
  • A Linux, Windows or Mac OSX computer.
  • 1-3 modern browsers installed. This could include Firefox, Chrome, Opera, Safari, or Internet Explorer 10+.
  • A decent text editor installed. Examples include Sublime Text, gedit, or Notepad++.
• Coding knowledge
  • Intermediate to expert JS knowledge, such as
    • Web APIs such as Web Audio API, Canvas, Web Sockets, Geolocation, and Web RTC.
    • ES6 features such as promises, generators, and classes.
    • Object-oriented JS
    • JS prototype methods such as forEach(), filter() and reduce().
  • intermediate HTML knowledge
  • intermediate CSS knowledge

What should the audience have?

What hardware and software should the audience ideally have?

• Coding knowledge: it would be helpful to already understand:
  • Basic JavaScript knowledge
    • Variables
    • Arrays and objects
    • Conditionals
    • Functions
    • Loops
  • Rudimentary DOM manipulation
    • Querying elements
    • Changing content
    • Adding classes
  • Basic CSS
    • Styling by class and id
    • responsive/media queries
    • states
    • animation/transition/transform
    • intermediate layout, e.g. floating, positioning, flexbox?
  • HTML fundamentals
    • Basic HTML
    • Classes and ids
    • Block and inline elements
    • Semantics, structure, clean markup (POSH?)

  Learning objectives

  After you present or teach this content kit, your audience will know:

  • How to use array/prototype methods to map/filter/sort/etc.
  • How to create object-oriented code.
  • The fundamentals of functional programming with JS.
  • How to use the most useful new ES6 features, such as generators, promises and classes.
  • Events in detail.
  • How to make use of web socket and asynchronous JS systems.
  • Patterns such as chaining and observable.

  Link to materials

  Project resources overview

  1. Array/Object prototype methods
     • Live demo page: link
     • Demo source code: link
     • Slides: link
     • Tutorial: link
  2. Object-oriented JavaScript
     • Live demo page: link
     • Demo source code: link
     • Slides: link
     • Tutorial: link
  3. Functional JavaScript
     • Live demo page: link
     • Demo source code: link
     • Slides: link
     • Tutorial: link
  4. Generators
     • Live demo page: link
     • Demo source code: link
     • Slides: link
     • Tutorial: link
  5. Events
     • Live demo page: link
     • Demo source code: link
     • Slides: link
     • Tutorial: link
  6. Asynchronous JavaScript
     • Live demo page: link
     • Demo source code: link
     • Slides: link
     • Tutorial: link
  7. Socket interactions
     • Live demo page: link
     • Demo source code: link
     • Slides: link
     • Tutorial: link
  8. Building a chaining API
     • Live demo page: link
     • Demo source code: link
     • Slides: link
     • Tutorial: link
  9. The Observable pattern
     • Live demo page: link
     • Demo source code: link
     • Slides: link
     • Tutorial: link

  Presentation setup

  In each case, you can present a lesson on each feature by using the relevant slides linked in the sections above.

  Demo setup

  In each case, you can show a demo of each feature by using the relevant live demos linked in the sections above.

  Active learning

  Each slideshow has multiple links to live examples you can play with to get first hand experience of each point in action.

  Frequently asked questions (FAQs)

  List any questions that the presenter might get here, especially any "difficult" questions. Or link to a file of FAQs.

  Question 1

  Question 1 answer

  Question 2

  Question 2 answer

  etc.

  etc.