Link archive: August, 2022

Folk Interfaces

Folk creations fill a gap. They solve problems for individuals and small communities in a way that that centralised, top-down, industrial creations never can. They are informal, distributed practices that emerge from real world contexts. Contexts where individuals have little or no control over the “official” means of production – of furniture, urban architecture, crockery, artwork, media stories, or taxonomies. In response people develop their own unpolished, unofficial, and deeply practical creations.

Now apply that to software:

Only professional programmers and designers get to decide what buttons go on the interface, what features get prioritised, and what affordances users have access to. Subverting that dynamic is the only way people can get their needs met with the computational tools they have at hand.

Improving the information architecture of the Smart Pension member app | Design and tech | Smart – retirement, savings and financial wellbeing

Here’s a really excellent, clearly-written case study that unfortunately includes this accurate observation:

In recent years the practice of information architecture has fallen out of fashion, which is a shame as you can’t design something successfully without it. If a user can’t find a feature, it’s game over - the feature may as well not exist as far as they’re concerned.

I also like this insight:

Burger menus are effective… at hiding things.

ADL Social Pattern Library | Anti hate by design

A collection of design patterns and principles for mitigating the presence and spread of online hate and harassment in social platforms.

Bring Focus to the First Form Field with an Error :: Aaron Gustafson

A handy little script from Aaron to improve the form validation experience.

What happened when we disabled Google AMP at Tribune Publishing?

Shockingly little. So you should try it, too.

html energy

Can you feel the energy?

Highlights | Catalogue | Sainsbury Archive

There are some tasty designs in this archive from Sainbury’s.

Lean Web Club

New from Mr. Vanilla JS himself, Chris Ferdinandi:

A learning space for people who hate the complexity of modern web development.

It’ll be $29 a month or $299 a year (giving you two months worth for free).

Nutshell: make expandable explanations

Nicky Case has made an implementation of Ted Nelson’s StretchText that works across different domains.

rottytooth/Olympus: The language where computation happens through the will of the gods

A new programming language where you pray to Greek gods.

An invocation has three parts: the god’s name and adoration (praising of that god), supplication to show the humbleness of the asker, followed by a request to add one or several of what we ordinarily call “commands” to the program.

Here’s the source code for “99 bottles of beer” in Olympus and here it is transpiled into JavaScript.

A Well-Known Links Resource - Jim Nielsen’s Blog

I really like this experiment that Jim is conducting on his own site. I might try to replicate it sometime!

Using :has() as a CSS Parent Selector and much more | WebKit

A terrific tour of just some of the fantastic ways you can use :has() in CSS.

The section on using it with sibling selectors blew my mind:

How often have you wanted to adjust the margins on a headline based on the element following it? Now it’s easy. This code allows us to select any h2 with a p immediately after it.

h2:has(+ p) { margin-bottom: 0; }

Amazing.

The web is a harsh manager - daverupert.com

Dave laments the increasing number of complex jobs involved in front-end (or “full-stack”) development.

But whereas I would just leave at that, Dave does something constructive and points to a potential solution—a corresponding increase of more thinsliced full-time roles like design engineering, front-end ops, and CSS engineering.

system.css | A design system for building retro Apple-inspired interfaces

A stylesheet for when you’re nostalgic for the old Mac OS.

The impact of removing jQuery on our web performance - Inside GOV.UK

Following on from that excellent blog post about removing jQuery from gov.uk, here are the performance improvements in charts and numbers.

It may sound like 32 kb of JavaScript is nothing on today’s modern web with quick devices and fast broadband connections. But for a certain cohort of users, it makes a big difference to how they experience GOV.UK.

Happiness Is Two Scales

The common way to talk about happiness is as a single scale: unhappy at one end, neutral in the middle, happy at the other end.

I think that model is wrong.

Instead, happiness and unhappiness are two separate, independent scales.

A Matter of Principle

This is an oldie from Julie Zhou, but it’s a timeless message about the value of good (i.e. actually useful) design principles.

See also what she said on this podcast episode:

When push comes to shove and you have to make a trade off, how are you, in those moments, as a team or a company going to prioritize? What are you going to care about the most? Good values will be controversial in that respect because it’s something that another company might have made a different decision than you.

Winnie Lim » on leading a purposeless life

💯

I think it is beautiful if people have a purpose. But it should be valid to lead a purposeless life too. … Maybe it is okay to not pursue potential and just be okay with being.

Color and Contrast.com

A lovely website (or web book?) dedicated entirely to colour contrast, complete with interactive illustrative widgets.

A comprehensive guide for exploring and learning about the theory, science, and perception of color and contrast.

The Real Novelty of the ARPANET

Setting the scene:

The Washington Hilton stands near the top of a small rise about a mile and a half northeast of the National Mall. Its two white-painted modern facades sweep out in broad semicircles like the wings of a bird. The New York Times, reporting on the hotel’s completion in 1965, remarked that the building looks “like a sea gull perched on a hilltop nest.”

The hotel hides its most famous feature below ground. Underneath the driveway roundabout is an enormous ovoid event space known as the International Ballroom, which was for many years the largest pillar-less ballroom in DC. In 1967, the Doors played a concert there. In 1968, Jimi Hendrix also played a concert there. In 1972, a somewhat more sedate act took over the ballroom to put on the inaugural International Conference on Computing Communication, where a promising research project known as the ARPANET was demonstrated publicly for the first time.

It turns out that the most important innovation of the ARPANET isn’t obvious in hindsight:

So what I’m trying to drive home here is that there is an important distinction between statement A, “the ARPANET connected people in different locations via computers for the first time,” and statement B, “the ARPANET connected computer systems to each other for the first time.” That might seem like splitting hairs, but statement A elides some illuminating history in a way that statement B does not.

Balisage: Metaphors We Code By

My talk, Building, was about the metaphors we use to talk about the work we do on the web. So I’m interested in this analysis of the metaphors used to talk about markup:

• Data is documents, processing data is clerking
• Data is trees, processing data is forestry
• Data is buildings, processing data is construction
• Data is a place, processing data is a journey
• Data is a fluid, processing data is plumbing
• Data is a textile, processing data is weaving
• Data is music, processing data is performing

Baldur Bjarnason -

This is kind of brilliant:

Maybe what’s needed for websites and web apps is a kind of Prepper Web Dev?

How and why we removed jQuery from GOV.UK - Inside GOV.UK

This is a great thorough description of the process of migrating gov.uk away from jQuery. It sounds like this guide was instrumental in the process—I love that they’re sharing it openly!

Removing jQuery means that 32Kb of JavaScript has been removed from the majority of pages on GOV.UK. GOV.UK is already quite fast to load and for many users this will make no noticeable difference. However, the change for users on a low bandwidth connection or lower specification device will be much more noticeable, resulting in significantly improved page download speed and performance.

Let websites framebust out of native apps | Holovaty.com

Adrian brings an excellent historical perspective to the horrifying behaviour of Facebook’s in-app browsers:

Somewhere along the way, despite a reasonably strong anti-framing culture, framing moved from being a huge no-no to a huge shrug. In a web context, it’s maligned; in a native app context, it’s totally ignored.

Yup, frames are back—but this time they’re in native apps—with all their shocking security implications:

The more I think about it, the more I cannot believe webviews with unfettered JavaScript access to third-party websites ever became a legitimate, accepted technology. It’s bad for users, and it’s bad for websites.

By the way, this also explains that when you try browsing the web in an actual web browser on your mobile device, every second website shoves a banner in your face saying “download our app.” Browsers offer users some protection. In-app webviews offer users nothing but exploitation.

This is what you’re nostalgic for - The History of the Web

❤️

I believe we aren’t nostalgic for the technology, or the aesthetic, or even the open web ethos. What we’re nostalgic for is a time when outsiders were given a chance to do something fun, off to the side and left alone, because mainstream culture had no idea what the hell to do with this thing that was right in front of it.

I’m speaking at a couple of upcoming events (Interconnected)

Matt shares some details on what he’ll be speaking about at dConstruct:

I’m going to talk generally around tools for togetherness which is my new framing for my long-running territory of general curiosity: how can we be together online, what we can do there, what it does to us, what are the design considerations, etc.

Get your ticket if you haven’t already!

I’m one of eight speakers – there’s a robotic artist, a neuroscientist, and a calligrapher. It should be an excellent day.

Douglas Engelbart | Hidden Heroes

An account of the mother of all demos, written by Steven Johnson.

Open sourcing the Product Planning Prompt Pack

This is very generous of Anna! She has a deck of cards with questions she asks in product planning meetings. You can download the pack for free.

It’s Time to Build a Progressive Web App. Here’s How – The New Stack

Much as I appreciate the optimism of this evaluation, I don’t hold out much hope that people’s expectations are going to change any time soon:

Indeed, when given a choice, users will opt for the [native] app version of a platform because it’s been considered the gold standard for reliability. With progressive web apps (PWAs), that assumption is about to change.

Nonetheless, this is a level-headed look at what a progressive web app is, mercifully free of hand-waving:

• App is served through HTTPS.
• App has a web app manifest with at least one icon. (We’ll talk more about the manifest shortly.)
• App has a registered service worker with a fetch event handler. (More on this later too.)

Design Engineer / Front-end Developer | Clearleft

Are you a web dev that’s into progressive enhancement, accessibility, design systems, and all that good stuff?

You should come and work with me at Clearleft.

Just hit publish | Marco Heine - Freelance Web Developer

I have days were I can write a well researched blog post in a few hours. And I have days were I don’t feel like writing. Or I want to add one more thing but don’t know how to speak my mind. So this is a reminder to myself: just hit publish.