WingNews logo WingNews GitHub [2]
top | item 11307758

The Single Piece of JavaScript on HN

272 points| qasar | 10 years ago |blog.watchandcode.com

186 comments

order
[+] cypherpunks01|10 years ago|reply 

  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;
  }
[+] Illniyar|10 years ago|reply
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.

[+] JeremyNT|10 years ago|reply
Honestly, HN is great, and this:

> At the very least it needs collapsible comments and responsiveness to mobile.

I don't even want that. On root comments, simply add a link (let's call the text "next") that jumps to the next root level comment. That would solve my only complaint about the HN UI.

[+] jmiserez|10 years ago|reply
>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.

[+] fabulist|10 years ago|reply
HN's UI is clear, accessible, and uncluttered. If you want something different, they expose an API which everyone and their mother has written a client with, including native apps for mobile. The only JS on the site is in place to reduce the page reloads you were worried about.

What is the problem here?

[+] chris_wot|10 years ago|reply
The only think I'd like for mobile is better up and down arrows. That's literally the only thing. Otherwise, don't change the UI in any way. To do otherwise would make this site so much less great!
[+] JupiterMoon|10 years ago|reply
HN's design is fantastic - it is totally perfect for its function. Collapsible comments are a pig to use. HN looks and works great on mobile now (it didn't used to but they did a redesign in the last few months).

Downvoters do you care to explain why you disagree?

[+] pmlnr|10 years ago|reply
Collapsible comments are driving me mad. It's wrong on all levels on a forum-like page where I go for the comments and the comments only.
[+] krapp|10 years ago|reply
HN is a success despite its UI because it was written in a Lisp and because it has the cachet of Y-Combinator behind it. If this exact site were written in PHP, and posted as a Show HN in an alternate universe, no one would consider it anything but a toy, and no one would be defending the layout with the same cargo cult mentality that HN seems to inspire.
[+] gedrap|10 years ago|reply
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.

[+] smadge|10 years ago|reply
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.

[+] mwcampbell|10 years ago|reply
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.
[+] iamleppert|10 years ago|reply
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.

[+] nathancahill|10 years ago|reply
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.
[+] tim333|10 years ago|reply
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.
[+] awqrre|10 years ago|reply
binary is next...
[+] mdavidn|10 years ago|reply
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|10 years ago|reply
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.
[+] seanalltogether|10 years ago|reply
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.
[+] heyheyhey|10 years ago|reply
What's the rationale behind not making this feature available for everyone?
[+] lurker2015|10 years ago|reply
Is there anything like Reddit Enhancement Suite for HN? Any recommendations out there?
[+] mrweasel|10 years ago|reply
If you want the state of your collapsed comments to be remembered between session you're adding a lot of data to the backend of HN. I can see not implementing it, because threads are short lived and rarely get more comments that can be reasonably browser or searched.

I don't see that collapsing comments would really add much value, especially if the state is to kept per user per comment in the backend.

If you don't care about state, I feel reasonably sure that you could Greasemonkey your way out of not having that feature.

[+] fabulist|10 years ago|reply
Alternatively, I'd appreciate if comments had a link to their siblings and not just their parents. It wouldn't require any JavaScript, but would (for me) have the same utility.
[+] TazeTSchnitzel|10 years ago|reply
I use this bookmarklet:

  javascript:(function()%7Bfunction%20getScript(url,success)%7Bvar%20script=document.createElement('script');script.src=url;var%20head=document.getElementsByTagName('head')%5B0%5D,done=false;script.onload=script.onreadystatechange=function()%7Bif(!done&&(!this.readyState%7C%7Cthis.readyState=='loaded'%7C%7Cthis.readyState=='complete'))%7Bdone=true;success();script.onload=script.onreadystatechange=null;head.removeChild(script)%7D%7D;head.appendChild(script)%7DgetScript('//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js',function()%7Bif(typeof%20jQuery!=='undefined')%7Bif(!$('body').hasClass('collapsible-comments'))%7B$('body').addClass('collapsible-comments');var%20span_html='%3Cspan%20style=%5C'cursor:pointer;margin-right:10px;%5C'%20class=%5C'expand-handle%5C'%3E%5B-%5D%3C/span%3E';if(window.location.href.indexOf('item?id=')!=-1)%7B$('center%20%3E%20table%20%3E%20tbody%20%3E%20tr:eq(2)%20%3E%20td%20%3E%20table:eq(1)%20span.comhead').prepend(span_html)%7Delse%20if(window.location.href.indexOf('threads?id=')!=-1)%7B$('center%20%3E%20table%20%3E%20tbody%20%3E%20tr%20%3E%20td%20%3E%20table%20span.comhead').prepend(span_html)%7D$('.expand-handle').live('click',function()%7Bcurrent_level_width=parseInt($(this).closest('tr').find('td:eq(0)%20%3E%20img').attr('width'),10);$(this).closest('table').closest('tr').nextAll().each(function(index,el)%7Bvar%20elWidth=parseInt($('tbody%20%3E%20tr%20%3E%20td%20%3E%20img',this).attr('width'),10);if(elWidth%3Ecurrent_level_width)%7Bif(elWidth%3C=inner_level_width)%7Binner_level_width=1000;$(this).hide()%7Dif(inner_level_width==1000&&$('.comment',this).css('display')=='none')%7Binner_level_width=elWidth%7D%7Delse%7Breturn%20false%7D%7D);inner_level_width=1000;$(this).text('%5B+%5D').addClass('expand-handle-collapsed').removeClass('expand-handle');$(this).closest('div').nextAll().hide();$(this).closest('div').parent().prev().hide();$(this).closest('div').css(%7B'margin-left':'18px','margin-bottom':'5px'%7D)%7D);$('.expand-handle-collapsed').live('click',function()%7Bcurrent_level_width=parseInt($(this).closest('tr').find('td%20%3E%20img').attr('width'),10);$(this).closest('table').closest('tr').nextAll().each(function(index,el)%7Bvar%20elWidth=parseInt($('tbody%20%3E%20tr%20%3E%20td%20%3E%20img',this).attr('width'),10);if(elWidth%3Ecurrent_level_width)%7Bif(elWidth%3C=inner_level_width)%7Binner_level_width=1000;$(this).show()%7Dif(inner_level_width==1000&&$('.comment',this).css('display')=='none')%7Binner_level_width=elWidth%7D%7Delse%7Breturn%20false%7D%7D);inner_level_width=1000;$(this).text('%5B-%5D').addClass('expand-handle').removeClass('expand-handle-collapsed');$(this).closest('div').nextAll().show();$(this).closest('div').parent().prev().show();$(this).closest('div').css(%7B'margin-left':'0','margin-bottom':'-10px'%7D)%7D)%7D%7D%7D);var%20current_level_width=0;var%20inner_level_width=1000%7D)();
I can't remember who wrote it, but it works.
[+] BowBun|10 years ago|reply
Not much to say, really. Just some simple code.

What I'm curious is if someone can reiimplement this without and javascript.

[+] mchahn|10 years ago|reply
So without JS enabled you can't vote?
[+] z3t4|10 years ago|reply
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.
[+] z3t4|10 years ago|reply
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.
[+] sillysaurus3|10 years ago|reply
Little-known fact? Man, this place really got big. :)
[+] krapp|10 years ago|reply
Probably not "little known" so much as "little cared about."
[+] lucb1e|10 years ago|reply
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.
[+] zbruhnke|10 years ago|reply
and yes Author is right ... you need 500+ Karma to downvote
[+] andrelaszlo|10 years ago|reply
Can you even downvote root items, i.e. topics? I have 500+, and I can't.
[+] cpg|10 years ago|reply
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|10 years ago|reply
[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), 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-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.

[+] pmlnr|10 years ago|reply
Oldschool, smart, mini javascript as progressive enhancement.

Everyone should learn the basics before frameworks.

( Also: http://vanilla-js.com/ )

[+] wrigby|10 years ago|reply
When you're not logged in, the `onclick` attributes aren't present in the anchor tags.
[+] gordonzhu|10 years ago|reply
When you try to vote it will ask you to log in.
[+] rawTruthHurts|10 years ago|reply
Well, if that's all you need, that's all you need.