[Robin]: Making things move by Varun Vachhar is a fantastic blog post I stumbled on the other day. He talks about how he built the following animation with canvas-stretch and walks step-by-step in the process of designing it:
Not only is this animation wonderful to look at, but the design of the website he built to showcase this tutorial is wonderful, too. As the story progresses, images on the left update depending on which section you’re on. It’s such a natural way to read this thing:
Also, I just saw that Varun wrote about another post about how to build a Storybook addon which is pretty interesting. If you’re unfamiliar with Storybook, it’s a tool to create a reusable component library and Varun shows us what can be customized in Storybook. This reminds me that I really want to experiment and try to build a dark mode theme toggler within Storybook.
Please disable JavaScript to view this site
Heydon Pickering’s new website is pretty interesting: you have to disable JavaScript to view it. I feel like it makes a good point about the current state of the web and it’s over-reliance on JavaScript, because so many sites fail if JavaScript is borked or disabled or for some reason doesn’t run properly.
Here’s what Heydon’s site looks like in a regular browser with JavaScript enabled:
Websites should be resiliant to damage. So, say your CSS doesn’t load for whatever reason—like someone tries to load your site on a train and goes through a tunnel—that’s okay! They can still access the HTML and find whatever information they need. But with this design, Heydon flips that whole thing on its head.
This is what Jeremy Keith’s Resilient web design is all about really, and it’s a book I happen to think about a lot. It’s all about how to build things for the web and Jeremy makes it clear that this resilience is the difference between building a website and building any other kind of software.
Anyway, back to Pickering’s website. Remy Sharp wrote a nice follow-up about how he struggled to turn off JavaScript to even view Pickering’s site. And I had trouble, too! I tried to disable it in Firefox and then got frustrated and found a toggle in Safari to do that in Security settings.
But Remy then describes why we shouldn’t rely on JavaScript to build websites in the first place:
There are many, many people browsing the web in many different ways. Ways that do not mirror my perfect 10 digits and their mortary ability and fairly decent eyesight, and (sometimes questionable) conative skills. There are people who browse the web on a huge gamut of devices and browsers.
Forcing them to jump through hurdles because we, web developers, did a lazy job of checking how our JavaScript (or even CSS) works and fails and can cause obstructions is a god damn travesty and a failing of our jobs.
Troubleshooting Caching
Caching is sort of dark magic web development to me. And so thankfully the other day I found this article by Michelle Barker about how to troubleshoot caching problems:
While launching the new version of this site recently, I came across a few issues with some browsers unexpectedly caching the old version – despite this being a total rebuild. It meant some users were still seeing the previous version of the site unless they manually cleared their cache. Clearly this is not a reasonable request to make of every user!
When I set up a website with a service worker not so long ago I was entirely baffled by how it was causing me a ton of caching headaches. Michelle makes a quick note here that you need to deregister them, even if you had a service worker and then removed one.
How to Animate the Details Element
Louis Hoebregts writes in to say that the details element can be animated with the help of the Web Animations API. He also adds a few good notes at the end about how to structure things and which CSS properties to avoid animating in case you want to prevent janky movement of elements on screen.
The more I think about it the more I realize I haven’t been sensitive enough in the past to layout shift, and the more I think about performance and some of the notes that Louis mentions there makes me think twice about how “stable” websites should look and feel. I think over the years we’ve sort of gotten used to websites being clunky and janky — with adds loading randomly on certain sections, having to move back to our original scroll position, etc. And by doing the extra work that Louis describes here, we can start to prevent the web from working like that.
That doesn’t have to be the way the web works.
Creating websites with prefers-reduced-data
Here’s a neat post from the Polypane blog about this upcoming media query and how to use it to detect when a user asks for the smallest website possible to be sent across the wire (or at least when it becomes available in browsers). prefers-reduced-data would let us figure out if users care more about performance than they do about visual fidelity.
Here’s a great example of what this will be able to do when it comes to loading fonts in CSS:
@media (prefers-reduced-data: no-preference) {
@font-face {
font-family: 'Inter';
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
src: url('Inter-roman.var.woff2') format('woff2');
}
}
body {
font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}That media query above effectively says “when the user has not stated a preference, load the Inter font.” Otherwise, if the user has set data saving mode to be on, it’ll use whatever system font UI is applicable instead.
This is great because if our users are explicitly telling us that they only care about performance then we’ll soon be able to deliver an experience just catered for them, and from right here with CSS.
As the Polypane blog points out, this could be used in a ton of other ways too. From removing background images that aren’t necessary to loading smaller inline images and preventing videos to automatically play.
Web Performance Calendar 2020
The Web Performance Calendar is back for 2020 and I’m already a fan of the first few articles that have released. But I particularly liked Rick Viscomi’s take on what he calls the mythical “fast” web page:
When this page loaded moments ago, was it fast? If so, congratulations, you had a fast experience. So ask yourself, does that make this a fast page? Not so fast! Just because you had a fast experience doesn’t mean everyone else does too. You might even revisit this page and have yourself a slow experience.
This is why using PageSpeed Insights is a good start, but it’s not entirely telling us the whole truth when it comes to performance. I catch myself sometimes thinking “well, this is fast enough for me” which is sort of the performance equivalent of “it works on my machine.”
Blocks UI
Here’s an extremely cool project I spotted the other day: Blocks UI. It’s a tool for “creating beautiful websites without writing code.” And after watching the demo, I can’t help but imagine if this is what we’ll be using to design websites in the near-ish future. Instead of booting up tools like Figma or Sketch, perhaps we’ll be designing entirely in the browser.
Sponsor
Preflect
Use surveys to answer important questions, make better business decisions, and help visitors navigate your website. The possibilities are endless! Every website needs onsite surveys. Create your first survey for free in five minutes using Preflect.
Sponsor
Increase Online Sales with WooCommerce & Creative Mail
The Creative Mail extension for WooCommerce is the easiest way to set up transaction emails and automated email workflows for your online WordPress shop. All you need is a Creative Mail account and the free extension to to integrate it directly with WooCommerce to automate your email marketing and engage your customers.
Psst… Automattic is hiring! If you’ve been hunting for a new job, there are tons of openings and one of them might just have your name written all over it. Check them out!
[Chris]: I’m trying to lounge around and chill out a bit this December. It’s only working a little bit. I have a lot going on and I’m in a place where taking a break doesn’t feel relaxing, it feels like things are just going to be building up that I’ll have to do anyway. But hey, at least I’ll learn what the most sensitive things are when that happens so I can learn where best to alleviate pressure.
Anyway, sometimes just sitting in a different chair helps me. If I move over to a cushiony chair and look at the TV instead of my laptop, it can feel like a break. And if I can’t let my mind relax enough to watch something silly, even watching tech-related stuff can be somewhat relaxing in a comfortable chair. With that in mind, here’s some videos I’ve saved recently that are nice little watches:
- Stephanie Eckles with 3 minutes on
object-fit. Makes me think 1) I’m so glad this exists 2) It bugs me how when we do this we’re sending image bytes over the wire that aren’t used at all, and that if we had all the time in the world, we’d be leverage image hosts that can serve the perfectly sized images (from any original source) without the extra bytes. - Erik Kennedy with 10 minutes on redesigning a text-heavy page. It’s funny how so much of design is such fundamental basics. Things like hierarchy and alignment. Not stuff you need to be a design genius to leverage. I was taking some photos this past weekend on my DSLR and reminding myself of the fundamentals there and it felt so similar. The fundamentals are not complicated. Shutter speed, aperture, framing… you just have to remember to think about them (then spend the rest of your life mastering them).
- Una Kravets with 8 minutes on designing in the browser. One nice bit in here is that Una uses
prefers-reduced-motionnot to entirely remove movement but to (wait for it) reduce it. It also makes me think of Matthias’ Painting with the Web article, in that when you just poke around abstractly with HTML/CSS/JavaScript right on the web, it leads to “happy accident” type stuff that can be absolutely key to unlocking great design.