18 ms·

Just normal web things

610 points by vitplister 3y ago

archerx 3y ago
I agree with everything in this post and the thing that gets me the most is broken back buttons on ecommerce sits.
- xp84 3y ago
  And the mobile brother of that, the “half the things you do are now a slide-up-from-the-bottom modal, which has its own stack, so you get confused and accidentally go back irreversibly many levels when you inadvertently close it.”
Given_47 3y ago
> Stop hijacking my typical browser shortcuts for use in your own app I've seen this happen with ctrl + f for opening a custom in-app search bar. Ah the Discourse classic. But did you know if you hit ctrl+F twice sequentially you can override that annoying behavior!
ajimix 3y ago
Why bank websites remove the ability to paste? You have already copied the text when you realize you cannot paste. So what is the point? Writing things by hand are prone to errors and if your clipboard is poisoned you have already copied the stuff by the time you realize you cannot paste…
- epivosism 3y ago
  I always imagine there is an "intro to forms programming" which includes code to disable copy and paste, and its concepts now have thousands of descendants across the web, to the point that people start imagining it's a security measure and proactively copy it. I agree w/you and don't see the point in stopping users from pasting in the first place.
  - mgkimsal 3y ago
    I don't think it specifically violates any accessibility regulations, but preventing pasting has always come across to me as an accessibility violation.
- samwillis 3y ago
  I hate this so much, was registering for a new ISP the other day, they blocked paste in the password inputs and broke my password manger. Such an incredible bad decision from a security perspective.
  - drowsspa 3y ago
    Keepass is pretty cool when it comes to that, I can just invoke the auto-type on those situations
- Devasta 3y ago
  Not saying this is the case, but there was malware that would check to see if you had copied what looked to be a bitcoin account and replaced it with its own. https://techcrunch.com/2018/07/03/new-malware-highjacks-your-windows-clipboard-to-change-crypto-addresses/ https://techcrunch.com/2018/07/03/new-malware-highjacks-your... Something like that maybe?
  - klabb3 3y ago
    Yeah I also hate this but they have a point. Desktop clipboard is a shitshow. Any app can read it willy nilly, certainly if focused but I wouldn’t be surprised if it works in the background on some platforms. It is one of the prime candidates for a global redesign from scratch, including even physical keys (since copy-paste is so common, certainly more than say caps lock). All the APIs are riddled with decades of tech debt and are entirely platform-specific.
    - asaddhamani 3y ago
      Clipboard managers exist so it definitely can be read in the background on some platforms at least.
      - xp84 3y ago
        Aw man, now I’m sad because that means that’s the next thing Apple will nerf out of existence. I like my clipboard manager and I haven’t ever downloaded malware onto my Mac despite rarely using their crappy App Store. :( Stage 1: Everything is totally trusting. Viruses exist, and scanners exist to help you not download anything stupid. Stage 2: Locked ecosystems like iOS App Store, Platform Vendor claims their 100% diligence will protect you (and them) from all possible bad (or insufficiently-profitable) software. Apparently they weren’t satisfied Stage 3: Full Sandboxing and full enforcement of Platform Vendor’s blessed software source only. Now my computer, like my phone, will only ever have the exact, enumerated features the Platform Vendor blesses me with and I will like it or else. I am free to file a feedback on their website if I’d like a clipboard manager, and they may one day look at that feedback.
- bryanrasmussen 3y ago
  maybe they think criminals are too stupid to put a varying timer to make keypress times seem natural.
- bobbylarrybobby 3y ago
  This is why I have an automation on my computer to type out the clipboard character by character.
- bakugo 3y ago
  Not only does my bank's website not allow me to paste my "password", it doesn't allow me to type it at all. It's insane. Said "password" is just a 6 digit number (we're not allowed to set our own passwords, because 6 digits is definitely way more secure than the 16 character random strings my password manager generates) and it forces me to enter it using buttons on the page itself with randomized positions. No idea how any of this is supposed to help with security, if my device is already compromised to the point that all my keypresses and clicks are being logged, the attacker can probably also just read the password from the browser's memory...
  - earthling8118 3y ago
    It's time to find a real bank.
    - geraldwhen 3y ago
      If this is your line, you should pull your cash out of traditional financial institutions immediately. It’s a nightmare on the inside.
  - duderific 3y ago
    That's maniacal.
  - russelg 3y ago
    Is this ING? Sounds very similar to how ING does it.
    - undebuggable 3y ago
      Polish ING modifies IBAN on pasting it during bank transfer and forces to enter manually first two digits "for your security". They also disable IBAN selection in transfer summary view, so one cannot copy it and double check before confirming the transfer. ING seems to deploy the most arbitrary "security" measures found on most random blog posts and sprouted during the most brain-dead brainstorming meetings.
- extraduder_ire 3y ago
  IME, middle-clicking on a linuxy computer still works as expected most places. I use that far more often than real copy/paste.
- capableweb 3y ago
  Usually it starts with a company having issues with robot traffic. So they try a bunch of things to hinder the robot(s). They do something, the robot stops working, but after a while it comes back, it's a cat and mouse game essentially. One day, they (developers pushed by middle managers) disable copy-paste on the login page, and the robot temporary stops working, until a couple of days later, when the robot found a way around it. On to the next thing to do to stop the robot, but that previous "fix" is still there, with the thinking that "maybe that stops some of the robots", but it probably doesn't. But there it sits, some ~10-ish lines of JS that will hang around until rewrite v6 when they'll begin from the beginning, and some months/years later come around to disabling it once again. No, I'm absolutely not speaking from experience.
  - KirillPanov 3y ago
    Just give up. You can't win; you're going to get robot traffic unless everybody does something like Web Environment Integrity. Seriously. Just allocate your finite resources in a hierarchical 32-level binary tree based on bit prefixes of the client IP address. Exactly what the root DNS servers do. And exactly what the only mitigation for slowloris attacks does. Then get on with your life.
    - drowsspa 3y ago
      Honestly, robot traffic seems like an issue just because websites are horrendously inefficient. Hundreds of round-trips to external servers, languages that require some orders of magnitude more resources than needed... It shouldn't be so expensive to just serve a page, even considering robots
      - undebuggable 3y ago
        > Hundreds of round-trips to external servers, languages that require some orders of magnitude more resources than needed... It shouldn't be so expensive to just serve a page, even considering robots This is not a priority. The features are implemented by more abstraction, ie. TypeScript and web frameworks. Industry's low barrier to entry promotes studying frameworks, not technologies and standards enabling them. Anti-robot measures mostly prevent automated fraud and are there to ensure the ads are displayed, if the whole process will freeze your browser and eat your entire RAM they are fine with it.
- Falkon1313 3y ago
  It's to reduce security. Of course a long, random, unique password from a password manager is best for security, everyone knows that. So forcing people to instead use a short, easy-to-type, memorable password clearly couldn't possibly be anything else but an attempt to undermine the user's security and put their account at increased risk. That bank does not have your best interests in mind. With that in mind, it doesn't matter why they don't. So switch to another bank (or better yet, a credit union) that does.
- LatticeAnimal 3y ago
  Reminds me of treasurydirect.gov which presents you with a virtual keyboard and you have to click to type out your (case insensitive) password. It is insane
- undebuggable 3y ago
  The banks protect you from malicious clipboard manipulation by manipulating the clipboard content ("we let you paste but complete some digits manually") and/or entirely disabling pasting text into text fields. Yes, they employ at least one "security expert" who will elaborately explain you why it's better for your security.
p1mrx 3y ago
I'm aware of 5 operations that a standard link should support: - Left-click (obvious) - Right-click (context menu) - Middle-click (open in new tab) - Ctrl-click (open in new tab) - Shift-click (open in new window) Most sites support at least one of right/middle/ctrl-click, though sometimes you have to Duplicate the tab and then left-click. If none work, and duplicating the tab loses context, it's probably time to abandon hope and find another website.
- eyelidlessness 3y ago
  Note: if at all possible, don’t implement these yourself! You’ll very probably do it wrong for at least some users. For example, ctrl-click for new tab is platform specific: on macOS it should be cmd-click, and ctrl-click should open a context menu. Most if not all are or can be user-configurable, which might not be detected by JS. But the default behaviors will do the right thing unless you override them.
  - p1mrx 3y ago
    I'm the parent commenter and I approve this message.
- jezzamon 3y ago
  There's a set of events for mobile too, e.g. long-press should pop up menu
- Y-bar 3y ago
  Click-hold-drag is another one I use occasionally. For example to: * Save the link as a .loc file on the desktop * Open the link in a tab in another browser window, or another browser altogether. * Add it to a terminal prompt (e.g. curl/wget) (try it with some links on this site into the text box or your text editor of choice)
samwillis 3y ago
I think of this as the "appification of websites", we need to stop doing it. We need to move back to SSR and sprinkles of JS on websites. On the other hand web apps absolutely can play a little more with the UX if it provides value to the user. But if it's in the browser, some of this really do still apply. I'm all in on web apps, its a universally accessible platform for development outside the walled gardens of app stores. What we need to stop doing is treating every single website as an app! If you want your page to appear in search results on a search engine, it's not a web app it's a website.
- holoduke 3y ago
  On the other hand a good webapp can also be a website. Just matter of spending enough time on it.
- satvikpendem 3y ago
  > We need to move back to SSR and sprinkles of JS on websites. Fortunately with stuff like React Server Components, looks like we are moving back to sprinkling JS for websites, which I'm a big fan of.
  - grishka 3y ago
    Is using some form of React for web development mandatory now?
    - satvikpendem 3y ago
      Why would it be mandatory?
      - grishka 3y ago
        It was a sarcasm.
        satvikpendem 3y ago
        Not sure what was sarcastic about it...
lapcat 3y ago
[self-promotion] The article author appears to be using Windows, but on Mac and iOS there's StopTheMadness: https://underpassapp.com/StopTheMadness/ https://underpassapp.com/StopTheMadness/
- bobbylarrybobby 3y ago
  One of my favorite extensions!
Waterluvian 3y ago
This blog doesn’t touch on the actual issue at hand: businesses make business decisions, not engineering decisions. It’s easy to enumerate a bunch of technical asks and then blame their absence on technical reasons, because it doesn’t require any exploration of the business details. It stays in a nice, safe realm. To be clear, I personally agree with, and want every single item listed in this blog. I’m a big nerd. But I also recognize that I’m nowhere near anything resembling a typical user. What I want is probably not even on the radar of 99% of users of these websites. It’s easy to say, “I want X and having X would make me a happier user.” The real question is, “is implementing X an appropriate expenditure of resources if the goal is to build a profitable business?” Usually not. Most users don’t know or don’t care about X. Be careful with the nerd echo chamber we live in that makes us think these things matter to the common person. For all of this, one could argue, “yeah but they’re being foolish. Long term this is going to bite them.” You might be right! I think you’re right, too. But that’s a business position, not a technical one.
- kijin 3y ago
  For many businesses, there's a simple incentive that should make them care: SEO. Although Google and other search engines have said for more than a decade that their bots can execute javascript and navigate SPAs, the truth is that they are not going to simulate a click on every random element with onClick events attached. In many cases, they will not even execute any javascript. Even in 2023, <a href="URL"> is the best way to make search engines pay attention. Popular frontend development patterns have also made it nearly impossible to figure out the semantic structure of a page. Everything is a <div> now. But if you care about how your website looks in a search result, you might still want to designate some parts of the page as <main> or <article> and other parts as <aside> or <nav>. This is especially important if your website contains short user-generated snippets (like tweets) along with a lot of auxiliary information, as semantic tags make it easier for search engines to determine what the main content of each URL is. In short, many websites would still benefit from enforcing proper semantic markup, like we used to do in the good ol' days of the "no tables for layout" crusade. Now if the business doesn't care about SEO at all (an increasingly common attitude as websites become app-ified), there's always the atomic option: talk to the legal department about the possible consequences of ignoring accessibility.
jfarmer 3y ago
Love this. The way I think about it is that you assume a level of responsibility whenever you tinker with default affordances. Your "feature" isn't restricted to whatever narrow conception or intention you had when you designed it. It consists in the totality of a visitor's actual experience. If I change the logic of the the back button, I'm changing what the back button affords on this particular website and become responsible for whatever happens as a result. That includes confused and frustrated users saying "Screw you and your broken website." Or take, e.g., the way scrollbars work, which can be very browser-and-OS-specific. Are you sure you want to assume responsibility for that? How sensitive are you to the downside, really? Essentially, you're making your website speak a kind of creole. You've forgone any right to be upset if your visitors don't speak it and shouldn't be surprised if they persist in "misinterpreting" it. Forget about avoiding such "features" because you want to be nice to your visitors. It always seemed to me they offer limited upside and unlimited downside.
- loeber 3y ago
  Yep, this is exactly right. Websites benefit from design idioms that have been carefully crafted over many years. Every website that disregards these idioms makes itself harder to use because it doesn’t speak the same language as what the user is (perhaps without noticing) used to. I wrote about the loss of design idioms at length: https://loeber.substack.com/p/4-bring-back-idiomatic-design https://loeber.substack.com/p/4-bring-back-idiomatic-design
firefoxd 3y ago
One thing that happens when you learn to build web things using React before learning html, is that you don't care about links. When I joined my team, all links were buttons, random elements, or <a> with onClick. Nobody complained, but that meant ctrl click was useless, right click did not give you the options you wanted. This is the only thing I'm a dictator about. There is zero room for negotiation when it comes to links.
- cowsandmilk 3y ago
  I’ve run into this, but it is coming from the UX designer for the product. There is an organization component library, with a corresponding figma library. They insist on using the button component instead of the link component.
  - tough 3y ago
    <Button as={Link} />
  - nosefurhairdo 3y ago
    Most react component libraries correctly return <a> tags for <Button /> components with an href property, while still styling them as buttons. This preserves the expected link behaviors while satisfying the design obsession with buttons over traditional links.
  - chefandy 3y ago
    Specifying button-looking elements for regular navigation actions is definitely wrong, and nearly all UX and UI designers will understand that. If it triggers an action with consequences, or even navigates users to a single-purpose page where they can select options or confirm the action-- e.g. 'cancel subscription now' or similar-- then it probably should look like a button.
- tough 3y ago
  But not all buttons are links surely?
butterNaN 3y ago
Another reason why we shouldn't lose control of our own browsers. Today I can set my own fonts, block elements, basically re-style everything once it arrives at my browser, tailored to my accessibility preferences.
amelius 3y ago
We need a tool that can visit a website, build a summary out of it, and presents it in a standard way, customizable by the user. Like reader mode, but on steroids.
- RGBCube 3y ago
  AI powered Reader Mode, there's your startup idea.
- rakenodiax 3y ago
  Kagi has this feature, super useful
gxs 3y ago
I hope everyone reads this and listens. I’ll always long for the days of simple websites but I know they are gone and that’s fine. The least we could do, however, is preserve some modicum of standards and usability. I’ll throw in ability to open images/media as standalone files to this list.
brigadier132 3y ago
> nevermind the basic accessibility requirements that are often missing like alt text on images It's easier than ever to make websites accessible and a lot of these new tools enable this. Like throwing linter errors when alt text is not set on images. A lot of the things described in this article are issues with a lack of skill or maliciousness from the developer or whoever hired them. That copy paste thing? I almost always notice it on the websites of legacy book publishers. I think you can pretty easily guess their motivations. I dislike react for other reasons but the majority of developers having shallow knowledge of how the web works is not one of them. That's just nature, the most common thing always ends up going to the lowest common denominator. Chocolate: hersheys or nestle, coffee: nespresso pods, food: mcdonalds, programming: javascript...
- nosefurhairdo 3y ago
  Can confirm the pain of working on a react application where 90% of the code was written by folks with shallow web knowledge. Not the fault of React.
- blorenz 3y ago
  I'd wager with the rise of LLMs then we'll get an immense rise of accessibility as the LLM can interpret a page in context of what the user requires.
  - nosefurhairdo 3y ago
    Then you may be underestimating accessibility guidelines or overestimating LLMs. The problem with inaccessible web applications is precisely that they cannot be interpreted programmatically, which would inhibit AI from performing this interpretation. An inaccessible website would be equivalent to a low quality prompt for an LLM.
rado 3y ago
The crazy thing about the rampant inaccessibility is that it’s clearly illegal and discriminatory and nobody cares. Any success stories about convincing product managers to stop it?
agumonkey 3y ago
It's hard to focus on this, even though I agree 100% with the whole list, when you're developing on react.
- shadowgovt 3y ago
  I'd be interested in more information on the difficulties you've encountered. I do most of my web dev in React and I don't remember encountering difficulties with these items.
  - agumonkey 3y ago
    You just get sucked in state/props and integrating ui libs and the common ergonomics start to slip from your mind.
    - shadowgovt 3y ago
      Ah, I see what you mean. My common experience is that people I work with build the a11y requirements into the components as required props so you can't ignore them.
      - agumonkey 3y ago
        You're right, but I know I made some crippled links at times you know.
austin-cheney 3y ago
There are really only two problems here, and they are as old as the web itself: 1) Low Expectations 2) No definitions, standards, baselines defining people and/or practice As I have been looking at job posts quite a bit lately everything now is a "Senior Fullstack Engineer" position. This is just so lazy. Then you dive into it and what they really want is some combination of Java or Python, R, Spring, and SQL. Not fullstack. You are wasting peoples' time and worse you are advertising to the public that you either don't understand the technology or just don't care about it. Sigh. In programming we call this an "X/Y" problem. You want to solve for "X", a desired end state. Instead of X all you can talk about is "Y", the approach you wish you could take. This is a tremendous anti-pattern. Its also why employers are getting 500 resumes for open positions and nobody seems qualified. Instead start with the goal: "We are hiring to build a client/server app that can do '_____'. We expect candidates to write/support features X, Y, Z. Your constraints are: A, B, C." The reason why companies don't do this is typically because they have no idea what they are actually doing and they have also gone down several wrong paths already and have a bunch of broken technology to support. That's why they call this tech debt. Then when it comes to interview time the employer and the candidates know exactly what the goals are and can ask the appropriate questions to appropriately eliminate each other. Otherwise, its just some horrible combination of a blind date and a game show where an audience gets to ridicule the contestants. Here is a quick hypothetical example: We are hiring to build a highly distributed media conferencing application. Developers are expected to write TypeScript, pipe stream data from sockets, work both in the browser and the server, and write test automation. Operating constraints include WCAG AA conformance, a privacy conformance checklist drafted by our legal department, and various performance considerations targeting both execution speed and network latency. Ideal candidates will demonstrate solutions during interview time for network latency, writing application logic in the browser, and state management of streamed data.
Kiro 3y ago
> Let me copy text so I can paste it. I'm guilty of doing this because in my game people kept accidentally double clicking and selecting all the text in the UI. What are the best practices around this?
- noduerme 3y ago
  There's nothing wrong with that. A game UI is where you should block text selection. Web-based games that let you accidentally select UI text look unprofessional. I think the author is talking about informational or business apps.
  - yonatan8070 3y ago
    I was reading some article a while back, and as I read I like to highlight what I'm reading with my mouse, but that particular website decided that when I try to highlight text, the appropriate reaction from the site would be a tooltip saying that highlighting is not allowed... So I opened the devtools and copied the whole thing out of spite
    - noduerme 3y ago
      At least they were being honest about the design decision by actually telling you. Just as a matter of polishing my apps, I usually go through and make sure that pages that might be printed or PDF-copied will print well, that everything selects where someone might want to copy text, and doesn't select where they're clicking any UI element resembling a button. In other words, I try to make all text fields selectable and printable, and everything else act as a graphic (even if it has some text on it).
    - ricardo81 3y ago
      I've seen pages that listen for the console being opened, and would redirect to a Rick Roll when you did. It was a dodgy site though.
      - noduerme 3y ago
bob1029 3y ago
> Let me zoom in on my browser without the website getting all out of whack. I just want to be able to read. This is my new OCD obsession when doing layout. I will keep my browser at 250% zoom for the first 3-4 hours of development. Periodically, I will spot test things like tables up to 500%. I had no respect for the humble non-breaking space or automatic table layouts until I started doing this.
Cyykratahk 3y ago
I believe most of the issues with broken link behaviour results from the lack of higher-level methods to override the default link behaviour. An example: I don't really want to add a click event listener to a link to make it display in a modal (or whatever). Because this event is too low-level and now my listener needs to check modifier keys. What I really want is to somehow tell the browser "if the current window URL is about to change via this anchor element, call this function instead". The user is still free to open their links in new windows or tabs and my code will not be triggered for those cases. A CSS example: I don't really want to set cursor images for every element and pseudo-class. I'm forced to list every element that uses the cursor I'm overriding. What I really want is to tell the browser "use this custom cursor image wherever you were going to use the default (hand/wait/resize/etc) cursor". My code would then be future-proofed for new elements/UI. Sometimes I feel that certain browser APIs suffer from the XY problem.
- josephg 3y ago
  > What I really want is to somehow tell the browser "if the current window URL is about to change via this anchor element, call this function instead". This is pretty doable using javascript - just register an onclick on the <a> tag and have your event handler cancel the default navigation behaviour. Your website will then continue to work great even if the user has javascript disabled. And all the built in browser behaviour (like the right click "link" menu, and ctrl+click) still works perfectly. That said, this is a pretty obscure "trick". It would certainly be nice if the DOM API made this easier to do.
  - kevincox 3y ago
    In my experience in this case you need to explicitly filter out middle-click, ctrl-click, cmd-click and whatever other features the browser may offer. Otherwise you will accidentally prevent them too. I would love if there was a more specific event that avoided this problem.
  - wwweston 3y ago
    Is there really anything easier to do? If you're disabling the default event, you're doing it to provide some other functionality, which is necessarily going to involve writing a function to attach to a handler, and adding event.preventDefault() at the top is about as easy as it gets. Anything easier would involve eliminating the attached handler, which doesn't make a lot of sense. Also, .preventDefault() wasn't obscure in the jQuery era; if it's obscure now that's a sad commentary.
veave 3y ago
>Stop hijacking my typical browser shortcuts for use in your own app I've seen this happen with ctrl + f for opening a custom in-app search bar. I don't want that. It doesn't always search the page as usual. You can bypass this by selecting the url bar before using ctrl-f.
- rjh29 3y ago
  Ctrl-f is often overriden for a reason, though. On modern shitty React sites content outside the viewport may not be loaded into the DOM, so the browser find won't even work. It is quite frustrating the scroll past some text, ctrl-f for it and get "no results".
  - shadowgovt 3y ago
    Correct. The most common perpetrator of "stealing" ctrl-f I use is the Google drive suite (Sheets, Docs, &c) and it's basically necessary. That operation is executed server-side. The client doesn't have the data to do the search. But that should be an exception, not the rule.
    - eddd-ddde 3y ago
      Google at least gets it right, I almost never used a generic site's search function cause they never help me find what I want
  - Falkon1313 3y ago
    That's just a broken site. Breaking it in a different way doesn't fix it.
    - rjh29 3y ago
      Such "broken" sites happen to include some of the most popular sites on the internet, so I don't think anyone cares.
simonbarker87 3y ago
Here here! On the last point, the sites that hijack ctrl-f (or CMD-f) often let you through to the normal page browser search with a second attempts at it if their search UI is still on the page. So on the sites I know do it I just double tap CMD-f and I get the normal page search.
- megous 3y ago
  And often they don't give a poopoo, like github.com.
megous 3y ago
Yeah, this is a life saver, for those affected by a recent fad: window.addEventListener('keydown', ev => { if ('kf'.indexOf(ev.key) >= 0 && ev.ctrlKey) ev.stopPropagation() }, true); For me this goes into a global userscript until browsers put back control into user's hands.
skybrian 3y ago
A very specific but related tip about not disabling zoom: You can stop using user-scalable=no and maximum-scale=1 in viewport meta tags now https://lukeplant.me.uk/blog/posts/you-can-stop-using-user-scalable-no-and-maximum-scale-1-in-viewport-meta-tags-now/ https://lukeplant.me.uk/blog/posts/you-can-stop-using-user-s...
- shadowgovt 3y ago
  I hate when people do this on mobile. The Mastodon web app does this, and it's real unfortunate when I hit a picture in someone's stream and I can't make it bigger even though I have more pixels than cones in my eye. Please, dear God, I just want to see the whiskers on the cat.
  - arcanemachiner 3y ago
    Here's my understanding of the current situation: iOS now ignores the viewport setting altogether, while in Chrome, there is a setting in the Accessibility section to "Force enable zoom". So IIRC there's a workaround (if you want to call it that) for both platforms.
muhehe 3y ago
One of many things I hate on crappy modern web is messing with history (API). You click a interesting-looking link somewhere (like HN), go to page. You scroll down, either reading or just skimming, and every funcking header (or even something less important) add entry to you history. To get back to original site you have to click back like a million times. Fuck everyone who does that.
- Falkon1313 3y ago
  I'll also add 'infinite scroll'. Just use a pager. It's linkable, searchable, browseable, works correctly with the history. Infinite scroll breaks all of that for no good reason.
  - asaddhamani 3y ago
    Not to mention the sites that make it impossible to see their footer because of infinite scrolling.
    - xp84 3y ago
      Yeah I love that. A site I used to work on put their currency and language picker there, but on half the pages you literally couldn’t reach the footer!
  - muhehe 3y ago
    There is one site I always admire (non-ironic) in this regard - twitter. I scroll it's feed, click on tweet, dive into several sub-threads and then I can easily get back to main feed where I was. (Unless they fucked it up recently). That's shiny example of doing it right. Too sad it's pretty much only one.
KronisLV 3y ago
I remember the first time when I looked at the Flutter Gallery and was surprised at how things felt just broken in a web browser, for example: https://gallery.flutter.dev https://gallery.flutter.dev (I think it was the Reply example in particular) Ctrl + click or middle mouse button didn't work on links, right click didn't work, selecting and copying text didn't work, inspect element didn't work (due to how the technology is built), even attempting to zoom the page did nothing. This article does ring true both because of that experience, as well as some of the SPA implementations I've seen even with more conventional technologies.
- asaddhamani 3y ago
  It also seems to be doing something weird with text selection, at least on mobile browsers. But I guess the promise of flutter is it’s the same everywhere so this demo should be equally bad on desktop.
- phist_mcgee 3y ago
  Flutter is another dead-end on the road to unified development frameworks. I haven't once been convinced by any flutter demo, web or mobile, that feels like it has even passably good UX.
jeffrallen 3y ago
We need Dogme95 for websites. https://en.m.wikipedia.org/wiki/Dogme_95 https://en.m.wikipedia.org/wiki/Dogme_95
flagsarecolored 3y ago
I agree with the sentiment, but why is this still attributed to JavaScript. This applies to essentially everything exposed to UX, well beyond JS and web. We didn’t JavaScript it away, we bad-developered ourselves through a narrowing hallway until a point where we ended up with a black sheep. JavaScript didn’t enable this, there’s as many issues in this space in environments where JavaScript is not even a player, it may have been a carrier but not the root cause.
- austin-cheney 3y ago
  I don't blame the developers for this at all. I consider myself strong with accessibility and yet at the last job I was intimidated to bring it up. There accessibility was an anti-pattern. At many places they are just struggling to put text to screen. At these places you need a billion lines of code in multiple frameworks to display "hello world". How can you blame the JavaScript developer when nobody knows what they are doing and everybody points fingers at each other? This doesn't just apply to accessibility. It also applies to security, performance, and a variety of other things that never happen unless a law suit is coming or a major client stops paying.
8organicbits 3y ago
> beause "you can't hover or tab on mobile, right?" (wrong) I'm guessing you do this by adding an external mouse and keyboard?
- shadowgovt 3y ago
  Right, or any one of many assistive devices. The line between "mobile" and "desktop" is a lot blurrier these days.
- rakenodiax 3y ago
  Or touchscreen laptops/tablets, depending on what they use for detection
yuumei 3y ago
“Stop hijacking my typical browser shortcuts for use in your own app” GitHub does this now, it’s infuriating
hansoolo 3y ago
I totally agree with all of this. But: >Let me see scroll bars Please don't hide them for the sake of your "slick" ui. Sometimes I want to click on the scrollbar and drag it. Just a normal web thing. I don't see any on FF Android :P
ovao 3y ago
> Let me zoom in on my browser without the website getting all out of whack. This, weirdly, is a remarkably hard problem. I always like to think that I build sites that will be responsive and will scale correctly when zoomed, but not only is that not the case, but different browsers also handle zooming in substantially different ways such that I don’t even have a target to aim at. Suffice it to say that it’s difficult to get even an okay representation of any sufficiently complex layout when zoomed, so I just have to settle for “okay”.
grishka 3y ago
Another thing I'd like to add: don't override the scrolling behavior. Don't try to "improve" the scrolling by making it "smoother", because while it may work okay on Windows, on Mac, when using Apple input devices, there's a one-to-one correspondence between you moving your fingers on the trackpad or mouse and scrollable things scrolling. These "improvements" usually feel like scrolling through molasses. In general, don't try to improve browser's default behavior.
jbeninger 3y ago
"Do responsive things. I didn't spend most of my early career convincing clients to let us do a responsive website just for you to serve me up a boring layout that kicks down to your mobile layout as soon as you are less than 1200px." Can anyone elaborate on this? I feel like I'm missing some context because a desktop layout that kicks down to a mobile layout at a breakpoint sounds like the essence of doing responsive things. Obviously there are a ton of other aspects of responsiveness, but specifically calling out the layout change makes me think I misunderstood something.
- zelphirkalt 3y ago
  Many elements can be responsive by just letting things float in them. Their width can be governed by their content and outer constraints. One can then define minimum widths for things. This way most of the responsiveness becomes simple and there is usually no need for media queries reacting to a specific width of arbitrarily chosen 1200px or similar. Elements float to the next line, when they don't have enough space any longer. I understand this as criticism against designs, that are "responsive" in a way, that they simply "snap" at a specific width into a full blown "mobile" looking view, instead of seamlessly adapting to available width.
- cletusw 3y ago
  Having two completely unrelated UIs – one for mobile, one for desktop - isn't really responsive. When done that way there's some point (e.g. 1199px width in the OP's example) where you suddenly have a tiny mobile web site with a ton of blank space on either side (or worse, it stretches it all out to fit and all the blank space is within every single button and widget). There should either be several progressively more "mobile" breakpoints, or even better, use component queries so individual chunks of the page can rearrange their contents as their available area shrinks.
rshaban 3y ago
Hi! I love it. The magic of original HTML inspired my current website : http://razi.ps http://razi.ps I remember the days as a kid when I just threw together CSS and HTML to see how things worked. Playing with the edges of Unicode/ASCII web-host-shittification made for a creative playground ..
counterpartyrsk 3y ago
What gets me is when fancy-pants JS devs disguise complexity and features nobody has asked for behind native html looking controls like select menus. I see this most often with the city and state inputs, where city is a text input and state is a drop-down/select menu. As a Texan, I will type my city, tab to the State select menu and type "t" followed by another "t" then tab to the next form element. But what I'm seeing lately is a text input (search field) dressed up like a drop-down menu... So my t , t input results in a text search for a literal "tt" instead of selecting Tennessee then Texas. It's so aggravating. Now if someone chooses to click the triangle in the drop-down menu, and scroll through the states, the element would work as expected... If you only wanted to interact with the element with you mouse. If it ain't broke, don't fix it.
- cletusw 3y ago
  This is (was) largely a problem caused by holes in the web platform. Historically it was incredibly hard (if not impossible) to style or otherwise extend the behavior of a true <select>, so most apps had to reimplement it (poorly). <selectmenu> seems to be the new styleable built-in replacement. And then because code sharing across apps/frameworks/companies/etc was historically very hard, only really big companies had enough headcount to build fully functional, accessible, customizable replacements for built-in components. Web Components solve this, allowing global collaboration on common leaf node components like <select>. Related: https://blogs.windows.com/msedgedev/2022/05/05/styling-select-elements-for-real/ https://blogs.windows.com/msedgedev/2022/05/05/styling-selec...
lacoolj 3y ago
Some of the things on this list I've never encountered and seem a little like fluff for the post (not being able to copy stuff? hijacking regularly used keystrokes? how often is that happening to you, really?). Navigation/history tracking is an ongoing battle within SPAs. Not rocket science but if not part of initial planning definitely becomes a problem to implement after-the-fact. Agreed this is something to work on across the web. But I will take the scrollbar thing into consideration in my next site. I am very guilty of this.
- ozyschmozy 3y ago
  I feel like I suffer from the copy issue at least once a week. My go to solution is inspecting the page source to copy directly from there but it's still extremely annoying. Please make your text selectable/searchable. The worst offender for this is my bank which doesn't provide a way to copy my IBAN.
  - undebuggable 3y ago
    Somehow banks decided it's a good security practice to hinder copying and pasting of IBANs, especially when user defines a bank transfer. So here you are, multiple tabs and files open at once, entering IBAN digit by digit and checking multiple times, now you are secure.
- voiper1 3y ago
  Yep, copy/paste issue on desktop is an issue. It's even worse on mobile where I'll often have to send myself a link (sometimes one step back to how I got there) to deal with it on desktop.
- xp84 3y ago
  The scroll bar thing is hard because Apple already declared war on visible scroll bars (along with all other supposed visual clutter) half a decade ago, so most can’t see them “except after activating them with gestures” anyway.
pwdisswordfishc 3y ago
> Stop hijacking my typical browser shortcuts for use in your own app > What did I miss? Let me know on Mastodon. *opens Mastodon* *sees it hijack arrow keys*
nologic01 3y ago
Get over it, we cant have normal web things. These were invented for an earlier, innocent, more generous era. The idea of hyperlinks was that the world will self-organise all its information by connecting resources across the WWW. A noble, idealistic vision for the role of computing. Thats not how it worked out. There is now a self-appointed organizer of all the world's information and a few addictive walled gardens that want you to never follow any outside link. Software technologies adjust to serve business models. The SPA-fication of websites is part of that process. An existing, widely available stack (WWW browsers, web servers etc) is repurposed selectively to meet altermative objectives. Anything not serving business needs will sooner or later be deprecated. While various niche protest movements exist, they are really fancyfull, escapist, even elitist affairs. Who knows, the economics of how we organize the world's information may change yet again (LLMs say hi), bringing yet new tech approaches but i) dont bet on it and ii) the new pattern might be even worse Positive scenarios do exist, eg Web 3 as the fediverse but they will float on sink on the back of their business models.
- sneak 3y ago
  There is still a web outside of those walled gardens, and it is bigger than it has ever been, even when you remove all the corporate websites and NPCs that use them.
rounakdatta 3y ago
A very recent example of how "doing normal things" has been sabotaged in the ChatGPT app is the Ctrl+Shift+C shortcut to open the Dev Console. It now copies the last generated answer.

610 points by vitplister 3y ago

archerx 3y ago

I agree with everything in this post and the thing that gets me the most is broken back buttons on ecommerce sits.

xp84 3y ago
And the mobile brother of that, the “half the things you do are now a slide-up-from-the-bottom modal, which has its own stack, so you get confused and accidentally go back irreversibly many levels when you inadvertently close it.”

Given_47 3y ago

> Stop hijacking my typical browser shortcuts for use in your own app I've seen this happen with ctrl + f for opening a custom in-app search bar. Ah the Discourse classic. But did you know if you hit ctrl+F twice sequentially you can override that annoying behavior!

ajimix 3y ago

Why bank websites remove the ability to paste? You have already copied the text when you realize you cannot paste. So what is the point? Writing things by hand are prone to errors and if your clipboard is poisoned you have already copied the stuff by the time you realize you cannot paste…

epivosism 3y ago
I always imagine there is an "intro to forms programming" which includes code to disable copy and paste, and its concepts now have thousands of descendants across the web, to the point that people start imagining it's a security measure and proactively copy it. I agree w/you and don't see the point in stopping users from pasting in the first place.
- mgkimsal 3y ago
  I don't think it specifically violates any accessibility regulations, but preventing pasting has always come across to me as an accessibility violation.
samwillis 3y ago
I hate this so much, was registering for a new ISP the other day, they blocked paste in the password inputs and broke my password manger. Such an incredible bad decision from a security perspective.
- drowsspa 3y ago
  Keepass is pretty cool when it comes to that, I can just invoke the auto-type on those situations
Devasta 3y ago
Not saying this is the case, but there was malware that would check to see if you had copied what looked to be a bitcoin account and replaced it with its own. https://techcrunch.com/2018/07/03/new-malware-highjacks-your-windows-clipboard-to-change-crypto-addresses/ https://techcrunch.com/2018/07/03/new-malware-highjacks-your... Something like that maybe?
- klabb3 3y ago
  Yeah I also hate this but they have a point. Desktop clipboard is a shitshow. Any app can read it willy nilly, certainly if focused but I wouldn’t be surprised if it works in the background on some platforms. It is one of the prime candidates for a global redesign from scratch, including even physical keys (since copy-paste is so common, certainly more than say caps lock). All the APIs are riddled with decades of tech debt and are entirely platform-specific.
  - asaddhamani 3y ago
    Clipboard managers exist so it definitely can be read in the background on some platforms at least.
    - xp84 3y ago
      Aw man, now I’m sad because that means that’s the next thing Apple will nerf out of existence. I like my clipboard manager and I haven’t ever downloaded malware onto my Mac despite rarely using their crappy App Store. :( Stage 1: Everything is totally trusting. Viruses exist, and scanners exist to help you not download anything stupid. Stage 2: Locked ecosystems like iOS App Store, Platform Vendor claims their 100% diligence will protect you (and them) from all possible bad (or insufficiently-profitable) software. Apparently they weren’t satisfied Stage 3: Full Sandboxing and full enforcement of Platform Vendor’s blessed software source only. Now my computer, like my phone, will only ever have the exact, enumerated features the Platform Vendor blesses me with and I will like it or else. I am free to file a feedback on their website if I’d like a clipboard manager, and they may one day look at that feedback.
bryanrasmussen 3y ago
maybe they think criminals are too stupid to put a varying timer to make keypress times seem natural.
bobbylarrybobby 3y ago
This is why I have an automation on my computer to type out the clipboard character by character.
bakugo 3y ago
Not only does my bank's website not allow me to paste my "password", it doesn't allow me to type it at all. It's insane. Said "password" is just a 6 digit number (we're not allowed to set our own passwords, because 6 digits is definitely way more secure than the 16 character random strings my password manager generates) and it forces me to enter it using buttons on the page itself with randomized positions. No idea how any of this is supposed to help with security, if my device is already compromised to the point that all my keypresses and clicks are being logged, the attacker can probably also just read the password from the browser's memory...
- earthling8118 3y ago
  It's time to find a real bank.
  - geraldwhen 3y ago
    If this is your line, you should pull your cash out of traditional financial institutions immediately. It’s a nightmare on the inside.
- duderific 3y ago
  That's maniacal.
- russelg 3y ago
  Is this ING? Sounds very similar to how ING does it.
  - undebuggable 3y ago
    Polish ING modifies IBAN on pasting it during bank transfer and forces to enter manually first two digits "for your security". They also disable IBAN selection in transfer summary view, so one cannot copy it and double check before confirming the transfer. ING seems to deploy the most arbitrary "security" measures found on most random blog posts and sprouted during the most brain-dead brainstorming meetings.
extraduder_ire 3y ago
IME, middle-clicking on a linuxy computer still works as expected most places. I use that far more often than real copy/paste.
capableweb 3y ago
Usually it starts with a company having issues with robot traffic. So they try a bunch of things to hinder the robot(s). They do something, the robot stops working, but after a while it comes back, it's a cat and mouse game essentially. One day, they (developers pushed by middle managers) disable copy-paste on the login page, and the robot temporary stops working, until a couple of days later, when the robot found a way around it. On to the next thing to do to stop the robot, but that previous "fix" is still there, with the thinking that "maybe that stops some of the robots", but it probably doesn't. But there it sits, some ~10-ish lines of JS that will hang around until rewrite v6 when they'll begin from the beginning, and some months/years later come around to disabling it once again. No, I'm absolutely not speaking from experience.
- KirillPanov 3y ago
  Just give up. You can't win; you're going to get robot traffic unless everybody does something like Web Environment Integrity. Seriously. Just allocate your finite resources in a hierarchical 32-level binary tree based on bit prefixes of the client IP address. Exactly what the root DNS servers do. And exactly what the only mitigation for slowloris attacks does. Then get on with your life.
  - drowsspa 3y ago
    Honestly, robot traffic seems like an issue just because websites are horrendously inefficient. Hundreds of round-trips to external servers, languages that require some orders of magnitude more resources than needed... It shouldn't be so expensive to just serve a page, even considering robots
    - undebuggable 3y ago
      > Hundreds of round-trips to external servers, languages that require some orders of magnitude more resources than needed... It shouldn't be so expensive to just serve a page, even considering robots This is not a priority. The features are implemented by more abstraction, ie. TypeScript and web frameworks. Industry's low barrier to entry promotes studying frameworks, not technologies and standards enabling them. Anti-robot measures mostly prevent automated fraud and are there to ensure the ads are displayed, if the whole process will freeze your browser and eat your entire RAM they are fine with it.
Falkon1313 3y ago
It's to reduce security. Of course a long, random, unique password from a password manager is best for security, everyone knows that. So forcing people to instead use a short, easy-to-type, memorable password clearly couldn't possibly be anything else but an attempt to undermine the user's security and put their account at increased risk. That bank does not have your best interests in mind. With that in mind, it doesn't matter why they don't. So switch to another bank (or better yet, a credit union) that does.
LatticeAnimal 3y ago
Reminds me of treasurydirect.gov which presents you with a virtual keyboard and you have to click to type out your (case insensitive) password. It is insane
undebuggable 3y ago
The banks protect you from malicious clipboard manipulation by manipulating the clipboard content ("we let you paste but complete some digits manually") and/or entirely disabling pasting text into text fields. Yes, they employ at least one "security expert" who will elaborately explain you why it's better for your security.

p1mrx 3y ago

I'm aware of 5 operations that a standard link should support: - Left-click (obvious) - Right-click (context menu) - Middle-click (open in new tab) - Ctrl-click (open in new tab) - Shift-click (open in new window) Most sites support at least one of right/middle/ctrl-click, though sometimes you have to Duplicate the tab and then left-click. If none work, and duplicating the tab loses context, it's probably time to abandon hope and find another website.

eyelidlessness 3y ago
Note: if at all possible, don’t implement these yourself! You’ll very probably do it wrong for at least some users. For example, ctrl-click for new tab is platform specific: on macOS it should be cmd-click, and ctrl-click should open a context menu. Most if not all are or can be user-configurable, which might not be detected by JS. But the default behaviors will do the right thing unless you override them.
- p1mrx 3y ago
  I'm the parent commenter and I approve this message.
jezzamon 3y ago
There's a set of events for mobile too, e.g. long-press should pop up menu
Y-bar 3y ago
Click-hold-drag is another one I use occasionally. For example to: * Save the link as a .loc file on the desktop * Open the link in a tab in another browser window, or another browser altogether. * Add it to a terminal prompt (e.g. curl/wget) (try it with some links on this site into the text box or your text editor of choice)

samwillis 3y ago

I think of this as the "appification of websites", we need to stop doing it. We need to move back to SSR and sprinkles of JS on websites. On the other hand web apps absolutely can play a little more with the UX if it provides value to the user. But if it's in the browser, some of this really do still apply. I'm all in on web apps, its a universally accessible platform for development outside the walled gardens of app stores. What we need to stop doing is treating every single website as an app! If you want your page to appear in search results on a search engine, it's not a web app it's a website.

holoduke 3y ago
On the other hand a good webapp can also be a website. Just matter of spending enough time on it.
satvikpendem 3y ago
> We need to move back to SSR and sprinkles of JS on websites. Fortunately with stuff like React Server Components, looks like we are moving back to sprinkling JS for websites, which I'm a big fan of.
- grishka 3y ago
  Is using some form of React for web development mandatory now?
  - satvikpendem 3y ago
    Why would it be mandatory?
    - grishka 3y ago
      It was a sarcasm.
      - satvikpendem 3y ago
        Not sure what was sarcastic about it...

lapcat 3y ago

[self-promotion] The article author appears to be using Windows, but on Mac and iOS there's StopTheMadness: https://underpassapp.com/StopTheMadness/ https://underpassapp.com/StopTheMadness/

bobbylarrybobby 3y ago
One of my favorite extensions!

Waterluvian 3y ago

This blog doesn’t touch on the actual issue at hand: businesses make business decisions, not engineering decisions. It’s easy to enumerate a bunch of technical asks and then blame their absence on technical reasons, because it doesn’t require any exploration of the business details. It stays in a nice, safe realm. To be clear, I personally agree with, and want every single item listed in this blog. I’m a big nerd. But I also recognize that I’m nowhere near anything resembling a typical user. What I want is probably not even on the radar of 99% of users of these websites. It’s easy to say, “I want X and having X would make me a happier user.” The real question is, “is implementing X an appropriate expenditure of resources if the goal is to build a profitable business?” Usually not. Most users don’t know or don’t care about X. Be careful with the nerd echo chamber we live in that makes us think these things matter to the common person. For all of this, one could argue, “yeah but they’re being foolish. Long term this is going to bite them.” You might be right! I think you’re right, too. But that’s a business position, not a technical one.

kijin 3y ago
For many businesses, there's a simple incentive that should make them care: SEO. Although Google and other search engines have said for more than a decade that their bots can execute javascript and navigate SPAs, the truth is that they are not going to simulate a click on every random element with onClick events attached. In many cases, they will not even execute any javascript. Even in 2023, <a href="URL"> is the best way to make search engines pay attention. Popular frontend development patterns have also made it nearly impossible to figure out the semantic structure of a page. Everything is a <div> now. But if you care about how your website looks in a search result, you might still want to designate some parts of the page as <main> or <article> and other parts as <aside> or <nav>. This is especially important if your website contains short user-generated snippets (like tweets) along with a lot of auxiliary information, as semantic tags make it easier for search engines to determine what the main content of each URL is. In short, many websites would still benefit from enforcing proper semantic markup, like we used to do in the good ol' days of the "no tables for layout" crusade. Now if the business doesn't care about SEO at all (an increasingly common attitude as websites become app-ified), there's always the atomic option: talk to the legal department about the possible consequences of ignoring accessibility.

jfarmer 3y ago

Love this. The way I think about it is that you assume a level of responsibility whenever you tinker with default affordances. Your "feature" isn't restricted to whatever narrow conception or intention you had when you designed it. It consists in the totality of a visitor's actual experience. If I change the logic of the the back button, I'm changing what the back button affords on this particular website and become responsible for whatever happens as a result. That includes confused and frustrated users saying "Screw you and your broken website." Or take, e.g., the way scrollbars work, which can be very browser-and-OS-specific. Are you sure you want to assume responsibility for that? How sensitive are you to the downside, really? Essentially, you're making your website speak a kind of creole. You've forgone any right to be upset if your visitors don't speak it and shouldn't be surprised if they persist in "misinterpreting" it. Forget about avoiding such "features" because you want to be nice to your visitors. It always seemed to me they offer limited upside and unlimited downside.

loeber 3y ago
Yep, this is exactly right. Websites benefit from design idioms that have been carefully crafted over many years. Every website that disregards these idioms makes itself harder to use because it doesn’t speak the same language as what the user is (perhaps without noticing) used to. I wrote about the loss of design idioms at length: https://loeber.substack.com/p/4-bring-back-idiomatic-design https://loeber.substack.com/p/4-bring-back-idiomatic-design

firefoxd 3y ago

One thing that happens when you learn to build web things using React before learning html, is that you don't care about links. When I joined my team, all links were buttons, random elements, or <a> with onClick. Nobody complained, but that meant ctrl click was useless, right click did not give you the options you wanted. This is the only thing I'm a dictator about. There is zero room for negotiation when it comes to links.

cowsandmilk 3y ago
I’ve run into this, but it is coming from the UX designer for the product. There is an organization component library, with a corresponding figma library. They insist on using the button component instead of the link component.
- tough 3y ago
  <Button as={Link} />
- nosefurhairdo 3y ago
  Most react component libraries correctly return <a> tags for <Button /> components with an href property, while still styling them as buttons. This preserves the expected link behaviors while satisfying the design obsession with buttons over traditional links.
- chefandy 3y ago
  Specifying button-looking elements for regular navigation actions is definitely wrong, and nearly all UX and UI designers will understand that. If it triggers an action with consequences, or even navigates users to a single-purpose page where they can select options or confirm the action-- e.g. 'cancel subscription now' or similar-- then it probably should look like a button.
tough 3y ago
But not all buttons are links surely?

butterNaN 3y ago

Another reason why we shouldn't lose control of our own browsers. Today I can set my own fonts, block elements, basically re-style everything once it arrives at my browser, tailored to my accessibility preferences.

amelius 3y ago

We need a tool that can visit a website, build a summary out of it, and presents it in a standard way, customizable by the user. Like reader mode, but on steroids.

RGBCube 3y ago
AI powered Reader Mode, there's your startup idea.
rakenodiax 3y ago
Kagi has this feature, super useful

gxs 3y ago

I hope everyone reads this and listens. I’ll always long for the days of simple websites but I know they are gone and that’s fine. The least we could do, however, is preserve some modicum of standards and usability. I’ll throw in ability to open images/media as standalone files to this list.

brigadier132 3y ago

> nevermind the basic accessibility requirements that are often missing like alt text on images It's easier than ever to make websites accessible and a lot of these new tools enable this. Like throwing linter errors when alt text is not set on images. A lot of the things described in this article are issues with a lack of skill or maliciousness from the developer or whoever hired them. That copy paste thing? I almost always notice it on the websites of legacy book publishers. I think you can pretty easily guess their motivations. I dislike react for other reasons but the majority of developers having shallow knowledge of how the web works is not one of them. That's just nature, the most common thing always ends up going to the lowest common denominator. Chocolate: hersheys or nestle, coffee: nespresso pods, food: mcdonalds, programming: javascript...

nosefurhairdo 3y ago
Can confirm the pain of working on a react application where 90% of the code was written by folks with shallow web knowledge. Not the fault of React.
blorenz 3y ago
I'd wager with the rise of LLMs then we'll get an immense rise of accessibility as the LLM can interpret a page in context of what the user requires.
- nosefurhairdo 3y ago
  Then you may be underestimating accessibility guidelines or overestimating LLMs. The problem with inaccessible web applications is precisely that they cannot be interpreted programmatically, which would inhibit AI from performing this interpretation. An inaccessible website would be equivalent to a low quality prompt for an LLM.

rado 3y ago

The crazy thing about the rampant inaccessibility is that it’s clearly illegal and discriminatory and nobody cares. Any success stories about convincing product managers to stop it?

agumonkey 3y ago

It's hard to focus on this, even though I agree 100% with the whole list, when you're developing on react.

shadowgovt 3y ago
I'd be interested in more information on the difficulties you've encountered. I do most of my web dev in React and I don't remember encountering difficulties with these items.
- agumonkey 3y ago
  You just get sucked in state/props and integrating ui libs and the common ergonomics start to slip from your mind.
  - shadowgovt 3y ago
    Ah, I see what you mean. My common experience is that people I work with build the a11y requirements into the components as required props so you can't ignore them.
    - agumonkey 3y ago
      You're right, but I know I made some crippled links at times you know.

austin-cheney 3y ago

There are really only two problems here, and they are as old as the web itself: 1) Low Expectations 2) No definitions, standards, baselines defining people and/or practice As I have been looking at job posts quite a bit lately everything now is a "Senior Fullstack Engineer" position. This is just so lazy. Then you dive into it and what they really want is some combination of Java or Python, R, Spring, and SQL. Not fullstack. You are wasting peoples' time and worse you are advertising to the public that you either don't understand the technology or just don't care about it. Sigh. In programming we call this an "X/Y" problem. You want to solve for "X", a desired end state. Instead of X all you can talk about is "Y", the approach you wish you could take. This is a tremendous anti-pattern. Its also why employers are getting 500 resumes for open positions and nobody seems qualified. Instead start with the goal: "We are hiring to build a client/server app that can do '_____'. We expect candidates to write/support features X, Y, Z. Your constraints are: A, B, C." The reason why companies don't do this is typically because they have no idea what they are actually doing and they have also gone down several wrong paths already and have a bunch of broken technology to support. That's why they call this tech debt. Then when it comes to interview time the employer and the candidates know exactly what the goals are and can ask the appropriate questions to appropriately eliminate each other. Otherwise, its just some horrible combination of a blind date and a game show where an audience gets to ridicule the contestants. Here is a quick hypothetical example: We are hiring to build a highly distributed media conferencing application. Developers are expected to write TypeScript, pipe stream data from sockets, work both in the browser and the server, and write test automation. Operating constraints include WCAG AA conformance, a privacy conformance checklist drafted by our legal department, and various performance considerations targeting both execution speed and network latency. Ideal candidates will demonstrate solutions during interview time for network latency, writing application logic in the browser, and state management of streamed data.

Kiro 3y ago

> Let me copy text so I can paste it. I'm guilty of doing this because in my game people kept accidentally double clicking and selecting all the text in the UI. What are the best practices around this?

noduerme 3y ago
There's nothing wrong with that. A game UI is where you should block text selection. Web-based games that let you accidentally select UI text look unprofessional. I think the author is talking about informational or business apps.
- yonatan8070 3y ago
  I was reading some article a while back, and as I read I like to highlight what I'm reading with my mouse, but that particular website decided that when I try to highlight text, the appropriate reaction from the site would be a tooltip saying that highlighting is not allowed... So I opened the devtools and copied the whole thing out of spite
  - noduerme 3y ago
    At least they were being honest about the design decision by actually telling you. Just as a matter of polishing my apps, I usually go through and make sure that pages that might be printed or PDF-copied will print well, that everything selects where someone might want to copy text, and doesn't select where they're clicking any UI element resembling a button. In other words, I try to make all text fields selectable and printable, and everything else act as a graphic (even if it has some text on it).
  - ricardo81 3y ago
    I've seen pages that listen for the console being opened, and would redirect to a Rick Roll when you did. It was a dodgy site though.
    - noduerme 3y ago

bob1029 3y ago

> Let me zoom in on my browser without the website getting all out of whack. I just want to be able to read. This is my new OCD obsession when doing layout. I will keep my browser at 250% zoom for the first 3-4 hours of development. Periodically, I will spot test things like tables up to 500%. I had no respect for the humble non-breaking space or automatic table layouts until I started doing this.

Cyykratahk 3y ago

I believe most of the issues with broken link behaviour results from the lack of higher-level methods to override the default link behaviour. An example: I don't really want to add a click event listener to a link to make it display in a modal (or whatever). Because this event is too low-level and now my listener needs to check modifier keys. What I really want is to somehow tell the browser "if the current window URL is about to change via this anchor element, call this function instead". The user is still free to open their links in new windows or tabs and my code will not be triggered for those cases. A CSS example: I don't really want to set cursor images for every element and pseudo-class. I'm forced to list every element that uses the cursor I'm overriding. What I really want is to tell the browser "use this custom cursor image wherever you were going to use the default (hand/wait/resize/etc) cursor". My code would then be future-proofed for new elements/UI. Sometimes I feel that certain browser APIs suffer from the XY problem.

josephg 3y ago
> What I really want is to somehow tell the browser "if the current window URL is about to change via this anchor element, call this function instead". This is pretty doable using javascript - just register an onclick on the <a> tag and have your event handler cancel the default navigation behaviour. Your website will then continue to work great even if the user has javascript disabled. And all the built in browser behaviour (like the right click "link" menu, and ctrl+click) still works perfectly. That said, this is a pretty obscure "trick". It would certainly be nice if the DOM API made this easier to do.
- kevincox 3y ago
  In my experience in this case you need to explicitly filter out middle-click, ctrl-click, cmd-click and whatever other features the browser may offer. Otherwise you will accidentally prevent them too. I would love if there was a more specific event that avoided this problem.
- wwweston 3y ago
  Is there really anything easier to do? If you're disabling the default event, you're doing it to provide some other functionality, which is necessarily going to involve writing a function to attach to a handler, and adding event.preventDefault() at the top is about as easy as it gets. Anything easier would involve eliminating the attached handler, which doesn't make a lot of sense. Also, .preventDefault() wasn't obscure in the jQuery era; if it's obscure now that's a sad commentary.

veave 3y ago

>Stop hijacking my typical browser shortcuts for use in your own app I've seen this happen with ctrl + f for opening a custom in-app search bar. I don't want that. It doesn't always search the page as usual. You can bypass this by selecting the url bar before using ctrl-f.

rjh29 3y ago
Ctrl-f is often overriden for a reason, though. On modern shitty React sites content outside the viewport may not be loaded into the DOM, so the browser find won't even work. It is quite frustrating the scroll past some text, ctrl-f for it and get "no results".
- shadowgovt 3y ago
  Correct. The most common perpetrator of "stealing" ctrl-f I use is the Google drive suite (Sheets, Docs, &c) and it's basically necessary. That operation is executed server-side. The client doesn't have the data to do the search. But that should be an exception, not the rule.
  - eddd-ddde 3y ago
    Google at least gets it right, I almost never used a generic site's search function cause they never help me find what I want
- Falkon1313 3y ago
  That's just a broken site. Breaking it in a different way doesn't fix it.
  - rjh29 3y ago
    Such "broken" sites happen to include some of the most popular sites on the internet, so I don't think anyone cares.

simonbarker87 3y ago

Here here! On the last point, the sites that hijack ctrl-f (or CMD-f) often let you through to the normal page browser search with a second attempts at it if their search UI is still on the page. So on the sites I know do it I just double tap CMD-f and I get the normal page search.

megous 3y ago
And often they don't give a poopoo, like github.com.

megous 3y ago

Yeah, this is a life saver, for those affected by a recent fad: window.addEventListener('keydown', ev => { if ('kf'.indexOf(ev.key) >= 0 && ev.ctrlKey) ev.stopPropagation() }, true); For me this goes into a global userscript until browsers put back control into user's hands.

skybrian 3y ago

A very specific but related tip about not disabling zoom: You can stop using user-scalable=no and maximum-scale=1 in viewport meta tags now https://lukeplant.me.uk/blog/posts/you-can-stop-using-user-scalable-no-and-maximum-scale-1-in-viewport-meta-tags-now/ https://lukeplant.me.uk/blog/posts/you-can-stop-using-user-s...

shadowgovt 3y ago
I hate when people do this on mobile. The Mastodon web app does this, and it's real unfortunate when I hit a picture in someone's stream and I can't make it bigger even though I have more pixels than cones in my eye. Please, dear God, I just want to see the whiskers on the cat.
- arcanemachiner 3y ago
  Here's my understanding of the current situation: iOS now ignores the viewport setting altogether, while in Chrome, there is a setting in the Accessibility section to "Force enable zoom". So IIRC there's a workaround (if you want to call it that) for both platforms.

muhehe 3y ago

One of many things I hate on crappy modern web is messing with history (API). You click a interesting-looking link somewhere (like HN), go to page. You scroll down, either reading or just skimming, and every funcking header (or even something less important) add entry to you history. To get back to original site you have to click back like a million times. Fuck everyone who does that.

Falkon1313 3y ago
I'll also add 'infinite scroll'. Just use a pager. It's linkable, searchable, browseable, works correctly with the history. Infinite scroll breaks all of that for no good reason.
- asaddhamani 3y ago
  Not to mention the sites that make it impossible to see their footer because of infinite scrolling.
  - xp84 3y ago
    Yeah I love that. A site I used to work on put their currency and language picker there, but on half the pages you literally couldn’t reach the footer!
- muhehe 3y ago
  There is one site I always admire (non-ironic) in this regard - twitter. I scroll it's feed, click on tweet, dive into several sub-threads and then I can easily get back to main feed where I was. (Unless they fucked it up recently). That's shiny example of doing it right. Too sad it's pretty much only one.

KronisLV 3y ago

I remember the first time when I looked at the Flutter Gallery and was surprised at how things felt just broken in a web browser, for example: https://gallery.flutter.dev https://gallery.flutter.dev (I think it was the Reply example in particular) Ctrl + click or middle mouse button didn't work on links, right click didn't work, selecting and copying text didn't work, inspect element didn't work (due to how the technology is built), even attempting to zoom the page did nothing. This article does ring true both because of that experience, as well as some of the SPA implementations I've seen even with more conventional technologies.

asaddhamani 3y ago
It also seems to be doing something weird with text selection, at least on mobile browsers. But I guess the promise of flutter is it’s the same everywhere so this demo should be equally bad on desktop.
phist_mcgee 3y ago
Flutter is another dead-end on the road to unified development frameworks. I haven't once been convinced by any flutter demo, web or mobile, that feels like it has even passably good UX.

jeffrallen 3y ago

We need Dogme95 for websites. https://en.m.wikipedia.org/wiki/Dogme_95 https://en.m.wikipedia.org/wiki/Dogme_95

flagsarecolored 3y ago

I agree with the sentiment, but why is this still attributed to JavaScript. This applies to essentially everything exposed to UX, well beyond JS and web. We didn’t JavaScript it away, we bad-developered ourselves through a narrowing hallway until a point where we ended up with a black sheep. JavaScript didn’t enable this, there’s as many issues in this space in environments where JavaScript is not even a player, it may have been a carrier but not the root cause.

austin-cheney 3y ago
I don't blame the developers for this at all. I consider myself strong with accessibility and yet at the last job I was intimidated to bring it up. There accessibility was an anti-pattern. At many places they are just struggling to put text to screen. At these places you need a billion lines of code in multiple frameworks to display "hello world". How can you blame the JavaScript developer when nobody knows what they are doing and everybody points fingers at each other? This doesn't just apply to accessibility. It also applies to security, performance, and a variety of other things that never happen unless a law suit is coming or a major client stops paying.

8organicbits 3y ago

> beause "you can't hover or tab on mobile, right?" (wrong) I'm guessing you do this by adding an external mouse and keyboard?

shadowgovt 3y ago
Right, or any one of many assistive devices. The line between "mobile" and "desktop" is a lot blurrier these days.
rakenodiax 3y ago
Or touchscreen laptops/tablets, depending on what they use for detection

yuumei 3y ago

“Stop hijacking my typical browser shortcuts for use in your own app” GitHub does this now, it’s infuriating

hansoolo 3y ago

I totally agree with all of this. But: >Let me see scroll bars Please don't hide them for the sake of your "slick" ui. Sometimes I want to click on the scrollbar and drag it. Just a normal web thing. I don't see any on FF Android :P

ovao 3y ago

> Let me zoom in on my browser without the website getting all out of whack. This, weirdly, is a remarkably hard problem. I always like to think that I build sites that will be responsive and will scale correctly when zoomed, but not only is that not the case, but different browsers also handle zooming in substantially different ways such that I don’t even have a target to aim at. Suffice it to say that it’s difficult to get even an okay representation of any sufficiently complex layout when zoomed, so I just have to settle for “okay”.

grishka 3y ago

Another thing I'd like to add: don't override the scrolling behavior. Don't try to "improve" the scrolling by making it "smoother", because while it may work okay on Windows, on Mac, when using Apple input devices, there's a one-to-one correspondence between you moving your fingers on the trackpad or mouse and scrollable things scrolling. These "improvements" usually feel like scrolling through molasses. In general, don't try to improve browser's default behavior.

jbeninger 3y ago

"Do responsive things. I didn't spend most of my early career convincing clients to let us do a responsive website just for you to serve me up a boring layout that kicks down to your mobile layout as soon as you are less than 1200px." Can anyone elaborate on this? I feel like I'm missing some context because a desktop layout that kicks down to a mobile layout at a breakpoint sounds like the essence of doing responsive things. Obviously there are a ton of other aspects of responsiveness, but specifically calling out the layout change makes me think I misunderstood something.

zelphirkalt 3y ago
Many elements can be responsive by just letting things float in them. Their width can be governed by their content and outer constraints. One can then define minimum widths for things. This way most of the responsiveness becomes simple and there is usually no need for media queries reacting to a specific width of arbitrarily chosen 1200px or similar. Elements float to the next line, when they don't have enough space any longer. I understand this as criticism against designs, that are "responsive" in a way, that they simply "snap" at a specific width into a full blown "mobile" looking view, instead of seamlessly adapting to available width.
cletusw 3y ago
Having two completely unrelated UIs – one for mobile, one for desktop - isn't really responsive. When done that way there's some point (e.g. 1199px width in the OP's example) where you suddenly have a tiny mobile web site with a ton of blank space on either side (or worse, it stretches it all out to fit and all the blank space is within every single button and widget). There should either be several progressively more "mobile" breakpoints, or even better, use component queries so individual chunks of the page can rearrange their contents as their available area shrinks.

rshaban 3y ago

Hi! I love it. The magic of original HTML inspired my current website : http://razi.ps http://razi.ps I remember the days as a kid when I just threw together CSS and HTML to see how things worked. Playing with the edges of Unicode/ASCII web-host-shittification made for a creative playground ..

counterpartyrsk 3y ago

What gets me is when fancy-pants JS devs disguise complexity and features nobody has asked for behind native html looking controls like select menus. I see this most often with the city and state inputs, where city is a text input and state is a drop-down/select menu. As a Texan, I will type my city, tab to the State select menu and type "t" followed by another "t" then tab to the next form element. But what I'm seeing lately is a text input (search field) dressed up like a drop-down menu... So my t , t input results in a text search for a literal "tt" instead of selecting Tennessee then Texas. It's so aggravating. Now if someone chooses to click the triangle in the drop-down menu, and scroll through the states, the element would work as expected... If you only wanted to interact with the element with you mouse. If it ain't broke, don't fix it.

cletusw 3y ago
This is (was) largely a problem caused by holes in the web platform. Historically it was incredibly hard (if not impossible) to style or otherwise extend the behavior of a true <select>, so most apps had to reimplement it (poorly). <selectmenu> seems to be the new styleable built-in replacement. And then because code sharing across apps/frameworks/companies/etc was historically very hard, only really big companies had enough headcount to build fully functional, accessible, customizable replacements for built-in components. Web Components solve this, allowing global collaboration on common leaf node components like <select>. Related: https://blogs.windows.com/msedgedev/2022/05/05/styling-select-elements-for-real/ https://blogs.windows.com/msedgedev/2022/05/05/styling-selec...

lacoolj 3y ago

Some of the things on this list I've never encountered and seem a little like fluff for the post (not being able to copy stuff? hijacking regularly used keystrokes? how often is that happening to you, really?). Navigation/history tracking is an ongoing battle within SPAs. Not rocket science but if not part of initial planning definitely becomes a problem to implement after-the-fact. Agreed this is something to work on across the web. But I will take the scrollbar thing into consideration in my next site. I am very guilty of this.

ozyschmozy 3y ago
I feel like I suffer from the copy issue at least once a week. My go to solution is inspecting the page source to copy directly from there but it's still extremely annoying. Please make your text selectable/searchable. The worst offender for this is my bank which doesn't provide a way to copy my IBAN.
- undebuggable 3y ago
  Somehow banks decided it's a good security practice to hinder copying and pasting of IBANs, especially when user defines a bank transfer. So here you are, multiple tabs and files open at once, entering IBAN digit by digit and checking multiple times, now you are secure.
voiper1 3y ago
Yep, copy/paste issue on desktop is an issue. It's even worse on mobile where I'll often have to send myself a link (sometimes one step back to how I got there) to deal with it on desktop.
xp84 3y ago
The scroll bar thing is hard because Apple already declared war on visible scroll bars (along with all other supposed visual clutter) half a decade ago, so most can’t see them “except after activating them with gestures” anyway.

pwdisswordfishc 3y ago

> Stop hijacking my typical browser shortcuts for use in your own app > What did I miss? Let me know on Mastodon. *opens Mastodon* *sees it hijack arrow keys*

nologic01 3y ago

Get over it, we cant have normal web things. These were invented for an earlier, innocent, more generous era. The idea of hyperlinks was that the world will self-organise all its information by connecting resources across the WWW. A noble, idealistic vision for the role of computing. Thats not how it worked out. There is now a self-appointed organizer of all the world's information and a few addictive walled gardens that want you to never follow any outside link. Software technologies adjust to serve business models. The SPA-fication of websites is part of that process. An existing, widely available stack (WWW browsers, web servers etc) is repurposed selectively to meet altermative objectives. Anything not serving business needs will sooner or later be deprecated. While various niche protest movements exist, they are really fancyfull, escapist, even elitist affairs. Who knows, the economics of how we organize the world's information may change yet again (LLMs say hi), bringing yet new tech approaches but i) dont bet on it and ii) the new pattern might be even worse Positive scenarios do exist, eg Web 3 as the fediverse but they will float on sink on the back of their business models.

sneak 3y ago
There is still a web outside of those walled gardens, and it is bigger than it has ever been, even when you remove all the corporate websites and NPCs that use them.

rounakdatta 3y ago

A very recent example of how "doing normal things" has been sabotaged in the ChatGPT app is the Ctrl+Shift+C shortcut to open the Dev Console. It now copies the last generated answer.