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.
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.
I think the issue depends on whether you are on a a comment URL (e.g. clicking on the timestamp of a comment), or if you are on the post. If I'm scoped into 20517, the "parent" option is indeed a link to 20429. It will hard load to scope into 20429.
But if I'm on the actual 13396 post and click parent on your comment, I am instead 'loading' 13396#20429. Which of course isn't reloading the page but scrolling to a specific header.
I never personally liked the decision where replying or loading a comment took me to a whole new webpage instead of rending a formbox within 13396 and/or loading 13396#[comment ID], but I imagine there were historical and/or technical reasons for the decision. It generally doesn't bother me as I tend to mostly browse comments and only occasionally respond.
I am instead 'loading' 13396#20429. Which of course isn't reloading
the page but scrolling to a specific header.
No, you're scrolling to that via javascript. Previously this was handled by not interfering with the link to that URL thus preserving history and your location on the page.
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.
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:
> 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.
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.
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.
I totally get that. I had to check what my muscle memory would do in that situation. (Apparently) I select text, right-click, and then choose "search for <selected phrase>" from the context menu.
The worst thing: i.redd.it no longer returns the image alone, but wraps it in a "viewer" page. I can’t even write an uBlock filter for this, because it relies on an Accept HTTP header.
Imgur does the same, but that at least can be remedied by stripping the Referer header. I wonder how long this will last.
I predict Sec-Fetch-* will be abused for the same purpose. It may be already.
Yep. Sometimes reddit has an image that’s either incorrectly cropped or it’s zoomed out so far that it’s unreadable. How many times do I need to click on the image before I can see it properly? I’ve counted as many as 4 taps through various awful image viewer things. Sometimes no about of tapping and zooming will render the image properly. The irony is my browser is great at showing images already - panning and zooming works beautifully.
I miss Apollo. The friction with Reddit’s awful design and coding choices makes me use their site a lot less. I think that might be a good thing in the long run. It leaves me hungry for something better.
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)
Wait until you get asked, by CTOs and business people, to disable F5/refreshing because it breaks the process flow but building a resilient process flow into an old app takes 10x-100x as long. Only for them to realize if you restart the system, disconnect the network, have a timeout, etc. the problem still exists. They even contemplated physically removing F5 before realizing "wait people can just click refresh or remap F5, that won't work".
Same people will also claim "we don't need a frontend dev or a UX designer".
Watching DOM events on the document and disabling key events for the key code 116. One can still trigger document refresh by remapping F5 to other physical key in OS settings, or by clicking refresh button in browser toolbar.
That seems unnecessarily complex compared to watching for a request to the same webpage, intercepting, and dropping the request. I believe that is all the refresh function is doing.
Now ofc I wouldn't give any executives that idea. Don't mess with expected user functionality, that's like UX 101. if I see my navigation tampered with, I flag that site as spam.
Depends on one's determination and motives there are many ways to "disable refresh". One motive I imagine and don't approve is some want their website to feel like a mobile app, for whatever reason.
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.
> 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?
Any artist or designer has to learn their medium before they are allowed to produce designs for it. If you want to learn to sculpt, you have to learn what you can and cannot do with clay; if you want to learn to design clothes, you have to learn about fabrics, sewing and tailoring (Jean Paul Gautier and Versace worked as tailors in the industry while they were doing their early work).
Yet there seems to be a free pass where a "web designer" is allowed to dictate how a site should work and look without knowing the basics of HTML, CSS and JS.
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.
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!
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.
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.
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?
> 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?)?
Yes. I think all web programmers need to know HTML and CSS. CSS is still just as relevant no matter how you build websites. People should also spend time learning HTML. Like, learn how to make content using raw HTML. Read the HTML of some of your favorite sites. This will improve everything you do with react and friends.
> Are there a lot of people who learn only web frameworks?
Yes.
Web programming probably has more programming beginners than any other area of software development. Its easy to learn - there are no C pointers in sight and no manual memory management. Websites work everywhere. And everyone needs a website - so there's lots of demand for web programmers. The debugging tools are also great (and you already have them if you have chrome installed). And frontend engineering is visual and obvious - so when you mess it up, you can usually tell.
So, yes. There's lots of people who learn just enough to scrape by and start making websites. Its great and terrible. I'm glad web programming is such an on-ramp for beginners. But npm is a disaster, and lots of websites are insecure, slow, amateurish messes.
It can be written by hand but that's way too verbose. Pug is a great solution to that problem: it's just HTML but much less verbose. I integrated it with GitHub Pages so pug sources get compiled to HTML and published when commits are pushed. Great experience.
I think at the bare minimum you should strive to be readable, and you can do that with surprisingly few extra lines of CSS and very basic web design principles (avoid using full black or full white backgrounds). CSS is uhh... a choice, but you don't need to know too much in the very beginning to start building up some motivation of making stuff that looks easy on the eyes.
Yes, and text doesn't need to have maximum contrast (#000 over #FFF) to be legible. The website you linked above says:
> W3C's Web Content Accessibility Guidelines set the minimum contrast between text and its background so that it can be read by people with moderately low vision (which is quite common).
If you follow that link to W3C, you'll see that the minimum contrast for text to be considered legible is 3:1, though that's for people with standard vision (it's the lowest rating). To be truly accessible, the minimum we should strive for is 7:1. Anything above that has a AAA rating.
> 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.
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.
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
Set the proper goals. The end state is some software product, such as a website. Far too common beginners will attempt to redefine the goal to something more familiar, something like "how to write code". There are people who spend their entire careers mastering exactly how to write the code. This can be described as "expert beginners".
Somebody needs to be the adult in the room and stop the children from running the daycare. As developers we should already know how to write code, or know how to figure it out, and that shouldn't be open to discussion. The discussion must only be upon defining the goals and stepping backwards one step at a time. This is called planning and proper planning will ensure the necessary automated checks are in place. Then "how to write the code" becomes straight forward as it either conforms to the automated checks or becomes a matter for discussion.
I don't think vanilla HTML/CSS/JS is the way to go for beginners because of the "time to visually interesting results" problem. Starting with a framework that has widgets you can reuse is much more interesting and motivating.
That said, I'd argue that the selected framework should be one that doesn't completely obscure all the underlying HTML/CSS/JS (I'd avoid TypeScript at first) from them so it's easy to learn that when needed, plus it makes debugging using browser dev tools easier and means they'll have transferable skills for learning a second framework.
GWT (RIP, thank goodness) would be the extreme negative example, but React is on that side of the spectrum as well.
Vue, Svelte, Lit, and Angular seem to be the most popular frameworks on the "closer to HTML/CSS/JS" side of the spectrum, though I only have experience with the last two. Lit's great; Angular's not my favorite.
> I don't think vanilla HTML/CSS/JS is the way to go for beginners because of the "time to visually interesting results" problem.
I don't think it's worth beginners learning the road rules and safety protocols, because of the "time to being responsible for a heavy, fast motor-vehicle sharing a road with other people" problem.
I'm surprised to not see NEXT.js mentioned. For anyone comfortable in the React world it pushes a much more classic <a> tag link model throughout the app while still allowing reactive and responsive behaviours.
I'm not professional web developer, but I started raw, then expanded with JQuery, then much later tried some frameworks. I think it's important the understand the underlying core HTML/CSS/JS since EVERYTHING ELSE is ultimately abstracting and/or transpiling down to those raw ingredients. But I'm more of a bottom up type of person, so YMMV.
Now, for proper web principles and design methodologies, I'd love for some tips there.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.