A rather geeky/technical weblog, est. 2001, by Bramus
On the Polypane website you can find an interactive Specificity Calculator. Paste in any selector from CSS Selectors Level 4 — yes, that includes those special cases :is(), :where(), :not(), etc. — and out comes the Specificity. CSS Specificity Calculator →
Over at Codecourse you can follow a free video course covering the aforementioned Alpine.js. Alpine.js is a refreshingly minimal JavaScript framework that gives you the reactive nature of Vue and React, but with much more simplicity. This course will get you up to speed on how to use it, with plenty of practical examples along …
perfect-freehand — Draw perfect pressure-sensitive freehand lines
What a wonderful package by Steve Ruiz: Draw perfect pressure-sensitive freehand lines The results are stunning imo. In the recording above you can see me write hello using the trackpad on my Mac. Yep, that’s without a stylus! Embedded below you can find a Vanilla JS demo, inspired upon the code from the React code …
Continue reading “perfect-freehand — Draw perfect pressure-sensitive freehand lines”
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”
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 …