11 ms·
HN is lightweight in some ways, but also quite bad in others. For example, every single time you vote on anything, the site sends back a 302 redirect and then a
by Deimorz 7y ago
HN is lightweight in some ways, but also quite bad in others. For example, every single time you vote on anything, the site sends back a 302 redirect and then a copy of the entire page's HTML in response. This means that every vote results in a response that's usually around 10KB gzipped.
As of right now, for me, voting on any comment in this thread currently causes a 14KB response and takes about 1.3 seconds to finish.
- Eric_WVGG 7y agoWhen reading on an iPad, tapping on links is nearly impossible. A better responsive CSS file wouldn't make the site any slower or degrade the experience for laptop users.
- graeme 7y agoWhat do you mean? Haven't had that issue. Am on desktop version, unsure if mobile exists
- zoul 7y agoThe tap targets are minuscule and close to each other.
- tobinfricke 7y agoI had to pinch-to-zoom to upvote this comment. :-)
- zaroth 7y agoThat's a feature IMO -- HN could even make them even smaller. It should take conscious effort to vote, and the small target size mentally reinforces this model; that it's not supposed to be the most common action. EDIT: See, clearly the vote targets simply aren't small enough! </s>
- scarface74 7y agoI’ve also down voted comments by mistake...
- zaroth 7y agoThey have added an undown link a while back.
- yoz-y 7y agoBut the undown/unvote links are hard to tap on mobile as well. On firefox on android it's always an exercise in patience.
- slavik81 7y agoAdding undo changed the feel of downvotes a little. Irreversible accidental downvotes were scattered randomly on comments and they made the occasional downvote feel less harsh.
- danek 7y agoI rarely wish to click on the username or time links (“3 hours ago”), but that’s what I click on the most due to size and placement issues (when trying to vote or collapse a thread). I agree one should not blindly vote, but at the same time if you have decided to vote, it shouldn’t be maddeningly difficult and error prone to execute.
- watt 7y agoUsability-wise, isn't it kind of weird that the click target you use the most (upvote arrow) is the smallest of the three? And the ones that you use rarely or never, are so easy to hit by accident. Why must world be like this?
- robocat 7y agoRelated question: what is the easiest way to increase the tap zone of a HTML element using CSS? Aside: I have noticed Safari auto-inceases the touch zone for inputs and elements with ontouch/onclick events (I noticed because I had to fix an issue caused by this!)
- deftturtle 7y agoa {padding: 1rem} This increases area by padding the link. Just don’t want the rap areas of different elements to overlap with too much padding. You can also put a border around the new area, or a box shadow, to indicate larger click area, making it a button sort of: {border: thin solid grey}
- eurasiantiger 7y agoNote that the <a> element is inline by default, which means top and bottom padding is not applied. Set display: inline-block; to have padding apply all around while retaining the element’s flow in the layout.
- deftturtle 7y agoThank you! I’m still learning CSS and will have to adjust my style sheets! :)
- tryptophan 7y agoProbably just add some extra "padding: 5px". All the padding area registers "clicks" for the element.
- fanick 7y agoFor the thread collapsing functionality I think the long press/touch could mitigate the need for pinch zooming. Just hold your thumb on the comment long enough and bang, it's gone. For me this is the most commonly performed interaction with the site.
- 7y ago
- thrower123 7y agoThat's weird - must be an iPad specific thing. It works just fine on Android Chrome.
- nkrisc 7y agoI've noticed that an Android Chrome I have no issues hitting the links on this site, but if I switch over to Firefox I can barely click anything. It's not just this site. That annoyance alone has almost driven me back to Chrome.
- JaRail 7y agoThe trick is to keep your karma below 500. xD
- Beldin 7y agoThanks! As someone who lurks here much, much more than commenting, I wasn't aware that the interface would change over 500 karma. This does put the discussion in a different light (not to mention helps avoids me making comments that don't apply to more karmarific users).
- ebg13 7y agoAll elements are super tiny unless you force zoom on them. The CSS says that all fonts are 10pt or _smaller_. There are 7pt fonts defined in there! Everything else is specified in exact pixels. Vote arrows are 10x10 pixels. Do you realize how small 10x10 pixels is on a modern display?
- reificator 7y ago> Do you realize how small 10x10 pixels is on a modern display? CSS `px` units are not equivalent to a device pixel. https://www.w3.org/TR/css3-values/#absolute-lengths https://www.w3.org/TR/css3-values/#absolute-lengths
- ebg13 7y agoThat doesn't make it better. 10px at 1/96 inch per px makes them only 2.6mm.
- sequoia 7y agoI always accidentally log out when I try to click on my username in iOS.
- graeme 7y agoOh true, that happens to me a lot.
- lostgame 7y agoHehe, I had never thought of this, but you're right. It's not just an iPad, either - it's the same on my Microsoft surface. I got so used to pinch-to-zooming, for so many years, I guess I didn't even consider that usability flaw.
- spraak 7y agoI always need to zoom to vote or collapse threads on mobile
- rapnie 7y agoYes, me too. I suggested adding more spacing between upvote / downvote links for usability on mobile.
- r00fus 7y agoOn mobile, I use MiniHack (there are tons of other HN apps). On desktop, HN's interface works well enough that I don't try to mess with it. I really wish I could do one feature on the desktop/web that mobile MiniHack.app does on mobile - to enforce all links opened launch in reader mode in Safari webview. 99% of the time that's exactly what I want when I click through.
- baby 7y agoPaying to browse a free website? Check premii
- SiebenHeaven 7y agoSeems significantly slower to me on my 3G network compared to hn
- r00fus 7y agoMy time isn't free. I don't mind paying a small up-front fee for usability. Plus, upvotes with HN's site ui on mobile resulted in mis-votes - that's fixed with MiniHack or other HN apps.
- perilunar 7y agoI just use a bookmarklet to increase the font size. It requires an extra tap, but I'd rather do that than use an app. The bookmarklet: javascript:(function()%7Bvar%20n=window.document.createElement(%22style%22);n.setAttribute(%22type%22,%22text/css%22);n.innerText=%22html%7Bfont-size:1.2em!important;line-height:1.3!important;%7Dbody,table,tr,td,.default,.comment,.comhead,.pagetop,span.pagetop%20b,.c00,.yclinks%7Bfont-size:inherit!important;line-height:inherit!important;%7D.pagetop,.title%7Bfont-size:1.2em!important;%7Dtable%23hnmain%7Bwidth:100%25!important;%7Dbody%7Bmargin:0;%7D%22;window.document.head.appendChild(n)%7D)()
- Vinnl 7y agoI had the same issue on mobile. Annoyed me so much, I made a browser extension that increases the padding around those and the collapse buttons. Not useful for you, but for anyone using Firefox for Android, see here: https://addons.mozilla.org/en-GB/firefox/addon/sihn/ https://addons.mozilla.org/en-GB/firefox/addon/sihn/ (It could use some tweaks to keep everything aligned, but the small usability tweak was most important to me.)
- digitalengineer 7y agoThis. Please spend a little more time on the css. And a somewhat bigger up/downvote arrow would be great. I don’t have fat fingers but still accidentally click the wrong one every now and then.
- ezequiel-garzon 7y agoI assume you have JavaScript disabled, right? If so, can you give an example of a similar webpage that doesn’t reload the whole page to reflect your vote?
- Deimorz 7y agoNo, voting doesn't work at all with JS disabled.
- icebraining 7y agoYes, it does. I think you have something weird with your browser: with JS on, it does a light AJAX request, without it, it does the whole redirect thing.
- oplav 7y agohttps://i.imgur.com/9z2VAfa.png https://i.imgur.com/9z2VAfa.png These are my network requests when I vote with JS enabled.
- manigandham 7y agoThe request is the same. The buttons are <a> tags. Without JS, the link is clicked and does a full page reload. With JS, the click is caught and sent as a AJAX request where the response is ignored. It's not any lighter, it's just not reloading the page.
- Deimorz 7y agoWhoops, you're right, it does work either way. The response is the same with or without JS though, it just doesn't do anything with it when JS is enabled (because as a hacky way of doing "AJAX" it sets the voting url as the src value of an <img> tag that doesn't actually get displayed).
- cynwoody 7y agoVoting does work with JS disabled, just not well. The page reloads and re-renders with the UI changes (up-down buttons hidden and unvote link added). However, the reload takes noticeable time, and you lose your scroll location, which is disorienting. With JS enabled, the UI changes happen instantly, and the scroll position doesn't change. The page still reloads, but the reload is directed into a new Image object which is immediately garbage, so it's off the UI timeline. But it's inexplicable bandwidth waste, nonetheless!
- FreeHugs 7y agoThis means that every vote results in a response that's usually around 10KB gzipped I have Facebook open in another window and opened the network inspector to compare it: Just moving the mouse towards the like button created 824KB of data transfer. Not sure if it is because of tracking the mouse movement or if it preloads stuff it thinks my mouse is moving towards. Or maybe it loads stuff that it would display if I held the mouse over something longer. No idea. But it loaded 824KB without me interacting with anything. Just because I moved the mouse. The actual click on the like button added 30KB on top of that.
- p3st1l3nt 7y agoThey might be tracking your browsing habits. For instance if you hover over the like button and rest the cursor there for a moment but you subsequently don't like the post, it could mean that you thought of liking that post but you did not do it for whatever reason. Or they are just prefetching pages.
- Deimorz 7y agoSure, of course it can be much worse, and almost all other sites are. I'm just saying that HN could do it better, because there's no need for it to send a redirect or that full-page response unless the user has JS disabled. With JS, they could send a completely empty HTTP 200 response and it would work exactly the same (it does nothing with the response anyway). Right now HN is probably sending multiple gigabytes worth of responses to voting every day that are all just thrown away.
- noobermin 7y ago>almost all other sites are. That's their point. You're not wrong, you can always be better, but HN is barebones compared to almost all (using the mathematical definition...alright, facetiously using it) other sites.
- netfl0 7y agoHe is wrong. It is not “quite bad”. I appreciate your generosity to him but I am sad to see that is the top comment.
- iambateman 7y agoTruly awful.
- thrwwyw3489 7y ago>This means that every vote results in a response that's usually around 10KB gzipped. Dude, the time to be angry is if your sentence were: "This means that every vote results in a response that's usually around 10MB gzipped." [megabytes, not kilobytes] And: "As of right now, for me, voting on any comment in this thread currently causes a 14MB response and takes about 130 seconds to finish." Because that's the territory of modern web design. If I were a modern product manager on a HN redesign I would just have these requirements: Performance: 1. The site must load for at least 30 seconds before showing the contents of a page. NO EXCEPTIONS. 2. It should use 5-50 megabytes of data per page load. 3. Any action should take 5-20 seconds to complete. Functionality: 4. (No new functionality requirements.) This is based on my extensive experience as a consumer on redesigned apps.
- DC-3 7y agoSince he's probably too modest to mention it himself, the user you're replying to is the founder of the news aggregator and forum site Tildes [1] which is pretty much the gold standard of modern forum site design imho. If anyone has the right to make this comment it's him. [1] https://tildes.net https://tildes.net
- 18pfsmt 7y ago>which is pretty much the gold standard of modern forum site design Wait, what? >open-source link aggregator with no ads or tracking (currently in invite-only alpha) HN is over 12 years old and much larger. Suggesting an alpha-level service is the "gold standard" is pure hyperbole. I'm not familiar with the founder, so I am not making any judgement; and, I support the basic premise of their project.
- Deimorz 7y agoI think they were just talking about the design. HN is certainly a lot more active and successful overall, but it's extremely minimal for both design and functionality (which is part of its appeal). Tildes's design has a lot more to it, including better responsiveness for mobile use, a built-in theme system with multiple themes (including dark ones), full markdown (CommonMark/"GitHub Flavored Markdown") support, syntax highlighting for code, etc. There are lots of aspects of it that would be nice to have on HN.
- raverbashing 7y agoI'm going to agree and say there are minor usability/functionality quirks like these For example, adding a story to favourites shouldn't redirect it back to the main page At the same time there were a couple of minor improvements "recently", like the undo feature for votes which were a bit of high-impact low hanging fruit. Apart from that I'm just happy I can customize the level of orangeness on the top bar to a lighter shade
- pizza234 7y agoAlso, worth mentioning the insufficient formatting features. Quoting is not supported, and is quite important for forum discussions' UX.
- ian0 7y ago>> Also, worth mentioning the insufficient formatting features. Quoting is not supported, and is quite important for forum discussions' UX Exactly
- grawprog 7y ago>Exactly But it doesn't turn green.
- pizza234 7y agoI'm not sure if this is sarcastic or not, but the problem is when the quoted text is longer and/or multiline, and especially when it's both. You typically see users working this around with spacing, and (sometimes) other users complaining (rightfully) that they can't see the full text on mobile without scrolling. This is exacerbated by the fact that then HN rendering only has the "<p>" concept, not the "<br>". If one works this around using the greater than symbol, and there are several entries, it blends too much with user-typed text. It's not a very big deal, but it's pretty much standard feature in forum engines, and the lack of it makes the text outlook unnecessarily worse.
- Jaruzel 7y agoFor me, the only formatting issue is the code blocks that people use for quoting from linked articles - it doesn't wrap properly on mobile. Other than that I like the minimalism. I even think the lack of automatically quoting the parent comment is a good thing, as it forces the user to think about the part of the parent they want to quote instead of wholesale quoting it all as the lazy option. If auto-quoting existed the comments would be 40% quotes of each other, and much harder to read.
- tripzilch 7y ago
- zeta0134 7y agoOkay quick thought exercise. HN doesn't use a react framework and is quite lightweight on clientside JavaScript. How many upvotes does it take using this system before the total data size transmitted (original page + modifications) is, in sum total, larger than a fresh load of, say, Twitter? The reality is that for the bulk of users, votes are an uncommon interaction; most of us are here to read the articles and view the comments. The additional complexity needed to make votes small has an upfront cost, and in this case, I feel the simplicity of the base interface is the better thing to optimize for, and HN's designers appear to agree. 10 kB for what is effectively a server-side page reload (which probably gracefully degrades for folks running NoScript) seems fine.
- novok 7y agoBut they're already using javascript, and the issue is the backend response, so this would only be a backend optimization then and doesn't require any fancy frameworks?
- pmarin 7y agoNo, It’s not needed. I have been using it without javascript for years.
- nindalf 7y agoYou aren’t understanding the person you’re replying to. No one is contesting that HN can work without JS. But for those who have JS enabled, it uses JS. For these people the optimisation could be implemented.
- manigandham 7y agoIt's nothing more than an extra header or query param to denote an AJAX request. Then the server can respond with an empty 200/204 status code instead of the entire HTML page. It's an hour of work and would actually save resources. None of this requires a front-end framework.
- 7y ago
- NicoJuicy 7y agoReloading the page is way easier then rebuilding the entire comment section, should something be renewed ( eg. a new comment). It also (partially) removes the requirement for live-pages on an active post here.
- nothrabannosir 7y agoThis isn't about reloading the page on voting with JS disabled; it's about the XHR call when you have JS enabled. It goes to the same endpoint as a non-JS call, ultimately loading the new page, but completely discards it (as it is an XHR call not an actual pageload).
- netfl0 7y agoSeriously, this is not an issue.
- oneepic 7y ago+1, thank you.
- pmarin 7y agoThis is probably the reason upvotes still work with javascript dissabled. It’s a feature.
- iforgotpassword 7y agoSending the same reply regardless of whether the user is using Js or not is not a feature. It's lazy. You wouldn't even need to change a single thing about the front end to fix this on the back end, since the js request via Ajax already has an additional header field (x-sent-via: Xmlhttprequest or something along the lines). This might be as simple as wrapping output generation in a single if-statement.
- oefrha 7y ago> the js request via Ajax already has an additional header field No, X-Requested-With is a non-standard header set by frameworks like jQuery. But it’s trivial to set something like that with either XHR or fetch.
- iforgotpassword 7y agoThanks for the heads up. The only time I came in contact with actual web dev was indeed jQuery, and the couple other times I looked at the dev tools might have been pages using it as well.
- harel 7y agoFrom my experience when something like that happens, i.e., HackerNews sends back 10K after an upvote, there is a reason for that. We might not know the reason, but the developer who did that had one and at the time it was probably a good and valid reason (and might still be).
- krapp 7y ago>We might not know the reason, but the developer who did that had one and at the time it was probably a good and valid reason (and might still be). People seem to assume every aspect of this forum has some brilliant, purposefully elegant rationale behind it, but the truth is PG designed the language (and the forum) to be experimented with and iterated upon, and likely didn't intend the forum to be considered "finished." This software isn't a masters' thesis, it's a proof of concept for a web application in Arc lisp. Unfortunately, a cargo cult mentality has kind of grown up around this forum and every aspect of it is treated as sacred and not to be touched because "there must be a reason for it." The reason is probably that PG didn't care enough to iterate on the first working solution he came up with.
- harel 7y agoVery possible. Also possible there was a valid reason at the time, and even though it's no longer valid nobody bothered to look into it. All I'm saying is that "created" things exist/happen for a reason, which is not always obvious to a 3rd party. I've had this happen with my own code. I find some old code that looks really dumb, no idea why I wrote it like that. I then spend time to refactor it properly, only to hit some obscure edge case which ultimately leads me back to the 'dumb code'
- deleted 7y ago[deleted]