A rather geeky/technical weblog, est. 2001, by Bramus
Using the feTurbulence and feDisplacementMap filters, Scott Turner make his SVG line-drawings look like they’re pencil-on-paper-like drawings: See the Pen SVG Pencil Filter #1 by Scott Turner (@srt19170) on CodePen. Creating a Pencil Effect in SVG → 💡 If you constantly randomize the turbulence you can create squiggles using SVG or even recreate a heat …
What happens when you combine the fact that part after the : for CSS Custom Properties doesn’t need to be valid CSS with window.getComputedStyle()? You get a way of passing data – including Arrays, Objects, and even JSON – from CSS to JavaScript. Psst… Hey kid… Did you know you can pass data from your …
Continue reading “Pass Data from CSS to JavaScript with CSS Variables”
Ahmad Shadeed is at it again(*), this time with a guide on Overflow in CSS: In CSS, we can have control over an element when its content is too big to fit in. The property for that is overflow, which is a shorthand for overflow-x and overflow-y properties. For this article, I will give an …
clip-path
Reminds me of Eric Meyer’s Flexible Captioned Slanted Images in which he combines Flexbox and CSS clip-path. In that implementation Eric did have to correct the margins to fix the gap between the items. With the grid implementation this looks like to be no problem.
Sebastian his website supports Webmentions. To show these on his website he used a tad of JS to display them underneath each page. Not being 100% happy with that flow, he sought a better way to implement these … After some tinkering, I came up with an alternative: a cron-based GitHub Action that queries webmention.io …
Continue reading “Webmentions on a static site with GitHub Actions”
Handy tool by Michelle Barker: A little tool to generate compound grids. Enter the number of columns for each of your grids, and they’ll be magically merged into a compound grid. Use the output in your grid-template-columns property when using CSS Grid for layout. Compound Grid Generator →
Lighthouse 6 is the first major release of the popular auditing tool since May 2019, introducing critical changes that will impact everyone relying on the scoring. This article explains the changes in the upcoming Lighthouse 6.0.0 and its scoring algorithm. Lighthouse changes how Performance Score is calculated →
Adam Rackis has written an extensive article on React Suspense for CSS-Tricks: This post is about understanding how Suspense works, what it does, and seeing how it can integrate into a real web app. We’ll look at how to integrate routing and data loading with Suspense in React. React Suspense in Practice → 📽 If …
If you’re looking for a good video on the possibilities of Modern CSS (“CSS X”?), check out this talk by Rachel Andrew. She’ll get you up to speed with things: Over the last few years, rapid browser implementation of advances in CSS have given us the ability to do many of these previously impossible things. …
Continue reading ““Redefining the Technical Possibilities of CSS” by Rachel Andrew”
Max Stoiber: We should ban margin from our components. Hear me out. By banning margin from all components you have to build more reusable and encapsulated components. I think the message is a bit more nuanced though: margins of course still are allowed and used throughout your CSS, but if you want to allow a …