Tag: javascript

What the heck are CJS, AMD, UMD, and ESM in Javascript?

In the beginning, Javascript did not have a way to import/export modules. This is a problem. Imagine writing your app in just one file – it would be nightmarish! Then, people much, much smarter than me attempted to add modularity to Javascript. Some of them are CJS, AMD, UMD, and ESM. You may have heard some… Continue reading What the heck are CJS, AMD, UMD, and ESM in Javascript?

SDF

SDF stands for Signed Distance Field and is usually used in fragment shaders to draw shapes. The idea is that we send a 2D or 3D point to a SDF shape function and that function returns how far that point is from the shape. There are many possible shapes, as long as they can be… Continue reading SDF

Next.js and Payload: A Powerful Combination

Next.js and Payload are two powerful tools that can be used together to build modern, efficient, and scalable web applications. Next.js Next.js is a React framework that simplifies the development of web applications. It offers features like: Server-Side Rendering (SSR): Improves SEO and initial page load performance. Static Site Generation (SSG): Optimizes website speed and… Continue reading Next.js and Payload: A Powerful Combination

A surprising JavaScript memory leak

JavaScript is secretly a functional programming language, and its functions are closures: function objects get access to variables defined in their enclosing scope, even when that scope is finished. Local variables which are captured by a closure are garbage collected once the function they are defined in has finished and all functions defined inside their scope are themselves… Continue reading A surprising JavaScript memory leak

Sneaky React Memory Leaks: How `useCallback` and closures can bite you

A brief refresher on closures Closures are a fundamental concept in JavaScript. They allow functions to remember the variables that were in scope when the function was created. Here’s a simple example: function createCounter() { const unused = 0; // This variable is not used in the inner function let count = 0; // This… Continue reading Sneaky React Memory Leaks: How `useCallback` and closures can bite you

Garbage collection and closures

Garbage collection within a function doesn’t quite work how we expected. function demo() { const bigArrayBuffer = new ArrayBuffer(100_000_000); const id = setTimeout(() => { console.log(bigArrayBuffer.byteLength); }, 1000); return () => clearTimeout(id); } globalThis.cancelDemo = demo(); With the above, bigArrayBuffer is leaked forever. I didn’t expect that, because: After a second, the function referencing bigArrayBuffer is no longer callable.… Continue reading Garbage collection and closures

Event Loop Explained

Before we dig into the event loop, I want you to look at the following illustration. You might not understand all the components mentioned here, but it’s better to build a mental model before we start. We’ll now zoom in on each of the components one by one and build our understanding of the Event… Continue reading Event Loop Explained

Debouncing and Throttling

Debouncing and Throttling work on the same principle – delay stuff – but still have very different approach and use cases. Both the concepts are useful for developing a performant application. Almost all the websites you visit on a daily basis use Debouncing and Throttling in some way or the other. Debouncing A well known… Continue reading Debouncing and Throttling

Understanding async and defer

The script tag is used to add JavaScript to an HTML page. It could be an inline script or an external script. <body> <!– Some code before it –> <script> console.log(“This is an inline script.”); </script> <script src=”https://example.com/external-script.js” /> <!– Some code after it –> </body> While parsing the HTML, if browser encounters a script tag it… Continue reading Understanding async and defer