“Modern” web design antipatterns

Comments

I am so fucking sick of modern web design where standard HTML form elements are reimplemented using <div> and Javascript.

For example: my mortgage provider just unleashed a new web design on the world. Functionally it’s identical to the old website, but it looks slightly shinier. It’s also completely non-functional for me.

When I try to log in, it gives me my wish-it-were-two-factor “secret question.” I enter my answer. I press Enter, and nothing happens. So I click the submit button – which is, as it turns out, a <div> with attached JavaScript. That JavaScript changes the <div> text to “please wait…” and then it sends off an asynchronous API request. When it gets the response from the server, it then changes the location URL in my browser.

Congratulations on reimplementing <form> the long way around!

Oh, and this process took way longer than it needed to, and I thought maybe it wasn’t working at all. So I opened up their contact form – which, as it turns out, only replaced the page content with that because of course everything’s a “single page application” now. I started filling it out, and when the first form submission finally came back, oops, suddenly I’m logged in! (Meaning I’ve now lost the contact form I was already halfway done filling out.)

So I opened up the contact form again in another tab, and found that I couldn’t tab into the requisite “state” drop down box (because of course I need to give my city and state to provide website feedback, for some reason). So I clicked on it, and tried typing “wa” – and nothing worked. It didn’t jump down to “Washington.” It didn’t even jump to “Washington” then back to “Alaska.” Oh, and of course cursor keys didn’t work either – I had to use my mouse to scroll and click and this hurts my wrist and is slow and error-prone. (Oh and I should add that there was no scroll bar on the selection box either, the expectation was that I’d know to use my scroll wheel and be able to! This is not something you can rely on!)

Because it turns out that the dropdown box, rather than being a <select>, was a fucking <div> with JavaScript to set the value. And doesn’t have any keyboard access. For bonus points, they invented some HTML tags like <dropdown> to contain it. Why?! Standards exist for a reason! What happens in some future HTML verson where the <dropdown> tag becomes a thing? Except it wouldn’t because fucking <select> already exists and has since HTML fucking 1 point 0.

Because, of course, they reimplemented <form> and <select> the long way around.

Why the fuck do people make their lives harder like this? Peering into the page source, everything was obviously built using Angular, which is just… bad. Really bad. I see so many Angular sites that do this. And there’s absolutely no reason for most Angular sites to be based on Angular.

It’s so maddening. You have to do more to get less functionality, that would already be handled by the browser in a cross-platform, humane, accessible manner!

So I sent them this message on their contact form:

Hi, your new website doesn’t function correctly in a number of web browsers, including Safari on macOS. After receiving the challenge question it simply hangs for several minutes. Also, your contact form no longer follows accessibility guidelines and doesn’t support keyboard entry for people with e.g. mobility impairments, and I suspect it won’t work correctly with many screen readers either.

Please don’t reimplement basic browser functionality; for example, there’s no reason for the <div class="dropdown"> with added JavaScript when browsers already have <select> widgets which work perfectly fine.

I bet they get back to me with something like “We apologize, but we only support the Chrome browser. Please download it at google.com/chrome” or something. Because we learned nothing after the whole debacle that was MSIE 6, apparently.

Anyway. Fuck modern web design. Make your shit out of plain old HTML. Seriously. Please. You can build asynchronous, self-updating sites using standard JavaScript and basic DOM methods without a lot of work, and that’s only in the case that you need to – and you probably don’t.

Not everything needs to be a fucking single-page “app,” for fuck’s sake. It buys you nothing except for a bad user experience when things don’t go perfectly.

Read more…

Sleep diagnosis

Comments

So, after many years of being aware of a problem with my sleep, I finally saw a sleep specialist. It was good to learn that whatever is going on can be figured out and treated.

What’s really frustrating is what led to me taking this long, and how much I’ve been shamed for having this disorder and how I’m yet still being shamed for having not taken care of it sooner.

Read more…

Plans for 2019

Comments

So, it’s a new year, huh.

Might as well share some brief outlines of what I hope to accomplish this year.

Read more…

Mobile Blogging with Publ and CodeAnywhere

Comments

Right now I’m sitting bored in a waiting room, so I decided to give CodeAnywhere a shot as a means of editing entries directly on my site, since that’s a use case I’ve mentioned as a possibility for the future.

Here are some of my observations as I run across them while writing this entry.

Read more…

Some more site template update thinguses

Comments

I’ve updated the Publ-templates-beesbuzz.biz repository, and also made it a lot easier for me to keep it up-to-date.

I also made it easier for me to put in webmention likes and stuff for things. And since this site is configured with fed.brid.gy support, maybe I can reply to Mastodon comments, like this one, which I have also marked as a “like” in this entry.

Anyway, boost it if you want to.

Update: fed.brid.gy continues to not actually behave in a way corresponding with how I expected. Oh well.

More Authl thoughts

Comments

So, thinking about things more, the “profile URL” scheme doesn’t make sense for pure OAuth endpoints like Twitter, Facebook, etc. I’m thinking the API should provide two discovery mechanisms: one for profile-type (OpenID, IndieAuth/RelMeAuth, Mastodon), and one for SSO-type (OAuth).

Read more…

More fun with Webmentions

Comments

I ended up writing a little embed widget to embed webmention responses/reactions into my blog posts. It all happens client-side, but so do Disqus comments so I figure that’s okay.

It only works with webmention.io as the webmention endpoint (although it could be modified to work with any endpoint that speaks the same query API), and I suspect Aaron might end up being a skosh annoyed with how I actually implemented it, but whatever. :)

Anyway, if you find any bugs with it or want to make improvements, for now you can submit an issue against the Publ website repository or you can just, like, comment here or something. Update, 7/9/2019 I have moved this into its own GitHub repository.