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 →

Media Queries in Times of Container Queries

Max Böck: With container queries now on the horizon – will we need media queries at all? Is there a future where we build responsive interfaces completely without them? As Max details we will still need both, but will see a shift from some Media Queries to Container Queries. Good read; I found myself nodding …

Continue reading “Media Queries in Times of Container Queries”

Read Post →