Skip to content

Blog

Articles on front-end development with React and Angular.

2025

  3. The many ways to build a toast component in React

    Building a toast component in React can be done in various ways. We'll explore how popular React libraries implement toast notifications, comparing their features, component API and implementation details.

    react

2024

  1. (Don't) test your Jotai atoms

    If you use Jotai for state management in your React application, you may want to test your atoms. Let's discuss possible scenarios where testing atoms is necessary and how to do it.

    reactjotaitesting

  2. The many ways to build a tabs component in React

    Building a tabs component in React can be done in various ways. In this article, we will explore how different component libraries implement tabs and discuss important considerations to keep in mind.

    react

  3. Exploring StyleX: A First Look Review

    StyleX is Meta's compiler for styling web apps that powers Facebook, Instagram and other Meta apps. Let's explore the features and limitations of StyleX.

    react

2023

  4. Controlled Components in Storybook

    In this article we'll learn how to write component stories in uncontrolled and controlled mode, that properly work together with args and controls in Storybook.

    reactstorybook

  5. Polymorphic React Components are quite tricky

    Polymorphic React components are very common and useful, but also tricky to implement and limited in what type-safety they provide. We'll talk about the problems and see an alternative approach using an asChild prop.

    reacttypescript

  6. Local component state with Redux Toolkit-like reducers

    Reducers are not only useful for global state management. They can also be used for local component state. And compared to plain useReducer() we can reduce boilerplate code by adapting the API of modern reducer libraries like Redux Toolkit (RTK).

    reactstatemanagement

  7. How to build a styling foundation with vanilla-extract

    In this article we'll build a styling foundation for a React application using vanilla-extract, a CSS-in-JS library. We'll create a global theme, a CSS reset, utility classes, a polymorphic box component and multi-variant components.

    reactvanilla-extractcss

  8. Building complex forms with Angular Reactive Forms

    Building complex reactive forms in Angular that require a lot of cross-field validation and triggering side effects isn't an easy task. In this article we'll see one possible way of building such a form using the form service approach.

    formsangular

  9. How to structure your React projects

    Every React project looks a bit different. There are so many ways to structure frontend projects. In this article we'll discuss three different project structures.

    architecturereact

  10. Don't break out of type safety

    Writing type safe code using TypeScript highly improves code quality and developer experience. But people often break out of type safety, writing code that isn't strictly type safe anymore. Here are a few tips & tricks for using TypeScript.

  11. Improve your VS Code setup

    Visual Studio Code provides a lot of configuration options. I show you a few of my favorite settings.

    vscode

2022

  1. State management in a component-based world

    Managing state in frontend application is hard. From local component state with performance issues to global state management with its own trade offs, there are many different ways for handling state. But is global state management really the right way to share state between components?

    reactstate-management

  2. Building Component Slots in React

    Slots are a way to pass elements to a component and let them render in a specific location, like a header or footer. Let's find out how we can create a slot API in React.

    react

  3. Set up vanilla-extract with create-react-app

    vanilla-extract is a CSS-in-JS library that generates static CSS files at build time. Let's integrate vanilla-extract in a React app with create-react-app.

    reactvanilla-extractcss

  5. Handling large, typed reactive forms in Angular

    Angular Reactive Forms are great for building forms. For a large form it's often a good idea to split it up into multiple components. We'll find an easy and maintainable way to do that and we'll use strictly typed forms to make our approach type-safe.

    angularformstypescript

  6. Validating the HTML of an Eleventy site

    Let's build an HTML validator for an Eleventy site. It will validate all generated pages to make sure they are valid HTML. Any errors will be reported in the terminal.

    eleventyhtml

  8. React Hooks for Angular

    React Hooks are great and I really miss them in Angular. What if Angular had hooks? We could build hooks for state management, subscription handling and even reactive state. So let's build Angular Hooks!

    angularreacthooks

2021

  1. Create dynamic translations with HTML & Components in Angular

    Most translation libraries are focused on static text and do not allow you to build dynamic translations that include links and buttons - but this is a common use case. We'll build an Angular Component that lets you inject any HTML and even Angular Components and Directives into your translations.

    angulari18ntranslations

  4. Build better responsive components in Angular with Component Variants

    Using CSS Media Queries in your component is one way of making them responsive. But Media Queries are based on the browser width/height which makes your component less reusable in different contexts. We can move the responsibility to the parent by creating component variants.

    angularresponsivecss

  6. Follow-up: Data handling in Angular Reactive Forms

    In a previous article we implemented a reactive form in Angular with child components. Now we'll learn how to initialize the form with data fetched by an API and how to convert the form values back to a data object.

    angularforms

  7. Chainable class names for CSS Modules in React

    React accepts a single string as className. What if you want to set multiple classes or based on some condition? Let's build a utility function to make class names chainable, conditional and type-safe.

    reactcss

2020

  1. Handling large reactive forms in Angular

    Angular Reactive Forms are a great feature to build forms. When building a large form, you may want to split it up into multiple components. Let's see how this can be done in Reactive Forms. We'll take a look at different approaches and implement one of them.

    angularforms

  2. Two-way Data Binding in React

    In React data flows one-way, from top to bottom. It does not support two-way data binding for good reasons. However, we can use Hooks to implement a pseudo two-way data binding.

    reacthooks