/JavaScript

How Google Handles JavaScript Throughout The Indexing Process

tl;dr: “Understanding how search engines crawl, render, and index web pages is crucial for optimizing sites for search engines. Over the years, as search engines like Google change their processes, it’s tough to keep track of what works and doesn’t—especially with client-side JavaScript.” This post looks at how rendering has evolved and the real-world impact on modern web apps.

featured in #538

How Fast Is Javascript? Simulating 20,000,000 Particles

- David Gerrells tl;dr: “The challenge, simulate 1,000,000 particles in plain javascript at 60 fps on a phone using only the cpu... This is not a particularly difficult challenge if you did all the work on a gpu but the rule of the challenge is to use the CPU only or as much as possible and to stay in js land so no wasm.”

featured in #531

A Virtual DOM In 200 Lines Of JavaScript

- Marcelo Lazaroni tl;dr: “In this post I’ll walk through the full implementation of a Virtual DOM in a bit over 200 lines of JavaScript. The result is a full-featured and sufficiently performant virtual DOM library. The main goal is to illustrate the fundamental technique behind tools like React.”

featured in #520

Coding My Handwriting

- Amy Goodchild tl;dr: Amy created a cursive version of her coded handwriting by defining key points for each letter, smoothing paths, and implementing custom joining logic. She describes her approach. 

featured in #516

The Self-Rendering Eval Shirt

- Eric Simons tl;dr: The free t-shirts companies give away to developers are everywhere and, with a few exceptions, most are pretty boring: usually just a logo on a t-shirt. In this post, see how StackBlitz’s co-founder broke this mold with a t-shirt design that incorporated the StackBlitz logo constructed with \*actually valid\* JavaScript code that is the source code of the image itself.

featured in #496

JavaScript Bloat In 2024

- Nikita Prokopov tl;dr: “I was a bit out of touch with modern front-end development. I also remembered articles about web bloat, how the average web page size was approaching several megabytes! So all this time I was living under impression that, for example, if the average web page size is 3 MB, then JavaScript bundle should be around 1 MB. Surely content should still take the majority, no? Well, the only way to find out is to fuck around. Let’s do a reality check!”

featured in #492

The Self-Rendering Eval Shirt

- Eric Simons tl;dr: The free t-shirts companies give away to developers are everywhere and, with a few exceptions, most are pretty boring: usually just a logo on a t-shirt. In this post, see how StackBlitz’s co-founder broke this mold with a t-shirt design that incorporated the StackBlitz logo constructed with \*actually valid\* JavaScript code that is the source code of the image itself.

featured in #491

2023 JavaScript Rising Stars

- Michael Rambeau tl;dr: "Welcome to the 8th edition of the JavaScript Rising Stars, the place to see the trends about the JS ecosystem in 2023. Let's see how a set of UI components you copy-paste took the world by storm!"

featured in #478

How We Reduced The Size Of Our JavaScript Bundles By 33%

- Umair Nadeem Rich Hong tl;dr: Dropbox reduced its JavaScript bundles by 33% by replacing its outdated module bundler with Rollup. The existing system led to large bundle sizes and performance issues. Rollup's features like automatic code-splitting and tree shaking optimized the bundling process. Despite challenges in implementation, the transition to Rollup significantly improved performance.

featured in #441

Shrinking VS Code With Name Mangling

- Matt Bierner tl;dr: The Visual Studio Code team reduced the shipped JS size by 20% without major refactorings or code deletions. They introduced a new build step called "name mangling" to automatically shorten long identifier names in the codebase. Initially, they tried mangling private properties, but due to potential complications, they turned to mangling exported symbol names instead.

featured in #435