The Blogroll

Newsletters

Ethan tagged me in a post. I didn’t feel a thing.

“I’d love to invite a few other folks to share their favorite newsletters”, he wrote.

My immediate thought was that I don’t actually subscribe to many newsletters. But then I remembered that most newsletters are available as RSS feeds, and I very much do subscribe to those.

Reading RSS and reading email feel very different to me. A new item in my email client feels like a task. A new item in my feed reader feels like a gift.

Anyway, I poked around in my subscriptions and found some newsletters in there that I can heartily recommend.

First and foremost, there’s The History Of The Web by Jay Hoffman. Each newsletter is a building block for the timeline of the web that he’s putting together. It’s very much up my alley.

On the topic of the World Wide Web, Matthias has a newsletter called Own Your Web:

Whether you want to get started with your own personal website or level up as a designer, developer, or independent creator working with the ever-changing material of the Web, this little email is for you. ❤✊

On the inescapable topic of “AI”, I can recommend Mystery AI Hype Theater 3000: The Newsletter by Professor Emily M. Bender and Doctor Alex Hanna.

Journalist Clive Thompson has a fun newsletter called The Linkfest:

The opposite of doomscrolling: Every two weeks (roughly) I send you a collection of the best Internet reading I’ve found — links to culture, technology, art and science that fascinated me.

If you like that, you’ll love The Whippet by McKinley Valentine:

A newsletter for the terminally curious

Okay, now there are three more newsletters that I like, but I’m hesitant to recommend for the simple reason that they’re on Substack alongside a pile of racist trash. If you decide you like any of these, please don’t subscribe by email; use the RSS feed. For the love of Jeebus, don’t give Substack your email address.

Age of Invention by Anton Howes is a deep, deep dive into the history of technology and industry:

I’m interested in everything from the exploits of sixteenth-century alchemists to the schemes of Victorian engineers.

Finally, there are two newsletters written by people whose music I listened to in my formative years in Ireland…

When We Were Young by Paul Page recounts his time in the band Whipping Boy in the ’90s:

This will be the story of Whipping Boy told from my perspective.

Toasted Heretic were making very different music around the same time as Whipping Boy. Their singer Julian Gough has gone on to write books, poems, and now a newsletter about cosmology called The Egg And The Rock:

The Egg and the Rock makes a big, specific argument (backed up by a lot of recent data, across many fields), that our universe appears to be the result of an evolutionary process at the level of universes.

There you go—quite a grab bag of newsletter options for you.

The Iterative Design Process: Launch Faster, Improve Continuously

Iterative design process helps you launch faster, learn from users, and improve websites continuously without waiting for perfection.

Chris’ Corner: Pretty Palettes

I’m not terribly good at picking a good color palette out of thin air. My go-to is a dark look with bright colored accents, but I’m wildly envious whenever I see a beautiful website with great looking colors that are very far away from what I could pull off. Sometimes, a little inspiration can go […]

Chalk Font Kid

I used to be able to indentify typefaces in use around in the real world as a kid. My mom would get a kick out of me noticing the same typefaces used by different brands on billboards and stuff as we drove around, as I recall. Nothing like this kid though, jeepers.

No, Google Did Not Unilaterally Decide to Kill XSLT

The Web Discourse has been spicy of late, and XSLT is to blame. Well, sort of. It’s complicated.

Limiting YouTube to a Single Tab

This week I decided to go nuclear on my bad YouTube habit. I installed a plugin called Tab Limiter that lets me limit youtube.com to one tab at a time. Clicking links that open in new tabs will now auto-close the tab.

Why do this? I talked about it before but when I’m bored I open tabs. Adding friction here prevents me from CMD+clicking videos during moments of boredom and creating a month’s-worth unclose-able tabs of videos to watch. It encourages me to stay focused and nudges me towards YouTube’s lossy1 “Add to queue” feature to queue up one video at a time in a single tab. I sort of prefer this way of using YouTube and it makes it feel a lot more like a native app.

That inspired me to install the YouTube Progressive Web App and because the PWA is basically a dedicated tab, Tab Limiter keeps me from opening other videos in new tabs. I’m now funneled into the application.

Opening a dropdown and clicking “Add to queue” is adding more “good friction” to the process. It also comes with a counter. 20 tabs open, no big deal, I’m immune to that effect. 20 items in a queue. Yeesh. That’s a todo list.

Screenshot of the tablimiter UI, it has unstyled for fields for URL and a tab limit quantity

Tab Limiter has a brutalist UI and that’s what makes it perfect. It’s also open sourced on GitHub which is important to me so I can make sure it’s not sending my browsing history to China. And I can fork it. One improvement I’m considering is to add the closed video’s ID to the YouTube queue before closing the tab. It seems easy enough, but probably not as easy as I’m hoping. The core idea there is that it might be helpful if I come across an urgent watch-now link or someone sends me a link.

I’m also still using Raycast Focus which is a great way to blockout time and stop distractions at the source.

  1. YouTube queues only exist in memory in the tab context, it’s not a cross-tab feature so if you close a tab and started a new one, the entire old queue got erased forever.

Stop Firefighting: A Smarter Way to Prioritize UX Work

Learn how digital triage and a simple scoring system can stop firefighting and keep UX focused on what matters most.

Too many meetings?

At Automattic, we know our time is finite and precious. Here are the questions we ask ourselves before agreeing to any meeting:

The post Too many meetings? appeared first on Jeffrey Zeldman Presents.

To Infinity… But Not Beyond!

More explorations of ways to abuse the CSS `infinity` keyword, this time with more than just lengths.

405: Elasticsearch → Postgres Search

Alex & Chris get into a fairly recent technological change at CodePen where we ditched our Elasticsearch implementation for just using our own Postgres database for search. Sometimes choices like this are more about team expertise, dev environment practicalities, and complexity tradeoffs. We found this change to be much better for us, which matters! For […]

Classifiers and cosmotechnics

I’ve been playing around with Midjourney for work and the one thing that makes Stable Diffusion cool and useful to me is the --sref flag to summon results in a specific visual style or “style reference” (e.g. Celestial Swirlscape is --sref 2566192150). They differ a bit from traditional or “artist” styles (e.g. “In the style of Picasso” or “Rip off Studio Ghibli”) but can be that or they can be more generic or compositional like “Pink Retronetic Dreamscape”. I’ve read a deep-dive on SREF codes and it’s still a bit unclear how they work to me. They’re like a hybrid between prompt shorthand and style classification. Curated and collected by humans, but a code generated by machines. I have to imagine there’s some clumped circles on a node graph chart somewhere that determine this… but I don’t know those answers.

The idea of a classifier (human assisted or otherwise) that can suck up and analyze all the art on the internet and end up with a 10-digit number that represents nearly any visual style of imagery I’ve ever seen is mind-bending. Not to mention the ability to overlay that style reference on any image I want in under a minute. “Anime waifu. --sref 3196580341” is the “Tea. Earl gray. Hot” of digital imagery. It feels unreal.

Could we apply a universal classifier to blog posts so that your “longread about cool bugs” and my “longread about cool bugs” have the same --sref tag? And then we retro-actively apply human-readable tag names to this stylistic tag? And then could I subscribe to a feed of those specific types of posts? That might be interesting… or radicalizing.

Design tokens? Could those be a system of classifiers instead of arbitrary language? Probably not. But why not? Web design almost certainly could, if it isn’t already.

While the idea of classifiers tickles the logical computer part of my brain, reducing the entirety of the visual arts down to a set of ten billion categories offends the artist part of my brain. It is odious. There’s an observer effect to it whereby in the act of classifying the art you’ve limited and altered your ability to understand it. And any mimicked generation has an imposter-like, soul-less character to it, no matter the quality. I can’t explain that. Even though I’ve seen the machine generate incredible art beyond anything I’m capable of, I still feel that intangible void on my retinas when I interact with it.

My wife and I were joking about how the algorithm is serving us videos about certain personality quirks that map to (possibly made-up) niche disorders. My wife –who can remember the melody to every guitar solo but can’t remember the words of the songs from her own band– has a diagnosis from Dr. TikTok that she has “polyphonic perception”. My personality quirks all point to my particular flavor of ADHD. How long until our entire personalities are all tied to a collection of niche diagnoses? How long until our brains are all classified by a ten-digit number? That could be incredibly useful for getting help but brings up nature versus nurture questions for me. Did God make me this way or did I dent the packaging? Can people with --brainSpiceRef 2566192150 even apply for this job? How long until the machines build these types of preferences? Myers-Briggs but instead of made by a racist, it’s made by MechaHitler.

When I think about the future I want, it always comes down to one idea: I want a pod-like chamber I can walk into that scans my entire body, makes bleep-bloop noises to show that it’s working, and prints out a receipt with a list of all my ailments (cancers, deformities, disorders, and otherwise) and recommends a diet and exercise plan until my next scheduled visit to the pod. Bonus points if it orders groceries accordingly after my entire family has exited the chamber. I’m aware this has “Big Theranos Energy” and is an incredible surface area for conspiracy theories… but it’s the science fiction future I want. Classifiers seem inevitable on that pathway. But how do we preserve our humanity when reducing the human race –who we are and what we create– down to a series of ten-digit codes?

Chris’ Corner: Faces

It’s one of those weeks where I just feel like posting some specimen screenshots of new-to-me typefaces that I like and have saved.

Vibe Check №39

In the middle of the night on the morning of July 4th, a storm parked over the Texas Hill Country and caused the Guadalupe river to rise more than 25 feet in two hours. 135 dead, including dozens of children from summer camps along the river. As a parent, this is the greatest tragedy you could imagine. My heart goes out to the families and friends who lost a little one that week.

As a Texan, this is yet another tragedy in a growing list of rare but forecastable tragedies where federal, state, and local officials failed Texans. I’m tired.

With that event casting a dark shadow on the summer acknowledged, here’s a recap of the last couple months.

A trip to the Grand Canyon

the grand canyon near bright angel trailhead

In late June my family stole away for a quick trip to Arizona. My in-laws bought a vacation place in Flagstaff to escape the Phoenix heat. We wanted to check out the new place and figured we could do something American and tag on a quick trip to the Grand Canyon.

On the morning of the second day we arrived at Grand Canyon National Park early. We found a good parking spot steps from the canyon’s edge and told our kids to get out and see the view. I’ve been to the canyon a couple times but nothing can truly prepare you for the enormity and pastel grandeur you’re about to see. I enjoyed re-living the first glimpses through my kids’ collective gasps of awe… and after about 10 minutes they were ready to go home and get on their iPads.

We milled around the park for nearly two hours making frequent stops. We stopped at the Devil’s Watchtower on the way out of the park which I’d recommend. All-in-all, we saw something truly remarkable together and my wife and I felt like we checked off a big “This is good for you and you’ll thank us later” parenting checkbox.

The next day the kids rode back with the grandparents to Phoenix while my wife and I took a short detour to go see Sedona. All these years visiting Arizona and I’d never been. We don’t buy into all the energy crystal woo-woo the town advertises, but it’s a beautiful and inspiring piece of America with incredible vistas and sculpture-like red stone mountains. I’d like to spend more time there.

We had a couple days in Phoenix to hang with cousins and celebrated my great-nephew’s second birthday. He’s a cool dude. Mid-week we headed back to Austin to send the kids to summer camp. That week could have been a great one for my wife and I to enjoy an empty house, but I ended up (over-)working all week.

Trip to San Diego

The day after the kids got back from summer camp we packed our bags again and headed to San Diego with my wife’s entire family. The next four days were beach days; digging holes, playing guitar, hitting the smashball, dozing off to books, and chasing a toddler around. I stayed in my solar fortress most of the time to avoid my enemy: The Sun.

But it wouldn’t be a Rupert Family Vacation without some calamities! On the second day my son got the worst sunburn of his life; no blisters, just red. He’d survive… but he didn’t know that. I sympathize because I had tons of sunburns as a kid. When it itches, it sucks.

And then there’s my daughter…

At the end of the week we tagged on a couple more days and visited Austin friends who spend the summer in Encinitas. Our daughters who have been besties since daycare slotted right back into their brand of silly lip sync routines and giggling. To soak up more beach time, we hiked down the cliff to Beacons beach and set up some chairs in the rocks while the girls boogie boarded their hearts out having the time of their life until…

My daughter comes to us holding her arm crying. When she reached for the loose boogie board leash she slammed her hand down and said she felt something fold over her arm and sting her. We walked over to the lifeguard stand and got the bad news, “That looks like a sting ray.”

The untold irony here is all week long my daughter was telling anyone who would listen that her two greatest fears about the ocean were: getting caught in a rip current and getting stung by a stingray. We tried to diffuse those fears but she kept talking about it. And here we were, the prophecy came true.

“I can call a lifeguard truck to meet you at the top of the hill but you have to take care of it now.” Uh-oh. That’s when I knew we were in a serious situation. We said no to the lifeguard truck but needed to submerge her arm in 115ºF water (hot tap water) for 30-90 minutes to neutralize the proteins in the venom. We hiked back up the cliff and walked the three blocks to the house. Tears the whole way.

After a couple hours everything was sore but stable. She’s a tough kid and that was a difficult situation. What a champ.

We survived: A skunk attack

Late one night my daughter (who has a sensitive smeller) said “Something smells like skunk!” I caught a faint whiff of it and thought “It’s probably some neighbors smoking weed” and opened the back door to assess the situation and in rushed my two mutts, one of them covered in skunk juice! Yikes!

We did our best to corral them to the garage where we washed them with an internet-recommended concoction. I can’t even describe the degree to how awful this was. The smell infiltrated our house and sulfur burned in the eyes and nose all night long. We spent the next day Fabreezing and disposing of any rogue object the smell might have transferred to: the backdoor mat, collars, one kids sandal, the dead skunk near the trash… Ah, gross.

A skunk attack is not a situation you can control (dogs being dogs) but it’s not one I want to relive any time soon.

Another school year begins

This week we strap ourselves into the bobsled and push the sled downhill on an out-of-control course where the breaks do nothing and it sends us crashing into Christmas. Feeling optimistic about this year, but there will be more homework for both our kids which is historically not a strength we operate in as a family. Lord help us.

Stats

Here you go, number perverts. All the dopamine deep-dives and drive-thrus I collected over the summer.

🧠 Learning

  • Sovietology - Based on a space race analogy I heard at work I made a deep-dive on the Soviet space program which led me to Sovietology and trying to understand how the Soviet central planning system (“cybernetics”) failed its fellow comrades.
  • ADHD - Been watching a lot of videos on ADHD and trying to understand it more
  • Minimalism and decluttering - ADHD videos lead me into minimalism and decluttering videos and it makes a difference if you view clutter as stimulus. If I could just get the rest of the family on board…
  • Drawing - I’d like to be good at drawing, so I spent a lot of learning about shapes, perspectives, sketching, and more
  • Studio Setups - Because ShopTalk has a YouTube now, I’ve become a little bit obsessed with optimal YouTube setups but I haven’t done anything… yet
  • Budgeting - After all our summer trips and feeling spent (physically and fiscally), I sat down one weekend and did some budgeting and ingested a lot on the subject.

❤️‍🩹 Health and wellness

A lot of updates here but still untangling the Gordion knot of stress, anxiety, weight, and ADHD. I’m talking to doctors and making some changes and I believe they are helping even if it’s not fully realized yet.

📝 Blogging

Over a dozen posts over two months with some vacations in there, that’s about all you can ask for.

📖 Reading

Behind pace for the Book-a-Week Club and that’s fine with me.

System CollapseThe Wrong StuffSpace Battleship YamatoRed PlentyADHD and UsA Different Kind of PowerDungeon Crawler CarlMoral AmbitionWin Every ArgumentThe Dawn of Everything
  • System Collapse ★★★ - The last book in the Murderbot Diaries. This one was a slog, to be honest. The action at the end was good but the crescendo right before that, the big group project… was disappointing.

  • The Wrong Stuff ★★★★★ - A great book about the relative failure of the Soviet Cosmonaut program compared to NASA even though the USSR had many “firsts” they did so without regard to the safety and stability of their program and rockets.

  • Space Battleship Yamato ★★★½ - Got this from Kinokuniya to satiate my retro space manga obsession. It delivered on the space opera promise but had a lot of the early-days manga pitfalls. That wasn’t a deal-breaker for me but could be for some I’m sure.

  • Red Plenty ★★★ - A historical fictional narrative about site managers and scientists under Khrushchev’s rule. It paints a nice picture about the economics (“cybernetics”) and central planning of that time, but sometimes the narrative was too thick (like Dostoyevsky thick). Reaffirming I’m a non-fiction guy.

  • ADHD and Us ★★★★ - A good book for people in a relationship where one or more partners are neurodiverse. Recommended by my psychiatrist.

  • A Different Kind of Power ★★★★½ - Jacinda Arden’s autobiography is a bit hard to read because of how calm, cool, collected, and capable she seems compared to her American contemporary Donald Trump who was nothing but chaos and incompetence.

  • Dungeon Crawler Carl - [In progress]

  • Moral Ambition ★★★★ - I enjoyed Bregman’s other books more, but this book certainly is challenging. It asks you to consider how you can make the biggest, moral, positive change and adjust your life towards that goal. That certainly tugs at my heartstrings but is a tough call to action in uncertain times.

  • Win Every Argument - [In progress]

  • The Dawn of Everything - [In progress]

📺 Media

Saw some good movies this period… which is rare.

Movies

  • 28 Years Later - Good movie. Lots of zombie dong, or… it’s more accurate to say one notably huge alpha hog.
  • Superman - I enjoyed a DC movie; a Superman movie! Unbelievable. Has James Gunn saved the DC cinematic universe? Hopefully.
  • K-Pop Demon Slayers (Netflix) - An wonderful animated film and you can see the foundation of fun from the creative and technical teams come out. Great job Sony Animation.
  • Fantastic Four: First Steps - The art direction in this movie is incredible… fantastic even. A real cinematic feat. Worth seeing in theaters.

TV

  • Welcome to Wrexham S4 (Hulu) - Up the town. Unreal ending.
  • Murderbot (Apple TV) - Loved the books… and uh… you can watch the show, if you want to, it’s fine I guess.
  • Mythic Quest S5 (Apple TV) - Not for everyone but feels algorithmically generated for me.

Streaming

  • Game Changer S7 (Dropout) - This season of Game Changer has managed to outdo itself and that’s an incredible a feat.

Anime

  • Mobile Suite Gundam Gquuuuuux (Prime)

Podcasts I purged my podcasts and abandoned some of my favorites (like The Adventure Zone), but I think I’m better for it. Now I can focus on the ones I enjoy.

  • If Books Could Kill…
  • Maintenance Phase
  • Living Planet
  • ATXplained

🎙 Recording

ShopTalk

🤖 Gunpla

This hobby isn’t dead yet! I’ve got five or so in the backlog but three of them are practice kits for a larger project I have in mind. In service to that project, I tried my hand at anime cel-shading an Entry Grade RX-78-2. I tried half-a-dozen application techniques and didn’t find a way that I liked. I need to do more research and keep trying.

🌱 Digital Gardening

  • Made my homepage tie-dyed for funsies. It’s based off the accent color and changes a bit every day.
  • Built some automation for my vibechecks, will hopefully post more later.
  • Added more pentatonic scales to Pentablaster… it’s in a messy state right now but I wanted to play with Ethiopian scales. I have plans to fix it up.
  • Regenerated cover images for my stories page using Midjourney. I think I did better this time around.

👾 Video games

Mostly puzzles, but I did go reopen the door to a city builder.

  • Cities Skylines - I hooked up SteamLink to play my PC games from the shed inside the house on my Mac. Trying to play enough Cities Skylines 1 to justify buying Cities Skylines 2.
  • Balatro - The joker addiction continues. Feel like if I beat one more stake I’ll be happy and can quit.
  • Clues by Sam - A daily caper! If you’re not playing this you should be.
  • Stars - A sudoku-like puzzler from Inkwell Games
  • Fields - A difficult pattern game from Inkwell which I first thought was impossible but now feel like I’m getting the hang of it.

Build Your UX Shield: Policies That Deflect Drama and Defend Standards

Tired of arguing with stakeholders? A clear policy does the talking for you. Here's how to write ones that work.

Underlines and line height

I was thinking about something I wrote yesterday when I was talking about styling underlines on links:

For a start, you can adjust the distance of the underline from the text using text-underline-offset. If you’re using a generous line-height, use a generous distance here too.

For some reason, I completely forgot that we’ve got a line-height unit in CSS now: lh. So if you want to make the distance of your underline proportional to the line height of the text that the link is part of, it’s easy-peasy:

text-underline-offset: 0.15lh;

The greater the line height, the greater the distance between the link text and its underline.

I think this one is going into my collection of CSS snippets I use on almost every project.

Style your underlines

We shouldn’t rely on colour alone to indicate that something is interactive.

Take links, for example. Sure, you can give them a different colour to the surrounding text, but you shouldn’t stop there. Make sure there’s something else that distinguishes them. You could make them bold. Or you could stick with the well-understood convention of underlying links.

This is where some designers bristle. If there are a lot of links on a page, it could look awfully cluttered with underlines. That’s why some designers would rather remove the underline completely.

As Manu observed:

I’ve done a lot of audits in the first half of this year and at this point a believe that designing links without underlines is a kink. The idea that users don’t understand that links are clickable arouses some designers. I can’t explain it any other way.

But underlining links isn’t the binary decision it once was. You can use CSS to style those underlines just as you’d style any other part of your design language.

Here’s a regular underlined link.

For a start, you can adjust the distance of the underline from the text using text-underline-offset. If you’re using a generous line-height, use a generous distance here too.

Here’s a link with an offset underline.

If you’d rather have a thinner or thicker underline, use text-decoration-thickness.

Here’s a link with a thin underline.

The colour of the underline and the colour of the link don’t need to be the same. Use text-decoration-color to make them completely different colours or make the underline a lighter shade of the link colour.

Here’s a link with a translucent underline.

That’s quite a difference with just a few CSS declarations:

text-underline-offset: 0.2em;
text-decoration-thickness: 1px;
text-decoration-color: oklch(from currentColor l c h / 50%);

If that still isn’t subtle enough for you, you could even use text-decoration-style to make the underline dotted or dashed, but that might be a step too far.

Here’s a link with a dotted underline.

Whatever you decide, I hope you’ll see that underlines aren’t the enemy of good design. They’re an opportunity.

You should use underlines to keep your links accessible. But you should also use CSS to make those underlines beautiful.

Len Tow

We have lost a most generous soul. I have lost a benefactor, mentor, and friend. Leonard Tow died Sunday at age 97.  Len held a PhD in economic geography from Columbia and taught at Hunter and Columbia before deciding to leave for business, first in theater and then in the infant industries of cable TV […]

The post Len Tow appeared first on BuzzMachine.

Chris’ Corner: Browser Wars Micro Edition

Ages ago, Firefox shipped “masonry layout” where you simply grid-template-rows: masonry; instead of defining specific rows in a grid or letting them auto-create. It wasn’t terribly powerful but it did the trick for a lot of use cases. There has been renewed interest in this the past year or so, where Google and Apple have […]

Session talk

I was in Nor’n Irelan’ at the end of July for my annual week of Belfast Tradfest.

It was the best one yet. Classes in the morning, sessions all day, and concerts in the evening.

There were also some excellent events at Ulster University during the afternoons—talks, film screenings, interviews and discussions.

If you squint closely at the poster for this year’s event you’ll see my name on there. That’s because one of those afternoon events was me giving a talk about thesession.org.

I’m no stranger to public speaking but this was a very different audience to the usual conferences I speak at. I had to make sure not to get technical. So I talked about the history of the site, the house rules, changes made over time, and pointed out some features that people might’ve missed.

I also made sure not to speak for too long. I had an hour but I kept the presentation to just 25 minutes so that there’d be plenty of time for questions and discussions afterwards.

It went really well. People had lots of questions and ideas.

Some interesting themes emerged from the discussion…

There was no shortage of suggestions for features that were technically possible, but that I’m probably not going to add because of they might clutter up the interface.

Some other people had suggestions for features that were actually already on the site …but implemented in such a subtle way that you could easily miss them.

This highlights an ongoing balancing act I’ve been performing for the site’s two and a half decades of existence. I want to keep improving the site and ensuring that powerful features are available. But I also want to keep the site streamlined and easy to use.

Thinking about it, this is one of the things that sets The Session apart from other tune collections out there. Many of them have great content but it’s not always easy to get to grips with it, at least at first.

Still, I may have gone too far in the other direction with The Session. In trying to avoid cluttering up the interface, I might’ve buried some features a little deep.

Anyway, all of this has been great food for thought. I’m really glad I got to meet so many people who use The Session. It literally wouldn’t exist without them.

Progressive web apps

There was a time when you needed to make a native app in order to take advantage of specific technologies. That time has passed.

Now you can do all of these things on the web:

  • push notifications,
  • offline storage,
  • camera access,
  • and more.

Take a look at the home screen on your phone. Looking at the apps you’ve downloaded from an app store, ask yourself how many of them could’ve been web apps.

Social media apps, airline apps, shopping apps …none of them are using technologies that aren’t widely available on the web.

“But”, you might be thinking, “it feels different having a nice icon on my homescreen that launches a standalone app compared to navigating to a bookmark in my web browser.”

I agree! And you can do that with a web app. All it takes the addition of one manifest file that lists which icons and colours to use.

If that file exists for a website, then once the user adds the website to their homescreen it will behave just like native app.

Try it for yourself. Go to instagram.com in your mobile browser and it to your homescreen (on the iPhone, you get to the “add to home screen” option from the sharing icon—scroll down the list of options to find it).

See how it’s now an icon on your home screen just like all your other apps? Tap that icon to see how it launches just like a native app with no browser chrome around it.

This doesn’t just work on mobile. Desktop browsers like Chrome, Edge, and Safari also allow you to install web apps straight from the browser and into your dock.

About half of the icons in my dock are actually web apps and I honestly can’t tell which is which. Mastodon, Instagram, Google Calendar, Google Docs …I’m sure most of those services are available as downloadable desktop apps, but why would I bother doing that when I get exactly the same experience by adding the sites to my dock?

From a business perspective, it makes so much sense to build a web app (or simply turn your existing website into a web app with the addition of a manifest file). No need for separate iOS or Android developer teams. No need to play the waiting game with updates to your app in the app store—on the web, updates are instant.

You can even use an impressive-sounding marketing term for this approach: progressive web apps:

A Progressive Web App (PWA) is a web app that uses progressive enhancement to provide users with a more reliable experience, uses new capabilities to provide a more integrated experience, and can be installed. And, because it’s a web app, it can reach anyone, anywhere, on any device, all with a single codebase. Once installed, a PWA looks like any other app, specifically:

  • It has an icon on the home screen, app launcher, launchpad, or start menu.
  • It appears when you search for apps on the device.
  • It opens in a standalone window, wholly separated from a browser’s user interface.
  • It has access to higher levels of integration with the OS, for example, URL handling or title bar customization.
  • It works offline.

But there’s still one thing that native apps do better than the web. If you want to be able to monitor and track users to an invasive degree, the web can’t compete with the capabilities of native apps. That’s why you’ll see so many websites on your mobile device that implore to install their app from the app store.

If that’s not a priority for you, then you can differentiate yourself from your competitors by offering your users a progressive web app. Instead of having links to Apple and Google’s app stores, you can link to a page on your own site with installation instructions.

I can guarantee you that users won’t be able to tell the difference between a native app they installed from an app store and a web app they’ve added to their home screen.

Infinite Pixels

In which I push browser engines to their finite limits using infinite values.

Set the Standard: Why Every UX Team Needs Design Principles

Design principles help teams make better decisions, faster. Here’s how to create ones people actually follow.

404: Preventing Infinite Loops from Crashing the Browser

Stephen and Chris hop on to talk about how we’re saving everyone from crashed browser tabs in CodePen’s 2.0 editor. One simple: Executing JavaScript can cause a browser tab to entirely lock up, preventing you from doing anything, like potentially saving your work. It can even crash other same-domain tabs. But not on our watch! […]

All the concerns that make you a boring developer

I was thinking this morning about how once you understand that your technology choices have security, performance, and accessibility considerations you become a much more boring developer. Acknowledging those obligations can sort of strips the fun out of programming, but we’re better for it.

I decided to pull on that thread a little more and come up with a list of all the concerns you might have as an engineer/developer that ultimately compound to make you a boring, wet blanket of a person to be in meetings with.

  • Security - Make sure you’re not opening the door for hackers.
  • Privacy - Don’t leak personal information. Or don’t collect it in the first place.
  • Performance - Can the software work on low-end devices? Can you deliver the large bundle over bad internet? Those are your problems.
  • Inclusion/Accessibility - Are you allowing people the dignity to use your product? No? Oof. You should probably do that. Ideally because you are an ethical person, but also because it’s a legal liability.
  • Scalability - If a thousand people show up in the next minute, does your software still work? You have 100 users now, but how does it work for 1000? 1 million? 1 billion?
  • Maintenance - Ship a new feature? Great. Expect to spend at least 40% of cost/time to maintain a feature over its lifetime.
  • Testability - Did you write the code in a way that’s easy to test to make sure bugs don’t show up in production?
  • Deliverability/Distribution - How do people get or use your software?
  • Adoption/Onboarding - How do customers or partners use your software? How do they get familiar?
  • Documentation - Email and DMs is probably not the most efficient form on knowledge transfer.
  • Ecological - Does your app burn through GPUs in Iowa? What are you doing about that?
  • Financial/Cost - Servers and GPUs cost money, did you build this in such a way that it costs as little as possible to run?
  • Monetizability - Good idea but does it make money or cost money?
  • User feedback - What are customers or partners saying about this? Does that impact how or what you write?
  • Stakeholder feedback - Like user feedback but everyone freaks out like their job depends on solving the problem that day regardless if its a good idea or bad idea.
  • Organizational - How to get your co-workers onboard with the plan plays an outsized part in software engineering. Welcome to the world of office politics!
  • Staffability - There’s not a lot of Haskell developers out there. Or the inverse, people over-optimize on technologies that are “easy to hire for” and now you have a billion lines of Java in your application.
  • Support matrixes - For websites, of course we support major browsers and the latest 2 versions? Do we need to go back further? Weirdo browsers? Should we make native apps? Which ones? What devices/CPU architectures do we support there? Niche Linux distros? The list goes on.
  • Political - Some say “all tech is political”, and I tend to agree, but ask yourself: Did you put a politics inside the code? You did, didn’t you?
  • Geopolitical - Rare, but happens. See: Facebook Myanmar genocide
  • Localization/Internationalization - Uh-oh, your UI doesn’t work in German or Arabic. Also all your images and icons are offensive to a particular country’s monarch. Are you ready to cross the borders? Get ready for VAT tax tables, ughck.
  • SEO/Crawlability - Cool website you made, can robots get to it and index it? Now LLMs are coming and slurping up your content and traffic. Uh-oh!
  • Adjacent competitors - What your competitors are doing will always play a role in engineering. Looking better than them is good, being cheaper is good too, but one rule is the most important: never be slower. See: Platform adjacency theory
  • Throughput/Velocity - How fast can you and (more importantly) your team ship an idea from conception to production. What about turnaround times on bug reports?

If you ever ask a developer if an idea is possible and their brain lags out with a little loading spinner over their head, it might be this enormous pile of concerns they’re mulling over. That can be an issue, but I’d be more concerned about the developer that instantly says “Yes” to everything. And if you’re tired of developers saying “No” all the time, ask your developer about ways to put them in situations where they can say “Yes”.

Staying relevant

“And in their place came acceptance.” Staying relevant in your profession as you age and technology changes.

The post Staying relevant appeared first on Jeffrey Zeldman Presents.

Theater UX

I saw this summer’s Marvel movie in the theater on Sunday. A bit of a last minute idea so we ended up going to the “legacy” movie theater across the highway. Before I continue, It’s important to understand my local cinema dynamics. We have two theaters here in Austin: The Alamo Drafthouse and All Other Cinemas.

The best place to see movies in Austin is at the Alamo Drafthouse. If you’ve never been to an Alamo, I’m sorry. It’s a movie theater for people who love movies by people who love movies. They craft the entire art house experience from end-to-end. From the custom pre-screener of thematically topical clips, to the strict no late arrival and no texting policies, to custom food and drink options that match the latest blockbuster movie. A waiter brings you food, drinks, and refills so you don’t have to leave your seat. The trailers are a tight 15 minutes announcing new releases and special events where they bring back old movie classics (set to an era-appropriate soundtrack, of course). Every year they have an indie movie festival to showcase the weirdest films the industry has to offer. Going to the Alamo is a thoughtful experience through and through and they sell out nearly every show opening week. You pay more going to the Alamo of course but I think everyone would agree it’s worth it for most movies unless you’re looking for a quick n’ dirty alternative.

Contrast that to the “legacy” theater. I call it the legacy theater because this was the nice, brand new theater when I went to college 25 years ago; one of those big 24-screen nationwide chain movieplexes with a four-machine arcade and stadium seating. Six plexiglass teller windows tell the history of how popular this destination was in its time. It’s flagship theater is an enormous 4D IMAX. It of course (like the Alamo) has the push button recliners and swivel food trays. The nicest thing about the “legacy” theater is that there’s always open seats and that’s where the problems start to reveal themselves…

The first thing you notice at the “legacy” theater is that no one occupies the teller windows anymore. Instead you go inside to meet a greasy teenager who scans a QR code for the ticket you have to buy online. You go to the snack bar and load up on enormous free refill tubs of popcorn, drinks, and overpriced candy; it’s almost certainly a $50 stop. Then you go to the nearly empty theater and wonder if you walked into the wrong theater by accident. Before the movie starts you sit through the hokey pre-screen trivia and local ads and when the start time hits… you watch 35 (!!!) more minutes of ads with a couple trailers mixed in. And after all that you’re out of snacks and the movie starts.

The user experience contrast between the two couldn’t be more stark. One is thoughtful and compounds the experience at every turn and the other is enshittified with ads. One keeps you wanting to come back and the other makes you wonder why you came here in the first place (or worse, it makes you want to leave). At least its clean, I guess. One sees attention as precious and not-to-be-disturbed, the other sees you as captured by sunk costs and a pair of monetizable eyeballs. One will sell you a fresh pizza, a popcorn, and a couple refillable sodas for $50 and the other will sell you day-old popcorn, an impossibly large cup of soda, and some Sour Patch Kids for $50… after you do the math, the better experience isn’t any more expensive so it’s not even competing on price.

It’s no wonder why the “legacy” theater is always empty. I bet its owners would love to see all the seats full again. It all comes down to UX. One works hard creates a vibrant scene and fosters a culture1 for people who like films, the other is real “death of cinema” vibes. People (sometimes thousands!) put so much effort into these films to make the best film possible, only to have that experience ruined in the last mile. It’s tragic and I guess I’ll just catch it when it comes to streaming.

In related news, last year Sony Entertainment acquired Alamo Drafthouse. I’m not sure if that makes it more or less probable that you’ll be able to experience an Alamo in the future. We’ll see where it goes from here. Hopefully they can continue their relentless focus on the user experience.

  1. I’d be remiss if I didn’t call out the #metoo and union busting issues that were happening behind-the-scenes at Alamo and revealed in 2022. While Alamo has done a lot to create immense cultural capital here in Austin, that ascent has not been without enabled bad behavior. Similar issues plague Hollywood too.

Chris’ Corner: Scroll-Driven Excitement

Scroll-Driven Animations are a bit closer to usable now that Safari has them in Technical Preview and Firefox has them behind a flag. Chrome has released them. Saron Yitbarek has been blogging about it for Apple, and it’s nice to see. Apple hasn’t ever been super big in the “we make educational content for web […]

Your Own Newspaper, Or Not

You’ve likely heard me go on about how much I like an encourage using an RSS reader. Molly White frames it nicely: What if you could take all your favorite newsletters, ditch the data collection, and curate your own newspaper? It could include independent journalists, bloggers, mainstream media, worker-owned media collectives, and just about anyone […]

A modest proposal for new holidays to manage your digital life

The cost of being online is getting too damn high and I’m tired of pretending it’s possible to fit these tasks into a normal life. That’s why I’d like to share a modest proposal for a new set of holidays to manage our digital lives:

(Ahem.)

  • A day to clear out your inboxes
  • A day to reset your passwords and delete old accounts
  • A day to fix your calendars
  • A day to cancel online service subscriptions
  • A day to manage the tags on your website
  • A day to switch out any critical apps
  • A day to backup your computer and phone
  • A day to organize your photos
  • A day to organize your music collection and playlists
  • A day to setup your new phone/computer
  • A day to try out a new app or major piece of software for your primary workflow
  • A day to delete old text messages

All I’m asking for is 1/30th of a year that we end up cramming into other days. I’m willing to trade some of the B-tier holidays (Easter, Thanksgiving, etc) for this. If you work in the government please call me, it is URGENT.

A fiscal recalibration

After all our summer trips I buckled down last weekend and did some budgetting and I’ve realized I have to update the spreadsheet in my head. Here’s how much things cost in my outdated DaveBrain 2000 operating system:

  • Fast food -$5/person = $20/family
  • Snacks - $2.50/person = $10/family

That –as my bank account is telling me– is super incorrect. The real numbers are much more like:

  • Fast food - $12.50~$15/person = $50~$60/family
  • Snacks - $5~$7.50/person = $20~$30/family

And groceries have gone up too. Woof. Hard times in the concrete jungle.

We’re updating the database and cutting back on these obvious financial vampires. And we know when/why we tend to rely on them to get us through the week. So that’s good. But when you have kids –snack-reliant kids at that– introducing austerity measures like this is hard, because being a penny-pinching dick about money all the time probably isn’t good for them either.

Don’t worry about me though. I’m lucky to have a great job and two kidneys, I’m sure I can sell one of them for a decent amount.

Namaste.

The Economy? He died five years ago.

I hold a conspiracy theory the global economy died five years ago during Covid. It’s been on life support through stimulus checks and flash tech hype cycles ever since trying to keep the dormant heart beating. You sense it too. There’s no beating heart. There’s no thumping energy. No vein of excitement. Tech and knowledge work seems to be suffering the most.

The death of the Economy started long before Covid if I’m honest. Since the iPhone it feels like everyone has been waiting for the next big hit, the next new shiny, the next money-maker. It’s like an endless distracted boyfriend meme looping year over year. And I regret to inform you that the investors are at it again. Today it’s LLMs, before that crypto and the Web3 Metaverse, before that VR, before that the gig economy, before that smartwatches, before that smart-homes, before that 3D televisions, before that…

The phalanx of tech billionaires behind Trump at the inauguration is an image seared into my memory and it’s taught me a lot. It taught me that these companies are desperate. Desperate to win favor. Desperate to avoid regulation. Desperate to keep their government contracts. Because without the preferential treatment, the lawlessness, and the humongous contracts, they’re financially and morally bankrupt.

(To be fair –why do I feel the need to be fair to tech billionaires!?– from a Friedman doctrine perspective their job is to create value for stakeholders. Kissing the ring of the petty, easily-aggrieved, fascist, man-baby tyrant is probably the most surefire way to avoid unwanted scrutiny in uncertain fiscal times. I understand that part of their job. But I’d wager the long-term outcome will be that they set themselves up for future embarrassment, exploitation, and extortion while simultaneously selling out all the immigrants, queer people, and furries who keep their empires running on a daily basis.)

That scene in the rotunda reinforced my belief the economy was already dead. If Big Tech is clinging to government contracts and quid pro quo perks, then we must be out of ideas. Every time the winds of fortune change, everyone points their boats in the same direction. In a healthy, living economy shouldn’t there be more than one lake to fish in? Instead of asking “What doesn’t exist and would be useful?” and investing in that, it’s about “How can I extract the most money from hot new tech?” Instead of “What’s quality?” and chasing that, it’s “How can we move fast and make breakable things?”

An aside: What if there are no new ideas? What if the internet accelerated knowledge sharing to the point we’ve made all the software and we’re literally out of ideas!? There are no more worlds left to conquer, Alexander! Help!

I doubt that though. I bet there’s good ideas out there. I bet they’re not on Mars. I bet they’re inside people you already know. Impractical ideas that don’t scale well to billions of users but could have an incredible impact on a local economy and community (RIP Gowalla). Ideas that solve actual problems and create actual utility or connection. Small-scale ideas that when combined can breathe new life into a dead economy.

The definition of a healthy economy is actually one problem I had with the Biden administration. Liberals do a terrible job communicating economic accomplishments even though they outperform Conservative administrations by a large margin. When they do communicate it’s always in lagging indicators like GDP, the stock market, non-farm jobs, consumer price indexes, or low-unemployment numbers. Those are all well and good, but to me it all comes down to a single question: If I lost or quit my job today how easy would it be to find another similar job? To me economic mobility is the true sign of a healthy economy, the ability to have options. To be free.

I’m trying to stay optimistic, but the realist in me knows it’ll be some time until the economy comes back again. At a minimum, we’ll have to restart investments in science. Especially weird science. Even more weird than what you’re thinking right now. I’m talking super weird. And then that weird science takes 20 years to become practical applications. Through that public good is how we get the foundations like the Internet, WiFi, and GPS that have built the society we know and are dependent on today. It’s how we build the pipeline for tomorrow’s economy. But those innovations are on a decades timescale and –math-wise– I’m not sure I have that in me.

Easy sci-fi rectangles with corner-shape

In Chromium 139, CSS gets a new corner-shape property which unlocks some cool new CSS tricks. Most notably it gives us “squircles”, the mathematical superellipse shape introduced by Apple in iOS 7. Designers have been in love with them ever since and include them in every design comp using Figma’s “corner-smoothing” slider even tho CSS has no similar correlation… until now!

Frontend Masters has a beautiful writeup on corner-shape and superellipses showing that it goes way beyond squircles to make some real complex shapes. One capability they didn’t cover in that post is probably the most important of all: CSS corner-shape enables easy sci-fi rectangles.

By “sci-fi rectangles” I am of course referring to the sci-fi film and television trope where all rectangles (doors, windows, furniture, user-interfaces) have one to three angular corners instead of all corners being the old, boring, un-futuristic 90º rectangle corners. They are the cooler version of rectangles by all accounts.

Screengrab from Battlestar Galactica showing the diagram of a cylon, the main antagonist robot from the series. The diagram is on a piece of 8-inch by 11-inch paper with 45-degree angular corners on the page. There's a black manilla folder behind the piece of paper that also has its corners cut to the same angle.

Even the physical paper documents in Battlestar Galactica were sci-fi rectangles, how frakking cool is that!?

There were ways to image-mask or clip-path yourself into a sci-fi rectangle with CSS, but those have some downsides and mathematical complexities. It couldn’t be easier with corner-shape, in fact it’s a two-liner:

.sci-fi {
	border-start-end-radius: 50px;
	corner-shape: bevel;
}

My favorite version is probably when there’s two opposing corners notched out:

.even-more-sci-fi {
	border-start-start-radius: 50px;
	border-end-end-radius: 50px;
	corner-shape: bevel;
}
If you're in a browser that supports `corner-shape` or have the experimental feature flag turned on, this paragraph will be a sci-fi rectangle. If you see a normal rectangle, then I've included a screenshot below for you.
The same paragraph above but the borders are angular sci-fi rectangles

As demonstrated above corner-shape is a wonderful progressive enhancement. A browser doesn’t support squircles? They get rounded corners and the brand doesn’t fall over. You can also put corner-shapes in @supports (corner-shape: bevel) for even more graceful degradation. That’s what I did because a rounded corner is totes un-sci-fi, so I only enable the corner-shape if supported. Because corner-shape is not an image-mask or a clip-path, they’re automatically responsive and squeeze without any percentage-based tomfoolery. They’re animatable too! You can transition them on hover or focus if you want. The full power of CSS, baby!

One quirk I’ve discovered while playing with corner-shape is that the default browser :focus-visible outline won’t hug the corner-shape unless you re-define a custom :focus-visible outline style. That strikes me as weird, so I made a little reduced test case of this quirk you can debug and tell me what obvious tidbit I missed.

Wrapping this up, I’m excited about corner-shape because it has real world implications. A product I work adjacent to is currently shipping 215kb of squircle clip-path masks in production right now. Yikes. That’s a lot for fancy rectangles. corner-shape will be a sizable web performance improvement for their users and reduce maintenance burdens over time. Wins all around.

So remember, kids: Friends don’t let friends ship 200+ KB of squircles in production. Talk to your friends about progressively enhanceable CSS features today!

Make Research Reusable: How to Build a User Research Repository

A central UX research repository prevents duplication, reveals patterns, and makes testing easier for everyone.

The $200 Yamaha

Dave Rupert: Talk to any guitarist you know who has been playing awhile and they’ll have a story about a $200 Yamaha and how good it sounds relative to the price. Boy do I. I own a $5,000 guitar (what I originally paid for straight-grain Brazilian Rosewood Martin replica by Dennis Overton) and I didn’t […]

Before I go: Always buy the $200 Yamaha

I don’t have much life advice but I do know one thing: Always buy the $200 Yamaha guitar.

If you’re thinking about it, do it. Talk to any guitarist you know who has been playing awhile and they’ll have a story about a $200 Yamaha and how good it sounds relative to the price. It’s with uncanny regularity I encounter fellow travelers with a similar story about this particular cheap guitar.

My $200 Yamaha story growing up was my step-dad’s acoustic. He had two acoustic guitars actually; the Yamaha which stayed out propped against his bedroom wall and another one (I don’t remember the brand) with fancy jade inlays that stayed clasped in the green felt case under his bed. I wasn’t supposed to touch any of his guitars but I would sneak in and noodle on that Yamaha every chance I got. The Yamaha had a notable cheap lacquer “clack” to it when tapping the dreadnaught body and the sound it made when bumping into furniture was always harrowing, but the fretboard was smooth and it produced a sound that was both bright and deep; a surprise given the lightweight materials.

I stole some licks on the fancy under-the-bed acoustic a couple times, but the luxury materials produced a tinny sound with no body or resonance and despite its extra forbidden-ness it wasn’t even worth the trouble digging out of its case. The Yamaha with its casual out-of-the-case-because-I-only-cost-200-dollars vibes was not only easier to access, it was better on all accounts.

Is the $200 Yamaha the best guitar? No, probably not. Is it a great guitar? Emphatically, yes. An impeccable piece of Japanese engineering. I’ve owned $2,000 guitars, played friends’ $4,000 guitars, and the $200 Yamaha gives them all a run for their money every time. Good entry-level acoustic guitars from Martin and Taylor exist in the $500 range and they’re great purchases you won’t regret, but it’s not until the $1500 range that you start getting the material quality bumps those guitars deserve. But once you have a $1500 guitar, you start to baby it and hide it away in the case to protect it from scratches and bumps, from air of the wrong humidity, and from snoopy kids with clumsy hands. This is not a problem with the $200 Yamaha.

We bought a $200 Yamaha last month: a 3/4ths scale travel guitar. We went on a family beach vacation in July and my brother-in-law’s family notified us the day before that the cousins were having a no-device week. Worried our 12yo son would die –kidding, but he appreciates prior warnings about adjustments like this and we weren’t prepared for a fully offline week– we bought the $200 Yamaha to be an offline activity and have zero regrets. He noodled all week long and got noticeably better. Cousins and uncles even got into the mix trading riffs. It sounds phenomenal for a mini-acoustic (like a big acoustic!) but more importantly if it takes a tumble, gets stepped on by a toddler cousin, or filled with sand; we’re not even upset. A perfect travel guitar if there ever was.

Instruments are an intimate and personal item and choosing one can have an Ollivander’s Wand Shop element to it; you must find the one that speaks to you. And it’s up to you to treat yourself accordingly based on your budget. But what I will say is, from a dollar-per-quality or a cost-per-song perspective, you can’t go wrong with the $200 Yamaha.

AI in UX Workshop: Achieve More With Less

A Practical Online Workshop for UX Teams and Freelancers

Scaling UX Without Scaling the Team: How Oxford’s Centre of Excellence Is Changing the Game

Learn how Oxford University's UX Centre of Excellence scales user experience through a small team that enables colleagues to implement UX principles across the organization.

403: Privacy & Permissions

Chris & Rachel hop on the show to talk about the expanded privacy (access) model in the 2.0 editor (in Private Beta as we speak). Private Pens have always been a big deal, but as private as they are, if someone has the URL, they have the URL, and it doesn’t always feel very private. […]

A social media ethos

I’m trying to come up with an ethos of how I want to use social media. What rules and constraints do I put around it. This is a living document.

Rules for posting/reposting content:

  • Repost/Share cool links from the internet
  • Repost/Share cool art (and credit whenever possible)
  • Repost/Share people looking for work
  • Doubly-so if the people above are in tech and from an underrepresented group
  • Repost/Share job listing from reputable companies
  • Then… if you’ve done all that, promote your own thing

General principles for me and my brain:

  • I have a bad habit of starting the day off with a goof, avoid this
  • I like riffing and puns but it can have reply-guy vibes, limit this
  • In any conversation you have 3 options: Be rude, Be nice, Say nothing – the latter is usually the most correct answer
  • It’s okay to let people be wrong
  • Write down the issues you allow yourself to get outraged over
  • Read the room before posting
  • You can block/mute any person or channel for any reason, it’s fun
  • Research suggests it takes 23m15s to resume a task after a distraction!
  • Raycast Focus is your friend

On specific social-media apps:

  • X is for Nazis and Russian bot nets, avoid.
  • FB/Instgram are for family and friends, use on occasion.
  • TikTok is a dopamine trap, avoid.
  • YouTube is a dopamine trap, but useful.
  • Bluesky is fine.
  • Mastodon is for quality conversations.
  • Discord is for like-minded communities, prioritize intimate ones.
  • Log into LinkedIn once a month and give some thumbs-ups. It supports your friends and colleagues in the algorithmic trash fire and that handshakefullness and relationship building might be helpful in the future if you need a job.

Take the Pressure Off: Build a UX Supplier List

Even empowered teams sometimes need extra help. A trusted supplier list keeps quality high without burning you out.

Impact of AI on Tech Content Creators

Wes on Syntax: I write content. That content is consumed by people. But a lot of it has been used to train AIs for people to get a very quick answer. You can see the amount of bots visiting websites has been going up significantly. You ask a question about JavaScript and they go suck […]

The Pyramid of Merit

1890s engraving of slaves building a pyramid

There’s one quote from Twilight of the Elites (Chris Hayes, 2013) that has stuck with me since reading the book earlier this year. In sharing his experience attending the prestigious test-in Hunter College High School in Manhattan, Hayes acknowledges that the idea (and social stratification and skin tone) of merit begins to homogenize over time. In one sentence he laid bare the lie of meritocracy and it cut deep for me:

The pyramid of merit has come to mirror the pyramid of wealth and cultural capital.

In the tech and venture capital space there’s ample criticisms of meritocracy out there dispelling the head-slap-inducing claims made by ill-informed tech bros who have found themselves in positions of power. I’d be lying if I said meritocracy didn’t appeal to me at least on some level; rewarding highly skilled labor with higher pay accordingly appeals to my sense of fairness… but then I hear about CEOs earning 290⨉ the average worker and the whole system begins to crumble for me. Sure, they assume some risk… but never seem to suffer the same consequences. Despite its aroma of enlightened empirical fairness, meritocracy is ultimately a tool for protecting the status quo.

You can see it with your own eyes. Merit goes to the already wealthy. Merit magically awards itself to people from the same fraternal organization. Merit goes to people of similar net worth, who look the same, talk the same, believe the same, joke the same, and have the same education. Merit goes to symmetrical acne-free faces, shampoo model hair, designer scents, six pack abs, and strong jaw lines because those people must have earned it through hard work and not surgery, drugs, photoshop, or genetic lottery.

This year has poured a gallon of salt into this festering wound for me as my own country’s government tries to set “meritocracy” against “diversity, equity, and inclusion” –as if they’re opposed concepts, rather than the latter being a framework to recognize and correct pre-existing biases– then proceeding to nominate the most inept, corrupt, and deceitful people to perhaps ever occupy a government role. A cabinet full of regressive billionaires, cowboy cosplayers, and conservative television hosts papering over their racism with a flimsy banner of meritocracy. The entire administration is an insidious heist to enrich a small cabal of already wealthy families and we’ll be paying for this televised crime spree for generations.

I don’t want to fall into the trap of comparing DEI and meritocracy. Instead, I think we can examine meritocracy based on its merits; its an entirely gameable system that is for sale, prone to in-group biases, and often nullifies its own intent. Merit then will always mean money when its for sale. Plain and simple.

Diversity then… of people, wealth, cultures, and thought… is an antidote. A Darwinian cure to prevent groupthink and corruption that flourish in meritocratic systems. You and I remember the old truths, the old dreams, the old habits of loving thy neighbor. We’d do good to protect diversity, encourage it, and nourish it.

Streamlining HTML web components

If you’re a front-end developer and you don’t read Chris Ferdinandi’s blog, you should change that right now. Add that RSS feed to your feed reader of choice!

Lately he’s been posting about some of the thinking behind his Kelp UI library. That includes some great nuggets of wisdom around HTML web components.

First of all, he pointed out that web components don’t need a constructor(). This was news to me. I thought custom elements had to include this incantation at the start:

constructor () {
  super();
}

But it turns that if all you’re doing is calling super(), you can omit the whole thing and it’ll be done for you.

I immediately refactored all the web components I’m using on The Session. While I was at it, I implemented Chris’s bulletproof web component loading.

Now technically, I don’t need to do this. I’m linking to my JavaScript at the bottom of every page so I know it’s going to load after the HTML. But I don’t like having that assumption baked into my code.

For any of my custom elements that reference other elements in the DOM—using, say, document.querySelector()—I updated the connectedCallback() method to use Chris’s technique.

It turned out that there weren’t that many of my custom elements that were doing that. Because HTML web components are wrapped around existing markup, the contents of the custom element are usually what matters (rather than other elements on the same page).

I guess that’s another unexpected benefit to HTML web components. Because they’ve already got their own bit of DOM inside them, you don’t need to worry about when you load your markup and when you load your JavaScript.

And no faffing about with the dark arts of the Shadow DOM either.

Chris’ Corner: AI for me, AI for thee

Our very own Stephen Shaw was on an episode of Web Dev Challenge on CodeTV: Build the Future of AI-Native UX in 4 Hours. I started watching this on my computer, but then moved to my living room couch to put it on the big screen. Because it deserves it! It honestly feels like “real” […]

Portugeating

Hi Chris. You mentioned you were off to Portugal soon to explore Lisbon and Porto and I promised I’d send along some food tips from my previous visits.

I’ll skip over the obvious. No doubt you’ll seek out pasteis de nata in Lisbon. And I’m sure someone will convince you to have a francesinha in Porto (perhaps at the tail end of a beery night out).

Personally, I think one of Portugal’s treasures is its tinned fish. Find a spot where you can peruse a selection and have a tin with a beer or a glass of excellent Portugese wine.

In Lisbon there’s Sol E Pesca, just down the street from the Time Out market.

In Porto there’s Prova, though the focus is there is more on cheese.

A lot of the best tinned fish will hail from Matosinhos, a northern suburb of Porto. I recommend making your way up there.

Check out the fish market there, which is also the former home to a digital design school where I spent a week teaching a few years back. At lunch time you can pick out a fish from the market and take it straight to Taberna Lusitana to have them cook it for you.

In the evening, every place in Matosinhos hauls a grill out onto the street to cook sardines. It smells wonderful!

Take every opportunity that comes your way to eat the local percebes—goose barnacles—hand-harvested in risky conditions from the Atlantic coastline.

There are lots of seafood restaurants in Matosinhos but I can personally recommend O Gaveto. Myself and Jessica were enticed in by the owner one evening as we stood outside admiring the fish tank. We ended up having an astoundingly delicious seafood rice.

We also witnessed a mysterious gathering of robed figures bedecked with chains who ate from a large pot filled with a dark mixture. When we asked our waiter about it, he told us it was “the brotherhood of the lamprey!”

Oh, and when you’re in Porto you absolutely must have tripas à moda do Porto—an excellent tripe stew that costs next to nothing and tastes great no matter where you get it.

If you’re eating out along the waterfront, there’s a spot a little further along from the usual touristy spots called Vinhas d’Alho. Get one of the outside tables if you can for a great view of the Port places across the river. Pick out one you like the look of and go for a Port tasting.

Even if you don’t go for a Port tasting, be sure to have a Port Tonico at some point—it’s like a more refreshing version of a gin and tonic, made with white Port.

That’s all I can think of right now. I’m afraid I can’t give you an address for the most memorable meal I had in Porto:

The most unexpected thing I ate in Porto was when I wandered off for lunch on my own one day. I ended up in a little place where, when I walked in, it was kind of like that bit in the Western when the music stops and everyone turns to look. This was clearly a place for locals. The owner didn’t speak any English. I didn’t speak any Portuguese. But we figured it out. She mimed something sandwich-like and said a word I wasn’t familiar with: bifana. Okay, I said. Then she mimed the universal action for drinking, so I said “agua.” She looked at with a very confused expression. “Agua!? Não. Cerveja!” Who am I to argue? Anyway, she produced this thing which was basically some wet meat in a bun. It didn’t look very appetising. But this was the kind of situation where I couldn’t back out of eating it. So I took a bite and …it was delicious! Like, really, really delicious.

Donegal to Galway to Clare

After spending a week immersed in the language and the landscape of Glencolmcille, Jessica and I were headed to Miltown Malbay for the annual Willie Clancy music week.

I could only get us accommodation from the Monday onwards so we had a weekend in between Donegal and Clare. We decided to spend it in Galway.

We hadn’t booked any travel from Glencolmcille to Galway and that worked out fine. We ended up getting a lift from a fellow student (and fellow blogger) heading home to Limerick.

Showing up in Galway on a busy Saturday afternoon was quite the change after the peace and quiet of Glencolmcille. But we dove right in and enjoyed a weekend of good food and music.

A man playing button accordion and a man playing banjo at a pub table covered with pints. A fiddle in the foreground as a man plays pipes accompanied by another man on guitar.

But I missed speaking Irish. So on the Sunday afternoon we made a trip out to Spiddal for lunch just so we could say a few words as Gaeilge.

We also got some practice in every morning getting coffee at the Plámás cafe. You get a ten-cent discount for ordering in Irish. What a lovely little piece of behaviour design—a nice gentle nudge!

From Galway we made our way down to Miltown Malbay where the Willie Clancy festival was in full swing. We were staying out in Spanish Point, so we could escape the madness of the town each evening. Mind you, there was plenty going at the Armada hotel too.

The hotel was something of an extravagance but it was worth it—we had a beautiful view on to the beach at Spanish Point and our room was tucked away far from the wild shenanigans in the hotel bar (not to mention the céilís on the other side of the hotel!).

I have to admit, I got quite overwhelmed the first day I ventured into Miltown proper. It’s easy to have a constant state of FOMO, constantly searching for the best session. But once I calmed down and accepted the situation, I had a lovely time at some really nice sessions.

A kitchen crammed with musicians. A line of musicians playing away. A selfie with some other musicians in a pub corner. A man playing banjo and a woman playing fiddle.

Last time we were in Miltown Malbay was three years ago …and three years before that. Maybe we’ll be back in another three years.

I don’t know, though. It kind of felt like going to the South By Southwest after it got crazy big and the host town could no longer bear the weight of the event.

Still, I thoroughly enjoyed our two-week excursion down a stretch of the Wild Atlantic Way from Donegal to Galway to Clare.

Whither Colbert? Whither democracy

Like every sane American, I am outraged that CBS/Paramount/Ellison Inc. canceled — in the true meaning of the word — Stephen Colbert, capitulating to Trump in the rapid Orbanization of American media. Here I propose what I hope comes next for Colbert: that he build his own show and empire online. And I’ll tell for the first time of […]

The post Whither Colbert? Whither democracy appeared first on BuzzMachine.

Gleann Cholm Cille

I had never been to Donegal before my trip to Glencolmcille to spend a week there learning Irish.

I had heard it’s beautiful there. But pictures don’t really do it justice. When our bus was winding its way down into the valley, it looked breathtaking, laid out before us like a green haven where we’d spend the week immersed in the language as well as the landscape.

The reason I say that pictures don’t do it justice is that the light is constantly changing, like in the Lake District or the Dingle peninsula. The beauty is formed of equal parts geography and meteorology.

We had a day to explore before the language courses begin. We strolled along the beach. We walked down winding paths to find ancient burial tombs and standing stones.

The curve of a sandy beach lapped by waves flanked by green rocky countryside on either side. Green grass and rugged hill under a blue sky with wisps of cloud. An ancient stone tomb in a lush green and rocky landscape. A standing stone with celtic carvings and a single small hole amidst greenery.

Then it was time to knuckle down and learn Irish.

Oideas Gael provides seven levels of learning, increasing in experience. Jessica went in at level one and I was amazed by how much she had picked up by the end of the week. I figured I’d go in at level three or maybe four, but after hearing a description of all the levels, I actually decided to try level five.

It turned out to be just right. There was lots to learn, and I definitely need to make sure I keep working on it, but the teacher was great and my classmates were lovely.

Tar éis an cursa, tá níos mó ealois agam, tá níos mó taithí agam, ach an rud is tábhachtaí, tá níos mó féin-mhuinín agam. After the course, I have more knowledge, I have more experience, but most importantly, I have more self-confidence.

And after a day of learning Irish, it was nice to unwind in the evening with a pint in the local pub, where there was also a session every single night. Not only were the musicians top-notch, they were also very welcoming to this blow-in mandolin player.

A fiddler and a flute player at a round pub table. Two women, one playing fiddle and the other playing piano accordion at a pub table. A woman playing button accordion and a man playing fiddle in a pub. A fiddler and a box player at a pub table.

All in all, it was a wonderful and fulfilling week.

Beidh mé ar ais arís! I’ll be back again!

Equip Others with the Right UX Tools

Don't leave your colleagues hanging. Give them the tools they need to do user research, prototyping, testing, and more.

402: Bookmarks

Pins are dead! Long live bookmarks! Pins was never a good name for the feature we have on CodePen where you can mark a Pen or Collection to more quickly jump back to it from anywhere on the site. The word is too similar to “Pen” that it’s just awkward, not to mention it’s not […]

Project 2026

Starting today, file suits to prevent biased gerrymandering. Fight harder for the right to vote than the GOP has fought to suppress the votes of Americans MAGA dislikes. Craft a Democratic party platform focused on equal rights, equal justice, fair wages, and affordable housing. Win the Midterms, shifting the balance of power in congress. Upon […]

The post Project 2026 appeared first on Jeffrey Zeldman Presents.

screencasting.com

I saw that screencasting.com launched recently. It’s training courses all about building high-quality screencasts. Seemed like a great idea to me with the perfect domain name. There is so much video lately in today’s media and plenty of it involves editing together camera footage, stock clips, screen recordings, etc. The learning curve on doing all […]

Chris’ Corner: We Can Have Nice Things

It’s such a small, simple thing, but I’m very grateful that we’re getting “Gap Decorations” in CSS. Microsoft is working on “gap decorations” and have put together a nice playground to explore them, and I had a play. The idea is drawing lines where gaps would be, rather than empty space. It’s really quite well done with lots of control […]

CSS Day Videos & Scope

John Allsopp has a new platform Conffab that is for livestreaming conferences as well as providing on-demand access to past recorded conference presentations. Some of which are behind a paywall. He’s got good reason to productize this. It boils down to incentives. If it all works, it’s a better place for all: presenters, organizers, and […]

The conversion mistakes I see on almost every small business website

Discover the eight conversion killers lurking on small business websites and learn simple fixes for each. From slow pages to cluttered forms, these common mistakes are costing you customers.

The eye of God

My doctor sends me to Brooklyn for an abdominal aortic aneurysm screening. As instructed, I fast for six hours beforehand. I don’t even brush my teeth, for fear of swallowing toothpaste and screwing up the test. I wear a Covid-era face mask to avoid breathing on anyone. The journey takes me to Boro Park, a […]

The post The eye of God appeared first on Jeffrey Zeldman Presents.

401: Outgoing Email

Hi! We’re back! Weird right? It’s been over 2 years.  We took a break after episode 400, not because we ran out of things to talk about, but because we were so focused on our CodePen 2.0 work, it got old not being able to discuss it yet. We’ll be talking plenty about that going forward. But […]

“Medical Superintelligence”

Benchmarked against real-world case records published each week in the New England Journal of Medicine, we show that the Microsoft AI Diagnostic Orchestrator (MAI-DxO) correctly diagnoses up to 85% of NEJM case proceedings, a rate more than four times higher than a group of experienced physicians. MAI-DxO also gets to the correct diagnosis more cost-effectively than physicians. […]

The Times’ Mamdani vendetta

The Times has it out for Zohran Mamdani. The record is clear. It is time to examine receipts.  The latest attack on him is journalistically unconscionable, and so is the editors’ reaction to legitimate criticism. In a story played by its editors on its home page and boosted by its reporter as his scoop — when it […]

The post The Times’ Mamdani vendetta appeared first on BuzzMachine.

Offerwall + Supertab

Offerwall lets sites provide potentially a few ways to monetize content, and for users to choose the one that they prefer. For example, a publisher can set up to allow reading their site in exchange for watching an ad (similar to YouTube’s model). That’s pretty interesting, but far more interesting to me, is that it integrates with […]

Post-Glitch

Jenn Schiffer, in what was surely a bummer post to write because of all the time and heart she put into Glitch, lists out what’s she’s doing to move her glitch.com projects elsewhere post-shutdown. i’ve been using codepen since the beginning. i just found this “in progress” live horse birth in css that was last saved 11 […]

coyier.com

Somebody emailed me out of the blue offering to sell me coyier.com. Usually I’m not interested in domains. I have this one, it’s fine. Subdomains are cool. You can put dashes in domains and get them cheap (see: css-tricks.com). There are a billion TLDs now and you don’t really need the dot-com. But I thought […]

Irish odyssey

I’ve been taking some time off after UX London. That was a big project I was working towards all year and it went great, so I think I’ve earned a reward for myself.

My reward is to head off to Ireland to immerse myself in the language and music. A week at an Irish language school in Donegal followed by a week at an Irish music festival in Clare, with a little weekend in Galway in between.

First I had to get to Donegal. My plan was: fly from Gatwick to Dublin; get the train from Dublin to Sligo; spend the night in Sligo; take a couple of buses to get to my destination in Donegal.

I fell at the first hurdle.

I consider myself a fairly seasoned traveller at this point so I’m kicking myself that I somehow messed up the time of that flight to Dublin. I showed up after the bag check had closed. That’s when I realised I was off by an hour.

The next available flight to Dublin wasn’t until late in the evening. Jessica and I contemplated spending all day waiting for that, then spending the night in Dublin, and then doing all the overland travel the next day.

But we didn’t do that. We went to Belfast instead. As it turned out, we had a great evening there at a lovely piping session that only happens on the last Friday of the month—the very day we were there. It was meant to be.

The next day we got the train to Derry, then a bus to Letterkenny, and then eventually another bus to Donegal town (the first one just didn’t show up—probably because Donegal were playing a semi-final match at the time), and finally the bus from Donegal town to Glencolmcille.

I had never been to Donegal before. Everyone always goes on about how beautiful it is. They are not wrong. The closer we got to Glencolmcille, the more our breath was literally taken away by the stunning landscape.

So here we are. We’re both doing Irish language classes. It’s all very challenging and very rewarding at the same time.

Best of all, we’re doing it in this unbelievably beautiful place.

This is the just the start of my little odyssey on the west coast of Ireland and it’s already absolutely wonderful …apart from that unexpectedly bumpy start.

Chris’ Corner: Tokens

Mr. Brad Frost, and his brother Ian, have a new course they are selling called Subatomic: The Complete Guide to Design Tokens. To be honest, I was a smidge skeptical. I know what a design token is. It’s a variable of a color or font-family or something. I pretty much only work on websites, so […]

USPS! It’s not possible for me to use your Change of Address tool

I’ve tried over the course of a couple of weeks. I’ve tried in Firefox, Safari, and Chrome. I’ve ensured there are no browser extensions at all running. I’ve tried changing little details on the forms in case one of them was tripping it up. I’ve tried on two different networks, neither of which has anything […]

One Fix for DNS Setting Itself On Restart to 127.0.0.1

For over a year every time I restarted my computer, the internet didn’t work. The trouble was, and I forgot how I even figured it out at first, was that the DNS Server was set 127.0.0.1 on my WiFi settings (regardless of what network). I’d come in here, delete it, and they would default back […]

Productivity traps I fall into regularly

There’s some productivity traps I fall into on a regular basis. They all tie into my personal flavor of ADHD but it’s not totally fair to blame the ol’ meat-wad brain when I know when, where, and why it happens.

  1. There’s a Big Thing to do, so I can’t do anything else
  2. Boredom in meetings leads internet wanderings
  3. I should blog this real quick turns into work avoidance

The Big Thing…

One of my ADHD quirks is that if there’s a Big Thing to do that day (doctor’s appointment, package delivery, big presentation) then 100% of my brain goes to that important event. I can’t miss it. Nothing else gets done until The Big Thing gets done.

Conversely, after The Big Thing gets done, nothing else gets done either because my brain –flooded with dopamine– feels an enormous sense of accomplishment for remembering to do The Big Thing. I did The Big Thing. The Big Thing is done. Mission accomplished.

Completing that big task should free up new brain RAM allocation for the next task… but it doesn’t work that way. I spent so much energy keeping the horses in the barn, my brain won’t even consider letting them out again until much later in the evening. Hands numb from sitting on them try to grab a new task from the shelf, but can’t.

If anyone deals with this and knows how to either a) make The Big Thing less blocking or b) perform a tactial reset after The Big Thing, I’d love to know.

Boredom in meetings…

I have a bad habit where I get dopamine starved in a meeting and I naturally hop over to YouTube and start queuing up interesting videos. This regrettably creates a backlog of open tabs for me to clear out when I’m out of the meeting. This isn’t good. It’s so bad because I’ll even look for other videos to watch while I’m watching a video. Why do I do this to myself?

I need to reprogram my brain to smell boredom and find dopamine another –more temporary– way. I used to speed cube during meetings, that was probably my most successful era of doing meetings. I should try and go back to that. Or 3D print a bunch of fidgets. I bought a big drawing pad at Five Below and put it next to my desk and have had a little success sketching during meetings, but YouTube and social media are so damn convenient.

It’s not just video, it happens with blog posts too. One social media link. Links to another link. Links to another. Now I have 5,000 tabs. Oof.

Focus tools to block social media sites has been effective, but any other strategies I need to know about?

Blog this real quick…

If I ever think about something too much and it’s blogpost-worthy content, I try to fire up a draft to get the idea out of my head. If I can create a rough outline in my second brain now, I can come back to it later… but it’s a worm hole.

While the intent is to capture the idea, I naturally switch into writing mode trying to fill out sentences and shape paragraphs. I think it’s dopamine starvation again. When I’m writing in my note taking app, I’m in a fun place where I’m a high functioning adult and the desire to go back to trudging through thousands of lines of JSON is low in comparison.

Of all these productivity traps, writing a blog post is the least offensive to me. Writing ideas helps cement knowledge and that’s a good thing for a knowledge worker. It also keeps a skill I use at work (writing) sharp. But when it’s a form of escapism from what I actually need to do, I need to find efficient ways to curb that behavior. Time-boxing seems like a good idea here.

Here be dragons

I’m sharing these traps in the hope that I become more cognizant and accountable to myself. I can almost see myself falling down these traps in a third-person over camera angle. “The Big Thing” probably gets me the most often, I’d love to overcome it.

I’m curious about other brains. Have you found other traps I need to know about? Do you embrace the chaos and let the day fall apart? Do you have systems built up to self-correct?

Inverse text-sizing based on text-length with attr()

Text reflow on the web has an interesting relationship with Responsive Web Design. As a column gets smaller text wraps and becomes taller1. But for large format display text, that’s not always what you want2. What I’ve wanted for awhile now is a way to inversely size text based on the text length (where the font-size gets smaller as the heading gets longer).

I’ve been chasing the white whale of responsive text-sizing for over a decade and I think I’ve got my best attempt to-date with the new attr() upgrades that landed in CSS (Chromium-only at time of writing).

See the Pen inverse text-sizing with attr by Dave Rupert (@davatron5000) on CodePen.

CSS’s attr() function got an upgrade this year where you can use it independent of content in pseudo-elements. They also added the ability to cast types to the values. Before that change all attributes were text strings and if you tried to use it in a calc() function, CSS would bail because you can’t multiply a pixel by a text string. With the new upgraded attr() function you can specify a type in the new type() function as the second parameter of attr(): attr(foo type(<number>)) .

Having these pieces of technology in place lets us mix in HTML attributes to our CSS math.

h1 {
  --ideal-cpl: 45;  
  --numchars: attr(data-numchars type(<number>));
  --ratio: calc(var(--ideal-cpl) / var(--numchars));
  --min-font-size: 1.2rem;
  --max-font-size: 4rem;
  
  font-size: clamp(
	  var(--min-font-size), 
	  var(--max-font-size) * var(--ratio), 
	  var(--max-font-size)
  );
}

We start with an --ideal-cpl, which is a typographic notion that there’s an ideal line-length at or near 66 characters per line and perhaps smaller on mobile (source: UXPin). Headings are probably less. We take that number and divide it by --numchars from our data-numchars attribute to get a ratio to multiply our text by (e.g. 45cpl / 60numchars = 0.75 or 45cpl / 30numchars = 1.5).

Then set some min/max variables and chuck it all into a clamp() function to enforce some limits. Anything under the --ideal-cpl will clamped to the --max-font-size and titles over the --ideal-cpl will shrink down until they hit the --min-font-size.

To help with graceful degradation in unsupported browsers (Safari, Firefox), we need to use the CSSOM @property syntax to typecast our --numchars custom property. This is a hint to browsers like Mobile Safari that --numchars is going to be a <number> and we can set a fallback value as well.

/* Property used to provide fallback to other browsers */
@property --numchars {
  syntax: "<number>";
  inherits: false;
  initial-value: 45; /* set to same value as --ideal-cpl */
}

Hopefully the “magic” here is pretty easy to understand but for completion’s sake, you’ll need to add data-numchars to your HTML to make this work.

<h1 data-numchars="71">
  Lorem ipsum dolor sit amet consectetur
  adipisicing elit. Vitae, maxime.
</h1>

Templating languages can help. Here’s what I do in my Liquid templates for Jekyll:


<h1 data-numchars="{{ title.size }}">{{ title }}</h1>

If you don’t have access to your template but somehow have access to JavaScript, you can do something this:

document.querySelectorAll('h1').forEach(el => 
	el.dataset.numchars = el.textContent.length
);

I’ve went ahead and rolled this technique out on my entire site and made a All Titles page where I can tweak variables to my liking. The result is I get to keep my chonky headlines on mobile, but almost no heading wrap more than three lines. One improvement might be to use more CSS math to snap to different short/medium/long sizes, so its less cacophonous… but on my site you only see one display title at a time, so it’s less of a big deal.

Scaling text responsivebly

With all that in place, we have a HTML/CSS-based solution for responsive text-sizing with minimal overhead, no JS required, no extra DOM, and a graceful degradation to older browsers. I intentionally kept this dumb to allow for text wrapping, but Paul Irish forked me to make a contenteditable demo work edge-to-edge like Kizu’s Fit-to-Width or Zach Leatherman’s old BigText jQuery plugin.

See the Pen inverse text-sizing with attr - bigtext.js style - contenteditable dealio by Paul Irish (@paulirish) on CodePen.

Impressive. There’s lots of ways to resize text responsively and I’ve added another one to the pile, so here’s a little guide with how I’m thinking about all the options.

  • If you want exact edge-to-edge text-sizing I’d probably recommend Kizu’s clever Fit-to-Width technique.
  • If you (and your designers) are okay with not-so-exact edge-to-edge sizing, Paul’s approach seems like a good candidate.
  • Don’t forget about SVG. Converting display text to outlines in Figma and exporting as SVG is also a nice option for exact fitting text one-offs, but doesn’t localize well.
  • If you want text to scale-inversely to its length but still wrap, use the approach in this post.
  • If you want text to be a bit more fluid between breakpoints, use clamp() + vw units.
  • If you want text to scale based on it’s parent’s width like a vector, then DON’T USE FitText and use clamp(var(--min-font-size), 10cqi, var(--max-font-size)) with a CSS container instead.
  • If you want strict typographic control at every breakpoint, use rem or px.

Lots of options for scalable type out there that give type-setting control freak nerds nightmares, have fun!

  1. Images have the opposite problem, wide desktop images lose hierarchy as the viewport gets smaller. And then portrait images get too much hierarchy when they scale up.

  2. Large format display text wrapping on mobile can even cause accessibility issues, whether it’s cognitive issue with one word per line or a motor issue where long words break the container and cause horizontal scrolling.

Chris’ Corner: Modern CSS Features Coming Together

I like the term “content aware components” like Eric Bailey uses in the Piccalilli article Making content-aware components using CSS :has(), grid, and quantity queries. Does a card have a photo? Yes, do one thing, no, do another. That sort of thing. Eric has some good examples where a UI component has a bunch more […]

The unsung principles of RedwoodSDK

We had Peter Pistorius on ShopTalk to talk about RedwoodJS and the project’s pivot to an almost entirely different project called RedwoodSDK. I am a complete outsider but I liked what RedwoodJS (the old project) was trying to do and didn’t fully understand why they felt the need to reboot. I even have a dusty old post in my drafts folder about what I liked about RedwoodJS. But after talking, it seems the winds of the JavaScript zeitgeist has changed and technology picks from 2020 aren’t the best deep integrations to have anymore.

After talking to Peter, I was pleasantly surprised by the principles that guide the new RedwoodSDK project:

  • Zero magic - No codegen or transpiler side effects
  • Composability over configuration - No opinionated wrappers
  • Uses native Web APIs - No abstraction over fetch, Request, Response, or URL

Those are all principles I can get behind. But what impressed me the most was how RedwoodSDK prioritizes economic justice at the framework level. Peter from the show:

We set up with these principles, and we wrote them down, and they come from a place where I am geographically located. The principles are informed from where I am right now in South Africa. We have really poor people and really rich people. I think we have the highest income disparity in the world… People here don’t have very good mobile phones, they have mobile phones – everyone does – the networks are also pretty fast but bandwidth is expensive and so is memory on phones, and phones are slow. They’re not the best things you have out there. So we designed this framework with these principles in mind in order to deliver the least amount of JavaScript and consume the least amount of bandwidth

For RedwoodSDK, this principle manifests in minimal code sent to the client via React Server Components. RedwoodSDK also has a tight integration with Cloudflare and its edge worker platform which (for most folks) is free. That in turn reduces costs for website owners and customers, which is beneficial in markets with low-bandwidth or pay-per-gigabyte mobile connections.

No $20/mo hosting lock-in scheme.

For Redwood, the goal isn’t to power the next big billion dollar SaaS product (although I’m sure they’d welcome that), but to enable “homegrown” or home-cooked web apps that are easy to build, maintain, and low-cost to run. Allow people to build that bespoke app for their bespoke need for themselves or their community. Their new tagline is “This could be the start of something small” and the tech world needs more of that.

I wish Web Components had a project like this…

Chekuskin's dream

Chekuskin dreamed he was in a factory sidling up the walkspace, besides some immense machine. But when he put his hand on it to steady himself, instead of cold metal the surface he felt was lively and warm. Little tremors ran through it, but not mechanical ones. The machine he saw was viley alive. Beneath a membrane of purpleish black, fluids were pulsing thickly from chamber to chamber. He stepped back, but his hand would not come free. It had stuck to the machine and now he realized there was no real palm to his hand anymore. He could no more pull away than he could pull his arm off. His arm, his whole body, were outgrowths of the machine. Just a siphon in a man’s shape through which the same fluid sluggishly circulated. But then the walls were gone, but the machine remained. It stretched away into snowy darkness. Somehow because he was part of it, he could feel its vastness. At its edges it was tirelessly eating whatever remained in the world that was not yet it. And it consumed its own wastes too. It was warm and poisonous, and it grew and grew and grew.

But in the morning. He felt much better. The dream washed away in a hot shower.

– Chekuskin’s dream from the end of Part IV of Red Plenty by Francis Spufford

Chris’ Corner: Liquid Ass

First a quick heads up about… me. I have a weird itch to do “streaming”, so I’m letting myself just be a hardcore beginner and giving it a shot. The plan is just hang out with whoever shows up and make stuff and talk about front end web development and design. So: Seems like those […]

Chris Corner: For The Sake of It

Somebody with good taste could’ve made my website, but then it wouldn’t be mine. My website is ugly because I made it — Taylor Troesh I love weird design ideas. Probably because so much of what we need to do as web designers is, appropriately, somewhat serious. We want things to be simple, clear, professional, […]

Chris’ Corner: Type Stuff!

Let’s do typography stuff!

The Fifth Estate

Careless People is a tell-all book that walks through Facebook’s rampant (and criminally?) inept responses to it’s growing role in global policy, from it’s role in the Rohingya genocide in Myanmar to the election of Donald J. Trump. The book, written by Facebook’s former director of foreign policy Sarah Wynn-Williams, explains that Zuckerberg initially denied the notion that Facebook could ever impact an election but over time starts to see Facebook and social media as a powerful “Digital Fifth Estate”.

The three-estate system used to refer to the Clergy, the Nobles, and the Commoners. In modern times, the three-estate system describes the legislative, executive, and judicial branches of government. Then there’s the newly minted (ahem, circa 1840) Fourth Estate comprised of good ol’ fashioned journalism and newspapers. The Fourth Estate applies pressure on the other estates through shining a spotlight on important or unaddressed issues. Another form of checks and balances. I would lump academia into the Fourth Estate as well. And so does Wikipedia. So. I’m right because an online wiki said so.

Speaking of online wikis, what does a “Digital Fifth Estate” look like?

A Fifth Estate, while not recognized in the same way as the first four, includes bloggers, social media influencers, and other online platforms that can influence public discourse and politics independently of traditional media.

I’ve read about the influence of the “man-o-sphere” and MSNBC is tying itself in knots trying to find “the Joe Rogan of the Left” and I can’t help but roll my eyes. No doubt the Left needs to consider issues facing men more, but the Zune had better luck with a product clone. With the framing of the Fifth Estate though, I understand the desire better. Most people have lost trust in the Fourth Estate and the Fifth Estate explains to me why podcasters, YouTube influencers, and newsletter goblins have so much political sway these days (certainly during the last election) and why news organizations and academic scientists don’t anymore.

Estates are for sale. Billionaires also own major portions of the First, Second, and Third Estates through gifts, bribes, and threat of primaries. Billionaires like the Murdochs and Bezos (RIP The Washington Post) and media conglomerates own major portions of the Fourth Estate. “Mainstream media” has become an effective slur, even when there’s no true meaning behind it. And in places where the Fourth Estate isn’t for sale, you slap them with a lawsuit.

We commoners have lost trust in the Estates, like we lost trust in the Clergy and Nobles in the before times. The Fifth Estate is why “flood the zone with shit” is an effective tactic. We’re not making informed decisions based on answers from educated individuals. We’re making decisions based on vibes and standup comics who host pay-per-view fight clubs. We’re eating Tide Pods to get the toxins out. We’re getting our news from a guy in a car with a backwards hat and sunglasses. We ask fancy autocomplete for answers to our personal problems, to do our work, to write our eulogies.

This shift isn’t lost on the wealthy, billionaires like Musk and Zuckerberg own major portions of the Fifth Estate. They also own the AI. They create bots to keep us engaged on their apps. Why? Because our attention powers their products. They’ve captured and commoditized our attention to auction our eyeballs to advertisers. The flip-side of this system forced on us is that we know our attention has value. If you want two good books on the intersection of attention and billionaires, I recommend Chris Hayes’ book The Sirens’ Call followed up by his other book Twilight of the Elites.

The concept of a digital Fifth Estate is profound to me because it appears effective and it’s the one where I have the most choice. My singular vote pales in comparison to the influence of a well-funded Super PAC. I don’t get to choose who owns my local newspaper or the board of the university. I don’t have a legal team to undo Citizens United. But I do get to choose where I give my time and attention.

Where I find hope, if the Fifth Estate is powerful enough to hoodwink our fellow citizens into authoritarianism, then we –you and me– can seize power from the already powerful. We can give power –our attention– to the trustworthy. We can eradicate the “rich ergo good” fallacy. And the cost of “going indie” in the Fifth Estate is lower than it has ever been right now with a sizable exodus to Mastodon and Bluesky. Sure, all your favorite nazis and Russian botnets might be harder to find on the alternatives, but think about it as an investment in a world that isn’t owned by wealthy people already.

I don’t have the capital to start my own Fourth Estate university or newspaper. But I do have this blog. A minor stake in the Fifth Estate. But my blog plus your blog, mix in some RSS and the power of sharing interesting blogs and podcasts… we might make a dent.