The Blogroll

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!

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.

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.

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!

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 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 […]

Live

Ever since Salter Cane recorded the songs on Deep Black Water I’ve been itching to play them live. At our album launch gig last Friday, I finally got my chance.

It felt soooo good! It helped that we had the best on-stage sound ever (note to the bands of Brighton, Leon at the Hope and Ruin is fantastic at doing the sound). The band were tight, the songs sounded great live, and I had an absolute blast.

Salter Cane on stage, with Chris in full howl singing into the mic and playing guitar, flanked by Jeremy on slide bouzouki and Jessica on bass (Matt on the drums is hidden behind Chris).

I made a playlist of songs to be played in between bands. It set the tone nicely. As well as some obvious touchstones like 16 Horsepower and Joy Division, I made sure to include some local bands we’re fond of, like The Equitorial Group, Mudlow, Patients, and The Roebucks.

UX Londoners

A bunch of the UX London speakers have been saying very nice things about the event over on LinkedIn. I’m going to quote a few of them for my future self to look at when I’m freaking out about curating the next event…

Valentina D’Efilippo:

Still buzzing … UX London smashed all expectations!

Huge shoutout to Jeremy Keith and the entire Clearleft team for their tireless efforts in making this event truly special. Three days packed with inspiration, insights, and true gems – I left feeling inspired, grateful, and already looking forward to next year’s event!

Eleni Beveratou:

Huge thanks to my fellow speakers for the inspiring talks, and to the team at Clearleft (Jeremy Keith, Louise Ash, and so many more!) for putting together such a brilliant event.

Videha Sharma:

I’ve loved learning and sharing this week! Feeling super inspired and looking forward to building new friendships!

Carolina Greno:

Last week in UX London I got to witness event planning mastery, I was in awe. Things ran smoothly and people were united under a premise: to share knowledge and build community.

This doesn’t happen by chance, it’s the mastery that pros like Jeremy and Louise bring to the table.

Sayani Mitra

Bold, thought-provoking talks. Hands-on workshops that challenged and stretched thinking. And a real sense of community that reminded me why spaces like this matter so much.

Nina Mathilde Dyrberg:

The conference was packed with inspiration, thoughtful conversations, and a strong focus on accessibility and inclusivity. Thank you Luke Hay, Jeremy Keith, Louise Ash, and the whole Clearleft team for creating such a welcoming and inspiring space!

Craig Abbott:

Jeremy Keith, Richard Rutter, Louise Ash, Chris How, Sophie Count, Luke Hay and the rest of Clearleft, take a bow! Hands down one of the best conference experiences I’ve had!

The curation was excellent, the talks complimented each other so well, it was almost like we’d all met up and rehearsed it beforehand!

ÌníOlúwa Abíódún:

A huge thank you to Jeremy Keith, Louise Ash and the Clearleft team for the opportunity and the brilliant conference you’ve put together.

It’s been inspiring to experience every moment of it.

Laura Dantonio:

Shoutout to the organisers for curating such a rich experience—3 themed days focused on Discovery, Design, and Delivery.

We remember through stories. And this event was full of them. Already looking forward to next year.

And I’m just going to quote Rachel Rosenson’s post in its entirety:

Spoke at UXLondon last week—and while the talks were great, it was something off-stage that really stuck with me.

After the Day 1 talks wrapped, a bunch of us speakers grabbed a drink, and someone pointed out: Every single speaker that day—every one—was a woman. 5 talks. 4 workshops. All women.

And it wasn’t a “Women in Tech” day. It was just… the conference.

No one made a fuss. No banners. No “look at us go!”

Just incredible women, giving incredible talks, like it was the most normal thing in the world. (Spoiler: it should be.)

Jeremy Keith mentioned how frustrating it is that all-male line-ups are still so common—and how important it is to actively design for inclusion. Major props to Jeremy and the Clearleft team for curating a line-up that was intentional without performativity.

It was refreshing. No tokenism. No checkbox energy. Just great voices on great stages. And a big honor to be one of them.

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

That was UX London 2025

UX London happened last week.

Working on an event is a weird kind of project. You spend all your time and effort on something that is then over in the blink of an eye.

I’d been preparing for this all year. 95% of my work happened before the event—curating the line-up, planning each day. There wasn’t all that much for me to do at the event itself other than introduce the speakers and chat with the attendees.

Maybe it was because there was very little left in my control, but the night before the event I found myself feeling really anxious and nervous. I was pretty sure the line-up was excellent, but anything could happen. I really wanted everyone to have a great time, but at that point, there wasn’t much more I could do.

Then the first day started. Every talk was superb. Everyone got really stuck into their workshops. By the end of the day, people were buzzing about what a great time they’d had.

My nervousness was easing. But that was only one day of three.

The second day was just as good. Again, every talk was superb. I began to suspect that the first day wasn’t just a fluke.

The third day confirmed it. Three days of top-notch talks—nary a dud in the whole line-up!

It was, dare I say it, the best UX London yet. Not just because of the talks and workshops. The attendees were absolutely lovely! There was a really good buzz throughout.

By the end of the event I felt a huge sense of relief.

For this year’s UX London, I put a lot of time and effort into curating the line-up. There were some safe bets. There were some risky bets. They all paid off.

I’m incredibly grateful to all of the fantastic speakers and workshop hosts who really gave it their all. And I’m so, so grateful to everyone who came. It’s a tough time for events right now, and I really appreciate every single person who made it to this year’s UX London. Thank you!

The only downside to pouring my heart and soul into this year’s line-up is that I left nothing in the tank for next year. I’m already starting to worry—how am I going to top UX London 2025?

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 […]

Media Diet

📺 WondLa — I was enamored by this story of a girl in a strange post-apoc world. Season 1 was a lot stronger than season 2, so despite the cliffhanger ending, I’m not holding my breath for a third. 🎥 Sinners — This was like three movies in one. A movie about family and community […]

Lest We Forget The Horrors

Just a high five to McSweeney’s for the month-by-month documentation of the horrible crap Trump does. Just a paragraph reminder with good links to confirm. I try to keep my own little mental list of things that horrify me. Not to slather myself in, as I don’t have the mental health spoons to live like […]

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.

Accessibility 101

Nat Tarnoff covers the basics.

The post Accessibility 101 appeared first on Jeffrey Zeldman Presents.

Uses

I don’t use large language models. My objection to using them is ethical. I know how the sausage is made.

I wanted to clarify that. I’m not rejecting large language models because they’re useless. They can absolutely be useful. I just don’t think the usefulness outweighs the ethical issues in how they’re trained.

Molly White came to the same conclusion:

The benefits, though extant, seem to pale in comparison to the costs.

Rich has similar thoughts:

What I do know is that I find LLMs useful on occasion, but every time I use one I die a little inside.

I genuinely look forward to being able to use a large language model with a clear conscience. Such a model would need to be trained ethically. When we get a free-range organic large language model I’ll be the first in line to use it. Until then, I’ll abstain. Remember:

You don’t get companies to change their behaviour by rewarding them for it. If you really want better behaviour from the purveyors of generative tools, you should be boycotting the current offerings.

Still, in anticipation of an ethical large language model someday becoming reality, I think it’s good for me to have an understanding of which tasks these tools are good at.

Prototyping seems like a good use case. My general attitude to prototyping is the exact opposite to my attitude to production code; use absolutely any tool you want and prioritise speed over quality.

When it comes to coding in general, I think Laurie is really onto something when he says:

Is what you’re doing taking a large amount of text and asking the LLM to convert it into a smaller amount of text? Then it’s probably going to be great at it. If you’re asking it to convert into a roughly equal amount of text it will be so-so. If you’re asking it to create more text than you gave it, forget about it.

In other words, despite what the hype says, these tools are far better at transforming than they are at generating.

Iris Meredith goes deeper into this distinction between transformative and compositional work:

Compositionality relies (among other things) on two core values or functions: choice and precision, both of which are antithetical to LLM functioning.

My own take on this is that transformative work is often the drudge work—take this data dump and convert it to some other format; take this mock-up and make a disposable prototype. I want my tools to help me with that.

But compositional work that relies on judgement, taste, and choice? Not only would I not use a large language model for that, it’s exactly the kind of work that I don’t want to automate away.

Transformative work is done with broad brushstrokes. Compositional work is done with a scalpel.

Large language models are big messy brushes, not scalpels.

Take My Hand, Precious Lord

Take My Hand, Precious Lord (also known as the inverse Precious Lord, Take My Hand) is an old gospel hymn with a unique and special tie-in to the American Civil Rights story. Written in 1932 by Thomas Dorsey after he co-founded National Convention of Gospel Choirs and Choruses (NCGCC), the tune borrowed from a 1844 hymn called “Maitland” (George N. Allan) and took inspiration from a performance of the song by Blind Connie Williams.

The song was written after the death of Dorsey’s wife Nettie and his son during childbirth. Tragic doesn’t even begin to describe the situation. You feel the heartache in the simple refrain, “I am tired, I am weak, I am worn”. It’s a cry for help and comfort beyond what the world can offer.

One notable fan of the song was MLK. Dr. King would often asked Mahalia Jackson to sing this particular song at civil rights rallies. He even made her promise to sing the song at his funeral. And on April 4th, 1968 outside the Lorraine Motel in Memphis, Tennessee, Dr. King’s last recorded words were to musician Ben Branch for an event he was performing that evening…

“Ben, make sure you play ‘Take My Hand, Precious Lord’ in the meeting tonight. Play it real pretty.”

Moments later, Dr. King was shot and died on the way to the hospital. This began a bit of a tradition with this song.

Dozens of famous people from Bruce Springsteen to Nina Simone have sung versions of this song, but to me the best recorded version of this song comes from Aretha Franklin’s groundbreaking and award-winning gospel album Amazing Grace, recorded in Los Angeles in 1972 which is also an incredible documentary (2018) if you haven’t already seen it already. The choir and the bassist do most of the work but it punches you right in the gut. At one point Aretha appears to sing the wrong verse over the choir, but she knows what she’s doing. It’s layers upon layers stitched inside a medley, building up a magical tapestry of song.

        G             G7
Precious Lord, take my hand,
        C
Lead me on, let me stand,
     G                      D7
I am tired, I am weak, I am worn;
            G                  G7
Through the storm, through the night,
        C
Lead me on to the light:
        G              D7
Take my hand, precious Lord,
        G     C G
Lead me home.


        G              G7
When my way grows drear,
        C
Precious Lord, linger near,
     G                     D7
When my life is almost gone,
           G             G7
Hear my cry, hear my call,
        C
Hold my hand lest I fall
        G              D7
Take my hand, precious Lord,
        G     C G
Lead me home.



         G              G7
When the darkness appears
        C
And the night draws near,
    G                      D7
And the day is past and gone,
            G        G7
At the river I stand,
         C
Guide my feet, hold my hand
        G              D7
Take my hand, precious Lord,
        G     C G
Lead me home.

When I’m feeling the pains of the world I often think about this song. I think about how exhausting it must have been to pick yourself up under the oppression of Jim Crow. No doubt it would leave you feeling tired, weak, and worn at the end of each night. To have freedom in a free country. To have a vote. To have dignity.

When I’m tired at end of a night, I sit at the piano and try to play this song. It never sounds as beautiful as those who have sung it before but it hits all the same. I think this would be a wonderful song to have at a funeral. Play it real pretty.

Chris’ Corner: Doing a Good Job

This is a great story from Dan North about “The Worst Programmer I know”, Tim MacKinnon. It’s a story about measuring developer performance with metrics: We were working for a well-known software consultancy at a Big Bank that decided to introduce individual performance metrics, “for appraisal and personal development purposes”. This was cascaded through the […]

Tools

One persistent piece of slopaganda you’ll hear is this:

“It’s just a tool. What matters is how you use it.”

This isn’t a new tack. The same justification has been applied to many technologies.

Leaving aside Kranzberg’s first law, large language models are the very antithesis of a neutral technology. They’re imbued with bias and political decisions at every level.

There’s the obvious problem of where the training data comes from. It’s stolen. Everyone knows this, but some people would rather pretend they don’t know how the sausage is made.

But if you set aside how the tool is made, it’s still just a tool, right? A building is still a building even if it’s built on stolen land.

Except with large language models, the training data is just the first step. After that you need to traumatise an underpaid workforce to remove the most horrifying content. Then you build an opaque black box that end-users have no control over.

Take temperature, for example. That’s the degree of probability a large language model uses for choosing the next token. Dial the temperature too low and the tool will parrot its training data too closely, making it a plagiarism machine. Dial the temperature too high and the tool generates what we kindly call “hallucinations”.

Either way, you have no control over that dial. Someone else is making that decision for you.

A large language model is as neutral as an AK-47.

I understand why people want to feel in control of the tools they’re using. I know why people will use large language models for some tasks—brainstorming, rubber ducking—but strictly avoid them for any outputs intended for human consumption.

You could even convince yourself that a large language model is like a bicycle for the mind. In truth, a large language model is more like one of those hover chairs on the spaceship in WALL·E.

Large language models don’t amplify your creativity and agency. Large language models stunt your creativity and rob you of agency.

When someone applies a large language model it is an example of tool use. But the large language model isn’t the tool.

Vibe Check №38

It’s been an eventful three months since my last update. I nearly burnt myself out powering through a big internal release at work in February, a season of back-to-back family activities March and April, I turned 45 at the end of April and school lets out next week. Summer has begun.

And let’s be honest, we could blame the tardiness of this post on a lot of issues: the rise of fascist authoritarianism in America, busy home life, busy career, nights at the ball field… But we all know the real reason this post is months overdue: Balatro.

Internal-source work project launched

I devoted a lot of my Q1 life force to getting an internal work project out the door. It’s an internal design system that’s a sibling of the open source design system I work on but has more components, smaller API surface, a different look, more expressive and robust token system, and it’s less kilobytes.

Our team has a lot to be proud of and built something great but I’m learning that it’s not always a straightforward process in large companies. We’re addressing feedback and iterating to make it better while more requirements trickle in. It’ll jeremy-beremy around a bit until we get the five moons to align.

Cheer competitions

Spring is competitive cheer seasons. My daughter finished her second year of competitive cheer competitions. Not without drama. In late February her team competed at the NCA Cheerleading Competition and won the national championship for her D2 Mini Level 2 division. A minute after hearing the news there was an active shooter situation which was traumatizing even though it turned out to be two groups of parents fighting at a hotel. Wholly unnecessary. Everyone’s safe, but it’s having ripple effects through our family unit and friends’ families as well.

Since that event we’ve decided to go to competitions as a family. We went to one in Houston (technically, Rosenberg) which we parlayed into a trip to see my mom. The cheer season culminated in the Regional Finals competition in New Orleans, Louisiana (see below).

Installed grass and irrigation

Back-to-back heat death summers, our front lawn has been a barren disaster. In the summer the city limits days you can water, I’m inconsistent at watering, grass got too hot, curled up and died. And I don’t love spending my Wednesday and Saturday mornings and evenings moving sprinklers around, getting bit by mosquitos, and realizing I left hoses on in the middle of the night (see: ADHD). I even own a special flat shovel that I use to scrape mud back into our yard after it rains.

One of our lawn guys approached us with a plan to add irrigation and re-sod the front yard for an affordable price so we jumped on it. But did it work? It sure did. I’m happy to report we’re no longer the dirt bags in the neighborhood… for now. At least five neighbors have mentioned our yard (and former dirt patch) to me.

Spring break in Arizona

While most families head to the beach, we went to the desert. Arizona offers us one amenity not available in coastal regions: cousins! For five packed days our kids went wild playing with their cousins. To be honest, being off-duty as a parent with kids fully entertained and redundant parent figures (grandparents, aunts, and uncles) is the most relaxing and restorative break for me.

While we spent most of our time with family, we managed to sneak out and see a pre-season baseball game which was nice. The slow pace of life at the ballpark is a worthy aspiration to strive for.

The Sherwood Forest Renaissance Faire

Our friends the Kentopps invited us to join them at the Renaissance Faire. They have two boys and have gone for the past couple years and our weekends aligned where we could say “Aye,” to ye olde adventure.

There’s something magical about the Renaissance Faire, and I’m not talking strictly about all the cleavage and robed wizard cosplayers. It’s a fully immersive environment on acres of land. People in costume speaking with faux-Arthurian high fantasy accents as far as the eye can see. Shops of all different sizes and caliber selling different handmade and laser-cut wares. The illusion achieves a critical mass, and offers you a gift to suspend your disbelief and enjoy the group improvisation.

I did find it ironic that I’m the biggest nerd in my family, I play DnD, but I don’t have a RenFaire costume. After much discussion I think I realized that I’m not that kind of dork. I’m a different kind of dork.

New Orleans

At the beginning of April my daughter had her Regional Finals cheer competition in New Orleans. We stayed off-French Quarter near the convention center but we dipped in and out as needed. There were a three major highlights of this trip for me:

  1. My daughter’s team finishing their season undefeated
  2. The Honey Island Swamp Tour
  3. Spending lots of time in City Park

We had a great guide on our swamp tour which made it that much more enjoyable. We saw lots of small swamp critters, tons of birds, and the big finale was two 12-foot female gators up close to our boat. Good memories for sure.

We ended up at City Park two or three times over our three day trip. The sculpture garden was phenomenal. There’s an amusement park there too. And can’t forget the Café Du Monde (of course) where you can coat your entire body in powdered sugar for your beignets. I’m sure there’s more to the story of City Park, but I love when cities invest in enormous public spaces. It’s a great contrast and relief to the more intense (and drunk) economic zones.

For Texans (and all Americans?), New Orleans is the closest city you can go that feels like another country. It has a different bustle, a different energy, different food, and that was fun to show the kids.

Bought another car

One Wednesday night my wife said “I think we need to buy a new car.” Part pressure due to family visiting us with no way to haul everyone around, part tariff-induced panic; buying a car became a top family priority. A quick search showed a nearby dealership had the right color (the most important feature of a car) and trim (the one with the black grill and wheels) that my wife wanted.

While this seems impulsive (and believe me, yes, correct) this is how our family operates. We talk about something for years, bucket money, never act, and then full send it on a whim.

At 5pm, she left me with the kids to go scope it out and about an hour later she called and told me to come to the dealership because we were ready to sign papers. Car financing is something that makes me want to pay cash for every car. 6pm turned into 7pm and so on… but by 10pm we were leaving with a brand new car.

Turning 45

I aged again this year. Did you know aging isn’t linear? This is something I learned this year. You age a lot around 44 and then again at 60. Interesting huh? I think I’ve been feeling that this past year. Aches are achier, all that.

I generally feel young, youth-spirited, but on the morning of my 45th I started to see 50 on the horizon and for the first time in my life I think I started to feel old. As I was thinking that my neighbor Cleo texted me to say happy birthday and congratulated me that I was now half her age. That was great timing. A reminder that there’s still a lot of life yet to live. That said, Cleo is super-fit and can still probably outrun me in a foot race, so who knows. You’re not guaranteed much on this earth.

One year at Microsoft

I also celebrated one full year at Microsoft. As I said above I’ve gotten to work on some cool projects; not one but two design systems, a robust design token system, a couple prototypes, and a lot of documentation. I’ve learned a lot and made some good work comrades.

A sour note to this celebration is that last week Microsoft had a 3% reduction in force (which is about 6,000) people. I know enough about enterprise to know this happens periodically but it never seems fair, only callous. I’m a post-processor so I’m sure I’ll be sitting with this for awhile.

Quick Stats

🧠 Learning

I love when I get to take a weekend for myself (read: I’m on parenting duty and the kids are on iPads) to learn something new.

  • Godot - I took a weekend and Hello World’d Godot game engine. I have video game ideas kicking around but with Unity being the game engine I know, I felt like I was experiencing skill collapse because that company has made some horrific decisions. There’s a lot to like about Godot. GDScript feels like a cross between Python and JavaScript so it’s easy to pick up. It’s simplified in a way that you’re not forced to think about Quaternions right way, that’s there but more or less abstracted out. Feels like a good fit for a casual like myself.

📖 Reading

Not my best season of book consumption but that’s countered by the fact that 1) I chopped my RSS down from 3000 to 1200 unreads and 2) I read some great, high quality books.

The Sirens' CallTwilight of the ElitesSystem CollapseCareless PeoplePoverty, by AmericaAbundanceMediations for MortalsWho is Government?

  • The Siren’s Call - Probably the best book I’ve consumed in awhile. Digs into the heart of the Attention Economy and how our attention is valuable, monetized, and exploited.
  • The Twilight of the Elites - Another banger. A look at the 1% and how perverse and outsized the oligarchy’s role is in our politics. Meritocracy is not based on merit, but rather wealth.
  • System Collapse - The last book in the Murderbot franchise.
  • Careless People - Holy shit Facebook is a terrible and willfully ignorant company.
  • Poverty, by America - A great look at the wealthiest country in the world’s biggest problem.
  • Abundance - Ezra Klein and Derek Thompson are mad about… [checks notes] … California housing and want to celebrate … [checks notes] … Operation Warp Speed … ? Ezra Klein wants to (and can be as far as I care) a pillar in the Democratic party and influence the platform… I found the book and ideas to be pretty impotent.
  • Meditations for Mortals - Listening to this as an audiobook at 2x is not how the author intended but I still enjoyed it. I’ll probably buy a paper copy and do the daily reflections.
  • Who is Government? - Anecdotes about ordinary people (and numbers) who avoid the limelight and toil behind the scenes to make government work.

📺 Media

Feeling blessed to have some good shows right now and making time for them.

Shows

  • Win or Lose (Disney+) - Pixar’s “Pulp Fiction” style story characters in and around a youth softball team. Close to perfect as you can be for an animated series.
  • Mobile Suit Gundam Gquuuuuux (Amazon Prime) - A new take on the Gundam franchise by the people who made Evangelion.
  • Welcome to Wrexham S4 (Hulu) - Up the town. Excited for the new season.
  • Murderbot - 50% how I pictured it, 50% not how I pictured it, and 50% even better than I pictured it
  • White Lotus S1 - My wife and I had some kid-free nights where we could watch grownup shows, so we’re three episodes in.
  • Love on the Spectrum - Autistic folks finding love. It’s a sweet show with so much emotional honesty. There’s a lot of making out, but it’s been great to watch the non-make-out parts with the kids and try to field their questions best I can on what makes autistic people unique. One young woman, Pari, on the show summed it up nicely, “It’s like having a different operating system.” I love that.

YouTubes

  • Ari@Home (YouTube) - a guy in NYC who walks around with an entire mobile music production rig on his back.
  • Ska Tune Network (YouTube) - a one man ska band that does incredible cover songs.

🤖 Gunpla

Picked Gunpla back up after a hiatus. No where near peak Gunpla, but it’s enjoyable when I get hop back in.

  • Nobell Gundam - The “Sailor Moon Gundam” featuring class RX-78-2 design but with a tighter waist, longer legs, high heels, long blonde hair, and a school girl uniform.
  • RX-78-2 Gundam Revival - A remake of the original 1979 Gundam plastic model kit. It has the same boxy proportions and limited mobility as the original, but modernized on the inside.
  • Duel Blitz Gundam - A mobile suit that has another set armor it can wear

👾 Gaming

I rebuilt my gaming PC so I could hop on games with my friends more. Been fun.

  • Balatro - Way too much. Still having fun tho. Best way to kill 10 minutes.
  • Warzone - Back in Verdansk with the boys.
  • Overwatch - New stadium mode is okay. Anything different is welcome.
  • Lots of mini web games: 368 chickens, Dragonsweeper, etc.

Thus ends the retelling of the vibes.

Masonry, Item Flow, and… GULP?

Masonry layout is a difficult thing to do with CSS at present. Item Flow could make it easy.

Moving from Notion to Obsidian

As the world turns, so doth productivity apps churn. Readers of this blog will know I’ve been a user of Notion for the last seven-plus years. The block-based editor, the database features, and general “webbiness” of Notion suited me and let my inner productivity- and systems-wonk flourish.

Hearing rave reviews about Obsidian from friends (who are certainly not a cult, I’m told), I’ve tried to switch twice before. I spent entire weekends setting up a trial vault but never felt compelled enough to switch fully. But today –after a slow month-long process– I’m happy to report I’ve ditched Notion and am using Obsidian now. So… what changed?

My problems with Notion

In March, Notion notified me that my monthly cost is increasing from $8/mo to $12/mo (a +50% increase). On top of that, Notion has been pushing AI hard the last couple years culminating in sparkle emojis everywhere and an ever-present animated floating mascot in the corner1. I poked around at the AI features, used my free credits, but came to the conclusion that AI inside Notion is almost the antithesis of what I want in Notion. I use Notion as a thinking tool, I don’t need it to be a think-for-me tool.

The emphasis on AI and the price hike forced me to scrutinize and re-think my commitment. Correct or not, I associated the two chafing points and felt like I was subsidizing other user’s AI usage rather than getting more value out of the app. That was the tipping point for me. I don’t harbor any hatred or disgust for Notion; it’s truly a “we’re growing in two different directions” sort of divorce.

Economically, Obsidian takes me in the opposite direction at $4/mo for Obsidian’s vault sync feature. It also takes me into a more bare bones, hands-on setup experience. That real farm-to-table organic content that forms the bedrock of my personal brand. 😂

My new Obsidian setup

screenshot of my obsidian setup showing a file tree on the left sidebar and a circular graph view of interconnected nodes in the main content area

I’ve watched hours of videos about the perfect Obsidian setup but what truly unlocked it for me was Tyler Sticka’s post Obsidian Miscellany. Seeing Tyler’s setup and the plugins he uses to craft Obsidian’s brutalist nature into something cozy gave me the courage to try a third time. Obsidian has a great plugin system and an active community of developers, where the WordPress-style “There’s a plugin for that” rings true (and probably has similar performance pitfalls). Getting a handful of plugins configured to your liking moves the user experience needle from “Something I use” to “This is mine”.

Copying most of Tyler’s list, here’s the list of plugins I’m using:

  • Advanced Tables - Make markdown tables draggable
  • Auto Card Link - Add unfurl-style link preview cards
  • Dataview - A query language that allows you to build up list or table views using an SQL-like syntax
  • File Explorer Note Count - Show file counts in the sidebar
  • File Explorer++ - Allows you to pin and hide items or folders (e.g. I’m hiding templates)
  • Hider - Hide parts of the UI you don’t need/like
  • Highlightr - Allows you to add highlighter effects to notes.
  • Iconize - Add icons to files and folders
  • Importer - Import items from other note-taking apps
  • Linter - Keep files tidy
  • Longform - A Scrivener-like tool for managing long form content (e.g. my shitty sci-fi stories)
  • Minimal Theme - A Notion-like theme, but more minimal. Highly customizable.
  • Minimal Theme Settings - A UI to manage your Minimal Theme
  • Numerals - A micro-spreadsheet that lets you do calculations
  • Projects - A folder-o-files powered kanban board
  • Style Settings - Override Obsidian styles
  • Tag Wrangler - Normalize, dedupe, and merge tags
  • Write Good - A linter to help correct weasel words and remove passive voice, a poor man’s Grammarly

These breakdown into three major categories of plugins: themes, editor, and process… which is a great segue to talk about the organization and processes I have for my new vault.

Inputs, Outputs, and Tasks

For years I’ve been attempting to do PARA in Notion, but I never found it a perfect match. “Projects have an end date” was revelatory and “Areas” helped me take inventory of my life, but pulling it all together and putting everything in the correct bucket felt like high ceremony. Moving to Obsidian gave me a chance to rethink how I wanted to organize my second brain.

By default, Obsidian nudges you towards no organization, which is to say it wants you to tag and link content to build wiki-like associations in a flat’ish file structure. This doesn’t work for my brain at all. I need a bit of structure to my content. I spent a long time researching different organization systems from the loose (Zettelkasten) to the strict (Johnny Decimal) and I settled on a modification of August Bradley’s Pipelines, Pillars and Vaults that I call “Inputs, Outputs, and Tasks.”

Inputs are scraps of content and ideas that influence your thinking that you want to keep to reference later. I collect these “Inputs” in small files organized in folders by content types like books, links, quotes, and unorganized notes.

Outputs are a big part of why I use a note-taking app; to get ideas out of my head. Whereas Inputs are inert and fine to live in cold storage indefinitely, Outputs want to live in the world and need a little process behind them to maintain momentum. I’ve recruited the help of some kanban and writing plugins to add a thin layer of process to my blog posts and projects.

Tasks are the final leg of the stool and a tool for jumping back into finishing projects or other work. The one key thing about Tasks is that they’re actionable and achievable. Tasks can’t be big abstract to-dos like “Do taxes” or “Make a video game”, they have to be actionable like “Get 1099-R from SEP IRA” or “Prototype fog-of-war system.” Descriptive enough to be actionable, atomic enough to be achievable.

Thankfully, I don’t need a separate Tasks plugin to manage this, I can use the [ ] Task Name syntax in my project note and then use Dataview to slurp up a list of Tasks that I’ve created across all my active projects.

```dataview
TASK
FROM "Outputs"
WHERE !completed 
AND file.frontmatter.status != "DEADPOOL" 
AND file.frontmatter.status != "Archived"
GROUP BY file.name
```

You’d need to customize your WHERE clause to how you have your Obsidian setup, but that query generates a view like this where I group all to-dos by project or note.

a todo list where a list of projects have one to three to-do items listed below

Adding process to Outputs

To manage my outputs I have three plug-ins that help add a layer of process to help get the work out the door.

Projects

screenshot of a kanban board for side projects

One of my favorite and most used features of my Notion was my Blogging Kanban. This was the heart of my content generation flywheel; keeping track of all these scraps of ideas in different states. Blogging and side projects that have a somewhat linear flow and it’s great to visualize a post or project nearing a checkpoint or a published state.

Of all the kanban plugins I tried, Projects felt like the best fit. I know I’m violating open source protocol by heaping requests on free software, but I wish the querying and filtering was a bit more advanced. There’s a lot to be desired on achieving parity with Notion’s rich Kanban and Table system, but it looks like dynamic tables is on the Obsidian roadmap, so I’m fine using the nerfed versions for now.

Longform

screenshot of the longform sidebar UI panel with a story in the main content area

I have six or so shitty sci-fi stories burrowing a hole in my brain as well as an entire failed book pitch on prototypes. To help add structure to this process, I’ve employed a plugin called Longform. It allows me to break stories up into scenes or chapters, rearrange them, and then stitch that all together into a manuscript for review.

Write Good

screenshot of a run of text with highlighted erros like “the word so adds no meaning”, “the phrase there is unnecessary”, “absolutely can weaken meaning”, and “many is a weasel word”

Write Good is a poor man’s Grammarly. Unfettered, I tend to default to passive voice or use weasel words as sentence filler. For example, In the previous sentence I tried to use the word “employ” instead of “use”, like I’m the damn King of England. Write Good nudges me towards simpler phrasing and an active voice. Passive voice is natural for me and I don’t hate that part about me, but there are people (grammar nazis) who do care, so why not remove that stumbling block? Over time I’ve come to prefer an enforced writing style and think the active voice tightens up most sentences.

Write Good also helps filter out technical writing no-nos like the word “Just”. That itself is worth the price of entry. I can break the rules any time, but requires me turning off the part of my brain that obeys linters.

I’ve actually been using Write Good for years but as part of a secondary pre-publish process as a VS Code plugin. With Obsidian I’ve been able to “shift left” that part of the process to the writing phase. Keeps me honest on how much work is actually left.

What I don’t like about Obsidian

After a month of solid use, I only have one major gripe: the finickiness of the editor.

The swapping between reading mode and editing mode feels erratic and jumpy in a way that Notion never did. I use a lot of CMD + E to manually swap between reading and editing, but it either remembers too well or not well enough on how I want to view different files. I don’t know if I’ll ever be happy here because I think the core problem is that rich text editing is weird.

One other aspect I think Obsidian could improve is creating a component library or style guide for plugins. Not all plugins generate side panel UI, but for those that do… it’s a zoo. I think a little effort here and design systems work for plugins could create a cohesive look and feel.

The mobile app is fast

One of Notion’s biggest well-known issues is poor app performance. I don’t spent my entire days worrying about this because I tend to be on desktop and once it’s opened, it’s opened. But after firing up Obsidian’s mobile app, you can’t unsee the difference.

Obsidian’s mobile app is fast. Downright instant. And it somehow dodges the finickiness of the macOS app I complained about above. I know it’s not the flagship product, but the mobile app feels like a first-party experience and not an afterthought. It’s useful and has the right performance profile for jotting little notes on the go.

It’s also impressive that all my JavaScript-based plugins are working inside the native mobile app. I assumed most plugins wouldn’t work inside the WebView environment2. This made for a situation where I had low expectations but was pleasantly surprised.

Nothing beats a folder full of markdown files

Obsidian reinforces a lesson I’ve learned from my last decade and a half of blogging; nothing beats a folder full of markdown files. A note-taking app doesn’t have to be complex machinery. A little bit of YAML frontmatter can go a long way.

This migration identified one subtle problem I didn’t know I had; I “over-databased” in Notion. I created entire sections in Notion with a database to get the editable table UI. This creates a lot of click-thru flows, excess documents, and feels like building an entire CMS for a one-page website. Obsidian nudges me to think more simple.

Your productivity app and my productivity app will look different

It took a solid month to migrate my thousands of documents to Notion. I declared bankruptcy on my Web Clipper links, but settled on a better system with a link aggregator. I think what learned through this process and giant deep-dive into productivity tools is that productivity is personal. Your dream setup and my dream setup will look different.

We have different brains that understand the world differently. Some people are Type A controlling, some are Type B hot-messes, and some of us are chill Type O. We have different goals for our note-taking apps; some might be pure archivists, some might be on a hustle grind, and some might need to organize their DnD sessions.

I come back to an old quote I’ve mentioned a handful of times before from Kevin Kelley, founder of the Whole Earth Review…

A tool is an opportunity with a handle.

Grab hold of good tools that give you good opportunities.

  1. I affectionately call the Notion mascot “Churny” because he makes me want to leave the application

  2. I’m sure there are plugins that don’t work in-app like Obsidian Copilot which side-loads an AI model

Chris’ Corner: Design Do’s and Don’ts

I admit I’m a sucker for “do this; don’t do that” (can’t you read the sign) blog posts when it comes to design. Screw nuance, gimme answers. Anthony Hobday has a pretty good one in Visual design rules you can safely follow every time. Erik Kennedy does a pretty good job with posts in this […]

My Glamorous Life: broken by design.

I encounter broken systems like this almost every week. And probably, so do you.

The post My Glamorous Life: broken by design. appeared first on Jeffrey Zeldman Presents.

Chris’ Corner: CSS Deep Cuts

Sometimes we gotta get into the unglamorous parts of CSS. I mean *I* think they are pretty glamorous: new syntax, new ideas, new code doing foundational and important things. I just mean things that don’t demo terribly well. Nothing is flying across the screen, anyway.

How to make a Link Aggregator in Obsidian

I’m finishing up my move from Notion to Obsidian and one complexity I encountered was all my saved links. In the almost seven years of using Notion, I amassed a ~1.2 GB database of links. This is because of how the Notion Web Clipper creates a backup of the article and its assets. While this is gold to an internet archivist… I really only use this feature to sneak around paywalls. Moving to Obsidian gave me a chance to rethink my link collection process and along the way I figured out how to make an automated Link Aggregator that I could parlay into a newsletter-like blog post.

Step 1: Install Obsidian Web Clipper

The first step was to capture links. I had looked at creating a custom bookmarklet, but as I rolled this out across my iPad, iPhone, personal computer, and work computer, the foundation wasn’t sturdy. If I made a change in how I wanted it to work, I’d have to manually edit half-a-dozen JavaScript bookmarklets. The path of least resistance was to embrace Obsidian Web Clipper, the community standard browser extension for this sort of task instead that is available in all browsers.

The Obsidian Add Item Popup window with fields like title, tags, description, and published date

Obsidian Web Clipper actually solves a long-standing issue I had with Notion Web Clipper, I couldn’t add tags in the “Add Item” workflow, you had to bounce out to the app and manage it there. Obsidian Web Clipper let’s you add tags right there in the “Add Item” window. But it’s not all roses because Obsidian will always bounce you out to the application for saving. Weirdly –because it’s the same as what I didn’t like about Notion– I don’t mind this in Obsidian because it gives me a chance to review the content I’m digitally hoarding.

Obsidian Web Clipper will also scrape the text, which is handy for retrieval later, but critically it doesn’t save images and hotlinks to the production assets. This might upset archivists, but as someone who doesn’t want a 1.2 GB link database again, I welcome it.

I know AI is a controversial topic, but this is one place I would welcome an LLM to summarize articles and provide some bullet points for reference later. Perhaps a short list of other publications that have referenced this article as well? I’m spit-balling, but I don’t need scraped text, what I need is something to jog my memory.

If I had more time, I’d grab some quotes I found interesting and do like Jim does and add my own thoughts and notes as a response. Are “reaction blogs” a thing? I guess they are.

The Obsidian Web Clipper Settings page where you customize the fields you want to see for your link template

The one change I make to the Default template is to remove some fields and set my default Note Location folder to “Inputs/Links”. This is unique to how I have my vault organized (more on that later), but links are easy to accumulate and I find having a dedicated bucket for them will save you cognitive load later.

Step 2: Write a brief summary

My link aggregation process has one mandatory process step: Write a brief summary. A short tweet-length description of why I found this link interesting or useful. This is akin to the “WHY?” column in a database that we’ve been discussing on Shop Talk this year. Why was this link cool enough to collect? Why did I find it interesting? What were my thoughts?

Actual human thoughts are becoming a valuable commodity these days.

In Obsidian Web Clipper there’s a description field that by default grabs the document description meta tag. This is not useful most of the time, but can give you some text to shape if you’re in a hurry.

Step 3: Generate a DataView

The last step is to create a New Note called “Link Aggregator” to generate a list of links I can copy over to a Markdown file in my blog. To do that I use the Dataview plugin, which allows you to use an SQL-like query language to generate a LIST or TABLE of content based on your query.

```dataview
LIST WITHOUT ID elink(file.frontmatter.source, file.name)+
                ": "+file.frontmatter.description
FROM "Inputs/Links"
WHERE file.ctime >= date(today) - dur(1 week)
SORT file.name ASC
```

There’s a lot to Dataview, but this query will generate a list of external links from my Links folder that I added within the last week. Now I can slurp up those links and put them in a blog post or newsletter.

Process-wise, I have to copy the Dataview-generated list into a New Note in Obsidian because copying the text from the Link Aggregator page to my blog pastes the Dataview query. Creating a dummy Note isn’t ideal but at least I have a workaround. I’m sure I’m one plugin away from being able to export markdown from a Dataview query.

Happy Aggregating!

Like other ideas in my life, I’ve tried to make this as low-effort as possible or else I won’t do it. I think I have a system in place that allows me to do what I was already doing (collect links), but a more efficient and effective way to do something I want to do more (share links). If this is useful, feel free to steal this idea and make your own aggregator.

The Web is a network of content, let’s build the network. Blogs linking to other blogs are the best blogs, let’s not lose that part of blogging. We are in algorithmic content bubbles looking at different Internets, let’s pop those bubbles by sharing what we find in our Internet journeys.

A matter of fact

I’ve been an amateur genealogist since I was a teenager. I started before the internet existed. This was a world where finding a single fact about a not-too-distant ancestor could involve an entire day of hauling huge indexes off shelves, then waiting five days for the certificate to arrive. It was time-consuming and expensive. As […]

A morning’s tale

Instead of screaming, I turned on the faucet.

The post A morning’s tale appeared first on Jeffrey Zeldman Presents.

Week Links №2: April 2025

Last year I attempted to do some newsletter-style link aggregation… that good intention imploded spectacularly. But I switched to Obsidian this month and now I have a better system for aggregating links (post on that coming later). Inside this issue you’ll find some games, some homelab server hardware, some AI discourse™, some musical instruments, and more.


Chris’ Corner: GSAP, more like FREESap

The news is that GSAP, a hugely popular animation library on CodePen and the web writ large, is now entirely free to use thanks to their being acquired by Webflow. Thanks to Webflow GSAP is now 100% FREE including ALL of the bonus plugins like SplitText, MorphSVG, and all the others that were exclusively available to Club GSAP members. That’s right […]