Tag Archives: javascript

Rethinking JavaScript Infrastructure

Christoph Nakazawa, former Engineering Management at Facebook and now Front End Engineer at Stripe, is writing a series about JavaScript infrastructure. In this second part of this still in progress series he digs into eliminating the ongoing need for installing dependencies from the development iteration cycle.

I provide recommendations that I personally implemented and have seen work in a large monorepo with hundreds of thousands of files at Facebook. The ideas are high impact but also high effort. Let me take you on a journey of what reimagining JavaScript infrastructure could look like. My solution — check all of our dependencies into source control and make all development tools available as pre-compiled binaries. This would speed up all repository operations (getting everything up-to-date after a rebase) as well as reduce our in-band reliance on dependency management tools.

Having implemented such a strategy at Facebook, the effects were remarkable:

Immediately after checking out a gigantic monorepo, the time it took to install dependencies, start Metro and build JavaScript bundles was reduced from seven minutes to seven seconds. Half of the improvements came from ideas presented in this series so far, and the other half was achieved through bundling optimizations we’ll talk about in the future. Stay tuned!

The proposed improvements can easily be applied to other programming languages too.

Rethinking JavaScript Infrastructure →

Konva.js — HTML5 Canvas JavaScript framework

For all your working-with-layers-on-<canvas> needs:

Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching, event handling for desktop and mobile applications, and much more.

You can draw things onto the stage, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes.

There’s also a version to use with React, providing Components for all key components of Konva.

Konva.js →
React Konva →

Solving a Mystery Behavior of parseInt() in JavaScript

Dmitri Pavlutin digs into why parseInt(0.0000005); evaluates to 5:

parseInt(0.5);       // => 0
parseInt(0.05);      // => 0
parseInt(0.005);     // => 0
parseInt(0.0005);    // => 0
parseInt(0.00005);   // => 0
parseInt(0.000005);  // => 0
parseInt(0.0000005); // => 5 🤯

Solving a Mystery Behavior of parseInt() in JavaScript →

On a related note, Yannick Clybouw recently hit a similar quirk where his deploy onto GAE would fail because of a commit hash that looked a wee bit too much like a number:

Lazy loading JavaScript using IntersectionObserver

Jonathan Neal dissects the Islands Architecture approach behind Astro.

During the presentation, Fred demonstrates dynamically loading JS using “Islands Architecture”,a strategy where small HTML placeholders are progressively upgraded with dynamic or interactive content as-needed.

The demonstration involves waiting on the viewport visibility of a div placeholder before loading some JS.

Using an IIFE an IntersectionObserver is attached to keep an eye on a preceding a DOM Node. Once in view it’ll disconnect the IntersectionObserver and run whatever JS you want it to run (such as loading and rendering a React App).

Lazy loading JS by visibility →

🤔 Astro? Chris has the details over at CSS-Tricks. Be sure to watch the video.

A Beginner’s Guide To Proxies in JavaScript

In JavaScript one of the most important data types is Object. Sometimes we want to have more control over certain objects, such as being able to listen to who is reading the object property or updating.

One of the best ways to control an object is with a Proxy. You can do a lot of fun things with Proxies, which we will explain in this article.

A Beginner’s Guide To Proxies in JavaScript →
MDN Web Docs: Proxy

💵 This linked article is stuck behind Medium's metered paywall, which may prevent you from reading it. Open the link in an incognito window to bypass Medium's ridiculous reading limit.

JavaScript Classes are not “just syntactic sugar”

Andrea Giammarchi:

After reading yet another blog post about JS classes being “just sugar for prototypal inheritance”, I’ve decided to write this post to help clarifying, one more time, why this statement is misleading; a post that hopefully explains what’s the difference and why it matters to understand it.

I also used to say this — echo’ing statements by others — but will refrain from doing so from now on 😅

JS Classes are not “just syntactic sugar” →

Seam carving: content-aware image resizing … in JavaScript

Oleksii Trekhleb has implemented the Seam Carving algorithm in JavaScript.

With this article I want to do three things:

  1. Provide you with an interactive content-aware resizer so that you could play around with resizing your own images
  2. Explain the idea behind the Seam Carving algorithm
  3. Explain the dynamic programming approach to implement the algorithm (we’ll be using TypeScript for it)

Using the algorithm it’s possible to resize an original image (center) without distorting important features in the image (left) unlike regular resizing which squeezes the image (right).

Using the resulting JS Image Carver you can see the algorithm in action.

Content-Aware Image Resizing in JavaScript →
JS Image Carver →
JS Image Carver Source (GitHub) →