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

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 …

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 →

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

WWDC: Meet Safari 15

In this video from the most recent WWDC, Jen Simmons (Web Technologies Evangelist) and Myles Maxfield (Safari and WebKit Engineer) introduce Safari 15. Meet Safari 15: redesigned and ready to help people explore the web. Discover how you can approach designing websites and apps for Safari, and learn how to incorporate the tab bar in …

Demystifying styled-components

Josh W. Comeau lays out the details how styled-components works internally. For so many React devs, styled-components seems kinda magical. It isn’t at all clear how it uses traditional CSS features under-the-hood, and that lack of clarity can cause real problems when things go awry. In this post, we’ll learn exactly how styled-components works by …

Multi Colored Text with CSS

Nice text-effect demo by Shireen Taj: Using DevTools you can see that there’s a gradient background set onto the element. By also applying -webkit-background-clip: text; the gradient is only shown on the text itself. The demo’s also fun to fork and remix: Add some Houdini to animate it See the Pen Multi Colored Text with …