A rather geeky/technical weblog, est. 2001, by Bramus
Ahmad Shadeed sweats the details to recreating the little component above, as found in Facebook’s Messenger. In this article, I will show you a component that looks simple from the first glance, but there is a ton of work behind it. As you can derive from the article’s length: the devil is in the details. …
Steren (who happens to be PM for the wonderful Cloud Run): My stack requires no maintenance, has perfect Lighthouse scores, will never have any security vulnerability, is based on open standards, is portable, has an instant dev loop, has no build step and… will outlive any other stack. It’s not LAMP, WordPress, Rails, MEAN, Jamstack… …
Nolan Lawson, author of emoji-picker-element, a web component you can use to provide an emoji-picker: What wasn’t obvious to me, though, was how to allow users to style it. What if they wanted a different background color? What if they wanted the emoji to be bigger? What if they wanted a different font for the …
Steve Fulghum takes a look at how we can use Houdini’s Paint API to paint a complex shadow. See the Pen Simulating Drop Shadows with the CSS Paint API by Steve Fulghum (@steve_fulghum) on CodePen. If you’re interested into making your first Paint Worklet with Houdini, you can easily follow along with the article/tutorial. Simulating …
Continue reading “Simulating Drop Shadows with the CSS Paint API”
“Higher Level Custom Properties” are Custom Properties that control multiple other CSS Properties. Although still a proposal it’s worth having a look already as they’re really exciting.
Nice demo by Michelle Barker, in which she recreates snowflakes based on those folded paper cutouts we all made as a child. ⚠️ Warning: quite a heavy demo. Uses both a clip-path and mask-image to generate the cutout shapes. And oh, everything’s defined using Custom Properties. Love the attention to detail on this one too: …
See the Pen Cooltipz.css – Cool tooltips made from pure CSS by Bramus (@bramus) on CodePen. I especially like the fact that these are customisable using CSS Custom Properties. Here’s a few of them: :root { –cooltipz-bg-color: #fff; –cooltipz-text-color: #333; –cooltipz-border-radius: 5rem; } Installation per NPM: npm install cooltipz-css Cooltipz.css →
Anthony Ricaud, writing for the Web Performance Calendar, on the extra load that JavaScript can put on your site, and how you can replace some things with basic HTML and CSS: Relying on solutions provided natively by browsers enables you to benefit at low cost from the expertise of the community creating web standards. These …
Continue reading “HTML and CSS techniques to reduce your JavaScript”
Adam Argyle looking at several techniques to center in CSS, and how they hold up in several conditions (narrow screen, rtl, etc) In today’s challenge, we’re stress testing 5 different CSS centering techniques. See what techniques should earn a place in your tool belt by watching how they react to common layout stress. The contestants: …
Continue reading “Thinking on ways to solve Centering in CSS”
As the syntax for CSS Custom Properties is overly permissive it’s possible to store a JavaScript attack vector in them …