Learn JavaScript in 2020: A curated and up-to-date list of resources

Offirmo — Fri, 06 Nov 2020 11:32:35 +0000

An acquaintance of mine wanted to add JavaScript to their engineering toolbox but they only learnt OOP with Java so far. I reviewed my JavaScript stash of links, discarded the outdated ones and ordered them:

Resources for learning JavaScript (and its ecosystem) in 2020

Links are introduced in suggested order of reading
Intended target: someone knowing to program but not in JavaScript
all resources are free

Why?

Why investing in JavaScript? (blog post coming soon)

Fundamentals

A re-introduction to JavaScript (JS tutorial) https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
Dan Abramov's "Just JavaScript" 1 to 9 https://offirmo-backups.github.io/my-time-machine/Dan%20Abramov%20-%20Just%20JavaScript/01.%20Mental%20Models.html
Mozilla's JavaScript Guide https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide
Promises https://web.dev/promises/
Eloquent JavaScript with an intro to the browser and node https://eloquentjavascript.net/
fetch intro: https://developers.google.com/web/updates/2015/03/introduction-to-fetch
async/await https://developers.google.com/web/fundamentals/primers/async-functions
10 JavaScript concepts you need to know for interviews https://dev.to/arnavaggarwal/10-javascript-concepts-you-need-to-know-for-interviews

Advanced fundamentals

The Two Pillars of JavaScript Part 1: How to Escape the 7th Circle of Hell https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3
The Two Pillars of JavaScript Part 2: Functional Programming, How to Stop Micromanaging Everything https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4
Event Loop and the Big Picture (just the 1st one of the series for now) https://blog.insiderattack.net/event-loop-and-the-big-picture-nodejs-event-loop-part-1-1cb67a182810
33 Concepts Every JavaScript Developer Should Know https://github.com/leonardomso/33-js-concepts
The Keys to JavaScript Mastery https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95
JavaScript Garden = the most quirky parts of the JavaScript programming language how to avoid common mistakes and subtle bugs, as well as performance issues and bad practices http://bonsaiden.github.io/JavaScript-Garden/

Advanced ecosystem

Choose your path: frontend or backend. If you learn a bit of both, you can claim the legendary "fullstack" title.

Advanced: browser (frontend)

Roadmap https://roadmap.sh/frontend
Intro https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer
DOM https://developer.mozilla.org/en-US/docs/Glossary/DOM
Web APIs https://developer.mozilla.org/en-US/docs/Web/API
Flux architecture https://facebook.github.io/flux/docs/in-depth-overview/
The core foundations of a delightful web experience https://developers.google.com/web/fundamentals
Security https://developers.google.com/web/fundamentals/security

Advanced: node (backend)

Roadmap https://roadmap.sh/backend
Setting up a JS environment https://medium.com/javascript-scene/setting-up-a-new-macbook-for-javascript-development-289df3f8f9
node basics http://nodejs.org/
express https://expressjs.com/
NodeJS Event Loop:
1. Event Loop and the Big Picture https://blog.insiderattack.net/event-loop-and-the-big-picture-nodejs-event-loop-part-1-1cb67a182810
2. Timers, Immediates and Process.nextTick https://blog.insiderattack.net/timers-immediates-and-process-nexttick-nodejs-event-loop-part-2-2c53fd511bb3
3. Promises, Next-Ticks, and Immediates https://blog.insiderattack.net/promises-next-ticks-and-immediates-nodejs-event-loop-part-3-9226cbe7a6aa
4. Handling IO https://blog.insiderattack.net/handling-io-nodejs-event-loop-part-4-418062f917d1
5. Event Loop Best Practices https://blog.insiderattack.net/event-loop-best-practices-nodejs-event-loop-part-5-e29b2b50bfe2
6. New Changes to the Timers and Microtasks in Node v11.0.0 https://blog.insiderattack.net/new-changes-to-timers-and-microtasks-from-node-v11-0-0-and-above-68d112743eb3
7. JavaScript Event Loop vs Node JS Event Loop https://blog.insiderattack.net/javascript-event-loop-vs-node-js-event-loop-aea2b1b85f5c
Security TODO

Even more advanced

Jest, a delightful JavaScript Testing Framework https://jestjs.io/
TypeScript https://www.typescriptlang.org/
React:
1. JavaScript fundamentals before learning React https://www.robinwieruch.de/javascript-fundamentals-react-requirements
2. Roadmap https://roadmap.sh/react
3. Official React documentation it's very good https://reactjs.org/
Progressive Web Apps https://web.dev/progressive-web-apps/
System design primer https://github.com/donnemartin/system-design-primer
GraphQL https://graphql.org/

Any other good resource I missed? Please share them in a comment.

Also published as a gist

Credits: https://dev.to/chrisachard/how-to-write-your-first-post-on-dev-c3k for the tips

Heroku pipelines: easy & free!

Offirmo — Tue, 14 Jul 2020 11:08:42 +0000

Do you use heroku for your project's backend? You may be interested in setting up a branch → staging → prod pipeline. It's surprisingly easy!

My pet project uses an Heroku app as part of its backend.

ICYMI heroku is one of the simplest method to deploy a Node.js server with databases. And they have a good free tier.

Heroku bugged me to upgrade my app from its outdated cedar-14 stack:

Instead of doing an upgrade, why not recreating it from scratch? And why not trying the pipeline feature?

An heroku pipeline is just an aggregation of "branch" → "staging" → "prod" apps, with the ability to promote an app to the next step. Setup:

create a pipeline, super easy through the UI
create (or add an existing) staging app
create (or add an existing) prod app
(I didn't use "review apps", too complicated for my simple setup)

The staging app then has a "promote to production" button:

which does what you guess = promote the staging app to prod.

Since I'm now using a single bolt monorepo for all my personal dev, I had to learn how to deploy an heroku app from a sub-package of a monorepo. Fortunately, Laurent Grima has us covered: instructions.

Once linked, I enabled auto-deploys on git push for the staging app.

Note that "promoting to production" doesn't means swapping the apps like in a blue-green deployment. It just means that the nodejs source will be copied over the target app. This is what we want since staging and prod have their own databases (through heroku app addons) that shouldn't be swapped.

I must now confess that I'm not really using heroku as a server... The free tier has a limited run time. I'm just using the free databases that can be attached to an app. They are always on and can be accessed from outside.

My true server is powered by Netlify functions using a serveless architecture that I find much easier to reason about. The functions then access the heroku databases.

I was pleasantly surprised by the simplicity of heroku pipelines, I was expecting something much more complicated. Good job heroku!

DEV Community: Offirmo