Skip to content

An update on invokers: Invoker commands in HTML

Open UI logo with text invokers below it

One thing I’ve learned over the last year is to deal with changes in explainers and specs and that naming things is hard. In this update on Invokers, I will cover the new syntax and the new name: Invoker Commands. Once again giving you some control over interaction with HTML from opening dialog elements to creating custom counter buttons and video controls.

Read moreabout An update on invokers: Invoker commands in HTML

This was CSS Day 2024 - the 10th edition

iO tech_hub

Another year, another CSS Day. I’m always happy to return to Amsterdam for this occasion, It’s one of the things I look forward to every year. So naturally, I’m happy that iO still allowed me to go there with my training budget, and the least I could do, is write a summary of this event on the tech_hub.

Read more about This was CSS Day 2024 - the 10th edition (iO tech_hub)

Let’s hang! An intro to CSS Anchor Positioning with basic examples

A boats anchor agains a futuristic background with rectangle patterns

The CSS anchoring API is something that I’ve been following for at least a year now, and I’m happy to see that the first level is fully specced. Even though there are still some shortcomings that I’ll cover in this article as well, the available things look pretty solid and will help us a lot in creating some complex layout structures. Besides that, they are very much needed for the future of the HTML Popover API and stylable selects.

Read moreabout Let’s hang! An intro to CSS Anchor Positioning with basic examples

Modern CSS Layouts: You Might Not Need A Framework For That

Smashing Magazine

It’s easy to get lost in a sea of CSS frameworks and libraries, each promising easier styling and smoother layouts. But amidst this abundance, the modern CSS features we have today offer simpler and more flexible approaches without the added dependencies or abstractions. In this article, I demonstrate four CSS utility classes (plus a bonus) using techniques that allow them to be used practically anywhere you need a particular layout — be it Grid or Flexbox — with configurable options.

Read more about Modern CSS Layouts: You Might Not Need A Framework For That (Smashing Magazine)

Invoking elements by using only HTML: A first look at invokers

Open UI logo with text invokers below it

Wouldn’t it be cool if we could click on a button to open a modal with just HTML? How about those file input elements? Imagine that creating a custom play button for video controls would be an easy thing to do. How about custom counter buttons for a number input? This is where the idea of invokers comes in. It’s currently available behind a flag to play around with and it’s definitely one of the most exciting advances in HTML to look out for.

Read moreabout Invoking elements by using only HTML: A first look at invokers

Why I care about a Google Developer Expert certificate and Web communities

Google Developer Experts logo

A few weeks ago, a cool little package was delivered to my home. When I opened it I couldn’t stop smiling, it was a Google Developer Expert certificate to hang on my wall. But why did this make me so happy? Well,... it’s all about being self-taught and believing that communities are important. In this (non-technical) article, I’d like to share some thoughts about communities, what they gave me, what I hope to return, and what scares me.

Read moreabout Why I care about a Google Developer Expert certificate and Web communities

Animating clip paths on scroll with @property in CSS

A polaroid like frame holding an image, with a rotate and scroll icon next to it

While experimenting with CSS, you sometimes discover a technique you want to do more of. This is one of those discoveries for me... I love how we can now animate clip paths on scroll with CSS. From animating an image into a star to creating Polaroid-like images on scroll. In this article, I’d like to demo some techniques we can use to create these interesting effects using clip paths, @property, and even container units to create visually pleasing scroll-driven animations.

Read moreabout Animating clip paths on scroll with @property in CSS

A Valentine's Day special: A web component to show hearts on your website

Multicolored hearts randomly placed on a black background, yellow, red, blue and green

While learning about web components a few months ago, I wanted to create my first (useless) little component as a package on NPM. In this article a little tutorial on how I created my first basic web component with LIT, Typescript, using an easy setup with Vite. I will be sharing how to do the setup, some of the ideas behind it, and some of the gotchas.

Read moreabout A Valentine's Day special: A web component to show hearts on your website

Getting into web components - an intro

The year 2024 might be a big one for web components and I for one am excited about this. Truth be told - a few months ago - I barely knew anything about them as I thought they were just this niche thing floating around on the web. But a lot of buzz is being created. So I wanted to learn more about them. I can now proudly say I published my first (useless) web component on npm - a Valentines special - for-love element.

Read moreabout Getting into web components - an intro

Going beyond pixels and (r)ems in CSS

iO tech_hub

There are a lot of CSS units available at the moment and we mostly still rely on pixels and (r)ems for our sizing and fonts. I say it’s time to do a little freshening up. In this mini-series I will be going around all the current length units in CSS with practical examples.

Read more about Going beyond pixels and (r)ems in CSS (iO tech_hub)