Type-Level Wordle in TypeScript
Implementing the Wordle game entirely at the type level using TypeScript’s type system.
Blog - Sandro Roth
Articles on front-end development with React and Angular.
Latest posts
Evaluating Schema Validation Libraries
A comparison of Zod, Valibot, and ArkType for form schema validation in a React app.
Migrating my site from Eleventy to Astro
I recently migrated my website from Eleventy to Astro.
Type-Level Hangman in TypeScript
Implementing a Hangman game entirely at the type level using TypeScript’s type system.
Evaluating tour libraries for React
A look at popular React tour libraries, their features, and limitations.
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.
(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.
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.
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.
Migrating my site from NextJS to Eleventy
I recently migrated my website from NextJS to Eleventy.
Angular 17 + TypeScript: The good and the bad parts
Angular recently released version 17. We'll take a look at the APIs that were introduced in this and previous major versions and how well they play with TypeScript.
Co-locate state and UI with React Hooks
Let's talk about hooks that are not just used by component but use components themselves. This lets us co-locate state and UI.
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.
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.
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).
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.
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.
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.
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.
Improve your VS Code setup
Visual Studio Code provides a lot of configuration options. I show you a few of my favorite settings.
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?
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.
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.
Handle multiple validation errors with Reactive Forms + Angular Material
Form controls with multiple validators often have a separate message for each possible error. The conditional rendering of these error messages is a bit cumbersome by default. Let's find a better way by building a custom directive.
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.
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.
Building an Angular Library with multiple entry points
An Angular library helps share code across projects. This guide shows how to create a library with subentry points, manage dependencies, and add a showcase app.
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!
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.
Better HTTP Services in Angular with the Repository Pattern
Learn how to use the Repository pattern for Angular HTTP Services. The pattern will make your services reusable and easier to test.
SCAM: A better way to share components in Angular
SCAM is alternative approach for sharing components between your Angular feature modules. Learn how to apply it and what the benefits are compared to the usual SharedModule approach.
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.
Angular + Stitches: How to use CSS-in-JS in Angular
Stitches is a CSS-in-JS library for React. Let's use the framework-agnostic core of Stitches in Angular to style components. We'll also make it reactive using RxJS.
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.
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.
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.
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.