The Blogroll

Last Monday was my first day as an official employee of Microsoft where I’ll be working on web components as part of the Fluent design system team. As longtime readers already know, I’ve had a long term relationship with Microsoft – from Paravel’s 2012 responsive redesign of the Microsoft homepage to the five year #davegoeswindows stunt –  it feels like a new chapter in the career story arc to finally acquire one of the famous blue badges. I’m still new and have barely setup my computer but so far my team of peers, the larger group, the project itself, and the other folks across Microsoft I’ve connected with are all great.

Going from a company with two coworkers to a company with 200K coworkers is certainly an adjustment. It’s my first job in 18 years where I’m not working for myself but by far the biggest eye-opener throughout this process was doing tech interviews! I learned a lot about myself; like how after decades of coding in a room by myself, performing in front of someone else isn’t natural for me. Weirdly for me, a live demo in front of thousands of people… no problem. A random generated coding challenge in front of one person… palms sweaty, mom’s spaghetti levels of difficult. I also learned that too much caffeine and the panic-flavored adrenaline of interviewing is a lot of chemistry for my active brain to process.

I eventually figured out how to interview and I had a lot of great conversations with great people at great companies. That said, this experience left me with lingering qualms about the tech interview process. A lot of it comes down to the information asymmetry where the seller (the hiring company) has more information than the buyer (the job candidate) and it’s hard to get any feedback for self-improvement. Even in my limited experience, it’s not uncommon to sink 15+ hours into a take home coding test and interview loop only to receive a terse rejection. Granted there’s promise of a six figure salary at the end of the rainbow, these jobs don’t fall out of the sky so you need to put in work, but I think that situation needs to be a bit more equitable to candidates – a Newtonian dynamic of matching effort.

One question they ask you at interviews is “What are you looking for in your next role?” and while that sparks thousands of ideas, I boiled my needs and wants down to two core concepts:

• Be a part of a larger team of engineers - I’d like to work on a larger team of developers. I want to be in a situation where I can actively and passively learn from other engineers who are subject matter experts in different subjects. As a life-long learner, I’d like to take myself out of the “lone developer” paradigm and absorb as much as I can.
• Be tangential to the money machine - When you run your own business there’s a tight coupling between how much you work and how much money you make and you’re constantly aware of that fact. After 18 years of running my own business and two particularly intense years of startup burnout, I’d like to try something different and play a more supportive operational role for a bit.

I think I found that in Microsoft. There’s a multitude of people I can ping about niche technology choices. There’s even access to a library of research papers. And already I can see how operating in a product support role seems to provide more opportunity for strategy to the broader needs of the organization as opposed to reactivity to the needs du jour that happen in Productland.

I’m sure throughput will be a bit slower without direct access to the publish to production button. I’m sure there’s topics I won’t be able to talk about on this here blog (but I tend not to blog about specific work-related activities here anyways so that won’t change). And I’m sure I’ll have to put a disclaimer here and there that these ideas are my own and not reflective of my employer. Henceforth and furthermore all bad ideas are copyright of Dave Rupert LLC®.

It’s the end of an era for sure but also the beginning of a new one and potentially the beginning of lots of new ones, who knows. Thanks to Trent and Reagan. Thanks to everyone who provided emotional support on this journey. Thanks to esteemed friends who provided referrals. Given the current macroeconomic situation, I feel lucky to have landed somewhere familiar with great opportunities and many Dave Rupert-shaped problems.

Been better about what I eat. Had a great January where I lost around 11 pounds. In Feb and March I became far too lax. Really righted things in late April. Just another 2 to one of my goals. Then another 15 or so.

Let's delve into why the small interactions in web app design are so crucial and how they can set you apart in the market.

I went alcohol free 24 days ago. What’s changed? Quality of life is way better. I’ve still got a long way to go, though.

Late last year Google made this showcase microsite The Web Can Do What!?. It’s nicely done! I like how it talks about various somewhat-recently unlocked use cases, while itself being a showcase for other rather impressive things you can do on a website (cool usage of sticky sections, view transitions, etc). Google invests a lot […]

Remembering the WiFi password when on a guest network is never easy. Even worse is when it’s no longer posted and someone else is asking you for it. Luckily there’s a built in Windows command to recover the password of a given WiFi network. The Shell Code Open cmd and execute the following command: netsh […]

The post How to Retrieve WiFi Password on Windows appeared first on David Walsh Blog.

Traditional usability tests are great, but they are not always the most appropriate tool for the job.

At one time I got interested in the “eye contact”, or lack of it, on video calls. I was going to present at an online conference, and I wanted people watching to have it look like I was looking right at them. Plus, possibly even more importantly, one-on-one calls with people. I ended up buying […]

Palestinians and Israelis are two Indigenous peoples occupying the land that is being fought over.

The post Indigenous appeared first on Zeldman on Web and Interaction Design.

SVG Short Circuiting SVG is normally a pretty efficient file format. If an image is vector in nature, leaving it as vector is normally a good plan as it will like scale well and look pretty darn crips. But of course, It Depends. Super complex vector graphics can get huge, and a raster (i.e. JPG, […]

I wanted to experiment with the new CSS function light-dark() and get a sense of how to use it in a CSS architecture of nested (web) components. I think it’s going to be a powerful tool in the new responsive world of component architecture but I don’t want to recommend something unless I have experience with it in a project first.

My first pass was to add light-dark() to my components…

/* global.css */
:root {
  --dark: #000;
  --light: #fff;
}

/* Inside <my-component>'s Shadow DOM */
:host {
  background-color: light-dark(var(--light), var(--dark));
  color: light-dark(var(--dark), var(--light));
}

But if every component is in charge of it’s own light-dark() handling for border, background, and color on every element… the codebase will get messy managing dark mode in a lot of different places, leading to a lot of inconsistencies over time. A more elegant solution for me would be to handle this job in a single location at the root scope level and leverage the cascade a bit.

:root {
  color-scheme:  light dark;
  --surface-color: light-dark( #fff, #000 );
  --text-color: light-dark( #000, #fff );
}

The nice thing about using light-dark() at the root token level is your components can be dumber. You provide default light-dark experience and, like good children, your components abide in their parent’s decision. Of course, due to the nature of CSS custom properties, your components aren’t locked into the system and your component level styles can opt out (read: not include) or override the global variables if necessary.

/* Inside <my-component>'s Shadow DOM */
:host {
  background: var(--surface-color);
  color: var(--text-color);
}
/* this is a real example from my past */
:host[theme="lunar-new-year"] {
  --surface-color: red;
  --text-color: black;
}

At this point in the experiment I was pleased with the results… until I deployed it to production. I overestimated the browser support for light-dark() and it didn’t work on my phone running Safari 17.4 (but it’s coming in Safari 17.5). I replicated the issue by changing light-dark() to light-d0rk() to verify and fixed it by adding a tried-and-true CSS @supports query.

:root {
  --surface-color: #000;
  --text-color: #fff;

	/* NOTE: For Safari 17.4 (2024-05) */
  @supports (color: light-dark(black, white)) {
    color-scheme:  light dark;
	  --surface-color: light-dark( #fff, #000 );
	  --text-color: light-dark( #000, #fff );
  }
}

Now Safari 17.4 and other browsers that lack support will only have a dark theme and newer browsers will get the light-dark() enhancement. I also threw a little NOTE: and datestamp in there so future versions of me will know when and why I built this fence.

An unseasonable gloomy spring in Austin, TX. The kids are nearly done with school for the year and summer plans are shoring up. My son goes to middle school next year. Unbelievable.

We’ve battled some on-and-off sicknesses these past couple months and with all the holidays every week has felt like a false start. But here we are, barreling into summer. I’ve already been out on the lake to surf on my cousin’s boat, so I’ve got that going for me.

The Eclipse

In April my wife’s entire family came out from Arizona to Austin for the eclipse on April 8th. We got a big Vrbo near the lake right in the path of totality. The weather was cloudy and dismal in Austin for the eclipse. But then… ten minutes before full totality, the sky broke open.

I’ve seen partial eclipses before and those were cool. But nothing prepared me for seeing the total eclipse. The complete darkness. The confused birds. The sudden drop in temperature. The fully visible halo effect eminating from the sun. It’s other worldly to see the big space rock that goes around our planet move in front of the big fireball that keeps our planet alive.

Happy to get to celebrate something so cosmic with the family.

44 and there’s so much more

I turned 44 at the end of April and had an uneventful birthday. That’s how birthdays go after the big four-oh. I spent most of my day cleaning the house and watching anime. My family treated me to a “fancy dinner” at a place with cloth napkins and the kids behaved themselves through the whole meal.

The highlight of my birthday was exchanging texts with some old friends who have known me for decades. Old friends like that – even though you often live distant parallel busy lives – have the ability to tap into a deep well of friendship. For that I am thankful.

Making Games

I haven’t talked about it much, because I don’t want to jinx it, but I’ve been making some games in my spare time. And not one style of game either, a big swath of random ideas in different formats.

• A “Guess Who?”-style game for Panic’s Playdate.
• A one-page TTRPG. Almost everything is in place for this.
• A 52-card deck game that I’m turning into a game for your mobile computer.

Making games has been a fun and different way to spend my time. I don’t have much to show for all that tinkering right this minute, but soon maybe?

Waiting for a life-changing email

You know that feeling when your boss emails you and asks “Hey, you got a minute?” and those minutes until you talk to your boss feels like hours as your amygdala floods your limbic system with intense, wet, hot anxiety? That’s more or less what I’ve been feeling for the last two months as I waited for a life-changing email. There were two emails actually. Then that got stressful. Then I had to wait on a package.

To be totally honest, all that waiting nearly broke me. I’m a decently patient person but a giant cloud LOOMING over me every day that I’m unable to control is distressing. Then your friends and family and kids ask you “Hey did that life-changing email come yet?” and you have to say “Nope, not yet” over and over.

But the email did come. And so did the package. And the giant cloud of concern is slowly dissipating. And on Monday I’ll embark on the next big phase of my adult life. Ominous, I know.

Stats and consumption

What you jackals come here for…

🧠 Learning

I took some time to do some deep dives both formally and informally.

• TypeScript - Almost certain I’ll be using this sometime in the future, so I took a FrontendMasters course to connect all the pieces I had scattered about in my brain.
• LLM Vector Embeddings - All this LLM search jazz is normal vector search but with special GPT-based embeddings instead of Postgres’s default embeddings. Way less threatening or opaque to me now that I understand it.
• Solo RPGs - I got a bit obsessed with the idea of playing a TTRPG by yourself and it inspired me to make a game.

💪 Wellness

I’ve put on a bit of weight and that’s frustrating but I think again it’s stress-related.

• Taking walks
• Got a weighted vest for “rucking”
• Rode my new bike once

📖 Reading

Reading is still on a book-a-week clip. This year I’m mulling around tech and ethics, as well as reading about people who created or harnessed a new technology. I also got back into comics and have read some wonderful pieces. If it’s sci-fi themed and has good art, I’m all-in.

Finished

• Doom Guy: Life in First Person by John Romero - An autobiography about the man who created DOOM.
• Of Boys and Men by Richard V. Reeves - The boys are not alright. A good look at the problems and struggles facing men.
• Empire of Imagination by Michael Witwer - A well-written biography about Gary Gygax, creator of Dungeons & Dragons.
• Excellent Advice for Living by Kevin Kelly - I’m a sucker for the “old man shares one-liner quips for living life better” genre. I’m also a big Kevin Kelly fan.
• The Shame Machine by Cathy O’Neil - The follow up to Weapons of Math Destruction is an illuminating book about the negative impact social media has on our lives.
• The Coming Wave by Mustafa Suleyman - The new CEO of AI at Microsoft, Mustafa Suleyman, has a history with AI and his work at Google’s Deep Mind which produced the AlphaGo AI. I thought this was going to be all “rah-rah” hypefest about AI, but instead I found it a pretty sober critique with a major theme around “containment” of this new technology.
• The Hitchhiker’s Guide to the Galaxy by Douglas Adams by Douglas Adams - I as happy to finally read this classic piece of sci-fi. Suprisingly relevant to now… down to the whole idea that politicians like Zaphod Beeblebrox win their office by creating outrage.
• Moon Man #1-2 by Kid Cudi - An amazing work of art. It’s just getting started, so hop on now!
• Napalm Lullaby #1-2 - Siblings hellbent on taking down the religious authoritarian regime.
• We Only Find Them When They’re Dead #4-5 - Having a tough time with how “jumpy” this series is but I picked up the next volume.
• The Weatherman Vol. 1 - The first issue has an explosive hook and it never stops.
• The Weatherman Vol. 2 - More of the same great sci-fi thriller.

In Progress

• Gundam III by Yoshikazu Yasuhiko
• The Master Switch: The Rise and Fall of Information Empires by Tim Wu

📝 Blogging

Slowed down a lot on blogging. That’s okay. I still have three dozen drafts but I’m being pretty choosy about where I toil. It’s easy for me to lose a weekend tinkering on a handful of posts, or piecing together a giant overly complex post like this. I need to stop doing that. Or I need to do that more often. Who knows.

FrontendMasters Boost (1 post)

• You Want border-color: transparent, Not border: none

This Blog (5 posts)

• John Romero doesn’t believe in prototypes
• How do you verify that?
• Mouthguard
• A weighted vest
• The native app install experience

📺 Media

Movies

• Perfect Days (Letterboxd) - A perfect Japanese film.

TV

• Unlocked: A Jail Experiment (Netflix) - What happens when you don’t make prisoners stay locked up in their cells 23 hours a day? And you let them have free phone calls? The experiment was nearly called off, but the men pulled together to make the best of their situation.

Anime

• Frieren: Beyond Journeys End (Crunchyroll) - A perfect anime.
• Delicious in Dungeon (Netflix) - Food, monsters, and fun!

Podcasts

• Sold a Story Ep10-11 - Follow up to the 2022 exposé on reading eduction and what’s changed.
• The Adventure Zone Kills Dracula - This is the most surreal of all the series so far.
• If Books Could Kill… - The recent episode on “Going Infinite” was awesome.
• Bundyville S1: Bundyville - An investigation into the origin story of an anti-government right wing extremist group. One unexpected twist was though I do not support their beliefs at all, I sympathize how they were setup by the FBI agents… which is unfortunate because all these guys need is a match to start a fire.
• Bundyville S2: The Remnant - The ripple effects of Cliven Bundy’s extremism.

🎙 Recording

A normal couple months of ShopTalk with some great guests.

• Ep606: Web Sustainability with Michelle Barker
• Ep607: Astro Launches an Integrated Database
• Ep609: Blake Watson on Home Cooked Apps
• Ep612: Matt Haughey on a Fantasy Blogging CMS Setup

🎲 GameDev

Mentioned above, I’ve been making some games.

• Untitled TTRPG
• Untitled Card Game
• Untitled Playdate Game

🤖 Gunpla

A great couple months of Gunpla with some really stellar models.

• RG Sazabi
• HG Freedom Strike Rouge
• MGSD Barbatos

For my birthday I got the Perfect Grade Unleashed RX-78-2 which is like the pinnacle of Gundam models. It’s $300 worth of plastic and I couldn’t be more excited to build it.

👨‍💻 Open source and web community

I hope to pick up again here and I have some projects behind the scenes, but not much to show at this point.

• Presented “HTML with Superpowers” at Bleeding Edge ATX
• CSS4 Community Group
• Web Component Community Group (Open Styleable, Declarative Web Components)

I’m bad at setting calendar reminders for community group meeting times. I hope to be more involved going forward.

👾 Video games

• Warzone, but probably need to quit for my mental health
• Reinstalled Overwatch for a friend’s birthday
• Uninstalled Gundam UC Engage for wasting too much of my time.

If you long for a web of yore were things were better, somehow: The thing is: none of this is gone. Nothing about the web has changed that prevents us from going back. If anything, it’s become a lot easier. We can return. Better, yet: we can restore the things we loved about the old web while incorporating […]

I recently wrote an extensive analysis and criticism of a proposed California link tax, offering many alternatives. A state senator just proposed his own alternative — and it is even worse. Sen. Steve Glazer’s SB1327 would tax the collection of data for advertising by large platforms — onlyl those earning more than $2.5 billion in ad revenue — to support a […]

The post News bills: From bad to worse appeared first on BuzzMachine.

If you are in an under-resourced UX team it might be time to redefine your role from implementor to educator.

This past weekend I had the opportunity to be what every father wants, if only for a moment: the “cool dad”. My wife was out of town and my youngest son wanted to play PUBG. I caved in, taught him the basic FPS key binds, and he was having a great time. While he was […]

The post How to Fix: Windows WASD Keys Reversed with Arrow Keys appeared first on David Walsh Blog.

I mostly play old time and bluegrass music. Particularly in old time and fiddle songs, the songs have a fairly rigid and repetitious structure. That’s not to say players don’t do interesting things with it, but unless a song is intentionally crooked, the structure of the song remains the same throughout. A typical structure is […]

Malcolm Coles: 10+ years ago I created an annual list of websites that FORBADE you from linking to them, DEMANDED you write to ask for permission or LIMITED links to only their home page. Royal Mail even promised to post me a paper licence. Now a decade has passed, let’s see who’s still doing it … And […]

Y’all use Figma for design work? I’d be willing to bet a lot of you do at your organization. I’m still wrapping my brain around the fact that Adobe has to write a billion dollar check to not acquire it. It’s no wonder why they wanted it — there is a new household name in […]

A fine post by Ethan Marcotte called The negotiation cycle led me to an incredible essay by Alan Jacobs called From Tech Critique to Ways of Living. It references an old idea called “The SCT¹” which is new to me but based on thinking by the likes of Ursula Franklin and Neil Postman who I am familiar with. Neil Postman’s Technopoly² –which I read in March– was one of the best books on technology I’ve ever read, so this is relevant for me.

Jacobs’ essay takes an unexpected yet welcome turn towards Daoism linking to a heavier essay by Yuk Hui called Cosmotechnics and Cosmopolitics. I’m not smart enough to fully understand all these philosophical (epistemological?) arguments³, but reading the word “cosmotechnics” felt like a beacon in the night for a concept I’ve intuitively felt but never had a word to describe. In Hui’s words:

Let me give you a preliminary definition of cosmotechnics: it is the unification of the cosmos and the moral through technical activities, whether craft-making or art-making.

I believe that science and technology are moral. Try as we may to divorce a tool from an outcome, there is always an interplay. As a contrived example, I can make a <Button/> component and it would by itself be morally neutral. But if I make a <Button/> that someone with a disability cannot use, then I have made a moral decision through either action or inaction. Similarly, I can make a <Button/> that puts a stuffed animal in a digital shopping cart, that is morally neutral. But if that stuffed animal is knowingly assembled with child labor and dropshipped from afar with an immense carbon cost relative to the value of the item, I have made an immoral <Button/>. It’s not hard for me to imagine that someone somewhere is making a <Button/> component that launches a nuclear missile…

In the words of Dr. King from his sermon The Three Evils of Society:

“When scientific power outruns moral power, we end up with guided missiles and misguided men.”
– Dr. Martin Luther King, Jr.

But if you believe technology is moral, then the next larger follow up question is “Whose morals?”

This question of “Whose morals?” permeates my thoughts, specifically in regards to global challenges like climate change. Call me unpatriotic, but I don’t think rugged American individualism is going to manifest destiny our way out of the climate crisis. A technological breakthrough seems unlikely. We need to rely on the knowledge and experiences of African, Asian, and Indigenous societies who have a different ontology, a different Dao (a code of behavior that is in harmony with the natural order); one that prioritizes the group over the individual. In less metaphysical terms, I believe we need to listen to societies built on cooperation and sharing of limited resources over societies built on the continuous expansion of dominion through exploitation of markets, labor, and people.

We need a new language of cosmopolitics to elaborate this new world order that goes beyond a single hegemon.⁴

I agree with Hui that a singular perspective cannot and will not solve the current crisis we are facing. Technology alone will not save us. We need scientific power in the hands of moral-powered men and women. And the longer we wait the more we risk erasing the communities and ancient knowledge we need to find an equitable solution.

Climate change, geopolitical conflict, the rise of authoritarianism brought about by social media companies… these are all large problems that take governments decades to solve. That puts cosmotechnics far away from me, a would-be practitioner. Hui thankfully provides a story from the Zhuangzi; the butcher Pao Ding.

Pao Ding is excellent at butchering cows. He claims that the key to being a good butcher doesn’t lie in mastering certain skills, but rather in comprehending the Dao. Replying to a question from Duke Wen Huei about the Dao of butchering cows, Pao Ding points out that having a good knife is not necessarily enough; it is more important to understand the Dao in the cow, so that one does not use the blade to cut through the bones and tendons, but rather to pass alongside them in order to enter into the gaps between them.

This is the kind of web development I like. It agrees with me. I better understand the Dao of web design. Our apps and websites are like water, flowing in and out of viewports. Contextualizing themselves to the recipient’s limitations or preferences. Those who find the easier paths through the gaps become excellent butchers of websites.

Pao Ding adds that a good butcher has to change his knife once a year because he cuts through tendons, while a bad butcher has to change his knife every month because he cuts through bones. Pao Ding, on the other hand—an excellent butcher—has not changed his knife in nineteen years, and it looks as if it has just been sharpened with a whetstone. Whenever Pao Ding encounters any difficulty, he slows down the knife and gropes for the right place to move further.

Another translation I read phrased the bad butcher as “hacking” through bones and what a serviceable metaphor we’ve found! The knife, a technology. The medium, a cow or software. Our tools will last longer if we learn how to slow down and understand the nature of the medium, the grain, rather than hacking against it.

The hustle and bustle of capitalism and keeping up with the zeitgeist makes this hard. There’s a pressure to keep up, lest you fall off the cliff of irrelevance. After all, technology always only advances and there’s always a better knife in the distance… right?

Over the years I’ve heard myself referred to as a “curmudgeon”, “old guard”, “gatekeeper”, and “dinosaur”. That is due in part to my loudmouthed punditry but also because I dislike a specific technology from an immoral company that does our industry, society, and users irreparable harm. Moving fast and rethinking best practices spawned untold lifetimes worth of human hours dedicated to knife swapping each year. And when tools dull, we throw stones at each other.

I’ve always been overly cautious and considered in the tools I use but I’ve never thought of the tools I use as a moral choice. Perhaps now I will. I’m not a Daoist by any means, but this idea of cosmotechnics begins to provide a mental framework for expressing the relationship between technology and morality. From the large scale of the cosmos to the small scale of the knife, I’m glad to have vocabulary to think about future problems.

It gives me no satisfaction to say this — indeed it fills me with trepidation for the nation — but The Times is broken.  I know some of you are thinking, “You only now realize this?” No, I’m only now saying it. I have been criticizing The Times for its willful credulity in the face of rising fascism and […]

The post The Times is broken appeared first on BuzzMachine.

Feedbin has custom email addresses now so you can use a unique email address for each newsletter and not worry about a spam leak.

Matt Haughey wrote a blueprint for his “Dream CMS” and we had him on ShopTalk to talk about it. That got me thinking about what features I’d want in my dream CMS. It’s fun to think of what a modern CMS might have like inline editing, asset serving, monetization/membership functionality, and more imaginative comment moderation.

Most of my dream CMS features center around improving my writing and content surfacing. All these ideas seem like a pretty good fit for LLMs or AI, even though I don’t drink from that particular well often.

1. On-the-fly fact-checking

As I think more about verifying outputs, I’d love a feedback tool that did a quick fact check before I hit publish. Did I not cite a source? Did I make a false assertion that ruins the credibility of the whole post? Did I not consider some perspective I should have? Am I just bitching and moaning? CMS, help me, please! I’m making an idiot out of myself.

2. Auto-tagging

I write a lot of posts but I’m shit at tagging them. I wish I could tell my CMS “Hey, here’s a general list of topics I write about, please recommend tags before I hit publish.” Then I think it’d be cool if the little robot butler could crawl old posts suggest tags for those or find themes emanating from my subconscious that I hadn’t picked up on.

3. Topic bundling

À la auto-tagging, it would be neat if a CMS observed my content at a high-level and suggested opportunities to bundle posts of a similar theme into an online “zine” to offer new topic-based entry points for new readers. My lists of reverse chronological posts are thematically scattershot and I think some readers might find this more useful.

This idea gets into listicle territory pretty quick, but I often pull on thought threads over the course of months or years but that is entirely unsurfaced on my blog. I’d also love it if the machine could bundle links I share on my Mastodon feed to pull in other perspectives as well.

4. Idea validation

I’d love to know what content is outperforming other content. I’m sure I could piece this together myself with a half-dozen spreadsheets from Google Analytics, but I’d love to log into my CMS and know “Your CSS posts tend to have 10x engagement over your longform thoughtvomit” or “Your shitposts are driving traffic but are negatively impacting the quality of your site”. I don’t play the engagement game much but I’d love some data-driven validation nudging me in a positive direction when I’m discouraged, perhaps it could even suggest a handful of topics.

There’s a gross content farm machine version of this idea that identifies popular topics, suggests titles, an LLM writes posts based on those titles, and Dall-E plops an unsplashy image at the top… but that gives me the ick. At that point, you’re not blogging your thoughts or offering anyone any human value, you’re just clicking ✨ Sparkle Buttons.

For what it’s worth, baking these features into a CMS has little material benefit for me. This site is statically generated from markdown so it’s practically the opposite of a full-featured CMS. Or… perhaps it’s the perfect situation to start exploring some of these ideas.

You cannot properly test a design without copy. However, creating draft copy is easier than you think.

In the dying stages of innovation, companies at the top of the heap use their market power to maintain their high profits.

The post Suckage begins here: why search engines now prioritize advertising over good UX appeared first on Zeldman on Web and Interaction Design.

In Bend, you can’t miss the illustration work of Megan Marie Myers. It’s absolutely everywhere. There are murals. There are calendars for sale everywhere. Prints are hung up at coffeeshops, sometimes as whole exhibitions. She’s got books, stickers, hats, postcards, notecards, and heck, even neck gaiters. If her art wasn’t as charming and well done, […]

Most internet travels by wire. Straight through the dang ocean. Josh Dzieza in a feature for The Verge: These fragile wires are constantly breaking — a precarious system on which everything from banks to governments to TikTok depends. But thanks to a secretive global network of ships on standby, every broken cable is quickly fixed. […]

If you tend to follow React stuff, you might know that React has a new thing called “Server Components”. Mayank has an excellent blog post about them. It starts out with calling out the nice things about them, and then fairly calls out all sorts of not-so-good things about them. Me, I think it’s all […]

I have aphantasia—no ability to create images in my mind, or to remember things in a visual way. For well over half of my life I lived under the assumption that suggestions to visualize things were entirely metaphorical, and also that I was incredibly stupid in certain ways, finding things that everyone else seemed to […]

You’re doing yourself a grave disservice if your writing opens with something boring or banal. You’re going to lose me, at least. I’ve got a list of stuff to read and watch as long as your arm. Maggie really digs into this, in an effort to get better. Your challenge is finding the compelling problem […]

Why did leading designers in 2000 look down their nose at the web? And are things any better today?

The post This Web of Ours, Revisited appeared first on Zeldman on Web and Interaction Design.

Why you can’t build another Apple with VC bucks.

The post Don’t bring venture capital to a knife fight appeared first on Zeldman on Web and Interaction Design.

It is all too easy for our passion to lead to burnout. Do not allow your desire to create great work to undermine your mental health.

Even when it’s ugly—especially when it’s ugly—journalists owe readers the truth.

The post Both Sides, No appeared first on Zeldman on Web and Interaction Design.

In my paper on the California Journalism Preservation Act (CJPA), I examine the history of newspapers’ hostile reception of new technologies and competitors, reaching back a century to the dawn of radio. NiemanLab published excerpts from the paper on the flaws in the legislation and alternatives. I thought some might enjoy other sections, including this […]

The post Newspapers can be jerks appeared first on BuzzMachine.

I’ve heard the new cooperative version of Scrabble made fun of a few times. These pansy youths just wanna hold hands, drink warm milk, and avoid any conflict. Whatever. Nobody is threatening the value of competition. Me, I think cooperative games are awesome. There are still challenges. You work together to solve them. Like, I […]

I like Melanie Sumner’s coining of the phrase Continuous Accessibility. To me, it’s like a play on the term Continuous Integration (CI) that is very pervasive. We build CI pipelines to lint our code, test our code, and test our code primarily, but all sorts of things can be done. We can test new code […]

Modals have been an important part of websites for two decades. Stacking contents and using fetch to accomplish tasks are a great way to improve UX on both desktop and mobile. Unfortunately most developers don’t know that the HTML and JavaScript specs have implemented a native modal system via the popover attribute — let’s check […]

The post HTML popover Attribute appeared first on David Walsh Blog.

Stroll with us down memory lane as we celebrate the pearl anniversary of pixel art creation’s primary progenitor, and some of the many artists and design languages it inspired.

The post For love of pixels appeared first on Zeldman on Web and Interaction Design.

Many designers fear testing. However, it actually empowers them and prevents constant revisions.

At the end of each MSNBC YouTube video right now they have a 30 second post-roll of Ali Velshi explaining the 5-step process on how to install the new MSNBC app.

1. Tap on the App Store on your phone
2. Hit “Search” on the bottom right corner
3. Type in “MSNBC”
4. Click on the MSNBC app
5. Click on “Get” or the cloud icon

There’s an implied sixth step where you need to actually open the newly installed app. Opening the app for the first time you swipe through a little slideshow that has two more (optional) steps: give your email and turn on notifications. Standard engagement economy tactics.

Hearing the 5-step native app install process a few times a day makes me think we lost something along the way. Remember when the call to action was to visit a URL? Not only is “Visit msnbc.com” more succinct, catchier, private, less prone to user error, and immune to competitive advertisements but it also doesn’t require a paid presenter to coach you through it. Once upon a time users might have needed Ali Velshi’s help getting to a website, but in my experience visiting a website is one of the first computing skills my kids learned without my direct involvement. The URL isn’t a foreign concept anymore.

I know I’m making a mountain out of a “We just want to promote our new app, maaan” molehill here, but even saying “Visit msnbc.com/mobile” with a redirect to their actual app download page would be easier. It boggles my mind why you’d push a clunky app store install flow over a five-letter domain name. I’d even bet $5 that the “native app” is actually a bunch of web views in a trench coat. In an even wilder twist, that app download page isn’t linked anywhere on the website! Ughck. I’m 0% invested on what’s happening over at MSNBC but I’m already getting whiffs of misaligned goals, interdepartmental strife, and poorly designed content management systems.

Anyways, websites. They’re old tech but still work great from time to time.

I bought a 40 pound weighted vest for $40 dollars on Amazon. The workout term for this is “rucking” and has connotations with being outdoorsy and/or in the military. Load up a backpack full of weights (or in my case, a vest full of sand bags) and head outdoors. The marketing benefits of rucking sound great:

• It is simple and anyone can do it
• Gets you outside
• Active Resistance Training™️
• Burns up to 3x more calories than walking
• Good for your back and improves your posture
• Good for your mental health

A neighbor friend of mine (that’s also a physical therapist) has one and she recommended it. My body is adept at carrying heavy objects¹, so this seems like an easy way to squeeze out some gains from my regular walks. Bonus points that it gets me outside and gets rid of my developer hunch. After a handful of walks, I’m enjoying the vest and –as expected– my body handles the weight fine but it’s sweatier and hills knock the wind out of me a bit more.

There’s an army fetish around rucking. It’s hard to tell if that’s fragile male ego in workout culture or if it’s because an armored plate carrier is a well-tested and efficient way to carry weight. My vest doesn’t look that masculine and looks more like I duct taped C4 to my chest. With my uni-bomber glasses, long hair, beard, and resting scowl I don’t need more help looking like a disgruntled domestic terrorist but I suppose this completes the look. If I can sustain the $40 fix, then I’ll upgrade to the $200 plate vest solution.

The cynical side of me wonders if this is more skinny people shit. As I dawn the weighted vest, the irony is not lost on me I used to be about the same amount of weight heavier. Being heavy never helped me lose weight. No one gives you an approving head nod for walking while fat, but velcro a little vest to your torso and people give you the “good for you” pity eyes.

Putting my optimist hat back on, it might work this time. Maybe this is the one weird trick my body needs to activate dormant caveman genetics that will unleash my inner Adonis. Walking in hard mode seems sustainable for the time-being and I can already feel my ass morphing into a perfect badonkadonk.

The bots who shit in your sandbox are bigger, brassier, and better than ever!

The post Akismet means never having to say you’re sorry appeared first on Zeldman on Web and Interaction Design.

There are plenty of very legit reasons you’d want to have a scrolling element start out scrolled to the bottom, and stay scrolled to the bottom (as long as a user hasn’t scrolled back up). As ever, you could do this with JavaScript, as JavaScript can adjust scroll positions of elements. There is a way […]

The best bit of kids technology that we have, and this has been true from say age three to now six, is the Amazon Fire HD Kids. The operating system on it is fine. It loads up decently quickly. It’s locked down to only kids stuff. It’s not upselling stuff for the most part, there […]

This popup that 1Password does by default isn’t my jam: My problem with it is that it isn’t actually helpful. If you do use the feature and save the login, instead of that popup you just get another one that looks essentially the same that you can click to log in. That’s no better! If […]

I just heard about GitButler from a Discord friend. I’m kind of ripe for toying with Git clients I use, as I just switched to GitHub Desktop. I don’t regret the switch, but I don’t love GitHub Desktop so much I couldn’t imagine another switch. Little stuff bugs me. GitButler is free (the FAQ makes […]

Ever feel like you should write more but can't get started? You're not alone. Let's chat about making writing less daunting and more doable.

I’m designing for the web. The infinitely flexible web.

The post The More Things Change… (or: What’s in a Job Title?) appeared first on Zeldman on Web and Interaction Design.

Julia Evans has an extremely relatable and extremely charming talk in Making Hard Things Easy. Julia has a way of putting her finger on technology concepts that are notoriously difficult and making them easier to understand. She does this both by sharing her own tactics, like learning a reduced set of options or commands, as […]

A business world with deeply misguided priorities—exemplified by horror stories from the worlds of tech, gaming, and entertainment—accounts for much worker unhappiness and customer frustration.

The post Our Lady of Perpetual Profit appeared first on Zeldman on Web and Interaction Design.

“You know those body builders with the big arms and skinny little legs? Your jaw is like that.”

My dentist is explaining this to me while both her hands are inside my mouth clenching the left and right sides of my jaw. She explains that my right jaw muscle is three times larger than the left. I glurk in agreement that the right side of my jaw does seem to be more problematic, it’s not uncommon for it to make a horrifying pop each morning. Her prescription: a mouthguard for clenching my teeth at night.

“I could sell you a $700 mouthguard that takes two weeks to fit but unless you know you’re going to be the kind of person that sleeps with a mouthguard, you should just buy one on Amazon first.”

I like my dentist’s office. It’s holistic in the sense they care for the whole mouth, not just the teeth bits. It could be my crappy insurance but they’re not concerned with upsells either. And I love the idea of prototyping with a low-fidelity solution first. So I followed their advice and got the Liquid Death of mouthguards and for ~$25 it’s been a pretty big life upgrade.

1. No jaw pain when I wake up.
2. No more snoring.
3. Deeper sleep.
4. Less getting up in the middle of the night.

All those benefits from sticking a little chunk of chewy plastic in my mouth every night. I assumed putting an obstruction in my mouth would have the opposite effect, make snoring louder or wake me up choking on my own saliva, but nope! I guess I am a mouthguard person. While this won’t cure my nighttime RBF, it will hopefully prevent some of the lopsided side effects.

There is so much to parse in this Times column inspired by a paper examining alleged political leanings of large language models. First, the myth of a “center” is imposed on the machine as it is on journalism. That is an impossibility, especially when extremists weigh down the equation & move “center” by gravity downhill, […]

The post AI in Reflection appeared first on BuzzMachine.

Embracing a pragmatic approach to usability testing. Let's shed insecurities, adopt a pragmatic approach, and celebrate small steps in UX.

AI media creation has expanded to incredible video art and a host of other important improvements, and LimeWire is leading the way in creating an awesome interface for the average user to become an AI artist. Limewire has just released its Developer API, a method for engineers like us to create dynamic AI art on […]

The post Get Started in AI and NFTs with the Limewire API (Sponsored) appeared first on David Walsh Blog.

I have this friend. A mountain of unexpected medical debt buried his family at the start of last year. At the same time, the closing of his business stuck him with six figures of personal debt. Liquidating a retirement account and maxing out credit cards bought him short-term breathing room. Mostly, though, it added interest […]

The post The Valley of Hidden Sorrows appeared first on Zeldman on Web and Interaction Design.

I enjoyed Lee Robinson’s take on How I’m Writing CSS in 2024. Rather than jump right into tools and syntax, it starts with the user: Agreed! Number 3, and to some degree 4, are almost more in the JavaScript bucket than CSS, but it’s a good starter list. I’d add “The page styles shouldn’t interfere […]

Pieces of the web that make differing and complementary sense of the threat and promise of AI.

The post AI Roundup: The Bad, the Ugly, and the Pretty Cool appeared first on Zeldman on Web and Interaction Design.

I started edgeofmyseat.com in September 2001. I was a young single mother with a background as a dancer, staggering out of the dotcom meltdown, with a tiny grant from The Prince’s Trust and a belief that my ability to sniff out and fix problems in code might just pay the bills. I didn’t know what […]

The W3C explains how CAPTCHA excludes disabled users, and suggests alternatives that may be kinder and more reliable.

The post CAPTCHA excludes disabled web users appeared first on Zeldman on Web and Interaction Design.

Hank Green posted a video about four lies he believed. It’s a great video because it’s embarrassing to be wrong on the internet and here is smart person™️ Hank Green admitting he believed some bullshit. As you travel through the internet you’re constantly working against a lot of personal biases, like confirmation bias or the overconfidence bias, and it’s easy to slip up. It’s (biologically) difficult to correct your understanding as new facts invalidate what you believed true.

One simple question I’ve started asking a lot is: “How do you verify that?”

I’ve seen some compelling demos where LLMs take a jumble of text and spit out compelling artifacts like an image, some b-roll, a spreadsheet, a website, or an entire daily news podcast. It’s incredible… until my buzzkill brain starts asking questions. Images are easy to verify: does image look correct or does it contain phantom limbs and have five rows of teeth? Text summary or expansion, also within possibility to verify. A website? I mean… I can tell you if it’s an okay website code-wise but I’m probably an outlier here. Validating the accuracy of a larger corpus of data that got summarized, keyworded, and categorized? Oof. This is where the scales tip for me because it seems improbable. Or at least time consuming. Perhaps as time consuming as it takes to do the work yourself?

To be fair to the robots (why would I ever say this?) I think it’s worth pointing the question at myself. I’ve been thinking about my “old world” method of verifying facts and determined I have the following routine.

1. I consume a lot
2. I experiment
3. I ask experts

When I say “consume a lot”, I mean I read hundreds – sometimes thousands – of articles and watch hundreds of videos each week (cf. novelty seeking, information addiction) as well as my book habit. To make that theoretical knowledge more practical, I prototype and experiment to answer questions. With a basic understanding established, I often ask experts for their perspective. For web tech, that’s lots of open questions or DMs to people I know care about a specific technology. I’ll then sometimes have those people on my podcast to prod them some more.¹

Like loose change and shells rattling inside a coffee can, I collect all those informational tidbits and filter them through my years of experience and how my brain works. That produces an outcome I’m generally satisfied with, informed yet potentially wrong. It’s not too different from an LLM where the outputs are only as good as their inputs.

My inputs are sometimes flawed. If Books Could Kill… is a podcast where the hosts do takedowns of my favorite books: self-help pop-psychology airport books. They do an incredible job at on-the-fly fact checking, reading criticisms, scrutinizing every assertion, asking “Hey wait, is that true?” on every page and have nearly ruined the entire genre for me. I assume you learn this brand of skepticism in journalism school and the trade-off is that you’ll never enjoy a book again in your life. But I need to remind myself the goal of a book isn’t to get to the last page, it’s to expand your thinking.

I wish I did better at this (so I don’t repeat falsehoods) but collecting factoids makes me feel smart and I like feeling smart so now they’re insulated inside a little blanket of my personal biases. Fact-checking in realtime doesn’t tickle the ol’ grey matter. It doesn’t have the same dopamine response.

One more story and I’ll let you go. In an effort to not be a total fucking grandpa all the time I’m trying to use AI more while keeping an open mind. It’s been… challenging. But the other day I needed a fact checked – something one of my investors mentioned during our YCombinator application process that was noodling around in my head – and a regular search didn’t return any results, so I tried a trending AI search tool that provides citations.

• First it told me “Yes, this was true” but cited the wrong reasons.
• So I hit it with an “Are you sure?” and it changed its answer to “No, it’s not true” but cited a random Hacker News comment that asserted the opposite.
• So I said “Your source says the opposite” and it KFC doubledown’d and said “No, it’s not true.”
• So I copy-pasted the text from their own source into the prompt and it said “Yes, this was true.”

That’s a… complex user journey. And it happens to me a lot. I wonder if this tech falls victim to its own compelling demos. The “Time to First Demo” is so short and often so profound, we fill in the possibilities with our own projections and science fiction. It’s harder to question the quality or veracity when our imaginations and our biases get wrapped up in the idea because it might mean questioning ourselves… which is not something humans are biologically engineered to do well.

Okay, this is the last bit I promise. There’s one line from that Hank Green video that stands out to me in this whole self-fact-checking debacle…

I was fine with having the [mis]information put into my head, but when I put it into someone else’s head, I felt a little weird about it so I went to check just in case.

That seems like a humane approach to sharing information. Be liberal in what you accept, fact-check on the way out. I hope I can get better at that.

Struggling with the quality of client copy? Discover how shifting their perspective and changing their tools can improve what they write.

A couple weeks ago I joined a conversation about John Romero and prototypes. Tyler posted some thoughts about Romero’s autobiography, Matthias shared a quote from a Tim Ferris podcast where Romero chided prototypes, and Matthias looped me in because I love prototypes.

No prototypes. Just make the game. Polish as you go. Don’t depend on polish happening later. Always maintain constantly shippable code.
– John Romero, Strange Loop 2002

A quick internet conversation changed the course of my week a bit. After that short exchange I dove in and listened to podcasts, watched a handful of talks, and read an entire autobiography… and I’m still shocked that John Romero doesn’t believe in prototypes.

id Software is synonymous with speed

To understand Romero’s perspective you need to understand the ethos of id Software. id Software was –to borrow a gaming term– a “Press W” company, meaning they tend to plow through all obstacles to keep forward momentum. As Romero recounts in his biography, they prioritized speed above all other design principles.

• Speed in gameplay
• Speed in development
• Speed in using the latest tech
• Speed in heavy metal MIDI soundtracks

Romero and Carmack were also prolific developers. Romero has over 100 titles to his name and in 1991 they released 15 games! And they did this while simultaneously pioneering 3D video game graphics for Wolfenstein 3D (1992) and DOOM (1993). How did they maintain such velocity?

• Good division of labor. Carmack worked on the game engine, Romero on the level design, and Tom Hall did the art.
• They lived together. I’m not advocating for workplace cohabitation, but I think you need to acknowledge the contextual environment.
• Knew the hardware. Carmack and Romero were intimately familiar with the limitations of the hardware they were developing against which made porting games to other platforms (Commodore, Amiga, etc) a lot more predictable.
• Always rewriting. They were always rewriting using the latest tech. Take an existing title and use the latest graphic capabilities, take an existing title and make it with the latest engine, rinse and repeat.
• Built internal tools. Romero built internal tools to speed up level design: TEd (a text-based level editor), DoomEd, and QuakeEd. Romero frequently talks about making DOOM levels in a single night.
• Predictable scope. While the underlying graphics or physics engine might change dramatically, the formula for the scope of the game (number episodes, levels, weapons, and types of enemies) stayed nearly the same so you could repeat processes, reduce code churn, and avoid surprise hardware limitations.

That formula gave the team a lot of shots on goal. To use another sports metaphor, that’s a lot of reps. id Software was crunch time all the time. Abiding in that breakneck thrill ride enabled them to create groundbreaking, industry-defining titles like DOOM and Quake.

Back to prototypes and the lack thereof…

Okay. Back to the main plot. John Romero doesn’t like prototypes…

“No prototypes. Just make the game. Polish as you go.”

Speed is great, but process effects outcomes. In Romero’s own words “Don’t depend on polish happening later” which is something those of us in tech know all too well. You’re probably going to run up against “the Iron Triangle” at some point.

I’m not trying to throw shade – I will never be as successful as id Software – but here’s a side-by-side of two similar side-scroller games.

One is a game from a company that prioritizes prototyping and using withered technology (Super Mario Bros, 1985), the other is a clone of that game from a company that prioritizes shipping quick on the latest hardware (Commander Keen, 1990). This isn’t an attempt to strip the game of its technical achievements, bringing Nintendo-like games to the PC, but there’s a palpable difference between the two; one is timeless and one is timely. While a myriad of skill, staffing, and technology factors contribute to the difference¹, I believe the biggest delta comes down to pressing the publish button too early.

There’s a famously misattributed quote that seems apropos here…

“A delayed game is eventually good. A bad game is bad forever.”
– Siobahn Beeman, often misattributed to Shigeru Miyamoto

Who cares if some “not spectacular” graphics slipped out the door? That game, Commander Keen, was successful. id Software was successful. Over and over. From my perspective that comes down to the sheer volume of ideas they shipped, that continuous practice, and their novel shareware distribution model coinciding with the explosion of the internet and the PC. You need to be responsive and reactive to that wave and if there’s a commitment to release a new product every month, then I wouldn’t recommend a thinking tool like prototypes under those limitations either.

Do I –without evidence– believe they actually did prototype a bit? Yes. I think in the sense of experimenting with level design or evaluating community mods, they could cheaply explore new ideas with low effort thanks to their level editor tools. All those throwaway ideas amount to some level of what I’d call prototyping. But I take Romero’s point that they didn’t believe in prototyping, they were working on the product, not an idea, and could have hit publish at any point in the process.

So I’ll concede that maybe with a pair of once-in-a-generation talent, a perfect mixture of group workaholism, a breakneck cadence, all living in the same house, a convergence of new technologies, quality internal tools, the explosion of the home computer industry, an original and extremely violent IP that appealed to the Metallica generation, and over a hundred shots on goal… you too might be able to capture lightning in a bottle and create a smash hit like “the entire concept of 3D video games”…

… but for the rest of us there’s prototypes.

Lossy compression can be good. For something like a JPG, that naturally uses compression that can be adjusted, that compression leads to lost image data. In a good way. The image may end up being much smaller, which is good for performance. Sometimes the lost image data just isn’t a big deal, you barely notice […]

Time can be a funny thing. I still remember discovering HTML, CSS, and JavaScript coding. I still remember my first college programming course. I still remember my first day at my first coding job, then my first day at my second coding job, and then my first day at Mozilla. I still remember my first […]

The post I’m So Old: Web Edition appeared first on David Walsh Blog.

Leadership, hindered by a lack of diversity, has steered away from a tool for public good and one that is instead subject to capitalist forces resulting in monopolisation. Governance, which should correct for this, has failed to do so.

The post Heal an ailing web appeared first on Zeldman on Web and Interaction Design.

Today Gerald Levin died. The world will remember him as the architect of the Time Warner AOL merger. But I think of him as a grieving father.

The post Death of a father appeared first on Zeldman on Web and Interaction Design.

We can avoid project scope creep by using the concept of "appetite." This focuses on time and budget instead of scope when defining projects.

“Our online experience doesn’t have to depend on billionaires unilaterally making decisions over what we see.”

The post Open-source moderation appeared first on Zeldman on Web and Interaction Design.

Howdy. It’s March already. Let’s catch up. In January, Austin had a freeze but thankfully uneventful. Brings up a lot of “my dumb hyper-capitalist ultra-Libertarian government has created a failed state” trauma though. In February, my family and I have been battling sickness on and off. Switching over to care for a sick kid at home is such a sidewinder to my intended productivity. Shazam! Transformed from computer man into a butler who futily tries to hypnotize kids (who don’t take naps) into taking naps. We are rolling with the punches that come from attending public school and Spring Break starts next week.

Temperatures are already hitting 89ºF (31.6ºC). It’s still technically Winter, but feels like late Spring. I’m trying to enjoy it and take walks but feel a background sense of dread for the upcoming Summer. There’s an old saying in Texas that goes something “warm winter, cool summer” (sometimes expressed as “extreme winter, extreme summer”). I haven’t crunched the numbers to verify that, but looking at the data trends it seems to only go up and the new February 2024 ocean surface temperature chart makes more alarmed.

But enough existential climate dread, let’s take a look back across these past two-and-a-half months.

A different but successful Christmas

We celebrated Christmas at home this year. Typically, we visit family in other states for the holiday. But hauling Christmas across the continent is too much and after last year’s debacle where I missed Christmas day entirely, we made the decision to not travel until after Christmas. I missed seeing my extended family but I’ve never been more relaxed around the holidays.

The day after Christmas we flew up to Omaha, Nebraska to visit my dad and saw my brother and step-brother’s family. We had a great time. Kids played hard. We went to the zoo. We nearly froze to death going ice skating. We went to an interactive museum. And we played lots and lots of dice games and crokinole.

We left Nebraska with a double dose of bad family news but fingers crossed there’s better news ahead.

Digital gardening

I spent heaps of time tinkering on my site. Getting it juuuuust right.

• I tightened up spacing and typography a bit across all the pages.
• Moved my bookshelf to the main navigation after Trent suggested it.
• Prototyped a page for “Limited Runs”, self-contained story arcs and seasons.
• I blogged a metric ton.

That last one makes me happy. I had two blogging-related goals in my Year-in-Review post:

1. Publish half of my 39 drafts
2. Publish on other sties

I’m happy to report that I succeeded at both. I posted 31 posts on this blog and 2 posts over on Boost, the new Frontend Masters blog. Somehow, I still have 30 drafts left. Weird how that happens. It feels good to get those posts out, much cognitive load shedding occurred.

Office reorganizing

A new year, a new season of life, and a dose of inspiration from Adam Savage’s reworking of his workshop, I felt compelled to drastically reorganize my office.

I moved my bookshelf to the back wall, bringing my Gundam compulsion front-and center. I 180º’d my desk to a different wall and put the windows at my back. That creates some video call whiteout sun challenges, but the sun is not in my face anymore. My office now feels fresh and zesty and like a much better use of the space.

Stats

🧠 Learning

• Becoming a domestic goddess - Started a daily habit of cleaning and organizing more. I’m not great at it but trying to get better.
• Algorithms - Lots of reading, Leetcodes, and went thru Primeagen’s “The Last Algorithms Course You’ll Need” on Frontend Masters. I don’t like algorithms.

💪 Fitness

• Got a new bike for Christmas, but haven’t done a good job at riding it.
• Been walking more. That’s nice.

📖 Reading

My book consumption feels like I’ve slowed down, but I’m closer to the Book-a-Week club than I want to be.

Finished

• Enough by Cassidy Hutchinson
• Prequel: An American Fight Against Fascism by Rachel Maddow
• The Victorian Internet: The Remarkable Story of the Telegraph and the Nineteenth Century’s On-line Pioneers by Tom Standage
• If You Want Something Done: Leadership Lessons from Bold Women by Nikki Haley
• Technopoly by Neil Postman
• Supercommunicators: How to Unlock the Secret Language of Connection by Charles Duhigg

Started

• Gundam III by Yoshikazu Yasuhiko
• Doom Guy: Life in First Person by John Romero
• The Master Switch: The Rise and Fall of Information Empires by Tim Wu

📝 Blogging

Frontend Masters Boost Blog (2 posts)

• Capo.js: A five minute web performance boost
• Safari Gets a Toggle Switch Input

This Blog (31 posts)

• The History of Donkey Kong and Mario
• Twenty Twenty-Three
• Quotes from moving house
• Accessible Fart Machines
• Trying to be the ideal American family with a small fridge
• Ecosia
• MDX with Web Components Part II
• Dropout
• Stitch images together with Stitchy
• Not a collector, but…
• WobblyBox, a web component for wobbly boxes
• Where have all the flowers gone?
• Play at work
• One big, one little
• The time to unmaintainable is very low
• What Can a Website Do?
• Are Design Systems a zero-interest rate phenomenon?
• Users first then do teams
• Big, beautiful, beefy focus states with :focus-visible
• An inbox full o’ opportunities
• At last, browser choice*
• “I used to listen to your podcast”
• A holy communion
• CoraQuest
• Continuous startup jobs
• A dozen thoughts about AI
• UI = f(statesⁿ)
• Week Links №1: Mid-Feb 2024
• A tale of three architectures
• Duolingo
• How to get on a podcast

📺 Media

Movies

• Howl’s Moving Castle (Max) - Never actually saw this Studio Ghibli classic. I was surprised to learn that Howl was not the old lady.
• Dune II - A perfectly executed sequel to an epic-feeling epic.

Anime

Finished

• Den-noh Coil S1-S2 (Netflix) - An anime set in the future where all the kids have an AR visor.

In Progress

• Zeta Gundam (Crunchyroll) - Kamille!
• Delicious in Dungeon S1 (Netflix) - Dungeon crawling meets Japanese cooking show
• Gundam Build Divers S1 (Crunchyroll) - More gunpla fan service and I’m here for it.

Podcasts

I love this medium and cleared out my podcast queue… then posted about it and now I have ten more series to get thru. I love how that works.

Finished

• The Rise and Fall of Mars Hill (Christianity Today) - A story about hero worship, toxic masculinity, failed accountability, and its impact on a large community.
• The Long Shadow S1: 9/11’s Lingering Questions - An in-depth look the 9/11 terrorist attacks and the unanswered questions.
• The Long Shadoe S2: Rise of the American Far Right - From the Branch Davidians in Waco to the rise of modern day right wing extremism in the form of white supremacy, conspiracy theories, and the insurrection.
• A Very British Cult (BBC) - Inside Lighthouse, the life coaching pyramid scheme that also made you mistrust your family and remortgage your home.
• Things Fell Apart S2 (BBC) - Jon Ronson’s follow up look at the culture wars. This season is about how one small misunderstanding cascades to become a large misunderstanding.
• Scene on Radio S5: The Repair - Climate change, the most pressing issue of our time and how we go about repairing it.
• Scene on Radio S6: Echos of a Coup - The recounting of America’s only successful coup in 1898 when a white supremacist mob ousted duly elected officials of Wilmington, NC.

Started

• The Adventure Zone Versus Dracula
• Finding Drago
• Santiago Boys

🎙 Recording

ShopTalk

• Ep598: Jen Simmons on Interop, WebKit Releases, and New CSS Features in Safari
• Ep600 Where Will The Web Be 12 Years from Now?
• Ep601: Brad Frost on A Global Design System + Frostapalooza
• Ep602: Deno, React Alternatives, and Copilot Concerns with Triple Threat Josh Collinsworth
• Ep605: Jim Nielsen on Subversive URLs, Blogging + AI, and Design Engineers

🤖 Gunpla

Cleared out my gunpla backlog and celebrated by buying three more models.

• HG Gundam Calibarn
• HG PMX-003 ‘THE-O’
• MG RGM-89 Jegan

I also started on the RG MSN-04 Sazabi, but not quiiiite finished yet.

⌨️ Open source

• WobblyBox - A web component for wobbly boxes.

👾 Video games

• Gundam UC Engage
• Duolingo 🔥 100-day streak… then quit.
• Call of Duty: Warzone
• Rage quit and uninstalled Overwatch 2

Happy heavenly birthday to my dear, deceased, devil brother Pete Zeldman. Today, 5 March 2024, to celebrate Pete’s life… Lost in Sound Records is releasing an album of solo drums, Enigma, which will keep rhythmic enthusiasts and scholars busy for…well, forever. And ALSO 2.5D, his crazy interesting NYC rock band… [has released] its first single. —Cindy […]

The post New music from the beyond appeared first on Zeldman on Web and Interaction Design.

I was darn impressed by Scott Jehl’s personal charge to bring back an idea known as “responsive video”. If you’ve seen the <picture> element, and how you can provide multiple <source>s with different @media queries allowing for only the best match to be shown, you already get it. It turns out that browsers, at one […]

Fortunately, on that day, I allowed a strong, simple idea to penetrate my big, beautiful wall of assumptions.

The post “Where the people are” appeared first on Zeldman on Web and Interaction Design.

I’ve been co-hosting a weekly podcast for nearly 12 years with over hundreds of guests and I want to tell you the secret to getting invited on a podcast. Are you ready? Here it goes.

Already be talking about something.

If you want to go on a podcast and talk, the best thing you can do is already be talking about something. And by talking, I don’t mean pontificating on social media. I mean by writing blog posts, responding to comments, participating in web standards, doing conference/meetup talks, and having actual human-to-human interactions (in-person or online) where you’re taking place in the marketplace of ideas. It helps if you do that on a regular cadence. If I can see from the outside that you’re thinking about a topic –whether broadly or deeply– that gives you standout guest potential. You don’t need to have a whole branded “A Book Apart”-style catch phrase for what you’re talking about (although, it doesn’t hurt), but you need to show you’ve thought about, experimented with, or understand a topic beyond the readme.md.

The incentive structure is setup like this (presented in user story format):

AS A podcast host
I WANT a friendly and knowledgeable guest
SO THAT I can fill an hour of dead air

As a podcast host, I need as close to a “sure thing” as possible. Being a good guest candidate also requires a lot of soft skills. Possessing knowledge is one thing, but I need the confidence that we can talk a for an hour without you being an asshole or the conversation collapsing. Are you funny? Serious? Either way can you spin a story and be remotely relatable? A nightmare scenario for me is having to throw away a whole episode and scramble to record a backup before the show goes out on Monday. Whatever you can do to model those core skills in your online persona goes a long way.

Anyways. That’s my advice if being a guest on a podcast or livestream is a goal of yours. It probably works for speaking at conferences too. I don’t care if you’re someone’s boss, if you’re super-duper smart, if you drive a Porsche, if you have a popular code repository, or if you’ve paid to get yourself into a Forbes article. My biggest care is that you’re already talking about something, you have an open catalog of thoughts and opinions, and I can see evidence that your ideas have broader appeal than your basement.

It’s a year and one day since you died. At times, I feel your presence. I listen to your music every day. I miss you.

The post R.I.Pete appeared first on Zeldman on Web and Interaction Design.

Quick, before everyone else thinks of it. Set the word “SUCCESSION” in Engravers Gothic and export it to a transparent PNG. Download photos of confederate general Mitch McConnell and Republican Johns Thune (R-S.D.), Cornyn (R-Texas), and Barrasso (R-Wyo.). Grab and burn Nicholas Britell’s main title theme from Succession. Import all files into Final Cut Pro […]

The post Just add water. appeared first on Zeldman on Web and Interaction Design.

“Led” is the past tense of “lead.” L.E.D. Not L.E.A.D. Example: “Fran, who leads the group, led the meeting.” When professional publications get the small stuff wrong, it makes us less trusting about the big stuff. Trust in media is already at an all-time low. Don’t alienate liberal arts majors and obsessive compulsives. We may […]

The post Get it right. appeared first on Zeldman on Web and Interaction Design.

Get it?! Like “advice”, but for CSS. When should you nest CSS? Scott Vandehey says: There’s a simple answer and a slightly more complicated answer. The simple answer is “avoid nesting.” The more practical, but also more complex answer is “nest pseudo-selectors, parent modifiers, media queries, and selectors that don’t work without nesting.” The big […]

Regarding the supposed furor over #WokeGemini… If we saw generative AI as a creative tool, then I’d say imagining the founding of America with women & Black people at the table and the Catholic Church headed by Black women and Native Americans is a proper revision of history the way it should have been. The […]

The post Reflections in the ‘woke’ mirror appeared first on BuzzMachine.

Duolingo does a great job capturing the novel delight of learning a new language. You hop on, take a short quiz, and a little green owl waves at you and hops towards a trophy. You can add friends, join group challenges, and there’s a weekly ranking system to compete with users all over the world where you have a chance to move up a league, stay stagnant, or potentially get demoted to a lower league.

Duolingo takes a “spaced repetition” approach at language learning. I like how the app serves you vocabulary in isolation as well as in different sentence contexts with different AI voices, all aimed to reinforce the words before it leaves your brain. The progress meters, streaks, and competitive nature of the app are all a part of the gamification system designed to keep you coming back. But… there’s a lot of them.

Here’s a short list of all the progress meters inside the Duolingo you’re responsible for filling up.

• Daily streak progress
• Course progress
• Lesson progress
• Daily missions for monthly reward
• Monthy achievement progress
• Weekly league ranking progress
• Weekly friend challenge progress
• Collecting gems
• Match Madness progress
• +9 other achievement categories

Slowly you realize the truth about Duolingo; it’s not a language learning platform, it’s an engagement platform. And through that engagement you might pick up some language skills. Duolingo does little in explaining how rudimentary concepts like verbs or participles work and instead lets you piece it together solely from repetition and context clues. Repetition in learning is important but without ever addressing the fundamentals of a language Duolingo reveals it’s prioritizing something else over language mechanics.

Duolingo succeeds when you log in, see an ad after every lesson, and feel like you’re making progress towards a goal so that you will log in the next day and repeat the cycle. The dopamine hits and then a surprise (!) Double XP potion shows up at the beginning of the week. The Double XP boosts your score and you secure a spot on the leaderboard. This spurs more notifications and sessions for your competitors, which serves more ads. Now the pressure’s on to avoid losing your spot on the leaderboard. Another potion shows up to get you over the mid-week slump and to stir the coals of the engagement metrics again. You can of course pay to not see ads and unlock faster dopamine hits.

And then there’s the social pressure from the cartoon bird to keep your streak alive. At first it’s motivating and cute but then turns a bit ominous and manipulative, saved only by its sense of humor.

Despite it all the engagement theatrics, Duolingo is fun. I wish I had Duolingo when I was initially learning Japanese in college (or Spanish in high school). I think along with textbook learning it would have cemented a lot of concepts for me. It’s fun to get a daily dose of something new and see the scores go up.

At one point all four members of my family were on Duolingo learning four different languages simultaneously in the same room. That was chaotic, fun, and made me genuinely excited to see my family enjoy learning another language which something I enjoy. When you’d hear a the notable ding from across the house, you’d feel a Pavlovian urge to open the app on your phone and continue learning. One-by-one in reverse age order, however, we all came to the same conclusion that the repetition and the notifications were tiresome. After using Duolingo for 100 days in a row, I uninstalled the app.

I’ve enjoyed noodling on Japanese, Piano, Spanish, German, Korean, Esperanto, and Klingon… and perhaps I will again one day, but for now it’s become another to-do during the day. The lessons were too repetitive and slow for me, a person who wants to flex a part of my existing memory and not learn from scratch. I can only hear about green tea so many times. Your experience might be different, but if I could find a “Practice Only” version of Duolingo without the engagement machine attached and a little less repetition, I think that would be the right fit for me.

It’s been a couple years of working full-time on Luro and we’ve travelled through at least three (or four?) different distinct architectures. If that sounds like a lot, I’d agree. It’s been educational to say the least.

I think it’s interesting to think about how apps grow and adapt over years of contributions, so I thought I’d share how we evolved Luro. Each refactor and re-architecture was a considered choice involving the entire team and balancing business and customer needs at the time as well as maintaining new feature velocity.

Here is the great retelling…

v0: The Not-so Serverless Jamstack Hybrid Prototype

• Customer Need: Ability to preview application
• Internal Need: Prove idea could work

The prototype version of Luro was a Serverless Nuxt app deployed entirely on Netlify. Each CRUD operation was its own serverless function that connected to our Postgres database on Digital Ocean. Netlify and its branch deploys allowed for rapid deployment and the ability to spin up demo instances at a custom subdomain as we shopped the idea around.

This was a great proof of concept but we soon hit big pain points. The biggest hurdle was that the serverless functions for all our endpoints were taking upwards of 20 minutes to build. That led to flaky deployments so we combined all our serverless functions into an Express app inside a single function. That took 5 minutes to build. This approach worked until…

Some features (e.g., Lighthouse) didn’t fit within Lambda’s size limitations (69 MB at the time) and our tasks were too long for background functions. The solution was to standup a small Node service that could handle longer tasks. Each Lighthouse run generates about 2 MB of JSON data so we stored that inside a MongoDB that sat inside the Node server.

A lot of moving parts but it worked enough to start having conversations with customers and investors.

v1: The Single-tenant Supermodel Monolith

• Customer Need: Isolated deployment environments
• Internal Need: Reduce number of servers and services

Our first batch of potential (enterprise) customers expressed a need to deploy the app behind their firewall. Looking at our Nuxt + Express API inside a Netlify Function + Node + Postgres + MongoDB franken-app deployed across two separate web hosting platforms, we started exploring a Docker setup to bundle all the moving parts.

This was an opportunity to simplify! And simplify we did.

• We merged the Nuxt, Express, and Node app into a single app server. This simplified the Docker setup and allowed us to start server rendering Nuxt for a performance boost.
• We also simplified our content model to a single database table. Before our content types (prototypes, user tests, research, pages, etc.) were in their own table but their schema was nearly identical (id, title, description). That separation is good until you need to duplicate a model and its views or roll a feature out across all models and views. We made the decision to use a single “supermodel” approach where all content types were in the same table.
• We eliminated MongoDB from the stack. One major challenge was our task queue (agenda) had a hard-dependency on MongoDB. Through some effort we moved over to graphile-worker and used a json field type in our PostgreSQL to store the big blobs of JSON.
• To make client responses smaller we stripped out the unused parts of the Lighthouse report and streamlined it from 2 MB to 30 KB per report.
• To smooth out customer deployments, we built a Terraform script with a CLI interface to automate building isolated environments on Digital Ocean with an app server, database, S3 bucket, as well as adding a new DNS record to give instances their own vanity subdomain.
• We moved the application off of Netlify simplified our hosting situation. On the downside, in the move to Digital Ocean we lost our branch deploy strategy. We propped up a staging server but it wasn’t the same as an automated branch deploy.

After all these improvements the app felt like a lightweight machine.

Docker wasn’t utilized well but it made an easy pathway for deploying to Digital Ocean. I’m glad we didn’t invest too much into Docker, because over time it became a bottleneck we’d have to rip out.

v2: The Multi-tenant Monolith

• Customer Need: Reduce onboarding friction
• Internal Need: Less manual labor in setting up, tearing down, and updating instances

Through some positive investor pressure and some exhaustion setting up customer installs, we decided the app should be more self-service. This was a big undertaking.

While terraforming a new customer install wasn’t hard (CLI command + 10 minute build), the customer feedback loop was too long. Someone would sign up for Luro, then we’d email them later, then they’d say “yes I want it”, then it’d take 10 minutes to set up, then we’d send an email “okay it’s ready”… that experience cut the winds of excitement out of the sales funnel.

To make this work, we needed to create the idea of a Team in Luro and make everythign belong to that team. Having Teams meant having a new permission system, authentication system, and invitation system. But the biggest need was to design and build new onboarding flows throughout the application because we wouldn’t be doing “white glove” installs anymore. This was a big lift for a small team.

At the end of the three month sprint we made an impromptu decision to move from Digital Ocean to Render. Our Docker deploys were taking 20 minutes to build the image + 10 minutes switch over to the new image and stand up the environment. That long feedback loop was killing us with design reviews. We made the jump to Render, killed our Dockerfile, and got back to 5 minutes deploys and regained the ability to have Preview Deploys for each PR. That was a slam dunk win-win.

This refactor was a lot of work (and re-work) but thanks to two full-time hires we were ready to begin our Private Beta by the end of the summer.

v3: The Multi-tenant Microservice Monorepo

• Customer Need: Application uptime, reliability
• Internal Need: Observability and isolation of services

As people signed up and began to use the application we discovered a new set of problems. If one CPU intensive service (e.g. Lighthouse) had a problem during its run, the entire application server would fall over causing cascading service failures. The “stampede” of failures made it difficult to debug the source of our problems.

The biggest improvement in observability was converting our monolith into a microservice monorepo using Turborepo. Using Render’s Blueprint (Infrastructure as a Service) we could use YAML to configure servers for each app and cronjob in the apps/ folder.

We had some intermittent problems with graphile-worker queue crashing so we pivoted to RabbitMQ hosted on CloudAMQP as a message queue. RabbitMQ is like Redis but a little bit more robust and a lot less “build your own” functionality (monitoring, etc). Our apps or cronjobs would post messages to specific queues and then the services would process those specific queues.

With our services properly split up, we spent more time improving our logging to ensure we had end-to-end error reporting. Each service logged to its own bucket which was possibly overkill but if an error showed up in the Lighthouse bucket we could pinpoint which part of the application failed.

And this is the shape of the application today. It’s a pretty elegant machine. We’re far from the days of servers crashing every weekend. We’ve worked hard to stabilize the application and now it doesn’t make much more than a peep.

101 things I’ve learned about software architecture

I’ve learned a lot about building and organizing large software projects through this. If I had to do it all over again, I don’t think it would be much different given the information we had at the time. With the power of hindsight, we probably could have skipped one or two evolutions but that was less of a lack of engineering imagination or foresight and more product needing clearer business objectives. If we had dropped the “white glove” idea earlier or had a narrower market (TAM/SAM/SOM) we could have spotted opportunities further out.

I learned hundreds or thousands of lessons from all this but here’s my Top 3 key takeaways…

1. It’s always a “100 duck-sized horses vs one horse-sized duck” problem

There’s an old internet question about “Would you rather fight 100 duck-sized horses or one horse-sized duck?” Well. Software is a lot like that. You expand, then consolidate, expand, then consolidate. Over and over. For example…

• The Jamstack app = 100 duck-sized horses
• The Supermodel monolith = 1 horse-sized duck
• Single-tenant deployments = 100 duck-sized horses
• Multi-tenant app = 1 horse-sized duck
• Microservice monorepo = 100 duck-sized horses

Even on the component level, you don’t want a bunch of bespoke tables, so you create a <SuperTable/> component but then you need a bunch of <BespokeCell/> components to slot inside the table. At a certain point you can’t reduce complexity any further and you’re left shifting complexity around and reshaping it. The goal is to end up with something less complex or more predictable.

I think the correct answer is 100 duck-sized horses, but you need good systems in place for managing that. And 5 to 10 is probably a better number than 100.

2. Monorepos are pretty great

For managing all those small apps, I recommend Turborepo! Monorepos make it easy to break up your application into separate services or shared packages (like a design system). You can start the entire system with one command from the terminal. You have less mysteries and phantom configs menacing your codebase when everyone is working in the same neighborhood. You can maintain velocity by changing an upstream API service and the UI layer in a single PR with less flight control.

We had hints of a service-oriented architecture in our v0 Node Background Server, but it existed outside (not alongside) the UI application. Monorepos are not without their issues, but I’d reach for Turborepo again for applications that don’t fit inside one folder on one server.

3. I over-index on the belief that we can fix it later

I’m a firm believer in iteration and believe that in most situations we can fix issues later. That can be an admirable quality, but it’s a choice to create technical debt. At times the technical or style debt I created blew up and we spent more time teasing out an abstraction later on. If we had “done it right” the first time we would have saved time but we also didn’t have enough information to make a proper abstraction and would have fell victim to YAGNI (You Ain’t Gonna Need It) over-optimization.

In the end there were microadjustments we could have made but with the pace of startup life (groan) you’re always in a hurry to do the next thing, we balanced that fairly well.

Just build websites

This whole experience has taught me one valuable lesson: You learn a lot by doing. You learn a lot by doing it the long, hard, stupid way. And you learn a lot by working with other talented people.

Thanks to everyone who has helped and participated and contributed code over the years: Trent Walton, Reagan Ray, Julian Jones, Scott Robbin, Kyle Zinter, Emmett Naughton, Eli Van Zoeren, and René Merino.

I’m pretty hot on Scroll-Driven Animations! What a wonderful idea that we can tie @keyframe animations timelines to scroll positions. And I’m sure the creators of it thought long and hard, because the API makes a ton of things possible. It’s not just “how far the entire page has scrolled”, although that’s possible. The progress […]