Archive: April, 2020

173

sparkline
                    5th                     10th                     15th                     20th                     25th                     30th
12am
4am  
8am                              
12pm                                            
4pm                                              
8pm            

Thursday, April 30th, 2020

‘The stakes feel higher but, with good practice, it need not be scary’ – NHS.UK design lead on responding to coronavirus | PublicTechnology.net

This isn’t the time to get precious about your favourite design and development tools. Use progressive enhancement as your philosophy. Your service might have to be accessed on old devices in hospitals with outdated tech or unsupported operating systems. HTML+CSS is your best bet to ensure that the service can be accessed in unlikely scenarios you’ve never even considered. Do you want to take that risk at a time like this? Nope, me neither.

Save the React squabbles for another time. Make it accessible and robust from day one.

Prioritizing users in a crisis: Building the California COVID-19 response site

This is a great case study of the excellent California COVID-19 response site. Accessibility and performance are the watchwords here.

Want to know their secret weapon?

A $20 device running Android 9, with no contract commitment has been one of the most useful and effective tools in our effort to be accessible.

Leaner, faster sites benefit everybody, but making sure your applications run smoothly on low-end hardware makes a massive difference for those users.

User agents

I was on the podcast A Question Of Code recently. It was fun! The podcast is aimed at people who are making a career change into web development, so it’s right up my alley.

I sometimes get asked about what a new starter should learn. On the podcast, I mentioned a post I wrote a while back with links to some great resources and tutorials. As I said then:

For web development, start with HTML, then CSS, then JavaScript (and don’t move on to JavaScript too quickly—really get to grips with HTML and CSS first).

That’s assuming you want to be a good well-rounded web developer. But it might be that you need to get a job as quickly as possible. In that case, my advice would be very different. I would advise you to learn React.

Believe me, I take no pleasure in giving that advice. But given the reality of what recruiters are looking for, knowing React is going to increase your chances of getting a job (something that’s reflected in the curricula of coding schools). And it’s always possible to work backwards from React to the more fundamental web technologies of HTML, CSS, and JavaScript. I hope.

Regardless of your initial route, what’s the next step? How do you go from starting out in web development to being a top-notch web developer?

I don’t consider myself to be a top-notch web developer (far from it), but I am very fortunate in that I’ve had the opportunity to work alongside some tippety-top-notch developers at ClearleftTrys, Cassie, Danielle, Mark, Graham, Charlotte, Andy, and Natalie.

They—and other top-notch developers I’m fortunate to know—have something in common. They prioritise users. Sure, they’ll all have their favourite technologies and specialised areas, but they don’t lose sight of who they’re building for.

When you think about it, there’s quite a power imbalance between users and developers on the web. Users can—ideally—choose which web browser to use, and maybe make some preference changes if they know where to look, but that’s about it. Developers dictate everything else—the technology that a website will use, the sheer amount of code shipped over the network to the user, whether the site will be built in a fragile or a resilient way. Users are dependent on developers, but developers don’t always act in the best interests of users. It’s a classic example of the principal-agent problem:

The principal–agent problem, in political science and economics (also known as agency dilemma or the agency problem) occurs when one person or entity (the “agent”), is able to make decisions and/or take actions on behalf of, or that impact, another person or entity: the “principal”. This dilemma exists in circumstances where agents are motivated to act in their own best interests, which are contrary to those of their principals, and is an example of moral hazard.

A top-notch developer never forgets that they are an agent, and that the user is the principal.

But is it realistic to expect web developers to be so focused on user needs? After all, there’s a whole separate field of user experience design that specialises in this focus. It hardly seems practical to suggest that a top-notch developer needs to first become a good UX designer. There’s already plenty to focus on when it comes to just the technology side of front-end development.

So maybe this is too simplistic a way of defining the principle-agent relationship between users and developers:

user :: developer

There’s something that sits in between, mediating that relationship. It’s a piece of software that in the world of web standards is even referred to as a “user agent”: the web browser.

user :: web browser :: developer

So if making the leap to understanding users seems too much of a stretch, there’s an intermediate step. Get to know how web browsers work. As a web developer, if you know what web browsers “like” and “dislike”, you’re well on the way to making great user experiences. If you understand the pain points for browser when they’re parsing and rendering your code, you’ve got a pretty good proxy for understanding the pain points that your users are experiencing.

Interactive Elements: A Strange Game

Just today I was discussing with Trys and Cassie why developers tend to create bespoke JavaScript-driven components rather than using the elements that browsers give us for free. It all comes down to the ability to style the user interface.

Here, Brian proposes a kind of minimum viable web component that handles logic like keyboard control and accessibility, but leaves the styling practically untouched. Check out his panel-set demo of a tabbed interface.

I really, really like the way that it wraps existing content. If the web component fails for any reason, the content is still available. So the web component is a progressive enhancement:

An experimental custom element that wraps plain-old HTML (view the source) and decorates function, keyboard handling, accessibility information.

Et In Silicon Valley Ego – Dr Beth Singler

The parallels between Alex Garland’s Devs and Tom Stoppard’s Arcadia.

Dams Public Website

I had the great pleasure of visiting the Museum Plantin-Moretus in Antwerp last October. Their vast collection of woodblocks are available to dowload in high resolution (and they’re in the public domain).

14,000 examples of true craftmanship, drawings masterly cut in wood. We are supplying this impressive collection of woodcuts in high resolution. Feel free to browse as long as you like, get inspired and use your creativity.

Wednesday, April 29th, 2020

Replying to a tweet from @sil

’Twas indeed a bug! (I need to sanitise my webmentions better) Fixed! Thanks for the heads-up.

Tuesday, April 28th, 2020

Modified machete

The Rise Of Skywalker arrives on Disney Plus on the fourth of May (a date often referred to as Star Wars Day, even though May 25th is and always will be the real Star Wars Day). Time to begin a Star Wars movie marathon. But in which order?

Back when there were a mere two trilogies, this was already a vexing problem if someone were watching the films for the first time. You could watch the six films in episode order:

  1. The Phantom Menace
  2. Attack Of The Clones
  3. Revenge Of The Sith
  4. A New Hope
  5. The Empire Strikes Back
  6. The Return Of The Jedi

But then you’re spoiling the grand reveal in episode five.

Alright then, how about release order?

  1. A New Hope
  2. The Empire Strikes Back
  3. Return Of The Jedi
  4. The Phantom Menace
  5. Attack Of The Clones
  6. Revenge Of The Sith

But then you’re front-loading the big pay-off, and you’re finishing with a big set-up.

This conundrum was solved with the machete order. It suggests omitting The Phantom Menace, not because it’s crap, but because nothing happens in it that isn’t covered in the first five minutes of Attack Of The Clones. The machete order is:

  1. A New Hope
  2. The Empire Strikes Back
  3. Attack Of The Clones
  4. Revenge Of The Sith
  5. Return Of The Jedi

It’s kind of brilliant. You get to keep the big reveal in The Empire Strikes Back, and then through flashback, you see how this came to be. Best of all, the pay-off in Return Of The Jedi has even more resonance because you’ve just seen Anakin’s downfall in Revenge Of The Sith.

With the release of the new sequel trilogy, an adjusted machete order is a pretty straightforward way to see the whole saga:

  1. A New Hope
  2. The Empire Strikes Back
  3. The Phantom Menace (optional)
  4. Attack Of The Clones
  5. Revenge Of The Sith
  6. Return Of The Jedi
  7. The Force Awakens
  8. The Last Jedi
  9. The Rise Of Skywalker

Done. But …what if you want to include the standalone films too?

If you slot them in in release order, they break up the flow:

  1. A New Hope
  2. The Empire Strikes Back
  3. The Phantom Menace (optional)
  4. Attack Of The Clones
  5. Revenge Of The Sith
  6. Return Of The Jedi
  7. The Force Awakens
  8. Rogue One
  9. The Last Jedi
  10. Solo
  11. The Rise Of Skywalker

I’m planning to watch all eleven films. This was my initial plan:

  1. Rogue One
  2. A New Hope
  3. The Empire Strikes Back
  4. The Phantom Menace
  5. Attack Of The Clones
  6. Revenge Of The Sith
  7. Solo
  8. Return Of The Jedi
  9. The Force Awakens
  10. The Last Jedi
  11. The Rise Of Skywalker

I definitely want to have Rogue One lead straight into A New Hope. The problem is where to put Solo. I don’t want to interrupt the Sith/Jedi setup/payoff.

So here’s my current plan, which I have already begun:

  1. Solo
  2. Rogue One
  3. A New Hope
  4. The Empire Strikes Back
  5. The Phantom Menace
  6. Attack Of The Clones
  7. Revenge Of The Sith
  8. Return Of The Jedi
  9. The Force Awakens
  10. The Last Jedi
  11. The Rise Of Skywalker

This way, the two standalone films work as world-building for the saga and don’t interrupt the flow once the main story is underway.

I think this works pretty well. Neither Solo nor Rogue One require any prior knowledge to be enjoyed.

And just in case you’re thinking that perhaps I’m overthinking it a bit and maybe I’ve got too much time on my hands …the world has too much time on its hands right now! Thanks to The Situation, I can not only take the time to plan and execute the viewing order for a Star Wars movie marathon, I can feel good about it. Stay home, they said. Literally saving lives, they said. Happy to oblige!

Playing The Maple Leaf (reel) by Darach de Brun on mandolin:

https://thesession.org/tunes/1050

https://www.youtube.com/watch?v=OltYLEGaYM4

Replying to a tweet from @scottjehl

I don’t think that’s a universally understood definition.

The way I see the term used, this website would be an example of server-side rendering:

http://info.cern.ch/hypertext/WWW/TheProject.html

Replying to a tweet from @scottjehl

If you mean server-side rendering+rehydration, please say server-side rendering+rehydration.

The problems don’t come from the server-side rendering part; they come from the rehydration.

Web Typography News #43: Typesetting Moby-Dick, part 2

Great typography on the web should be designed in layers. The web is an imperfect medium, consumed by countless different devices over untold numbers of network connections—each with their own capabilities, limitations, and peculiarities. To think that you can create one solution that will look and work the same everywhere is a fantasy. To make this more than just one nice book website, the whole project and process needs to embrace this reality.

Replying to a tweet from @pixelsnader

More and more live sites seem to be built with a prototyping mindset. Weighty JavaScript frameworks are used regardless of appropriateness.

https://adactio.com/journal/14562

Replying to a tweet from @yoavweiss

There’s a fine line between “public discussion” and “public discussion between employees of the company making that one engine”. 😉

What is a resilient website? (with Jeremy Keith) | A Question of Code

I really enjoyed having a chat with Ed and Tom on their podcast. It’s aimed at people making a career shift into web development, but that didn’t stop me banging on about my usual hobby horses: progressive enhancement, resilient web design, and all that jazz.

Available for your huffduffing pleasure.

Design Can Change the World - But It’s Up to Us to Make it So by Daniel Burka

There is a huge world out there where design isn’t embraced, where designers are clawing for resources, and where design isn’t prioritized. Most of the organizations that are changing your world don’t know much about design, aren’t looking for designers, and won’t even understand what designers are talking about when they show up at the front door.

Principles and priorities | Hacker News

I see that someone dropped one of my grenades into the toilet bowl of Hacker News.

Replying to a tweet from @yoavweiss

There’s a fine line between “adoption in one engine” and “one engine making shit up”.

Late weeknotes 024 - Attitude of Ingratitude

This might be the most insightful thing that Dan has written since his seminal 2013 Medium article:

The problem with Scrappy Doo, isn’t that he’s annoying, which he is, but that the ghosts suddenly became real, which is an afront to science.

I know this hot-take is about 40 years old, but I’ve been bottling it up.

Replying to a tweet from @dracos

Thanks for writing that up, Matthew—I should update this blog post to add a link to it: https://adactio.com/journal/16797

Monday, April 27th, 2020

Replying to a tweet from @simonw

You get me.

Playing The Hag With The Money (jig) on bouzouki:

https://thesession.org/tunes/351

https://www.youtube.com/watch?v=oToLey7mZhw

Principles and priorities

I think about design principles a lot. I’m such a nerd for design principles, I even have a collection. I’m not saying all of the design principles in the collection are good—far from it! I collect them without judgement.

As for what makes a good design principle, I’ve written about that before. One aspect that everyone seems to agree on is that a design principle shouldn’t be an obvious truism. Take this as an example:

Make it usable.

Who’s going to disagree with that? It’s so agreeable that it’s practically worthless as a design principle. But now take this statement:

Usability is more important than profitability.

Ooh, now we’re talking! That’s controversial. That’s bound to surface some disagreement, which is a good thing. It’s now passing the reversability test—it’s not hard to imagine an endeavour driven by the opposite:

Profitability is more important than usability.

In either formulation, what makes these statements better than the bland toothless agreeable statements—“Usability is good!”, “Profitability is good!”—is that they introduce the element of prioritisation.

I like design principles that can be formulated as:

X, even over Y.

It’s not saying that Y is unimportant, just that X is more important:

Usability, even over profitability.

Or:

Profitability, even over usability.

Design principles formulated this way help to crystalise priorities. Chris has written about the importance of establishing—and revisiting—priorities on any project:

Prioritisation isn’t and shouldn’t be a one-off exercise. The changing needs of your customers, the business environment and new opportunities from technology mean prioritisation is best done as a regular activity.

I’ve said it many times, but one on my favourite design principles comes from the HTML design principles. The priority of consitituencies (it’s got “priorities” right there in the name!):

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.

Or put another way:

  • Users, even over authors.
  • Authors, even over implementors.
  • Implementors, even over specifiers.
  • Specifiers, even over theoretical purity.

When it comes to evaluating technology for the web, I think there are a number of factors at play.

First and foremost, there’s the end user. If a technology choice harms the end user, avoid it. I’m thinking here of the kind of performance tax that a user has to pay when developers choose to use megabytes of JavaScript.

Mind you, some technologies have no direct effect on the end user. When it comes to build tools, version control, toolchains …all the stuff that sits on your computer and never directly interacts with users. In that situation, the wants and needs of developers can absolutely take priority.

But as a general principle, I think this works:

User experience, even over developer experience.

Sadly, I think the current state of “modern” web development reverses that principle. Developer efficiency is prized above all else. Like I said, that would be absolutely fine if we’re talking about technologies that only developers are exposed to, but as soon as we’re talking about shipping those technologies over the network to end users, it’s negligent to continue to prioritise the developer experience.

I feel like personal websites are an exception here. What you do on your own website is completely up to you. But once you’re taking a paycheck to make websites that will be used by other people, it’s incumbent on you to realise that it’s not about you.

I’ve been talking about developers here, but this is something that applies just as much to designers. But I feel like designers go through that priority shift fairly early in their career. At the outset, they’re eager to make their mark and prove themselves. As they grow and realise that it’s not about them, they understand that the most appropriate solution for the user is what matters, even if that’s a “boring” tried-and-tested pattern that isn’t going to wow any fellow designers.

I’d like to think that developers would follow a similar progression, and I’m sure that some do. But I’ve seen many senior developers who have grown more enamoured with technologies instead of honing in on the most appropriate technology for end users. Maybe that’s because in many organisations, developers are positioned further away from the end users (whereas designers are ideally being confronted with their creations being used by actual people). If a lead developer is focused on the productivity, efficiency, and happiness of the dev team, it’s no wonder that their priorities end up overtaking the user experience.

I realise I’m talking in very binary terms here: developer experience versus user experience. I know it’s not always that simple. Other priorities also come into play, like business needs. Sometimes business needs are in direct conflict with user needs. If an online business makes its money through invasive tracking and surveillance, then there’s no point in having a design principle that claims to prioritise user needs above all else. That would be a hollow claim, and the design principle would become worthless.

Because that’s the point with design principles. They’re there to be used. They’re not a nice fluffy exercise in feeling good about your work. The priority of constituencies begins, “in case of conflict” and that’s exactly when a design principle matters—when it’s tested.

Suppose someone with a lot of clout in your organisation makes a decision, but that decision conflicts with your organisations’s design principles. Instead of having an opinion-based argument about who’s right or wrong, the previously agreed-upon design principles allow you to take ego out of the equation.

Prioritisation isn’t easy, and it gets harder the more factors come into play: user needs, business needs, technical constraints. But it’s worth investing the time to get agreement on the priority of your constituencies. And then formulate that agreement into design principles.

Gardened. — Ethan Marcotte

The cost of “modern” web development:

We’re dealing with the results of bad defaults, deployed at a terrible scale.

Frankly, it’s hard for me not to see this as a failure of governance. Our industry is, by and large, self-regulated. And right now, producing quality work relies on teams electing to adopt best practices.

Hard agree. Companies are prioritising speed of development over user experience. The tragic part is that those two things needn’t necessarily conflict …but in the most popular of today’s JavaScript frameworks, they very much do.

Looking at coronavirus.data.gov.uk - Matthew Somerville

I worry that more and more nowadays, people jump to JavaScript frameworks because that is what they know or have been taught, even though they are entirely inappropriate for a wide array of things and can often produce poor results.

Last week I wrote about the great work that Matthew did and now he’s written up his process:

The important thing is to have a resilient base layer of HTML and CSS, and then to enhance that with JavaScript.

Sunday, April 26th, 2020

Reading Helliconia Winter by Brian Aldiss.

Playing O’Connell’s Trip To Parliament (reel) on mandolin:

https://thesession.org/tunes/1443

https://www.youtube.com/watch?v=pi0_EVIU5JQ

The Stacks Reader | A Treasure Trove of Classic Journalism

Digital preservation of dead-tree media:

The Stacks Reader is an online collection of classic journalism and writing about the arts that would otherwise be lost to history. Motivated less by nostalgia than by preservation, The Stacks Reader is a living archive of memorable storytelling—a museum for stories.

Saturday, April 25th, 2020

Picture 1 Picture 2

🎶 Jamón, jamón, jamón—get through it! 🎶

Reading

At the beginning of the year, Remy wrote about extracting Goodreads metadata so he could create his end-of-year reading list. More recently, Mark Llobrera wrote about how he created a visualisation of his reading history. In his case, he’s using JSON to store the information.

This kind of JSON storage is exactly what Tom Critchlow proposes in his post, Library JSON - A Proposal for a Decentralized Goodreads:

Thinking through building some kind of “web of books” I realized that we could use something similar to RSS to build a kind of decentralized GoodReads powered by indie sites and an underlying easy to parse format.

His proposal looks kind of similar to what Mark came up with. There’s a title, an author, an image, and some kind of date for when you started and/or finished reading the book.

Matt then points out that RSS gets close to the data format being suggested and asks how about using RSS?:

Rather than inventing a new format, my suggestion is that this is RSS plus an extension to deal with books. This is analogous to how the podcast feeds are specified: they are RSS plus custom tags.

Like Matt, I’m in favour of re-using existing wheels rather than inventing new ones, mostly to avoid a 927 situation.

But all of these proposals—whether JSON or RSS—involve the creation of a separate file, and yet the information is originally published in HTML. Along the lines of Matt’s idea, I could imagine extending the h-entry collection of class names to allow for books (or films, or other media). It already handles images (with u-photo). I think the missing fields are the date-related ones: when you start and finish reading. Those fields are present in a different microformat, h-event in the form of dt-start and dt-end. Maybe they could be combined:


<article class="h-entry h-event h-review">
<h1 class="p-name p-item">Book title</h1>
<img class="u-photo" src="image.jpg" alt="Book cover.">
<p class="p-summary h-card">Book author</p>
<time class="dt-start" datetime="YYYY-MM-DD">Start date</time>
<time class="dt-end" datetime="YYYY-MM-DD">End date</time>
<div class="e-content">Remarks</div>
<data class="p-rating" value="5">★★★★★</data>
<time class="dt-published" datetime="YYYY-MM-DDThh:mm">Date of this post</time>
</article>

That markup is simultaneously a post (h-entry) and an event (h-event) and you can even throw in h-card for the book author (as well as h-review if you like to rate the books you read). It can be converted to RSS and also converted to .ics for calendars—those parsers are already out there. It’s ready for aggregation and it’s ready for visualisation.

I publish very minimal reading posts here on adactio.com. What little data is there isn’t very structured—I don’t even separate the book title from the author. But maybe I’ll have a little play around with turning these h-entries into combined h-entry/event posts.

Dark mode and variable fonts | CSS-Tricks

This is such a clever use of variable fonts!

We can use a lighter font weight to make the text easier to read whenever dark mode is active.

Friday, April 24th, 2020

Playing The Glen Of Aherlow (reel) on bouzouki:

https://thesession.org/tunes/496

https://www.youtube.com/watch?v=uzj5Hz4PKvs

Flowers in the meadow.

Flowers in the meadow.

Thursday, April 23rd, 2020

Replying to a tweet from @snookca

It’s soooo good! (and soooo easy!)

Lightweight

It’s been fascinating to see how television programmes have adapted to The Situation. It’s like there’s been a weird inversion with the YouTube asthetic. Instead of YouTubers doing their utmost to emulate the look of professional television, now everyone on professional television looks like a YouTuber.

No more lighting or audio technicians. No more studio audiences. Heck, no more studios.

There are some kinds of TV programmes that are showing the strain. A lot of comedy formats just fall flat without the usual production values. But a lot of programmes work just fine. In fact, some of them might be better. Watching Mary Beard present Front Row Late from her house is an absolute delight. It feels more direct and honest without the artiface of a television studio. It kind of makes you wonder whether expensive production costs are really necessary when what you really care about is the content.

All of this is one big belaboured metaphor for websites.

In times of crisis, informational websites sometimes offer a “lite” version. Max has even made an emergency website kit:

The site contains only the bare minimum - no webfonts, no tracking, no unnecessary images. The entire thing should fit in a single HTTP request. It’s basically just a small, ultra-lean blog focused on maximum resilience and accessibility. The Service Worker takes it a step further from there so if you’ve visited the site once, the information is still accessible even if you lose network coverage.

Eric emphasises the importance of performance in his post 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.

Tom Loosemore offers this advice to teams building new coronavirus services:

  1. Get a 4 year-old Android phone, and use it as your test/demo device.
  2. https://design-system.service.gov.uk is your friend.
  3. Full React isn’t your friend if it makes your service slow & inaccessible

Remember: This is for everyone.

Indeed, Gov.uk are usually a paragon of best practices in just about any situation. But they dropped the ball recently, as Matthew attests:

coronavirus.data.gov.uk is a static site, fetching and displaying remote data. It is also a 100% client-side JavaScript React site.

http://dracos.co.uk/made/coronavirus.data.gov.uk/ is 238K vs 770K (basics) on load. I’ve removed about 550K of JavaScript. It seems to work the same.

As Tom says:

One sign that your website isn’t meeting the needs of all your users is when Matthew Somerville gets sufficiently grumpy about it to do a proper version himself.

It’s true enough that Matthew excels at creating lightweight, accessible versions of services that are too bloated or buggy to use. His accessible Odeon project from back in the day is legendary. And I use his slimline version of the National Rail website all the time: traintimes.org.uk—it’s a terrificly performant progressive web app.

It’s thankless work though. It flies in the face of everything considered “modern” web development. (If you want to know the cost of “modern” framework-driven JavaScript-first web development, Tim has the numbers.) But Matthew is kind of a hero to me. I wish more developers would follow his example.

Maybe now, with this rush to make lightweight versions of valuable services, we might stop and reflect on whether we ever really needed all those added extras in the first place.

Hope springs eternal.

Update: Matthew has written about his process in Looking at coronavirus.data.gov.uk.

Picture 1 Picture 2

Snacking in the sun.

The Cost of Javascript Frameworks - Web Performance Consulting | TimKadlec.com

Excellent in-depth research by Tim on how the major frameworks affect performance. There are some surprising (and some unsurprising) findings in here.

I wish with all my heart that this data would have some effect but I fear there’s an entire culture of “modern” web development that stick its fingers in its ears and say “La, la, la, I can’t hear you.”

98.css - A design system for building faithful recreations of old UIs

Well, this is a fun bit of CSS. Instantly transform a web page into a blast from the past (1998, to be precise).

I’m very much looking forward to attending the (online) All Day Hey conference on May 7th—that’s quite a line-up for just £19:

https://alldayhey.com/

Better Image Optimization by Restricting the Color Index – Eric’s Archived Thoughts

A great little mini case-study from Eric—if you’re exporting transparent PNGs from a graphic design tool, double-check the colour-depth settings!

I’d been saving the PNGs with no bit depth restrictions, meaning the color table was holding space for 224 colors. That’s… a lot of colors, roughly 224 of which I wasn’t actually using.

Limiting input type=”color” to a certain palette (from an image) | Christian Heilmann

I never thought of combining the datalist element with input type="color"—it’s pretty cool that it just works!

Wednesday, April 22nd, 2020

Playing My Love Is In America (reel) on mandolin:

https://thesession.org/tunes/77

https://www.youtube.com/watch?v=wLgiOBlaW78

Tuesday, April 21st, 2020

Replying to a tweet from @instagramjones

Ooh, that’s a tough question! I don’t think I can answer it. They’re both excellent and thought-provoking—good book club material.

Monday, April 20th, 2020

Playing The Green Fields Of Rossbeigh (reel) on mandolin:

https://thesession.org/tunes/322

https://www.youtube.com/watch?v=d-3xE3AHO8U

Overlay gap

I think a lot about Danielle’s talk at Patterns Day last year.

Around about the six minute mark she starts talking about gaps and overlaps.

Gaps are where hidden complexity live. If we don’t have a category to cover it, in effect it becomes invisible. But that doesn’t mean it’s not there. Unidentified gaps cause inconsistency and confusion.

Overlaps occur when two separate categories encompass some of the same areas of responsibility. They cause conflict, duplication of effort, and unnecessary friction.

This is the bit I keep thinking about. It’s such an insightful lens to view things through. On just about any project, tensions are almost due to either gaps (“I thought someone else was doing that”) or overlaps (“Oh, you’re doing that? I thought we were doing that”).

When I was talking to Gerry on his new podcast recently, we were trying to figure out why web performance is in such a woeful state. I mused that there may be a gap. Perhaps designers think it’s a technical problem and developers think it’s a design problem. I guess you could try to bridge this gap by having someone whose job is to focus entirely on performance. But I suspect the better—but harder—solution is to create a shared culture of performance, of the kind Lara wrote about in her book:

Performance is truly everyone’s responsibility. Anyone who affects the user experience of a site has a relationship to how it performs. While it’s possible for you to single-handedly build and maintain an incredibly fast experience, you’d be constantly fighting an uphill battle when other contributors touch the site and make changes, or as the Web continues to evolve.

I suspect there’s a similar ownership gap at play when it comes to the ubiquitous obtrusive overlays that are plastered on so many websites these days.

Kirill Grouchnikov recently published a gallery of screenshots showcasing the beauty of modern mobile websites:

There are two things common between the websites in these screenshots that I took yesterday.

  1. They are beautifully designed, with great typography, clear branding, all optimized for readability.
  2. I had to install Firefox, Adblock Plus and uBlock Origin, as well as manually select and remove additional elements such as subscription overlays.

The web can be beautiful. Except it’s not right now.

How is this dissonance possible? How can designers and developers who clearly care about the user experience be responsible for unleashing such user-hostile interfaces?

PM/Legal/Marketing made me do it

I get that. But surely the solution can’t be to shrug our shoulders, pass the buck, and say “not my job.” Somebody designed each one of those obtrusive overlays. Somebody coded up each one and pushed them into production.

It’s clear that this is a problem of communication and understanding, rather than a technical problem. As always. We like to talk about how hard and complex our technical work is, but frankly, it’s a lot easier to get a computer to do what you want than to convince a human. Not least because you also need to understand what that other human wants. As Danielle says:

Recognising the gaps and overlaps is only half the battle. If we apply tools to a people problem, we will only end up moving the problem somewhere else.

Some issues can be solved with better tools or better processes. In most of our workplaces, we tend to reach for tools and processes by default, because they feel easier to implement. But as often as not, it’s not a technology problem. It’s a people problem. And the solution actually involves communication skills, or effective dialogue.

So let’s say it is someone in the marketing department who is pushing to have an obtrusive newsletter sign-up form get shoved in the user’s face. Talk to them. Figure out what their goals are—what outcome are they hoping to get to. If they don’t seem to understand the user-experience implications, talk to them about that. But it needs to be a two-way conversation. You need to understand what they need before you start telling them what you want.

I realise that makes it sound patronisingly simple, and I know that in actuality it’s a sisyphean task. It may be that genuine understanding between people is the wickedest of design problems. But even if this problem seems insurmoutable, at least you’d be tackling the right problem.

Because the web can’t survive like this.

Better Form Inputs for Better Mobile User Experiences | CSS-Tricks

Here’s one simple, practical way to make apps perform better on mobile devices: always configure HTML input fields with the correct type, inputmode, and autocomplete attributes. While these three attributes are often discussed in isolation, they make the most sense in the context of mobile user experience when you think of them as a team.

This is an excellent deep dive with great advice:

You may think that you are familiar with the basic autocomplete options, such as those that help the user fill in credit card numbers or address form fields, but I’d urge you to review them to make sure that you are aware of all of the options. The spec lists over 50 values!

geoTrad - Google My Maps

Well, this is a rather wonderful mashup made with data from thesession.org:

The distribution of Irish traditional tunes which reference place names in Ireland

Web Sites as ‘Public Accommodation’ under a Pandemic | Adrian Roselli

If you dodged an accessibility lawsuit because you have physical locations, what does it mean when those physical locations close?

Good question.

As movie theaters, restaurant ordering, college courses, and more move to online-first delivery, the notion of a corresponding brick-and-mortar venue falls away. If the current pandemic physical distancing measures stretch into the next year as many think, then this blip becomes the de facto new normal.

How I’m teaching the kids coding for the web

I love how Remy explains front-end development to his kids:

The bones are the HTML. Each bone has a name, we call them tags (or elements).

…the skin and the paint on the skin, this is CSS.

Finally, the brain and behaviour, the way the website can be interacted with is using the third layer: JavaScript.

Sunday, April 19th, 2020

Replying to a tweet from @i

Bedankt!

Playing The Tar Road To Sligo (jig) on mandolin:

https://thesession.org/tunes/151

https://www.youtube.com/watch?v=U-80mlhrNic

Checked in at Sheepcote Valley. Lying in the grass on a hillside — with Jessica map

Checked in at Sheepcote Valley. Lying in the grass on a hillside — with Jessica

Sun, sheep, and sea.

Sun, sheep, and sea.

Saturday, April 18th, 2020

Replying to a tweet from @keinegurke_

’Tis very good!

Friday, April 17th, 2020

Roast chicken and veg.

Roast chicken and veg.

Playing The Mist Covered Mountain (jig) by Junior Crehan on mandolin:

https://thesession.org/tunes/256

https://www.youtube.com/watch?v=rcwHnM3mDak

Lockdown just got real. 5Kg of Iberian bellota pata negra shoulder has arrived from Spain. 🐖 🇪🇸

Lockdown just got real.

5Kg of Iberian bellota pata negra shoulder has arrived from Spain. 🐖 🇪🇸

What’s in a name? | Sarah Higley

This is a terrific explanation of the concept of accessible names in HTML, written with verve and style!

Contrary to what you may think, naming an element involves neither a birth certificate nor the HTML name attribute. The name attribute is never directly exposed to the user, and is used only when submitting forms. Birth certificates have thus far been ignored by spec authors as a potential method for naming controls, but perhaps when web UI becomes sentient and self-propagating, we’ll need to revisit that.

Future Sync 2020

I was supposed to be in Plymouth yesterday, giving the opening talk at this year’s Future Sync conference. Obviously, that train journey never happened, but the conference did.

The organisers gave us speakers the option of pre-recording our talks, which I jumped on. It meant that I wouldn’t be reliant on a good internet connection at the crucial moment. It also meant that I was available to provide additional context—mostly in the form of a deluge of hyperlinks—in the chat window that accompanied the livestream.

The whole thing went very smoothly indeed. Here’s the video of my talk. It was The Layers Of The Web, which I’ve only given once before, at Beyond Tellerrand Berlin last November (in the Before Times).

As well as answering questions in the chat room, people were also asking questions in Sli.do. But rather than answering those questions there, I was supposed to respond in a social medium of my choosing. I chose my own website, with copies syndicated to Twitter.

Here are those questions and answers…

The first few questions were about last years’s CERN project, which opens the talk:

Based on what you now know from the CERN 2019 WorldWideWeb Rebuild project—what would you have done differently if you had been part of the original 1989 Team?

I responded:

Actually, I think the original WWW project got things mostly right. If anything, I’d correct what came later: cookies and JavaScript—those two technologies (which didn’t exist on the web originally) are the source of tracking & surveillance.

The one thing I wish had been done differently is I wish that JavaScript were a same-origin technology from day one:

https://adactio.com/journal/16099

Next question:

How excited were you when you initially got the call for such an amazing project?

My predictable response:

It was an unbelievable privilege! I was so excited the whole time—I still can hardly believe it really happened!

https://adactio.com/journal/14803

https://adactio.com/journal/14821

Later in the presentation, I talked about service workers and progressive web apps. I got a technical question about that:

Is there a limit to the amount of local storage a PWA can use?

I answered:

Great question! Yes, there are limits, but we’re generally talking megabytes here. It varies from browser to browser and depends on the available space on the device.

But files stored using the Cache API are less likely to be deleted than files stored in the browser cache.

More worrying is the announcement from Apple to only store files for a week of browser use:

https://adactio.com/journal/16619

Finally, there was a question about the over-arching theme of the talk…

Great talk, Jeremy. Do you encounter push-back when using the term “Progressive Enhancement”?

My response:

Yes! …And that’s why I never once used the phrase “progressive enhancement” in my talk. 🙂

There’s a lot of misunderstanding of the term. Rather than correct it, I now avoid it:

https://adactio.com/journal/9195

Instead of using the phrase “progressive enhancement”, I now talk about the benefits and effects of the technique: resilience, universality, etc.

Future Sync Distributed 2020

Thursday, April 16th, 2020

Replying to a tweet from @wmarybeard

I keep returning to two works, one plague-related and one about self-isolation:

Emily St. John Mandel’s book Station Eleven

and

J.G. Ballard’s short story The Enormous Space.

https://adactio.com/journal/16666

Replying to a tweet from @getify

We fundamentally disagree. Based on the architecture of most framework-driven bloated single page apps today, the idea of separating concerns—much less progressive enhancement—isn’t even known about. This “gospel” had no disciples.

Replying to a tweet from @getify

The way I see it, the people encouraging progressive enhancement made almost zero impact. It wasn’t that the next generation misinterpreted the message; they never even got the message in the first place.

Lunchtime noodles.

Lunchtime noodles.

Replying to a tweet from @getify

Your talk makes it sound like well-intentioned people were trying to implement progressive enhancment, misinterpreted it, and that’s what got us to where we are today. That’s not how I see things. 99% of devs weren’t even trying to use PE.

Replying to a tweet from @getify

I completely disagree that progressive enhancement is in any way connected with the current state of big bloated single page apps—the devs building those aren’t misinterpreting anything; they’re not even aware of a different approach.

Replying to a tweet from @getify

Yes, and that isn’t progressive enhancement.

Replying to a tweet from @briankardell

This was in response to a question after a talk I gave this morning at @FutureSyncConf called The Layers Of The Web.

Here’s an earlier iteration of the talk: https://adactio.com/articles/16251

Replying to a tweet from @getify

I reacted to it in this post:

https://adactio.com/journal/16404

I was a little disappointed to see Kyle Simpson—who I admire greatly—conflate separation of concerns with progressive enhancement in his talk from JSCamp 2019

Podcasts

I’ve been on a few different podcasts recently.

The tenth episode of the Design Systems podcast is myself and Chris having a back-and-forth about design systems: Overcoming Entropy and Turning Chaos Into Order:

Chris and Jeremy Keith discuss imbuing teams with a shared sense of ownership of their design system, creating design systems able to address unforeseen scenarios, design ops as an essential part of an effective design system, and more.

Gerry has started a new podcast to accompany his new book, World Wide Waste. He invited me on for the first episode: ‘We’ve ruined the Web. Here’s how we fix it.’:

Welcome to World Wide Waste, a podcast about how digital is killing the planet, and what to do about it. In this session, I’m chatting with Jeremy Keith. Jeremy is a philosopher of the internet. Every time I see him speak, I’m struck by his calming presence, his brilliant mind and his deep humanity.

We talked about performance, energy consumption, and digital preservation. We agreed on a lot, but there were also points where we fundamentally disagreed. Good stuff!

If you like the sound of some Irishmen chatting on a podcast, then as well as listening to me and Gerry getting into it, you might also enjoy the episode of The Blarney Pilgrims podcast that I was on:

Jeremy Keith is the founder and keeper of thesession.org, probably the greatest irish music resource in the world. And this episode hopefully has something of the generous essence of that archive. We flow, from The North as a different planet to Galway as the centre of the ’90s slacker world. From the one-tune-a-week origin of thesession.org and managing an online community to the richness and value of constancy.

I’ve already written about how much this meant to me.

On the same topic—Irish music on the web—I made a brief appearance in the latest episode of Shannon Heaton’s Irish Music Stories, Irish Tunes in the Key of C-19:

How are traditional musicians and dancers continuing creative careers and group music events during the Covid-19 pandemic? How is social distancing affecting the jigs and reels? In this unexpected open of Season Four of Irish Music Stories, musicians from Ireland, England, Belgium, Sweden, and the U.S. address on and offline strategies… from a safe distance.

Replying to a tweet from @ch12i5

👏

Didn’t I Write This Story Already? When Your Fictional Pandemic Becomes Reality | Tor.com

Naomi Kritzer published a short story five years ago called So Much Cooking about a food blogger in lockdown during a pandemic. Prescient.

I left a lot of the details about the disease vague in the story, because what I wanted to talk about was not the science but the individuals struggling to get by as this crisis raged around them. There’s a common assumption that if the shit ever truly hit the fan, people would turn on one another like sharks turning on a wounded shark. In fact, the opposite usually happens: humans in disasters form tight community bonds, help their neighbors, offer what they can to the community.

It was 20 years ago today… - Web Directions

John’s article, A Dao Of Web Design, is twenty years old. If anything, it’s more relevant today than when it was written.

Here, John looks back on those twenty years, and forward to the next twenty…

Replying to a post on adactio.com

Instead of using the phrase “progressive enhancement”, I now talk about the benefits and effects of the technique: resilience, universality, etc.

Replying to a post on adactio.com

Yes! …And that’s why I never once used the phrase “progressive enhancement” in my talk. 🙂

There’s a lot of misunderstanding of the term. Rather than correct it, I now avoid it:

https://adactio.com/journal/9195

@FutureSyncConf Anonymous asks:

Great talk, Jeremy. Do you encounter push-back when using the term “Progressive Enhancement”?

https://app.sli.do/event/vxcnijew/live/questions

Replying to a post on adactio.com

But files stored using the Cache API are less likely to be deleted than files stored in the browser cache.

More worrying is the announcement from Apple to only store files for a week of browser use:

https://adactio.com/journal/16619

Replying to a post on adactio.com

Great question! Yes, there are limits, but we’re generally talking megabytes here. It varies from browser to browser and depends on the available space on the device.

@FutureSyncConf Anonymous asks:

Is there a limit to the amount of local storage a PWA can use?

https://app.sli.do/event/vxcnijew/live/questions

Replying to a post on adactio.com

It was an unbelievable privilege! I was so excited the whole time—I still can hardly believe it really happened!

https://adactio.com/journal/14803

https://adactio.com/journal/14821

@FutureSyncConf Anonymous asks:

How excited were you when you initially got the call for such an amazing project?

https://app.sli.do/event/vxcnijew/live/questions

Replying to a post on adactio.com

The one thing I wish had been done differently is I wish that JavaScript were a same-origin technology from day one:

https://adactio.com/journal/16099

Replying to a post on adactio.com

Actually, I think the original WWW project got things mostly right. If anything, I’d correct what came later: cookies and JavaScript—those two technologies (which didn’t exist on the web originally) are the source of tracking & surveillance

@FutureSyncConf Rob Whiting asks:

Based on what you now know from the CERN 2019 WorldWideWeb Rebuild project—what would you have done differently if you had been part of the original 1989 Team?

Replying to a tweet from @whitingx

I must admit, I didn’t think I’d still be banging on about the same idea fifteen years later! 😉

I’ll be giving the opening talk—and answering questions—for @FutureSyncConf at 10am this morning:

https://futuresync.co.uk/

Should be fun!

Wednesday, April 15th, 2020

Replying to a tweet from @wormmmoon

MAMESHIBA!!!

While acknowledging your feelings and without meaning to diminish your current situation in any way, I must know …where did you get that bean dog!?

Green leaves and blue sky.

Green leaves and blue sky.

Replying to a tweet from @chriscoyier

Yup, that’s the way some people on thesession.org have been doing it: https://thesession.org/discussions/44712 https://thesession.org/discussions/44702

People have also been talking about JamKazam: https://thesession.org/discussions/44713

Eating toast (with avocado and dukkah) in the back garden.

Eating toast (with avocado and dukkah) in the back garden.

Replying to a tweet from @feather

🍻

Tuesday, April 14th, 2020

Monday, April 13th, 2020

Playing Happy To Meet, Sorry To Part (jig) on mandolin:

https://thesession.org/tunes/1154

https://www.youtube.com/watch?v=XRQDK8zYBy0

Sunday, April 12th, 2020

Playing The Milky Way (reel) by Vincent Broderick on mandolin:

https://thesession.org/tunes/2241

https://www.youtube.com/watch?v=S7oXLSYxWyE

Saturday, April 11th, 2020

Replying to a tweet from @grigs

It’s a progress b(e)ar(d).

Replying to a tweet from @Brilliantcrank

That’s the blank impassive expression I have when I’m thinking “don’t fuck it up, don’t fuck it up…”

Playing Old Hag, You Have Killed Me (jig) on mandolin:

https://thesession.org/tunes/1359

https://www.youtube.com/watch?v=xfejZHRx5u8

Picture 1 Picture 2 Picture 3 Picture 4

A nice walk in the country. ☀️

Checked in at Sheepcote Valley. with Jessica map

Checked in at Sheepcote Valley. with Jessica

Jeremy Keith ‘We’ve ruined the Web. Here’s how we fix it.’ - This is HCD

Did you hear the one about two Irishmen on a podcast?

I really enjoyed this back-and-forth discussion with Gerry on performance, waste, and more. We agreed on much, but we also clashed sometimes.

Friday, April 10th, 2020

Replying to a tweet from @ari4nne

💔

I can’t believe that @teleject is gone.

Playing The Green Mountain (reel) on mandolin:

https://thesession.org/tunes/166

https://www.youtube.com/watch?v=O86UxqP8MTU

Apollo 13 in Real Time

It was fifty years ago this weekend. Follow along here, timeshifted by half a century.

Went for my government-sanctioned exercise ’round the local Windows desktop.

Went for my government-sanctioned exercise ’round the local Windows desktop.

Checked in at Sheepcote Valley. with Jessica map

Checked in at Sheepcote Valley. with Jessica

Replying to a tweet from @trysmudford

❤️

Web Share API test

Remember a while back I wrote about some odd behaviour with the Web Share API in Safari on iOS?

When the share() method is triggered, iOS provides multiple ways of sharing: Messages, Airdrop, email, and so on. But the simplest option is the one labelled “copy”, which copies to the clipboard.

Here’s the thing: if you’ve provided a text parameter to the share() method then that’s what’s going to get copied to the clipboard—not the URL.

That’s a shame. Personally, I think the url field should take precedence.

Tess filed a bug soon after, which was very gratifying to see.

Now Phil has put together a test case:

  1. Share URL, title, and text
  2. Share URL and title
  3. Share URL and text

Very handy! The results (using the “copy” to clipboard action) are somewhat like rock, paper, scissors:

  • URL beats title,
  • text beats URL,
  • nothing beats text.

So it’s more like rock, paper, high explosives.

Thursday, April 9th, 2020

Replying to a tweet from @andybudd

Noodles in the sunshine.

Noodles in the sunshine.

Plumbing

On Monday, I linked to Tom’s latest video. It uses a clever trick whereby the title of the video is updated to match the number of views the video has had. But there’s a lot more to the video than that. Stick around and you’ll be treated to a meditation on the changing nature of APIs, from a shared open lake to a closed commercial drybed.

It reminds me of (other) Tom’s post from a couple of year’s ago called Pouring one out for the Boxmakers, wherein he talks about Twitter’s crackdown on fun bots:

Web 2.0 really, truly, is over. The public APIs, feeds to be consumed in a platform of your choice, services that had value beyond their own walls, mashups that merged content and services into new things… have all been replaced with heavyweight websites to ensure a consistent, single experience, no out-of-context content, and maximising the views of advertising. That’s it: back to single-serving websites for single-serving use cases.

A shame. A thing I had always loved about the internet was its juxtapositions, the way it supported so many use-cases all at once. At its heart, a fundamental one: it was a medium which you could both read and write to. From that flow others: it’s not only work and play that coexisted on it, but the real and the fictional; the useful and the useless; the human and the machine.

Both Toms echo the sentiment in Anil’s The Web We Lost, written back in 2012:

Five years ago, if you wanted to show content from one site or app on your own site or app, you could use a simple, documented format to do so, without requiring a business-development deal or contractual agreement between the sites. Thus, user experiences weren’t subject to the vagaries of the political battles between different companies, but instead were consistently based on the extensible architecture of the web itself.

I know, I know. We’re a bunch of old men shouting at The Cloud. But really, Anil is right:

This isn’t our web today. We’ve lost key features that we used to rely on, and worse, we’ve abandoned core values that used to be fundamental to the web world. To the credit of today’s social networks, they’ve brought in hundreds of millions of new participants to these networks, and they’ve certainly made a small number of people rich.

But they haven’t shown the web itself the respect and care it deserves, as a medium which has enabled them to succeed. And they’ve now narrowed the possibilites of the web for an entire generation of users who don’t realize how much more innovative and meaningful their experience could be.

In his video, Tom mentions Yahoo Pipes as an example of a service that has been shut down for commercial and idealogical reasons. In many ways, it was the epitome of what Anil was talking about—a sort of meta-API that allowed you to connect different services together. Kinda like IFTTT but with a visual interface that made it as empowering as something like the Scratch programming language.

There are services today that provide some of that functionality, but they’re more developer-focused. Trys pointed me to Pipedream, which looks good but you need to know how to write Node.js code and import npm packages. I’m sure it’s great if you’re into serverless Jamstack lambda thingamybobs but I don’t think it’s going to unlock the potential for non-coders to create cool stuff.

On the more visual pipes-esque Scratchy side, Cassie pointed me to Cables:

Cables is a tool for creating beautiful interactive content.

It isn’t about making mashups, but it does look something that non-coders could potentially use to make something that looks cool. It reminds me a bit of Bret Victor and his classic talk on Inventing On Principle—always worth revisting!

Wednesday, April 8th, 2020

Playing The Wedding Reel (MacLeod’s Farewell) on mandolin:

https://thesession.org/tunes/518

https://www.youtube.com/watch?v=7Dg8u_DZ-f0

How to not make a résumé in React | Eric Bailey

Consider what React and other SPA frameworks are good for: stateful, extensible component-driven applications. Now consider what a résumé’s goals are.

The Cuneiform Tablets of 2015 [PDF]

A 2015 paper by Long Tien Nguyen and Alan Kay with a proposal for digital preservation.

We discuss the problem of running today’s software decades,centuries, or even millennia into the future.

getlon.lat

80 geocoding service plans to choose from.

I’m going to squirrel this one away for later—I’ve had to switch geocoding providers in the past, so I have a feeling that this could come in handy.

Tuesday, April 7th, 2020

Replying to a tweet from @scottjenson

Doh!

Replying to a tweet from @sarah_edo

Monday, April 6th, 2020

Replying to a tweet from @keinegurke_

Other Minds? Ooh yes, this is the perfect time for that book!

Replying to a post on adactio.com

Here we go!

Here we go!

Replying to a post on adactio.com

I am *thoroughly* enjoying this remote edition of the Brighton folk club evening with Rowan and Rosie and little Wilf!

I am thoroughly enjoying this remote edition of the Brighton folk club evening with Rowan and Rosie and little Wilf!

Replying to a post on adactio.com

Replying to a tweet from @tomcoates

Thanks, Tom—much appreciated!

Tonight’s Brighton Acoustic Club (first Monday of the month) will be an online-only affair at 8pm:

https://www.facebook.com/brighton.acoustic.club/

Myself and @Wordridden are planning to do a floor spot on mandolin and fiddle.

This Video Has {{ viewcount }} Views - YouTube

Tom’s videos are so good! Did you see his excellent in-depth piece on copyright?

This one is all about APIs and the golden age of Web 2.0 when we were free to create mashups.

It pairs nicely with a piece by another Tom from a couple of years back on the joy of Twitterbots.

This Video Has 12,351,773 Views

Playing The Maids Of Ardagh (polka) on mandolin:

https://thesession.org/tunes/466

https://www.youtube.com/watch?v=DVfxA_p2wDA

The beauty of modern mobile websites · Pushing Pixels

Two observations of websites on mobile devices today:

  1. They are beautifully designed, with great typography, clear branding, all optimized for readability.
  2. I had to install Firefox, Adblock Plus and uBlock Origin, as well as manually select and remove additional elements such as subscription overlays.

Both observations are the result of conscious design decisions.

6, 95: Barrel aged

Human consciousness is the most astonishing thing, and most of it happened in deep time, beyond the reach of any writing and most legends. Human experience, in general, is prehistoric. And prehistoric experience was just as full as yours and mine: just as deeply felt, just as intelligent, just as real. What we know of it is mostly from durable artifacts and graves. I’m thinking of the woman found near the Snake River, buried at the end of the ice age with a perfectly crafted and unused stone knife tucked under her head. I’m thinking of the huge conical hats, beaten from single pieces of gold and inscribed with calendars, found north of the Alps. I’m thinking of Grave 8 at Vedbæk, where a woman held her premature baby on the spread wing of a swan. These are snapshot that experts can assemble into larger ideas, but what they tell all of us is that we’ve been people, not just humans, for a very long time.

Replying to a tweet from @MrMohtas

Technically, I’m not tweeting. I’m posting a note to my own website, and then syndicating a copy to Twitter. So my Twitter account is a bot, in a way.

https://adactio.com/journal/6826

Soaking up some sunshine in the back garden with some light reading material from David Deutsch. ☀️ 📖

Soaking up some sunshine in the back garden with some light reading material from David Deutsch. ☀️ 📖

Replying to a tweet from @simonswiss

Well done, Tony!

Chromium Blog: Updates to form controls and focus

Chromium browsers—Chrome, Edge, et al.—are getting a much-needed update to some interface elements like the progess element, the meter element, and the range, date, and color input types.

This might encourage more people to use native form controls …but until we can more accurately tweak the styling of these elements, people are still going to reach for more bloated, less accessible JavaScript-driven options. Over-engineering is under-engineering

Performance, security, and ethics: influencing effectively

I wrote something recently about telling the story of performance. Sue Loh emphasis the importance of understanding what makes people tick:

Performance engineers need to be an interesting mix of data-lovers and people-whisperers.

Local-first software: You own your data, in spite of the cloud

The cloud gives us collaboration, but old-fashioned apps give us ownership. Can’t we have the best of both worlds?

We would like both the convenient cross-device access and real-time collaboration provided by cloud apps, and also the personal ownership of your own data embodied by “old-fashioned” software.

This is a very in-depth look at the mindset and the challenges involved in building truly local-first software—something that Tantek has also been thinking about.

Sunday, April 5th, 2020

Playing The Humours Of Scarriff (reel) on bouzouki:

https://thesession.org/tunes/1748

https://www.youtube.com/watch?v=DKQDZVF9Igg

Replying to a tweet from @scottjenson

I wrote about this tension between security and usability a few years back, in the context of seamful design:

https://adactio.com/journal/6786

Saturday, April 4th, 2020

Replying to a tweet from @AndyDavies

Don’t knock it ’till you try it!

Cooking up a batch of my chili sin carne:

https://principiagastronomica.com/post/5

(that recipe has been online for fifteen years now!)

A bit of Blarney

I don’t talk that much on here about my life’s work. Contrary to appearances, my life’s work is not banging on about semantic markup, progressive enhancement, and service workers.

No, my life’s work is connected to Irish traditional music. Not as a musician, I hasten to clarify—while I derive enormous pleasure from playing tunes on my mandolin, that’s more of a release than a vocation.

My real legacy, it turns out, is being the creator and caretaker of The Session, an online community and archive dedicated to Irish traditional music. I might occassionally mention it here, but only when it’s related to performance, accessibility, or some other front-end aspect. I’ve never really talked about the history, meaning, and purpose of The Session.

Well, if you’re at all interested in that side of my life, you can now listen to me blather on about it for over an hour, thanks to the Blarney Pilgrims podcast.

I’ve been huffduffing episodes of this podcast for quite a while now. It’s really quite excellent. If you’re at all interested in Irish traditional music, the interviews with the likes of Kevin Burke, John Carty, Liz Carroll and Catherine McEvoy are hard to beat.

So imagine my surprise when they contacted me to ask me to chat and play some tunes! It really was an honour.

I was also a bit of guinea pig. Normally they’d record these kinds of intimate interviews face to face, but what with The Situation and all, my chat was the first remotely recorded episode.

I’ve been on my fair share of podcasts—most recently the Design Systems Podcast—but this one was quite different. Instead of talking about my work on the web, this focussed on what I was doing before the web came along. So if you don’t want to hear me talking about my childhood, give this a miss.

But if you’re interested in hearing my reminisce and discuss the origin and evolution of The Session, have a listen. The chat is interspersed with some badly-played tunes from me on the mandolin, but don’t let that put you off.

Friday, April 3rd, 2020

The Worm is Back! | NASA

The return of NASA’s iconic “worm” logo (for some missions).

Brighton and Hove mobility data from Google for the past six weeks compared to baseline: * Retail and recreation: -89% * Grocery and pharmacy: -48% * Parks: -59% * Transit stations: -77% * Workplace: -64% * Residential: +30%

Brighton and Hove mobility data from Google for the past six weeks compared to baseline:

  • Retail and recreation: -89%
  • Grocery and pharmacy: -48%
  • Parks: -59%
  • Transit stations: -77%
  • Workplace: -64%
  • Residential: +30%

Playing Sailing Into Walpole’s Marsh (reel) on mandolin:

https://thesession.org/tunes/1341

https://www.youtube.com/watch?v=S-599EkOYrQ

Responsive Images the Simple Way - Cloud Four

A nice succint explanation of using the srcset and sizes attributes on the img element—remember, you probably don’t need picture and source elements if your use case is swapping out different sized versions of the same image.

One caveat thought: you do need to know the dimensions of the images. If you’re dealing with unknown or user-generated photos, that can be an issue.

Thursday, April 2nd, 2020

Replying to a tweet from @AdamHSays

Each shadow photon encounters much the same sort of barrier as its tangible counterpart does, a barrier consisting of only a tiny proportion of all the shadow atoms that are present.

Visual Design Inspiration from Agency Websites–And Other Tangential Observations | Jim Nielsen’s Weblog

Tyring to do make screenshots of agency websites is tricky if the website is empty HTML with everything injected via JavaScript.

Granted, agencies are usually the ones pushing the boundaries. “Pop” and “pizazz” are what sell for many of them (i.e. “look what we can do!”) Many of these sites pushed the boundaries of what you can do in the browser, and that’s cool. I like seeing that kind of stuff.

But if you asked me what agency websites inspired both parts me, I’d point to something like Clearleft or Paravel. To me, they strike a great balance of visual design with the craft of building for an accessible, universal web.

Sight and Sound: The Cinema of Walter Murch on Vimeo

I enjoyed this documentary on legendary sound designer and editor Walter Murch. Kinda makes me want to rewatch The Conversation and The Godfather.

Replying to a tweet from @jamesmadson

We’re doing good (given, y’know, the circumstances)—hope all is well with you!

Design Systems Podcast 10. Jeremy Keith: Overcoming Entropy and Turning Chaos Into Order

I enjoyed talking with Chris about design systems (and more). The episode is now available for your huffduffing pleasure.

Replying to a tweet from @jvbates

Thanks! If I post one of these videos every day, it’ll be like a progress bar for my beard.

Playing The Star Above The Garter (slide) on mandolin:

https://thesession.org/tunes/1398

https://www.youtube.com/watch?v=efkzv1TggHU

CSS Architecture for Modern JavaScript Applications - MadeByMike

Mike sees the church of JS-first ignoring the lessons to be learned from the years of experience accumulated by CSS practitioners.

As the responsibilities of front-end developers have become more broad, some might consider the conventions outlined here to be not worth following. I’ve seen teams spend weeks planning the right combination of framework, build tools, workflows and patterns only to give zero consideration to the way they architect UI components. It’s often considered the last step in the process and not worthy of the same level of consideration.

It’s important! I’ve seen well-planned project fail or go well over budget because the UI architecture was poorly planned and became un-maintainable as the project grew.

Ted Chiang Explains the Disaster Novel We All Suddenly Live In - Electric Literature

Ted Chiang’s hot takes are like his short stories—punchy, powerful, and thought-provoking.

Why we are living in JG Ballard’s world

I’m not the only one thinking about J.G. Ballard.

A luxury cruiseliner quarantined in San Francisco bay, its well-heeled passengers confined to their cabins for weeks on end. Holidaymakers on lockdown at a quarantined hotel in Tenerife after an Italian doctor comes down with coronavirus. A world of isolated individuals rarely leaving their homes, keeping a wary distance from one another in public, communicating with their friends and loved ones via exclusively technological means. These situations are so Ballardian as to be in the realm of copyright infringement.

Replying to a tweet from @bruces

Ballard’s short story “The Enormous Space” is very much a story of our time…

https://adactio.com/journal/16666

Wednesday, April 1st, 2020

Home (BBC film of J. G. Ballard’s The Enormous Space) - YouTube

Here’s a BBC adaption of that J.G. Ballard short story I recorded. It certainly feels like a story for our time.

Home (BBC film of J. G. Ballard's The Enormous Space)

Indoor Voices 🤫🤫🤫

A group blog by a whole bunch of people who are staying at home.

It’s hard to believe, but there was a time where the internet was just full of casual websites posting random stuff. And you’d go to them maybe even multiple times a day to see if they had posted any new stories. It was something we all did when we were bored at our desks, at our jobs. Now there are no more desks. But there are still blogs.

How to build a bad design system | CSS-Tricks

Working in a big organization is shocking to newcomers because of this, as suddenly everyone has to be consulted to make the smallest decision. And the more people you have to consult to get something done, the more bureaucracy exists within that company. In short: design systems cannot be effective in bureaucratic organizations. Trust me, I’ve tried.

Who hurt you, Robin?

Transreal Cyberpunk Readings

When you’re done listening to my reading of a J.G. Ballard short story, here’s a motherlode of huffduffable sci-fi shorts by Rudy Rucker and Bruce Sterling.

A reading of The Enormous Space by J.G. Ballard

Staying at home triggered a memory for me. I remembered reading a short story many years ago. It was by J.G. Ballard, and it described a man who makes the decision not to leave the house.

Being a J.G. Ballard story, it doesn’t end there. Over the course of the story, the house grows and grows in size, forcing the protaganist into ever-smaller refuges within his own home. It really stuck with me.

I tried tracking it down with some Duck Duck Going. Searching for “j.g. ballard weird short story” doesn’t exactly narrow things down, but eventually I spotted the book that I had read the story in. It was called War Fever. I think I read it back when I was living in Germany, so that would’ve been in the ’90s. I certainly don’t have a copy of the book any more.

But I was able to look up a table of contents and find a title for the story that was stuck in my head. It’s called The Enormous Space.

Alas, I couldn’t find any downloadable versions—War Fever doesn’t seem to be available for the Kindle.

Then I remembered the recent announcement from the Internet Archive that it was opening up the National Emergency Library. The usual limits on “checking out” books online are being waived while physical libraries remain closed.

I found The Complete Stories of J.G. Ballard and borrowed it just long enough to re-read The Enormous Space.

If anything, it’s creepier and weirder than I remembered. But it’s laced with more black comedy than I remembered.

I thought you might like to hear this story, so I made a recording of myself reading The Enormous Space.

Replying to a tweet from @cloudsteph

Thank you!

Replying to a tweet from @MadGrds

Yeah, I’ve been thinking about Station Eleven a lot:

https://adactio.com/journal/16553

James Meek · In 1348

This makes me want to re-read Barbara Tuchman’s A Distant Mirror.