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 →

Brickit — Build new creations from your LEGO

This is crazy: Brickit is an iPhone app that scans your pile of assorted LEGO bricks, and gives you instructions to building things using the bricks it finds. The instructions also show you where the bricks you need are placed. Would be nice if it also supported a search function, to find one specific brick …

Continue reading “Brickit — Build new creations from your LEGO”

Read Post →

Drawing Graphics with the CSS Paint API

Over at Codrops, Georgi Nikolov digs into Houdini’s Paint API and the Properties and Values API along with that. Recommended, as it’s all well explained and easy to follow along. Drawing Graphics with the CSS Paint API → Related: css-houdini-circles — A Houdini Paint Worklet that draws Colorful Background Circles →

Read Post →

Perfect Tooltips With CSS Clipping and Masking

In this post Louis Hoebregts creates nice tooltips. No, not a typical triangle injected at the bottom but a nice curved one, also letting the image underneath peek through. For it he uses mask-image consisting of two parts: one rectangle overlaying the top part of the image + one SVG arrow overlaying the bottom part. …

Continue reading “Perfect Tooltips With CSS Clipping and Masking”

Read Post →