Tags: ui

How to Make Websites That Will Require Lots of Your Time and Energy - Jim Nielsen’s Blog

1. Install Stuff Indiscriminately From npm
2. Pick a Framework Before You Know You Need One
3. Always, Always Require a Compilation Step

Frame of preference – Aresluna

Marcin has outdone himself this time. Not only has he created an exhaustive history of the settings controls in Apple interfaces, he’s gone and made them all interactive!

While it’s easy to be blown away by the detail of the interactive elements here, it’s also worth taking a moment to appreciate just how good the writing is too.

Bravo!

Nuberodesign > Blog > Designing for the Eye

I love the interactive illustrations in this article filled with type and architecture nerdery!

Kelp

A UI library for people who love HTML, powered by modern CSS and Web Components.

No build frontend is so much more fun

The joy came flooding back to me! It turns out browser APIs are really good now.

But what if I really want a faster horse? | exotext

Overall, consistency, user control, and actual UX innovation are in decline. Everything is converging on TikTok—which is basically TV with infinite channels. You don’t control anything except the channel switch. It’s like Carcinisation, a form of convergent evolution where unrelated crustaceans all evolve into something vaguely crab-shaped.

A Web Component UI library for people who love HTML | Go Make Things

I’m obviously biased, but I like the sound of what Chris is doing to create a library of HTML web components.

Petition · Defend the Internet Archive - United States · Change.org

Signed!

We, the undersigned, call on the record labels and members of the Recording Industry Association of America (RIAA)—including UMG, Capitol Records, Concord Bicycle Assets, CMGI Recorded Music Assets, Sony Music Entertainment, and Arista Music—to drop your lawsuit against the Internet Archive.

Beach daydreams, lost at sea (Interconnected)

Matt’s beach thoughts are like a satisfying susurrus in my RSS reader.

AI ambivalence | Read the Tea Leaves

Here’s the main problem I’ve found with generative AI, and with “vibe coding” in general: it completely sucks out the joy of software development for me.

I hate the way they’ve taken over the software industry, I hate how they make me feel while I’m using them, and I hate the human-intelligence-insulting postulation that a glorified Excel spreadsheet can do what I can but better.

I’ve been banging on for a while now about how much I’d like a declarative option for the Web Share API. I was thinking that the type attribute on the button element would be a good candidate for this (there’s prior art in the way we extended the type attribute on the input element for HTML5).

I wrote about the reason for a share button type as well as creating a polyfill. I also wrote about how this idea would work for other button types: fullscreen, print, copy to clipboard, that sort of thing.

Since then, I’ve been very interested in the idea of “invokers” being pursued by the Open UI group. Rather than extending the type attribute, they’ve been looking at adding a new attribute. Initially it was called invoketarget (so something like button invoketarget="share").

Things have been rolling along and invoketarget has now become the command attribute (there’s also a new commandfor attribute that you can point to an element with an ID). Here’s a list of potential values for the command attribute on a button element.

Right now they’re focusing on providing declarative options for launching dialogs and other popovers. That’s already shipping.

The next step is to use command and commandfor for controlling audio and video, as well as some form controls. I very much approve! I love the idea of being able to build and style a fully-featured media player without any JavaScript.

I’m hoping that after that we’ll see the command attribute get expanded to cover JavaScript APIs that require a user interaction. These seem like the ideal candidates:

• button command="share"
• button command="fullscreen"
• button command="print"
• button command="copy"
• button command="install"

There’s also scope for declarative options for navigating the browser’s history stack:

• button command="back"
• button command="forward"
• button command="refresh"

Whatever happens next, I’m very glad to see that so much thinking is being applied to declarative solutions for common interface patterns.

Cool native HTML elements you should already be using · Harrison Broadbent

dialog, details, datalist, progress, optgroup, and more:

If this article helps just a single developer avoid an unnecessary Javascript dependency, I’ll be happy. Native HTML can handle plenty of features that people typically jump straight to JS for (or otherwise over-complicate).

I really like Brad’s new project, Cold Album Drumming:

Brad Frost plays drums to the albums he knows intimately, but has never drummed to before. Cover to cover. No warm-up. No prep. Totally cold. What could possibly go wrong?

I got a kick out of watching him play along to Radiohead’s In Rainbows and The Decemberist’s The Crane Wife.

I was really into The Decemberists in the first decade of the 21st Century. I remember seeing them in a long-gone Brighton venue more than twenty years ago.

But I kind of stopped paying attention to them after they released The Hazards Of Love. Not because I didn’t like that album. Quite the opposite. I love that album. I think in my mind I kind of thought “That’s it, they’ve done it, they can go home now.”

It’s exactly the kind of album I should not like. It’s a concept album. A folk-rock opera.

When I was growing up, concept albums were the antithesis of cool. Prog rock was like an insult.

You have to remember just how tribal music was back in the ’70s and ’80s. In my school, I remember the divide between the kind of people who listened to The Cure and The Smiths versus the kind of people who listened to Prince or Queen. Before that you had the the mods and the rockers, which in hindsight makes no sense—how are The Who and The Jam not rockers?

Looking back now, it’s ridiculous. I get the impression that for most people growing up in the last few decades, those kind of distinctions have been erased. People’s musical intake is smeared across all types and time periods. That is a good thing.

Anyway, a folky prog-rock opera like The Hazards Of Love is exactly the kind of thing that past me would’ve hated. Present me adores it. Maybe it’s because it’s got that folky angle. I suspect Colin Meloy listened to a lot of Horslips—heck, The Decemberists even did their own mini version of The Táin.

Speaking of mythic Irish language epics, I really like John Spillane’s Fíorusice:

Fíoruisce - The Legend of the Lough is a three-act Gaelic folk opera composed by Irish artist John Spillane. It is a macaronic or bilingual work. The work is an imagined re-Gaelicization of the Victorian Cork fairytale Fior-usga collected by Thomas Crofton Croker in the 1800’s and published in his book Fairy Legends and Traditions of the South of Ireland (1828). The story is a surreal tale culminating in a drowned kingdom, which as lore tells us, becomes The Lough in Cork city as we know it today. They say, you can see the tops of the underworld towers on a clear day and hear the music of their big party on Midsummer’s night.

Yup, it’s another concept album. And funnily enough, past me was not a fan of John Spillane either.

I first heard him when he was part of a trad band called Nomos in Cork in the early ’90s (the bódhran player’s mother was friends with my mother). I really liked their tunes but I thought the songs were kind of twee.

Over the years, the more of his songs I heard, the more I understood that John Spillane was just being completely open and honest. Past me thought that was twee. Present me really respects it. In fact, I genuinely love his songs like Johnny Don’t Go To Ballincollig and All The Ways You Wander.

And then there’s Passage West. It’s a masterpiece. I might be biased because Passage West is the next town over from Cobh, where I grew up.

So yeah, Fíorusice is something that past me would’ve disdained:

1. a concept album by
2. John Spillane in
3. the Irish language.

Present me is into all three.

It’s Bandcamp Friday today. I think I know what I’m going to get.

Building WebSites With LLMS - Jim Nielsen’s Blog

And by LLMS I mean: (L)ots of (L)ittle ht(M)l page(S).

I really like this approach: using separate pages instead of in-page interactions. I remember Simon talking about how great this works, and that was a few years back, before we had view transitions.

I build separate, small HTML pages for each “interaction” I want, then I let CSS transitions take over and I get something that feels better than its JS counterpart for way less work.

Monzo tone of voice

Some good—if overlong—writing advice.

• Focus on what matters to readers
• Be welcoming to everyone
• Swap formal words for normal ones
• When we have to say sorry, say it sincerely
• Watch out for jargon
• Avoid ambiguity: write in the active voice
• Use vivid words & delightful wordplay
• Make references most people would understand
• Avoid empty adjectives & marketing cliches
• Make people feel they’re in on the joke – don’t punch down
• Add a pinch of humour, not a dollop
• Smart asides, not cheap puns and cliches
• Be self-assured, but never arrogant

Taking RWD To The Extreme — Smashing Magazine

Some really great advice here:

• Use native layout systems
• Start with semantic HTML
• Use fluid type with fluid space
• Always bet on progressive enhancement
• Trust the browser
• Ditch the “physical” CSS

UI Pace Layers - Jim Nielsen’s Blog

Every UI control you roll yourself is a liability. You have to design it, test it, ship it, document it, debug it, maintain it — the list goes on.

It makes you wonder why we insist on rolling (or styling) our own common UI controls so often. Perhaps we’d be better off asking: What are the fewest amount of components we have to build to deliver value to our users?

una.im | Updates to the customizable select API

It’s great to see the evolution of HTML happening in response to real use-cases—the turbo-charging of the select element just gets better and better!