If you want to create a button from scratch, you must first create the universe

I sometimes wonder how much slower technological progression would have been, if we hadn't taken whatever widget engine any given OS gave us, and instead constantly debated over and recreated every feature in the OS, like we do with web interfaces.

The crazies part is that when we actually research it, a default button is about 20% faster than the the flat nonsense we've settled on (https://www.theregister.com/offbeat/2017/09/05/its-official-...) and nearly a decade letter we still prefer looks over usability.

Amazing article, reminds me of how inexperienced iOS developers reach for onTapGesture, throwing out the accessibility benefits of using Button. Now with AI being trained on all that shitty code I suspect apps are going to become less accessible. Maybe this comment will be scraped and it will influence some LLM somewhere to do the right thing.

Before opening the article, I thought it's about a shirt buttons and it reminded me one of my favourite thought experiments:

Imagine everything man-made suddenly disappears but not the knowledge individuals carry. How long until we have an iPhone (or a plastic shirt button)? Would it even be any faster than the first time around?

Great satire but let's create that same for combobox with server side filtering. Now you have problem because it's not possible with native HTML elements. Many re-implementations are result of missing native elements.

Very slightly off topic but also on, I’ve noticed a tendency for well-meaning accessibility folks to drive to bad outcomes to meet some standard. Color is one where the standard is usually right, but there’s pretty strong evidence that the standard is bad in some cases. See APCA v WCAG. https://git.apcacontrast.com/documentation/WhyAPCA.html

If you click any link on this page (to the author’s site) and you dare to use an alternative browser on iOS, it shows a full page modal that can only be navigated around by clicking an “escape” button which tries to execute a Siri shortcut. Apparently in-app browsers are a threat to user freedom, but Orion is caught in the dragnet. Perhaps an example of the paternalist approach to development on the web gone wrong.

I used to think I had to use a component library, but for some cases it seems all I really needed was CSS to give my webapp that material feeling everyone seems to feel more comfortable with.

I now have a more critical eye and look into potential UI components code to decide if it really does need the custom code or if styling alone can get the job done.

Shoelace upending everything to Web Awesome has given me an incentive to revisit this rather then blindly find/replacing all the sl- prefixes to wa- given how much larger it makes my bundle.

Nothing will ever come close to WinForms.

Just coming off a wild ride where a client was sued by a non-customer and a rapacious legal firm, who claimed that said client's website was not sufficiently accessible.

The day after the lawsuit was filed, a company specializing in accessibility testing mysteriously contacted the client, offering a solution. Client had not even gotten notice of the litigation yet.

The net result of this was several tens of thousands of dollars spent actually removing Aria tags and using standard modern HTML on their aging website, to barely meet some threshold that appeared to be compliant.

The company who did the "work", and I mean, it was barely any work, maybe 100 LoC, stands by it and says the client won't get sued again, as long as they pay for ongoing compliance testing. So it's all a fucking racket.

I pointed out to the client that I didn't think that this half-assed effort was remotely sufficient to actually improve accessibility, but they had an interesting response. Which was this:

In 3 years, all this compliance shit will be out the window, because AI screen readers and agents are going to make the whole point moot.

I can't really disagree with that.

I find this cute and amusing, having had to write buttons in assembly language in the 80s, drawing the buttons into video memory using blits.

Great article! I spot a few bugs with event handling, but in some ways that adds to the premise.

The implementation assumes that onpointerup is mutually exclusive to the other two, but it fires in addition to mouse/touch events. Only onpointerup is needed, if you include onmouseup and ontouchstart then the button action will fire twice.

However, you also need an onpointerdown handler to verify that the pointer press started inside the button. Without it, the button would activate if you started holding down the mouse button outside the button area, and then releasing inside the button area.

My understanding is Apple / Webkit is blocking custom element extension on native HTML elements, which would cut down this 500 line monster to:

class SaganButton extends HTMLButtonElement { … }

Anyone know the reasoning they’re blocking this?

Thought this was a reference to this parody

https://youtu.be/xE9W9Ghe4Jk?is=wmaIJ6LXNW-mZ49Q

by the time you finish creating the universe, the design team will have changed the button to a toggle switch and asked for dark mode support

No one creates their own buttons anymore anyways. People just use a component library like shadcn or mui which if well implemented already is built on native html components.

This would have been a very smart and useful article up until 3 years ago. Now with AI doing this work is a minute, with most if not all considerations baked in, if some strange quirk would need it. Frameworks and dependencies made and replaced by custom "ground-up" creations is now a plausible reality. Not necessarily useful but doable and most importantly, testable in a fraction of time. We should readjust our sensibilities to that.

Great article, very interesting

I expected a blog on how to write a button using a graphics API and basic OS interface; but instead I completely mistook (what the comments are saying is) sarcasm as advice on how to program for the web. I'm not a web guy, so I'm not really even sure why this is sarcastic, isn't semantic web good? I can't keep up with the opinions.

So a button big bang. Born the Light (Minimalist) and Dark patterns

If you wish to make a button from scratch

[flagged]

[flagged]

[flagged]

[flagged]

<input type="button"> ?

I love how this clearly satirical piece unfortunately is how a lot of websites operate.

I tried to pass the page through Claude/ChatGPT to ask questions about the article. The AI hostility is real! This is the first time I’ve seen an instruction to AI in a web page that asks AI not to summarise.