6 min read
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.
Articles
I write some articles now and then. Whenever I have time and a topic to write about. Mostly about front-end development with React and Angular.
- 4 min read
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.
- 13 min read
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.
- 4 min read
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.
- 21 min read
An Angular library lets you share code between multiple projects. For a larger library it's recommended to use subentry points. We'll build a new Angular library from scratch, add multiple subentry points with dependencies between them and add a showcase app that uses the library.
- 6 min read
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!
- 12 min read
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.
- 3 min read
Learn how to use the Repository pattern for Angular HTTP Services. The pattern will make your services reusable and easier to test.
- 3 min read
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.
- 5 min read
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.
- 8 min read
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.
- 5 min read
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.
- 11 min read
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.
- 7 min read
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.
- 3 min read
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.