Cleaner Hacker News

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

by primigenus • 14 years ago

145 66 14 years ago

primigenus5• 14 years ago

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.

jQueryIsAwesome2• 14 years ago

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.

i_cannot_hack• 14 years ago

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.

primigenus5• 14 years ago

Thanks! I added this to the README.

ricksta• 14 years ago

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

jasonjackson• 14 years ago

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

SeoxyS2• 14 years ago

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.

o1iver• 14 years ago

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

reledi• 14 years ago

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.

tedmiston• 14 years ago

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

overshard• 14 years ago

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

_ankit_2• 14 years ago

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

http://stylebot.me/styles/248

godDLL• 14 years ago

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.

jgv• 14 years ago

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/

_ankit_2• 14 years ago

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

jorde• 14 years ago

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

exch• 14 years ago

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.

munchor• 14 years ago

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!

SeoxyS2• 14 years ago

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

duaneb• 14 years ago

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

radarsat1• 14 years ago

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

thehermit• 14 years ago

There is one included in the repo.

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

xpose2000• 14 years ago

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

annon• 14 years ago

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.

flyingyeti• 14 years ago

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

primigenus5• 14 years ago

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.

swanson• 14 years ago

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

SoftwareMaven• 14 years ago

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.

mynegation• 14 years ago

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.

mwilcox• 14 years ago

There are a few Android apps as well.

saurik2• 14 years ago

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.

w1ntermute• 14 years ago

Check out http://ihackernews.com

goblin89• 14 years ago

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

mayop100• 14 years ago

This should definitely be made permanent.

Klinky• 14 years ago

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.

tzaman• 14 years ago

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

telent• 14 years ago

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

scott_s3• 14 years ago

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.

javert3• 14 years ago

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

dnewcome• 14 years ago

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

tomku• 14 years ago

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!

mapleoin• 14 years ago

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.

primigenus5• 14 years ago

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

rubergly• 14 years ago

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

sad_panda• 14 years ago

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.

primigenus5• 14 years ago

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

chrisdroukas2• 14 years ago

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

dbh937• 14 years ago

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

Vaanir• 14 years ago

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.

BasDirks• 14 years ago

why the noise bg? can that ponytrick die already?

deepkut2• 14 years ago

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

saxamaphone69• 14 years ago

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

hellotoby• 14 years ago

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

glimcat• 14 years ago

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

deepkut2• 14 years ago

*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!

nickpresta• 14 years ago

I much prefer Hacker News +:

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

It includes keyboard shortcuts, too!

luiperd• 14 years ago

I also use this one, very clean!

chrisdroukas2• 14 years ago

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

Tim_M• 14 years ago

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.

Cleaner Hacker News

Related Stories