openjsan

articles / Guides

Guides

Three short reading tracks. Each one moves from the fundamentals to the practical, in order.

Most JavaScript learning happens in a scatter: a question leads to a search, a search leads to a Stack Overflow answer, and the answer solves the immediate problem without ever connecting to the next one. That is fine for getting unstuck, but it leaves gaps, and the gaps are usually in the fundamentals rather than the framework of the week. These tracks exist to fill those gaps in a sensible order.

Each track is a short, deliberate sequence rather than an exhaustive curriculum. The articles are arranged so that each one builds on the last: you meet an idea, use it, and then meet the next idea that depends on it. You can of course read any article on its own, but taken in order each track leaves you with a connected mental model rather than a pile of isolated facts.

Which track to start with depends on where the friction is. If the language itself still feels unpredictable, begin with foundations: modules, objects, and the array methods you reach for every day. If your code works but you are not sure why it works, the browser runtime track explains what actually happens when a page loads and runs. And if you are maintaining a codebase rather than starting one, tooling and quality covers the testing, debugging, and dependency decisions that decide whether a project stays pleasant to work in.

None of this assumes you are a beginner. The writing skips the absolute basics and focuses on the parts that are commonly half-understood even by people who have shipped production JavaScript for years. Reading time is noted on each step so you can budget a track across a few short sittings rather than one long one.

01

JavaScript foundations

The language itself, covered in the order it builds: how modules fit together and keep code organized, how objects and prototypes actually work beneath the class syntax, and how to move data through arrays cleanly with map, filter and reduce. Finish this track and the everyday language stops feeling unpredictable.

  1. 1 JavaScript Modules and Packages: From Script Tags to ESM How JavaScript moved from global script tags and ad-hoc registries to native ES modules and a package manager,… 4 min
  2. 2 Objects and Classes in JavaScript: Prototypes and Composition JavaScript objects work differently from classical languages. A look at prototypes, the class syntax built on top of… 3 min
  3. 3 A Field Guide to JavaScript Array Methods map, filter, and reduce replace most hand-written loops with clearer intent. A practical tour of the array methods… 3 min
02

The browser runtime

How your code actually runs once it reaches the browser: working with the DOM directly, understanding the single-threaded event loop and where promises fit, and getting data in and out of the page with the modern fetch API. This is the track that explains the "why" behind behaviour you have probably worked around without fully understanding.

  1. 1 Data Fetching in the Browser: From XMLHttpRequest to fetch How browsers request data without a full page reload, why the old callback style was painful, and how… 4 min
  2. 2 Promises, async/await, and the Event Loop JavaScript runs on a single thread yet handles many things at once. The event loop, the task queues,… 3 min
  3. 3 Working with the DOM Without a Framework The browser ships a capable API for selecting elements, handling events, and updating the page. A refresher on… 3 min
03

Tooling & quality

The practices that decide whether a codebase stays pleasant to work in: writing tests that are fast enough to actually run, debugging effectively with the browser devtools instead of scattered logging, and choosing dependencies with a clear head rather than by reflex. Most useful once you are maintaining code, not just writing it.

  1. 1 Utility Libraries vs. Modern JavaScript General-purpose helper libraries once filled real gaps in the language. Many of those gaps have since closed. A… 3 min
  2. 2 Debugging JavaScript in the Browser The browser devtools are a full debugger most developers barely use. Breakpoints, the call stack, watch expressions, and… 3 min
  3. 3 A Practical Approach to JavaScript Testing What to test, how the common kinds of tests differ, and how a modern test runner turns a… 3 min

Working through a track

The articles are short by design, so a whole track fits into a few coffee breaks rather than a weekend. The most useful way to read one is actively: open the browser console alongside the article and run the examples as you go, changing a value here and there to see what breaks. Reading code is not the same as understanding it, and the console is the fastest feedback loop you have.

If you only have time for one track, pick the one that matches your current friction rather than starting at the top. Someone debugging a flaky test does not need to begin with modules. The tracks do not depend on each other, even though the articles within each one do, so jumping straight to the runtime or the tooling track is completely reasonable.

When you finish a track, the cheatsheets are a good way to keep the syntax fresh, the glossary is there for any term that did not stick, and the tools turn a few of the concepts into something you can use directly. Everything connects back to the full set of articles, which you can also read in any order once the foundations are in place.