JavaScript

Start here

JavaScript has been around a pretty good long time, and has been getting much better over time. Because it’s the only dynamic programming language supported by most browsers, it’s an essential language for web development. It was named JavaScript to take advantage of Java’s popularity at the time, although it is in no way at all related to Java. Later it was renamed EcmaScript, but colloquially it’s still called JavaScript. These talks covering a ton of JavaScript topics are a good place to start.

ES6 has just come out, bringing with it a lot of changes to syntax and execution, most of them very timely. Check out this ES6 cheatsheet which acts as a good intro to changes from ES5.

Get some context on the JavaScript eco system:

• “A Beginner’s JavaScript Study Plan” to putting together a JavaScript study plan.
• “Modern JavaScript for Ancient Web Developers”
• Grab’s entire team of engineers use this front end development guide.
• The State of JavaScript, 2017

Tutorials and guides to get you started with JavaScript

• Javascript & JQuery, by Jon Ducket
• Eloquent JavaScript: A Modern Introduction to Programming, by Marjin Haverbeke, and there’s a free version available on his site as well.
• You Don’t Know JavaScript, one of the most in-depth and beloved book series on JavaScript, available in print as well as for free on Github.
• FreeCodeCamp’s free online JavaScript video course
• GirlDevelopIt’s Intro to JavaScript course
• Mozilla’s basic introduction to JavaScript
• JavaScript mini-course
• Build 30 vanilla JavaScript projects with this free course by Wes Bos

Articles, cheatsheets, documentation, and important concepts

• Awesome collection of courses
• Intro to writing object-oriented JavaScript
• OverAPI JavaScript Cheatsheet
• JSFiddle, an awesome site for trying out JavaScript code in the browser
• MDN JavaScript documentation, probably the only good documentation for JavaScript currently out there.
• Semicolons in JavaScript
• JavaScript in Chrome
• JavaScript Design Patterns
• JavaScript Prototype
• JSON Web Token
• Understanding data structures with JavaScript
• Building Progressive Web Applications rather than native apps on phones.

JavaScript objects: making and using them

• Understanding JavaScript’s prototypal inheritance using CSS

Events, callbacks, and Promises

• Understanding JavaScript events
• JavaScript Events and the call stack
• Callbacks in JavaScript: one of the essential things you need to understand. These days the new opponent on the callbacks field is the Promise

Understanding JavaScript throttling, and when to use it

• “Throttling function calls”
• “Understanding the difference between throttling and debouncing”
• “Debouncing and Throttling explained with examples”
• “Throttling and debouncing in JavaScript”

Dynamic vs static object typing: understanding the technology and the debate

• Static typing in JavaScript, part 1 of a 3 part series. Very good introduction to static typing, the pros and cons, and the reason people are having this conversation.
• Understanding factory functions

Understanding the functional-programming aspects of JavaScript

• Functional programming in JavaScript, part 1 and part 2
• Functions as first class citizens: understanding higher order functions, and how you can pass functions around
• “The rise and fall of functional programming and composable software”, explained through and with a focus on JavaScript
• “A functional programmer’s introduction to JavaScript”
• “Why learn functional programming in JavaScript?”

Regular Expressions with JavaScript

• Scriptular, a regular expression checker.

Build tools, task runners, and important supporting tools

Don’t flounder among the many build tools and task runners out there. You do ned at least one or two of them in your workflow, so get familiar with these big ones.

• gulp: this is a JavaScript task-runner, able to do tasks like compile SASS, compress images, and more.
• grunt: Another JavaScript task-runner (my favorite!), with syntax that’s different from gulp.
• NPM, Node Package Manager: a software package manager for JavaScript.
• Yarn, another very popular and new package manager for JavaScript.
• Bower: another very popular package manager.
• Yeoman: a scaffolding tool helping you kickstart your new projects.
• webpack: a module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph that includes every module your application needs, then packages all of those modules into a small number of bundles (often only one) to be loaded by the browser. webpack documentation is here.. To get started, take the webpack course that the creator of webpack made.
• Flux and/or Redux: these are tools that manage front-end application state and storage. Here’s an article discussing the two.

Great libraries to know

jQuery

jQuery is incredibly popular (over 70% of all sites use it), but you might not need it, and your project may be better off without it.

• Introduction to jQuery
• Official documentation, and a very good one too
• Events documentation
• Creating tabs with jQuery
• “I still love jQuery – and you should, too.”

Data visualization libraries

• D3 data visualization, the go-to library for data visualization with JavaScript. Also check out these D3 code snippets to get started. There’s plenty of other JavaScript libraries for data visualization out there as well.
• Google Visualizations

Other libraries to know

• moment.js: A great library for date and time that comes with a ton of useful date and time functions. This is definitely a production-level library.
• GMaps, free wrapper to use the Google Maps API.
• Parallax.js, super simple library allowing you to create a parallax scrolling effect on images.
• Bluebird promises: a very useful, production-level library making it easy to make and use asynchronous promises in JavaScript.
• Lodash.js: Great library that dramatically extends basic array, collection, etc functionality so you don’t have to write your own every time. Production-level library that’s widely used.

Writing tests for JavaScript

• Tutorial on getting setup with Jasmine gem
• Jasmine syntax and methods
• Testing jQuery with Jasmine

Free stuff

Lots of people give away small bits of code for free. This is a super amazing place to start looking at that stuff: Codyhouse, a place for free tiny JS, HTML & CSS things.

• Want more? Here’s a huge compilation of JavaScript libraries and tools, free to use and enjoy.