8 ms·

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 link

• 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?
  • traverseda 3y ago
    They should for accessibility reasons. If they're not assistive tools might not know they're even click-able. Maybe if you're doing like a painting app or something you don't need to.
    • Raicuparta 3y ago
      Button elements and other clickable elements are all detected by accessibility tools as such. If links were the only thing they could click, the modern web would be almost completely unusable, which isn't the case.
  • nosefurhairdo 3y ago
    Of course not, but if your button pushes/replaces history then it should be an <a> tag with an href property.
• trealira 3y ago
  Since we're on the topic of how people should learn to build web things: what do you think are the most important things to learn first to make web stuff? The "right" way? Just raw HTML, CSS, and some JavaScript (Typescript?)? It seems common among programmers to criticize the overuse of web frameworks. Are there a lot of people who learn only web frameworks?
  • pjmlp 3y ago
    The coolest framework of them all, vanilaJS.
  • firefoxd 3y ago
    I think it's still a good idea to learn by writing HTML pages, then adding a style and script tag in the head. The scripts and styles become enhancements to the page. If you go to a code bootcamp, you are learning react. A lot of new developers come from these places. Not a bad thing, but they could spend more time on fundamentals
  • satvikpendem 3y ago
    > Are there a lot of people who learn only web frameworks? Yes, because many people learn web development through bootcamps or other such courses (modern web dev is not usually taught in college, in my experience) which rush you to "job readiness" thus incentivizing using React over vanilla JS since most web dev jobs use React nowadays.
    • blq10 3y ago
      What would a college that aimed to teach Web Development as a specialty actually look like? People look down on bootcampers, but it always feels to me that 99% of what is taught in university programs is similarly only useful in specialized situations. The actual good thing is having had to sit down and write a lot of code before anyone lets you touch anything. What does such a program look like for Web?
      • satvikpendem 3y ago
• varrock 3y ago
  I'd argue the link is the most influential and historic element of the web. Its behavior should rightfully be preserved.
  • GloomyBoots 3y ago
    The link and the URL are what made hypertext hyper. They turned words in a document into portals to other documents. But that web isn’t the one we’re dealing with anymore. We’ve moved from documents to applications. Like tabindex, I’m sure browsers or frameworks will gradually find ways to make any element behave link-like in every way. Which isn’t really a bad thing, it’s just development of the core idea of the web.
    • KRAKRISMOTT 3y ago
      It also made things slow. Modern SPA links have pre loading optimizations baked in. It's quite important especially if your users are on mobile.
      • shove 3y ago
        The average modern SPA pulls in far more unnecessary JS than the average plain HTML site pulls in via redundant tag structure following the initial page load. Moreover, server-rendered HTML renders far more quickly because there tends to be fewer total requests and there’s no hiccup parsing the JS when it lands, much less the time it takes to execute it.
        • cyberax 3y ago
          And don't forget that gzip works wonders, removing most of the network overhead of transmitting redundant tags.
      • matheusmoreira 3y ago
        Browsers are perfectly capable of prefetching pages on their own.
  • 3y ago
• maximinus_thrax 3y ago
  > This is the only thing I'm a dictator about. There is zero room for negotiation when it comes to links. This is a hill I'm always willing to die on. Few things bother me more. Maybe fucking with my browser history...
  • Buttons840 3y ago
    Finish the story. Did you die on this hill? Whenever I push for things that are technically correct I'm ignored and/or not treated well it seems.
    • Swizec 3y ago
      I always attempt to die on the links should be links hill. So far the only times I didn’t get my way was when the thing was in fact semantically a button, it just happened to use navigation to achieve its aim. Usually in these cases the markup is too complex to shove into a link anyway. Happy to report that our production site has more links that look like buttons than it does buttons that act like links. It’s almost a meme on my team that Swiz will get you if you use onClick for navigation. The other hill I enjoy defending is that we should use more browser built-in components instead of trying to design our own.
      • toastal 3y ago
        Please tell my your hill also doesn’t let folks use target=_blank without a very good reason to break the user agent's default behavior.
        • Swizec 3y ago
          Luckily that one doesn’t even come up. “Kids these days” don’t know about it :D I jest, but I am at least 5 years older than everyone else on the team. And have the unfun background of getting into professional webdev before jQuery.
      • xp84 3y ago
        > browser built-in components instead of trying to design our own. Ugh. Let me know if you have any tips. All the art-school “UX designers” have to have custom date pickers and stupid knockoffs of iOS switches and custom drop-downs when there are actual, better, and automatically-accessible, versions of all those. How do you fight against this vanity design without making an enemy of the whole design team?
• deleted 3y ago
  [deleted]
• noman-land 3y ago
  I'm the same way. If someone is committing code that violates web standards it is not going in unless there's a thorough discussion and an excellent reason for doing so. Lean on the web.
  • sonofhans 3y ago
    Oh, you and the OP are both making me happy. Plenty of people seem to use nothing but DIV, SPAN, and maybe A or BUTTON. You don’t have to use all the semantic richness of HTML, but damn, at least treat links right. The <a onclick> pattern is awful.
• sergiotapia 3y ago
  This is one of the first things I changed at a new job. I just opened a PR and made the change without asking anyone. It infriuriates me when apps can't Ctrl+click.
• notantigoogle 3y ago
  You should go work for pornhub since their links don't work like links
  • moron4hire 3y ago
    The whole site now doesn't work here in Virginia.
• bunga-bunga 3y ago
  Same boat. My blood pressure increased just reading your comment. The web is run by a bunch of amateurs who don’t know the single core concept of the web: links.
• SilasX 3y ago
  Ugh. Yes. Bane of my web existence: a site will have a list view and a detail view. Can’t right click (or use extensions) to open one item in its detail view. Even then, it would almost be forgivable if going back to list view (via their button or the browser button) were instant and seamless, but… It never is! Going back means waiting for all the content to reload again and losing my position. Why do you designers keep allowing this? Edit: and for the final kick in the balls, some websites force all tabs to be the same in some respect! Like, Facebook makes it (or at least did one time) so that you have to have the same chats popped up in every tab. If you close one in one tab, it closes in all other tabs. Why?! There’s a reason I have multiple tabs open!
  • scatters 3y ago
    Sometimes you can duplicate the tab then open the detail view in the duplicate. I agree, it's ridiculous.
• MostlyStable 3y ago
  This is probably 50% of the reason I use nitter instead of twitter. Aside from not having to have an account, it lets me right click to open tweet threads in a new tab. Which, given the nature of twitter conversations, seems like pretty key behavior! I want to be able to view conversational threads, but I also want to keep my place in the original page so that I can keep opening new threads! It's really not that hard and the actual twitter UI makes it very difficult (although you can get around it with some browser tweaks, but it's still more annoying than a simple right click)
  • ushakov 3y ago
    You can open tweets in new tab in regular Twitter by clicking on the date of the tweet (which happens to be a link)
• dpacmittal 3y ago
  The new reddit web version has all the links as buttons. You cannot open these links in a new tab. It drives me crazy and really strange that such a huge internet giant gas such glaring accessibility issues.
  • dekatron 3y ago
    New Reddit also messes with text selection with unnecessary JS crap. Wherever you select some text, they show an "Embed" button that prevents you from dragging the text to a new tab to perform a web search. Thankfully this behaviour can be blocked with uBlock Origin by adding these rules: www.reddit.com##+js(aeld, mousedown, isSelectionOutOfRange) www.reddit.com##+js(aeld, mouseup, shouldShowButton)
    • philsnow 3y ago
      > dragging the text to a new tab to perform a web search I had no idea that this worked. I don't "get" intentionally dragging if there's any alternative. I feel like one of those people who tells people that frowning takes more muscles than smiling, but: dragging seems like it requires so many more muscles to be engaged than the keyboard shortcuts for copy/newtab/paste and then enter.
      • LeonenTheDK 3y ago
        The way I see it, it's a feature that exists which some people use and prefer. Breaking it (intentionally or accidentally) just isn't something I want to see.
        • philsnow 3y ago
          For sure, I'm not saying any browser should change this behavior. C-x M-c M-butterfly and all that.
      • dekatron 3y ago
        Ha, different strokes for different folks I guess. Usually when I'm reading something, my hands are off the keyboard and I use one hand to scroll with the mouse. In this scenario, it's so much easier to double-click to select a word and drag it to a new tab instead of reaching for the keyboard.
• iamnotjay 3y ago
  I never knew <a onClick > was a thing :D nice thread
• 1vuio0pswjnm7 3y ago
  Is it possible the absence of "links" is unintentional. As a web user, this sort of "design" has made me focus as a practical matter more on HTTP (requests) instead of HTML (links). It's easy for me to make the links myself once I know where the requests need to go. It's easy to take JSON and make own HTML. No Javascript needed.
• tacker2000 3y ago
  I also hate this. More and more of this JS nonsense is coming along and abusing the correct way of doing things. There is a documentation platform called archbee (its even funded by YC) where if you run a search you cant open the search results in new tabs, you have to open one result in the current tab, and if its not what you want, you have to go back, search again and open the next result. This is incredibly infuriating. You can see this behaviour here for example: https://docs.sparklayer.io/ https://docs.sparklayer.io/
  • phist_mcgee 3y ago
    >More and more of this JS nonsense is coming along and abusing the correct way of doing things. There's no such thing as this.
    • bottled_poe 3y ago
      It’s like saying you can drink a milkshake using your mouth or your nose. Sure, both work, but..
  • inferiorhuman 3y ago
    Try clicking on the "parent" link on HN.
    • runnerup 3y ago
      Seems to work as expected?
      • inferiorhuman 3y ago
        Javascript scrolls to the target and the browser history is clobbered. I expect it now, but it was an unwelcome change.
        • johnnyanmac 3y ago
          The parent option isn't returning a new URL. it simply scrolls to the target. I don't see where it is impacting my internet history.
• makeitdouble 3y ago
  At this point I wonder if browsers couldn't be adjusted to this, and have link behavior on any element that indirectly behaves like a link. For instance if a user ctr + cliks a button, have the navigation happen in a tab window even if the URL change is pushed by a JS module down the line.
  • paulddraper 3y ago
    ? You need a href for the browser to know where to navigate to. Just use RouterLink. It uses a native anchor tag. If you click (without Ctrl/cmd) it prevents default and does the navigation without reload.
    • jakelazaroff 3y ago
      What is RouterLink? A quick Google search turns up some Angular thing, but I don’t think anyone was talking specifically about Angular.
      • whstl 3y ago
        GP is talking about the component/feature present in React/Vue/Angular/etc routers that allows links to behave like normal anchor links (allowing to open in another window, etc) but also use the SPA router for navigation when possible. I'm not making any argument here, just explaining. Also makeitdouble's idea would apply even to non-SPAs or to pages without javascript. For example, I might want to submit a form but in a new tab.
      • paulddraper 3y ago
        Sorry, RouterLink for Angular, NavLink for React router.
  • matheusmoreira 3y ago
    Would be better if browsers adjusted so as to deliberately break React and its brethren instead instead of fixing the mess they made. The web used to work great, now look at what it's become. People can't even put a link in the document properly.
• jezzamon 3y ago
  It would be nice if the JavaScript APIs made it easier to do that. Like, obviously you can wrap an element in a <a> tag, but its just enough of a hassle that people don't. Seems like a good API could fix a lot of sites
• ksec 3y ago
  Well you say this now, for nearly a decade no one gives a crap about Web as in HTML, it is all about JS Front End. The current resurgent and support of HTML is relatively new on HN. Other than the very few vocal ones about how the Web should not be an "App". But an interactive web page. I still wish they should merge 90% if not 100% of HTMX into official HTML 5 spec.
  • austin-cheney 3y ago
    To me this sounds hyper immature. It sounds like you don't really know what you are doing as a technician and instead you are checking whatever box whatever employer at the time tells you to check. Then when confronted with the reality that your output is clearly wrong you instead shift blame to something about tools, because diddling the tools is all you really know what to do.
• kieranimo 3y ago
  In my experience, people were abusing links and making everything a button without React. The actual defining attribute - IMO - is that they didn't care about web semantics.
• loganwedwards 3y ago
  Good for you. Abusing anchor (or navigation) is also a flagrant disregard for impaired users (those that need accessibility tooling).
• mbrochh 3y ago
  One of the main reasons I fell in love with Remix. It makes React feel like proper HTML based web dev again.