Articles in "javascript"

We need to talk about multi-handle range sliders… Really, we do. They’re one of those UI elements we see on a variety of web shops indicating price ranges; we see them for selecting time-slots; we see them for filtering between a variety of lenght units. Creating these experiences is more often inaccessible than just working, and even when I found the so-called perfect library, I’d still run into limitations for styling and expanding upon it. I thought that I should do something about this. I might be way over my head, and that is why I need your help...

Read moreabout A native way of having more than one thumb on a range slider in HTML

A case study on how to build a guessing game with the prompt API. My game of Guess Who demonstrates how AI can be used to build thoughtful game logic, and the importance of prompt engineering to get the outcomes you expect.

Read more about Build a guessing game with the Prompt API (Chrome for Developers)

In this (long) part of the customizable select series, it’s all about gamification. In this article, I’d like to highlight one of my demos, where I aimed to recreate a piece of UI found in the Monster Hunter games. To re-create this behavior, I had to think in terms of keyboard navigation first. This demo requires quite a lot of CSS, as well as some scripting, and in the end, I do want to highlight some accessibility concerns. This is an experiment on how far we can take it when styling select elements.

Read moreabout The customizable select - Part four: Scroll snapping, state queries, monster hunter, and gamification

Sometimes you get inspired by a presentation or an article you’ve read. For me, an inspiration started at CSS Day last year during the opening keynote by Mathias Ott. One of those side projects I kept placing at the bottom of the pile, until I finally had had enough of it. I had to make it. In this article, I’d like to present a little tool, an OKLCH color picker. A tool created by me using CSS, a bit of React and a bit of AI help.

Read moreabout Oklchroma: an OKLCH color pattern generator that generates CSS variables

It’s been a few years since the Interop initiative was set in play. This has historically been one of the key elements in moving the web forward as it aims for a consistent web between browser vendors. In contrast to the “old days browser wars”, we as developers get streamlined features without having to check everything in every browser. The features of Interop 2025 are now known, features to be made stable across browsers by the end of the year. In this article, we’ll take a look at what we should get acquainted with in 2025.

Read more about Interop 2025 - Which browser features to get acquainted with this year and why you should care (iO tech_hub)

Oh, how I wanted to write this title for some time! I have Googled these questions before when working with sticky positioning and scroll snapping. It looks like we are finally getting an answer to these questions in the form of CSS state queries and I have been eagerly waiting to play around with this since CSS Day 2023. In this article, I want to show a few first impressions and demos I created with state queries in CSS and Scroll Snap events in JavaScript.

Read moreabout Is the sticky thing stuck? Is the snappy item snapped? A look at state queries in CSS

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

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

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

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

My first article for CSS-tricks on how to create a watch face with a conic gradient Using custom-properties and a little bit of Javascript.

Read more about Making a Real-Time Clock With a Conic Gradient Face (CSS-Tricks)

The world is full of frameworks and content management systems, we're very spoiled when we want to create an application, but sometimes, you just need something static, simple and fast, so I created a Mini Static Thingy Wingy.

Read moreabout Introducing a Mini Static Thingy Wingy

With Safari (15.4) being one of the last to implement the dialog element, a lot of browsers have great support for this element.. Goodbye to huge JavaScript libraries and welcome to the native HTML5 dialog element. This is beauty and simplicity on the web in its purest form. It's accessible, customisable and most of all: easy to use.

Read moreabout A lot of power with little JavaScript, the HTML dialog element is here

Scroll snapping is hip and while we all have styled numerous sorts of tab panes and scroll boxes, I had an idea of combining them. What started out as a simple “scroll snapping experiment” turned out to be an accessibility study. How should scroll snapping tabs behave when using keys? By reading some best practices, I believe I found an elegant solution.

Read moreabout Using best practices to create CSS scroll snapping tabs

I've been writing CSS in a SCSS environment for 8 years by now, that's a long time and since recently I started playing around with PostCSS. PostCSS has been around for some time, but I finally found the chance to dig in.

Read moreabout Is it time to stop pre-processing CSS and use post-processing instead?