Convert a String representation of a JavaScript Object to an Object

For my little helper tool that converts a JavaScript Style Object into Custom Properties I had to convert the contents of the textarea — which is a String — to an actual Object. Lacking a native Object.parse() — something like JSON.parse() or Array.from() but for objects — I created my own function: const createObjectFromString = …

Scroll-Linked Animations with CSS Scroll-Timeline (CSS Café)

Yesterday I was invited to speak at CSS Café, with a talk covering Scroll-Linked Animations with CSS @scroll-timeline. The meetup was organised using Zoom, and I think about 50-ish people attended (must say I wasn’t keeping track of that whilst speaking). # Slides You can find the slides embedded below: # Source Materials & Demos …

Identify and Extract Pseudo-Element Selectors from built-in HTML Elements using DevTools

Recently Stefan Judis shared how to style the browse button of a file selector using the ::file-selector-button pseudo-element TIL – you can style the file input "browse" button using `::file-selector-button`.😲Supported in Firefox, Chromiums starting with 89 & Safari Tech preview.🔗 MDN: https://t.co/56jACY9qK1🔗 Compat data pr: https://t.co/vrFNS4LdISVideo alt: Example of a styled browse button. pic.twitter.com/3YQ0njkX0J— Stefan …

Scroll-Linked Animations with CSS Scroll-Timeline (CSS Conf Colombia)

I just finished giving a lightning talk at the wonderful CSS Conf Colombia covering Scroll-Linked Animations with CSS @scroll-timeline. Really enjoyed giving a talk again after all this time, especially with this great vibe they have going on and the afterparty in gather.town (skribbl FTW!). You can find the slides embedded below: Source materials for …