Link archive: September, 2021

Bruce Lawson’s personal site  : Set Safari free!

If Apple allowed Safari to actually compete, it would be better for web developers, businesses, consumers, and for the health of the web. Come on, Apple, set Safari free!

Plus Equals #3, September 2021

Want to take a deep dive into tiling images? Like, a really deep dive. Rob has you covered.

Locus. — Ethan Marcotte

Ethan documents the sad plague of app-install banners on the web.

Responsible JavaScript, A Book Apart

TAKE MY MONEY!!!

If we want people to fully experience the sites we have worked so hard to craft, then we must be judicious in our use of JavaScript. In thoughtful detail, Jeremy Wagner shows how JavaScript can be used to progressively enhance server-side functionality, while improving speed and access for more visitors. By centering user needs every step of the way—from toolchains to metrics to testing—we can all contribute to a more inclusive, accessible, and resilient web.

Get Lost on the Web – Dan Q

Internet users use fewer different websites today than they did 20 years ago, and spend most of their “Web” time in app versions of websites (which often provide a better experience only because site owners strategically make it so to increase their lock-in and data harvesting potential). Truly exploring the Web now requires extra effort, like exercising an underused muscle. And if you begin and end your Web experience on just one to three services, that just feels kind of… sad, to me. Wasted potential.

iOS Browser Choice | CSS-Tricks

I have this expensive computer in my pocket and it feels unfair that it is hamstrung in this very specific way of not allowing other browser engines. I also have an Apple laptop and it’s not hamstrung in that way, and I really hope it never is.

The Flickr Foundation

A non-profit foundation dedicated to long-term digital preservation.

Imagine if we could place ourselves 100 years into the future and still have access to the billions of photos shared by millions of people on Flickr, one of the best documented, broadest photographic archives on the planet.

The Flickr Foundation represents our commitment to stewarding this digital, cultural treasure to ensure its existence for future generations.

Its first act is the renewal of the Flickr Commons.

The word for web is forest | New_ Public Magazine

The wood wide web has been a powerhouse metaphor for popularizing the mutualistic relationships of healthy forests. But like a struggling forest, the web is no longer healthy. It has been wounded and depleted in the pursuit of profit. Going online today is not an invigorating walk through a green woodland—it’s rush-hour traffic alongside a freeway median of diseased trees, littered with the detritus of late capitalism. If we want to repair this damage, we must look to the wisdom of the forest and listen to ecologists like Simard when they tell us just how sustainable, interdependent, life-giving systems work.

A beautiful piece by the brilliant Claire L. Evans.

The project of decentralizing the web is vast, and only just beginning. It means finding a way to uproot our expression and communication from the walled gardens of tech platforms, and finding novel ways to distribute the responsibilities of infrastructure across a collective network. But we needn’t start from nothing.

🧠 ct.css – Let’s take a look inside your `head`

I love a good bookmarklet, and Harry has made a very good bookmarklet indeed.

Drag ct.css to your browser bar and then press it whenever you’re on a site you want to check for optimising what’s in the head element.

11ty/api-indieweb-avatar: Return an optimized avatar image from a domain name input.

Here’s a nifty little service from Zach: pass in a URL and it returns an image of the site’s icon.

Here’s mine.

Think of it as the indie web alternative to showing Twitter avatars.

The Future of CSS: Cascade Layers (CSS @layer) – Bram.us

This is a really in-depth explanation from Bramus of the upcoming @layer rules in CSS, from the brilliant minds of Miriam, fantasai and Tab.

Basically, you’ll be able to scope styles, and you get to define the context for that scoping. So all those CSS-in-JS folks who don’t appreciate the cascade will have a mechanism to get encapsulated styles.

I can see this being very handy for big complex codebases with lots of people on the team.

New principle: Do not design around third-party tools unless it actually breaks the Web · Issue #335 · w3ctag/design-principles

There’s a really interesting discussion here, kicked off by Lea, about balancing long-term standards with short-term pragmatism. Specifically, it’s about naming things.

Naming things is hard. Naming things in standards, doubly so.

In Quest of Search

On the surface this is about the pros and cons of minting a new HTML search element to replace div role="search" but there’s a deeper point which is that, while ARIA exists to the plug the gaps in HTML, the long-term goal is to have no gaps.

ARIA is not meant to replace HTML. If anything, the need to use ARIA as ‘polyfill’ for HTML semantics could be considered as a sign and a constant reminder of the fact that HTML falls short on some semantics that benefit users of assistive technologies.

An Idea from Computer Science That Can Change Your Life – Jorge Arango

Applying Postel’s Law to relationships:

I aspire to be conservative in what and how I share (i.e., avoid drama) while understanding that other people will say all sorts of unmindful things.

Notes on synthetic speech - Tink - Léonie Watson

This is a fascinating deep dive by Léonie on the inner workings of speech synthesis. She has quite a conundrum: she wants fast playback, but she also wants a voice that doesn’t sound robotic. Unfortunately it’s the robotic-sounding voices that work best at speed.

If you’re interested in this topic, I highly recommend listening to (or reading) the accessibility episode of the Clearleft podcast which featured Léonie as a guest giving demos and explanations.

Basic Pattern Repository

A nice little collection of very simple—and very lightweight—SVGs to use as background patterns.

Benjamin Parry~ Writing ~ Engineering a better design test ~ @benjaminparry

It sometimes feels like we end up testing the limitations of our tools rather than the content and design itself.

What Benjamin found—and I heartily agree—is that HTML prototypes give you the most bang for your buck:

At the point of preparing for usability testing, it seemed ludicrous to move to any prototyping material other than the one we were already building in. The bedrock of the web: HTML, CSS and Javascript.

BDConf & Mobilewood: 10-years later | Brad Frost

Brad reminisces about the scene ten years ago.

I’m not sure I’ll ever be a part of such an exciting moment in this field again. Of course technology continues to evolve, but the web landscape has settled down a bit. While I’m more than okay with that, I occasionally miss the electric, optimistic feeling of being on the cusp of something new and exciting.

Designing Beautiful Shadows in CSS

This is a great tutorial—I just love the interactive parts that really help make things click.

Responsible JavaScript

I cannot wait for this book (apart) by Jeremy Wagner to arrive—it’s gonna be sooooo good!

Increasing the amount of JavaScript we ship results in poor user experiences, and the iron law of our work is that users must come first. Our preferences and comfort as developers are secondary.

That’s a mission to take to heart while we figure out how we can use JavaScript more responsibly in an industry that relies on it more than ever — and I think that Responsible JavaScript — a carefully written book that the talented people at A Book Apart have worked with me to publish — can help you along the way.

Blunder • Robin Rendle

Get out of my head, Robin!

I wish the structure of my days could be more like this though; more haphazard, more jumping from thing to thing with reckless abandon. There’s a punch-in-the-gut feeling I get when my days have too much structure to them. I require that feeling of jumping around whenever I want to, and I think it’s what gives me the energy to be a functional person.

It. Me.

Chrome is the new Safari. And so are Edge and Firefox. – Hello my name is Niels Leenheer

You may not realise that all browsers on iOS are required to use the same rendering engine as Safari. On other platforms, this is not the case.

A terrific in-depth look at the frustrating state of the web on iOS.

So it’s not just one browser that falls behind. It’s all browsers on iOS. The whole web on iOS falls behind. And iOS has become so important that the entire web platform is being held back as a result.

And this damning assessment is mercifully free of conspiracy theories.

The Safari and Chrome team both want to make the web safer and work hard to improve the web. But they do have different views on what the web should be.

Google is focussing on improving the web by making it more capable.

Safari seems to focus on improving the web as it currently is.

Read the whole thing—it’s excellent!

There can only be one proper solution: Apple needs to open up their App Store to browsers with other rendering engines. Scrap rule 2.5.6 and allow other browsers on iOS and let them genuinely compete. Even though Apple has been forced to compromise on some App Store rules, I have little hope for this to happen.

Why We Create Progressive Web Apps: A Conversation with Jeremy Keith

This is a really nice write-up by Sydney of the chat we had on her podcast.

State of the Browser 2021

The excellent (and cheap!) State Of The Browser is coming back to Conway Hall this year on Saturday, October 30th. Speakers include Rachel Andrew and Amber Case.

Everyone needs to show proof of vaccination or a negative Covid test to get into the venue, which is reassuring.

I think I’m gonna go!

Can we have custom media queries, please?

I knew that custom properties don’t work in media queries but I had no idea that there was such a thing as custom media queries, which effectively do the same thing.

But this is not implemented in any browser. Boo! This would be so useful! If browser makers can overcame the technical hurdles with container queries, I’m sure they can deliver custom media queries.

Meet the Self-Hosters, Taking Back the Internet One Server at a Time

Taking the indie web to the next level—self-hosting on your own hardware.

Tired of Big Tech monopolies, a community of hobbyists is taking their digital lives off the cloud and onto DIY hardware that they control.

Decoded: The When, Why, and Why Not of Progressive Web Apps

I really enjoyed talking to Sydney Lai about progressive web apps, resilient web design, and all my other hobby horses.

Alas, there’s no transcript and I can’t find a direct link to the RSS feed or the individual audio file on the podcast website so it’s not huffduffable.

404PageFound – Active Vintage Websites, Old Webpages, and Web 1.0

Well, this is rather lovely! A collection of websites from the early days of the web that are still online.

All the HTML pages still work today …and they work in your web browser which didn’t even exist when these websites were built.

Bruce Lawson’s personal site  : Briefing to the UK Competition and Markets Authority on Apple’s iOS browser monopoly and Progressive Web Apps

Following on from Stuart’s, here’s Bruce’s presentation to the CMA on Apple’s monopolistic practices and hostility to progressive web apps.

as days pass by — Talking to the Competition and Markets Authority about Apple

What I would like is that I can give users the best experience on the web, on the best mobile hardware. That best mobile hardware is Apple’s, but at the moment if I want to choose Apple hardware I have to choose a sub-par web experience. Nobody can fix this other than Apple, and there are a bunch of approaches that they could take — they could make Safari be a best-in-class experience for the web, or they could allow other people to collaborate on making the browser best-in-class, or they could stop blocking other browsers from their hardware. People have lots of opinions about which of these, or what else, could and should be done about this; I think pretty much everyone thinks that something should be done about it, though.

The Single-Page-App Morality Play – Baldur Bjarnason

I keep seeing Single-Page-Apps with huge JS files that only, in terms of concrete User Experience (UX) benefits, deliver client-side validation of forms plus analytics. Apps rarely leverage the potential of a Single-Page-App. It’s still just the same ‘click, wait for load’ navigation cycle. Same as the one you get with Multi-Page-Apps. Except buggier and with a much slower initial loading time.

When you look at performance, cross-platform and mobile support, reliability, and accessibility, nearly every Single-Page-App you can find in the wild is a failure on multiple fronts.

Replacing those with even a mediocre Multi-Page-App is generally going to be a substantial win. You usually see improvements on all of the issues mentioned above. You get the same general UX except with more reliable loading, history management, and loading features—provided by the browser.

Before you dismiss Baldur as a hater based on what I’ve just quoted, you should really read the whole article. The issue he points to is not with the technical architecture of single page apps, but with management.

Single-Page-Apps can be fantastic. Most teams will mess them up because most teams operate in dysfunctional organisations.

A lot of what he says really resonates with me. Over and over again I’ve seen projects where the technical decison around which monolithic client-side JavaScript framework to use has been made even before a problem has been defined.

Baldur’s conclusion chimes a lot with what I’ve been saying in conference talks this year: the biggest challenges facing the web are not technical in nature.

The biggest hindrance to the web’s progress isn’t non-expert developers, tooling, libraries, Single-Page-Apps, or Multi-Page-Apps.

It’s always humans.

Using the platform

Elise Hein documents what it was like to build a website (or web app, if you prefer) the stackless way:

• use custom elements (for modular HTML without frameworks)
• use the in-browser package manager (for JavaScript packages without build tools)
• match pages with files (to avoid routing and simplify architecture)
• stick to standards (to avoid obsolescence and framework fatigue)

Her conclusions are similar to my own: ES6 modules mean you can kiss your bundler goodbye; web components are a mixed bag—it’s frustrating that Apple are refusing to allow native elements to be extended. Interestingly, Elise feels that a CSS preprocessor is still needed for her because she wants to be able to nest selectors …but even that’s on its way now!

Perhaps we might get to the stage where it isn’t an automatic default to assume you’ll need bundling, concatenation, transpiling, preprocessing, and all those other tasks that we’ve become dependent on build tools for.

I have a special disdain for beginner JavaScript tutorials that have you run create-react-app as the first step, and this exercise has only strengthened my conviction that every beginner programmer should get to grips with HTML, CSS and vanilla JS before delving into frameworks. Features native to the web are what all frameworks share, and knowing the platform makes for a stronger foundation in the face of change.

He founded the Internet Archive with a utopian vision. That hasn’t changed, but the internet has

A profile of Brewster Kahle and the Internet Archive in the San Francisco Chronicle.

Schedule / Inclusive Design 24 (#id24) 23 September 2021

The annual day-long online accessibility event is back on September 23rd.

No sign-up. No registration. All sessions are streamed live and publicly on the Inclusive Design 24 YouTube channel.

Solarpunk Is Not About Pretty Aesthetics. It’s About the End of Capitalism

Hannah Steinkopf-Frank:

At its core, and despite its appropriation, Solarpunk imagines a radically different societal and economic structure.

IndieWeb Events: Gardens and Streams II

September 25th, online:

We’ll discuss and brainstorm ideas related to wikis, commonplace books, digital gardens, zettelkasten, and note taking on personal websites and how they might interoperate or communicate with each other. This can include IndieWeb building blocks, user interfaces, functionalities, and everyones’ ideas surrounding these. Bring your thoughts, ideas, and let’s discuss and build.

A/A Testing: How I increased conversions 300% by doing absolutely nothing

An oldie but a goodie. If you think you’re getting statistically significant results from A/B testing, you should probably consider doing some A/A testing.

In an A/A test, you run a test using the exact same options for both “variants” in your test.

Why William Gibson Is a Literary Genius | The Walrus

On the detail and world-building in 40 years of William Gibson’s work.