Link archive: March, 2020

This Is Not the Apocalypse You Were Looking For | WIRED

I just love the way that Laurie Penny writes.

In the end, it will not be butchery. Instead it will be bakery, as everyone has apparently decided that the best thing to do when the world lurches sideways is learn to make bread. Yeast is gone from the shops. Even I have been acting out in the kitchen, although my baked goods are legendarily dreadful. A friend and former roommate, who knows me well, called from Berlin to ask if I had “made the terrible, horrible biscuits yet.” These misfortune cookies tend to happen at moments of such extreme stress that those around me feel obliged to eat them. They say that if you can make a cake, you can make a bomb; if the whole thing implodes, my job will not be in munitions.

Brighton Quarantine Delivery

Fellow Brightonians, here’s a handy one-stop shop for all the places doing deliveries right now, generated from this spreadsheet by Chris Boakes.

HTML DOM - Common tasks of managing HTML DOM with vanilla JavaScript

This is a great way to organise code snippets—listed by use case, and searchable too!

Next time you’re stuck on some DOM scripting, before reaching for a framework or library, check here first.

Hobbies for the hell of it | Brad Frost

We should celebrate our hobbies for the joy-giving activities they are, and recognize that they don’t need to become anything bigger than that. And of course that’s not to say they those hobbies can’t turn into something bigger — it’s incredible when your passions and your occupation overlap — but it should be because you want to rather than that you feel pressured to. Not every activity you do needs to become a big official thing.

To-Do Terrarium

I love this little to-do app! Every time you tick something off your list, something grows in your virtual terrarium. Lovely!

Prioritising Requirements | Trys Mudford

Over the past few years, I’ve given quite a few workshops and talks on evaluating technology. This methodical approach to evaluation and prioritisation from Trys is right up my alley!

In any development project, there is a point at which one must decide on the tech stack. For some, that may feel like a foregone conclusion, dictated by team appetite and experience.

Even if the decision seems obvious, it’s always worth sense-checking your thought process. Along with experience and gut-feelings, we also have blind-spots and biases.

I feel like there’s a connection here to having good design principles—the kind that explicitly value one facet over another.

So no one told us the internet was gonna be this way | The Outline

An interview with Joanne McNeil about her new book, Lurking:

Someone who was creating, say, a small decentralized community for a specific group of people would not have luck finding investors, as opposed to Facebook, which sought to build a platform for all.

‘Sfunny, when I was on Quarantine Book Club the other day, this is exactly what I talked about one point—how Facebook (and venture capital) moved the goalposts on what constitutes success and failure on the web.

Twilight Sleep (Or: The Lies We’ll Tell Our Children) – Miscelanea

I think this is beautiful.

Let a website be a worry stone

I find myself thinking about writing more than usual at the moment. This is partially because I am inspired by more people sharing their own thoughts and stories, but also because I want to record how I’m feeling, and what’s happening on a day-to-day basis.

Let a website be a worry stone. — Ethan Marcotte

It was a few years before I realized that worry stones had a name, that they were borrowed from cultures other and older than mine. Heck, it’s been more than a few years since I’ve even held one. But in the last few weeks, before and after launching the redesign, I’ve kept working away at this website, much as I’d distractedly run my fingers over a smooth, flat stone.

CSS Can Influence Screenreaders | Ben Myers

This surprises me. But forewarned is forearmed.

Charlie Walton - Charlie Walton’s Blog

This is my favourite website now.

I Don’t Care What Google or Apple or Whomever Did | Adrian Roselli

Cargo cultism is not a strategy:

Apple and Google get it wrong just as often as the rest of us.

BBC - Future Media Standards & Guidelines - Accessibility Guidelines v2.0

A timely reminder:

The minimum dependency for a web site should be an internet connection and the ability to parse HTML.

Scatternotes - QuirksBlog

Jeremy is right. Writing helps. I feel better already.

See?

Laura Kalbag – How to read RSS in 2020

RSS: now more than ever!

You get to choose what you subscribe to in your feed reader, and the order in which the posts show up. You might prefer to read the oldest posts first, or the newest. You might group your feeds by topic or another priority. You are not subjected to the “algorithmic feed” of Facebook, Twitter, Instagram, YouTube, where they choose the order for you.

Quarantine Book Club

Join your favorite authors on Zoom where you can have spirited discussions from the privacy of our own quarantined space!

A great initiative from the folks at Mule Design. As well as chatting to talented authors, you can also chat to me: this Thursday at 4pm UTC I’ll be discussing Resilient Web Design.

Workshop Countdown Clock

Here’s a nifty little progressive web app that Trys whipped up so that Clearlefties running workshops remotely still get to have their beloved countdown clock.

Through a design system, darkly. — Ethan Marcotte

1. Design systems haven’t “solved” inconsistency. Rather, they’ve shifted how and when it manifests.
2. Many design systems have introduced another, deeper issue: a problem of visibility.

Ethan makes the case that it’s time we stopped taking a pattern-led approach to design systems and start taking a process-led approach. I agree. I think there’s often more emphasis on the “design” than the “system”.

“Making Design Systems Public,” an article from SuperFriendly

Is making your design system public worth the effort? In short: yes, it is.

I agree with Dan. But I wish that more people would make their design system mistakes and misteps public, like Robin talked about.

Maintaining Performance - daverupert.com

In my experience, 99% of the time Web Performance boils down to two problems:

1. “You wrote too much JavaScript.”
2. “You have unoptimized images.”

But as Dave points out, the real issue is this:

I find that Web Performance isn’t particularly difficult once you understand the levers you can pull; reduce kilobytes, reduce requests, unblock rendering, defer scripts. But maintaining performance that’s a different story entirely…

Free Movie of the Week

While we’re all confined to quarters during The Situation, Gary Hustwit is offering one of his films for free every week. The fantastic Helvetica is just about to finish its run, but every one of Gary’s films is worth watching (and rewatching): Helvetica, Objectified, Urbanized, and Rams.

Filmmaker Gary Hustwit is streaming his documentaries free worldwide during the global COVID crisis. Each week we’ll be posting another film here. We hope you enjoy them, and please stay strong.

Accessible HTML Elements | Amber’s Website

Amber runs through some HTML elements that help you provide semantic information—and accessibility—for your website: headings, paragraphs, lists, and more:

You may be aware that ARIA roles are often used with HTML elements. I haven’t written about them here, as it’s good to see how HTML written without ARIA can still be accessible.

Get Static – Eric’s Archived Thoughts

Performance matters …especially when the chips are down:

If you are in charge of a web site that provides even slightly important information, or important services, it’s time to get static. I’m thinking here of sites for places like health departments (and pretty much all government services), hospitals and clinics, utility services, food delivery and ordering, and I’m sure there are more that haven’t occurred to me. As much as you possibly can, get it down to static HTML and CSS and maybe a tiny bit of enhancing JS, and pare away every byte you can.

Inclusive Inputs « Texte | ovl – code & design

This is a great walkthough of making a common form pattern accessible. No complex code here: some HTML is all that’s needed.

Lea Verou on Twitter

Now that all modern browsers support SVG favicons, here’s how to turn any emoji into a favicon.svg:

<svg xmlns="http://w3.org/2000/svg" viewBox="0 0 100 100"> <text y=".9em" font-size="90"> 💩 </text> </svg>

Useful for quick apps when you can’t be bothered to design a favicon!

Is Me Cavechild Getting Too Much Pictogram-Time? - McSweeney’s Internet Tendency

Sometimes me think me should just tear bull pictogram down. Can bull pictogram really be worth it? Sure, pictogram help advance caveculture and foster writing system. But what good that stuff if whole cave society is just bunch of brainwashed bull-pictogram-watchers? You know what Aiden say yesterday? When he grow up, he want be bull-pictogram-painter! That not real job! Real job hunter! Or at least gatherer! How many bull-pictogram-painters world need?

What Does `playsinline` Mean in Web Video? | CSS-Tricks

I have to admit, I don’t think I even knew of the existence of the playsinline attribute on the video element. Here, Chris runs through all the attributes you can put in there.

Cameron Moll | Don’t call it a comeback. I been here for years.

Cameron’s blog is back, and very nicely redesigned/aligned it is too!

Scripts: async, defer

I’m constantly forgetting the difference between the async attribute and the defer attribute on script elements—this is a handy explanation.

Twitter thread as blog post: Thoughts on how we write CSS | Lara Schenck

CSS only truly exists in a browser. As soon as we start writing CSS outside of the browser, we rely on guesses and memorization and an intimate understanding of the rules. A text editor will never be able to provide as much information as a browser can.

Rise of the Digital Fonts

A history of typesetting from movable type to variable fonts.

Pure CSS Landscape - An Evening in Southwold

This is not an image format. This is made of empty elements styled with CSS. (See for yourself by changing the colour value of the sun.)

Networked information services: The world-wide web [PDF]

A 1992 paper by Tim Berners-Lee, Robert Cailliau, and Jean-Françoise Groff.

The W3 project is not a research project, but a practical plan to implement a global information system.

The History of the URL

This is a wonderful deep dive into all the parts of a URL:

scheme:[//[user:password@]host[:port]][/]path[?query][#fragment]

There’s a lot of great DNS stuff about the host part:

Root DNS servers operate in safes, inside locked cages. A clock sits on the safe to ensure the camera feed hasn’t been looped. Particularily given how slow DNSSEC implementation has been, an attack on one of those servers could allow an attacker to redirect all of the Internet traffic for a portion of Internet users. This, of course, makes for the most fantastic heist movie to have never been made.

Why is CSS frustrating? ･ Robin Rendle

CSS is frustrating because you have to actually think of a website like a website and not an app. That mental model is what everyone finds so viscerally upsetting. And so engineers do what feels best to them; they try to make websites work like apps, like desktop software designed in the early naughts. Something that can be controlled.

Overcoming my panic towards accessibility | Zell Liew

This is very open and honest. Thank you for writing it, Zell.

How big tech hijacked its sharpest, funniest critics - MIT Technology Review

How design fiction was co-opted. A piece by Tim Maughan with soundbites from Julian Bleecker, Anab Jain, and Scott Smith.

BBC World Service - 13 Minutes to the Moon, Season 2: The Apollo 13 story

The best podcast of last year is back for another season, this time on the Apollo 13 mission.

FontGoggles — Interactive Previewing and Comparing

A really nice open-source font-previewing tool for the Mac.

The 3 Laws of Serverless - Burke Holland

“Serverless”, is a buzzword. We can’t seem to agree on what it actaully means, so it ends up meaning nothing at all. Much like “cloud” or “dynamic” or “synergy”. You just wait for the right time in a meeting to drop it, walk to the board and draw a Venn Diagram, and then just sit back and wait for your well-deserved promotion.

That’s very true, and I do not like the term “serverless” for the rather obvious reason that it’s all about servers (someone else’s servers, that is). But these three principles are handy for figuring out if you’re building with in a serverlessy kind of way:

1. You have no knowledge of the underlying system where your code runs.
2. Scaling is an intrinsic attribute of the technology; so much so that it just happens automatically.
3. You only pay for what you use.

Abstraction; scale; consumption.

A Guide to Handling Browser Events by Sarah Chima - Front-End Developer

This is a great step-by-step explanation of event handling in JavaScript!

Learn Box Alignment

A cute walkthrough for flexbox and grid.

Oh Hello Ana - IndieWebCamp London

Don’t forget—it’s IndieWebCamp London next weekend!

A Variable Fonts Primer

Everything you ever wanted to know about variable fonts, gathered together into one excellent website.

Getting your priorities right | Clearleft

A ludicrously useful grab-bag of prioritisation techniques from Chris—so, so handy for workshops and sprint planning.

Selectors Explained

I can see this coming in very handy at Codebar—pop any CSS selector in here and get a plain English explanation of what it’s doing.

Visitors, Developers, or Machines

Garrett’s observation is spot-on here:

I’ve been trying to understand the appeal of these frameworks by giving them an objective chance. I’ve expanded my knowledge of JavaScript and tried to give them the benefit of the doubt. They do have their places, but the only explanation I can come up with is that developers are taking a similar approach as Ruby and focusing on developer convenience and productivity. Only, instead of Ruby’s performance being tied to the CPU level, JavaScript frameworks push the performance burden to the client.

In both cases, the tradeoff happens in the name of developer happiness and productivity, but the strategies have entirely different consequences. With Ruby, the CPU is still (mostly) the responsibility of the development team, and it can be upgraded. With JavaScript, the page weight becomes an externality pushed onto visitors.

HTML: The Inaccessible Parts - daverupert.com

Well, this is a grim collection from Dave:

There are some cases where even using plain ol’ HTML causes accessibility problems. I get frustrated and want to quit web development whenever I read about these types of issues. Because if browsers can’t get this right, what hope is there for the rest of us.

It’s worth clicking through each link he lists—the situation is often much more nuanced than simply “Don’t use X.”

Point, don’t point — I love Typography

A brief history of the manicule, illustrated with some extreme examples.

17th Century Death Roulette ☠️

Spin the wheel: you’ll get a week and a death in 1665.

(Realistically, you probably would’ve died of plague, which outnumbers other causes of death by orders of magnitude.)