Cleaner Hacker News | Hacker News Reader

Cleaner Hacker News

github.com

145 pointsprimigenus66 comments

I enjoy the Georgify theme by Tuhin Kumar. It's a highly legible theme and is available as a userstyle or Chrome extension. http://tuhinkumar.com/portfolio/georgify-for-hacker-news/

Really nice, thanks! If you've stylebot, I added it here: http://stylebot.me/styles/1146

Georgify is great. It was actually released on the same day when I released a similar extension, Readable HN, which is available for Chrome (source in in GitHub) https://chrome.google.com/webstore/detail/jpnbjaechgbbpokepg...

The typography is nice and clear but there is a bit too much white space between the entries for my taste.

Additionally, this app does not work when viewing HN through a secure connection. This is a deal breaker for me unfortunately.

I just want bigger buttons on mobile devices. I do most of my reading on a tablet and almost never vote because the effort of zooming in to make the buttons targetable is just too much. Even dealing with typing in this tiny entry box is highly obnoxious.

At least on the iPhone, I use an app (http://itunes.apple.com/us/app/news-yc/id434787119?mt=8). You can find hackernews apps on iPad too, but browser works fine for me.

There are a few Android apps as well.

The apps normally make reading comments much more difficult by a) enforcing a very large font size and/or b) only showing a single level of comments at a time. AFAIK news:yc does both of these things.

news:yc has a small text font setting and a nested comments setting which shows all comments rather than just one level at a time.

Awesome! When it first came out it certainly did not ;P. (The main developer works with me on Cydia, and I complained bitterly about the font and comments issues; I'm surprised he didn't tell me he changed the behavior.)

(edit: Tried it out, and it still isn't as usable as the website. It still has larger fonts and only shows three short lines from each comment at a time. The list of articles also has variable sized rows that often overflow onto multiple lines with other text at the same level: difficult to skim the titles quickly. I'd much prefer a subtle change to the mobile HN website to fix the buttons ;P.)

Check out http://ihackernews.com

I actually like Hacker News' condensed retro web look. It has a very lightweight bare metal feel to it. I am not really a fan of designs that have "foofy" margins which make the noise to signal ratio higher.

"foofy" margins actually have a purpose - to improve legibility. Something that HN is in desparate need of.

If I set my browser window to a reasonable width I can have legibility without foofy margins and I can use the rest of my 1280 pixels for something else. Window systems - they rock

I'm surprised you think that margins decrease the signal-to-noise ratio. I find generous margins make text easier to read - which is why print magazines and newspapers will split text into columns even when the entirety of a page is taken up by one story.

Aren't columns actually used because it's easier to read shorter lines of text than long ones?

That was what I just said, yes.

You seemed to be suggesting that it had something to do with margins, which is actually a different issue than column width. In a newspaper, you can have a lot of columns with small margins, for example.

You also seemed to be suggesting that it had something to do with separating different stories on the same page.

When you have one column of text, as in the frontpage of HN, large margins implies a narrow column of text.

My point about separate stories is that it is independent of them. Magazines and newspapers layout their stories in columns. I was anticipating someone saying "Yes, but they also show multiple stories on one page." But magazines and newspapers still use narrow columns of text even when they have a single story on the page.

Thanks for the clarification.

I created this two months ago as an experiment to see if I could improve the readability of the site. Every month someone creates one of these but I've never been happy with them so I wanted to see if I could do better myself.

I then applied it and let it sit for two months to give myself some time to try it out. I decided I like it, so I've kept it, and now it's time to share it and see if you like it and what improvements you'd want to see.

To check it out without using the chrome extension one can paste this piece of Javascript in the URL

  javascript:(function(){var st = document.createElement('link');st.type = "text/css";st.href = "https://raw.github.com/Primigenus/Cleaner-Hacker-News/master/cleaner-hn.css";st.rel = "stylesheet";document.body.appendChild(st)})()

Latest chrome deletes the "javascript:" part so you may have to write it manually.

CTRL+SHIFT+J (or CMD+ALT+J on Mac) brings up the Javascript Console, where you can paste the code directly.

Also, "text/css" in the script should be replaced with "style/css" in order for it to work.

I copied the "text/css" from the source of this page; it works just fine.

Thanks! I added this to the README.

Is there a way to make Safari to automatically apply this javascript for all pages inside hackers new?

Very nice design! I'm going to use this permanently.

I've seen a few of those and I think you've done a fantastic job in making a style that's better looking and more readable without taking away from the functionality. Most of the others I've seen tend to make type HUGE, and tend to lose the clear sense of hierarchy and the scanability of the home page.

Props. That's what real design is, not just making it pretty.

I am not sure about others, but I couldn't use it because the comments do not wrap to the window width.

Another option for users is to put

    javascript:(function(){var st = document.createElement('link');st.type = "text/css";st.href = "https://raw.github.com/Primigenus/Cleaner-Hacker-News/master/cleaner-hn.css;st.rel = "stylesheet";document.body.appendChild(st)})()

in a bookmark (e.g. on the bookmark bar), then just click it when they want a "cleaner" HN.

Avoids having to install anything extra, but you will need to click it every time you want to use it.

I had never thought of giving custom stylesheets a one-off top test like this. Great idea for instant gratification!

I came here to yell at you that you didn't include a screenshot. But since no one else was complaining about it, I looked again and read all the text in the README and found the small normal paragraph that says I should open the screenshot.png file in the repo.

Can't you just include that in the README? github supports any markup format you want in READMEs.

Good point. I just added a link to the screenshot near the top of the README.

The designer inside of me is loving this. Thank you.

While I also love the retro feel of the regular HN, this is just so much easier on the eyes. And when considering how long I spend on HN these days, this is probably a good idea... My eyes will thank me in the future :)

And here is a version that is a greasemonkey script so that you don't have to install an extra plugin (for Chrome anyways). Just download in Chrome or drag and drop onto Chrome.

https://github.com/overshard/greasemonkey-cleanerhn

http://userscripts.org/scripts/show/128106

(Direct GitHub Raw Link) https://github.com/overshard/greasemonkey-cleanerhn/raw/mast...

It seems like a lot of people maintain code for these stylesheets on github (so it's easy for the developer to maintain), and then publish to stylebot or stylish (so it's easy for the user to update and maintain). I've always wondered why there's not better integration between the two. It seems like it should be pretty easy to create a service like stylebot that pulls stylesheets from github repos (just from master, of course).

Looks good, but the textured background definitely doesn't help readability. The lighter grey on the visited text is fairly difficult to read against it.

Nice, I personally like this one better because it has bigger type:

http://stylebot.me/styles/248

Looks like something I did a while back. http://comfy-helvetica.jottit.com/

Anyone up to porting this to more browsers? Cause I'm still using it, and that has to be for something.

Thanks. My fork (bigger fonts, less wide page): https://github.com/strogonoff/Cleaner-Hacker-News.

I absolutely love this idea and new styling. Ive forked it to provide bigger font sizes for people like me who are kinda blind. https://github.com/xpose2000/Cleaner-Hacker-News/commit/2cce...

Could this be made to also eliminate articles regarding certain topics or from certain sources? I really hate the proliferation of gadgety religious flamewars, and the enabling of bloggers whose modus operandi is just to stoke the fires of these ridiculous squabbles.

That's a different read of "cleaner" than I had intended, but you're free to fork :-)

why the noise bg? can that ponytrick die already?

Absoloutely love the theme. I use http://hn.gethifi.com/ on my phone for Hacker News, so this theme makes the desktop experience a lot more consistent with my mobile experience

Looks great, nice work.

I'm curious whether subtlepatterns.com minds people hotlinking their images from custom CSS files?

http://subtlepatterns.com/?page_id=890#faqbox-left

I should probably fix this, but right now I'm not too concerned since it's not like hundreds of people are using the style. Thanks for the tip though.

I've sent you a pull request for moving this to a gh-pages branch. It shouldn't take more than a few minutes.

Hacking HN content helped me more with readability than hacking the style. I wrote a userjs to apply kill filters https://github.com/dnewcome/hn-plonk

You should also mention that it adds vi-style keybindings for the main page, which is at least as awesome as the killfile. I use RES on Reddit mainly for its keybinds, and I've been looking for something similar for HN for ages. Thanks!

I really like it, and I also reported this issue:

https://github.com/Primigenus/Cleaner-Hacker-News/issues/1

That's the only problem for me, good job!

Ouch, font rendering on Windows/Linux is quite bad. I think that might be also why your headers looks unbalanced. Here's what it looks like on my computer; a lot better.

http://akhun.com/seo/skitch/Hacker_News-20120311-110315.png

You can tweak it for yourself by changing the padding in

    body > center > table > tbody > tr:first-child > td > table

I once tried reddit's default look, its old mobile look and its new beta mobile look on my psp. All 3 looked terrible so I was very surprised that HN looked perfect on both. It doesn't need any fixing.

I much prefer Hacker News +:

https://chrome.google.com/webstore/detail/oieefcckcbbgniifdh...

It includes keyboard shortcuts, too!

I also use this one, very clean!

Oh wow, that is nice. It looks a lot like Gmail.

Tweaked it a bit for better readability. Text size, spacing, width, a few colors, background texture...maybe a few other things.

http://pastebin.com/DMURgDsv

*Do note that for those applying to YC, the styling does not carry over to the application pages. The entire page is orange.

This is not an unbearable problem or anything, but just wanted to point it out!

Thanks, looks nice.

Does anyone else find the font type and size more difficult to read? The size seems smaller but it's 2px bigger, hmm.

Edit: I increased the font size to 18 px inside of Stylebot to better fit my needs.

It doesn't fix the appearance of the comments section, but lately I've been browsing the homepage via http://hckrnews.com/.

You can also add these stylesheets to Safari using the User CSS plugin, found here: http://code.grid.in.th/

Any screenshots? I'd like to preview before going to the trouble of installing some special browser extension..

There is one included in the repo.

https://github.com/Primigenus/Cleaner-Hacker-News/raw/master...

Would be great to see a Stylish version for Firefox (and Chrome) users. Nice work.

Looks slick. I wish I knew enough HTML/CSS to hack this.

This should definitely be made permanent.

Reply on news.ycombinator.com