From zone.js to zoneless Angular and back — how it all works

This article is an excerpt from my Angular Deep Dive course Change detection (rendering) in Angular is usually triggered completely automatically as a result of async events in a browser. This is made possible by utilizing zones implemented by zone.js ... more

Rendering cycle in Angular applications — browser, angular and zone.js interaction

This article is an excerpt from my Angular deep dive course Modern web stack involves lots of moving parts. A browser provides DOM to describe what should be rendered on the screen and API to manipulate that presentation. It runs JavaScript as a reaction ... more

External Configurations in Angular

Environment variables pollute the compiled source code, which does not allow for multiple server deployments. External configuration, allows multiple custom configuration for the same source code. Consider the following server layout: The classical way ... more

Exploring how virtual DOM is implemented in React

Introduction It is almost inevitable to stumble across the term virtual DOM in your React learning journey(which I doubt it will ever end). This article aims to clarify how the virtual DOM is actually implemented in React and set the stage for future ... more

Why component identifiers must be capitalized in React

In this short article, I’d like to share some findings as to why a component must be used as <Foo /> (capitalized), as opposed to <foo /> . It may not occur very often(may not even be recommended), but if you import a component like import ... more

101 Javascript Critical Rendering Path

By definition, Critical Rendering Path is nothing but a collection of steps that make a path between the time your browser gets an HTML page and starts building the webpage for users to visualize. During this process, you need to optimize the steps your ... more

Overview of OOP patterns implementation in JavaScript

Let's take a look at the Design Patterns from OOP described in 'Gang Of Four' and let's investigate how they are implemented in JavaScript. What are Design Patterns? First things first, you need to understand the true definition of Design Patterns. As ... more

Attaching new behaviors through decorators in JavaScript

Lots of popular languages such as Java and Python have decorators. It's a common pattern that serves two major purposes: changing the functionality of an object at run-time without impacting the existing functionality of the objects wrapping a behavior ... more

Webpack: An in-depth introduction to SplitChunksPlugin

If the name of this plugin doesn't sound familiar, it may be due to the fact that it is disguised as the optimization.splitChunks configuration option. If that doesn't look very familiar either, then you probably haven't worked on build configuration ... more

​State Machines in JavaScript with XState

State machines are models that govern a finite number of states and the events that transition from one state to the other. They are abstractions that allows us to explicitly define our application's path instead of guarding against a million possible ... more

An overview of State Management solutions for React and NextJS

React.js has undergone massive developments in recent times, resulting in various state management libraries. With React projects making use of an enormous code base, there is a need to centralize and maintain code and handle data flow across the application. ... more

The Micro-Frontend Chaos (and how to solve it)

Why do we need Micro-Frontend? During the past decade frontend applications, complexity has been increased. Much of the business logic is no longer preserved to the backend but also found on the client-side, this affects the application complexity and ... more

How to Deploy a run-time Micro Frontend Application using AWS

This article is a continuation of my series on micro frontends. You’ll need to have completed at least the first tutorial to be able to follow along: How to create a Micro Frontend application using React Simple step by step guide to get a run time React ... more

Demistifying webpack's 'import' function: using dynamic arguments

Although it is a popular selling point of webpack, the import function has many hidden details and features that many developers may not be aware of. For instance, the import function can accept dynamic expression and still be able to achieve well known ... more

An in-depth perspective on webpack's bundling process

Webpack is a very powerful and interesting tool that can be considered a fundamental component in many of today's technologies that web developers use to build their applications. However, many people would argue it is quite a challenge to work with ... more

Typesafe code with Immer and where it can help in NgRx

Immer is a tiny library that makes working with immutable data structures effortless. It does so by using efficient cloning mechanisms and relying on standard JavaScript syntax. In this article we will learn how Immer works, what it's generally used ... more

Tracking user interaction area

It is often necessary to know what area of the page the user is interacting with. For example, if you are making a dropdown — you want to know when to close it. A naïve implementation would just to listen to clicks and check if it happened outside of ... more