Articles on Javascript

Last updated: 2023/01/09

Top deep-dives on Javascript

Look Ma, No Data Structures!

Menu Reveal By Page Rotate Animation

As a web dev, it pains me when I see the same thing website after website. The amount of tricks and interactivity available to designers, when it comes to web development, has exploded in recent years, and I love seeing novel ways of doing the same thing. In this article, Preethi shows us how she was able to bring some fun to the normally mundane menu nav bar with a neat little CSS trick and a "sprinkle" of JavaScript.

We rendered a million web pages to find out what makes the web slow

If you're planning on making anything on the web for commerical purposes, it's likely that SEO will be a chunk of your marketing strategy. Well an important aspect of SEO is how fast your website loads. This article shows some research that has been done on what is affecting the loading times for some of the most popular websites on the web. Although some of the data isn't meaningful, there are still some interesting knowledge nuggets to glean.

Leveraging Declarative Programming to Create Maintainable Web Apps

So you know that I'm trying to delve more into design patterns and programming paradigms in order to improve my coding productivity. Declarative programming is one of the patterns I stumbled upon, and it focuses on the logic of a computer rather than its control flow. Peter Suggate's extensive article applies the principle to a web application, and exemplifies it by using a finite state machine to control front end UI processes.

Modern web apps without JavaScript bundling or transpiling

The state of web development 10 years ago was probably pretty depressing and frustrating. However, in the past decade, a lot has changed in terms of developer comfort. David Heinemeier Hansson explains how bundlers, one of the parts of the software chain that make web development a hassle, are being made obsolete by HTTP2 and growing browser support for ES6.

Polymorphism without objects via multimethods

If you write code, you're definitely vaguely familiar with OOP, and probably at some point debated FP vs OOP vs DOP (data-oriented). Well in this article, Yehonathan Sharvit explores how concept very central to OOP can be reimplemented using a functional/data-oriented approach. Is it really an improvement on the OOP implementation? YOU DECIDE!

How to Conditionally Add Attributes to Objects

There are a ton of situations where it's useful to conditionally add something to an object in JavaScript, like when you're submitting data with a form and some fields are optional. In this ultra-short article (this summary might be longer?), David Walsh shows how you can use ?? (nullish coalescing operator) in JavaScript to conditionally add key/value pairs to objects.

The Philosophy of Svelte

"Great DX shouldn't come at the expense of great UX". That's how Matt Stobbs starts the article, describing Svelte's philosophy. If you're not in the know, Svelte is a lovely new web dev framework. Matt covers Svelte's philosophy from his perspective and a couple of the things (with examples) that make Svelte different from other popular frameworks.

Understanding JavaScript IIFEs Like a Boss

Functions are a big part of JavaScript, and there are actually a lot of intricacies to them, especially when it comes to scoping. In this article, Mahdhi Rezvi does a deep dive into JavaScript's Immediately Invoked Function Expression, describing what they are, different variations of them, and a number of use cases which I was previously not aware of.

Understanding Memory Leaks in Nodejs

When you're writing JavaScript code for Node, you don't really have to think about memory too much. This is a blessing and a curse; on one hand it abstracts away details, allowing you to focus on creating on a higher level, while on the other hand, those details are pretty important. In this informative article, Chidume Nnamdi explains how the memory model works for JavaScript, the basics of the garbage collector, and all of the different ways memory leaks are created (with examples).

How to convert between callbacks and Promises in Javascript

Await/async are my go to in most JavaScript programming, since I personally think it makes code much more readable and easier to reason about. Unfortunately, not all JavaScript code has caught up (or shares the same opinion), and often times you might have to work with callbacks. In that case, Tamás Sallai has written an article where you can learn how to switch between the two, reimplementing any legacy (or poorly written code) into your perferred solution.

Creating a JavaScript promise from scratch, Part 1: Constructor

Promises are a huge part of web development with JavaScript. Being able to run code knowing that it can use the data received from an external source is huge. But how do these promises work? Nicholas C. Zakas has written series that builds this essential component from the ground up. I think there's no better way to get to know a feature than making it from scratch.

JavaScript Visualized: Event Loop

Old, but still very relevant and very cool. Lydia Hallie's series focuses on making complicated JavaScript features into easy to understand visualizations.

Implementer's Guide to WebSockets

Want to put some code to a protocol (bastardization of putting a face to a name)? As a follow up on yesterday's article about web communication protocols, the author of this article completely implements a peer-to-peer ready, WS13 protocol supported websocket in JavaScript, with a focus on "the underlying network protocol and frame parsing mechanisms".

The Invisible JavaScript Backdoor

JavaScript is notorious for its lack of security, but I've never seen something like this before. In this concise article, Wolfgang Ettlinger demonstrates how an "invisible Unicode character hidden in JavaScript source code" can create a very difficult to spot backdoor in a simple express server.

Exploring Node.js Async Hooks

Async/await is popular syntax in quite a few languages. It's especially useful in JavaScript, and looks a lot better (because it's easier to understand) than the promises. In this informative article, Diogo Souza explores async_hooks, a native way in Node JavaScript to keep log or keep track of async functions. Diogo shows a few use cases, that might inspire you to implement them in your own project!

Using the Platform

How feasible is it to build a site using purely vanilla javascript? What is it like to maintain or build on? Elise Hein's article illuminates the current state of building a site using pure vanilla javascript. Elise especially focuses on ES6 modules and Web Components.

Floating Point in the Browser, Part 3: When x+y=x

My motto for this newsletter is that you find inspiration in unexpected places. I think that rings especially true when you're debugging code, and the solution comes from some past or obscure material you once read. In this diagnostic article, Bruce Dawson demonstrates how seemingly unrelated knowledge about floating point addition came in handy when debugging a problem in Chromium.

Eloquent JavaScript

It's not an article, but a full book. Marijn Haverbeke covers all aspects of modern JavaScript, with code and examples.

Hack Pipe for Functional Programmers: How I learned to stop worrying and love the placeholder

Functional programming in Javascript is no new thing, but usually requires third-party packages to take full advantage of it. More and more though, features from these packages are leaking into the core language. In this exploratory article, James DiGioia explains how and why he changed his mind in regards to the implementation of a pipe operator, from the F# style, to Hack style.

Four Eras of JavaScript Frameworks

Chris Garrett takes us on a trip through time for web development, starting with the preframework period, where young JQueriesasauruses crawled the early web, to the modern day proliferation of full-stack frameworks like Reactor and Vueadactyle.

Creating a JavaScript promise from scratch, Part 3: then(), catch(), and finally()

In the not-so-distant past we've had the previous article in this series on the newsletter. Well Nicholas C. Zakas doesn't disappoint in this one either, where he covers some of the key aspects of Promises in JavaScript. Specifically Nicholas covers the topics mentioned in the title, which are responsible for what happens next in the Promise's life cycle.

Promises in JavaScript and Clojure

Promises are a tricky topic for people first starting out with programming. Hell, I bet most senior developers don't know the details of how they work. In this informative article, Otee dives into the depths of how promises function in JavaScript, and then compares them to the similar "future" feature in Clojure.

Testing Without Mocks: A Pattern Language

James Shore discusses the importance of automated tests and the various ways to write them. The author describes the problems with the easy, obvious way to write tests and the benefits of using mocks and spies. He also describes the problems with using mocks and spies and how they can be avoided. The article is broken up into bite-sized pieces with lots of code examples.
Some highlights:

  • You have to adjust production code to work for tests (using an off switch)
  • Tests become more "sociable", meaning multiple can fail from a single bug
  • There's a long list of benefits for not mocking things for tests

An Intro to JavaScript Proxy

Mostly commonly in the software engineering world, a proxy can be thought of as a middleman between two points. This is pretty obvious in a networking environment, but how does it apply in JavaScript? In this thorough article, Travis Almand explores how a JavaScript proxy can be used to intercept an Object's functions, presenting "them as ways to extend some common JavaScript tasks with more control over data".

Experimenting with remote debugging: Node.js runtime code injection

Injecting code into remote processes isn't the safest thing to do, and is actually a common way for malicious actors to get existing processes to run code that the actor has written. Nonetheless, it's interesting to know how it's done. In this informative article, Vladimir takes "a running Node.js HTTP server and, from another local Node.js process, [injects] a script into it to make it log all incoming HTTP requests".

How to Eliminate Render-Blocking Resources: a Deep Dive

If you're looking to optimize your website's user experience, or SEO performance, the time it takes for a page to load is an essential criterion. One of the key factors affecting this stat is what Sia Karamalegos addresses in this titular article. Sia goes into the what, why, when, and how, thoroughly exposing render-blocking resources.

Understanding Garbage Collection in JavaScriptCore From Scratch

Haoran Xu does a deep-dive on the JavaScript compiler by starting out with a simple design and progressively developing it towards the actual implementation.

A pipe operator for JavaScript: introduction and use cases

Dr. Axel Rauschmayer dives into the two competing proposals for the pipe operator in JavaScript.

Video processing with WebCodecs

With the explosion of streaming services, like streaming movies, TV shows, or people live streaming, streaming libraries for browsers have also popped up all over the place. One disadvantage with most of these libraries is that they don't allow you to manipulate lower level features. Eugene Zemtsov has written an article introducing the WebCodecs API, which give developers access to browser built-in features like "video and audio decoders, video and audio encoders, raw video frames, and image decoders". Eugene also explains the workflow and provides examples for each of the individual components.

Crypto Markets Recover Amid COVID-19 Fears

The world of JavaScript is kind of this amalgamation of programming paradigms, architecture features, and buzzwords. As a result of that, sometimes it's necessary to take an overhead view of the whole situation, to get an understanding of where things are at and where they're going. In this aggregating article, Ryan Carniato explains MPA vs SPA, explores React vs Reactivity, highlights VDOM vs No VDOM, and compares a number of other features, giving a good overview of key concepts that are currently relevant, with a plethora of links to follow up material.

An in-depth perspective on webpack's bundling process

This article is from one of the readers of the newsletter! Web developers often have to deal with bundlers, which are tools that help coalesce all of the different files and file types that go into making a modern website. Webpack is one of the most popular tools for this, and in this extensive article, Andrei Gatej thoroughly explains its inner workings.

Making a falling sand simulator

Jason McGhee demonstrates how to implement an 8-bit styled sand falling simulator in JavaScript.

React - The Missing Parts

Steven Wittens experiments with adding features to a lean version of React to see if its patterns work well with non-UI applications.

Karen on Python mocks: threading.Timer

Refactoring is a big part of any kind of programming, because any project you'll work on will have some sort of technical debt. We all sometimes take shortcuts. Well Pablo Aguiar has taken a great meme, good ol' Karen, and put her to work rewriting unit tests for lazy Python devs that used time.sleep on asynchronous functions.

Reconstructing TypeScript, part 1: bidirectional type checking

TypeScript is a superset of JavaScript, that includes compile time type checking (not runtime, unfortunately?), is written in itself, and compiles to plain ol' JavaScript. If you're familiar with it, you might've thought, how does it actually handle types? In this specific article of the series, Jake Donham implements bidirectional type checking via an AST, among other things.

First look: adding type annotations to JavaScript

Dr. Axel Rauschmayer presents the new proposal for types in JavaScript.

V8 release v8.6

V8 is the engine that powers JavaScript in the browser and in NodeJS. With Google constantly working on it, it continues to get better and better. In this round of updates, Ingvar Stepanyan describes what these updates are made up, specifically an opensource JS-Fuzzer, speed-ups in Number.prototype.toString, the renaming of Atomics.wake, the Single Instruction, Multiple Data propsal on Liftoff (WebAssembly compiler), faster Wasm-to-JS calls, and detecting pending background tasks with Isolate::HasPendingBackgroundTasks.

Creating a JavaScript promise from scratch, Part 4: Promise.resolve() and Promise.reject()

Make Beautifully Resilient Apps With Progressive Enhancement

Austin Gil shows how to build out a simple pizza ordering form and server routing using progressive web app techniques to account for users who have JavaScript disabled.

How do primitive values get their properties?

Dr. Axel Rauschmayer looks at the code and specifications of how JavaScript primitive values get all of their peripheral properties.

Using web streams on Node.js

Dr. Axel Rauschmayer dives deep into all aspects of streams for Node.js.

Why would anyone need JavaScript generator functions?

James Sinclair talks about generators in JavaScript, and demonstrates how they can be used for lazy iterators, infinite iterators, and message passing.
Some highlights:

  • Generators are rarely used
  • Laziness allows you to process large data sets by loading one item at a time into memory
  • There aren't a lot of built in iterator utility functions

Faster initialization of instances with new class features

Joyee Cheung informs us on how "the initialization of class fields and private methods [being] much slower than the assignment of ordinary properties" was fixed in the V8 JavaScript engine.

Detecting pitch with the Web Audio API and autocorrelation

Alex Ellis plays with the Web Audio API to detect pitch.

implementing ShadowRealm in WebKit

Joseph Griego presents the proposed addition of ShadowRealms to the JavaScriptCore JS engine, and describes what they are, how they can be used, and the intricacies of their implementation in C++.

Writing my own build system: Coupling gulp concepts with modern JavaScript

Wladimir Palant replaces streams with async generators and does some tweaks to API calls/adds some helpers while rewriting a build system in JavaScript.

Optimizing Content Migrations With Edge Compute

Austin Gil describes how one could redirect traffic using edge computing as an alternative to NGINX.


Want to see more in-depth content?

subscribe to my newsletter!

Other Articles