The Blogroll

Chris’ Corner: Better CSS Animation

CSS animation rules. Just have a look at… CodePen lol. There was a (long) time when it didn’t exist, though. My old buddy Jonathan Snook wrote in 2007 that he didn’t like the idea of animation coming to CSS at all, but had changed his mind by 2009. They’ve evolved a bit since those early […]

The post Chris’ Corner: Better CSS Animation appeared first on CodePen Blog.

A Web Component for Swapping Text between Text, HTML, and Markdown

A couple of re-aligns ago on this website, my “biography” (a bit of text about myself) had some interactive controls on it. You could swap it between: The big idea was to make it self-serve when someone asked me for this, say to accompany and interview or for an introduction at a conference. You never […]

Resistance makes side projects hard

Today marks 15 full months that I’ve been working on a side project called Crafd. It’s a community for people who make things by hand: In that time … Resistance makes side projects hard

The post Resistance makes side projects hard appeared first on Zeldman on Web and Interaction Design.

How Columbia Ignored Women, Undermined Prosecutors and Protected a Predator For More Than 20 Years

For more than two decades, patients of an OB/GYN named Robert Hadden warned Columbia University that he was sexually inappropriate and abusive. One … How Columbia Ignored Women, Undermined Prosecutors and Protected a Predator For More Than 20 Years

The post How Columbia Ignored Women, Undermined Prosecutors and Protected a Predator For More Than 20 Years appeared first on Zeldman on Web and Interaction Design.

10 Reasons to Get Rid of Your Moan Faucets

My grandfather and great-grandfather were plumbers, and my uncles on that side grew up working for the family plumbing shop. One of my uncles took over that business and runs it to this day. I came across this letter that one of those uncles wrote when they came by my parents house to fix a […]

A Mobile-Only Grid

Check out this layout I wanted to pull off on the current design of this site: See how just the first two boxes in the “sidebar” of the homepage are set side-by-side on narrow (mobile) layouts. One way I could have done that is to target the sidebar, and turn it into a grid at […]

Retro

I tried to get into Glass, but it didn’t stick for me. It’s partially because I don’t have many friends on it, and the fact that it’s paid-only means I probably never will. But also because it seems like the community spirit there is: only post really excellent photos. That’s neat but that makes it […]

Welcome to the New LimeWire: AI Media Generation (Sponsored)

LimeWire was a staple of my youth. LimeWire was software that allowed users to share any type of file during the revolutionary days of file sharing. Fast forward to today and LimeWire is back, again as revolutionary software, but this time in the field of AI content publishing. From creating images to music and video, […]

The post Welcome to the New LimeWire: AI Media Generation (Sponsored) appeared first on David Walsh Blog.

Use Subdomains

Listen to Jim: Get a personal domain and start all your side projects as a subdomain of that top-level domain. Do not buy a custom domain for every little idea you have. Save your money, give your project the longevity it deserves, and show off who made the dang thing implicitly. Your personal domain is […]

Some Short Music Videos

I posted these to my Instagram, but they could (should) be here. I’m trying to get my “music room” at home in good order and learn to use recording equipment and software. These ones are very rough. Not only am I just not very good, but all I did was turn on Quicktime Player and […]

The Art of War: Divide and Conquer 

Learn how to effectively manage stakeholders in digital projects by using the "divide and conquer" technique. Don't let committees ruin your project!

Cannonball is such a badass song

The Breeders! The “30th Anniversary Edition” makes me feel as old as I am. But check this out. You could have fond memories of the cool megaphone voice check-check intro: Then it’s all like a-ooooo-ooo a-ooooo-ooo which is just unforgettable: Then the drummer is like this is actually gonna be a song get ready: Then […]

WordPress Hosting Advice

Two people have reached out thoughtfully to ask me about where they should host a WordPress site. They just kinda vaguely wanted it to be good (like a nice dashboard, at least), and not break the bank. The answer is… c’mon I’m just one dude! 😵‍💫 I’ve never done an in-depth competitive analysis of the […]

Why I chose Codepen PRO over Copilot

Strange premise from Jon Ellwood, right? He explains: I will acknowledge that CodePen and Copilot are two different products, and it might seem odd to be comparing the two – but the commonality for me is that my budget only allows for one of them to get my money each month. While Copilot could give […]

The post Why I chose Codepen PRO over Copilot appeared first on CodePen Blog.

Trabaja remoto

August was a month of travels. You can press play on that month’s map to follow the journey.

But check out the map for September too because the travels continue. This time my adventures are confined to Europe.

I’m in Spain. Jessica and I flew into Madrid on Saturday. The next day we took a train ride across the Extremaduran landscape to Cáceres, our home for the week.

This is like the sequel to our Sicilian trip. We’re both working remotely. We just happen to do be doing it from a beautiful old town with amazing cuisine.

We’re in a nice apartment that—crucially—has good WiFi. It’s right on the main square, but it’s remarkably quiet.

There’s a time difference of one hour with Brighton. Fortunately everything in Spain happens at least an hour later than it does at home. Waking up. Lunch. Dinner. Everything is time-shifted so that I’m on the same schedule as my colleagues.

I swear I’m more productive working this way. Maybe it’s the knowledge that tapas of Iberican ham await me after work, but I’m getting a lot done this week.

And when the working week is done, the fun begins. Cáceres is hosting its annual Irish fleadh this weekend.

I’ve always wanted to go to it, but it’s quite a hassle to get here just for a weekend. Combining it with a week of remote work makes it more doable.

I’m already having a really nice time here and the tunes haven’t even started yet.

Memorial Sites

I’m still on that 100 years thing and how it connects to free hosting, and now thanks to a conversation I peeped in on how it relates to the websites of people who have passed and the memorial sites to them. I helped with a memorial site to Christopher Schmitt that I very much hope […]

Blocking AI Scraper Bots

I think it was a month or two ago when OpenAI published docs on how you can tell their “web crawler” (scraper) to not scrape your site, following a similar syntax to Google’s: The instant I saw it I put it in my sites robots.txt file. I wanted to see how it felt and see […]

Adam Savage's One Day Builds

Since his time at Mythbusters, Adam Savage has been running Tested, a maker YouTube channel that deals with all forms of nerdery. One recurring segment of Tested is Adam Savage’s series of “One Day Builds”. Savage is the embodiment of the maker persona, so it’s no wonder such a prolific builder would make a series like that.

I also can’t help but see how the concept of one day builds have almost infinite practical advantages for someone like him (and someone like me?). Based on the dozens of one day builds I’ve watched, they seem to offer the following benefits:

  • An interesting mix of projects. From movie prop replicas, to model builds, to lego builds, to organizing his shop; there’s a diversity of projects to keep his active brain interested. And it keeps me interested too. At a basic level I love how organizing your workplace, a little mise en place, is a one day build project unto itself.
  • Fits his maker persona and skill base. You get the sense from Mythbusters that Adam Savage is a person who doesn’t sit still. One day builds allow for rapid iteration and rapid problem solving, which I think is in Savage’s wheelhouse. It fits his unique brand of hyperactive and excited energy applied towards tinkering and fabricating ideas.
  • A time box for scoping projects. With one day builds, you’re not doing a week that turns into two weeks that turns into a month. You’re not doing an hour project that turns into a day. You’re doing a day project that may spill over to the next day. A perfect scope that’s great for content generation.
  • Bite-sized content for YouTube. One day builds gives you a steady stream of bite-sized content which is faster to capture, edit, and release. A one day build boils down perfectly into the 10-minute YouTube video format. Selfishly, I strategize that you could batch record a couple weeks worth of content then take a few months off. You’re never chasing your own tail drumming up content.
  • Bonus livestream content for Patreon. Supporters get a behind-the-scenes livestream of the one day build with a sense of satisfaction seeing a project completed over a single stream rather than months. As far as completing dopamine satisfaction cycles goes, this is high-value.
  • It’s the opposite of a highly produced Mythbusters episode. Savage said at one point Mythbusters cost around ~$10,000/minute to record. Camera crews, safety experts, explosives, and crane rentals add up. With one day builds, there’s no driving out to the desert to blow cement trucks up, no putting cameras on a car and launching them off a cliff. A one day build is Adam, an iPhone, and some GoPros setup for timelapse footage around the shop; a massive simplification in production.
  • Quantity Guaranteed. I imagine Savage has infinite project ideas rattling around in his head. Making space for satisfying one day builds seems like a good way to ensure you actualize a certain quantity of projects in your lifetime.

Alls to say, I think this format suits Adam Savage and I see mostly advantages with the approach. The biggest tradeoff is probably project depth, but depth can be a trap where weeks or months of toil gets swept into the garbage can. It’s not all loss, lessons where learned, but at a greater expense.

Last month I had the opportunity to do a proper one day build at work. We needed an internal tool to shape some demo data for screencasts and screenshots. Rather than hacking the database directly, I built a little UI tool to enable this niche request. Only one person will ever use it, but it worked great and gave me a sense of satisfaction that emotionally carried me for a few weeks.

There’s a great temptation to try and structure my work life into a regular series of one day builds. I wonder if this would work across a team for consistent delivery and/or content generation. Is it possible to scale this style of working…

Tempting as that may be, it’s worth noting that Savage says he doesn’t jump into one day builds. There’s a lot of pre-thinking and material acquisition that goes on beforehand. He won’t start a project until the mental dots align. Building a cadence on that foundation might be difficult. Perhaps that’s what project management needs though, a little less cadence and little more forethought.

Lastly, a quote from one of Adam Savage’s one day builds that I love:

Drawers are a machine that require maintenance.

When you need to draw some gosh danged boxes that are connected to some other gosh darned boxes with arrows connecting them

Sometimes you need to be doing that. LucidChart When I was in the process of selling CSS-Tricks to DigitalOcean, they wanted to understand the stack and basic architecture of the site. I was like: it’s a pretty basic WordPress deal: PHP, MySQL. Wait but there is a bit more to it. It’s hosted on Flywheel […]

Simon’s rule

I got a nice email from someone regarding my recent posts about performance on The Session. They said:

I hope this message finds you well. First and foremost, I want to express how impressed I am with the overall performance of https://thesession.org/. It’s a fantastic resource for music enthusiasts like me.

How nice! I responded, thanking them for the kind words.

They sent a follow-up clarification:

Awesome, anyway there was an issue in my message.

The line ‘It’s a fantastic resource for music enthusiasts like me.’ added by chatGPT and I didn’t notice.

I imagine this is what it feels like when you’re on a phone call with someone and towards the end of the call you hear a distinct flushing sound.

I wrote back and told them about Simon’s rule:

I will not publish anything that takes someone else longer to read than it took me to write.

That just feels so rude!

I think that’s a good rule.

How long does free hosting last?

I keep thinking about that 100 years of hosting thing. Without some fancy setup like that, this is how it normally works: You pay your hosting bill, you pay to renew your domains, and you stay up to date on the shifting tides of technology well enough that your site doesn’t break. Then theoretically, your […]

Chris’ Corner: Subgrid

Chrome 117 went stable this past week. There is a website where you can see what the plan is for Chrome releases, by the way, which is handy when you care about such things. Chrome releases a major version about once a month, and I usually don’t feel ultra compelled to write anything about it […]

The post Chris’ Corner: Subgrid appeared first on CodePen Blog.

Secure tunes

The caching strategy for The Session that I wrote about is working a treat.

There are currently about 45,000 different tune settings on the site. One week after introducing the server-side caching, over 40,000 of those settings are already cached.

But even though it’s currently working well, I’m going to change the caching mechanism.

The eagle-eyed amongst you might have raised an eagle eyebrow when I described how the caching happens:

The first time anyone hits a tune page, the ABCs getting converted to SVGs as usual. But now there’s one additional step. I grab the generated markup and send it as an Ajax payload to an endpoint on my server. That endpoint stores the sheetmusic as a file in a cache.

I knew when I came up with this plan that there was a flaw. The endpoint that receives the markup via Ajax is accepting data from the client. That data could be faked by a malicious actor.

Sure, I’m doing a whole bunch of checks and sanitisation on the server, but there’s always going to be a way of working around that. You can never trust data sent from the client. I was kind of relying on security through obscurity …except it wasn’t even that obscure because I blogged about it.

So I’m switching over to using a headless browser to extract the sheetmusic. You may recall that I wrote:

I could spin up a headless browser, run the JavaScript and take a snapshot. But that’s a bit beyond my backend programming skills.

That’s still true. So I’m outsourcing the work to Browserless.

There’s a reason I didn’t go with that solution to begin with. Like I said, over 40,000 tune settings have already been cached. If I had used the Browserless API to do that work, it would’ve been quite pricey. But now that the flood is over and there’s a just a trickle of caching happening, Browserless is a reasonable option.

Anyway, that security hole has now been closed. Thank you to everyone who wrote in to let me know about it. Like I said, I was aware of it, but it was good to have it confirmed.

Funnily enough, the security lesson here is the same as my conclusion when talking about performance:

If that means shifting the work from the browser to the server, do it!

Luro is out of beta 🚀

Luro

I’m thrilled to say that Luro is out of beta! 🚀🎉 Anyone can sign up and take it for a test drive. It’s been a year of gathering feedback from private beta customers and design partners, constantly refining to give the app the right mix of instant gratification and long term value. It’s almost unrecognizable from what we released a year ago. If you are a Designer or a Developer (or Design Engineer) working in the design systems space, we think you’re going to love it because it’s built for you.

The new focus is on tracking adoption of component systems across the live product. On the Luro blog, Trent posted about why we believe measurement is critical to adoption based on our decades of experience doing the work. And we’re hellbent on making it as painless as possible; it takes three minutes and two URLs to start tracking components.

That’s the start of what Luro can do for you and your company. Chris described Luro better than I ever could have but there’s a lot packed into each Luro, features we believe will provide value over the long tail of your product’s life. Like answering the eternal question “Why are our buttons purple?” Or our knowledge management system that maps to your product’s pages and components instead of some internal wiki dumpster fire. Or our weekly Lighthouse audits that keeps everyone accountable for the product’s health. Through a shared lens and access to the same information, we can build better products together.

It feels wonderful to be out of private beta and entering a new phase where we can share everything we’ve built publicly. We’ll be blogging and ’gramming more. There’s a YouTube channel. We have a Discord. And on Wednesday mornings, I’ll be doing weekly office hours livestream on my Twitch as well as giving some sneak peeks for some upcoming features. Be sure to like and subscribe wherever you see fit.

What a journey so far. Cheers to my fellow luromigos Trent, Reagan, and Kyle as well as past contributors Emmett, Scott, Julian, Eli, and René. Special thanks to all the people I bothered with API questions, specifically Paul and Jake, and to everyone who has given feedback or kicked the tires along the way. Looking forward to the next major milestone.

Speedy tunes

Performance is a high priority for me with The Session. It needs to work for people all over the world using all kinds of devices.

My main strategy for ensuring good performance is to diligently apply progressive enhancement. The core content is available to any device that can render HTML.

To keep things performant, I’ve avoided as many assets (or, more accurately, liabilities) as possible. No uneccessary images. No superfluous JavaScript libraries. Not even any web fonts (gasp!). And definitely no third-party resources.

The pay-off is a speedy site. If you want to see lab data, run a page from The Session through lighthouse. To see field data, take a look at data from Chrome UX Report (Crux).

But the devil is in the details. Even though most pages on The Session are speedy, the outliers have bothered me for a while.

Take a typical tune page on the site. The data is delivered from the server as HTML, which loads nice and quick. That data includes the notes for the tune settings, written in ABC notation, a nice lightweight text format.

Then the enhancement happens. Using Paul Rosen’s brilliant abcjs JavaScript library, those ABCs are converted into SVG sheetmusic.

So on tune pages there’s an additional download for that JavaScript library. That’s not so bad though—I’m using a service worker to cache that file so there’ll only ever be one initial network request.

If a tune has just a few different versions, the page remains nice and zippy. But if a tune has lots of settings, the computation starts to add up. Converting all those settings from ABC to SVG starts to take a cumulative toll on the main thread.

I pondered ways to avoid that conversion step. Was there some way of pre-generating the SVGs on the server rather than doing it all on the client?

In theory, yes. I could spin up a headless browser, run the JavaScript and take a snapshot. But that’s a bit beyond my backend programming skills, so I’ve taken a slightly different approach.

The first time anyone hits a tune page, the ABCs getting converted to SVGs as usual. But now there’s one additional step. I grab the generated markup and send it as an Ajax payload to an endpoint on my server. That endpoint stores the sheetmusic as a file in a cache.

Next time someone hits that page, there’s a server-side check to see if the sheetmusic has been cached. If it has, send that down the wire embedded directly in the HTML.

The idea is that over time, most of the sheetmusic on the site will transition from being generated in the browser to being stored on the server.

So far it’s working out well.

Take a really popular tune like The Lark In The Morning. There are twenty settings, and each one has four parts. Previously that would have resulted in a few seconds of parsing and rendering time on the main thread. Now everything is delivered up-front.

I’m not out of the woods. A page like that with lots of sheetmusic and plenty of comments is going to have a hefty page weight and a large DOM size. I’ve still got a fair bit of main-thread work happening, but now the bulk of it is style and layout, whereas previously I had the JavaScript overhead on top of that.

I’ll keep working on it. But overall, the speed improvement is great. A typical tune page is now very speedy indeed.

It’s like a microcosm of web performance in general: respect your users’ time, network connection and battery life. If that means shifting the work from the browser to the server, do it!

WIIFM: The Five Letters You Need to Influence Stakeholders

Unlock the key to winning over stakeholders: Stop talking about what you want and focus on what they care about. Tailored tactics inside!

Multi-page web apps

I received this email recently:

Subject: multi-page web apps

Hi Jeremy,

lately I’ve been following you through videos and texts and I’m curious as to why you advocate the use of multi-page web apps and not single-page ones.

Perhaps you can refer me to some sources where your position and reasoning is evident?

Here’s the response I sent…

Hi,

You can find a lot of my reasoning laid out in this (short and free) online book I wrote called Resilient Web Design:

https://resilientwebdesign.com/

The short answer to your question is this: user experience.

The slightly longer answer…

For most use cases, a website (or multi-page app if you prefer) is going to provide the most robust experience for the most number of users. That’s because a user’s web browser takes care of most of the heavy lifting.

Navigating from one page to another? That’s taken care of with links.

Gathering information from a user to process on a server? That’s taken care of with forms.

This frees me up to concentrate on the content and the design without having to reinvent the wheels of links and form fields.

These (let’s call them) multi-page apps are stateless, and for most use cases that’s absolutely fine.

There are some cases where you’d want a state to persist across pages. Let’s say you’re playing a song, or a podcast episode. Ideally you’d want that player to continue seamlessly playing even as the user navigates around the site. In that situation, a single-page app would be a suitable architecture.

But that architecture comes at a cost. Now you’ve got stop the browser doing what it would normally do with links and forms. It’s up to you to recreate that functionality. And you can’t do it with HTML, a robust fault-tolerant declarative language. You need to reimplement all that functionality in JavaScript, a less tolerant, more brittle language.

Then you’ve got to ship all that code to the user before they can use your site. It might be JavaScript code you’ve written yourself or it might be a third-party library designed for building single-page apps. Either way, the user pays a download tax (and a parsing tax, and an execution tax). Whereas with links and forms, all of that functionality is pre-bundled into the user’s web browser.

So that’s my reasoning. At least nine times out of ten, a multi-page approach is leaner, more robust, and simpler.

Like I said, there are times when a single-page approach makes sense—it all comes down to whether state needs to be constantly preserved. But these use cases are the exceptions, not the rule.

That’s why I find the framing of your question a little concerning. It should be inverted. The default approach should be to assume a multi-page approach (which is the way the web works by default). Deciding to take a JavaScript-driven single-page approach should be the exception.

It’s kind of like when people ask, “Why don’t you have children?” Surely the decision to have a child should require deliberation and commitment, rather than the other way around.

When it comes to front-end development, I’m worried that we’ve reached a state where the more complex over-engineered approach is viewed as the default.

I may be committing a fundamental attribution error here, but I think that we’ve reached this point not because of any consideration for users, but rather because of how it makes us developers feel. Perhaps building an old-fashioned website that uses HTML for navigations feels too easy, like it’s beneath us. But building an “app” that requires JavaScript just to render text on a screen feels like real programming.

I hope I’m wrong. I hope that other developers will start to consider user experience first and foremost when making architectural decisions.

Anyway. That’s my answer. User experience.

Cheers,

Jeremy

Nuclear Anchored Sidenotes

Sidenotes are hard. Anchor positioning makes them easy.

Unveiling 15+ Essential Tools & Resources for Web Designers and Agencies in 2023 (Sponsored)

You’ve visited countless websites, and now you’re designing your own. Stop and think for a minute about what you’ve liked and didn’t like about some of those you visited. Was it the front page, the layout in general, or the functionalities that either met with your satisfaction or turned you off? The helpful tools and […]

The post Unveiling 15+ Essential Tools & Resources for Web Designers and Agencies in 2023 (Sponsored) appeared first on David Walsh Blog.

Your feedback means more to small teams

As we’re approaching a pretty big milestone for Luro, I’ve been thinking a lot about all the effort that’s gone into the product. Not just the effort from members on the team, but also from the people beta testing our app. A trickle here, a flood there, I squeal with glee when new issues arrive. Your feedback means the world to small teams, it impacts the direction of the product more than you could ever imagine.

High fives we can retweet are awesome but what’s been most valuable is the feedback and considered criticisms we’ve received. Did something not work? Was something hard to understand? Did something take too many clicks? These stories impact milestones and roadmaps. I want to make these frustrations my frustrations.

Even a good old fashioned “Y’know what I wish/think your product could do…” can turn a small boat around. In fact, we spent the whole summer building out a new core feature based almost entirely on a welcomed suggestion. We have a lot of ideas (AI for dogs!) but I will trade a million growth hacks to build something genuinely useful for folks.

I know everyone’s busy and it’s a lot to ask, but if you encounter a bug and manage to get a lil’ screen grab or some reproduction steps, the chances I can find a fix sky rockets. Often we may already know about the issue, but it has fallen off the radar with all the other priorities, a little nudge helps us reprioritize. On average those bugs get fixed the fastest.

You have an oversized impact when giving feedback to small teams; it makes an enormous splash in a small pond. I think that’s true for any small collective of people working on something, whether it’s a small startup or open source project. Oversized impact can be good or bad, I guess. If you lob a giant turd over the fence you potentially ruined the day of an entire group of people, not some faceless corporation. I know I’ve made that mistake before. But deliver a kind word, you might have helped a team in need.

To any of the kind people who have given your time or feedback in the past – or if you find the energy to do so in the future – I want to say, thank you. It means a lot.

Chris’ Corner: Variations on What Not to Do

I think the nail is in coffin now: you should never design something for the web with only one (or even a narrow set) of particular viewport sizes in mind. It’s just so darn tempting to think that way. You have a couple of pretty specific screen sizes in front of you right now, you […]

The post Chris’ Corner: Variations on What Not to Do appeared first on CodePen Blog.

Performative performance

Web Summer Camp in Croatia finished with an interesting discussion. It was labelled a town-hall meeting, but it was more like an Oxford debating club.

Two speakers had two minutes each to speak for or against a particular statement. Their stances were assigned to them so they didn’t necessarily believe what they said.

One of the propositions was something like:

In the future, sustainable design will be as important as UX or performance.

That’s a tough one to argue against! But that’s what Sophia had to do.

She actually made a fairly compelling argument. She said that real impact isn’t going to come from individual websites changing their colour schemes. Real impact is going to come from making server farms run on renewable energy. She advocated for political action to change the system rather than having the responsibility heaped on the shoulders of the individuals making websites.

It’s a fair point. Much like the concept of a personal carbon footprint started life at BP to distract from corporate responsibility, perhaps we’re going to end up navel-gazing into our individual websites when we should be collectively lobbying for real change.

It’s akin to clicktivism—thinking you’re taking action by sharing something on social media, when real action requires hassling your political representative.

I’ve definitely seen some examples of performative sustainability on websites.

For example, at the start of this particular debate at Web Summer Camp we were shown a screenshot of a municipal website that has a toggle. The toggle supposedly enables a low-carbon mode. High resolution images are removed and for some reason the colour scheme goes grayscale. But even if those measures genuinely reduced energy consumption, it’s a bit late to enact them only after the toggle has been activated. Those hi-res images have already been downloaded by then.

Defaults matter. To be truly effective, the toggle needs to work the other way. Start in low-carbon mode, and only download the hi-res images when someone specifically requests them. (Hopefully browsers will implement prefers-reduced-data soon so that we can have our sustainable cake and eat it.)

Likewise I’ve seen statistics bandied about around the energy-savings that could be made if we used dark colour schemes. I’m sure the statistics are correct, but I’d like to see them presented side-by-side with, say, the energy impact of Google Tag Manager or React or any other wasteful dependencies that impact performance invisibly.

That’s the crux. Most of the important work around energy usage on websites is invisible. It’s the work done to not add more images, more JavaScript or more web fonts.

And it’s not just performance. I feel like the more important the work, the more likely it is to be invisible: privacy, security, accessibility …those matter enormously but you can’t see when a website is secure, or accessible, or not tracking you.

I suspect this is why those areas are all frustratingly under-resourced. Why pour time and effort into something you can’t point at?

Now that I think about it, this could explain the rise of web accessibility overlays. If you do the real work of actually making a website accessible, your work will be invisible. But if you slap an overlay on your website, it looks like you’re making a statement about how much you care about accessibility (even though the overlay is total shit and does more harm than good).

I suspect there might be a similar mindset at work when it comes to interface toggles for low-carbon mode. It might make you feel good. It might make you look good. But it’s a poor substitute for making your website carbon-neutral by default.

Lovers in a dangerous time

Being in Croatia last week got me thinking about the country’s history.

I remember the break-up of Yugoslavia, but I was quite out of touch with the news for a while back in 1991. That’s because I was hitch-hiking and busking around Europe with my musical partner Polly from Cornwall. I had my mandolin, she had her fiddle.

We went from Ireland to England to France to Germany to Czechoslovakia (still a single country back then), to Austria to Italy, back to France, and back to England. A loop around Europe.

We set off on August 21st, 1991. The only reason I know the date is because I remember we had been to a gig in Cork the night before.

Sonic Youth were playing in Sir Henry’s (a great venue that no longer exists). The support band was a group from Seattle called Nirvana. I remember that some of my friends decided to skip the support band to stay in the pub next door until Sonic Youth came on because the pints were cheaper there.

By the time Polly and I got back from our travels, Nirvana were the biggest band on the planet. It all happened very quickly.

The same could be said for the situation in Yugoslavia.

I remember when we were stuck for a day at a petrol station in the alps trying to get from Austria to Italy. There was a bureau de change listing currency exchange rates. This was before the euro came in so there were lots of different currencies; pounds, francs, lira, deutsche marks. Then there was the listing for the Yugoslav dinar. It read:

  • We buy: 00.00
  • We sell: 00.00

That really struck me, seeing the situation summarised so clinically.

But what really got to me was an encounter in Vienna.

Polly and I did well in that city. On our first evening of busking, not only did we make some good money, but we also met a local folk singer. This young man very generously took us in and put us up in his flat.

At some point during our stay, we were on one of the city’s trams. That’s when we met another young couple who were on the road. Somehow there was always a connection between fellow travellers. I can’t remember who spoke to who first, but we bonded straight away.

It soon became clear that our situations were only superfically similar. This was a young couple deeply in love. One of them was Serbian. The other was Croatian. It wasn’t safe for either of them back where they used to call home.

I could return home at any point. I always knew that when I was sleeping rough, or struggling to make enough money to eat.

They couldn’t return. All they wanted was to be together somewhere safe. They started asking us about Ireland and England. “Do you think they’d give us asylum?” they asked with so much hope. It broke my heart to see their desperation, the pleading look in their eyes.

I felt so useless. I wished there was something I could’ve done for them.

I think about them a lot.

One Skill to Rule Them All

In this week’s email, I argue that mastering people skills is the key to future-proofing your career. Discover why understanding human behavior is essential to success in any industry.

Why are we not still using tables-for-layout?

I was chatting with a couple of long-time web folk today. As often happens when those of us who lived through the browser wars get together, the talk turned to old browsers, and old hacks to get round the issues in those browsers. I was thinking through the timeframe of CSS becoming usable at all […]

Sum an Array of Numbers with JavaScript

It’s rare that I’m disappointed by the JavaScript language not having a function that I need. One such case was summing an array of numbers — I was expecting Math.sum or a likewise, baked in API. Fear not — summing an array of numbers is easy using Array.prototype.reduce! const numbers = [1, 2, 3, 4]; […]

The post Sum an Array of Numbers with JavaScript appeared first on David Walsh Blog.

Memories of Molly

The Web is a little bit darker today, a fair bit poorer.

Travels

He drew a deep breath. ‘Well, I’m back,’ he said.

I know how you feel, Samwise Gamgee.

I have returned from my travels—a week aboard the Queen Mary 2 crossing the Atlantic, followed by a weekend in New York, finishing with a week in Saint Augustine, Florida.

The Atlantic crossing was just as much fun as last time. In fact it was better because this time Jessica and I got to share the experience with our dear friends Dan and Sue.

There was dressing up! There was precarious ballet! There were waves! There were even some dolphins!

The truth is that this kind of Atlantic crossing is a bit like cosplaying a former age of travel. You get out of it what you put it into it. If you’re into LARPing as an Edwardian-era traveller, you’re going to have a good time.

We got very into it. Dressing up for dinner. Putting on a tux for the gala night. Donning masks for the masquerade evening.

Me and Jessica all dressed up wearing eye masks. Dan and Sue in wild outfits wearing eye masks.

It’s actually quite a practical way of travelling if you don’t mind being cut off from all digital communication for a week (this is a feature, not a bug). You adjust your clock by one hour most nights so that by the time you show up in New York, you’re on the right timezone with zero jetlag.

That was just as well because we had a packed weekend of activities in New York. By pure coincidence, two separate groups of friends were also in town from far away. We all met up and had a grand old time. Brunch in Tribeca; a John Cale concert in Prospect Park; the farmer’s market in Union Square; walking the high line …good times with good friends.

A brunch table with me and eight friends all smiling.

New York was hot, but not as hot as what followed in Florida. A week lazing about on Saint Augustine beach. I ate shrimp every single day. I regret nothing.

A sandy beach with gentle waves crashing under a blue sky with wisps of cloud.

We timed our exit just right. We flew out of Florida before the tropical storm hit. Then we landed in Gatwick right before the air-traffic control chaos erupted.

I had one day of rest before going back to work.

Well, I say “work”, but the first item in my calendar was speaking at Web Summer Camp in Croatia. Back to the airport.

The talk went well, and I got to attend a performance workshop by Harry. But best of all was the location. Opatija is an idyllic paradise. Imagine crossing a web conference with White Lotus, but in a good way. It felt like a continuation of Florida, but with more placid clear waters.

A beautiful old town interspersed with lush greenery sweeps down to a tranquil bay with blue/green water.

But now I’m really back. And fortunately the English weather is playing along by being unseasonably warm . It’s as if the warm temperatures are following me around. I like it.

Chris’ Corner: Web Components Don’t Need You

Dave Rupert blogged a bunch of reasons about why you probably aren’t using them yet. Some of it is technological, and more of it is historical, marketing, and psychological reasons. Then Dave, a pretty avid Web Components follower and advocate, followed up with another surprise. Should you rewrite your app to use them? Probably not. […]

The post Chris’ Corner: Web Components Don’t Need You appeared first on CodePen Blog.

A faster horse

“The user is never wrong” means, when a user snags on a part of your UX that doesn’t work for her, she’s not making a mistake, she’s doing you a favor. To benefit from this favor, you must pay vigilant attention, prioritize the discovery, dig deeply enough to understand the problem, and then actually solve […]

The post A faster horse appeared first on Zeldman on Web and Interaction Design.

Through Your Tears & Sorrow

My daughter Ava has written a new essay about autism, trauma, and the mysteries of socialization.

The post Through Your Tears & Sorrow appeared first on Zeldman on Web and Interaction Design.

User Research: Embrace its Limitations, Reap the Benefits

Explore the nuances of user research! Discover its importance, common pitfalls, and how even flawed research can yield value.

Chris’ Corner: Even More SVG Tricks

SVG has so many tricks up its sleeve. It’s really a full-featured drawing API literally designed for the web, but few of us really truly understand it nor reach for it enough. Heck, I even wrote a book about it, and I don’t. At the time, just getting people to use SVG for icons felt […]

The post Chris’ Corner: Even More SVG Tricks appeared first on CodePen Blog.

My Liz Danzico Joke

I used to tell a joke I made up. An American goes to the Vatican on Easter Sunday, joining a huge crowd of worshippers who gaze up in awe at a raised platform. On the platform stands the Pope. Beside him is Liz Danzico. The American turns to a nearby man and asks, “Excuse me. Who […]

The post My Liz Danzico Joke appeared first on Zeldman on Web and Interaction Design.

Still tired

I’m tired

Designing the Igalia Chats Logo

Last week, I designed a logo for the podcast I do at Igalia.

Chris Corner: The Tao of Demos¹

CodePen is a place where you can make demos. A Pen can be anything (a painting, a game, a landing page), but by and large, Pens today are demos. Why would you make a demo? Fam, why wouldn’t you make a demo? Demos are one of the most powerful tools we have as designers and […]

The post Chris Corner: The Tao of Demos¹ appeared first on CodePen Blog.

Quick thoughts on chips

A lot of people on social media are talking about chips and as a professional who has a dual masters in both potato and corn chips, I thought I’d chime in with some facts about chips.

1. Off-brand chips are rarely worth it.

Exceptions exist (e.g. Trader Joe’s fake Takis), but usually you will be disappointed (e.g. every other bag of chips at Trader Joe’s). Stop wasting your money on off-brand chips.

2. Some brands look off-brand but are top tier

This seems to invalidate the prior rule, but there are brands (e.g. Zapp’s and Cape Cod) that from the outside appear like off-brand chips, but are top tier premium chips. If you’re going to play at the upper levels of the chip game, you need to learn the difference. Start by asking friends “Had any good chips lately?”

3. Pretzels are a crapshoot, avoid mass quantities

Pretzels and other bread-based chips (pita chips, bagel chips, etc) are a risky investment. Bread chips dry out and flake and crumb at different rates – it might be a day, it might be a decade – and it can take years to fully understand the seasonal affectations of pretzels in the context of your microbiome’s levels of humidity. Never buy pretzels in large packages, because if they go bad (and they will), you’re stuck with an impossible amount of stale bread to eat.

4. It’s considerate to cut off the excess bag on a half-eaten bag of chips.

After you house the first half of a bag of chips in a single sitting, one considerate thing you can do is to cut off the excess bag before putting the clip on. It’s a way to communicate to other members in your household “Hey if you were expecting a full bag of chips, you’re gonna be disappointed.” Added bonus: It’s easier to get the bottom-of-the-bag crumbs out without greasing your fingers later.

5. If you’re gonna add flavor to chips, it needs to be lots of flavor.

This is for chip manufacturers, but we as consumers can vote with our dollars. Chips need lots of flavor.

  • I don’t want Doritos and Cheetos that are barely orange, I want them to be dangerous to touch while wearing white.
  • I don’t want Takis that are barely spicy, I want them to be atomic red with spice.
  • I don’t want Sour Cream n’ Onion Pringles that have a light dusting, gimme a layer of that stanky frosting please.

The only place this rule doesn’t apply is salt, you can have too much salt.

6. Nacho Cheese Doritos® are better outside

Last point on a specific chip brand, but it’s important you know. Nacho Cheese Doritos® (both Flavor-Blasted™️ and non-Flavor-Blasted™️) are better when you eat them outside. They way they interact with the sun and humidity changes the chemical makeup inside the chip itself. If you are eating these indoors you’re doing yourself a disservice.

Be sure to like and subscribe

If you want more chip-related thought blasters, be sure to smash that like button and ring that bell for more notifications.

Expert Idiot

I flew on a plane from my land locked metropolis to the beach in a different state. After a few taps on my phone, I am transfigured into an expert on local marine life and tide cycles. A work trip to a city I’ve never been to? Tip-tap, I have local knowledge of all the best cuisine within a three mile radius. Is something broken in my home? Air conditioner? Dry wall? Tip-tap, I’m now an expert tradesman. The power to access infinite knowledge is intoxicating.

At the same time, I feel the Internet and these pocket computers created a world of expert idiots. We’re quick to equate a list of facts as knowledge. We repeat it at lightspeed. Armed with a Dunning-Kruger’s worth of confidence, free to regurgitate these newly acquired facts with minimal accountability. We broadcast in TikToks, Instagrams, YouTubes, and most infamously podcasts.

Again, the access to knowledge is incredible. It’s the overwhelming confidence that comes along with it that I wonder about.

I read an anti-billionaire rant from Paul Krugman called “The Rich Are Crazier Than You and Me” and he described this same knowledge confidence dilemma when combined with wealth and socio-political issues.

[T]heir financial success all too often convinces them that they’re uniquely brilliant, able to instantly master any subject, without any need to consult people who’ve actually worked hard to understand the issues. And in many cases they became wealthy by defying conventional wisdom, which predisposes them to believe that such defiance is justified across the board. – Paul Krugman, The Rich Are Crazier Than You and Me

It’s easy to conflate wealth with wisdom, prosperity with divine blessing. This is the story of empires, monarchs, and religions. Speaking of money…

We live at a particular junction in time where Large Language Models and their propensity to hallucinate generate the wrong answer will exacerbate the problem. I’m excited about a future where I don’t need to be an expert at Photoshop to generate an image, but I’m leery of the ethics of how the machine learned that task. I think there are applications of this technology, but at the same time I’m confused how we all know the technology is spicy predictive text, an expert bullshitter, but we’ve said “Oh yeah, let’s roll this out everywhere and build businesses on this.”

One thing I’m trying to get better at on my two-white-guys-who-yammer-for-an-hour podcast is saying “Based on my experience…” or “In my opinion…” or “Based on my limited understanding…” or some such device to caveat my language… but I think the best and most apt answer is even shorter: “I don’t know.”

Scroll shadows with animation-timeline

View Demo on CodePen

I got myself into a position: sticky + horizontal scrolling situation with some overflowing tables the other day. The sticking worked fine but I was hoping to add shadows as an affordance that an overflow was occurring on the element. But you know me, I didn’t want to install some JavaScript component to do the job1. I wanted to find the laziest low-code way possible. Hyped up by Bramus’s new scroll-driven-animations.style website I wondered if scroll-driven animations could do the job.

  • Project Goal: Have a shadow appear when an element is overflowing as a hint that more content is available.
  • Bonus Goal: Add a shadow to sticky column as well for visual depth.

Let’s get started. The new syntax2 for scroll-based animations recycles the well-known @keyframes animation spec. There’s one new property-value combo you need to know:

.my-element {
  animation-timeline: scroll( <scroller> <axis> )
}

The new animation-timeline property accepts a scroll() function which takes two arguments.

  • <scroller> points to the element with the scrollbar and accepts values of nearest|root|self.
  • <axis> can be any of the directional values block|inline|y|x.

Here’s an example of how I added an inset shadow to the inside of overflow container:

.container-overflow {
  /* overflow */
  overflow-x: auto;
  width: 50%;

  /* shadow */
  animation: scroll-shadow-inset linear;
  animation-timeline: scroll( self inline );
}

@keyframes scroll-shadow-inset {
  /* start with inset shadow on right */
  from {
    box-shadow: inset -10px -10px 15px 0px rgb(0 0 0 / 0.3);
  }

  /* end with inset shadow on left */
  to {
    box-shadow: inset 10px -10px 15px 0px rgb(0 0 0 / 0.3);
  }
}

For the sticky column, I had to do something slightly different and use an regular box-shadow instead of the inset box-shadow. Also, because the sticky elements aren’t scrolling, I had to use the nearest keyword for my <scroller> value, which points to the overflow container.

.row > .cell:first-child {
    /* sticky */
    position: sticky;
    left: 0;
    background: Canvas;
    border-right: 1px solid #ddd;

    /* shadow */
    animation: scroll-shadow-sticky-elements linear;
    animation-timeline: scroll(nearest inline);
}

@keyframes scroll-shadow-sticky-elements {
  /* start with no shadow */
  from {
    box-shadow: none;
  }

  /* end with shadow pushing out right */
  to {
    box-shadow: 10px 10px 15px 0px rgb(0 0 0 / 0.3);
  }
}

🎉 We did it! The coolest part about this solution is that the scroll() animation only shows a shadow when there’s overflowing content that creates a scrollbar. There’s a slight bonus UX happening too where the shadow gets more prominent the “deeper” you scroll. All with just a few lines of code.

I’m happy with how this turned out. Now that I’ve tasted the future of scroll-based animations, I’m excited to (ab)use this more. Part of the reason I avoid doing more JavaScript-based scroll animations is because of all the JS that’s involved, it’s a lot of effort and technical debt to create even a subtle scroll animation. But with a CSS one-liner and some @keyframes behind the scenes… well, now the game has changed. I don’t have to futz with Intersection Observer or use the Sticky Sentinal pattern; it’s like a native isOverflowing check right there in CSS.

Browser support is pretty limited (Chrome 115+ at time of writing) but there is a polyfill for scroll-timeline if you get yourself into a stickier situation. For me and my projects, I’m going to treat animation-timeline: scroll() as a nice progressive enhancement.

  1. Although this <scroll-shadow> web component exists and is cool.

  2.  The old syntax is uses a @scroll-timeline keyframe system. There’s a handful of articles out there with that syntax. If you see that, close the browser.

Personality tests and nazis

Two book covers (on left) Mindf*ck by Christopher Wylie and (on right) The Personality Brokers by Merve Emre

I had the weird pleasure of listening to two books back-to-back that created a serendipitous connection. The first was Mindf*ck by Christopher Wylie, a behind the scenes first-person account of the Cambridge Analytica scandal and its attempts to usurp democracy. The second was The Personality Brokers by Merve Emre, a look into the strange history of the popular Myers-Briggs personality test.

I’ve been skeptical of Myers-Briggs since college. It always felt like a weird mix of psychology and astrology which reeks of pseudoscience. It’s okay if you use a tool to understand yourself, but I don’t think it survives widespread application. I also personally don’t like being put in boxes, so I hate it when people take the test “for me.” Classic ENFP, I know, I know. I always joked that it was “nazi science” and… well… I wasn’t that far off.

The story starts with Austrian Carl Jung who pioneered the study of psychological types with the dichotomies of rational vs irrational and introverts vs extroverts so he could (apparently) sleep with his students, patients, and coworkers. Notably, Jung was an anti-semite and ethno-nationalist who sympathized with the nazis until 1936 when he felt like they were going a little too far right. So he was not-not a nazi, if you catch my meaning. He went on to study psychedelics, presumably so he could sleep with his students, patients, and coworkers.

The mother-daughter team of Katherine Briggs and Isabel Briggs Myers picked up where Jung left off and created a personality test to help get people jobs that matched their personality. That’s a cool idea except they weren’t scientists by any standard. Katherine (the mom) wrote fiction and Isabel (the daughter) also wrote fiction. The last story Isabel published was about a Southern family grieving that they might have “Negro blood”… yikes, if you catch my meaning.

Briggs and Briggs Myers riffed on Jung’s work and did little research outside their own family and limited relationships. Inspired by Reader’s Digest quizzes, they conjured up a quiz-style personality test. They were so sure of its potential one even wrote in their diary about how they wanted to give Hitler the test so they could figure out the supreme nazi’s personality type. They wondered if you could use that intel and the power of personality tests to find more nazis.

The book mentions the story of a Jewish man who survived the holocaust that got wind of this whole plan and basically said “Classifying people like that is what fascists do.” Nevertheless, they persisted and personality tests became a popular tool in the 1950s for testing your employees (and rooting out Communists, union organizers, and other lazy people from the workplace). Mary McCaulley, Briggs Meyers’s successor who popularized the Myers-Briggs Type Indicator got her start non-consensually testing black individuals in her hospital trying to tease out the psychological differences between black and white people which is… uh… problematic, if you catch my meaning.

So… Is Myers-Briggs actually nazi science? Well, it’s not-not nazi science in my opinion.

Bringing this back to the books, in Mindf*ck I read about how Christopher Wylie wrote a psychographic targeting algorithm that did such a good job getting out the vote for the Obama campaign that after some years Cambridge Analytica got a hold of it. Funded by the right wing billionaire Mercer family, CA ran under the leadership of alt-right (read: “nazi”) bobblehead Steve Bannon. After 270,000 people took a University of Cambridge “Big Five” personality test on Facebook, CA got the data points and access it needed to harvest the personal data of 87 million users. CA used that data to influence the 2016 elections, Brexit, and a multitude of other global elections. It did a good job of “rallying the base”, if you catch my meaning.

The connection I made after reading these books is equal parts sad and poetic. In the end, the dream about using personality tests to discover nazis worked… and it worked well enough to radicalize them and bring rise to a new era of authoritarian fascism across the globe. The fabric of Western democracy torn to shreds. Your personality test might tell you a lot about yourself, but in the hands of unchecked authoritarians those tests tell them more. They will use any data and any means necessary to “nudge”, distort, control, and enrage the masses.

So, that was some interesting juxtaposition I got from reading two different books in the same month. Books are cool in that way. Anyways, what Hogwarts house are you?

Are your processes flawed? Let’s find out

Discover the dangers of blindly following processes in our latest newsletter. Learn why a toolkit of techniques is better suited for unique challenges.

Oh, Shield TV

After getting tons of notifications saying the Shield TV is running out of space, then deleting a bunch of apps, and still getting tons of notifications, I had to factory reset the entire thing. This is why I won’t use the Shield TV as a Plex Media Server or emulation station again. This is probably […]

If I’m already using React, why should I rewrite my app with Web Components?

In a recent post I answered a general question about Web Components and their lack of widespread adoption. I’m back with what is probably the most frequently asked question about Web Components:

“If I’m already using React/Vue/Svelte, why should I rewrite my app with Web Components?”

And my answer is “You probably shouldn’t.

Rewrites are painful and expensive. “Because I love web standards” isn’t enough justification for a rewrite. Don’t knock down a working system for a theoretical one. Only enter a rewrite if you’re trying to address a specific set of problems or have a specific goal. Before jumping headlong into any technology, it’s good to understand the problem space it’s trying to solve.

One hint at the problems Web Components solve is over on the site AreWebComponentsAThingYet.com. If you look at the nascar of logos on that page you’ll notice a trend… these all tend to be larger enterprise companies.

If your components only have one place to go, then you probably don’t need Web Components. Even if your components service a couple different apps or product teams that all use the same uniform tech stack, you probably don’t need Web Components. Where Web Components shine is when your components need to go to many places. Components in a large company not only need to go to the React app, they also need to go to the Drupal site, the old Rails app, the internal Java app, the Vue app, or the static Eleventy site some intern built; the list goes on and on. Web Components offer a path to deliver components without delivering complex build toolchains, so they can more easily graft into situations where teams face a wide surface area of languages and frameworks whether through decades of decision making, mergers and acquisitions, or chasing the latest hotness.

There’s other reasons that large companies filled with smart people have chosen Web Components over competing options. A short list of benefits that could be their own posts include:

  1. Greater portability between tech stacks
  2. Reduced framework churn
  3. Smaller libraries, less JavaScript
  4. Less tooling overhead

This doesn’t mean you need to go out and re-platform today. Use what’s working for you and your customers. But be sober about that second bit. I’ll leave you with Rupert’s Law of Web Components: As diversity of platforms increases within your company, so does the need for Web Components.

Something’s different with the Vision Pro

a smiling woman in an apple vision spatial reality headset with projected eyes

I remember that gap in time between when iPhone was announced and when the iPhone was launched. The entire world was pregnant with anticipation about being able to touch this new device. Apple fanboy that I was, I was among them but due to a bout of unemployment I didn’t expect to get a fancy phone any time soon. Then one day a gift from my co-workers at our newly formed Paravel arrived at my door; a brand new iPhone that changed how I spent my all idle time. A clear delineation that I had entered a new post-PC era of computing.

Fast-forwarding to today… this Spring Apple launched a brand new category of computing, a spatial reality device called the Vision Pro. It’s impossibly expensive, yet I’m interested in those ski goggles. Playing with your kids while having a big piece of glass strapped to your face is a bit dystopian, but I have a slight obsession with Web VR/XR and have hundreds of ideas for interesting experiences I’d like to prototype. I’d love to use this device. Yet, something’s missing…

That thrill of expectation that an incredible new and novel device is around the corner… is gone. I’m wondering what it could be and have human generated a list of possible reasons why.

  1. It could be years of routine Apple product cycles and rumor sites de-sensitizing me to new products.
  2. It could be the marketing machine hasn’t kicked in yet for the Vision Pro.
  3. It could be Apple themselves don’t have confidence in the product and I’m echoing back that energy.
  4. It could be a rare snafu in Apple’s timing, announcing a bit too late after the Metaverse was already dead.
  5. It could be the cold, dead, dystopian, projected eye balls.
  6. It could be there’s no “killer app” use case yet.
  7. It could be the power of comparison; in 2007 we were years into using crappy Motorola phones with operating systems from the 90s and iOS looked like a ten-step evolution of something we already had.
  8. It could be the iPhone was the successor to the well-loved, multi-generation iPod we were all familiar with.
  9. It could be how the announcement event painfully tried to hide compromises in the design like the kludgy external battery.
  10. It could be too many years of being online and my brain is already looking for the next materialistic dopamine hit.
  11. It could be – and probably is – the price.

I’d love to pinpoint why the Vision Pro has already exited our collective conscious. I have a fascination with follow-up products from well-loved companies with infinite marketing bucks not succeeding (Kindle Phone, Windows Phone, etc). I’d love to know why this revolutionary device feels different. Like I said, I hope it succeeds because one day I hope to look at my children with the hollowness that can only come from empty projected eyeballs.

I’m kidding, I do want one.

Chris’ Corner: React is Good, Bad, Old, Reliable, Stodgy, Stable, and Obsoleted

There is something about [INSERT MOST POPULAR THING] that inspires people to philosophize. Sometimes it’s a bummer. It’s tough to avoid the never-ending stream of “news” about Elon Musk, which strongarms your brain into having an opinion about him. WordPress, by the numbers, is pretty popular, so I’ll bet you have some kind of opinion […]

The post Chris’ Corner: React is Good, Bad, Old, Reliable, Stodgy, Stable, and Obsoleted appeared first on CodePen Blog.

Uncovering a new class of responsibilities

If you watch one video about AI/LLM responsibility, I recommend watching The AI Dilemma by Aza Raskin and Tristan Harris, creators of the Netflix documentary The Social Dilemma. I found it to be a sober, non-doomerist look at the problems AI/LLMs pose when paired with the capitalistic race to rollout this technology in the hands of all consumers.

Three rules of technology outline their nearly hour long talk:

  1. When you invent a new technology, you uncover a new class of responsibilities
  2. If that tech confers power, it starts a race
  3. If you do not coordinate, the race ends in tragedy

It’s those last steps that are the concerning ones. If we fail to respond to #1, we end up with #3. They soberly draw comparisons to the nuclear era and how collaboration – in the form of nuclear disarmament treaties – mitigated a global disaster where five people decide the fate of the world. With that framing, the polling among AI researchers doesn’t bode well:

50% of AI researchers believe there’s a 10% or greater chance that humans go extinct from our inability to control AI.

Those aren’t the odds we want. I’m not going to go full doomer here, but I think we already see the erosion of trust and distortion of reality with poor information, disinformation, deep fakes, and TikTok filters; it’s impossible to tell what’s real anymore. That has personal (e.g. body image) and social (e.g. geopolitical) ramifications. It causes me to wonder if the last 30 years of the internet will be undone. Will we reject online worlds and go back to peer-to-peer LAN networks, in-person notaries, and dropping by someone’s house instead of calling or texting? Or are we comfortable with a future where robots and AI chatbots are our most intimate friendships?

It’s a lot to consider. The last bit from the talk rattling around in my head was the “GLLM” (pronounced “golem”) pun. It’s a fitting analogy as we animate these metal machines with electric rock brains… is it too late to pull the shem from its mouth.

/via bradfrost.com

JavaScript waitFor Polling

As more of the JavaScript developers write becomes asynchronous, it’s only natural to need to wait for conditions to be met. This is especially true in a world with asynchronous testing of conditions which don’t provide an explicit await. I’ve written about waitForever, waitForTime, and JavaScript Polling in the past, but I wanted to have […]

The post JavaScript waitFor Polling appeared first on David Walsh Blog.

Vibe Check №28

Cicadas electrifying the treetops, the hot air hotter, crispy grasses under sandaled feet, asphalt sizzling to the touch. Children ebb and flow from camps, playdates, sleepovers, long days, missed bed times, and the familiar feeling of parental shame over too much screentime. School starts tomorrow, back to the top of the luge track we go.

Trying to staying calm

In my last vibe check I talked about my “Stress Reduction Journey” after a mild health scare and some self-realizations about the impact stress is having on my body. Journeys are long, but it’s nice to see some immediate results. It made me happy to get an alert from my watch notifying me that my average resting heart rate lowered ~10 BPM.

Apple Health chart showing average heart rate BPM going from 79 beats per minute to 69 beats per minute

That’s a significant change in lifestyle. On top of that, I’ve lost ~20 pounds! I’m on a diet, but most of that was stress reduction alone. This has been an educational process for me about the levels of cortisol pumping through my veins and how my body responds to stress; bucketing calories thinking daily life is a bear attack.

Figma Config in San Francisco

The main exhibition hall of Moscone center. A giant room with 12 foot tall ideographs in the middle of the room surrounded by couches and vendor kiosks

Towards the end of June, Figma flew me out to attend their annual conference: Config 2023. At over 11,000 attendees Config is hands down the biggest conference I’ve ever attended (if you don’t count SXSW). I was there as an influencer, which is an uncomfortable title and I’m not a designer but that was the whole point. Figma launched a slew of developer-centric features and wanted some developer feedback.

The big feature they launched is Dev Mode. I will write about it, but the tl;dr is that I feel like it gives designers and developers a shared language of components and variables that can act as a bridge between disciplines. And I think that bridge is great for organizations where that bridge is damaged or doesn’t exist.

All in all, I had a great time, saw some old faces, and I met a lot of fun new people as well. I had fun exploring the city from the Painted Ladies to Embarcadero. The highlight of ending up at a wild bar in Chinatown will be a night I’ll never forget.

Off to San Diego

A glare filled snapshot of the beach

To escape the Texas heat my family vacated to San Diego, resuming a tradition from my wife’s childhood. For the first week we got an AirBnB on the bayside of Mission Beach with our friends. We had the best time boogie boarding, cruising the boardwalk, doing rides at Belmont Park, and had a productive day of rides and shows at Sea World. It’s wonderful to travel with friends where kids get along and everyone has similar vibes and expectations. Good people, good fun.

As we said goodbye to our friends, we said hello to my wife’s family as they joined us for three more days in San Diego. Kids pal’d around with cousins on the bay and I went golfing with my male in-laws. I golf once a year so I did about as good as I expected with my incurable slice. The next couple days were beach bound and sunny. We wrapped up our trip by driving my in-laws’ Jeep back across the desert to Phoenix, celebrating my wife’s birthday with her family, and meeting our new baby grandnephew lil’ Hank.

Given my skin sensitivities and work obligations, I don’t really go on vacation so much as I attend my wife’s vacation. But I slathered myself in metallic ointments, sat under a solar fortress, and am happy to report that I didn’t get a sunburn so we’ll call it a successful trip. My son got good at smashball and my daughter (like her mom) loves the beach; endlessly cartwheeling and catching waves. These are good memories.

From RSS 2000 to RSS Zero

Feedbin RSS reader with zero unread items

I got behind on my RSS that caused some slight anxiety to brew because there were a lot of great posts by smart people hidden in that queue that I wanted to read. Taking a strategy of “one friend a day” and three weeks of late night power reading, I managed to nerf my unread queue from 2000+ unreads to zero. 🎉

Luro is go for launch 🚀

A burndown chart for issues completed over the last two weeks, a steep curve

Work-wise, it’s busy season at Luro as we prepare for public launch centered around a new feature we’re excited about. I’ve always thought Luro was useful, but most of its value accrues over time in a team context. Our new feature will make Luro more valuable to individuals right out of the box. There’s a lot to talk about so I’m excited to spend the next couple months sharing the app with y’all.

Stats

🧠 Learning

Lots of paths to learn about, but these are the four I keep coming back to.

  • Climate Change - This record-breaking summer has me pondering where change needs to happen.
  • AI - AI is so damned hyped. But is it useful? Is it dangerous? A lot to learn about this burgeoning field.
  • Dyslexia - Last year we found out my daughter has dyslexia and I spent a lot of time trying to learn about her unique brain. Dyslexic brains are marvelous how the widely-spaced mini-columns in their brain reroute and rewire pathways to process connections other neurotypical brains wouldn’t think about.
  • Adult ADHD - In more self-diagnosis, thanks to Dr TikTok, my wife and I are coming around to the realization that we both probably struggle with differing types of ADHD (self-medicated through caffeine).

💪 Fitness

The big news this vibe check is weight loss.

  • I’ve lost 20 pounds! I’m 10 weeks into my 12 week weight loss program and mad about food.
    • No alcohol, candy, or other fun (unless there’s an occasion)
    • No diet cokes, drinking tea and “fun water” (water with a splash of juice)
    • Eat when I’m hungry (two’ish meals per day)
    • Eating a lot of pre-prepared Snap Kitchen
  • Resting heart rate down ~10 BPM.
  • Went swimming (once)!

I’m starting walks to school again, plan is to extend them a bit or hit the pool right away.

📖 Reading

Got through lots of books this summer.

Finished

  • Mindf*ck by Christopher Wylie- A behind the scenes look at the Cambridge Analytica scandal and the software that powered it.
  • We’ve Got to Try by Beto O’Rourke - I wanted a retrospective from Beto on his two failed attempts in Texas politics. What I got was a civil rights lesson based on stories from unsung heroes in the great state of Texas.
  • Leviathan Wakes by James S.A. Corey - A proper sci-fi opera.
  • The Personality Brokers by Merve Emre- The story behind the (in)famous Myers-Briggs personality test.
  • This Is How You Lose the Time War - A Catch Me If You Can style spy vs. spy story but with time jumping.
  • Think Again - A book learning how to rethink your decisions and opinions. I wish I had read this earlier in my career.
  • The Dyslexic Advantage - This book does an incredible job breaking down the strengths and weaknesses of these unique brains and how they mismatch with society.

Started

  • Caliban’s War - Sequel to Leviathan Wakes
  • Unlocked - A book on meditation by the guy who coached Michael Jordan and Kobe Bryant to meditate.

📝 Blogging

Not my best summer of blogging, but wrote lots of drafts.

🎙 Recording

Shoptalk goes on! I’m sure I expanded my universe of characters but can’t remember.

🗣️ Speaking

⌨️ Open source

  • Struggling at maintaining the A11y Project, but have started a Discord for the maintainers to get more organized.

📺 Media Consumption

Movies

  • Spider-Man: Across the Spider-Verse - Loved it. Massive movie on a massive scale.

TV

  • The Expanse S1 (Prime) - Great adaptation of the Leviathan Wakes universe.

Anime

  • Gundam The Witch From Mercury S2 (Crunchyroll) - The final season of the latest Gundam series. I loved it.
  • Gundam Build Fighters S2 (Crunchyroll) - More kids building gunpla and battling them. Not as good as the first season, but fun.
  • Gundam: The Origin (Hulu) - A modern adaptation with a vintage feel
  • Synduality Noir S1 (Hulu) - A new Bandai (who make Gunpla) series where youth pilot big mechs set in a post-apocalyptic sci-fi universe.

Podcasts

  • None

🤖 Gunpla

  • HGUC RGM-79SP Sniper II - I love these retro GM units. The plastic cracked on the backpack when panel lining, but I still love the look of this one.
  • HGWFM Gundam Aerial - The star mech from the latest Gundam series The Witch From Mercury. Such a beautiful kit, great build, wonderful gimmicks, and

👾 Video games

  • Hit pause on Zelda: Tears of the Kingdom

Workbench is coming along!

I finally got a new charger device for all the phones I test. But no workbench would be complete without David Faustino’s single “I told ya” on vinyl.

queryLocalFonts

One of the larger downloads when requesting a webpage are custom fonts. There are many great techniques for lazy loading fonts to improve performance for those on poor connections. By getting insight into what fonts the user has available, we can avoid loading custom fonts. That’s where queryLocalFonts comes in — an native JavaScript function […]

The post queryLocalFonts appeared first on David Walsh Blog.

I wish I could hire me

Thinking about how to get myself to clean up and go through all the boxes that are in storage after moving over a year ago. The thought popped into my head, “I wish I could hire me to do that.” I initially laughed it off, but then I thought about it a little more. I can hire […]

Crossing

I managed to get out and play in trad sessions for four days straight: Sunday, Monday, Tuesday, and Wednesday.

Two fiddlers, a whistler and a guitarist playing around a pub table. A concertina player, banjo player, and fiddler playing round a pub table festooned with pints. A bodhrán player, guitarist and fiddler playing around a pub table with drinks on it. Two fiddlers and an accordion player gathered round a pub table, playing.

Today I rest. Or rather, I pack.

There won’t be any Irish music sessions in my calendar for at least the next two weeks. There won’t be much of anything in my calendar. I’m about to be incommunicado as I travel to Amerikay on the wide Atlantic ocean.

You might have seen that video that’s been doing the rounds about how cruise ships got so big. I’m not going on a cruise. I’m going on a crossing. That video ends with:

There are over 320 cruise ships sailing around the world right now. But there’s only one ocean liner left. The Queen Mary 2.

That’s going to be my mode of transportation and my home for the next week.

Then I’ll be in New York for a weekend, followed by most of a week lying on St. Augustine beach in Florida.

All of my sparklines are about to flatline for a while: no blog posts, no links, no notes. I won’t have any internet access on board the ship.

Time for me to switch off my work email. I thought about setting up an autoresponder to let people know that I won’t be replying to their email for a few weeks. But then I thought, how is that any different from how I normally respond to email?

Planning for fun?

I just came off a four-day weekend after going full tilt at work for the past several months and I’m still a bit tired. I’m glad I’ve got a great job with PCMag and am very much enjoying the actual work (and the people are awesome, too). As I’m adjusting my style to match PCMag’s, […]

Harness AI for Landing Page Perfection

From writing compelling copy to generating exactly the image you require, AI is an invaluable tool for both creating and testing landing pages.

Automation

I just described prototype code as code to be thrown away. On that topic…

I’ve been observing how people are programming with large language models and I’ve seen a few trends.

The first thing that just about everyone agrees on is that the code produced by a generative tool is not fit for public consumption. At least not straight away. It definitely needs to be checked and tested. If you enjoy debugging and doing code reviews, this might be right up your street.

The other option is to not use these tools for production code at all. Instead use them for throwaway code. That could be prototyping. But it could also be the code for those annoying admin tasks that you don’t do very often.

Take content migration. Say you need to grab a data dump, do some operations on the data to transform it in some way, and then pipe the results into a new content management system.

That’s almost certainly something you’d want to automate with bespoke code. Once the content migration is done, the code can be thrown away.

Read Matt’s account of coding up his Braggoscope. The code needed to spider a thousand web pages, extract data from those pages, find similarities, and output the newly-structured data in a different format.

I’ve noticed that these are just the kind of tasks that large language models are pretty good at. In effect you’re training the tool on your own very specific data and getting it to do your drudge work for you.

To me, it feels right that the usefulness happens on your own machine. You don’t put the machine-generated code in front of other humans.

Chris’ Corner: Useful HTML and CSS Patterns

The <table> is one of the grand enemies of responsive design. They don’t wrap (that wouldn’t make much sense) so they can “blow out” the width of a mobile device pretty easily. The overflow property also doesn’t work on them. So you gotta find a way, and it really depends on the data. Sometimes a […]

The post Chris’ Corner: Useful HTML and CSS Patterns appeared first on CodePen Blog.

Use XHR/fetch Breakpoints!

Web debugging tools are so incredibly excellent these days. I remember the days where they didn’t exist and debugging was a total nightmare, even for the simplest of problems. A while back I introduced many of you to Logpoints, a way to output console.log messages without needing to change the source files. Another great breakpoint […]

The post Use XHR/fetch Breakpoints! appeared first on David Walsh Blog.

The Next Generation of Web Layouts

Who will design the next generation of readable, writerly web layouts? Layouts for sites that are mostly writing. Designed by people who love writing. Where text can be engaging even if it isn’t offset by art or photography. Where text is the point. With well considered flexible typesetting, modular scaling, and readable measures across a full range of proportions and […]

The post The Next Generation of Web Layouts appeared first on Zeldman on Web and Interaction Design.

This is what stress looks like

I’ve been so busy today, this is the living room. I’m going to take a break to eat, reset and maybe clean up a little. 

How can designers save the planet?

How can designers help save the planet? How can we do better, create products with smaller footprints and influence stakeholders in that direction?

Tuesday, August 1, 2023

The return to PCMag has been a lot of fun and hard work. For once, I don’t feel bad about asking for mobile devices to get a feel for them. I’ve reviewed a bunch of phones already including the Motorola Razr+, the Google Pixel Fold, and the Nothing Phone (2). I’m currently working on the […]

Anyone can dig up a road

All the roads in Austin are awful. It destroys my faith in civil engineering a bit. There’s a couple spots (southbound Burnet near North Loop) where you can catch air on a storm drain if you’re going the speed limit. The extreme Texas heat determines a lot of the road conditions by warping the asphalt. The giant live oak tree clusters lifting entire sections of concrete do their part as well. But that doesn’t explain all the shoddy patch work rattling your hubcaps off.

There’s a human element happening as well. Some years ago I learned almost anyone can dig up a road. My friend who owns a food trailer park in South Austin told me about this when he connected his sewer main. Get the permits, maybe prove you have the correct equipment, then jackhammer your way through the city road until your heart’s content. You don’t have to be a “road expert” or professional street paver to do it, you just need to attempt to repair the road when you’re done. I was astounded.

A swampy, soupy, oval-shaped pond of concrete in front of my house, about 4ft by 8ft in size

Last week a crew of guys made a big ol’ hole in the street in front of my house. They were fixing a broken gas or water line going to my neighbors’ houses. As they finished up late, hot, eager to go home, the patch job on the street was something else. Not a slick smooth surface that looked like a road, but a three-dimensional soupy blob of concrete covered with a lumpy, goopy layer of asphalt textured by the excavator tracks. I assume these guys are professionals but I doubt they come back and do quality assurance. My takeaway from the day was it’s shockingly easy to mess up a road.

All this talk about rough spots and jacked up roads has me thinking about websites. I think websites have the same problem. Lots of people work on websites. You don’t need to be a “website expert” to put something on a website; at most you need a login for a CMS or git access. It’s shockingly easy to mess up an entire website.

So whenever I come across a bad website - one with bad performance, bad accessibility, bad design, etc – and I’m about to throw my computer across the room, I stop and rejoice because some unqualified person jumped the turnstyle and was able to fuck up a website real good.

Anyways. I’m building a tool that helps you monitor your roads website. It’s called Luro and I think you’re gonna love it.

Chris’ Corner: Clever CSS Ideas & Explanations

If you think frosted glass effect in CSS, you probably think of the backdrop-filter property. Just backdrop-filter: blur(10px); will do the trick. I still think the look is kind of cool and fresh, but I should check myself a little here as the effect was popularized in the iOS 7 release which was 10 years […]

The post Chris’ Corner: Clever CSS Ideas & Explanations appeared first on CodePen Blog.

If Web Components are so great, why am I not using them?

Rem recently asked:

“I’m also interested to know if anyone has a hot take on why [Web Components has] taken a decade to get traction.”

Web Components have a marketing problem. I have a lot of opinions about this, so many that I joined the Web Components Community Group.

  1. Too low-level, designed for framework authors. Web Components were designed as a low-level primitive for framework authors, but framework authors were like “nah” because most of their problems were already solved in user-land. Switching to web components and Shadow DOM, despite any performance advantages, would fundamentally upset of some conventions established in these frameworks. Thankfully, support for importing and exporting web components has improved in a lot of frameworks and you can almost use custom elements everywhere. But there are still aspects like style encapsulation that are a major footgun for majority adoption.
  2. Marketing problem from heavy-handed advocacy. Early on there was a lot of confusion between Web Components (the specs) and Polymer (the Google UI framework). Polymer was in a weird state for a long time: positioned as a competitor to other UI frameworks, even competed with Google’s other UI framework Angular, used a weird paper/iron/gold metaphor, required a polyfill, then Mozilla nuked HTML Imports… a shaky foundation to build on. Despite those real ergonomic and adoption concerns, some Google advocates engaged Twitter with a vibe of “React is shit and slow, you’re a dummy and a bad person if you use it, use web components instead” and… that strategy did not win hearts and minds. In that same timeframe, Google’s AMP (also made with web components) echoed the same talking points billing itself as a “bitter pill that the bloated mobile web had to swallow”. AMP is just one storyline in The Lost Decade of Web Development, but much has changed over the years. Lit solves a lot of problems/confusion that existed with Polymer and nowadays Web Components aren’t strictly “a Google thing”. Dozens and dozens of non-Google flavors of Web Components now exist like Stencil or Hybrids that are worth checking out.
  3. Hard to invest in something unknown. As an engineering manager it’s hard to advocate for re-platforming from React/Angular/Vue/Svelte to Web Components because there weren’t lots of case studies or popular products built with it. No website that says “blazing fast”. It’s not immediately clear what the advantages were and the intricacies of the Shadow DOM might, in fact, create more problems for your team. Now lots of companies are using web components to solve their problems. Despite these big companies adopting web components, there’s still a need for high quality case studies and blog posts.
  4. Not truly supported until very recently. Chrome in 2013, Safari in 2016, Firefox in 2018, and weren’t supported in Edge until 2020 when they switched to Chromium. If you used Web Components in production before 2020, you were using experimental tech. Today, support is much more broad. Safari and Firefox are a bit slower in supporting new standards, but some of the big gaps are now closed. Browser support coupled with a healthy diversity of libraries and new meta-frameworks like Rocket, Enhance, and Eleventy with WebC, there’s never been a better time to get started with Web Components.
  5. Web Components are slow. The last thing that’s held Web Components back is that they’re slow… slow, like brisket I like to say. Slow isn’t always a bad thing. Generally, they’re a stable foundation to build on but if you need a certain feature rolled out in every browser, you could potentially be waiting for a couple years for that fix to land. These are sometimes solveable in user-land, but with something like Cross-root ARIA, that’s a spec issue.

If I could turn back time…

If I could turn back time and get a redo on the whole Web Components rollout, I’d redo

  1. Make the ideal user persona a WordPress user instead of framework authors
  2. Establish the Web Components CG a lot earlier, make them less of “a Google thing”
  3. Make the styling story less confusing
  4. Establish a code of conduct at Google advocates
  5. Kill Firefox before they could kill HTML Imports

But that’s me. I’d love to know what you think Web Components’ big problems are and I can upstream that feedback to the Community Group.

Mastodon is easy and fun except when it isn’t

After my last long post, I got into some frustrating conversations, among them one in which an open-source guy repeatedly scoffed at the idea of being able to learn anything useful from people on other, less ideologically correct networks. Instead of telling him to go fuck himself, I went to talk to about fedi experiences with people on the very impure Bluesky, where I had seen people casually talking about Mastodon being confusing and weird.

My purpose in gathering this informal, conversational feedback is to bring voices into the how should Mastodon be” conversation that don’t otherwise get much attention—which I do because I hope it will help designers and developers and community leaders who genuinely want Mastodon to work for more kinds of people refine their understanding of the problem space.

what I did

I posted a question on Bluesky (link requires a login until the site comes out of closed beta) for people who had tried/used Mastodon and bounced off, asking what had led them to slow down or leave. I got about 500 replies, which I pulled out of the API as a JSON file by tweaking a bash script a nice stranger wrote up on the spot when I asked about JSON export, and then extracted just the content of the replies themselves, with no names/usernames, IDs, or other metadata attached. Then I dumped everything into a spreadsheet, spent an hour or so figuring out what kind of summary categories made sense, and then spent a few more hours rapidly categorizing up to two reasons for each response that contained at least one thing I could identify as a reason. (I used to do things like this at a very large scale professionally, so I’m reasonably good and also aware that this is super-subjective work.)

None of this is lab-conditions research—sorry, I meant NONE OF THIS IS LAB-CONDITIONS RESEARCH—and I hope it’s obvious that there are shaping factors at every step: I’m asking the question of people who found their way to Bluesky, which requires extra motivation during a closed beta; I heard only from people who saw my question and were motivated to answer it; I manually processed and categorized the responses.

I didn’t agonize over any of this, because my goal here isn’t to plonk down a big pristine block of research, but to offer a conversational glimpse into what real humans—who were motivated to try not one, but at least two alternatives to Twitter—actually report about their unsatisfactory experiences on Mastodon.

Lastly, I’ve intentionally done this work in a way that will, I hope, prove illegible and hostile to summary in media reports. It’s not for generalist reporters, it’s for the people doing the work of network and community building.

A note on my approach to the ~data and numbers: It would be very easy to drop a bunch of precise-looking numbers here, but that would, I think, misrepresent the work: If I say that I found at least one categorizable reason in 347 individual replies, that’s true, but it sounds reassuringly sciency. The truth is more like of the roughly 500 replies I got, about 350 offered reasons I could easily parse out.” So that’s the kind of language I’ll be using. Also, I feel like quoting short excerpts from people’s public responses is fine, but sharing out the dataset, such as it is, would be weird for several reasons, even though people with a Bluesky login can follow the same steps I did, if they want.

got yelled at, felt bad

The most common—but usually not the only—response, cited as a primary or secondary reason in about 75 replies—had to do with feeling unwelcome, being scolded, and getting lectured. Some people mentioned that they tried Mastodon during a rush of people out of Twitter and got what they perceived as a hostile response.

About half of the people whose primary or secondary reasons fit into this category talked about content warnings, and most of those responses pointed to what they perceived as unreasonable—or in several cases anti-trans or racist—expectations for content warnings. Several mentioned that they got scolded for insufficient content warnings by people who weren’t on their instance. Others said that their fear of unintentionally breaking CW expectations or other unwritten rules of fedi made them too anxious to post, or made posting feel like work.

Excerpts:

  • Feels like you need to have memorized robert’s rules of the internet to post, and the way apparently cherished longtimers get hostile to new people
  • i wanted to post about anti-trans legislation, but the non-US people would immediately complain that US politics needed to be CWed because it wasn’t relevant”
  • I don’t know where all the many rules for posting are documented for each instance, you definitely aren’t presented them in the account creation flow, and it seems like you have to learn them by getting bitched at
  • Constantly being told I was somewhat dim because I didn’t understand how to do things or what the unwritten rules were.
  • I posted a request for accounts to follow, the usual sort of thing, who do you like, who is interesting, etc. What I got was a series of TED Talks about how people like me were everything that was wrong with social media.
  • sooooooo much anxiety around posting. i was constantly second-guessing what needed to be hidden behind a CW
  • the fact that even on a science server, we were being badgered to put bug + reptile stuff behind a CW when many of our online presences are literally built around making these maligned animals seem cool and friendly was the last straw for me

What I take from this: There obviously are unwelcoming, scoldy people on Mastodon, because those people are everywhere. I think some of the scolding—and less hostile but sometimes overwhelming rules/norms explanation—is harder to deal with on Mastodon than other places because the people doing the scolding/explaining believe they have the true network norms on their side. Realistically, cross-instance attempts to push people to CW non-extreme content are a no-go at scale and punish the most sensitive and anxious new users the most. Within most instances, more explicit rules presented in visible and friendly ways would probably help a lot.

In my experience, building cultural norms into the tooling is much more effective and less alienating than chiding. The norm of using alt-text for images would be best supported by having official and third-party tools prompt for missing alt-text—and offer contextual help for what makes good alt text—right in the image upload feature. Similarly, instances with unusual CW norms would probably benefit from having cues built into their instance’s implementation of the core Mastodon software so that posters could easily see a list of desired CWs (and rationales) from the posting interface itself, though that wouldn’t help those using third-party apps. The culture side of onboarding is also an area that can benefit from some automation, as with bots on Slack or Discord that do onboarding via DM and taggable bots that explain core concepts on demand.

couldn’t find people or interests, people didn’t stay

A cluster of related reasons came in at #2, poor discoverability/difficulty finding people and topics to follow, #4, missing specific interests or communities/could only find tech, and #7, felt empty/never got momentum. I am treating each group as distinct because I think they’re about subtly but importantly different things, but if I combined them, they’d easily be the largest group of all.

People in the poor discoverability” group wrote about frustration with Mastodon features: how hard it was to find people and topics they wanted to follow, including friends they believed to already be on Mastodon. They frequently also said they were confused or put off by the difficulty of the cross-server following process as secondary reasons. Several people wrote about how much they missed the positive aspects of having an algorithm help bring new voices and ideas into their feeds, including those that they wouldn’t have discovered on their own, but had come to greatly value. Another group wrote about limited or non-functional search as a blocker for finding people, and also for locating topics—especially news events or specialist conversations.

The missing specific interests or communities” group wrote about not finding lasting community—that the people and communities they valued most on Twitter either didn’t make it to Mastodon at all, or didn’t stick, or they couldn’t find them, leaving their social world still largely concentrated on Twitter even when they themselves made the move. Several also noted that tech conversations were easy to find on Mastodon, but other interests were much less so.

The felt empty” group made an effort to get onto Mastodon, and in some cases even brought people over with them, but found themselves mostly talking into a void after a few weeks when their friends bailed for networks that better met their needs.

Excerpts:

  • For me, it was that Mastodon seemed to actively discourage discoverability. One of the things I loved most about Twitter was the way it could throw things in front of me that I never would have even thought to go look for on my own.
  • I feel like every time I try to follow a conversation there back to learn more about the poster I end up in a weirdly alien space, like the grocery store on the other side of town that’s laid out backwards
  • It seemed like it needed to pick a crowd, rather than discover new ones. Fewer chances at serendipity.
  • I also remember trying to follow instructions people posted about simple” ways to migrate over your Twitter follows/Lists, & none of them really worked for me, & I got frustrated at how much time I was spending just trying to get things set up there so I wasn’t completely starting from scratch
  • Mastodon was too isolating. And the rules made me feel like the worst poster.
  • Quote-replies from good people giving funny/great information is how I decide are important follows.
  • Discoverability/self promo is limited & typing out 6 hashtags is annoying. # being in the actual posts clutter things (unlike cohost/insta).
  • Difficulty in finding new follows was high up for me. But even once I got that figured out, it was a pain to add new people to follow if they weren’t on my instance.
  • finding people you want to follow is hard enough. Adding in the fact that if you joined the wrong server you might never find them? Made it seem not worth the trouble.
  • I couldn’t really figure out how to find people and who was seeing what I posted; I was never sure if I had full visibility into that
  • the chief problem was an inability to find a) my friends from Twitter who were already there and b) new friends who had similar interests, both due to the bad search function
  • Just didn’t seem active enough to feel worth learning all the ins and outs.

What I take from this: Mastodon would be much friendlier and easier to use for more people if there were obvious, easy ways to follow friends of friends (without the copy-paste-search-follow dance). Beyond making that easier, Mastodon could highlight it during onboarding.

Making it easy to search for and find and follow people—those who haven’t opted out of being found—would also be tremendous help in letting people rebuild their networks not just when coming from elsewhere, but in the not-that-rare case of instances crashing, shutting down, or being defederated into oblivion, especially since automatic migration doesn’t always work as intended.

Missing replies also feed into this problem, by encouraging duplicate responses instead of helping people find their way into interesting conversations and notes—a social pattern that several people mentioned as something they prize on more conversationally fluent networks.

too confusing, too much work, too intimidating

The next big cluster includes group #3, too confusing/too much work getting started, group #5, felt siloed/federation worked badly, and group #7, instance selection was too hard/intimidating.

A lot of people in the responding group found the process of picking an instance, signing up, and getting set up genuinely confusing. Others understood how to do it, but found it to be too time-consuming, or too much work for an uncertain return on investment. A couple of people had so many technical errors getting signed up to their first instance that they gave up. Several mentioned that they were so flooded with tips, guides, and instructions for doing Mastodon right that it seemed even more confusing.

Many found the idea and practice of federation to be confusing, offputting, or hostile; they cited difficulties in selecting the right” instance and shared stories about ending up on an obviously wrong one and then losing their posts or having migration technically fail when they moved. Several explicitly used the words silo” or siloed” to describe how they felt trying to find people who shared their interests and also, I think crucially, people who didn’t share special interests, but who would be interesting to follow anyway. (This is obviously intimately tied to discoverability.)

Several brought up patchwork federation and unexpected or capricious defederation. Side conversations sprang up over how difficult people found it to pigeonhole themselves into one interest or, conversely, manage multiple accounts for multiple facets of their lives.

Excerpts:

  • My Twitter friends joined various Mastodon servers that didn’t talk to each other and I gave up on trying to figure it out.
  • I’m tech savvy and have found mastodon simply opaque. I’ve set up 4 accounts, each on a different server, and don’t know how to amalgamate all the people I’m following everywhere (assuming all those servers federate with each other).
  • It was the thing where people had to make whole twitter threads just to explain how to sign up
  • the federation model is a mess and it’s impossible to use. i’ve been using computers all day every day since the 90s and mastodon makes me question whether i’m actually good at them
  • discovered I was on some kind of different continent from my friends, and could not follow them, nor they me. Immediately felt frustration and disgust and never looked back.
  • I’m tech savvy and have found mastodon simply opaque. I’ve set up 4 accounts, each on a different server, and don’t know how to amalgamate all the people I’m following everywhere
  • I was told picking a server didn’t matter. Then it turned out it actually mattered a great deal for discoverability. Then I’m told migrating is easy’, which is just a straight up lie.
  • Just 100 tiny points of friction for little return

What I take from this: I agree with these people, and I think all fedi projects meant for a broad audience should focus on fixing these problems.

too serious, too boring, anti-fun

People in this category talked about a seriousness that precluded shitposting or goofiness, and a perceived pressure to stay on topic and be earnest at all times.

  • It felt like the LinkedIn version of Twitter - just didn’t have any fun there
  • It feels overly earnest and humorless — I don’t consider myself a particularly weird or ironic poster but I want some of those people around saying funny stuff, you know?
  • And in the occasional moments where I do feel like being a little silly & humorous, I want to be in a crowd that will accept that side of me rather than expecting a constant performance of seriousness!
  • it just didn’t have as much fun or joy as early Twitter and Bluesky
  • ultimately, I just bounced off of the culture, because it wasn’t banter-y and fun. It feels too much like eating your vegetables.

What I take from this: Honestly, I think this is the most obvious culture clash category and is less something that needs to be directly addressed and more something that will ease with both growth and improved discoverability, which will help people with compatible social styles find each other. I think the other piece of this is probably the idea of organizing people into interest-based instances, which I think is fundamentally flawed, but that’s a subject for another time.

complicated high-stakes decisions

There’s a meta conversation that is probably unavoidable, and that I’d rather have head-on than in side conversations. It’s about what we should let people have, and it shapes the discourse (and product decisions) about features like quote posts, search, and custom feeds/algorithms—things that are potentially central in addressing some of the problems people raised in their replies to my question on Bluesky.

Broadly speaking, in the landscape around and outside of the big corporate networks, there are two schools of thought about these kinds of potentially double-edged features.

The first, which I’ll call Health First, prefers to omit the features and affordances that are associated with known or potential antisocial uses. So: no quote-posts or search because they increase the attack surface afforded to griefers and nurture the viral dynamics that drive us all into a sick frenzy elsewhere. No custom algorithms because algorithms have been implemented on especially Facebook and YouTube in ways that have had massive and deeply tragic effects, including literal genocide affecting a million adults and children in Myanmar whose lives are no less real than yours or mine.

The second, which I’ll call Own Your Experience, states that people, not software, are responsible for networked harms, and places the burden of responsible use on the individual and the cultural mechanisms through which prosocial behavior is encouraged and antisocial behavior is throttled. So: yes to quote-posts and search and custom feeds, and just block or defederate anyone using them to do already banned things, like harassment or abuse or the kind of speech that, given the right conditions, ignites genocide.

At their simplest, I don’t like either of these positions, though they both get some things right. The Own Your Experience school doesn’t really grapple with the genuinely terrifying dynamics of mass-scale complex systems. And I don’t think the Health First school has come to terms with the fact that in an non-authoritarian society, you can’t make people choose networks that feel like eating their vegetables over the ones that feel like candy stores. Even most people who consciously seek out ethically solid options for their online lives aren’t going to tolerate feeling isolated from most of their peers and communities, which is what happens when a network stays super niche.

From where I stand, there are no obvious or easy answers…which means that people trying to make better online spaces and tools must deal with a lot of difficult, controversial answers.

If I had to pick a way forward, I’d probably define a target like, precisely calibrated and thoughtfully defanged implementations of double-edged affordances, grounded in user research and discussions with specialists in disinformation, extremist organizing, professional-grade abuse, emerging international norms in trust & safety, and algorithimic toxicity.”

If that sounds like the opposite of fun DIY goofing around on the cozy internet, it is. Doing human networks at mass scale isn’t a baby game, as the moral brine shrimp in charge of the big networks keep demonstrating. Running online communities comes with all kinds of legal and ethical obligations, and fediverse systems are currently on the back foot with some of the most important ones (PDF).

this post is too long, time to stop

Right now, Mastodon is an immense achievement—a janky open-source project with great intentions that has overcome highly unfavorable odds to get to this point and is experiencing both growing pains and pressure to define its future. If I were Eugen Rochko, I would die of stress.

I don’t know if Mastodon can grapple with the complexities of mass scale. Lots of people would prefer it didn’t—staying smaller and lower-profile makes it friendly to amateur experimentation and also a lot safer for people who need to evade various kinds of persecution. But if Mastodon and other fedi projects do take on the mass scale, their developers must consider the needs of people who aren’t already converts. That starts by asking a lot of questions and then listening closely and receptively to the answers you receive.

One friend a day

I have nearly 2,000 unreads in my RSS reader since the last time I zeroed it out. That’s a lot and sometimes I get overwhelmed. On the positive side, nearly ~1,500 of those posts are from ~30 personal blogs I follow. That makes me happy that friends are posting on their sites and for the state of blogging in general.

While I love RSS, it’s hard for me to “power thru” these personal blogs because… well… they’re personal. They’re more powerful and often more thoughtful and more well-researched than a content mill, more precious. Knowing there’s hundreds of gems in this pile of 1,500 posts slows me down. I want to savor these contributions, but it’s overwhelming like having the next year’s worth of content meals planned out.

Rather than let myself be overwhelmed, I made a deal with myself: One friend a day. I’ll zero out one personal blog a day. Dig in and get to know someone. Some have a handful of unread posts, some have hundreds. In a month or so I’ll finish and I’m sure the hopper will have refilled itself. Hopefully it’s more manageable this time.

Notes from a Mastodon migration

I changed servers on Mastodon last week and I learned a lot and I have opinions.

To begin with, the best time to move from one home server to another (“migrate instances”) on Mastodon is never. The second-best time is as soon as possible, because the longer you wait, the more you stand to lose in. But until you’ve been on Mastodon for a while, you aren’t going to know how well you get along with your server’s mod policy and administrators, and how your server’s reputation will affect your experience. It’s not ideal! But it’s what we have right now.

As a freshly moved person, here’s what I’ve learned, what I wish I’d known in advance, and what I hope the makers of federated systems will change. (But first, thank you to all the friends and strangers who advised me on my choice of new server. You-all are great.)

what you can move

If both your old and new home servers are running the most up-to-date version of Mastodon, you will probably be able to automatically bring over your followers and manually export and then upload your following lists, mutes and blocks, and bookmarks.

You’ll manage all of the above by exporting data from your current account, creating a new account on a new server, and then following a short but slightly hair-raising series of steps to move everything over. I very highly recommend using Nuztalgia’s excellent server migration guide to help you through this process.

what you can’t move

Most guidance on moving servers includes a few warnings about what won’t move, but leave out lots more, I think mostly because they seem too obvious to mention if you’ve already internalized the Mastodon way. I don’t think they’re too obvious to mention, and some of them surprised me very much despite my many, many years in tech.

Here’s my best crack at a list:

  • Your username: Your old one will no longer work, and your old profile will link to your new one.
  • All notifications associated with your old account: If people reply to your old threads, you won’t know it unless you open those threads and look for new replies with your eyeballs. If people mention your old username in new posts, you won’t see those, and they won’t get any notifications that they’re mentioning a decommissioned account, so there can be whole conversations in which people think they’re engaging with you that you never see.
  • Your posts: On Mastodon, when you move, you leave your old posts behind at their original URLs. (This isn’t true with all fediverse software—the promising but still small Calckey/Firefish can port in posts from old accounts.) You can export them to a local archive, but you can’t upload them to your new server. But—warning klaxon—when you export your posts, you’re literally ONLY GETTING YOUR OWN POSTS. Which means that you will never again have access to…
  • Your inbound (pseudo-)DMs and follow-locked replies: The local archive you export from your old account will not include anything people sent to you. This makes perfect sense to plenty of software developers—so much that it’s not mentioned in any of the migration docs I’ve seen—but seems to me like a massive oversight that implies a deeply peculiar understanding of what sociability and conversations are. (It may be that if you go in and bookmark your incoming messages, they show up in your bookmarks in your export, but I haven’t tested this, and it would still break the integrity of your conversations.)
  • Your followers’ lists: If any of your followers made a list (like people I follow who post flowers” or whatever) and put you on it, you won’t be on it after you move. (Your old dead username will be. Your new live username won’t.) I know this only because someone who follows me noticed I’d gone missing from a list.

So…yes, you can move your account. The process isn’t that difficult. But even if it works well, which it doesn’t always, you lose a lot—more than I think is reasonable to ask of people who just want to hang out with their friends.

why this matters

If it weren’t so difficult to understand how to choose a server to begin with, the downsides of migration would sting less, but it is so hard to know if you’ve found the right (for many varied values of right) server until you’re already settled in—by which time you’ve built up posts and conversations you may not be delighted to lose.

Mastodon-the-company recently tried to partially solve this by nudging new people to Mastodon.social, the big server they run, but that big server is blocked by many small servers, and has a reputation for being middling on moderation, though I think that’s been improving. But this plan rests on the idea that people can get accustomed to Mastodon on Mastodon.social and then migrate to a place they like better. Which makes sense, because migration is at the center of what Mastodon promises.

The biggest selling point of federated networks like Mastodon and the broader fediverse—and, soon, Bluesky!—is that if you don’t like the way your instance is being run, you can move your account without the huge penalty of starting over. Theoretically, this means that unlike Twitter or Facebook or Instagram (or Post or Cohost or…) accounts, Mastodon accounts are much less vulnerable to the predations of negligent corporations, billionaires with bad personalities, and server admins who decide to incorporate invasive surveillance and ad technologies.

In practice, this means you’re trading being vulnerable to the whims of centralized corporate services and rich weirdos for…being vulnerable to the whims of whatever rando spins up a server, unless migration is speedy, comprehensive, and safe. That’s why it matters that migration is both clunky and surprisingly lossy.

where to, then?

Getting account portability right—in the technical architecture sense—is a heated topic across both fediverse/ActivityPub and Bluesky/AT Protocol conversations. Rather than weighing in on anyone’s shouty GitHub issues, I’m posting here—both because I’m not immersed in the protocol-level work and because I think the various system-specific conversations needs cross-currents.

Here are some human/cultural things I hope orgs working on federated systems will do:

  • Prioritize, support, and fund both technical and non-technical (or marginally technical) but essential work to improve initial server-picking, including, in order of increasing difficulty:
    • developing ultra-clear but not oversimplified guidance to help potential users understand what server choice means (for them as people, not philosophically) and how to pick one,
    • collecting and publishing more—and more useful—information about servers,
    • building reputation systems (yes! I mean it!) to help guide server choices, with appropriately sophisticated mechanisms for handling maladaptive behaviors and bad actors.
  • Put non-dev users through any proposed or existing migration process, take notes, and fix the gaps that this process reveals. For any temporarily unfixable gaps, build in high-viz unmissable documentation and warnings. (Major and permanently unfixable gaps suggest that the underlying technology isn’t there yet.)
  • Clearly and officially document the whole migration process, including what you can keep and what you will lose. (I thought before migration that this was done already but after going through the process, it seems clear that the docs are still in the fetal stage.) Use multiple formats! Make a video.
  • Most of all: Approach the concepts of identity,” conversation,” and portability,” as cultural patterns that bring with them expectations and assumptions from the whole of your users’ online and offline experience, and build/fix your technical approaches accordingly.

daydreaming

Here’s my reward for writing up the above: Imagine orienting new federation-curious people by offering them a tour of the positive benefits federated systems offer—so not billionaires can’t take it away” or ad companies can’t surveil you,” but…

Constellations of trusted, independent, stable, thoughtfully moderated communities that integrate with each other and offer distinctive moderation and curation to meet widely varying needs. Places for people who want to swim in the firehose, places for people who want a gentle sanctuary, and places for people who need to move between those modes.

Easy, reassuring ways to find your way to a home server by signalling what kind of experience you want from a social network and getting back vetted choices that meet your needs and are ready to welcome you in—or drop you into the shitposting lava, if that’s what you’re after.

Portability and migration processes that maintain your connections and conversations (without requiring you to become your own IT department or tying you to data-hosting services that sell your information) when you choose to move within a system.

Easy, subscribable, transparent moderation options that allow you to layer in your own preferences on top of your chosen server’s, so you can tweak your experience as needed.

If you’re watching conversations around ActivityPub and AT Protocol, you’ll know that there are significant tensions about the trade-offs required to build or refit systems to achieve these kinds of ideals. I think it’s going to take (more) years of effort to get federated systems to any of those states, and the techno-cultural work required to get there will be difficult, dizzyingly complex, and controversial, and I doubt any system will get it all right.

But my hope—and the reason I’m writing this stuff—is that as more systems and platforms come online outside the biggest central services, we’ll be able to learn from each other in moving toward better adaptation to human needs.

I need a vacation?

I’m still tired and the first thoughts I have are, “I need a vacation.” However, any time I take time off, I end up vegging out or drink or eat too much. These aren’t really restorative. What I really need is something like a camp where I have things I do to build myself back […]

Chris’ Corner: Hot New Web Features

Yuri Mikhin and Travis Turner over at Evil Martians implore us: Don’t wait, let’s use the browser Contact Picker API now. As I write, it’s only available essentially on Chrome for Android. But the spec exists and iOS also has an experimental flag for it. I’m an iOS guy so I flipped it on. I actually […]

The post Chris’ Corner: Hot New Web Features appeared first on CodePen Blog.

My dad recliner

After five+ years of negotiation with my wife, I got the gift of a wonderful dad-ass recliner for my 43rd birthday. It’s petite and looks like a regular leather dad chair before it’s glorious transformation into a relaxation station. Per tradition, kids aren’t allowed to use dad’s recliner; it’s the one sacred space in our house.

A small brown leather chair that is secretly a recliner tucked away in the corner of my living room, next to it an old brass lamp.

The recliner has been a major boost to my calmness. Having my feet up after a long day of sitting at my desk produces a psychological effect that scientists refer to as “maxin’ and relaxin’”. This is not a sports-dad chair for yelling at my fantasy employees, oh no. This, my lovelies, is a book nook for a grown man. A stack of devices (iPad, Kindle, Macbook) sits piled next to the chair so I can follow whatever whim the Muses enchant me with, as the forefathers intended. President Ben Franklin once wrote in his diary “The secret to Man’s creativity is having a sweet ass recumbent chair.”

This recliner will launch a thousand blog posts. This recliner is where I’ll write the next great American sci-fi novel. This recliner is where I’ll create apps and games late at night after the family goes to sleep. This recliner is where I’ll nod off on lazy Saturday afternoons like a dog in the sun. This recliner is where I’ll store decades and decades of farts until I die and my children’s children judiciously and uncaringly throw it in a dumpster, divorced of sentimentality and awareness of the suitcases of emotional baggage from grandpa’s ancient computer job that I unpacked in this chair.

Liquid Death

I have a brief window of opportunity where my brain is allowing me to change my default drink of choice. It could be my taste buds evolving, some secret recipe update, or the news that the WHO is saying aspartame as “possibly carcinogenic”… but for whatever reason Diet Coke doesn’t taste as good to me as it used to, so I’m making changes. There’s a new beverage in my fridge: Liquid Death.

A box of grim leafer from liquid death. The artwork on the can is a melty white illustrated skull on black swimming upwards to dripping golden area with the company branding.

Liquid Death? Isn’t that just water in a can? Yes, but specifically I’m enjoying the “Grim Leafer”, their agave iced tea. It’s a light flavor – agave-sweet, but not too sweet – an enjoyable step up from drinking boring ol’ water from a can. Although, the water in the ice cold can is delicious, cool, and refreshing. I’ve tried other drinks, but Liquid Death has been the one candidate with enough potential for a successful wholesale switch.

Liquid Death is an interesting product to me. It’s entire brand is: water, but hardcore. As if Monster energy drinks started doing yoga and got passionate about staying hydrated. A weird blend of dad jokes and toxic masculinity applied to water. Why does water have to have skulls? Why not fill up a water bottle?

I guess my answer for that is… I have water bottles. Thousands. I can do that but let’s be honest, sipping on water bottles is boring. A water bottle or double walled tumbler can’t match the tactile thrill of snapping into a cold one… mmm… that’s the user experience I crave. Me, a god, breaking open metal canisters with my bare hands. It’s not that sensational, but there’s a dopamine hit and selfish reward center activated in my brain.

One day I’ll ditch the cans and move over to plain ol’ sun tea or kombucha I brew in a window or closet (respectively). One habit substitution at a time though, starting with eliminating the “possibly carcinogenic” one.

The affordance loop

A black-and-white postcard photograph of more than a dozen men standing on tall stilts wearing berets, many in rustic sheepskin coats. The stiltwalking French shepherds in the marshes of the Landes are incredible, and I love this postcard—which you can buy from a nice person on eBay—in particular.

Affordances, in the simplest terms, are what an object offers or provides to a specific individual at a particular moment in time. This sense originates with James and Eleanor Gibson, a pair of celebrated researchers in psychology. James Gibson lays out a wonderfully informal definition in one of his later works:

The affordances of the environment are what it offers the animal, what it provides or furnishes, either for good or ill. The verb to afford is found in the dictionary, but the noun affordance is not. I have made it up. I mean by it something that refers to both the environment and the animal in a way that no existing term does. It implies the complementarity of the animal and the environment. The antecedents of the term and the history of the concept will be treated later; for the present, let us consider examples of an affordance.

If a terrestrial surface is nearly horizontal (instead of slanted), nearly flat (instead of convex or concave), and sufficiently extended (relative to the size of the animal) and if its substance is rigid (relative to the weight of the animal), then the surface affords support. It is a surface of support, and we call it a substratum, ground, or floor. It is stand-on-able, permitting an upright posture for quadrupeds and bipeds. It is therefore walk-on-able and run-over-able. It is not sink-into-able like a surface of water or a swamp, that is, not for heavy terrestrial animals. Support for water bugs is different. —The Ecological Approach to Visual Perception, p. 127)

(Support for water bugs is different!)

In UX/interface design, conversations about affordances tend to revolve around the cues designers can offer to reveal what a system actually offers the people who use it. Those conversations, paired with mass use of the online and mobile interfaces coming out of especially Apple, Microsoft, and Google resulted in the modern interface design vocabulary we can take for granted until we’re doing phone tech support with someone who doesn’t distinguish a webpage from a home screen from a preferences panel.

On the social internet, people who have used the biggest platforms and networks enter new ones expecting to find ~standard affordances and expecting that familiar interface cues will map to familiar affordances.

When newer systems and tools confound those expectations, people get, at best, confused. At worst, they try to walk across a solid-looking but sink-into-able surface and get stuck in a bog, while stilt-walking locals familiar with the marshy ground cluster around to chide them for acting like—well, water bugs, maybe.


Both online and off, I am comically bad at spotting secondary or subtle affordance cues. If there is a door with a horizontal bar and a sign that reads PULL,” I am going to run full-tilt into that glass. Vertical bar and a little push” label? I’m gonna stand in the hallway pulling like Babe the Blue Ox and wondering aloud why the door is locked—real ninety-ninth percentile performance on not getting it. This, plus my design-adjacent background, inclines me to listen to other peoples’ complaints about confusion even when I personally find a system easy to use.

The class of design problems I (literally) run into manifests when an object’s actual affordances don’t match the main visual/perceptual cues it offers, as Donald Norman lays out in his foundational and genuinely great Design of Everyday Things. Norman’s humanist approach to these problems was a major contributor to the emergence of user-centered design (now human-centered” design, which is nicer). It also resulted in the doors I run into getting tagged Norman doors in his honor, which seems like poor thanks for a lifetime of good work.

The people who make casinos, malware, chum-box ads, and other scams use Norman door patterns intentionally, to deceive, trap, and exploit. And although people in the US-based culture I come from condemn those uses, we tend to consider accidental deceptive affordance cues merely thoughtless, much as we prefer to punish those who kill people intentionally much more harshly than those who kill by accident or negligence, even though the person is just as dead. In practice, this emphasis on intent produces cultural systems in which no one is responsible and lots of people die.

Legally, we balance our hyper-valuation of intent with the duty of care, but in daily life, duty of care gets ideologically clotheslined by personal responsibility and liability-reduction theater, like the tiny-print waivers we sign to do anything mildly risky, or the Montana school district that chose to rotate students around the classroom every 15 minutes during covid restrictions to avoid triggering quarantine rules. This orientation saturates the tech industry, which responds to more active constructions of duty of care with things like foot-dragging cookie warnings.

It’s not surprising that few commentators apply the idea of the duty of care—even informally—to social platforms and communities, but once you start assessing online conflicts and disasters through that lens, it gets hard to un-see the breaches.


In an interview with Justin Hendrix on the Tech Policy Press podcast The Sunday Show, Dr. Johnathan Flowers digs into affordances on the social internet:

…by affordances I mean the resources, the tools, the very structure of the website—things like hashtags, retweets, quote tweets, and so on. The ways that a given community forms by means of the affordances of a digital platform structures some of the nature of that community.

As André Brock notes in his book, Distributed Blackness, Black Twitter as a phenomena emerged by means of the affordances of Twitter, through how things like quote tweets, retweets and hashtags allowed Black users to engage in Black digital practices, which are the performances of Black offline culture by means of the affordances of the digital platform of Twitter. So things like call and response, playing the dozens—which are culturally-mediated practices within the Black community, to engage in information sharing, in community building—were all enabled by the features of Twitter such that Black folks could engage in digital practices that made present their identities as members of a community.

(Disclosure, I’ve very lightly repunctuated the transcript excerpts for readability, based on my repeated listenings. Flowers speaks in dense paragraphs and makes it sound easy, and I want to represent his work as well as I can here.)

This is one of several I think highly relevant takes on affordances in the interview, and I encourage interested readers to listen to or read it in full. In this post, I’m mostly going to talk about specific results of specific affordance—and affordance-cue mismatches—but I want to start by nodding toward two subtler points Flowers makes. The first pulls in Sara Ahmed’s work on the way whiteness functions in the world to talk about the underlying cultural patterns that shape online spaces:

…if you have a space that is predominantly populated by white persons regardless of their other identities, if you are in a space primarily populated by white persons, the norms, the habits, the very structure of that space will take on a likeness to whiteness by virtue of how the majority of people participate in that space. As I said, Mastodon is a very white space. It is not unlike other tech spaces where whiteness is predominant. Insofar as this is the case, the norms, the habits, the affordances of the platform will inherit whiteness.

Inheriting whiteness” here has direct bearing on the kind of norms-based conflicts that occur and recur when white Mastodon users try to discipline Black Mastodon users for discussing racist oppression—or even mentioning race. Here’s Flowers:

Insofar as the majority of the users on Mastodon are white, then they take up the kinds of ways that whiteness organizes space—including an entitlement to freedom from say, understanding one’s complicitness in racism, or freedom from engaging with experiences of racism as made present by users of color.

The last point I want to pull out of Flowers’ interview is that the underlying cultural patterns of Mastodon influence not only the affordances that get built, but also the norms governing how people are permitted to use those affordances. This shows up in what is socially required, as in you must use content warnings for mentions of your experience of racism,” and in what is socially forbidden, as in linking to another post is just the same as a quote-tweet and we don’t do that kind of thing here.”

So: Patterns, affordances, and norms.


Some of what’s on my mind is about Mastodon/fedi, which has lost tempo on a lot of the parts of the Twitter migration that I’ve cared most about—Black Twitter, literary Twitter, radical journalist Twitter, while its someday-maybe-rival Bluesky has imported at least some of those communities despite obvious problems.

Mastodon’s userbase remains divided on whether the network’s niche status is a good thing. Plenty of people on Mastodon are committed to making both Mastodon and the broader fediverse (the apps and services interconnecting via the ActivityPub protocol) easier for a mass audience to use and understand—but the opposing point of view is also very present, and often very heated. The view that e.g. Twitter users have proven themselves to be Nazi sympathizers who should be excluded from the fediverse is a minority view, but it shows up like clockwork. So do claims that anyone who wants greater ease of use on Mastodon is really just mad about not having a billionaire overlord to complain to—or that finding Mastodon confusing is a smokescreen for clout-chasing and influencer culture and loving capitalism.

A little further behind those complaints, you find the people making extremely forthright claims that Black people who discuss race are the real racists and don’t belong.

One of my very first exchanges in my 2022 re-attempt to get situated on Mastodon was with a scrupulously polite young man who hoped that Mastodon could repeat the successes of Gamergate in gatekeeping” the gaming world to keep it healthy. In hindsight, this was heavyhanded foreshadowing that patterns of intentional, active, and probably coordinated exclusionary tactics were already entrenched in the fediverse—and not only on the known trollfarms and abuse hubs that even moderately well-run instances block.

There are subtler and better arguments about the way security through obscurity (non-derisive) and interface friction can provide provisional refuge for people targeted for abuse. I think people making those arguments usually have extremely valid concerns, especially but not only when they talk about fears of Meta’s upcoming federation. For today, I’ll just say that remediation work on confusing Mastodon features and flows should always either preserve the existing affordances that offer shelter and refuge to existing users or replace them with better ones that provide the same benefits. (The best way to do this would probably be to engage in large-scale user research and participatory design, but I say that about everything.)


As I initially wrote back in April, there are plenty of reasons to avoid Bluesky, the most obvious of which is that Jack Dorsey was involved in the initial funding and remains on the board. Nevertheless, I came in a little bit optimistic about the infrastructure Bluesky’s AT Protocol might be able to offer intentional communities in a federated future. Since then, things have…not been going great.

Last week on Bluesky, the company wrapped up a string of own-goals on the trust and safety side by 1.) failing to run a username denylist that included technical terms but not even the most common list of racial and other slurs and straight-up Nazi signifiers, 2.) going silent except for GitHub comments and PRs after a Black user brought obviously awful usernames to light, and 3.) eventually publishing a super-anodyne statement that their policy has always disallowed racism and harassment and reflects their values. Katherine Alejandra Cross has a good overview of the situation on Wired:

When reached for comment, Bluesky’s press office mostly repeated the language of its posted apology on the platform itself. However, unlike in their thread, Bluesky admitted a mistake” occurred. The company added that an incident report to increase transparency and accountability” is in the making and will be published soon.

If this is true, it could represent a small step forward in restoring trust with a user base that, for now, is disproportionately made up of marginalized communities badly burned by the failures of moderation on large platforms. But skepticism is warranted. What Bluesky corporate has presented up to this point is communication that could have been generated by ChatGPT—the vague, anodyne language in its vanishingly rare public statements on the matter verge on the embarrassing.

My only quibble with this characterization is that nothing the company or its CEO has posted about this most recent incident qualifies as an apology. In the days since I initially drafted this post, a Bluesky protocol engineer posted an actual apology that I thought was a starting point. Otherwise, it’s been mostly silence in the face of broad pressure for the company’s leadership to acknowledge that the way they’ve handled this and previous moderation controversies has left a lot of Black (and non-Black) users feeling—I think rightfully—deeply pessimistic about the future of the platform and the protocol.

Maybe Bluesky reforms itself and hires a benevolent assassin to publicly lead trust and safety on their beta instance and handle those same dimensions in a culturally literate way in the protocol itself. Maybe not! But a lot of people want to use the beta, and if the team makes it to federation, far more people will be affected by the cultural patterns the protocol reinforces, enables, and restricts, so I’m rooting for them to get it together.

Ultimately, I think it’s going to be near-impossible to build out the right patterns for a prosocial big-world protocol without being scarily prescient about ethical hazards, deeply versed in how common abuse patterns, demonstrably determined to prevent every bit of preventable harm, and absurdly great at egoless comms and course correction. I’m not seeing that yet.

But here’s the thing: despite the Bluesky-the-company repeatedly tripping over its own feet, the beta actually is getting moderated, and on a reasonably snappy cadence—I’ve seen reported racist and transphobic posts and accounts get smacked down much more quickly than they were on, say, 2021 Twitter. And Bluesky-the-beta-platform is still where I’m finding a lot of the most on-point and sophisticated discussions of network norms/trust and safety/moderation work, along with all kinds of conversations between Black and brown journalists, public figures, writers, and artists.

An Afro-Boricua writer posting as Bryanna, Angry Noodle summarized the dynamic on Bluesky, quoted here with permission:

I post because I like attention. The positive kind, not the negative.

I think the moment we all admit we just want to be liked, life will be a lot better for all of us.

And it’s sad because social media platforms know this and capitalize off of it. They know very well that we’re desperate for an easy way to connect, and that for a lot of us Twitter fulfilled that role.

And they know that being semi-good means that they can still be mostly bad and won’t lose us.

This brings me back around to the Tech Policy Press podcast episode, to this exchange between Hendrix and Dr. Flowers:

Hendrix: I hear you almost mourning something that you do see as legitimate and worth preserving inside of this flawed environment, which is that, of course, these networks that have been built up sometimes in—well, I don’t want to use the word spite—but sometimes in opposition to the dynamics of that platform. Is that a fair assessment of your argument?

Flowers: Yeah, that’s a fair assessment of my argument, I would say that in spite of the platform” is actually a pretty good way to put it. When we start talking about Mastodon, one of the things that I’m going to try to make clear is how this in spite of” nature functions as a result of the ways that platforms inherit whiteness or inherit structures of oppression. But in spite of” is actually a fairly good way to put it, because it is in spite of the privately-owned nature of the platform, that it has become a digital commons.

I think those interlinked dynamics—that people want connection so badly that they’ll accept mostly bad” spaces, and that the history of the social internet includes oppositional and defiant uses of network affordances in spite of” their patterning in modes of capitalism and white supremacist assumptions and norms—belong at the center of our conversations about what better online spaces could be. I also think they’re signal flares that fediverse and other new-school network advocates should attend to, even when they come from or point toward networks those advocates find repellent.

What does it mean if the mostly bad” on Bluesky or until-very-recently-Twitter works for proportionately more Black people and other folks of color than the purportedly healthier systems at work on Mastodon?

If I had to sum up the whole entangled ball of predictable failures and unlikely successes across Mastodon and Bluesky at this exact moment, I’d say that neither place is covering itself in glory, but in terms of the provision of refuge, more familiar and cherished affordances with clear cues are attracting mass audiences better than high-friction tech structures designed to be beneficially anti-viral at the cost of being fun and easy to use.

Again, that’s all despite the ongoing moderation and communication problems, and even though pretty much everyone I follow on Bluesky is openly skeptical that it will work out.

I will also say that in spite of the problems I’m about to get into in exhaustive detail, Mastodon and the fediverse offer a big, motivated, often super-generous ecosystem of toolmakers, devs, and instance operators who really, really want to nail big-world + semi-sheltered networking that is inclusive and welcoming. I share that goal—it’s the only reason I’m spending so much of my time and energy wrestling with this stuff.


Back to affordances, then. I’ve said everything I’m about to write on Mastodon already, and lots of other people have too, but finding or re-finding things there is a nightmare, so I’m going to write it all down here as a reference. If you’re not into the details, do skip down.

Some of the expectation-afforance and cue-affordance mismatches on Mastodon are super-intentional, like the omission of built-in quote-posts and attendant notification systems, and the super-local and usually only semi-functional search. These omissions were meant to reduce virality and increase the healthiness of federated conversations, and Mastodon-the-organization has made a public commitment to working on careful ways of eventually integrating versions of those features.

Then there’s the other stuff, which starts before you get onto Mastodon at all. Signing up means picking an instance, and the instance you’re on will, through its moderation actions and policies and its federation and defederation choices, define much of your experience on the fediverse, but instances currently distinguish themselves primarily by location, size, or nominal shared interests, rather than by a detailed and transparent discussion of those actual major experience differentiators.

The missing stair actually matters, here: If you’re a Black gay dude, say, and you stumble into choosing an instance that federates with known trollfarms and harassment hubs, and you make a post that reveals anything about your identity, you’re very likely to get flooded with some of the worst abuse anyone ever gets on the internet. None of this will be clear to you before you sign up.

Assuming you escape that fate, then once you’re on, you’ll also have to individually find your people who’ve made it onto Mastodon—but probably not by searching by name or partial username, because search is flaky. If you google them, maybe you can find them, but clicking through the search result will bring you to their instance, which probably isn’t your instance, so you can’t follow them from there, because that’s not where you’re logged in. So you have to get their whole usernames—maybe from their Twitter bios if that’s allowed this month?—and search for them on your own instance, then follow.

Maybe you also want to follow people back, so look at your followers list and pop open some profiles. If you’re using the main web interface (or many apps), those profiles will open on, you guessed it, those people’s home instances. Try to follow them there and you’ll get hit with a login request, but you can’t log in there because there isn’t where your account lives. Unless you’re on the same instance, in which case it does.

You can follow straight from your timeline, though, so if you see a cool post, maybe you open the person’s profile in a different tab, decide if you want to follow back, and then re-find their post on your timeline so you can actually follow.

I’m not sure why you find this difficult,” say the people running around on marsh-stilts. Maybe you just love billionaires and chasing clout.”

Now let’s say you made it onto Mastodon and you find some of your people or you just make new friends or whatever (this is literally a strategy I’ve seen advocated for across Mastodon). Cool. This brings us to the next thing, which is that replies on Mastodon have strong affordance cues familiar to us from other networks, but the actual affordances are different:

  • If you make a post and people reply, you will see all the replies directed to you with any level of privacy (public, unlisted, followers-only, mentioned-people only—the quasi-DM of masto) and from any instance unless you’ve blocked or muted the replier. (Or if they’re sending you a quasi-DM and you don’t follow them and you have DMs turned off for people you don’t follow, in which case their reply will go into a black hole and neither of you will know it.)
  • If you are looking at replies to someone else’s post, you will only see the replies that come from instances that your instance already has a federation relationship with. Someone replying from a small instance that no one on your instance follows or is followed by? You’re not going to see their reply unless you actively open the post on its home instance and read the thread there.

This maybe sounds wonky and unimportant, but in practice, it means that tons of people who are replying are only seeing a fraction of the previous replies—which, in turn, means that the original poster often gets tons of near-identical responses/the same joke over and over/other annoying things, and that nearly everyone in the conversation is participating with a slightly different set of replies as their context. Add a couple language translation glitches and you have a recipe for deep social weirdness.

So if you’re that gay Black dude who accidentally landed on a server that federates with internet demons, your replies are eventually going to be filled with the worst things anyone can imagine sending to you, and none of the people on well-moderated instances will see the abuse you’re getting because their instances already yeeted those assholes into space. (Not even getting into the way followers-only and quasi-DM posts also reduce the visibility of abusive, threatening, creepy, and criminally tedious replies.) So when you then talk about the abuse you’re getting, most people will have no idea what you mean, because they don’t see it. Some of them will think you’re making it up.

Honestly this is so complicated I feel like I am making it up, but alas.


All these janky affordance/cue problems on Mastodon are a pretty crystalline example of what I’ve tried to get to in more abstract ways in earlier posts this year. People with specific goals and orientations made the system and laid down the cultural patterns that govern acceptable uses. Other people later joined in, and some of them made it through the gantlet of sign-up, got lucky on instance choice, were able to find friends, and brought in different hopes and purposes that are orthogonal to those of the initial makers. But unless/until those people and their communities hit critical mass, their attempts to hip-check the tooling and the norms will encounter so much resistance—some of it explicitly vile and organized, some not—that a lot of them drift away.

This is the affordance loop: Communities shape tools that shape communities, surrounded by everything happening in the world around us.

And another loop, online and off: Bad outcomes happen in spite of good intentions. When the fact of initial good intentions result in hyper-defensive responses to critique, the outcomes get worse and worse and worse. This is the second reason I try to force myself not to think too much about intention and motivation: When people get critiques laced with statements about their intent, it’s easy for them to respond with Nope, that’s not what’s in my heart” and throw out the whole thing. In my experience, critiques that relentlessly focus on explicit statements and specific outcomes are a little harder to dodge. (The first reason is that I am really bad at understanding other people’s inner lives.)


We used to call intentionally deceptive affordance cues in software dark patterns.” I think now they’re just a seamless part of the pervasive scam culture we accept online: Enter your email for 10% off! Lol now we have your email but you have to give us your phone number to get the code.

But let’s go back to the unintentional deceptions, like the Norman doors. Let’s say you build something that looks like it’s private, either because it’s described or visualized as locked” (like Mastodon’s followers-only posts or messages) or behind a login wall (like the closed Bluesky beta), but really it’s not private, or not very private, or not private for long and you totally said that in the docs.

People will still treat the thing like it’s private and post private information, including their bare butts, all over it. When this material is later made explicitly public, some of those people will be upset. Others will then berate those same humans for stupidly trusting the affordance cues; those people are wrong.

If you make something that looks and feels private, you’re making a commitment in the honorable and ancient language of affordances to behave accordingly. No amount of getting cute about not posting anything on the internet you wouldn’t want in a newspaper changes that. Slapping the equivalent of yellow plastic FLOORS SLIPPERY WHEN WET signs might get you through until you can fix it, but anything less means you’re building a trap, even if you didn’t mean to.

Now let’s say you build something boat-shaped, slap some high-viz paint on it, and drop it into a sea next to a sinking passenger cruiser. You might even get the chance to haul up some of the fleeing, floundering passengers, which seems nice!

Congratulations (genuine): You’ve made a lifeboat. This is true whether you call your boat LIFEBOAT or closed beta or jkjklol don’t hurt me. It was true from the moment you pulled someone out of the water, and it’s inextricably tangled with the duty of care.


A 1909 Los Angeles Herald Sunday Magazine article describes the stiltwalking peasants of the Landes (the ones in the header image for this post) as:

…a gay folk, who always seem to make the best of their hard lot, and manage to remain cheerful although they are generally miserably poor and frequently fever-stricken. In the more remote parts of the country the postman goes his rounds on stilts, and can thus do long distances in a short space of time. Mounted on his wooden legs, he is independent of brooks, marshes and hedges, and goes straight on, checked by nothing.

The 1908 tone is really something—if you open the page, beware the hair-raising bit about British roadbuilding in Africa—but there’s still something about simple, independent technologies that permit freedom and flourishing under difficult circumstances that probably resonates with a lot of people who want to build much better networks, preferably out of free and malleable pieces of software.

It seems relevant that the Landes region wasn’t marshy before humans cleared its forests around 600 AD—and it isn’t marshy now, because of a drainage and monocultural tree-planting program that kicked off in the early 1900s, in the process disrupting a thousand-year-old way of life adapted to the marshes’ challenges.

I was thinking about this earlier today, when I read Melissa Johnson’s funny, gross, sometimes wrenching account of a trek through the Guatemalan jungle for the wedding of her friends, an Arab-American woman and Mexican-American woman who met in the Army and then got out to live safely together. Why travel to a country where same-sex marriage is illegal and violence against LGBT people is a real threat—and then haul themselves to the top of a pyramid in the ruins of El Mirador—for their tiny ceremony?

Johnson writes that:

…neutral ground doesn’t exist for Angela and Suley. When they announced their engagement back in the States, members of their families cried—and not in the happy way. Despite getting their marriage license in California, the couple didn’t feel safe having a public wedding during the first year of the Trump administration. Choosing peak rainy season has assured them of precious privacy. We have not seen, nor will we see, another tourist the entire week. This is what a history of trauma yields. When you’ve been forbidden to be yourself for so long, a lost city feels like home.

The networks I want will feel like a refuge—including for people who need different affordances than the ones that keep me afloat.

Coming soon: Home and sanctuary. (How should a lifeboat be?) Why I’m talking about refugees at all.

Related:

Dealing with bad decision makers

Tips for steering stakeholders away from poor design choices: discover their priorities and show how bad choices could have negative consequences for those priorities.

Chris’ Corner: More Like CSBest

We gotta talk about CSS! That’s my favorite thing! It’s always on the table for a good Chris’ Corner edition, but sometimes focusing on it entirely is best. Klint Finley called it “The modern web’s underrated powerhouse” for GitHub’s publication The ReadME Project back in February, and I’m inclined to agree. Although the days of […]

The post Chris’ Corner: More Like CSBest appeared first on CodePen Blog.

URL.canParse

Parsing of URLs on the client side has been a common practice for two decades. The early days included using illegible regular expressions but the JavaScript specification eventually evolved into a new URL method of parsing URLs. While URL is incredibly useful when a valid URL is provided, an invalid string will throw an error […]

The post URL.canParse appeared first on David Walsh Blog.

Star Trek XII: So Very Tired

I was going to write a post on one of the 1000s of social networks out there, but I can’t succinctly fit it in a tweet or something similar. Also, I’ve grown disgusted with Twitter. However, I felt the need to share some stuff to get it off my chest. Once this is published, I […]

Chris’ Corner: Complexity

Have you seen The Grug Brained Developer? It’s an essay with a URL. It’s written like a caveman became a developer and put together a philosophy that is largely a rally against complexity. Cavemen have dumb simple brains, get it? It has good points, and I largely agree with it. The caveman angle is a […]

The post Chris’ Corner: Complexity appeared first on CodePen Blog.

Letting go of Frustration 

Discover my perspective on coping with work hurdles in what I hope is a thoughtful email. A must-read if you need to boost your resilience and foster a positive work mindset.

JavaScript closest

When it comes to finding relationships between elements, we traditionally think of a top-down approach. We can thank CSS and querySelector/querySelectorAll for that relationship in selectors. What if we want to find an element’s parent based on selector? To look up the element tree and find a parent by selector, you can use HTMLElement‘s closest […]

The post JavaScript closest appeared first on David Walsh Blog.

ChatGPT via WYSIWYG (Sponsored)

Artificial intelligence applications have hit like a massive wave over this past year, with ChatGPT being the most prominent. ChatGPT can take any written command and suggest content to match. What better than having the power of AI content creation than doing so within your own WYSIWYG editor! That’s what Froala can provide you — […]

The post ChatGPT via WYSIWYG (Sponsored) appeared first on David Walsh Blog.

Chris’ Corner: Design

Rauno Freiberg wrote an article getting into the CSS implementation of some of the neat features of the most recent Next.js website. Gotta love an article showing off how things work on a really top-notch modern design. Thoughts as I go down the list: • The randomized dots on the switchboard look super cool. Just […]

The post Chris’ Corner: Design appeared first on CodePen Blog.