CSS { In Real Life } | Cool Tools
I knew of most of these front-end development tools (like Utopia, obviously), but some were new to me.
Link tags: form
978
File over app — Steph Ango
In the fullness of time, the files you create are more important than the tools you use to create them. Apps are ephemeral, but your files have a chance to last.
Shining a Light on the Digital Dark Age - Long Now
A false sense of security persists surrounding digitized documents: because an infinite number of identical copies can be made of any original, most of us believe that our electronic files have an indefinite shelf life and unlimited retrieval opportunities. In fact, preserving the world’s online content is an increasing concern, particularly as file formats (and the hardware and software used to run them) become scarce, inaccessible, or antiquated, technologies evolve, and data decays. Without constant maintenance and management, most digital information will be lost in just a few decades. Our modern records are far from permanent.
Undersea Cables by Rishi Sunak [PDF]
Years before becoming Prime Minister of the UK, Rishi Sunak wrote this report, Undersea Cables: Indispensable, insecure.
Progressively Enhanced Form Validation, Part 1: HTML and CSS – Cloud Four
A great reminder of just how much you can do with modern markup and styles when it comes to form validation. The :user-invalid and :user-valid pseudo-classes are particularly handy!
Lunar Codex
Time capsules on the moon, using NanoFiche as the storage medium.
4 design principles I use every day to avoid bad UX and create products that work for everyone – Adam Silver – designer, London, UK
- Good design works for everyone
- Good design makes things obvious
- Good design puts users in control
- Good design is lightweight
The Cost Of JavaScript - 2023 - YouTube
A great talk from Addy on just how damaging client-side JavaScript can be to the user experience …and what you can do about it.
🧞♀️✨ The Real Godwin’s Law
Once a privately owned, centralized platform closes its public APIs, the platform will invariably lose any usablity except for people who publicly or privately admire Hitler.
Future-first design thinking
If we’re serious about creating a sustainable future, perhaps we should change this common phrase from “Form follows Function” to “Form – Function – Future”. While form and function are essential considerations, the future, represented by sustainability, should be at the forefront of our design thinking. And actually, if sustainability is truly at the forefront of the way we create new products, then maybe we should revise the phrase even further to “Future – Function – Form.” This revised approach would place our future, represented by sustainability, at the forefront of our design thinking. It would encourage us to first ask ourselves, “What is the most sustainable way to design X?” and then consider how the function of X can be met while ensuring it remains non-harmful to people and the planet.
Jack Franklin – Abstractions, complexities and off-ramps – All Day Hey! 2023 - YouTube
This is a terrific talk by Jack on how to deal with the tooling involved in modern front-end development:
- Maintaining control,
- Dependency awareness,
- Lean on browser primitives,
- Have an exit strategy.
Google AMP: how Google tried to fix the web by taking it over - The Verge
AMP succeeded spectacularly. Then it failed. And to anyone looking for a reason not to trust the biggest company on the internet, AMP’s story contains all the evidence you’ll ever need.
This is a really good oral history of how AMP soured Google’s reputation.
Full disclosure: I’m briefly cited:
“When it suited them, it was open-source,” says Jeremy Keith, a web developer and a former member of AMP’s advisory council. “But whenever there were any questions about direction and control… it was Google’s.”
As an aside, this article contains a perfect description of the company cultures of Facebook, Apple, and Google:
“You meet with a Facebook person and you see in their eyes they’re psychotic,” says one media executive who’s dealt with all the major platforms. “The Apple person kind of listens but then does what it wants to do. The Google person honestly thinks what they’re doing is the best thing.”
Spot. On.
CSS Text balancing with text-wrap:balance - Ahmad Shadeed
Ahmad runs through some of the scenarios where text-wrap: balance could be handy.
Even though it’s not well-supported yet in browsers, there’s no reason not to start adding it to sites now; it’s classic progressive enhancement.
Podcast Standards Project | Advocating for open podcasting
A new organisation with the stated goal of keeping podcasting open.
Their first specification is a consolidation of what already exists. That’s good. We don’t want a 927 situation.
My only worry is that many of the companies behind this initiative are focused on metrics and monetization—I hope they don’t attempt to standardise tracking and surveillance in podcasts.
The Podcast Standards Project, a grassroots coalition working to establish modern, open standards, to enable innovation in the podcast industry.
Define “innovation”.
Defaulting on Single Page Applications (SPA)—zachleat.com
This isn’t an opinion piece. This is documentation.
You can’t JavaScript your way out of an excess-JavaScript problem.
How slimmed-down websites can cut their carbon emissions - BBC News
Interesting to see an article on web performance on the BBC. Perhaps we should be emphasising green over speed?
Behind the scenes, animation and interaction effects were added using HTML and CSS, two fundamental web languages. That meant there was no need to download large JavaScript files often used to do this on other sites.
On Container Queries, Responsive Images, and JPEG-XL – Cloud Four
Container queries can’t be used in the sizes attribute for responsive images. Here, Jason breaks down why that is (spoiler: it’s the lookahead pre-parser) and segues into a truly long term solution: a “magical” image format.
If you’ve ever thought it felt weird to put media conditions inside the HTML for responsive images, this will resonate.
Why I’m not the biggest fan of Single Page Applications - Manuel Matuzović
I guess the biggest criticism here is that it feels like people who believe in the superiority of single page applications and the entire ecosystem focus more on developer experience (DX) than user experience. That sounds like a dangerous blanket statement, but after all these years, I never had the feeling that the argument “better DX leads to better UX” was ever true. It’s nothing more than a justification for the immense complexity and potentially significantly worse UX. And even if the core argument isn’t DX, other arguments like scalability, maintainability, competitive ability, easier recruiting (“everyone uses React”), and cost effectiveness, in my experience, only sound good, but rarely hold up to their promises.
Learn Images
Mat has written this free course for you all about images on the web. Covering image formats, responsive images, and workflows, this is one to keep on speed dial.
WebPageTest’s Guiding Principles - WebPageTest Blog
- Make the right thing easy
- Always answer “so what”?
- Close the gap between “something is wrong” to “we fixed it”