The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 3)

🚨 UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite. This post details an older version of the syntax and has not been updated to reflect these changes. Do note that the concept of a Scroll-Linked Animation still stands, it’s only the syntax that has changed since writing this. Please …

Continue reading “The Future of CSS: Scroll-Linked Animations with @scroll-timeline (Part 3)“

Read Post →

petite-vue — A 5.5kb subset of Vue optimized for Progressive Enhancement

 Inspired by Alpine.js, Evan You — author of Vue — created petite-vue petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for “sprinkling” small amount of interactions on an existing HTML page rendered by a …

Continue reading “petite-vue — A 5.5kb subset of Vue optimized for Progressive Enhancement”

Read Post →

Custom Scrollbars In CSS

Ahmad Shadeed shows us how to stylize scrollbars in CSS. See the Pen Custom Scrollbar – 2 by Ahmad Shadeed (@shadeed) on CodePen. While I’m no big fan of doing so in general, I can see some specific situations where it might come in handy, such as styling the scrollbars of overflowing tab button bars. …

Continue reading “Custom Scrollbars In CSS”

Read Post →

A Look at Building with Astro

Chris did the experimenting I’ve been meaning to do and wrote the blogpost I wanted to write, covering Astro: Astro is a brand new framework for building websites. To me, the big thing is that it allows you to build a site like you’re using a JavaScript framework (and you are), but the output is …

Continue reading “A Look at Building with Astro”

Read Post →

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 = …

Continue reading “Convert a String representation of a JavaScript Object to an Object”

Read Post →

Detecting Hover-Capable Devices

 Using Level 5 Media Queries, Michelle writes how to distinguish hover from touch devices. @media (hover: hover) { .some-component { /* Styles for hover-able devices */ } } Detecting Hover-Capable Devices → Related: This tweet by Adam Argyle summarizes it nicely: ✅ style if mobile✅ style if desktop✅ style if stylus✅ style if controller✅ combine …

Continue reading “Detecting Hover-Capable Devices”

Read Post →

What’s new in React 18

About a month ago React 18 got announced, with these new features: Automatic batching — React will now better batch state updates no matter what the context. If you do want to force an update, wrap your state change inside ReactDOM.flushSync() Transitions — A new hook named useTransition() to tell your app which updates are …

Continue reading “What’s new in React 18”

Read Post →