The Blogroll

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.

I got an itch to attempt streaming. So… The point is, mostly, for me to play with CodePen’s 2.0 editor and just make stuff, learning about front-end development, web design, and CodePen features all together. I’ve used StreamYard to do it before, and I love how simple it is, but it feels a bit limiting, […]

Nat Tarnoff covers the basics.

The post Accessibility 101 appeared first on Jeffrey Zeldman Presents.

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 (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.

• Mahalia sang the song at Dr. King’s funeral in 1968
• Aretha sang the song at Mahalia’s funeral in 1972
• Aretha sang the song at the MLK memorial dedication in 2011
• Fantasia sang the song at Aretha’s funeral in 2018

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.

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

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.

Also sprach Wittgenstein:

Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.

Or in English, thus spoke Wittgenstein:

The limits of my language mean the limits of my world.

Language and thinking are intertwined. I’m not saying there’s anything to the strong form of the Sapir-Whorf hypothesis but I think George Lakoff is onto something when he talks about political language.

There’s literal political language like saying “tax relief”—framing taxation as something burdensome that needs to be relieved. But our everyday language has plenty of framing devices that might subconsciously influence our thinking.

When it comes to technology, our framing of new technologies often comes from previous technologies. As a listener to a show, you might find yourself being encouraged to “tune in again next week” when you may never have turned a radio dial in your entire life.

In the early days of the web we used a lot of language from print. John Allsopp wrote about this in his classic article A Dao Of Web Design:

The web is a new medium, although it has emerged from the medium of printing, whose skills, design language and conventions strongly influence it. Yet it is often too shaped by that from which it sprang.

One outdated piece of language on the web is a framing device in two senses: “above the fold”. It’s a conceptual framing device that comes straight from print where newspapers were literally folded in half. It’s a literal framing device that puts the important content at the top of the page.

But there is no fold. We pretended that everyone’s screens were 640 by 480 pixels. Then we pretended that everyone’s screens were 800 by 600 pixels. But we never really knew. It was all a consensual hallucination. Even before mobile devices showed up there was never a single fold.

Even if you know that there’s no literal page fold on the web, using the phrase “above the fold” is still insidiously unhelpful.

So what’s the alternative? Well, James has what I think is an excellent framing:

The landing zone.

It’s the bit of the page where people first show up. It doesn’t have a defined boundary. The landing zone isn’t something separate to the rest of the page; the content landing zone merges into the rest of the content.

You don’t know where the landing zone ends, and that’s okay. It’s better than okay. It encourages you design in a way that still prioritises the most important content but without fooling yourself into thinking there’s some invisible boundary line.

Next time you’re discussing the design of a web page—whether it’s with a colleague or a client—try talking about the landing zone.

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 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.

My 7 year old strongly prefers to sleep with white noise playing. She’s got a little machine that does it on a timer. Whenever she sleeps somewhere else, if she can’t bring the machine, it’s best to have another solution. YouTube has those 10 hour long videos that do it which I can just play […]

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

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 corner¹. 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

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.

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

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

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

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 environment². 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.

Mark your calendars: Friday, 20th June — that’s when Salter Cane will be launching Deep Black Water at the The Hope And Ruin in Brighton

I can’t wait to get back on stage with the band! These songs sound great on the new album but I can guarantee that they’re going to absolutely rock when we play them live.

Support will be provided by our good friends Dreamytime Escorts, featuring former members of Caramel Jack. They’ve also got a new EP on the way.

Doors are at 8pm.

I’m really, really excited about this. It’s been far too long since Salter Cane were last bringing the noise live on stage. I hope to see you there!

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

Here’s some code to show the distance to the nearest airports on a map.

Here’s a modified version that shows the distance to the nearest Gregg’s. The hub-and-spoke visualisation overlaid on the map changes as you pan around, making it look like a spider bestriding the landscape.

Jonty’s version shows the distance to the nearest Pret a Manger.

I got nerdsniped by someone saying:

@adactio This would be cool for sessions 😉

He’s right, dammit! So here you go:

Session spider.

Now you can see how far you are from the nearest traditional Irish music sessions.

It’s using data from the weekly data dumps from thesession.org—I added a GeoJSON file in there.

Pure silliness, but it does make me wonder what kind of actually good data visualisations could be made with all this scrumptious data.

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.

Today is Global Accessibility Awareness Day:

The purpose of GAAD is to get everyone talking, thinking and learning about digital access and inclusion, and the more than One Billion people with disabilities/impairments.

Awareness is good. It’s necessary. But it’s not sufficient.

Accessibility, like sustainability and equality, is the kind of thing that most businesses will put at the end of sentences that begin “We are committed to…”

It’s what happens next that matters. How does that declared commitment—that awareness—turn into action?

In the worst-case scenario, an organisation might reach for an accessibility overlay. Who can blame them? They care about accessibility. They want to do something. This is something.

Good intentions alone can result in an inaccessible website. That’s why I think there’s another level of awareness that’s equally important. Designers and developers need to be aware of what they can actually do in service of accessibility.

Fortunately that’s not an onerous expectation. It doesn’t take long to grasp the importance of having good colour contrast or using the right HTML elements.

An awareness of HTML is like a superpower when it comes to accessibility. Like I wrote in the foreword to the Web Accessibility Cookbook by O’Reilly:

It’s supposed to be an accessibility cookbook but it’s also one of the best HTML tutorials you’ll ever find. Come for the accessibility recipe; stay for the deep understanding of markup.

The challenge is that HTML is hidden. Like Cassie said in the accessibility episode of The Clearleft Podcast:

You get JavaScript errors if you do that wrong and you can see if your CSS is broken, but you don’t really have that with accessibility. It’s not as obvious when you’ve got something wrong.

We are biased towards what we can see—hierarchy, layout, imagery, widgets. Those are the outputs. When it comes to accessibility, what matters is how those outputs are generated. Is that button actually a button element or is it a div? Is that heading actually an h1 or is it another div?

This isn’t about the semantics of HTML. This is about the UX of HTML:

Instead of explaining the meaning of a certain element, I show them what it does.

That’s the kind of awareness I’m talking about.

One way of gaining this awareness is to get a feel for using a screen reader.

The name is a bit of a misnomer. Reading the text on screen is the least important thing that the software does. The really important thing that a screen reader does is convey the structure of what’s on screen.

Friend of Clearleft, Jamie Knight very generously spent an hour of his time this week showing everyone the basics of using VoiceOver on a Mac (there’s a great short video by Ethan that also covers this).

Using the rotor, everyone was able to explore what’s under the hood of a web page; all the headings, the text of all the links, the different regions of the page.

That’s not going to turn anyone into an accessibility expert overnight, but it gave everyone an awareness of how much the HTML matters.

Mind you, accessibility is a much bigger field than just screen readers.

Fred recently hosted a terrific panel called Is neurodiversity the next frontier of accessibility in UX design?—well worth a watch!

One of those panelists—Craig Abbott—is speaking on day two of UX London next month. His talk has the magnificent title, Accessibility is a design problem:

I spend a bit of time covering some misconceptions about accessibility, who is responsible for it, and why it’s important that we design for it up front. It also includes real-world examples where design has impacted accessibility, before moving onto lots of practical guidance on what to be aware of and how to design for many different accessibility issues.

Get yourself a ticket and get ready for some practical accessibility awareness.

Meetings can be frustrating. But they don’t have to be.

A lot of the frustration comes from unmet expectations. You go into the meeting expecting one outcome, and when it doesn’t materialise, you declare the meeting a waste of time. But had you gone into that same meeting with different expectations, perhaps you would emerge from it in a happier state.

We were talking about this at Clearleft recently and I suggested that a simple little taxonomy of meetings might be a good starting point for avoiding frustration.

Divergent meetings

In a divergent meeting the goal is to generate ideas. These meetings often happen early in a project.

Quantity matters more than quality. Plenty of “yes, and…” rather than “no, but…” to create lots of suggestions. This is not the meeting to point out potential problems with the suggestions.

Convergent meetings

In a convergent meeting the goal is to come to a decision.

The meeting might begin with lots of options on the table. They need to be winnowed down. Poke at them. Dissect them. Ideally dismiss lots of them.

This is not the time to introduce new ideas—save that for a divergent meeting.

Just having those two categories alone could save you a lot of grief. The last thing you want is someone participating in a convergent meeting who thinks it’s a divergent meeting (or the other way around).

Those two categories account for the majority of meetings, but there’s one more category to consider…

Chemistry meetings

In a chemistry meeting there is no tangible output. The goal is to get to know one another.

In a large organisation this might be when multiple departments are going to work together on a project. At an agency like Clearleft, a chemistry meeting between us and the client team is really useful at the beginning of our partnership.

Again, the key thing is expectations. If there are people in a chemistry meeting who are expecting to emerge with a framework or a list or any kind of output, they’re going to be frustrated. But if everyone knows it’s a chemistry meeting there’s no expectation that any decisions are going to be made.

There you have it. A tiny taxonomy of meetings:

1. divergent
2. convergent
3. chemistry

This tiny taxonomy won’t cover every possible kind of meeting, but it probably covers 90% of them.

Ideally every meeting should be categorised in advance so that everyone’s going in with the same expectations.

If you find yourself trying to categorise a meeting and you think “Well, it’s mostly convergent, but there’s also this divergent aspect…” then you should probably have two separate shorter meetings instead.

And if you’re trying to categorise a meeting and you find yourself thinking, “This meeting is mostly so I can deliver information” …that meeting should be an email.

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.

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.

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 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.

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

The Am Dash is a clever idea. It’s a little typographic dash you can slip into text that sorta “proves” it’s human written, while looking kinda cool. This “proves” it’s human written because there is barely any text in the world that uses this so LLMs will (never?) generate text that has “am-” in it […]

Instead of screaming, I turned on the faucet.

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

Clayton Ramsey grades student assignments and gets papers that are just obviously ChatGPT output. I think any of us can spot it by now: awkward repetitive prose, heavy on bullet points with bold intro words, wordy, etc. There is nothing to be done about it. As an instructor, I am always saddened to read this. […]

It’s just over one month until UX London. You should grab a ticket if you haven’t already!

The format of UX London is quite special. While the focus of each day is different—discovery, design, and delivery—each day unfolds like this…

There are four talks in the morning. You get your brain filled with ideas and learn from fantastic speakers. It’s a single track—everyone’s getting the same shared experience.

Then after a lunch, you choose from one of four workshops. Whatever you choose, it’s going to be hands-on. You can leave your laptop at home.

A day of listening to talks could get exhausting. A workshop that lasts all day could be even more exhausting. But somehow by splitting the day between both activities, the energy level is just right!

That said, we don’t want the day to end with everyone spread across four different workshop rooms. That’s why there’s one final talk at the end of each day.

These closing talks are a bit different to the morning talks. Whereas the focus of the morning talks is on practical skills that you can apply straight away, the closing talks are an opportunity to sit back and have your mind expanded. They’ll be fun and thought-provoking.

Paula Zuccotti is closing out day one with a talk about two of her projects: Every Thing We Touch and Future Archeology:

This talk invites audiences to reconsider the meaning of the objects they encounter every day and reflect on what their possessions might reveal about who we are and what we value, both now and in the years to come.

Sarah Hyndman will wrap up day two with a fun interactive talk about your senses:

Join a live expedition into our inner world to explore why we see, feel and remember.

Finally, Rachel Coldicutt is going to finish UX London with a rallying cry:

Introducing the Society of Hopeful Technologists and discussing how, in modern technology development, your practice is probably more political than you realise.

I can’t wait! Get yourself a ticket for a day or for all three days.

And as a little thank you for tolerating my excitement, use the discount code JOINJEREMY to get 20% off your ticket.

I’ve been thinking about the kind of CSS I write by default when I start a new project.

Some of it is habitual. I now use logical properties automatically. It took me a while to rewire my brain, but now seeing left or top in a style sheet looks wrong to me.

When I mentioned this recently, I had some pushback from people wondering why you’d bother using logical properites if you never planned to translate the website into a language with a different writing system. I pointed out that even if you don’t plan to translate a web page, a user may still choose to. Using logical properties helps them. From that perspective, it’s kind of like using user preference queries.

That’s something else I use by default now. If I’ve got any animations or transitions in my CSS, I wrap them in prefers-reduced-motion: no-preference query.

For instance, I’m a huge fan of view transitions and I enable them by default on every new project, but I do it like this:

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

I’ll usually have a prefers-color-scheme query for dark mode too. This is often quite straightforward if I’m using custom properties for colours, something else I’m doing habitually. And now I’m starting to use OKLCH for those colours, even if they start as hexadecimal values.

Custom properties are something else I reach for a lot, though I try to avoid premature optimisation. Generally I wait until I spot a value I’m using more than two or three times in a stylesheet; then I convert it to a custom property.

I make full use of clamp() for text sizing. Sometimes I’ll just set a fluid width on the html element and then size everything else with ems or rems. More often, I’ll use Utopia to flow between different type scales.

Okay, those are all features of CSS—logical properties, preference queries, view transitions, custom properties, fluid type—but what about actual snippets of CSS that I re-use from project to project?

I’m not talking about a CSS reset, which usually involves zeroing out the initial values provided by the browser. I’m talking about tiny little enhancements just one level up from those user-agent styles.

Here’s one I picked up from Eric that I apply to the figcaption element:

figcaption {
  max-inline-size: max-content;
  margin-inline: auto;
}

That will centre-align the text until it wraps onto more than one line, at which point it’s no longer centred. Neat!

Here’s another one I start with on every project:

a:focus-visible {
  outline-offset: 0.25em;
  outline-width: 0.25em;
  outline-color: currentColor;
}

That puts a nice chunky focus ring on links when they’re tabbed to. Personally, I like having the focus ring relative to the font size of the link but I know other people prefer to use a pixel size. You do you. Using the currentColor of the focused is usually a good starting point, thought I might end up over-riding this with a different hightlight colour.

Then there’s typography. Rich has a veritable cornucopia of starting styles you can use to improve typography in CSS.

Something I’m reaching for now is the text-wrap property with its new values of pretty and balance:

ul,ol,dl,dt,dd,p,figure,blockquote {
  hanging-punctuation: first last;
  text-wrap: pretty;
}

And maybe this for headings, if they’re being centred:

h1,h2,h3,h4,h5,h6 {
  text-align: center;
  text-wrap: balance;
}

All of these little snippets should be easily over-writable so I tend to wrap them in a :where() selector to reduce their specificity:

:where(figcaption) {
  max-inline-size: max-content;
  margin-inline: auto;
}
:where(a:focus-visible) {
  outline-offset: 0.25em;
  outline-width: 0.25em;
  outline-color: currentColor;
}
:where(ul,ol,dl,dt,dd,p,figure,blockquote) {
  hanging-punctuation: first last;
  text-wrap: pretty;
}

But if I really want them to be easily over-writable, then the galaxy-brain move would be to put them in their own cascade layer. That’s what Manu does with his CSS boilerplate:

@layer core, third-party, components, utility;

Then I could put those snippets in the core layer, making sure they could be overwritten by the CSS in any of the other layers:

@layer core {
  figcaption {
    max-inline-size: max-content;
    margin-inline: auto;
  }
  a:focus-visible {
    outline-offset: 0.25em;
    outline-width: 0.25em;
    outline-color: currentColor;
  }
  ul,ol,dl,dt,dd,p,figure,blockquote {
    hanging-punctuation: first last;
    text-wrap: pretty;
  }
}

For now I’m just using :where() but I think I should start using cascade layers.

I also want to start training myself to use the lh value (line-height) for block spacing.

And although I’m using the :has() selector, I don’t think I’ve yet trained my brain to reach for it by default.

CSS has sooooo much to offer today—I want to make sure I’m taking full advantage of it.

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.

• 368 Chickens: So many chickens
• AI Search Has A Citation Problem: Eight AI search engines, all bad at citing news.
• CHVLR: Gundam inspired solo RPG
• Compute Blade: Rack-mountable, PoE-powered carrier board for Raspberry Pi
• Degrow Your Community: A list of actions you can do to encourage degrowth
• Don’t fork the ecosystem: It’s hard to get people to change patterns with software, bolt-ons are almost always preferred
• Dragonsweeper: A dungeon crawling minesweeper adventure
• fizzx.js: A tiny physics based animation lib from Adam Argyle
• GodSVG: A free, open-source, low-level vector graphics editor based on the Godot game engine
• HiChord Synth: Neat D-pad + five key pocket synth.
• I’d rather read the prompt: A lament from an instructor.
• linear() easing generator: Generate linear() easings from JavaScript and SVG
• Minimal CSS-only blurry image placeholders: Blurry images with a nanoid.
• OpenAI’s Studio Ghibli meme factory is an insult to art itself: Appropriating the work of one of the greatest living animators—who is “disgusted” by AI to sell your new image generation model.
• Orchid: A micro-piano with a single octave of keys, pads to select chords, arpeggiators, and a looper. Beautiful website too.
• Sam Altman Admits That Saying “Please” and “Thank You” to ChatGPT Is Wasting Millions of Dollars in Computing Power: Tens of millions of dollars processing chatbot queries made with proper etiquette.
• Smallweb: A self-hostable personal cloud inspired by serverless platforms and cgi-bin.
• Taiyaki Fabulous Museum of Fish: A Pokémon but with Picross Exploration Adventure
• The Future Favors the Curious: As the design industry shifts, it’s easy to feel behind.
• The unreality of reality TV: How competition shows influence U.S. politics and shape views about economic inequality: People who watch reality TV are more likely to believe in the American rags to riches mythos.
• Top 5 IEMs in every price range: A list of in-ear-monitors broken down by price range
• Transformers.js: Run Transformers (NLP, Vision Classifiers, Audio) directly in your browser, with no need for a server!
• Typography troubles Balancing lines in Japanese & Korean: Text wrapping works differently across languages. Here’s a look at how text-wrap: balance affects Japanese and Korean text—and what to do about it.
• ZimaBoard 2: A hackable single board server

I’m trying to do right by my old buddy Christopher Schmitt and his digital footprint. You might remember we made a thank-you site for him where people shared memories. That’s hosted on a provided Netlify account, and the code is on a public GitHub repo. Notably the site doesn’t use a custom domain name, which […]

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

I’m really excited that the reading-flow and reading-order properties are in Chrome 137 (current beta, will be Chrome stable as of May 27, 2025). Finding a way to deal with the visual and source order disconnect created by grid and flex layout has been something I’ve kept returning to ever since grid shipped in browsers. […]

Looks like they are getting the gang back together for a 20-year reunion. I’m going to try to attend, but no promises just yet. Mr. Richard Worth is throwing it in Dallas, TX. Who’s he gonna get?? The yayQuery gang? Yehuda? Jörn? González? Resig? No names just yet.

P. Martin Ortiz: Web apps can easily adapt to whatever device you’re on. A single responsive website can run on your desktop, phone, tablet, or even a VR headset. What’s even more, they can be updated on all of them simultaneously. That’s a level of flexibility that native apps can’t match. That’s why I feel […]

Chili’s is obviously the finest of all the full-service chain restaurants. They are crushing it right now. Imagine my pain living in Oregon where there are 0 (zero) (none) Chili’s. It’s very satisfying to hear their CEO say that they are going to start building new Chili’s again and literally that there are no Chili’s […]

I have little understanding for people using large language models to generate slop; words and images that nobody asked for.

I have more understanding for people using large language models to generate code. Code isn’t the thing in the same way that words or images are; code is the thing that gets you to the thing.

And if a large language model hallucinates some code, you’ll find out soon enough:

With code you get a powerful form of fact checking for free. Run the code, see if it works.

But I want to push back on one justification I see repeatedly about using large language models to write code. Here’s Craig:

There are many moral and ethical issues with using LLMs, but building software feels like one of the few truly ethically “clean”(er) uses (trained on open source code, etc.)

That’s not how this works. Yes, the large language models are trained on lots of code (most of it open source), but they’re not only trained on that. That’s on top of everything else; all the stolen books, all the unpaid creative work of others.

Even Robin Sloan, who first says:

I think the case of code is especially clear, and, for me, basically settled.

…goes on to acknowledge:

But, again, it’s important to say: the code only works because of Everything. Take that data away, train a model using GitHub alone, and you’ll get a far less useful tool.

When large language models are trained on domain-specific data, it’s always in addition to the mahoosive amount of content they’ve already stolen. It’s that mohoosive amount of content—not the domain-specific data—that enables them to parse your instructions.

(Note that I’m being very delibarate in saying “parse”, not “understand.” Though make no mistake, I’m astonished at how good these tools are at parsing instructions. I say that as someone who tried to write natural language parsers for text-only adventure games back in the 1980s.)

So, sure, go ahead and use large language models to write code. But don’t fool yourself into thinking that it’s somehow ethical.

What I said here applies to code too:

If you’re going to use generative tools powered by large language models, don’t pretend you don’t know how your sausage is made.

It’s interesting to hear directly from Mozilla’s CEO Laura Chambers on the U.S. search engine monopoly case Google lost: Some of the remedies proposed in the case risk the future of our Firefox browser and Gecko browser engine—the last remaining non-Big Tech browser engine. Read: “If one of the remedies is Google is no longer […]

I was listening to Wes and Scott on a recent episode of Syntax talking about RSCs (React Server Components). I wouldn’t say it was particularly glowing. We use them here at CodePen, and will likely be more and more as we ship more with Next.js, which is part of our most modern stack that we […]

Fun rant from By Albert Burneko on how we just ain’t colonizing Mars, ever. The South Pole is around 2,800 meters above sea level, and like everywhere else on Earth around 44 million miles closer to the sun than any point on Mars. It sits deep down inside the nutritious atmosphere of a planet teeming with […]

I want you to have a blog. Despite this being nearly my entire online ethos, one situation I struggle with are design systems and UX blogs on Medium. A lot of them exist. Yet. I have difficulty understanding UX and design professionals in this space who yield their UX and design decisions over to the “everyone looks the same” content silo.

To be fair, I get why you or an organization would want to use a service like Medium:

• People are busy and maintaining a blog is work.
• It’s hard for the design team to get dev resources for a custom site.
• There’s “free” community engagement there.
• There’s even monetization paths.
• Self-publishing obsessed dorks aren’t the target market.

Don’t get me wrong– I’d rather have more blogs than no blogs so if that’s your situation don’t mind me and my niche beef. But consider for a moment that I can’t tell you the last Medium post I’ve read because they’re all the same to me. I follow a lot of UX and design systems blogs… but I can’t tell you a single person who writes on Medium. Those posts and authors have all blended together into a monolithic groupthinkpiece where individual voices and personality are flattened by the über theme.

If everyone is wearing the same uniform, you all look the same. You are interchangeable. Your voice exists in a crowded space of vanilla platitudes. A recent WIRED article suggested over 40% of the content on Medium is AI generated slop. I think the question for you –and for me– is how do you stand out in this fancy copy-pasted new world? My personal belief is that the answer starts with your own personal website that looks like you, talks like you, smells like you, and has quirks like you. I want that for you.

My ol buddy Allan Branch, a decade or more ago, used to run a conference called LessConf which was about anything from “design to marketing to business”. There was a decent amount of web people that went. Allan ran some startups himself, as well as this conference, with Steve Bristol (RIP). Now he’s the dang […]

🎧 The Telepathy Tapes — A friend recommended I listen to this and I tore through it a few weeks ago. It’s about autistic people and how apparently literally all of them are telepathic. It’s a bit of a rollercoaster that goes: Anyway, “The Hill”, a thing in the show where autistic people go in […]

I enjoyed Trys Mudford’s explanation of making rounded triangular boxes. It was a very real-world client need, and I do tend to prefer reading about technical solutions to real problems over theoretical ones. This one was tricky because this particular shape doesn’t have a terribly obvious way to draw it on the web. CSS’ clip-path […]

This is a test. This is only a test. I’m using WordLand to write this post to my WordPress website. It’s a new, stripped-down writer’s tool for bloggers. Think of it as a frill-free writer’s frontend to the majesty of WordPress. The essential features (and some advanced ones, even) in a distraction-free, scribbler-friendly environment. ## […]

The post Writing in WordLand appeared first on Jeffrey Zeldman Presents.

A refreshing dip into what we’ve learned about web typography over the past 20+ years.

The post Web typography: a refresher and history appeared first on Jeffrey Zeldman Presents.

I joked while talking with Adam Argyle on ShopTalk the other day that there is more CSS in one of the demos we were looking at that I have in my whole CSS brain. We were looking at his Carousel Gallery which is one of the more impressive sets of CSS demos I’ve ever seen. […]

I asked Claude to write about the career of my father, the inventor Maurice Zeldman, as if I’d written it myself. Here, with no edits by me, is what Claude said.

The post My father, Maurice Zeldman, and his ZGANNT software appeared first on Jeffrey Zeldman Presents.

meyerweb.com goes au naturel, mostly, in observance of the annual CSS Naked Day.

Love HTML? Good. It’s very lovable. One of my favorite parts is how you can screw it all up and it still it’s absolute best to render how it thinks you meant. Not a lot of other languages like that. Are there any? English, I suppose lolz. Anyway — I figured I’d just share 10 […]

Ever since I became an editor of the Multiple-column layout specification I’ve wanted to add the ability to let overflow columns wrap in the block direction, rather than extend out in the inline direction—creating the sort of horizontal scrollbar that almost nobody wants. And, now we’re doing it. I’m working on the specification (which is […]

The first website my colleagues and I created was for “Batman Forever” (1995, d. Joel Schumacher), starring Val Kilmer. That website changed my life and career. I never saw “Top Gun,” but Val Kilmer made a brilliant Jim Morrison in Oliver Stone’s “The Doors.” Rest in peace.

The post Forever appeared first on Jeffrey Zeldman Presents.

The whole 90 minutes, my brain’s shrieking, “You’re having a panic attack!”

The post Who turned off the juice? appeared first on Jeffrey Zeldman Presents.

New CSS features help us in all sorts of different ways, but here we’re going to look at them when they power a specific type of component, or make a type of component newly possible with less or no JavaScript.

There’s a new AI model that can render photorealistic people and products, including text and logos. Geisha With Walkman is something I tried to draw 40 years ago, but my rendering skills were simply too poor. The Reve Image 1.0 preview allowed me to do it instantly this morning with a single, basic prompt. P.S. […]

The post This Years Model appeared first on Jeffrey Zeldman Presents.

Managing media is a really difficult task if you try to do all of it yourself, especially if the media comes from other sources. The file can be submitted in any state and size, but what if you need something really specific? You can code it all yourself or you can use an awesome service […]

The post Easy way to upload, transform and deliver files and images (Sponsored) appeared first on David Walsh Blog.

Back in the day I was a fan of the “Trebuchet MS” font. I didn’t like it large, but set fairly small I loved the look of it. Looked very website-ish — if that makes sense. Honestly, at 12px, it still looks really nice. The main reason I would use it is that it was […]

This is a reference page for “People in Protocols,” a talk I gave (remotely) on March 23, 2025 at the first ATmosphere Conference in Seattle. Right now, it contains citations and further reading, but I may expand it later with additional material and/or a written version of the talk. Massive thanks to everyone who ran the conference and let me remote in when I couldn’t come in person.

Text notes

• XOXO Festival talk in video and written form
• Covid Tracking Project
• Meta in Myanmar series
• Fediverse governance research project findings
• Social threat modeling notes from Jon Pincus from 2018
• the EFF work I’m drawing on to think about collective threat modeling
• “A Social Threat Modeling Framework to Structure Teaching about Responsible Computing” by Yanyan Ren and Kathi Fisler from SIGCSE 2023
• Design Justice, by Sasha Costanza-Chock (open access!)
• a short essay expanding on Ursula Franklin on justice and justifiable fear
• Ursula Franklin’s “The Real World of Technology” Massey Lectures, which are a fantastic intro to her work and are also available as an expanded book version—but really, listen to the lectures too, she’s a total delight
• Alastair McIntosh’s Soil & Soul on Hebridean vernacular economies and everything else
• “Islam and the Built Environment: Vernacularism as an Environmental Ethic” by Mohammed Abdullah Eben Saleh (grainy lo-def 90’s research! I want a whole book of this stuff)
• the source of David Graeber’s “ultimate, hidden reality…” quote

Image notes

• Paulo Uccello’s The Hunt in the Forest is at the Ashmolean
• Pieter Bruegel the Elder’s Gloomy Day (Early Spring) is at the Kunsthistorisches Museum (and ty to this nice Dutch man for teaching me that I was pronouncing “Bruegel” wrong for most of my life)
• traditional Basque baserri (farmhouse) photo by Ksarasola (CC-BY-SA-4.0)
• whitewashed Greek house photo by Alan Bron (public domain)
• Kazakh yurt photo by Alexandr Frolov  CC-SA 4.0

“Enshittification” is a termed coined by Cory Doctorow in 2023 to describe a pattern of decreasing quality observed in online services and products. Since Doctorow’s post, there’s been no shortage of think pieces on enshittification and its role in our society and to a large extent I agree with them all. I think it’s an inevitable problem that shows the splitting seams of Capitalism. If you will allow, I’d like to add a tangential thought – one slight embellishment – to this topic.

To me, enshittification means that a person who lacks taste was put in a position of power.

Everyone knows ads on the internet suck. But ads also pay bills and help keep the lights on in newsrooms. When a website adds one (privacy-preserving) ad to a website, I say “Okay”. Two, I permit it. Three, I say “Easy now” but still scroll through unencumbered. But when the website adds a fifth, seventh, twelfth ad… I know a person who lacks taste is at the wheel. I can feel it in my bones when an app or website has prioritized revenue over user experience. A person without taste or high emotional intelligence broke the unspoken contract we had built on mutual respect.

When you read about the development of the iPhone in books like Ken Kocienda’s Creative Selection or Tony Fadell’s Build, you understand Steve Jobs’ superpower wasn’t so much that he possessed a reality distortion field, but that he was a great editor. He could find the good ideas in a pile of prototypes and say “no” (harshly, I’ve read) to the less-than-great ideas. You need a person with taste in the decision making process. When we see giants falter, it’s a lack of taste shining through.

Going forward, I think taste and style are more valuable than ever before. In an era where we’re able to rapidly generate cheap low quality content or software at a scale we’ve never seen before, we will need people with taste in the mix. We’ll need aggregators to dive in the dumpsters for the treasure. We’ll need people who know how to zig when everyone is using the Zag-o-tron 9000. We’ll need people who can offer critique and say “no” when the “yes yes always more” machine barrels through town and begins knocking down institutions.

How CSS relates to web performance is a funny dance. Some aspects are entirely negligible the vast majority of time. Some aspects are incredibly impactful and crucial to consider. For example, whenever I see research into the performance of some form of CSS syntax, the results always seem to be meh, it’s fine. It can […]

Scrapers gonna scrape.

The post Your opt-innie wants to talk to your opt-outtie. appeared first on Jeffrey Zeldman Presents.

I’m a bit behind in my RSS feeds and I didn’t realize Susan tagged me to answer a series of questions about my blog. I’ve read dozens of these and to be honest was feeling a little left out, so thanks Susan for including me! (Susan’s one of my favorite bloggers and crafters, be sure to like and subscribe.)

Why did you start blogging in the first place?

I published a zine in high school with my best friend Mike. Our zine Wimpkiller was a creative outlet for all the composition notebooks we filled up over a bottomless cups of coffee at IHOP. We’d print out stories on Mike’s computer, chop ‘em up, glue ‘em together, and then scam copies after midnight with the help of the friendly late-shift worker at Kinko’s. I enjoyed that thrill of self-publishing then as much as I do now. It felt like the garage band of writing. You may not be good or ever get famous, but you can brute force some art into the world.

In college blogs became a trend. I created a blog as I graduated from college to chronicle my entry into the corporate world and ended up chronicling my move and life in Japan. It served as a form of catharsis and outward processing as well as keeping my friends and family up to date on my adventures. That blog died after I came back from Japan and had to get a job and start a career.

Meeting Jeffery Zeldman at SXSW was the inspiration for this edition of the blog, if you can believe it. A brief encounter but my key takeaway on how I could become more like my web development heroes was to write more. They write, and writing begets books, and books begets conference talks. It seemed like a template I could follow and I started self-publishing again. Over time, I wrote enough to where I got to write on Jeffrey’s blog and speak at his conference a handful of times. I guess the plan worked out.

What platform are you using to manage your blog and why did you choose it?

I started on WordPress but I moved my blog to Jekyll in 2012. I chose Jekyll because I was into Ruby at the time and fighting with WordPress for good performance was exhausting me. I wanted a simpler authoring and development experience. The simplicity of building with markdown files on localhost still resonates with me.

Have you blogged on other platforms before?

I’ve used Blogger, MovableType, WordPress, and Jekyll. There’s also an ill-fated Eleventy branch on my site that never made it to production. I’m sure Jekyll will implode and I’ll need to find something else, but switching platforms would be a distraction for me at this point without some obvious benefit or process improvement.

How do you write your posts? For example, in a local editing tool, or in a panel/dashboard that’s part of your blog?

I write my posts in a giant Notion kanban. It’s overkill but it’s my overkill. The organization capabilities and “markdown-like” aspects of Notion made it a good fit over a folder-o’-files. Before publishing, my posts go through a series of pre-publishing rituals. With those processes combined I maintain a level of quality and throughput that I’m happy with.

When do you feel most inspired to write?

I find time to write after the kids go to bed. If there’s time during the workday, I may spend a lunch break jotting some thoughts too. My blogging is very work-dependent to the extent that sometimes when I’m productive at work, I’m most productive at blogging. But often, I’m too tired or focusing on other tasks to craft a well-reasoned blog post.

Do you publish immediately after writing, or do you let it simmer a bit as a draft?

Most of my drafts simmer for weeks if not months or years. From time to time I’ll do a one day turnaround on a post and that’s rewarding, but it’s inconsistent. At the time of writing I have 22 active drafts where ”active” means I’ve updated them at least once in the last six months. If I increase the scope to one year, there’s 41 drafts in my kanban.

What are you generally interested in writing about?

I’m a generalist at heart and enjoy writing about technology generally. If you look at my archive it’s pretty rare that two consecutive posts will be thematically similar. I write about specific technologies like CSS but also about game development or the capital-W Web. And of course prototypes, which I’m convinced are the not-so-secret sauce for building great technologies.

One direction I’m slipping towards in my mind is futurism and speculative fiction (e.g. sci-fi). Writing about current technology limits you to existing capitalist and corporate structures. Imagining the future and the potential fallout allows you to think without the confines of “Good because make money” which so much of our discourse is today.

Who are you writing for?

Woof. Good question. 90% of the time I’m writing to get ideas out of my head. Transfiguring ideas into text works wonders for me. I also tend to write for an abstract audience, people who are curious about the web and technology yet crave more from it; a person who considers themselves a technologist, but also factors in morality and other cosmotechnics.

What’s your favorite post on your blog?

Quick Thoughts on Chips (2023) is up there but I feel like Responsive Deliverables (2013) aka, the “tiny bootstraps” post, is a level of quality, thoughtfulness, and timelessness that I don’t achieve often. I’d like more “timeless” pieces like that, but I don’t exactly know how or if it’s worth trying to bottle that magic.

Any future plans for your blog? Maybe a redesign, a move to another platform, or adding a new feature?

I’m pretty comfortable with my site, but I have a couple changes in mind:

• Use named grid lines
• Blowout my tag pages with custom art direction
• Make my mobile layout perfect
• Write more shitty sci-fi
• Switch from Notion to Obsidian

Some of those will happen over the course of a year, some in the dark of night, some never.

Tag ‘em.

What a responsibility to add people to this chain letter! Susan told me if I don’t forward this to 10 people, my grandparents will die! That seems extreme but okay. I’ll tag the following people who I think haven’t written one yet:

• Jeffrey Zeldman - it feels fitting to pass the mic back to Jeffrey.
• Eric Meyer - another blogger that inspired me in my early days
• Melanie Richards - a multi-talented person and another one of my favorite crafters.
• Jenn Schiffer - talented artist and consistently way funnier than everyone else in the room.
• Eric Bailey - one of my favorite web thinkers and also has the most interesting newsletter out there.
• Blake Watson - deliverer of home-cooked applications
• Josh Collinsworth - thoughtful blogger and word puzzle game developer

Shoot. Only seven. Sorry, memaw and pepaw. Hopefully some unnamed individuals will answer the call.

If you’ve never fallen gently asleep to jazz ballads, only to sit bolt upright because a horse is shrilly whinnying in your ears, you should try it some time.

The post My Glamorous Life: The Unexpected Samples appeared first on Jeffrey Zeldman Presents.

I’ve been a bit sucked into the game Balatro lately. Seriously. Tell me your strategies. I enjoy playing it equally as much lately as unwinding watching streamers play it on YouTube. Balatro has a handful of accessibility features. Stuff like slowing down or turning off animations and the like. I’m particularly interested one of the […]

It’s a secret to everyone! This post is for RSS subscribers only. Read more about RSS Club.

Yesterday, my daughter was in Dallas for the NCA Cheer Competition. My wife sent me a text letting me know her team won! Yay! My daughter is a national champion at age 9. Ten minutes later, the next text I get is that there’s an active shooter and they’re in lockdown. Panic consumed the 30,000 people in the convention center. Kids trampled in the stampede to get out. Families and teams separated. Youth running across a 10 lane freeway to escape, traffic screeching to a halt. Horrifying.

The actual cause of the incident was some cheer parents getting into a fight which knocked down some metal poles. The whole situation is sad. Unnecessary trauma because some dumb parents lost their ability to be civil. Unnecessary trauma created through our lax gun laws and inability to stop this uniquely American horror. An unnecessary situation. Thankfully no one was critically injured and the shooter wasn’t real… this time. We’re living inside a lit powder keg at all times and its exhausting.