Fire SVG animations (SMIL) when the SVG is visible
When requirements read “when visible” your brain should go straight to IntersectionObserver. That’s exactly what Zach is doing here to kick off an animation when it scrolls into view.
Except this animation is an SVG SMIL animation: an situation. SMIL animations have some kinda cool things..
Building Your Own Subscription Newsletter
(This is a sponsored post.)
I did a sponsored video the other week explaining how to build a paid subscription newsletter using WordPress (we did it on WordPress.com but it could be hosted anywhere), MailPoet (a plugin to visually author the emails, as well as send them), and WooCommerce (to manage..
Firefox’s `bolder` Default is a Problem for Variable Fonts
Variable fonts make it easy to create a large set of font styles from a single font file. Unfortunately, the default rendering of the and elements in browsers today is not very compatible with the wide range of font-weight values enabled by variable fonts.
Unexpected: in Firefox the HT..
Early Days for CSS Scoping
There is a working draft spec for CSS scoping now, a newsworthy event for the W3C. Other than a weird period where shipped and then was subsequently removed from the spec (and browsers), this is the furthest a scoping proposal has gotten (the Level 1 spec never got anywhere).
This o..
AWS Lambdas: Easy, Easier, Easiest
I’d say cloud functions are one of the most transformative technologies in the last bunch of years. They are (usually) cheap, scale well, secure in their inherit isolation, and often written in JavaScript—comfortable territory for front-end developers. Nearly every cloud provider offers them, but AW..
Supercharging Built-In Elements With Web Components “is” Easier Than You Think
We’ve already discussed how creating web components is easier than you think, but there’s another aspect of the specification that we haven’t discussed yet and it’s a way to customize (nay, supercharge) a built-in element. It’s similar to creating fully custom or “autonomous” elements — like the <zo..
Links on Performance IV
HTTP Caching is a Superpower — Hugh Haworth covers how the Cache-Control header is an awfully potent ingredient in web performance. I mis-read the title at first and was waiting to read about HTML caching. Hugh covers it a bit (like how you’d need to be careful doing so on something like a forum, wh..
I completely ignored the front-end development scene for 6 months. It was fine.
Have you ever fretted that front-end web development moves so fast that if you stepped away for a while, you’d be lost coming back? Rachel Smith has:
The hectic pace of needing to learn one thing after the next didn’t bother me so much because when I was 26 because I was quite happy to spend much o..
If I work really hard on my Open Graph images, people will share my...
Zach did that thing where each of his blog posts has a special URL with the design of social image card that is screenshat by a headless browser (like Puppeteer) and used as a true meta Open Graph image, meaning it’s displayed on Twitter, Facebook, iMessage, Slack, Discord, and whatever else support..
You don’t need external assets in an HTML file
A fun exercise from Terence Eden. You can send an HTML file over the wire including anything a website might need without requesting any other files. CSS and JavaScript are easy, because there are and tags. Images and fonts (and pretty much whatever other kind of asset) aren’t too h..
