Earth Restored — Toby Ord
Beautifully restored high-resolution photographs of the Earth taken by Apollo astronauts.
Link tags: mag
329
Swipey image grids.
This is how you write up a technique! Cassie takes an SVG pattern she used on the Clearleft “services” page and explains it in step-by-step detail, complete with explanatory animated diagrams.
Guarding Against Disposable Design — Smashing Magazine
Always refreshing to see some long-term thinking applied to the web.
Meet Utopia: Designing And Building With Fluid Type And Space Scales — Smashing Magazine
An excellent explainer from Trys and James of their supersmart Utopia approach:
Utopia encourages the curation of a system small enough to be held in short-term memory, rather than one so sprawling it must be constantly referred to.
THE INTERNET — Opte
Visualising the growth of the internet.
A Complete Guide To Accessible Front-End Components — Smashing Magazine
Vitaly has rounded up a whole load of accessibility posts. I think I’ve linked to most of them at some point, but it’s great to have them all gathered together in one place.
Good, Better, Best: Untangling The Complex World Of Accessible Patterns — Smashing Magazine
I really like the approach that Carie takes here. Instead of pointing to specific patterns to use, she provides a framework for evaluating technology. Solutions come and go but this kind of critical thinking is a long-lasting skill.
archives.design
All of these graphic design books, magazines, and type specimens are available for perusal on the Internet Archive.
Should The Web Expose Hardware Capabilities? — Smashing Magazine
This is a very thoughtful and measured response to Alex’s post Platform Adjacency Theory.
Unlike Alex, the author doesn’t fire off cheap shots.
Also, I’m really intrigued by the idea of certificate authorities for hardware APIs.
Quantum to Cosmos
Well, this is rather wonderful! It’s like an interactive version of the Eames’s Powers Of Ten.
Creating websites with prefers-reduced-data | Polypane Browser for Developers
There’s no browser support yet but that doesn’t mean we can’t start adding prefers-reduced-data to our media queries today. I like the idea of switching between web fonts and system fonts.
Standardizing `select` And Beyond: The Past, Present And Future Of Native HTML Form Controls — Smashing Magazine
While a handful of form controls can be easily styled by CSS, like the button element, most form controls fall into a bucket of either requiring hacky CSS or are still unable to be styled at all by CSS.
Despite form controls no longer taking a style or technical dependency on the operating system and using modern rendering technology from the browser, developers are still unable to style some of the most used form control elements such as
select. The root of this problem lies in the way the specification was originally written for form controls back in 1995.
Stephanie goes back in time to tell the history of form controls on the web, and how that history has led to our current frustrations:
The current state of working with controls on the modern web is that countless developer hours are being lost to rewriting controls from scratch, as custom elements due to a lack of flexibility in customizability and extensibility of native form controls. This is a massive gap in the web platform and has been for years. Finally, something is being done about it.
Amen!
Blockchain, the amazing solution for almost nothing - The Correspondent
A devastating deep dive into the hype of blockchain, written by Jesse Frederik and translated by Hannah Kousbroek:
I’ve never seen so much incomprehensible jargon to describe so little. I’ve never seen so much bloated bombast fall so flat on closer inspection. And I’ve never seen so many people searching so hard for a problem to go with their solution.
5 most annoying website features I face as a blind person every single day by Holly Tuke
Five pieces of low-hanging fruit:
- Unlabelled links and buttons
- No image descriptions
- Poor use of headings
- Inaccessible web forms
- Auto-playing audio and video
Full bleed layout using simple CSS | Kilian Valkhof
A follow-up to full-bleed layout post I linked to recently. Here’s how you can get the same effect with using CSS grid.
I like the use of the principle of least power not just in the choice of languages, but within the application of a language.
Same Energy Snap
Match up images that have been posted in pairs to Twitter with the caption “same energy”. This is more fun and addictive than it has any right to be.
CSS Grid full-bleed layout tutorial · Josh W Comeau
When you’ve got a single centered column but you want something (like an image) to break out and span the full width.
AddyOsmani.com - Preload late-discovered Hero images faster
Did you know there’s an imagesrcset attribute you can put on link rel="preload" as="image" (along with an imagesizes attribute)?
I didn’t. (Until Amber pointed this out.)
AVIF has landed - JakeArchibald.com
There’s a new image format on the browser block and it’s very performant indeed. Jake has all the details you didn’t ask for.
Autonomy Online: A Case For The IndieWeb — Smashing Magazine
A wonderful introduction to the indie web—Ana really conveys her sense of excitement!