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 …

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(); …

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: { …

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 …

GitHub: How we think about browsers

GitHub is currently shipping ES2019-compatible code, and will soon ship ES2020 code. GitHub will soon be serving JavaScript using syntax features found in the ECMAScript 2020 standard, which includes the optional chaining and nullish coalescing operators. This change will lead to a 10kb reduction in JavaScript across the site. Wow, won’t that exclude a whole …

What’s New in React Native 0.69

Photo by Lautaro Andreani on Unsplash It’s been a while since I’ve done some React Native work, but the 0.69 release seems like a very welcome one: React 18, bundled Hermes, Fabric, TurboModules, and the JSI. React Native 0.69 brings a ton of important improvements & updates to the table, with performance & memory usage …