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 →

“Web Component DevTools” extension for Chrome DevTools

“Web Component DevTools” is a Chrome Extension for Chrome DevTools that adds support for Web Components / Custom Elements. Web Component DevTools is aimed at all developers working with Web Components. The tooling provided creates a new Chrome Devtools panel, which allows a quick look at the custom elements on the current page, and enables …

Continue reading ““Web Component DevTools” extension for Chrome DevTools”

Read Post →