A rather geeky/technical weblog, est. 2001, by Bramus
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”
Thanks to Variable Units, authors can define Custom Properties and use them as units in their CSS
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.
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“
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
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”
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 …
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 …
m-cli is a macOS command line tool that lets you interact with utilities and applications entirely in Terminal. Gives you a bunch of shorthand CLI commands that you can use, such as m finder showdesktop YES, m battery status, m dns flush, etc. These replace a bunch of custom aliases you might have set up …
Jim Nielsen set out to style a bunch of links that appeared before hr elements. As the element tree – generated from a Markdown file – was entirely flat, there are no enclosing section elements to hook onto in order to select those links (using something like section p:last-child a:only-child). The solution? The :has() selector: …