33 ms·

The Single Piece of JavaScript on HN

272 points by qasar 11y ago

mchahn 11y ago
So without JS enabled you can't vote?
- jey 11y ago
  No, you just can't vote without triggering a page navigation. (It's probably HTTP POST with redirect.)
  - krapp 11y ago
    Seems to be a GET request, oddly enough.
  - tylerlh 11y ago
    It's a GET request with an auth token passed as a query parameter.
- z3t4 11y ago
  You can vote without JavaScript! This is the old-school way; you first make your site work without JavaScript, then add JS to enhance it.
- gordonzhu 11y ago
  Without JS, return false from the vote function wouldn't happen, so I guess clicking upvote would follow node.href, which would send the vote to the server. It would work anyway, there would just be a redirect that would trigger a page refresh. Pretty cool. Just tried it out and confirmed.
- mchahn 11y ago
  I'm getting clobbered with downvotes. I need to ask less stupid questions. The problem is that I don't really have a way to know they are stupid.
  - krapp 11y ago
    The downvotes are how you know.
    - mchahn 11y ago
      It would be great if I could delete a post and get all the points back. (grin)
      - hk__2 11y ago
        That would make the whole downvote system useless. Just post spam comments everywhere then delete them after a day and you’ll always have a positive karma.
        jewbacca 11y ago
        > That would make the whole downvote system useless This would not remotely "make the whole downvote system useless". The primary use of the voting system here is to sort out discussion by subjective value. That would only be very indirectly affected (through the very distantly secondary use of karma to confer downvoting ability). If anything, it would debatably enhance the primary use of the downvote system, by giving authors of unpopular comments an incentive to remove from the discussion what the community has judged to be noise. Though I would personally hate that, as a fundamentalist anti-deletionist, and as a frequent dissenter from this community's judgements of value.
        mchahn 11y ago
        Ok, I"m facing an armageddon of downvotes but why the heck was this downvoted? He made a point, that while arguable, is a valid comment. Maybe the discussion of downvoting is bringing more downvotes. Jeeez. Edit: My upvote brought him back to zero, for now.
        Retra 11y ago
        It may be because this whole discussion is off-topic and not very productive.
cypherpunks01 11y ago
function hide(id) { var el = document.getElementById(id); if (el) { el.style.visibility = 'hidden'; } } function vote(node) { var v = node.id.split(/_/); var item = v[1]; hide('up_' + item); hide('down_' + item); var ping = new Image(); ping.src = node.href; return false; }
- gordonzhu 11y ago
  What's most fascinating to me about this isn't the simplicity, it's that this code has lived for so long with almost no changes. It's a great counter-example to all the recent articles about JavaScript fatigue. It's good for us to see real examples of sites that aren't caught up in the framework of the week hype. At the end of the day we're trying to make stuff that works. ES5 vs ES6, React vs Angular vs. Ember vs. Aurelia, Angular 1 vs Angular 2, even server rendered templates vs. single page apps - it all matters a lot less than we think.
  - aaronbrethorst 11y ago
    For the majority of cases that I've seen, these arguments are simply excuses to avoid doing real work. It's way more fun to decide whether your amazingly awesome Unicorn startup is going to use React or Angular, or Express vs. Rails, or whatever than it is to actually go through the hard work of building a customer base and making money.
    - gordonzhu 11y ago
      YES! totally agree For a subset of us, framework authors, open source contributors, etc. It's very useful to keep up to date on the latest trends. For example, the Angular team has borrowed techniques from React. It helps for them to keep up with things. For people like me though, let's be honest. I don't need to do the latest thing.
      - pixel67 11y ago
        Funny you said that, I was looking into ng2 and they've borrowed a few things from the React community. It's all good, I'm glad to see that "framework A is better than framework B" mentality die away and everyone just uses the right tool for the right job.
seanalltogether 11y ago
If we ever make it around to a second piece of javascript on here, can I request that it be a collapse comment function? I promise i won't ask for anything else.
- dikaiosune 11y ago
  https://chrome.google.com/webstore/detail/hacker-news-collapse/pdlifinplmfmoeppfooipommbdljhdmp?utm_source=chrome-app-launcher-info-dialog https://chrome.google.com/webstore/detail/hacker-news-collap... I don't know about other browsers, but this works OK on Chrome.
- deleted 11y ago
  [deleted]
- lurker2015 11y ago
  Is there anything like Reddit Enhancement Suite for HN? Any recommendations out there?
  - meesles 11y ago
    https://chrome.google.com/webstore/detail/hackernew/lgoghlndihpmbbgmbpjohilcphbfhddd?utm_source=chrome-app-launcher-info-dialog https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...
  - thieving_magpie 11y ago
    Yes, aptly named "Hacker News Enhancement Suite". I use it and think it does fine, mainly just for collapsing comments. https://chrome.google.com/webstore/detail/hacker-news-enhancement-s/bappiabcodbpphnojdiaddhnilfnjmpm?utm_source=chrome-app-launcher-info-dialog https://chrome.google.com/webstore/detail/hacker-news-enhanc...
  - deleted 11y ago
    [deleted]
  - deleted 11y ago
    [deleted]
sillysaurus3 11y ago
Little-known fact? Man, this place really got big. :)
- krapp 11y ago
  Probably not "little known" so much as "little cared about."
meesles 11y ago
Not much to say, really. Just some simple code. What I'm curious is if someone can reiimplement this without and javascript.
- krapp 11y ago
  Without javascript you would just keep track of which comments the logged-in user voted on in the requested thread and not render those buttons.
  - ggreer 11y ago
    HN has to do that anyway. The hide() and vote() functions only run on click. If you refresh the page, you'll see the response lacks anchor tags for comments/posts you've voted on. Those tags are replaced with a spacer image.
- Normal_gaussian 11y ago
  Well there appear to be two things stopping this: - Hiding two elements on the page (one can be hidden with the CSS :visited selector) - Remaining with your position on the page whilst also sending a message to the server and without opening new windows. So the only way to do the task is to send a full request to the server which would return you to the page with the buttons correctly disabled. Extra load on the server of course, and a bit of an annoying user experience, but doable - hence why this is the disabled fallback.
  - showerst 11y ago
    1. I think you could hide both with some adjacent sibling selector trickery. (Assuming you can select a sibling of a :visited) 2. Could you set a background image on a visited to a 1x1 gif of the tracking url? Not sure if CSS lets you do that. I know there are some limitations around :visited specifically to stop privacy snooping, but out so I can't look up the specifics right now.
    - Normal_gaussian 11y ago
kentor 11y ago
He exposed his auth id
- gordonzhu 11y ago
  The video mentions this was a dummy account created just for this video.
z3t4 11y ago
Seeing the "auth" query. There is a chance that HN was "too clever" about it, and it might be possible to use other users id to upvote, or upvote many times, if you can figure out the hash algorithm.
- firloop 11y ago
  This has already been exploited at least once: https://news.ycombinator.com/item?id=639976 https://news.ycombinator.com/item?id=639976
wrigby 11y ago
When you're not logged in, the `onclick` attributes aren't present in the anchor tags.
- gordonzhu 11y ago
  When you try to vote it will ask you to log in.
zbruhnke 11y ago
and yes Author is right ... you need 500+ Karma to downvote
- andrelaszlo 11y ago
  Can you even downvote root items, i.e. topics? I have 500+, and I can't.
amelius 11y ago
Now if only I could convince my UX designer that websites without much JavaScript are cool.
- pmlnr 11y ago
  Show them these: http://tympanus.net/codrops/category/blueprints/ http://tympanus.net/codrops/category/blueprints/ A lot of those are either without javascript or with minimal, vanilla js.
mwcampbell 11y ago
The HTTP request for voting should be a POST request, not a GET request, since it changes state. So both the JS hack involving an image and the non-JS fallback are broken. The JS function should use XHR, and I guess the non-JS fallback should be a form with an image button, not a link.
- podgib 11y ago
  This code is simple, works reliably and has done so for a long time with no changes. That seems like the opposite of broken to me
  - 72deluxe 11y ago
    But GET requests should be idempotent.
    - mrweasel 11y ago
      But it is idempotent in this case. The server keeps track of your votes, so regardless of the number of times you do the same GET, the result is the same.
      - deleted 11y ago
        [deleted]
      - okso 11y ago
        At the moment, but in the future the browser might decide to prefetch the pages behind these links, hence voting against your will. > (...) we may expand link prefetching support to include prefetching <a> tags, which include a relation type of next or prefetch in the future. Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefe...
        ycombobreaker 11y ago
        Hopefully the HN voting links never contain relation types which would imply prefetching! I recall that Firefox did some aggressive prefetching in the past, and some websites (maybe Wolfram?) temporarily blocked IPs which did the prefetching due to the extra load they were putting on the servers. It's very dicey, requesting URLs for a user which would have a low probability of being followed. Certainly, requesting tens or hundreds of URLs from a single HN page would be a reportable bug for either the browser (for wasting resources) or the site (for misrepresenting hyperlink attributes). Regardless of all of this, if the HN server filters out duplicate votes, then the idempotence (is that a word?) of the request is satisfied, and it is OK to be a GET. [EDIT: after reading https://news.ycombinator.com/item?id=11308231 https://news.ycombinator.com/item?id=11308231 my point here is probably invalid, because voting is not a "safe" method. Voting alters the order of posts that future readers see, which is a material change for a discussion site. In contrast, something like a YT view-count tally doesn't effect a material change in the core material.] Regardless of that, IMHO a GET request that changes the "fundamental" state of the world (not just UI state e.g. pagination/settings) is somewhat "rude" to begin with, because of the common expectation that GET requests are "harmless" and POST requests can change things. But like, that's just my opinion, man.
marknadal 11y ago
Why was this post taken off the homepage? EDIT: Now it has been restored, odd.
iamleppert 11y ago
Why isn't this wrapped in a react component and written with ES7 lambda functions, transpiled from JSX (using babel of course)? God I hate what has happened to the web these days.
- awqrre 11y ago
  binary is next...
  - chei0aiV 11y ago
    https://en.wikipedia.org/wiki/WebAssembly https://en.wikipedia.org/wiki/WebAssembly
- tim333 11y ago
  The funny thing is that it's always been possible to write a bit of plain javascript but you don't seem to get much respect for that compared with the buzzword stuff.
- nathancahill 11y ago
  The funny thing is, it's actually those things (along with Typescript, Flux, etc) that allows us to write readable and maintainable JS that doesn't devolve into spaghetti after a year.
smadge 11y ago
A few weeks ago I turned off javascript in my browser out of principle and to see if progressive enhancement was still a thing web developers cared about (hint: it's not). I was pleased that HN worked fine, and the only annoying thing was that voting caused a page reload. It's nice to see this get the attention it deserves! Developers! You probably don't need javascript to achieve 90% of your goals. It will just slow your page load speeds.
- sotojuan 11y ago
  But they need it to keep their job :p
  - DonHopkins 11y ago
    But they'd have more hours to bill if they bothered to make their web pages work with JavaScript disabled!
- microcolonel 11y ago
  For me it doesn't bother reloading; but it shows up when I reload.
- mikekchar 11y ago
  This is true, however javascript is a tool that can be useful if you are building something that provides an interactive experience for the user. In such a scenario, I have to write code somewhere to provide the experience. If I am writing it on the server side I run into several issues. It uses server resources. For example, let's say the user is looking at a large dataset. They want to sort/search/filter that dataset. Given that they already have the data in their client, it often makes sense to use their resources to sort/search/filter the data. This lightens the load on the server. User actions suffer from latency talking to the server. Again, if the user already has all the data that they want, not talking to the server can often result in a better user experience. Imagine something like an incremental search. Such a thing might even be impossible to implement server side due to latency issues. Implementing client side functionality in the server can add to software complexity. Things like keeping track of user state can be handled much more cleanly on the client side. Very often it makes tremendous sense not to make a "web page" for something that needs a lot of user interaction. Instead you want a stand alone application that gets data (without presentation) from a server. Writing your application in javascript, running it in a browser, using HTML as a presentation layer and using HTTP as your communication protocol is not a stupid way of implementing such an application (and I say this having written these kinds of applications with a variety of different technologies). If you are writing a web page that is intended to simply present data, then Javascript may very well be unnecessary. For me, though, this does not come anywhere close to 90% of my goals.
razwall 11y ago
CSRF anyone?
- fabulist 11y ago
  Try it. You'll find HN an interesting target.
mdavidn 11y ago
Using this approach, a badly written prefetch add-on might automatically vote on everything. Any request that modifies server-side state really should use POST or PUT (or, at the very least, append a CSRF token in JavaScript). I eventually find this bug on just about every project. One time a user complained that all comments would disappear from her posts. Found that an add-on was prefetching all "delete" links, visible only to her.
- Semiapies 11y ago
  Yes, this is an old problem. It came up with early versions of Rails scaffolding, which only used GET at the time. There's no excuse for deleting with GET.
  - dividuum 11y ago
    Reminds me of an old story about an internal wiki at a company I once worked. They tried to add a search feature which initially crawled all pages. Once that was done, the complete wiki was empty...
hayksaakian 11y ago
thanks, i learned how to use the chrome JS debugger today
lucb1e 11y ago
What I find interesting is that even this little piece could be done in plain HTML using an iframe for each vote button. The obvious disadvantage is http requests for each vote button, but even a middle ground could be chosen where the vote buttons submit to a hidden iframe and just don't disappear without Javascript. Perhaps even, but I'm not certain, they could be made to disappear using css' a:visited, loosing zero functionality and having no disadvantages.
cpg 11y ago
Oh the irony .. > Want to take your AngularJS skills to the next level? If so, check out our flagship product, Angular Course. Through 115 HD videos, you'll learn Angular and the latest best practices as you build a fictional startup.
- gordonzhu 11y ago
  [I made the video] I don't think this is ironic at all. When I mentioned "framework of the week hype" in my initial comment (https://news.ycombinator.com/item?id=11308043 https://news.ycombinator.com/item?id=11308043), I was thinking specifically about how people are handling the transition from Angular 1 to 2. I am in no way advocating using plain JavaScript to build your app. I even mentioned in the video that I rarely work with plain JavaScript. There's a lot of distraction around Angular 2 for both existing and new developers, when it's pretty clear to me that Angular 1.9.x will pretty much look like Angular 2. If you read the release notes, this is very clear. They said the the primary theme for the 1.5 release was improving the upgrade path to Angular 2. http://angularjs.blogspot.com/2016/02/angular-150-ennoblement-facilitation.html http://angularjs.blogspot.com/2016/02/angular-150-ennoblemen... What this means is that keeping up with the Angular 1 release cycle will gradually transition you to Angular 2. But everyone in the community seems to think this is boring and wants to blow up their apps and go to Angular 2 right away. This is the kind of thinking that I wish we'd see less of. Rushing to 2 when it's still in beta makes no sense from a business perspective. It only makes sense from a "I like to tinker with the new thing and try new stuff because it's fun" perspective. Some people will say it's a performance issue (since Angular 2 is better in that respect), but for the vast majority of apps that want to upgrade to 2 now, the improvements won't be noticeable.
Illniyar 11y ago
I see a lot of comments here about how not having js on the page is a great thing and lets get back to the old days. Lets be frank here, HN's UI is not good. At the very least it needs collapsible comments and responsiveness to mobile. The fact that HN is a success is despite its bad UI, or maybe because of the many HN readers out there that fix all the broken stuff on the page. While js on sites have surely overgrown, and there is a place for minimalism, I really don't want to go back to the old days where every click reloaded the page and interactivity was really only done in flash.
- jmiserez 11y ago
  >responsiveness to mobile. Please no. I like being able to zoom in or out, and too often "responsive" means no zoom and either huge or miniscule text.
  - mynewtb 11y ago
    Opera lets you override that!
    - paulryanrogers 11y ago
      This. Their text size and reflow are all that I miss from Opera Mobile.
  - cname 11y ago
    "Responsive" doesn't mean those things. Just because some sites fail to design a decent mobile experience, doesn't mean HN (or you or anyone else) can't.
    - jmiserez 11y ago
      I remember some of the early HTC Android phones had text reflow enabled by default. That was almost always good enough and it would be "responsive", but for some reason mobile browsers don't seem to offer it anymore.
- 11y ago
gedrap 11y ago
Is it just me, or it sounds... cult-ish / overly dramatic? >> it wasn’t obvious to me that Hacker News had any JavaScript at all. I guess he never votes. >> I thought it would be weird and complicated, but it turned out to be quite the opposite. You’ll have to watch the video to see what I mean. Well, it sends a HTTP request and hides an element. How on earth can it be complicated? I mean, ok, you can use The Framework Of The Week to do that and just that. Not everything that is related to HN/YC is some magical rocket science.
- rohanprabhu 11y ago
  Not just you. I don't see why this warrants a 12 minute video.
  - st3v3ndungan 11y ago
    I'll give you one reason. I've never done any front-end stuff before. But maybe a month ago, I got curious. Perhaps because I read HN everyday. And if you try to immerse yourself in the front-end world, you get 'yeah, learn HTML/CSS/JS, BUT, also learn Angular, React, JQuery, et. al...' It's good to get a reminder that Javascript in and of itself is a capable language. I'm sure I'm not the only one in this camp. Maybe it didn't need to be 12 minutes, and it was certainly more of an 'oh, interesting' than anything, but I'm glad I took the time to watch it.
    - gordonzhu 11y ago
      Thanks for the perspective. This is why I encourage all developers to take some time to teach new people. The "everyone knows this obviously" attitude goes away very quickly if you start doing this. The aim of the video was to make it accessible to just about everybody. So if you know this stuff you can watch the first minute and stop the video and get value out of it. On the other hand, if you're a beginner and you just did Codecademy, you can watch it through and follow it too.
plugnburn 11y ago
So yeah, let's all go back to the stone age just because of some purist morons with JS disabled. In my honest opinion, the only possibility browser vendors should disable these days is the possibility to turn JS off.
rawTruthHurts 11y ago
Well, if that's all you need, that's all you need.
teddyh 11y ago
I wish the code had a license. It is easy enough to add a license to inline Javascript so that it is machine-readable: https://www.gnu.org/philosophy/javascript-trap.html#AppendixA https://www.gnu.org/philosophy/javascript-trap.html#Appendix...
- hjek 11y ago
  Wouldn't this piece of code be classified as "trivial" by the policy in the link, and therefore not need it? Anyway, if you download the source and look in the 'copyright' file it says: "This software is copyright (c) Paul Graham and Robert Morris. Permission to use it is granted under the Perl Foundations's Artistic License 2.0" http://www.arclanguage.org/arc3.1.tar http://www.arclanguage.org/arc3.1.tar (I'd be more worried about the license of the Algolia Search provided on Hacker News. Way more JS there. It's even using AngularJS)
pmlnr 11y ago
Oldschool, smart, mini javascript as progressive enhancement. Everyone should learn the basics before frameworks. ( Also: http://vanilla-js.com/ http://vanilla-js.com/ )

272 points by qasar 11y ago

mchahn 11y ago

So without JS enabled you can't vote?

jey 11y ago
No, you just can't vote without triggering a page navigation. (It's probably HTTP POST with redirect.)
- krapp 11y ago
  Seems to be a GET request, oddly enough.
- tylerlh 11y ago
  It's a GET request with an auth token passed as a query parameter.
z3t4 11y ago
You can vote without JavaScript! This is the old-school way; you first make your site work without JavaScript, then add JS to enhance it.
gordonzhu 11y ago
Without JS, return false from the vote function wouldn't happen, so I guess clicking upvote would follow node.href, which would send the vote to the server. It would work anyway, there would just be a redirect that would trigger a page refresh. Pretty cool. Just tried it out and confirmed.
mchahn 11y ago
I'm getting clobbered with downvotes. I need to ask less stupid questions. The problem is that I don't really have a way to know they are stupid.
- krapp 11y ago
  The downvotes are how you know.
  - mchahn 11y ago
    It would be great if I could delete a post and get all the points back. (grin)
    - hk__2 11y ago
      That would make the whole downvote system useless. Just post spam comments everywhere then delete them after a day and you’ll always have a positive karma.
      - jewbacca 11y ago
        > That would make the whole downvote system useless This would not remotely "make the whole downvote system useless". The primary use of the voting system here is to sort out discussion by subjective value. That would only be very indirectly affected (through the very distantly secondary use of karma to confer downvoting ability). If anything, it would debatably enhance the primary use of the downvote system, by giving authors of unpopular comments an incentive to remove from the discussion what the community has judged to be noise. Though I would personally hate that, as a fundamentalist anti-deletionist, and as a frequent dissenter from this community's judgements of value.
      - mchahn 11y ago
        Ok, I"m facing an armageddon of downvotes but why the heck was this downvoted? He made a point, that while arguable, is a valid comment. Maybe the discussion of downvoting is bringing more downvotes. Jeeez. Edit: My upvote brought him back to zero, for now.
        Retra 11y ago
        It may be because this whole discussion is off-topic and not very productive.

cypherpunks01 11y ago

gordonzhu 11y ago
What's most fascinating to me about this isn't the simplicity, it's that this code has lived for so long with almost no changes. It's a great counter-example to all the recent articles about JavaScript fatigue. It's good for us to see real examples of sites that aren't caught up in the framework of the week hype. At the end of the day we're trying to make stuff that works. ES5 vs ES6, React vs Angular vs. Ember vs. Aurelia, Angular 1 vs Angular 2, even server rendered templates vs. single page apps - it all matters a lot less than we think.
- aaronbrethorst 11y ago
  For the majority of cases that I've seen, these arguments are simply excuses to avoid doing real work. It's way more fun to decide whether your amazingly awesome Unicorn startup is going to use React or Angular, or Express vs. Rails, or whatever than it is to actually go through the hard work of building a customer base and making money.
  - gordonzhu 11y ago
    YES! totally agree For a subset of us, framework authors, open source contributors, etc. It's very useful to keep up to date on the latest trends. For example, the Angular team has borrowed techniques from React. It helps for them to keep up with things. For people like me though, let's be honest. I don't need to do the latest thing.
    - pixel67 11y ago
      Funny you said that, I was looking into ng2 and they've borrowed a few things from the React community. It's all good, I'm glad to see that "framework A is better than framework B" mentality die away and everyone just uses the right tool for the right job.

seanalltogether 11y ago

If we ever make it around to a second piece of javascript on here, can I request that it be a collapse comment function? I promise i won't ask for anything else.

dikaiosune 11y ago
https://chrome.google.com/webstore/detail/hacker-news-collapse/pdlifinplmfmoeppfooipommbdljhdmp?utm_source=chrome-app-launcher-info-dialog https://chrome.google.com/webstore/detail/hacker-news-collap... I don't know about other browsers, but this works OK on Chrome.
deleted 11y ago
[deleted]
lurker2015 11y ago
Is there anything like Reddit Enhancement Suite for HN? Any recommendations out there?
- meesles 11y ago
  https://chrome.google.com/webstore/detail/hackernew/lgoghlndihpmbbgmbpjohilcphbfhddd?utm_source=chrome-app-launcher-info-dialog https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...
- thieving_magpie 11y ago
  Yes, aptly named "Hacker News Enhancement Suite". I use it and think it does fine, mainly just for collapsing comments. https://chrome.google.com/webstore/detail/hacker-news-enhancement-s/bappiabcodbpphnojdiaddhnilfnjmpm?utm_source=chrome-app-launcher-info-dialog https://chrome.google.com/webstore/detail/hacker-news-enhanc...
- deleted 11y ago
  [deleted]
- deleted 11y ago
  [deleted]

sillysaurus3 11y ago

Little-known fact? Man, this place really got big. :)

krapp 11y ago
Probably not "little known" so much as "little cared about."

meesles 11y ago

Not much to say, really. Just some simple code. What I'm curious is if someone can reiimplement this without and javascript.

krapp 11y ago
Without javascript you would just keep track of which comments the logged-in user voted on in the requested thread and not render those buttons.
- ggreer 11y ago
  HN has to do that anyway. The hide() and vote() functions only run on click. If you refresh the page, you'll see the response lacks anchor tags for comments/posts you've voted on. Those tags are replaced with a spacer image.
Normal_gaussian 11y ago
Well there appear to be two things stopping this: - Hiding two elements on the page (one can be hidden with the CSS :visited selector) - Remaining with your position on the page whilst also sending a message to the server and without opening new windows. So the only way to do the task is to send a full request to the server which would return you to the page with the buttons correctly disabled. Extra load on the server of course, and a bit of an annoying user experience, but doable - hence why this is the disabled fallback.
- showerst 11y ago
  1. I think you could hide both with some adjacent sibling selector trickery. (Assuming you can select a sibling of a :visited) 2. Could you set a background image on a visited to a 1x1 gif of the tracking url? Not sure if CSS lets you do that. I know there are some limitations around :visited specifically to stop privacy snooping, but out so I can't look up the specifics right now.
  - Normal_gaussian 11y ago

kentor 11y ago

He exposed his auth id

gordonzhu 11y ago
The video mentions this was a dummy account created just for this video.

z3t4 11y ago

Seeing the "auth" query. There is a chance that HN was "too clever" about it, and it might be possible to use other users id to upvote, or upvote many times, if you can figure out the hash algorithm.

firloop 11y ago
This has already been exploited at least once: https://news.ycombinator.com/item?id=639976 https://news.ycombinator.com/item?id=639976

wrigby 11y ago

When you're not logged in, the `onclick` attributes aren't present in the anchor tags.

gordonzhu 11y ago
When you try to vote it will ask you to log in.

zbruhnke 11y ago

and yes Author is right ... you need 500+ Karma to downvote

andrelaszlo 11y ago
Can you even downvote root items, i.e. topics? I have 500+, and I can't.

amelius 11y ago

Now if only I could convince my UX designer that websites without much JavaScript are cool.

pmlnr 11y ago
Show them these: http://tympanus.net/codrops/category/blueprints/ http://tympanus.net/codrops/category/blueprints/ A lot of those are either without javascript or with minimal, vanilla js.

mwcampbell 11y ago

The HTTP request for voting should be a POST request, not a GET request, since it changes state. So both the JS hack involving an image and the non-JS fallback are broken. The JS function should use XHR, and I guess the non-JS fallback should be a form with an image button, not a link.

podgib 11y ago
This code is simple, works reliably and has done so for a long time with no changes. That seems like the opposite of broken to me
- 72deluxe 11y ago
  But GET requests should be idempotent.
  - mrweasel 11y ago
    But it is idempotent in this case. The server keeps track of your votes, so regardless of the number of times you do the same GET, the result is the same.
    - deleted 11y ago
      [deleted]
    - okso 11y ago
      At the moment, but in the future the browser might decide to prefetch the pages behind these links, hence voting against your will. > (...) we may expand link prefetching support to include prefetching <a> tags, which include a relation type of next or prefetch in the future. Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefe...
      - ycombobreaker 11y ago
        Hopefully the HN voting links never contain relation types which would imply prefetching! I recall that Firefox did some aggressive prefetching in the past, and some websites (maybe Wolfram?) temporarily blocked IPs which did the prefetching due to the extra load they were putting on the servers. It's very dicey, requesting URLs for a user which would have a low probability of being followed. Certainly, requesting tens or hundreds of URLs from a single HN page would be a reportable bug for either the browser (for wasting resources) or the site (for misrepresenting hyperlink attributes). Regardless of all of this, if the HN server filters out duplicate votes, then the idempotence (is that a word?) of the request is satisfied, and it is OK to be a GET. [EDIT: after reading https://news.ycombinator.com/item?id=11308231 https://news.ycombinator.com/item?id=11308231 my point here is probably invalid, because voting is not a "safe" method. Voting alters the order of posts that future readers see, which is a material change for a discussion site. In contrast, something like a YT view-count tally doesn't effect a material change in the core material.] Regardless of that, IMHO a GET request that changes the "fundamental" state of the world (not just UI state e.g. pagination/settings) is somewhat "rude" to begin with, because of the common expectation that GET requests are "harmless" and POST requests can change things. But like, that's just my opinion, man.

marknadal 11y ago

Why was this post taken off the homepage? EDIT: Now it has been restored, odd.

iamleppert 11y ago

Why isn't this wrapped in a react component and written with ES7 lambda functions, transpiled from JSX (using babel of course)? God I hate what has happened to the web these days.

awqrre 11y ago
binary is next...
- chei0aiV 11y ago
  https://en.wikipedia.org/wiki/WebAssembly https://en.wikipedia.org/wiki/WebAssembly
tim333 11y ago
The funny thing is that it's always been possible to write a bit of plain javascript but you don't seem to get much respect for that compared with the buzzword stuff.
nathancahill 11y ago
The funny thing is, it's actually those things (along with Typescript, Flux, etc) that allows us to write readable and maintainable JS that doesn't devolve into spaghetti after a year.

smadge 11y ago

A few weeks ago I turned off javascript in my browser out of principle and to see if progressive enhancement was still a thing web developers cared about (hint: it's not). I was pleased that HN worked fine, and the only annoying thing was that voting caused a page reload. It's nice to see this get the attention it deserves! Developers! You probably don't need javascript to achieve 90% of your goals. It will just slow your page load speeds.

sotojuan 11y ago
But they need it to keep their job :p
- DonHopkins 11y ago
  But they'd have more hours to bill if they bothered to make their web pages work with JavaScript disabled!
microcolonel 11y ago
For me it doesn't bother reloading; but it shows up when I reload.
mikekchar 11y ago
This is true, however javascript is a tool that can be useful if you are building something that provides an interactive experience for the user. In such a scenario, I have to write code somewhere to provide the experience. If I am writing it on the server side I run into several issues. It uses server resources. For example, let's say the user is looking at a large dataset. They want to sort/search/filter that dataset. Given that they already have the data in their client, it often makes sense to use their resources to sort/search/filter the data. This lightens the load on the server. User actions suffer from latency talking to the server. Again, if the user already has all the data that they want, not talking to the server can often result in a better user experience. Imagine something like an incremental search. Such a thing might even be impossible to implement server side due to latency issues. Implementing client side functionality in the server can add to software complexity. Things like keeping track of user state can be handled much more cleanly on the client side. Very often it makes tremendous sense not to make a "web page" for something that needs a lot of user interaction. Instead you want a stand alone application that gets data (without presentation) from a server. Writing your application in javascript, running it in a browser, using HTML as a presentation layer and using HTTP as your communication protocol is not a stupid way of implementing such an application (and I say this having written these kinds of applications with a variety of different technologies). If you are writing a web page that is intended to simply present data, then Javascript may very well be unnecessary. For me, though, this does not come anywhere close to 90% of my goals.

razwall 11y ago

CSRF anyone?

fabulist 11y ago
Try it. You'll find HN an interesting target.

mdavidn 11y ago

Using this approach, a badly written prefetch add-on might automatically vote on everything. Any request that modifies server-side state really should use POST or PUT (or, at the very least, append a CSRF token in JavaScript). I eventually find this bug on just about every project. One time a user complained that all comments would disappear from her posts. Found that an add-on was prefetching all "delete" links, visible only to her.

Semiapies 11y ago
Yes, this is an old problem. It came up with early versions of Rails scaffolding, which only used GET at the time. There's no excuse for deleting with GET.
- dividuum 11y ago
  Reminds me of an old story about an internal wiki at a company I once worked. They tried to add a search feature which initially crawled all pages. Once that was done, the complete wiki was empty...

hayksaakian 11y ago

thanks, i learned how to use the chrome JS debugger today

lucb1e 11y ago

What I find interesting is that even this little piece could be done in plain HTML using an iframe for each vote button. The obvious disadvantage is http requests for each vote button, but even a middle ground could be chosen where the vote buttons submit to a hidden iframe and just don't disappear without Javascript. Perhaps even, but I'm not certain, they could be made to disappear using css' a:visited, loosing zero functionality and having no disadvantages.

cpg 11y ago

Oh the irony .. > Want to take your AngularJS skills to the next level? If so, check out our flagship product, Angular Course. Through 115 HD videos, you'll learn Angular and the latest best practices as you build a fictional startup.

gordonzhu 11y ago
[I made the video] I don't think this is ironic at all. When I mentioned "framework of the week hype" in my initial comment (https://news.ycombinator.com/item?id=11308043 https://news.ycombinator.com/item?id=11308043), I was thinking specifically about how people are handling the transition from Angular 1 to 2. I am in no way advocating using plain JavaScript to build your app. I even mentioned in the video that I rarely work with plain JavaScript. There's a lot of distraction around Angular 2 for both existing and new developers, when it's pretty clear to me that Angular 1.9.x will pretty much look like Angular 2. If you read the release notes, this is very clear. They said the the primary theme for the 1.5 release was improving the upgrade path to Angular 2. http://angularjs.blogspot.com/2016/02/angular-150-ennoblement-facilitation.html http://angularjs.blogspot.com/2016/02/angular-150-ennoblemen... What this means is that keeping up with the Angular 1 release cycle will gradually transition you to Angular 2. But everyone in the community seems to think this is boring and wants to blow up their apps and go to Angular 2 right away. This is the kind of thinking that I wish we'd see less of. Rushing to 2 when it's still in beta makes no sense from a business perspective. It only makes sense from a "I like to tinker with the new thing and try new stuff because it's fun" perspective. Some people will say it's a performance issue (since Angular 2 is better in that respect), but for the vast majority of apps that want to upgrade to 2 now, the improvements won't be noticeable.

Illniyar 11y ago

I see a lot of comments here about how not having js on the page is a great thing and lets get back to the old days. Lets be frank here, HN's UI is not good. At the very least it needs collapsible comments and responsiveness to mobile. The fact that HN is a success is despite its bad UI, or maybe because of the many HN readers out there that fix all the broken stuff on the page. While js on sites have surely overgrown, and there is a place for minimalism, I really don't want to go back to the old days where every click reloaded the page and interactivity was really only done in flash.

jmiserez 11y ago
>responsiveness to mobile. Please no. I like being able to zoom in or out, and too often "responsive" means no zoom and either huge or miniscule text.
- mynewtb 11y ago
  Opera lets you override that!
  - paulryanrogers 11y ago
    This. Their text size and reflow are all that I miss from Opera Mobile.
- cname 11y ago
  "Responsive" doesn't mean those things. Just because some sites fail to design a decent mobile experience, doesn't mean HN (or you or anyone else) can't.
  - jmiserez 11y ago
    I remember some of the early HTC Android phones had text reflow enabled by default. That was almost always good enough and it would be "responsive", but for some reason mobile browsers don't seem to offer it anymore.
11y ago

gedrap 11y ago

Is it just me, or it sounds... cult-ish / overly dramatic? >> it wasn’t obvious to me that Hacker News had any JavaScript at all. I guess he never votes. >> I thought it would be weird and complicated, but it turned out to be quite the opposite. You’ll have to watch the video to see what I mean. Well, it sends a HTTP request and hides an element. How on earth can it be complicated? I mean, ok, you can use The Framework Of The Week to do that and just that. Not everything that is related to HN/YC is some magical rocket science.

rohanprabhu 11y ago
Not just you. I don't see why this warrants a 12 minute video.
- st3v3ndungan 11y ago
  I'll give you one reason. I've never done any front-end stuff before. But maybe a month ago, I got curious. Perhaps because I read HN everyday. And if you try to immerse yourself in the front-end world, you get 'yeah, learn HTML/CSS/JS, BUT, also learn Angular, React, JQuery, et. al...' It's good to get a reminder that Javascript in and of itself is a capable language. I'm sure I'm not the only one in this camp. Maybe it didn't need to be 12 minutes, and it was certainly more of an 'oh, interesting' than anything, but I'm glad I took the time to watch it.
  - gordonzhu 11y ago
    Thanks for the perspective. This is why I encourage all developers to take some time to teach new people. The "everyone knows this obviously" attitude goes away very quickly if you start doing this. The aim of the video was to make it accessible to just about everybody. So if you know this stuff you can watch the first minute and stop the video and get value out of it. On the other hand, if you're a beginner and you just did Codecademy, you can watch it through and follow it too.

plugnburn 11y ago

So yeah, let's all go back to the stone age just because of some purist morons with JS disabled. In my honest opinion, the only possibility browser vendors should disable these days is the possibility to turn JS off.

rawTruthHurts 11y ago

Well, if that's all you need, that's all you need.

teddyh 11y ago

I wish the code had a license. It is easy enough to add a license to inline Javascript so that it is machine-readable: https://www.gnu.org/philosophy/javascript-trap.html#AppendixA https://www.gnu.org/philosophy/javascript-trap.html#Appendix...

hjek 11y ago
Wouldn't this piece of code be classified as "trivial" by the policy in the link, and therefore not need it? Anyway, if you download the source and look in the 'copyright' file it says: "This software is copyright (c) Paul Graham and Robert Morris. Permission to use it is granted under the Perl Foundations's Artistic License 2.0" http://www.arclanguage.org/arc3.1.tar http://www.arclanguage.org/arc3.1.tar (I'd be more worried about the license of the Algolia Search provided on Hacker News. Way more JS there. It's even using AngularJS)

pmlnr 11y ago

Oldschool, smart, mini javascript as progressive enhancement. Everyone should learn the basics before frameworks. ( Also: http://vanilla-js.com/ http://vanilla-js.com/ )