Search
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...
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...
Behind the Source: Cassie Evans
3.6.2020
I feel like the tech industry takes itself far too seriously sometimes. I get frustrated by all the posturing and gatekeeping – “You’re not a real developer unless you use x framework”, “CSS isn’t a real programming language”.
I think this kind of rhetoric often puts new developers off,...
Overlapping Header with CSS Grid
1.6.2020
Snook shows off a classic design with an oversized header up top, and a content area that is “pulled up” into that header area. My mind goes to the same place:
Historically, I’ve done this with negative margins. The header has a height that adds a bunch of padding to the bottom...
Why we at $FAMOUS_COMPANY Switched to $HYPED_TECHNOLOGY
29.5.2020
Too funny:
After careful consideration, we settled on rearchitecting our platform to use $FLASHY_LANGUAGE and $HYPED_TECHNOLOGY. Not only is $FLASHY_LANGUAGE popular according to the Stack Overflow developer survey, it’s also cross platform; we’re using it to reimplement our mobile apps as well....
Responsive web design turns ten.
27.5.2020
Ethan on the thinking and research that inspired the term:
Around that time, my partner Elizabeth visited the High Line in New York City shortly after it opened. When she got back, she told me about these wheeled lounge chairs she saw in one section, and how people would move them apart for a...
Responsive web design turns ten.
27.5.2020
Ethan on the thinking and research that inspired the term:
Around that time, my partner Elizabeth visited the High Line in New York City shortly after it opened. When she got back, she told me about these wheeled lounge chairs she saw in one section, and how people...