Search
Levels of Fix
20.7.2020
On the web, we have the opportunity to do work that fixes things for people. It’s fascinating to me how different the scope of those fixes can be.
Consider the media query prefers-reduced-motion. Eric wrote:
I think it’s also worth pointing out the true...
Develop, Preview, Test
17.7.2020
Guillermo:
I want to make the case that prioritizing end-to-end (E2E) testing for the critical parts of your app will reduce risk and give you the best return. Further, I’ll show how you can adopt this methodology in mere minutes.
His test is:
Spin up Puppeteer (Headless Chrome)...
On dependency
17.7.2020
Rob Weychert:
But I can’t host your site or even my own site. I didn’t build the CMS. Other people made the hardware and software I use to generate and optimize images. Other people made the fonts. Other people standardized the digital formats for those images and fonts. I didn’t write the HTML...
Tradeoffs and Shifting Complexity
16.7.2020
This is a masterclass from Dave:
After you hit the wall of unremovable complexity, any “advances” are a shell game, making tradeoffs that get passed down to the user … you get “advances” by shifting where the complexity lives.
You don’t get free reductions in complexity. In CSS land...
Making lil’ me
15.7.2020
Cassie Evans made a lovely illustration of herself and then used Greensock to add a flourish of animations to polish it off. Cassie wrote a series of posts about how she did it:
In this post we’ll cover how to get values from the mouse movement and plug them into an animation. This is...
We need more inclusive web performance metrics
10.7.2020
Scott Jehl argues that performance metrics such as First Contentful Paint and Largest Contentful Paint don’t really capture the full picture of everyone’s experience with websites:
These metrics are often touted as measures of usability or meaning, but they are not necessarily meaningful...
Memorize Scroll Position Across Page Loads
9.7.2020
Hakim El Hattab tweeted a really nice little UX enhancement for a static site that includes a scrollable sidebar of navigation.
???? If you've got a static site with a scrollable sidebar, it really helps to memorize the scroll position across page loads.
(left is default, right memorized)...
A little bit of plain Javascript can do a lot
8.7.2020
Julia Evans:
I decided to implement almost all of the UI by just adding & removing CSS classes, and using CSS transitions if I want to animate a transition.
An awful lot of the JavaScript on sites (that aren’t otherwise entirely constructed from JavaScript) is click the thing...
How to Make a List Component with Emotion
8.7.2020
I’ve been doing a bit of refactoring this week at Sentry and I noticed that we didn’t have a generic List component that we could use across projects and features. So, I started one, but here’s the rub: we style things at Sentry using Emotion, which I have only passing experience with and...
How to delete all node_modules directories from your computer
8.7.2020
Nice tip from Chris Ferdinandi:
My node_modules directories contained 50mb of stuff on the small side, and over 200mb of files in some cases. Over a few dozen projects, that really adds up!
Two dozen projects with 200 MB worth of node_modules? That’s nearly 5 GB of space for...
Improving Chromium’s browser compatibility in 2020
7.7.2020
This is exactly what I love to hear from any browser vendor:
When it comes to browser compatibility, there are still too many missing features and edge-case bugs. But it doesn’t have to be this way. Things can and will get better, if browser vendors can understand what is causing the most...
Settling down in a Jamstack world
3.7.2020
One of the things I like about Jamstack is that it’s just a philosophy. It’s not particularly prescriptive about how you go about it. To me, the only real requirement is that it’s based on static (CDN-backed) hosting. You can use whatever tooling you like. Those tools, though...
Five 5-minute Videos from Ethan on Design & Accessibility
30.6.2020
Ethan:
I’ve been working with Aquent Gymnasium to produce a series of five short tutorial videos, which have been launching over the course of this past week. Since the last video just went live, I’m thrilled to share the whole list with you:
• Introduction to using VoiceOver on macOS•...
Quick Tips for High Contrast Mode
27.6.2020
Sarah Higley has some CSS tricks up her sleeve for dealing with High Contrast Mode on Windows, which I learned is referred to as WHCM.
Here’s the first trick:
[…] if the default CSS outline property doesn’t give you the visual effect you want [in WHCM] for focus states...
Grid for layout, flexbox for components
26.6.2020
When should we reach for CSS grid and when should we use flexbox? Rachel Andrew wrote about this very conundrum way back in 2016:
Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.
Ahmad...
WebP Image Support Coming to iOS 14
24.6.2020
Apple announced a ton of new updates at yesterday’s WWDC20 keynote address, from new hardware to updated applications. There’s lots to gawk at and enough device-envy to go around.
But there’s one little line in the Safari 14 Beta release notes that caught my eye:
Added WebP image...
CUBE CSS
11.6.2020
A CSS methodology from Andy Bell:
The most important part of this methodology is the language itself: CSS. It’s key to note its existence in the name because some alternative approaches, such as BEM—which I have enjoyed for many years—can veer very far away from Cascading Style Sheets. I love CSS...
Adding CSS to a Page via HTTP Headers
4.6.2020
Only Firefox supports it, but if you return a request with a header like this:
Header add Link "<style.css;rel=stylesheet;media=all"
…that will link to that stylesheet without you having to do it in the HTML. Louis Lazaris digs into it:
[…] the only thing I can think of that could...
Jumping Into Webmentions With NextJS (or Not)
3.6.2020
Webmention is a W3C recommendation last published on January 12, 2017. And what exactly is a Webmention? It’s described as…
[…] a simple way to notify any URL when you mention it on your site. From the receiver’s perspective, it’s a way to request notifications when other sites...
On fixed elements and backgrounds
3.6.2020
After just playing with apsect-ratio and being pleasantly surprised at how intuitive it is, here’s an example of CSS acting unintuitively:
If you have a fixed element on your page, which means it doesn’t move when you scroll, you might realise that it no longer acts fixed if you apply a...