The web development world is filled with posts and hot takes that don’t seem rooted in much truth. Hot takes get clicks and shares, and they seem to really help people in this industry gain traction and fame. Often at the cost of undermining others. This is very much the case in the endless debate surrounding vanilla CSS and Tailwind.

The Apple Vision Pro was released exclusively in the United States last week and, to my surprise, got mostly positive and very forgiving reviews. This piece is going to be very opinionated, but I really wanted to share my thoughts and experiences.

The websites I develop usually contain a page builder that I can extend with custom blocks on a per client basis. All these blocks will vertically be spaced using Stacks. Horizontally each block was traditionally wrapped with a class called `fluid-container`. This class became limiting so I now started using a `fluid-grid` class. This post explains how this works.

There are multiple ways to handle cards or “block links” in an accessible way. I recently had to implement such cards and I didn't like the various solutions out there, because they take away the ability for users to select text within those cards. To combat this you can add Javascript, but this can lead to usability issues like clicks not working properly. In this article I'll explain my solution.

Laying out page builder blocks with even spacing between them is easy. But when want to able to control spacing on a block level it gets trickier. Stack utilities based upon the lobotomized owl selector make this work.

I recently discovered that there are programmers on upwork.com claiming they built my website or collaborated with me. This is not the case.

OKLCH is a color space that includes P3 support. This allows you to use a broader range of colors than regular RGB does. To display those colors users need a wide-gamut monitor. Most modern devices support this color space so it could be interesting to tap into this for your websites and make those colors pop. In this article you will learn how you can use OKLCH in Tailwind CSS and use fallback colors to support older browsers.

A regular podcast about the challenges of front-end design & development in a fast-moving industry, with Jay George and Rob de Kort. We chat about industry news, workflow, favourite software, and everything else related to designing and developing websites.

A few years ago, after a long period, I said goodbye to a client. I was responsible for the design and technology of their new website. After the launch, the number of bookings doubled. The board, responsible for the association, had been working with an online marketer for a while, who collected statistics through Google Analytics and reported them. From this particular board, I never really heard that they were happy with my work and the result. That was not a problem as I also did not report the results.

A while back I wanted to create a re-usable modal view pattern for my Statamic based sites. A modal that could contain anything from text to images or video.

Let's say you have a design with different color themes for certain pages. Or maybe even for certain blocks on a single page. It's pretty common. I'm currently working on a site where I designed multiple color themes as well and in this article I'll explain how I approach this.

You can run a Redis queue to optimise performance in the control panel when using the Git integration. With any form of queue driver you can also push other tasks, like generating assets or warming the static cache, into the background. A queue performs jobs in the background. This makes sure that you don't have to wait for tasks when browsing the control panel or when you're deploying your website. This article explains how you can make a Redis queue work for multiple Statamic sites on one server.

Lottie is an open source animation file format based on vector graphics. Motion designers can export them and hand them off to editors. But how do you use them together with a CMS like Statamic? This article explores the methods I use on my websites.

When working with collections like a Portfolio or a Blog you often want to list one or more posts on the homepage. In this journal entry I'll explain a quick and easy technique I started using a while back for incorporating this in your page builder.

For recent journal entries about SVG clipping masks and animating clipping masks I wanted to render actual code examples in the article to show the reader what the end result of the tutorial would like. Since I use the Tailwind CSS JIT compiler my website ships with a CSS file that contains only the classes that are actually being used in my template files. That seems very restricting as I would probably always use some unavailable class in my examples. So I came up with a solution that utilizes the Tailwind Play CDN to live parse the code snippet and return the CSS needed.

Clipping masks are a great way to make rectangles less boring. They're easy to create in design tools like Sketch but a little more tricky to use in CSS. In this article I explain an easy way of achieving it.

P3 is an RGB color space that has a broader range of colors than regular RGB does. To display those colors users need a wide-gamut monitor. Most modern Apple devices support this color space so it could be interesting to tap into this for your websites and make those colors pop. In this article you will learn how and where you can use P3 and how to setup a fallback.

For the Nieuw Allardsoog website Meinte Strikwerda drew a beautiful illustration of the estate. The goal of this post is to make the a map illustration fully interactive, zoomable, and filled with interactive points of interest. For this we'll use Statamic, Mapbox and Javascript.

You might have noticed how on this site I use certain hover effects where an element previously invisible presents itself and its contents are in a different color. It sort of swipes in. You can see it on blocks linking to a certain project or journal entry or when invoking the mobile navigation. In this post I'm going to show you how you can achieve this with Tailwind CSS.

In Statamic it's pretty easy to handle responsive images using Glide and Antlers. I initially wrote this post over two years ago for Statamic v2 and it's proven to be the most visited page of my website. For my new website I decided to give it an update. Here we go.

Alt texts are very important for accessibility (a11y) and search engine optimization (SEO). Visually impaired users often make use of screen readers. It's software that interprets and reads out the contents of a website. Images of course can't be read out. So it's important to add so called alt texts to them. They also help search engines crawl and interpret the contents of your website.