A rather geeky/technical weblog, est. 2001, by Bramus
grid-template-areas
When working with CSS Grid, I’m a huge fan of using Grid Template Areas. In this short video Kevin Powell builds a small layout where certain elements overlap inside a grid container. I was very glad to see Kevin also go for grid-template-areas here, showing exactly why I like using them: the ability to reshuffle …
Continue reading “CSS Grid: Overlapping grid-template-areas“
By layering a noisy SVG background and a gradient on top of each other, in combination with a filter that increases the contrast, Jimmy Chion creates these wonderful “Grainy Gradients”. See the Pen Grainy Gradient, step 3 by Jimmy Chion (@cjimmy) on CodePen. Over at CSS-Tricks he lays out the details: In this article, we’ll …
Over at Smashing Magazine, Dirk Weber digs into Displacement Filtering with the SVG feDisplacementMap-filter: A displacement operation can visually distort any graphic it is applied to. You can create warp effects, twirls or ripples like you would do with a Photoshop distortion filter. The post goes into a lot of detail and contains lots of …
Continue reading “A Deep Dive Into The Wonderful World Of SVG Displacement Filtering”
Zach Leat recently created a cloud function that dynamically generates sparklines. Under the hood sits the the sparkline-svg package to generate the SVG. The datapoints themselves can be passed in via the URL. Image URLs have the formats: /[height]x[width]/[values]/ /[height]x[width]/[values]/[color]/ The code is meant to be deployed as a Netlify Serverless Function. Every Fire needs …
Continue reading “Cloud Function to generate SVG Sparklines”
@layer)
@layer) aim to ease this task.
es-module-shims
JavaScript Import Maps – which I wrote about earlier here — are a great addition to the web. Unfortunately they’re only supported in Chromium 89+. Thankfully there’s a polyfill available: es-module-shims. As long as your browser has baseline ES Module Support (Chrome 61+, Firefox 60+, Safari 10.1+, and Edge 17+) the polyfill will work. To …
Continue reading “Support Import Maps in any browser with es-module-shims“
Maestral is a lightweight Dropbox client for macOS and Linux. It provides powerful command line tools, supports gitignore patterns to exclude local files from syncing and allows syncing multiple Dropbox accounts. Haven’t tested it myself, but the fact that Frank uses it gives me great trust. Maestral →
Niels Leenheer also shares his views on the whole “all browsers on iOS are WebKit because Apple says it needs to be”-thing: Apple requires browsers to use WebKit. In fact, it must use the system-provided WebKit framework. Even though WebKit is open-source, you can’t modify or improve that version and use that in your app. …
Continue reading “Chrome is the new Safari. And so are Edge and Firefox.”
document.body
Very good performance deep dive on why you shouldn’t attach tooltips to document.body, but to a div that’s a direct child of the <body>. Tooltips in our app were taking >80ms. And during this time, the main thread was blocked, you couldn’t interact with anything. The main reason for the slowness of Tooltip was “Recalculate …
Interesting: a CSS library that only provides you with CSS Custom Properties to use in your own CSS: Pollen is a library of CSS variables for rapid prototyping, consistent styling, and as a zero-runtime utility-first foundation for your own design systems. Heavily inspired by TailwindCSS. Pollen →