The Single Piece of JavaScript on HN | Hacker News Reader

The Single Piece of JavaScript on HN

blog.watchandcode.com

272 pointsqasar186 comments

  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;
  }

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.

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.

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.

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.

The problem (from my perspective) is that the job market follows. It's good at that--always following.

And so we use React in our project (even if it makes no sense to) because then we can put it in our resume. And thereby contribute to the problem.

Totally agree. One problem I find arises from this is that there are no boring workhorses. Time and time again I need boring crud screens, for the admin side of applications, but there is no easy default to choose. ExtJS tends to do the trick, but it's not cheap.

> Time and time again I need boring crud screens, for the admin side of applications, but there is no easy default to choose.

crud is often a feature of frameworks. crud should be an external tool like documention tools (doxygen...).

This week's JavaScript flavor special is vanilla.

maintaining software is a real thing.

for the majority of cases i've seen, these arguments are to save developers time and the company money.

my gut & feelies tell me there is truth to "it doesn't really matter what technologies you use" but my brain and experience tell me that is objectively false.

The reason "it doesn't matter what technologies you use" is because successful software gets rewritten multiple times anyway.

It matters a lot eventually, but having an "eventually" to worry about is a nice problem to have.

(There's also a big perspective difference between being an entrepreneur writing initial code for a project vs. an engineer hired to maintain & grow that code. Code quality, architecture, and technology choice matters a lot to an engineer who will be working with it directly. It matters a lot less to a business that can swap out engineers until they find ones who enjoy working on that codebase. The fact that you even have money to hire engineers usually indicates that the existing code is getting the job done. The business only gets screwed when the code quality is so bad that nobody can make sense of it, and the environment changes in a way that requires modifications.)

but, there are many instances where software would not get rewritten with proper technical foresight in the first place.

i take your point none the less- there are contexts where it doesn't matter.

Would love to see "Enterprise HN" with Node and React and Redux (with server-side rendering), and how it compares (whether horribly or awesomely).

> and how it compares (whether horribly or awesomely).

Given only the tech stack, it can go either way, depending on whether the implementor takes the easy, lazy route or actually puts some thought and hardwork into it. The problem is, as per good old Sturgeon's law, 90% of sites take the lazy route, and end up with tangled monstrosities that look like offerings to the Flying Sphaghetti Monster.

(Also, it's interesting how quickly 'cool new tech' can become 'Enterprise' shudder when it's widely abused and misused.)

> Also, it's interesting how quickly 'cool new tech' can become 'Enterprise' shudder when it's widely abused and misused

Is this the hipster corollary to coding? Sure, Java was cool when only 100 people were using it...

Well, there's Designer News...

That's already a pretty "modern" enterprise stack. I'd expect enterprise HN to run on Java EE (with an Oracle DB of course) :D

Have you seen hn.algolia.com?

https://vuejs.github.io/vue-hackernews/#!/news/1

Not exactly any of these technologies, but it is using more javascript at least. I think the example is pretty awesome actually.

+1 times infinity

The img.src trick is used by google-analytics to log metrics cross-domain as well. Pretty neat trick.

Another thing to note is the "RESTful" nature of the links embed in the page. I guess its some form of HMAC with SHA1 + Nonce that authenticates requests for the server. It differs for every href. Elegant.

  auth=311110b7ef0f268cafa8616afcbfcec8d977111e

Lol. For hiding a voting arrow after it's clicked. Yes, you're right. You don't need any of that stuff. But if you were to write an entire app in the style of those two functions, things would fall apart. That's not even a hypothetical, it's been proven over and over again that it doesn't work.

How is everyone agreeing with you? Is there that much JS fatigue that we're looking at the equivalent of a horse-drawn carriage, and saying wow, I wish things were as simple as they were back then?

> Is there that much JS fatigue that we're looking at the equivalent of a horse-drawn carriage, and saying wow, I wish things were as simple as they were back then?

Make Javascript Great Again! (TM)

>horse-drawn carriage

That code is more the equivalent of a digging stick. React is used to build horse-drawn carriages. I'm eagerly awaiting the JS framework that'll let me build cars.

I think the point is that there's actually little wrong with using standard HTML forms and hyperlinks most of the time.

There is an increasing trend to move the whole website to the client side to be handled entirely by the JavaScript as a single actual page.

Personally I find most websites work better with a simple round trip to the server to fetch more HTML.

So actually building an entire system in this style isn't out of the realms of possibility at all - you just only write JavaScript for the cases where there is a real legitimate benefit to doing so.

> Personally I find most websites work better with a simple round trip to the server to fetch more HTML.

> you just only write JavaScript for the cases where there is a real legitimate benefit to doing so

The snippet above only works because HN is so simple, normally the rule of thumb is if you are going to use JS to change the DOM at all then you need to render it in the first place using JS or else you are double-implementing the render logic and you open yourself up to changing one implementation and not the other. For hiding arrows sure this works but 99.999% of the time it's a very bad idea to use JS to change the dom to a state that the server would otherwise render on a page reload. You may feel that a round trip works better but that's not what users expect or will tolerate most of the time. That kind of thinking feels very close to people who think CRUD is all you need to build an app. Sure you can build an app with just that but thinks break down very quickly.

JS fatiques starts where web pages (not web apps) start to depend on thousands of kilobytes of javascript. Now the default thinking is along the lines "I am starting a new project, I will use angular", instead of some analysis what kind of project this is, how much JS is needed and what is appropriate.

I've started chiding those at work who preemptively implement features before they're required, and not scoped. Commit the simplest code that will do the job, and if you like, create a ticket for a future sprint with cool new features.

At home, I wait until lack of a feature (like hot reloading) frustrates me, then block out a couple of hours to do it specifically. Otherwise you've got a flashy stack and no product.

Nowhere did I tell people to write an entire app in the style of hide and vote like you're implying.

In my comparisons I mention a lot of choices people might make, like Angular vs. Ember vs. React that are ultimately meaningless to the success of your product. I think this is what's resonating with a lot of people.

How would things fall apart, exactly? On my home machine I browse with NoScript turned on by default, and it's rare that I find a site which is broken badly enough to notice which I still care about strongly enough that I bother clicking "allow". I don't think that most of what people do with JavaScript in the browser needs to be done at all if you filter the motivations of investors and advertisers out of the picture.

That was a lot easier than watching an entire video.

With closure compiler:

function hide(a){if(a=document.getElementById(a))a.style.visibility="hidden"}function vote(a){var b=a.id.split(/_/)[1];hide("up_"+b);hide("down_"+b);(new Image).src=a.href;return!1};

v and item are merged.

http://closure-compiler.appspot.com/home#code%3D%252F%252F%2...

Original Size: 212 bytes gzipped (318 bytes uncompressed)

Compiled Size: 164 bytes gzipped (182 bytes uncompressed)

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.

>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.

Opera lets you override that!

This. Their text size and reflow are all that I miss from Opera Mobile.

"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.

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.

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?

I didn't down-vote you, but "collapsible comments are a pig to use" isn't really a statement I can get behind, nor a statement with any real value (what does "a pig to use" mean, practically?)

I use a (slightly modified) Chrome plugin to clean up HN's styling to make it more readable. Most importantly it adds collapsable comments, without which I would enjoy HN much less.

Collapsable comments makes it easy to tell what you have and haven't read, and to easily skip large threads which bore you without having to mentally watch the invisible vertical line and scroll until it comes back it.

Yeah "a pig to use" might come across as inflammatory and I guess that this expressing my personal preference (which is just as valid as yours but clearly neither are objectively correct).

Disclosure I use no script and am very happy that HN works without any javascript.

Practically I find collapsible comments highly annoying in every case I've seen them used. This is probably because they seem to either (1) require javascript, or (2) require page reloads, or (3) both.

In the case of HN, dang et al do a good job of detaching irrelevant comments.

I guess that collapsible comments should be one of those optional features that could be available with javascript but gracefully degrade to showing the full tree without.

I didn't use it directly on mobile for so long, I didn't even know they made it work on mobile.

Collapsible comments are still, I think, the minimum needed to make HN usable, in long threads it just becomes impossible to find or follow comments.

> HN looks and works great on mobile now (it didn't used to but they did a redesign in the last few months).

For the record, after the redesign the comments looks worse on Windows Phone. I know, no one gives a damn about WP, but a "proper" mobile redesign would work on every browser.

Is that the fault of HN or Windows Phone?

HN.

Makes me thinkg of that great rant my Linus about breaking userspace by "fixing" a "bug"

If you break something for a significant portion of your users, even if it's caused by someone/something else doing something dumb, it's still your fault

In the case of the web we have standards which describe correct behaviour. Is HN not following them?

> for a significant portion of your users

Windows Phone users are a significant portion of HN users?

Shameless plug, check out my HN app for WP8.1 called Hacky News. It's very fast and has collapsible comments.

Link: https://www.microsoft.com/en-US/store/Apps/Hacky-News/9NBLGG...

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?

It's certainly not "uncluttered" on mobile, where the text and vote buttons are so tiny and crowded together that it's super easy to tap the wrong thing.

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!

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.

I'd like to see answers to my comments or postings in real time, not having to reload the page. HN doesn't allow me to do that.

There's a bookmarklet: https://hnlivecomments.pex2.jp/

How is this usable on mobiles? And... Why do I have to rely on a piece of third-party software in order to get features present in any really modern website?

I think HN tries to avoid being too modern...

To get collapsible comments, you can use "Reddit-Style Comments for Hacker News" chrome extension/GreaseMonkey script: https://github.com/andrewheins/HN-Comment-Hider

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.

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.

Why compare the margins of nonsense (lisp and php)? If a site like this were written in Node.js and with mobile users in mind, it would be in all means superior to what we see right now.

And right now I see yellow outline around this textarea, which is WebKit's default and they didn't even bother to remove it to make this textarea look the same in all browsers, let alone adapt it for mobiles.

I'm implying that language elitism and faux-intellectual posturing are among the reasons this community seems to correlate the simplicity of the layout with its own intellectual purity. That same elitism would cause the same community to dismiss the same site out of hand, were it written in a language it was popular to hate.

But yes, it could be written in any language and still have a more progressive layout, and people would hate that the site appears mainstream or, heavens forbid, looks and acts more like Reddit.

Now I get the picture and totally agree. For me, even this yellow outline is a sign of totally ignoring real-world user needs.

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.

Not just you. I don't see why this warrants a 12 minute video.

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.

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.

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.

But they need it to keep their job :p

But they'd have more hours to bill if they bothered to make their web pages work with JavaScript disabled!

For me it doesn't bother reloading; but it shows up when I reload.

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.

I don't think client side scripting is always innapropriate. I just think it often is. For example, I've seen a lot of pages that just display some copy marketing a product that won't display properly without JavaScript. On the other hand, complex sites like github work fine without JavaScript.

I totally agree, if you are thinking about maintaining user state on the server, you are probably doing it wrong, as you are violating REST. That's the nice thing about using dumb clients, is it forces you to think about application state changes using hypermedia, instead complex client side logic. I think this leads to clean APIs.

But note what you assert yourself: reloading on every click is annoying. And not reloading, but also not providing feedback that you successfully clicked the button is also annoying.

The 10% of your goals that you do not achieve without Javascript are essential to changing 'the web' from being a clunky to being a nice experience. The web without the least bit of Javascript is like a world without fire: you'll survive, but it won't be nearly as comfortable. Fire inevitably led to nuclear bombs, but we should certainly not disavow fire because of that. We should just be against the nukes.

I agree. Sometimes your soup could use some salt in it, but you shouldn't just skip the soup and go directly to eating salt.

If someone decides they don't want any salt, they should still be able eat the plain old boring soup. They'll get the nutrition they need. Maybe it won't taste quite as nice, but the primary function of the soup is still there. Plus your soup is more accessible to people on low sodium diets, and takes less time to prepare!

The next major update in all browsers absolutely must be this: inability to turn off JS. Because no one in a sane state would EVER do this now.

Why not a checkbox to turn off HTML? It would be just as "useful"...

I do need JS to achieve all my goals that can be achieved with JS. For those things that can be achieved without JS but often mistakenly involve it (hamburger menus, animations etc), I use plain markup and CSS3. But I'm not going to ruin the UX on mobiles, where in developing countries traffic still matters, just for some paranoid freaks' sake.

Your site will be much more usable in developing countries with low spec mobile devices and high latency, low bandwidth networks if you design it to function first without JavaScript. You will reduce page weight, and client side CPU usage.

Client-side CPU usage, as well as page weight, isn't a problem if JS is done right. Angular-like bloatware certainly ruins all the zen. But that doesn't mean you should rush to another margin and make everything server-side. Modern web technologies allow you to keep everything beautiful, smooth AND lightweight. But in order to achieve that, you'll need to learn more than a couple of bloatware libs like angular or jquery. In fact, you need to forget them and start thinking for real. And study, study and once more study MDN manuals.

Language doesn't make Web slow and bulky. People do.

Agreed! Learning the latest and greatest library isn't going to make you a better developer. I'm not saying client side scripting has no place on the web, I'm just saying for many purposes its place is overrated, and that basic functionality can be provided through hypermedia alone.

Also, I'm not a "paranoid freak"

I'm just curious about how the web works and how modern sites use JavaScript.

Maybe I'm talking out my ass, since UX isn't my field, but I imagine that 90% of UX is "the application allows me to do the thing I'm using it for, it has logically layed out screens, and navigating between screens is fast and intuitive." I think hypermedia accounts for these concerns. Sure there are some annoyances, like "voting on a comment or article causes the screen to flash." It's a little jarring but everything still functions. You can sprinkle some JavaScript in, like on HN, to smooth that over.

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.

"However, this is not completely true. It means: it won't change the resource representation. It is still possible, that safe methods do change things on a server or resource, but this should not reflect in a different representation."

http://restcookbook.com/HTTP%20Methods/idempotency/

It is possible to do so but may not be desirable anyway. It is completely possible to wire a fork bomb to the safe methods; you probably don't want to enable the bomb via crawler however.

I don't think that's referring to a case like this. I'd also argue that voting _does_, slightly, change the representation.

Only in the same way that watching a YouTube video changes the view count. Do you believe that's an invalid use of GET?

Actually, another way to do this is to create a form with the POST method that respond with status 204(which will not refresh the page). There is still no need to involve the XHR. I still think this solution is neat though.

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

But GET requests should be idempotent.

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.

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_prefe...

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 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.

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.

binary is next...

https://en.wikipedia.org/wiki/WebAssembly

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.

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.

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.

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.

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...

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.

https://chrome.google.com/webstore/detail/hacker-news-collap...

I don't know about other browsers, but this works OK on Chrome.

Is there anything like Reddit Enhancement Suite for HN? Any recommendations out there?

https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...

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-enhanc...

What's the rationale behind not making this feature available for everyone?

Quality—don't want to make it too easy to ignore entire chunks of the conversation, and don't want to encourage adding chunks to the conversation that are worth ignoring.

As I understand it.

This bookmarklet http://pastebin.com/raw/Rur0Lrza works if you have less than 500 karma. I haven't figured out how to make it work for over 500 karma.

I use this plugin, I don't think I'd visit as often if I didn't have it: https://chrome.google.com/webstore/detail/hacker-news-enhanc...

Thanks for the recommendation!

Thanks, se anal together!

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.

https://greasyfork.org/en/scripts/12493-hacker-news-folding-...

I wrote this a while ago, which seems to work. I reused the vote arrow with 1/4-turn rotation, placed on the other side of the comment header line to avoid confusion.

I use this userscript: https://greasyfork.org/en/scripts/18066-hn-comment-trees

It also highlights new comments and collapses threads without new comments on repeat visits. HN now feels unusable without it in scenarios where I can't use a userscript :-/

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.

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.

Not much to say, really. Just some simple code.

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

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.

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.

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.

You could render the vote buttons in iframes, so just the iframe would reload. But you'd have to load N iframes for N vote buttons on page load. Not worth the performance hit.

> But you'd have to load N iframes for N vote buttons on page load.

No you don't. Use a FORM with a target of the iframe, make each arrow an <input type=image name="id#">

One form can cover all the arrows at once. Or you can have a form per set of arrows. Either way you only need one iframe.

Making it hide is a bit more complicated:

One way is have it hide on focus using visiblity, then set a very long transition in the CSS rules to unhide.

> But you'd have to load N iframes for N vote buttons on page load.

Not with the iframe srcdoc= attribute! That allows you to make an iframe that initially loads HTML you've specified inline.

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.

Ah that might work

If scripts are turned off, the link just navigates to /vote?etc, which redirects you back to the thread. So it works already! It doesn't bring you back to where you were- but an anchor tag can fix that.

If you don't want to leave the page, iframes still work, right? So you can set the target to an invisible iframe, and the vote will go through. The arrow doesn't disappear, but I think you might be able to handle that with CSS:

http://www.inserthtml.com/2012/04/css-click-states/

This won't save any votes, but:

input, input:checked ~ label { display: none; }

---

And if you wrap that inside a form that submit this to a url that respond with status 204, this will work without any js :-)

Amazing. I've been doing web stuff for the past decade, and had no idea you could do this.

This should work:

  <input type="checkbox" />
  <div style="background-image: url('http://voting-url.com')"></div>

  div {
    display: none;
  }

  input:checked + div {
    display: block;
  }

A background-image won't be requested unless it is visible. (This is why lots of peoples on-hover icons flicker if they don't spritemaps, SVGS or iconfonts).

Edit: Obviously you'd style it to make it pretty :p

Edit 2: For accessibility you'd probably want a visibly hidden - but visible to screen readers - anchor that votes.

Edit 3: Looks like chrome pre-fetches things even when they're not visible now. Presumably to fix all those flickery icons out there :(

This was a tough puzzle to crack, but I've got it fully solved here:

https://jsfiddle.net/5c0ruh8s/10/

Works cross-browser, submits a POST request to record votes, and hides both vote buttons after submitting.

Each up/down arrow is an <input type="image">, part of a form that submits to a hidden iframe. When either goes :active, a CSS sibling selector sets the height of a floating div from 0px to 100% to cover up the vote arrows. There's no selector for "button that's been clicked once before", so I use a CSS transition that has a delay of 0s to expand the height and a delay of 99999999s (basically forever) to shrink the height back down again when the arrow button goes from active->inactive. While the arrow button is :active I use "pointer-events: none" to make sure the click goes through, but once the form is submitted and the button goes inactive the div becomes opaque to click events again, so the UI only allows a vote to go through once.

No JavaScript required!

I feel like there must be a simpler way than that.

That's what I thought too, at first. Some of the iterations I went through before reaching this point:

- Links for the up/down arrows with target=<hidden iframe>, that set "visibility: hidden" on :visited. But oh, only color-changing CSS properties are allowed for :visited selectors.

- Links for the up/down arrows with unicode ▲ and ▼ that set their color to the page background color on :visited, using a sibling selector to hide the other arrow as well once either has been clicked. But oh, sibling selectors are forbidden in conjunction with :visited selectors. Same for selecting nested elements inside a :visited link - only the simplest uses of :visited are allowed. One could wrap both arrows in the same <a> tag, but then there'd be no differentiating between an up/down vote.

- An invisible radio button next to each up/down arrow, with both wrapped inside a <label> so that clicking the arrow causes the radio button to become :checked. Use a sibling selector to hide the arrows when either radio button becomes checked. But oh, if you click a link inside a <label> it's not counted as marking the radio button as selected.

- An invisible radio button hidden under each vote up/down image. Each radio button is wrapped in an <a> tag that causes a hidden iframe to navigate to the voting link. The vote up/down buttons are "pointer-events: none", so trying to click on one really marks the radio button underneath as selected and triggers a link click. This works fine in Firefox, but in Chrome, marking a radio button as selected doesn't trigger a link click.

You could put each of them in an <iframe>.

(now to hide from the abuse, and hope my karma doesn't fall below the voting threshhold for suggesting this)

I thought of that, but then the arrows don't hide immediately after you click them as on HN - they'd still be visible until the request completes. So you'd end up with the same problem: hiding both arrows when either is clicked without using JS.

(I assume you mean putting each pair of arrows in an <iframe>, rather than each individual arrow.)

If it's a button, it'll be in the :focused state, you can use that to style it. Or you could use a CSS transition with a very very long time in one direction on the :active state.

And of course, you can use adjacency selectors with buttons, while you can't with :visited links.

That's exactly what I did, though :P

Check my first comment.

It already does work without javascript.

Or do you mean is there a way to asynchronously vote and hide the voting arrows without a page reload?

So without JS enabled you can't vote?

No, you just can't vote without triggering a page navigation. (It's probably HTTP POST with redirect.)

Seems to be a GET request, oddly enough.

It's a GET request with an auth token passed as a query parameter.

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.

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.

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.

The downvotes are how you know.

It would be great if I could delete a post and get all the points back. (grin)

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.

> 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.

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.

It may be because this whole discussion is off-topic and not very productive.

Seems on-topic to me. You can't call Godwin's Law when the discussion is really about Hitler himself, and you can't claim that discussing how voting works is off-topic when the discussion is about how the voting button works.

I see things more in terms of signal/noise considerations.

Rational minds can disagree, and intelligence can't understand much-greater-intelligence (so lessers might downvote much-greaters for that reason, besides the first-mentioned reason), but you don't have to worry about armageddons of downvotes. Or the balance of votes.

Just upvote what you consider "signal", and downvote the worst kinds of noise.

Thus you, my parent comment, are barely voted on at all, while the one by jewbacca rises to the top all day, no matter the weather.

Now I see you are downvoted. I thought your comment was humourous which is always alright to me.

In My Humble Opinion downvotes are given out a little too easily here (OK, I'm ready for more downvotes). I hope when I get the downvote ability I will use it wisely, not that many aren't wise.

Downvotes aren't worth worrying about on Hacker News, nor are upvotes. They do tend to even out in time so that only the really objectionable comments get downvoted a lot (and eventually flagged) but because pg more or less decided that there didn't need to be a standard for either, I treat them as worthless.

I take it personally which I know I shouldn't. I think others are the same. You can tell when people say "Why was I downvoted?!".

Everyone wants peer approval. Also you get the same feeling you get when you are being denigrated by someone who doesn't have the backbone to come out and say who they are. I say you get the feeling, not that it is true.

Feeling slighted is fine, but it's best to keep the reaction off the site unless you want more downvotes.

No point in having a standard you can't enforce.

It is kind of fascinating that my votes are going up and down rapidly. Apparently it is a battle of up-voters vs. down-voters. I must have hit a touchy subject.

P.S. I apologize for all the posts. I'll tone it down now.

Oh, you were asking for it.

That was a legitimate question. I think the problem where the down-voters not you. To answer the question. Yes you could still vote, but you would need to refresh the page to show the current state. The JS is doing it on the fly.

Disable JS and try it...

Maybe people were trying to be helpful by disabling JavaScript and clicking on the down arrow next to your message in order to experimentally determine what the answer to your question was.

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.

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

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

Show them these: http://tympanus.net/codrops/category/blueprints/

A lot of those are either without javascript or with minimal, vanilla js.

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#Appendix...

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

(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)

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

Probably not "little known" so much as "little cared about."

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.

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

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

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.

[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.

Oldschool, smart, mini javascript as progressive enhancement.

Everyone should learn the basics before frameworks.

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

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

When you try to vote it will ask you to log in.

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

He exposed his auth id

The video mentions this was a dummy account created just for this video.

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

CSRF anyone?

Try it. You'll find HN an interesting target.

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.

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

Reply on news.ycombinator.com