A rather geeky/technical weblog, est. 2001, by Bramus
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”
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
On June 9 & 10, I was in Amsterdam for CSS Day – a conference I’ve been attending since it’s very first edition in 2013. 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. …
Continue reading “The CSS Cascade: A Deep Dive (2022.06.09 @ CSS Day)“
FormDataThanks to FormData, it’s pretty easy to apply Progressive Enhancement onto forms.
Yesterday I attended the April 2022 “Full Stack Ghent” Meetup, at the offices of In The Pocket. The evening consisted of 8 lightning talks. Being part of the speaker line-up, I kicked off the meetup with a talk titled “The C in CSS”. CSS is short for “Cascading Style Sheets”. But what exactly is this …
Continue reading “The C in CSS (2022.04.20 @ Full Stack Ghent)”
From early May on, I’ll be working with Una, Adam, Jecelyn, and Jhey as a “Developer Relations Engineer, Chrome and Developer Tools”
@bramus/specificity v2Back in February I created @bramus/specificity, an NPM package to calculate the Specificity of CSS Selectors. As that version was more of a thought experiment/POC, there was a lot of room for improvement. Yesterday, after 11 betas, version 2.0.0 of @bramus/specificity was released. Let’s take a look … Quick Example To give you an idea …
WASD Controls on the Web: Don’t use KeyboardEvent.key but use KeyboardEvent.codeBeware when evaluating KeyboardEvent.key, as it doesn’t play nice with non-QWERTY keyboard layouts.