Latest on inDepthDev

A guide to measuring and improving React Apps performance with React Profiler. Accompanied by a web app that makes it easy to follow along.

Design Patterns need to be used for code that is highly maintainable, reusable and organised. Gang of Four comes with 23 unique design patterns, which can be used across platforms. Let's learn how Gang of Four can be implemented in JavaScript.

In this article, we will take a deeper dive into each lifecycle hook and look at how they're used in Angular.

In this article, we will learn about decorators and two different techniques for their implementation - functioning and class-based.

In this article, we will learn about State Machines in Javascript with XState.

In this article, we will provide an overview of State Management solutions for React and NextJS.

The second part of how we organized the system of settings for all textfields in Taiga UI with the power of Dependency Injection in Angular.

In this article we will learn about demistifying webpack's 'import' function: using dynamic arguments.

Micro-Frontend, this is probably the missing part for the fully isolated multi-application platform, that will provide us the flexibility and agility we need, but what is the cost?

In this article we are going through deploying process your application to production using AWS and GitHub actions.

Having parts of a form disabled is a common requirement for any large application. Sometimes users must be prevented from interacting with a form based on their role in an application.I n this article, we will explore different ways to disable reactive form controls.

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 it, mostly due to its complexity.

Explore interesting RxJS code and Angular directives in this fun exercise of recreating an analogue Morse code telegraph using your favorite tools!

Immer is a tiny library that uses structural sharing and proxy objects to guarantee the immutability pattern in the most efficient way. It's also very convenient when writing reducers to shorten code and ensure type safety.

Explore one of the most complex pieces of Taiga UI — ActiveZone directive that keeps an eye on what region user is working with. It touches on low-level native DOM events API, advanced RxJS and Dependency Injection, ShadowDOM and more!

Designing architecture could be tricky, especially in the agile world, where requirement changes are frequent. So your design has to support that and provides extendibility without the need for serious modification. In such cases, you will find the Container-Presentation pattern instrumental.

The micro-frontends concept has been out there for quite a while. We’ve been using this architecture in Wix since around 2013, long before it was even given this name. In this article I’d like to share some of the things we did in order to evolve the concept of developing big scale micro-frontends.

Sometimes a hook is just a hook, but often you'll need more context. This short blog post sums it up.

Object oriented programming - a word combination instantly recognized by almost every software developer in the world; even the ones who don't use (or even hate) it.

Use the power of Angular directives to create a reusable self-saving dropdown directive

How to eliminate duplicated code when getting route params, query params or data from Activated Route in Angular by using dependency injection.

Learn Gitlab to build a CI/CD pipeline for Angular apps and libraries. This second article focuses on deployment using two methods involving GitLab Registries and Pages. You'll also find docker jobs optimization tips using custom images.

While the end-users interacting with apps have lower tolerance to response time and higher need for speed, this post discusses different ways front-end developers can cater to their need for speed with off-the-shelf components from Angular Material.

Styling the host element is a crucial ability. Understanding that can completely change the way you develop reusable components, making their code clear and easier to maintain. This article will concentrate on techniques that use CSS styles and reduce Typescript logic.

In this article, we will learn how we can extend native date input through a directive so that it supports conversion of value and validation on value.

I decided to pick my favorite 5 tools from taiga-ui/cdk and explain how they can in any Angular app

Third party library interfaces are often loosely typed to support edge cases. However, there can be great benefits to layering more explicit types over the existing interfaces.

Angular 12 just came out which added a nullish coalescing operator (‘??’) to templates. But what are other features Angular templates have that you might have never heard of? Let’s find out!

In this post, you'll find a set of design patterns for building Angular forms based on two pillars: separation of responsibilities and reactive programming to tackle the complexity of rich and complex Angular forms.

This article dives deep into NgRx selectors and will help you understand what role that play in NgRx architecture and how they help decrease the complexity of a codebase

This article explains one of the possible ways to build different types of HttpClients for different feature modules (including non-lazy loaded) and associate a set of interceptors with each HttpClient type to ensure more reliable architecture.

When we create schematics, we sometimes face a situation where we want to run other existing schematics from the same or external collection. In this article we will learn how to do it.

Understanding how pipes work under the hood by looking at their implementation details in Ivy

In this article I'll go over a couple of possible implementations of network requests caching and I'll elaborate on the one we adopted that uses TS decorators.

In my last article we glossed over things that one should probably avoid doing when building an Angular application with NgRx; today, we are going to discuss things that are good to do when facing that very same challenge.

In JavaScript we often use entities, such as window or navigator. Some of these objects have been there forever. But you might have seen DOCUMENT token used in Angular. Let's discuss why it exists and what we can learn from it to make our apps cleaner and more flexible.

I want to show how we organized the system of settings for all textfields in Taiga UI with this concept and the power of Dependency Injection in Angular.

Learn about ng-content, ng-template, ContentChild and structural directives to build Angular material "mat-tree". These are badly documented but powerful and advanced concepts available in Angular.

It is time to explore some practices and patterns the community has recognized as harmful or complicated. So let's start with a list of what not to do in NGRX

We are migrating a traditional server-side website to angular step by step. I want to share some experiences of what we have tried in this article.

Animations are good, but it can be overwhelming sometimes. As developers, we need to allow users to take control of animations. In this article we will learn how we can utilize reduced motion media query to disable angular animations.

NgZone notifies Angular when to perform the change detection process (e.g. a DOM event with bound listener is one of the triggerers). However, if in response to an event you directly manipulate the DOM or simply perform an action which does not require bindings update, the process is redundant.

I keep telling people that Angular is way more powerful than what youtube teaches. Learning design patterns will help to create powerful components. Let's learn to create an Angular component, iterate over it to make it reusable, scalable, and powerful.

This article will give you a step by step walkthrough on implementing a realtime database in your Angular Apps using Firebase Cloud Firestore.

Have you ever realized that you often repeat the same patterns across multiple files? Creating schematics that override well-known Angular schematics, designing them based on project needs will enhance your development and reduce time spent on generating files.