Readeable bites about web development.
Over the past weeks a couple of clients of mine came to me with requests regarding generative AI. They had done a GEO audit on their website. I had to look up what GEO is. It stands for Generative Engine Optimization. Read more...
Wat are you doing to stop fascism? Read more...
Moving away from a platform you and your team know and are comfortable using isn’t easy. Recent events may motivate you to move away from WordPress, which I completely understand. I transitioned away from that platform years ago when it adopted Gutenberg. For me, there were few reasons left to endure the frustrations of using WordPress. While you can create beautiful, fast, and accessible websites…
Developers coming from WordPress often wonder on the official Statamic Discord how to create a page builder experience in Statamic. With the various fields built into Statamic by default, it's very much possible to create a rich, accessible and semantically correct page builder. Read more...
When you run a queue on your website, Statamic will automatically add certain jobs to it, like committing to your Git repository, clearing the static cache, or warming pages for the static cache. My Starter Kit, Peak, has a feature that allows clients to automatically generate Open Graph (OG) images, which are used when sharing pages on social media. Generating an OG image is something you don’t…
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. Read more...
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. Read more...
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. Read more...
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…
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. Read more...
I recently discovered that there are programmers on upwork.com claiming they built my website or collaborated with me. This is not the case. Read more...
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…
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. Read more...
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…
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. Read more...
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. Read more...
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…
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. Read more...
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. Read more...
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…
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. Read more...
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. Read more...
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. Read more...
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. Read more...
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. Read more...
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. Read…