Let’s take a look at how we can progressively enhance the color experience on the web, accessing color spaces such as display-p3.
Upgrading colors to HD on the web
CSS in 2022 (and beyond) (2022.09.09 @ Fronteers Conf)
On September 9, I was in Utrecht for Fronteers Conference 2022 – a conference I’ve been attending since back in 2009. This time – after a two year hiatus due to youknowwhat – I was very glad to be back! This time not as an attendee though, but as a speaker. In my talk I …
Continue reading “CSS in 2022 (and beyond) (2022.09.09 @ Fronteers Conf)“
Convert a Keynote presentation to a set of hi-res images
To create presentations I like to use Keynote, mainly thanks to its animation feature. I admit that it took me some time to get accustomed to it – and that not all is perfect – but I think I’ve become efficient at using it over time. The transitions and animations – such as seen in …
Continue reading “Convert a Keynote presentation to a set of hi-res images”
Escaping the sRGB Prison
At the most recent CSS Day, Chris Lilley gave a talk titled “Escaping the sRGB Prison”. Imagine that I told you that you are only allowed to use two-thirds of the colors that your screen can display. All the brightest and most vivid shades are not allowed. Unacceptable, right?! Welcome to Web design for the …
JavaScript: Restart all CSS Animations of an Element
Recently built a demo that demonstrated a specific animation. Only problem: if you missed it, you had no way of restarting it. Instead of forcing the visitor to reload the page, this little JavaScript-snippet – attached to a button click – did the trick: const restartAnimations = ($el) => { $el.getAnimations().forEach((anim) => { anim.cancel(); anim.play(); …
Continue reading “JavaScript: Restart all CSS Animations of an Element”
The Future of CSS: Variable Units, powered by Custom Properties
Thanks to Variable Units, authors can define Custom Properties and use them as units in their CSS
Design Tokens CLI
Handy CLI tool by Heydon which allows you to convert from Design Tokens Format to CSS Custom Properties, Sass Variables, ES Modules, JSON, etc. Design Tokens CLI → 🤔 New to the Design Tokens format? Design Tokens and how a W3C specification will help going forward will walk you through it.
Show CSS browser support data with css-browser-support
If you want to include Browser Support tables on your site, you can use this package by Stephanie Eckles Query for CSS browser support data, combined from caniuse and MDN, including version support started and global support percentages. Per feature that ask it, you get back an object with the browsers and the data: { …
Continue reading “Show CSS browser support data with css-browser-support“
Be the browser’s mentor, not its micromanager
Wonderful talk by Andy Bell. We look at how we can hint the browser, rather than micromanage it by leaning into progressive enhancement, CSS layout, fluid type & space and modern CSS capabilities to build resilient front-ends that look great for everyone, regardless of their device, connection speed or context. Slides available as well
Bun is a fast all-in-one JavaScript runtime
Bundle, transpile, install and run JavaScript & TypeScript projects — all in Bun. Bun is a new JavaScript runtime with a native bundler, transpiler, task runner and npm client built-in. I’ve been following Jarred’s progress on Twitter over the past few weeks and it’s impressive what he has achieved. Building Bun, he also landed a …
Continue reading “Bun is a fast all-in-one JavaScript runtime”