Applications we design are becoming increasingly data-driven. The need for quality data visualization is high as ever. Confusing and misleading graphics are all around us, but we can change this by following these simple rules. I found these tips very snackable and on-point. Don’t entirely agree with “4. Use adaptive y-axis scale for line charts”, …
Tag Archives: link
HTTP/3 From A To Z
Over at Smashing Magazine, Robin Marx has written a 3-part series on HTTP/3: After almost five years in development, the new HTTP/3 protocol is nearing its final form. Earlier iterations were already available as an experimental feature, but you can expect the availability and use of HTTP/3 proper to ramp up over in 2021. So …
Designing Beautiful Shadows in CSS
Adding shadows on the web isn’t that hard: slap a CSS box-shadow onto an element and you’re done. But as Josh W. Comeau points out, making a good, life-like, shadow is hard. When I look around the web, though, it’s clear that most shadows aren’t as rich as they could be. The web is covered …
Motion One — WAAPI Powered Animation Library
A new animation library, built on the Web Animations API for the smallest filesize and the fastest performance. import { animate } from “motion” const boxes = document.querySelectorAll(".box"); animate(boxes, { backgroundColor: "red" }); Motion One → Be sure to also read the “Improvements over WAAPI” page.
CSS Specificity Calculator
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 →
“Learn Alpine.js“ Free Video Course
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”
Grainy Gradients
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 …
A Deep Dive Into The Wonderful World Of SVG Displacement Filtering
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”
Cloud Function to generate SVG Sparklines
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”