LearnJavascript: A list of resources

This list was inspired by (a now defunct) discussion on LinkedIn's Javascript group.

(Quote by the lovely MPJ)

Table of Contents (work in progress)

• 1. Learning

• 2. Suggested Coding Rules & Best Practices

• 3. Resources

  • 3.1 Beginner Resources
    • 3.1.1 Courses
    • 3.1.2 Testing Code
    • 3.1.3 APIs
  • 3.2 General Resources
  • Functional Programming
    • Reading
    • Video
    • Video
  • 3.3 Node.JS
  • 3.4 Frameworks & Libraries
    • 3.4.1 Backbone.js
    • 3.4.2 jQuery
    • 3.4.3 Angular & AngularJS
    • 3.4.4 Ember
    • 3.4.5 Knockout.js
    • 3.4.6 React.js & Redux
  • 3.5 Books
  • 3.6 Online Books
  • 3.7 Video & Audio
  • 3.8 Newsletters
  • 3.9 Developers
  • work in progres...
  • 3.10 Tools
  • 3.11 JS Compiled Languages

• Contributors

About me: GitHub | Twitter | StackOverflow | LinkedIn | CodeGrepper | PlethoraThemes

LEARNING

• Understand type coercion

• Get a good understaning of Functions, Scope and Hoisting

  • Understand exactly how non-primitive types are passed to functions as arguments.

  • Here are some really good resources explaining scope and hoisting:

    • JavaScript Visualized: Hoisting, By Lydia Hallie
    • JavaScript Visualized: Scope (Chain), By Lydia Hallie
    • Scope in JavaScript - HTTP 203

• Understand how undefined and null behave and how they differ.

• Study Objects, Prototypal Inheritance and OOP, and OLOO: Objects Linked to Other Objects

  • JavaScript Visualized: Prototypal Inheritance
  • Marcus Phillips: Secrets and Lies about JavaScript classes (Low-quality video but definitely worth watching)

• Make sure to understand callbacks, IIFEs and asynchronicity as they are some of the most commonly encountered and crucial concepts in JS

  • Callbacks in JavaScript:
    • Callbacks in JavaScript
    • Callback function (MDN)
    • JavaScript: What the heck is a Callback?
  • Immediately Invoked Function Expression (IIFEs):
    • IIFE (MDN)
    • Immediately Invoked Function Expression - Beau teaches JavaScript
    • The IIFE Pattern (Video by Kyle Simpson)
  • Asynchronous Programming in JavaScript:
    • Asynchronous Programming (Excellent post)
    • JavaScript Visualized: Promises & Async/Await (Excellent post)

• Study the source code of popular libraries: jQuery, underscore, etc.

  Here are 2 great videos on the subject by Paul Irish:

  • 10 Things I Learned from the jQuery Source
  • 11 More Things I Learned from the jQuery Source

• Read (or preferably buy) every single book of the excellent You Don't Know JS series by Kyle simpson [MUST READ]

• Watch every video by Douglas Crockford.

• Take the full course 'JavaScript The Good Parts' by Douglas Crockford on Front End Masters

• Get a really good understanding of closures and this

  • JavaScript Closures are Super Simple! (YouTube Video: 16 min)
  • JavaScript the Hard Parts: Closures, Scope, and Execution Context (Student Approved Resource)
  • Understanding Functions and 'this' By Bryan Hughes

• Study performance and code optimization

  Here is a good article by Nicholas Zakas:

  • 10 Javascript Performance Boosting Tips
  • The cost of JavaScript in 2019 By Addy Osmani

• Check every tip on the A Drip of JavaScript list and subscribe to it.

• Check the (archived version) of an old but good resource: JavaScript Garden.

  JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.

• Read some books. You can find some great books for JS on the BOOKS section of this list.

• Learn how to debug your JS code. Here are some good links as a starting point:

  • Debugging JavaScript
  • Chrome DevTools Command Line API Reference

• Study general Software Design Patterns along with JavaScript-specific Patterns and Anti-Patterns:

  • Learning JavaScript Design Patterns, Addy Osmani
  • Javascript Patterns, moderated by Shi Chuan
  • Frontend architecture: Decoupling apps from frameworks (DevFest 2019)

• Understand the Single Threaded Process & Event Loop.

  • Concurrency model and Event Loop, MDN
  • The JavaScript Event Loop: Explained, By Erin Swenson-Healey
  • Understanding the node.js event loop, by Mixu
  • Introduction to Javascript Processes, by *Nico Valencia *
  • How JavaScript Timers Work, By John Resig
  • Philip Roberts: Help, I'm stuck in an event-loop: How JavaScript actually works

• Study some of the modern APIs: WebRTC, File API, Blob API, etc.

• Master Regular Expressions.

• Get in the habit of testing. (Crucial!). QUnit is a good starting point.

• Subscribe to these great YouTube channels and watch every video you can:

  • CascadiaJS
  • JSConf

• Learn some framework or library like jQuery, React, Angular, Vue.JS, SVELTE, Backbone.JS, underscore, AngularJS, Ember, Knockout.JS, etc.

• Try building a ToDo App using one of these libraries

• Get to know Node.JS and start building apps.

  • Try running server-side JS code usign Node.JS on Runnable.com
  • Install Node.JS locally and start experimenting.

• Subscribe to Newsletters and stay up to date with JS and Node. (See section 3.8 NEWSLETTERS)

• Become familiar with a Task Manager like Grunt or Gulp and/or learn how to use npm scripts.

• Learn how to use Module Bundlers like WebPack, Parcel, Browserify and other.

• Start building cross-platform Desktop Applications using HTML/CSS/JavaScript in Electron.JS or Node-Webkit.

• Follow some of the masters on Twitter. (See section 3.6 of the RESOURCES section)

• Code using a Style Guide.

• And, of course, you definitely need to learn TypeScript!

2. SUGGESTED CODING RULES AND BEST PRACTICES

• Always use let or const when declaring variables. Avoid using var.
• Code using "use strict"
• If you are using VSCode Editor add the //@ts-check comment at the top of your code for an extra layer of checks via TypeScript Linter
• Always use semicolons. // Not using semicolons??? Lonely Island uses them everyday
  • Here's a little bit of advice for the semicolon haters (by Ben Alman)
• Prefer using === over ==
• Always use curly braces
• Comment your code
• Avoid/Reduce global variables
• Avoid using with()
• Avoid using eval()
• Pass functions instead of strings to setTimeout or setInterval, as this triggers eval() internally.
• Use JSHint / JSLint
  • If you are using VSCode you can add the following comment at the top of your code to enable type checking: //@ts-check (See screenshot)
  • Inline lint highlighting for the Sublime Text 2 editor
  • Interactive code linting framework for Sublime Text 3
• Study and apply Software Principles such as DRY, SOLID, KISS, etc.

The difference between JavaScript and JavaScript with use strict

3. RESOURCES

3.1 BEGINNER RESOURCES [ UPDATED ]

• Introduction to JavaScript | Scrimba Interactive Screencasts | 69min
• Just JavaScript Course By Dan Abramov and Maggie Appleton
• JavaScript First Steps | MDN
• What Is JavaScript Made Of?
• JavaScript the Right Way
• JavaScript Basics A quick introduction to basic and important concepts of JavaScript
• JavaScript For Cats, by Max Ogden
• JavaScript Guide, MDN
• Introduction to JavaScript - 24 Interactive Screencasts
• Learn modern JavaScript - ES6 through Interactive Screencasts
• Introduction to ES6+ - 23 Interactive Screencasts
• JavaScript and Node Fundamentals: A Collection of Essential Basics, by Azat Mardan
• 5 Tips to Become a Better JavaScript Developer, by JUSTIN CHMURA
• JS 101
• 5 Tips to Become a Better JavaScript Developer
• Things Every Javascript Developer Should Know, by Lubomir Vitol
• JavaScript Idiosyncrasies
• Airbnb JavaScript Style Guide
• Context or the "This" Keyword in JavaScript, by Adam Breindel
• 45 Useful JavaScript Tips, Tricks and Best Practices
• JavaScript DevDocs
• MDN JavaScript Guide
• How to Become a Great JavaScript Developer*
• FAQ for comp.lang.javascript
• Archived Resources (links that are no longer available and only accessible via archive.org):
  • 7 JavaScript Basics Many Developers Aren't Using (Properly)
  • Javascript: BEST PRACTICES PART 1, by Christian Heilmann / Part 2

3.1.1 COURSES [ UPDATED ]

• Deep Dive Into Modern Web Development | Full Stack course by The University of Helsinki
• CodeCombat: Learn to Code by Playing a Game
• Javascript for Beginners, Udemy PAID COURSE

3.1.2 TESTING CODE

• JSBin
• JSFiddle • 16 ONLINE JS EDITORS

3.1.3 APIs

• Web APIs
• A presentation about several HTML5 APIs (Contains useful links, code and resources in the slides)
• Screen Orientation API

3.2 GENERAL

• Learn Javascript resources on MDN
• Essential JavaScript Links,A curated list by Eric Elliott and friends
• JavaScript Garden
• Learn JavaScript Essentials (for all skill levels), by Eric Elliott
• JavaScript, The Right Way
• Dos and Donts: Best Practices When Learning JavaScript
• The site of Dr. Axel Rauschmayer
• David Walsh's Blog
• Understand JavaScript Closures With Ease
• JavaScript and the Browser: Under the Hood, by Ariya Hidayat
• JSdo It: Share JavaScript, HTML5 and CSS.
• Explore JavaScript: Popular and new libraries, top authors and trending discussions
• DailyJS

ES6 (EcmaScript 2015)

• A tutorial to JavaScript Arrow Functions (Flavio Copes)
• Arrow functions, the basics (JavaScript.info)
• Arrow functions revisited (JavaScript.info)

PERFORMANCE

• JavaScript Performance Analysis: Keeping the Big Picture, by Ariya Hidayat
• Speeding up JavaScript: Working with the DOM
• Javascript optimization – high performance JS apps
• Writing Efficient JavaScript: Chapter 7 - Even Faster Websites, by Nicholas C. Zakas
• A Couple of Quick Tips for JavaScript Optimization
• CSS TRIGGERS

TAMING THE ASYNCHRONOUS NATURE OF JAVASCRIPT [ UPDATED ]

• Asynchronous JavaScript: From Callback Hell to Async and Await
• Promises YouTube video by MPJ (Fun Fun Function) | 17min
• Promises, async/await @ JavaScript.info
• Async JS Crash Course - Callbacks, Promises, Async Await YouTube video by Traversy Media | 25min
• async / await in JavaScript - What, Why and How - Fun Fun Function YouTube video | 24min
• Asynchronous JavaScript with async/await
• JavaScript Goes Asynchronous (and It’s Awesome)
• Write Better JavaScript with Promises, By Landon Schropp
• The Evolution of Asynchronous JavaScript
• Javascript Async Control Flow, By KENNY KAYE | 20 OCTOBER 2015

ADVANCED

• JavaScript language advanced Tips & Tricks
• Byte saving techniques: a collection of JavaScript wizardry that can shave bytes off of your code
• Advanced JavaScript Techniques
• MetaJS: Visualize JavaScript AST Execution
• Philip Roberts: What the heck is the event loop anyway? | JSConf EU 2014

FUNCTIONAL PROGRAMMING: READING

• An Intro to Functional Programming Concepts in JavaScript, By Thomas Collardeau
• Why Curry Helps, By Hugh FD Jackson
• Functional Programming in Javascript An interactive learning course by Jafar Husain
• Recursion in Functional JavaScript, By M. David Green
• Functional Programming, By Scott Sauyet
• Ramda + ramda-fantasy REPL

FUNCTIONAL PROGRAMMING: VIDEO

• Intro to Recursion - Refactoring to a Pure Function, By Shanon Osbourne
• Functional programming and curry cooking in JS By Stefanie Schirmer | JSConf EU 2015**
• Next-level functional Javascript with Ramda, By Warren Seymour
• Pure, functional JavaScript, By Christian Johansen
• Lenses Quick n' Dirty: Functional Lenses in javascript, By Brian Lonsdorf

FUNCTIONAL PROGRAMMING: LIBRARIES

• Ramda.JS
• Lodash.JS
• Underscore.JS

3.3 NODEJS

3.4 FRAMEWORKS AND LIBRARIES

LISTS

• Awesome JavaScript: A collection of awesome browser-side JavaScript libraries, resources and shiny things

3.4.3 ANGULAR & ANGULAR JS [ UPDATED ]

3.5 BOOKS

3.6 ONLINE BOOKS

3.7 VIDEO & AUDIO

3.7.1 VIDEO

BEGINNERS

• Introduction to JavaScript Programming, by Curran Kelleher

GENERAL

• Javascript, the Good Parts, GoogleTechTalks, Douglas Crockford
• Douglas Crockford: The JavaScript Programming Language
• Vanilla JavaScript YouTube Playlist by Traversy Media
• ES6 Playlist by Traversy Media
• TreeHouse - Beginner's Guide to JavaScript
• Modern JavaScript YouTuybe Playlist By NetNinja
• OOP in JavaScript | YouTube Playlist by NetNinja
• 10 Things I Learned from the jQuery Source, Paul Irish
• 11 More Things I Learned from the jQuery Source, Paul Irish
• Paul Irish, "Delivering the goods"
• Paul Irish, "JavaScript Development Workflow of 2013"
• JavaScript Scope Chains and Closures, by Adam Breindel
• Must-watch videos about javascript, video list curated by Sergey Bolshchikov
• Must-Watch JavaScript, video list curated by Matt Smith
• JavaScript Coding Tips, by Axel Rauschmayer
• Philip Roberts: Help, I'm stuck in an event-loop: How JavaScript actually works

3.7.2 AUDIO

• The Origin of Javascript with Brendan Eich
• 5 Minutes of JavaScript

3.7.3 AUDIO > PODCASTS 📻

• JavaScript Jabber
• React Round Up
• 20MinuteJS
• Kent C Dodds
• SyntaxFM
• StackOverflow Podcast
• The Web Platform Podcast
• Software Engineering Radio
• IEEE Computing Conversations
• Command Line Heroes
• CoRecursive: The Stories Behind The Code
• CaSE: Conversations about Software Engineering
• Code Newbie Podcast
• Three Devs and a Maybe

3.8 NEWSLETTERS

3.9 DEVELOPERS

3.10 TOOLS

3.10.1 GIT

• Introduction to GitHub, youTube video by Curran Kelleher

3.11 JAVASCRIPT COMPILED LANGUAGES

3.11.2 TYPESCRIPT [ UPDATED ]

• Understanding TypeScript’s type notation (Probably the best resource to begin with TS)
• TypeScript
• TypeScript Tutorial for Angular and React Developers | Mosh | YouTube video | 52min
• TypeScript Tutorial by Derek Banas | YouTube video | 49min
• Advanced TypeScript Tutorials by Basarat Ali Syed on YouTube
• ⭐ An interactive TypeScript tutorial for beginners
• Matt's Advanced TypeScript workshop
• 🎙️ Podcast: Using TypeScript Like A Pro, Chris Krycho

Using Type Checking in VSCode

Contributors

A big thanks to:

• Mary Richelle for reminding me to update the Redux section and fix some broken links
• Peddi Anurag for spotting broken links
• Terence Grover for spotting broken links and suggesting new ones
• Richard Barnes for suggesting the video JavaScript the Hard Parts: Closures, Scope, and Execution Context.

Kudos to Dimitrios Michalakos for suggesting the Understand the Single Threaded Process & Event Loop section and providing me with the links.

Questions? Ideas? Please check out the Discussions section!