Link archive: June, 2020

Weird Wide Webring

More of the whimsical web!

The Whimsical Web

A collection of truly personal sites.

This site is meant to showcase how a more personal web could look like, and hopefully give you some inspiration to make your own corner of the web a bit weirder.

Of course Cassie’s site is included!

The Gentle Sadness of Things

There is a gentle sadness to being present in a moment so precious that you know you’ll never forget it, and will revisit it as a memory time and time again. It will be a shadow, many details missing, the moment bittersweet.

Takin’ five. — Ethan Marcotte

I linked to the first of Ethan’s short videos on accessibility last week, but it’s well worth checking out all five:

1. Introduction to using VoiceOver on macOS
2. Designing beautiful focus states
3. Flexible and accessible typesetting
4. Responsively designing with viewport units
5. Designing beautiful and accessible drop caps

Grid Cheatsheet

A useful resource for CSS grid. It’s basically the spec annoted with interactive examples.

Why BaseCamp & Hey.com are Wrong About the Apple App Store

I feel for BaseCamp, I do. But give up on the native app path. Make sure your existing web interface is a good progressive web app and you can end-run around Apple.

We Are As Gods

A forthcoming documentary about Stewart Brand (with music by Brian Eno).

Top 10 books about remaking the future | Peter F Hamilton | Books | The Guardian

Here then are 10 stories of remaking the future that contain hope — or at least stability.

1. The City and the Stars by Arthur C Clarke
2. The First Fifteen Lives of Harry August by Claire North
3. Revenger by Alastair Reynolds
4. Children of Time by Adrian Tchaikovsky
5. Do You Dream of Terra-Two? by Temi Oh
6. Consider Phlebas by Iain M Banks
7. Natural History by Justina Robson
8. Ancillary Justice by Ann Leckie
9. Way Station by Clifford D Simak
10. News from Gardenia by Robert Llewellyn

Cassie Evans’s Blog

Cassie’s redesign is gorgeous—so much attention to detail! (And performant too)

On dependency | RobWeychert.com V7

I’m very selective about how I depend on other people’s work in my personal projects. Here are the factors I consider when evaluating dependencies.

• Complexity How complex is it, who absorbs the cost of that complexity, and is that acceptable?
• Comprehensibility Do I understand how it works, and if not, does that matter?
• Reliability How consistently and for how long can I expect it to work?

I really like Rob’s approach to choosing a particular kind of dependency when working on the web:

When I’m making things, that’s how I prefer to depend on others and have them depend on me: by sharing strong, simple ideas as a collective, and recombining them in novel ways with rigorous specificity as individuals.

Accessible to some - Manuel Matuzović

A score of 100 in Lighthouse or 0 errors in axe doesn’t mean that you’re done, it means that you’re ready to start manual testing and testing with real users, if possible.

CSS folded poster effect

This is a very nifty use of CSS gradients!

Introduction to Screen Readers Using Voiceover | Gymnasium

This is a great short introduction to using VoiceOver with Safari by the one and only Ethan Marcotte.

Always bet on HTML | Go Make Things

I teach JS for a living. I’m obviously not saying “never use of JS” or “JavaScript has no place on the web.” Hell, their are even times where building a JS-first app makes sense.

But if I were going to bet on a web technology, it’s HTML. Always bet on HTML.

The Return of the 90s Web | Max Böck

Everything old is new again (thank goodness!):

• Serverside Rendering
• No-Code Tools
• Personal Websites
• Curated Feeds and Discovery
• Smaller Communities and Web Monetization

Quotebacks and hypertexts (Interconnected)

What I love about the web is that it’s a hypertext. (Though in recent years it has mostly been used as a janky app delivery platform.)

I am very much enjoying Matt’s thoughts on linking, quoting, transclusion, and associative trails.

My blog is my laboratory workbench where I go through the ideas and paragraphs I’ve picked up along my way, and I twist them and turn them and I see if they fit together. I do that by narrating my way between them. And if they do fit, I try to add another piece, and then another. Writing a post is a process of experimental construction.

And then I follow the trail, and see where it takes me.

Where did the focus go? | Amber’s Website

Amber documents a very handy bit of DOM scripting when it comes to debugging focus management: document.activeElement.

There Has Never Been a Better Time to Read Ursula Le Guin’s “Earthsea” Books - Electric Literature

Well, this is timely! Cassie mentioned recently that she was reading—and enjoying—the Earthsea books, which I had never got around to reading. So I’m reading them now. Then Craig mentioned in one of his newsletters that he’s also reading them. Now there’s this article…

To white protestors and accomplices, who say that they want to listen but are fearful of giving up some power so that we can all heal, I suggest you read the Earthsea cycle. You will need to learn to step away from the center to build a new world, and the Black majority in this fantasy series offers a better model than any white history.

Pandemic Time: A Distributed Doomsday Clock - NOEMA

A meditative essay on the nature of time.

The simultaneous dimming of Betelgeuse and the global emergence of COVID-19 were curiously rhyming phenomena: disruptions of familiar, reassuring rhythms, both with latent apocalyptic potential.

Time and distance are out of place here.

We will have left a world governed by Chronos, the Greek god of linear, global, objective time measured by clocks, and arrived into a world governed by Kairos, the Greek god of nonlinear, local, subjective time, measured by the ebb and flow of local patterns of risk and opportunity. The Virus Quadrille is not just the concluding act of pandemic time but the opening act of an entire extended future.

Notifier — Convert content sources to RSS feeds

A service that—amongst other things—allows you to read newsletters in your RSS reader.

Igalia Chats: Web Ecosystem Health with Jeremy Keith and Stuart Landridge

Myself and Stuart had a chat with Brian about browser engine diversity.

Here’s the audio file if you’d like to huffduff it.

NASA Collection

Back in 1985, Ian wrote to NASA to get some info for a shool project (that’s how it worked before the World Wide Web). NASA sent him a treaure trove in response. Here they are, scanned as PDFs. Mercury, Gemini, Apollo, the Space Shuttle, and more.

Striking a Balance Between Native and Custom Select Elements | CSS-Tricks

I think this a solution worthy of Solomon. In this case, the Gordian knot is the select element and its inevitable recreation in order to style it.

What if we instead deliver a native select by default and replace it with a more aesthetically pleasing one if possible? That’s where the “hybrid” select idea comes into action. It’s “hybrid” because it consists of two selects, showing the appropriate one at the right moment:

• A native select, visible and accessible by default
• A custom select, hidden until it’s safe to be interacted with a mouse

The implementation uses a genius combination of a hover media query and an adjacent sibling selector in CSS. It has been tested on a number of device/platform/browser combinations but more tests are welcome!

What I love about this solution is that it satisfies the stakeholders insisting on a custom component but doesn’t abandon all the built-in accessibility that you get from native form controls.

CSS Custom Properties Fail Without Fallback · Matthias Ott – User Experience Designer

Matthias has a good solution for dealing with the behaviour of CSS custom properties I wrote about: first set your custom properties with the fallback and then use feature queries (@supports) to override those values.

Quotebacks

This looks like a nifty tool for blogs:

Quotebacks is a tool that makes it easy to grab snippets of text from around the web and convert them into embeddable blockquote web components.

What was it like? (Phil Gyford’s website)

Congratulations and kudos to Phil for twenty years of blogging!

Here he describes what it was like online in the year 2000. Yes, it was very different to today, but…

Anyone who thinks blogging died at some point in the past twenty years presumably just lost interest themselves, because there have always been plenty of blogs to read. Some slow down, some die, new ones appear. It’s as easy as it’s ever been to write and read blogs.

Though Phil does note:

Some of the posts I read were very personal in a way that’s less common now, in general. … Even “personal” websites (like mine) often have an awareness about them, about what’s being shared, the impression it gives to strangers, presenting a public face, maybe a feeling of, “I’m just writing personal nonsense but, why, yes, I am available for hire”.

Maybe that’s why I’m enjoying Robin’s writing so much.

Robin Rendle ･ 2D Websites

When I log onto someone’s website I want them to tell me why they’re weird. Where’s the journal or scrapbook? Where’s your stamp collection? Or the works-in-progress, the failed attempts, the clunky unfinished things?

HTML Tutorial for Beginners 101 (Including HTML5 Tags) - WebsiteSetup

A really great one-page guide to HTML from Bruce. I like his performance-focused intro:

If your site is based on good HTML, it will load fast. Browsers incrementally render HTML—that is, they will display a partially downloaded web page to the user while the browser awaits the remaining files from the server.

Modern fashionable development techniques, such as React, require a lot of JavaScript to be sent to the user. When it’s all downloaded, the user’s device must parse and execute the JavaScript before it can even start to construct the page. On a slow network, or on a cheaper, low-powered device, this can result in an excruciatingly slow load and is a heavy drain on the battery.

The City — Lori Nix / Kathleen Gerber

Tiny ruins.

A Rare Smile Captured in a 19th Century Photograph | Open Culture

I wrote a while back about one of my favourite photographs but this might just give it a run for its money.

It was only near the end of the 19th century that shutter speeds improved, as did emulsions, meaning that spontaneous moments could be captured. Still, smiling was not part of many cultures. It could be seen as unseemly or undignified, and many people rarely sat for photos anyway.

“Confessions of a Shinagawa Monkey,” by Haruki Murakami | The New Yorker

It’s just about an old monkey who speaks human language, who scrubs guests’ backs in the hot springs in a tiny town in Gunma Prefecture, who enjoys cold beer, falls in love with human women, and steals their names.

A sequel to 2006’s A Shinagawa Monkey, translated by Philip Gabriel.

Optimizing keyboard navigation using tabindex and ARIA — Sara Soueidan

Smart thinking from Sara to improve usability for keyboard users by using aria-hidden="true" tabindex="-1" to skip duplicate links:

A good rule of thumb for similar cases is that if you have multiple consecutive links to the same page, there is probably a chance to improve keyboard navigation by skipping some of those links to reduce the number of tab stops to one. The less tab stops, the better, as long as it does not worsen or compromise on other aspects of usability.

I’ve cautiously implemented this pattern now over on The Session where snippets of comments had both a title link and a “more” link going to the same destination.

Easily rename your Git default branch from master to main - Scott Hanselman

Nice and straightforward. Locally:

git branch -m master main git push -u origin main

Then on the server:

git branch -m master main git branch -u origin/main

On github.com, go into the repo’s settings and update the default branch.

Thanks for this, Scott!

P.S. Don’t read the comments.

There’s a voice inside your head that prevents you from sharing ideas—punch it in the face. - Airbag Industries

When I challenge the idea of topics—especially when I suggest writing about a design topic—the “I don’t know what to write about” excuse goes to level two: Someone has already written about [design topic]. And that might be true, but by Great Gutenberg’s Ghost, if that was a hard requirement for publishing, we’d have one newspaper, a few magazines, and maybe a thousand books. Hollywood would be a ghost town because we got to the end of all of the movie tropes by 1989. We’d have seventy-five songs with lyrics, but re-recorded in every music style and everyone would still hate Yanni. The point is you can’t let the people who have come before you be the excuse to stop you from writing or, frankly, creating.

Hybrid positioning with CSS variables and max() – Lea Verou

Yet another clever technique from Lea. But I’m also bookmarking this one because of something she points out about custom properties:

The browser doesn’t know if your property value is valid until the variable is resolved, and by then it has already processed the cascade and has thrown away any potential fallbacks.

That explains an issue I was seeing recently! I couldn’t understand why an older browser wasn’t getting the fallback I had declared earlier in the CSS. Turns out that custom properties mess with that expectation.

marcus.io · Making RSS more visible again with a /feeds page

Personal website owners – what do you think about collecting all of the feeds you are producing in one way or the other on a /feeds page?

Sounds like a good idea! I’ll get on that.

Global and Component Style Settings with CSS Variables — Sara Soueidan

Sara shares how she programmes with custom properties in CSS. It sounds like her sensible approach aligns quite nicely with Andy’s CUBE CSS methodology.

Oh, and she’s using Fractal to organise her components:

I’ve been using Fractal for a couple of years now. I chose it over other pattern library tools because it fit my needs perfectly — I wanted a tool that was unopinionated and flexible enough to allow me to set up and structure my project the way I wanted to. Fractal fit the description perfectly because it is agnostic as to the way I develop or the tools I use.

The Curse of Knowledge · Matthias Ott – User Experience Designer

A great explanation of the curse of knowledge …with science!

(This, by the way, is the first of 100 blog posts that Matthias is writing in 100 days.)

The Need for Speed, 23 Years Later

If you’re in a group of people being chased by a bear, you only need to be faster than the slowest person in the group. But that’s not how websites work: being faster than at least one other website, or even faster than the ‘average’ website, is not a great achievement when the average website speed is frustratingly slow.

Sass Color Functions in CSS | Jim Nielsen’s Weblog

I’m not the only one swapping out Sass with CSS for colour functions:

Because of the declarative nature of CSS, you’re never going to get something as terse as what you could get in Sass. So sure, you’re typing more characters. But you know what you’re not doing? Wrangling build plugins and updating dependencies to get Sass to build. What you write gets shipped directly to the browser and works as-is, now and for eternity. It’s hard to say that about your Sass code.