6 ms·
Cleaner Hacker News
- glimcat 15y agoTweaked it a bit for better readability. Text size, spacing, width, a few colors, background texture...maybe a few other things. http://pastebin.com/DMURgDsv http://pastebin.com/DMURgDsv
- primigenus 15y agoI 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.
- jQueryIsAwesome 15y agoTo 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.
- deleted 15y ago[deleted]
- i_cannot_hack 15y agoCTRL+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.
- jQueryIsAwesome 15y agoI copied the "text/css" from the source of this page; it works just fine.
- primigenus 15y agoThanks! I added this to the README.
- ricksta 15y agoIs there a way to make Safari to automatically apply this javascript for all pages inside hackers new?
- jasonjackson 15y agoVery nice design! I'm going to use this permanently.
- SeoxyS 15y agoI'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.
- deleted 15y ago[deleted]
- o1iver 15y agoI am not sure about others, but I couldn't use it because the comments do not wrap to the window width.
- reledi 15y agoAnother 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 15y agoI had never thought of giving custom stylesheets a one-off top test like this. Great idea for instant gratification!
- overshard 15y agoAnd 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 https://github.com/overshard/greasemonkey-cleanerhn http://userscripts.org/scripts/show/128106 http://userscripts.org/scripts/show/128106 (Direct GitHub Raw Link) https://github.com/overshard/greasemonkey-cleanerhn/raw/master/cleaner_hn.user.js https://github.com/overshard/greasemonkey-cleanerhn/raw/mast...
- _ankit_ 15y agoNice, I personally like this one better because it has bigger type: http://stylebot.me/styles/248 http://stylebot.me/styles/248
- godDLL 15y agoLooks like something I did a while back. http://comfy-helvetica.jottit.com/ 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 15y agoI 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/ http://tuhinkumar.com/portfolio/georgify-for-hacker-news/
- _ankit_ 15y agoReally nice, thanks! If you've stylebot, I added it here: http://stylebot.me/styles/1146 http://stylebot.me/styles/1146
- jorde 15y agoGeorgify 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/jpnbjaechgbbpokepgmdkhgjfmkmjecn https://chrome.google.com/webstore/detail/jpnbjaechgbbpokepg...
- exch 15y agoThe 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 15y agoI really like it, and I also reported this issue: https://github.com/Primigenus/Cleaner-Hacker-News/issues/1 https://github.com/Primigenus/Cleaner-Hacker-News/issues/1 That's the only problem for me, good job!
- SeoxyS 15y agoOuch, 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 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 15y agoLooks slick. I wish I knew enough HTML/CSS to hack this.
- radarsat1 15y agoAny screenshots? I'd like to preview before going to the trouble of installing some special browser extension..
- thehermit 15y agoThere is one included in the repo. https://github.com/Primigenus/Cleaner-Hacker-News/raw/master/screenshot.png https://github.com/Primigenus/Cleaner-Hacker-News/raw/master...
- xpose2000 15y agoI 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/2cce055427528cab607e020cbc681c921fb1fe44 https://github.com/xpose2000/Cleaner-Hacker-News/commit/2cce...
- annon 15y agoLooks 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 15y agoLooks 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 http://subtlepatterns.com/?page_id=890#faqbox-left
- primigenus 15y agoI 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 15y agoI've sent you a pull request for moving this to a gh-pages branch. It shouldn't take more than a few minutes.
- SoftwareMaven 15y agoI 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 15y agoAt least on the iPhone, I use an app (http://itunes.apple.com/us/app/news-yc/id434787119?mt=8 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 15y agoThere are a few Android apps as well.
- saurik 15y agoThe 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.
- mike 15y agonews:yc has a small text font setting and a nested comments setting which shows all comments rather than just one level at a time.
- saurik 15y agoAwesome! 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.)
- goblin89 15y agoThanks. My fork (bigger fonts, less wide page): https://github.com/strogonoff/Cleaner-Hacker-News https://github.com/strogonoff/Cleaner-Hacker-News.
- mayop100 15y agoThis should definitely be made permanent.
- Klinky 15y agoI 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 15y ago"foofy" margins actually have a purpose - to improve legibility. Something that HN is in desparate need of.
- telent 15y agoIf 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_s 15y agoI'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.
- javert 15y agoAren't columns actually used because it's easier to read shorter lines of text than long ones?
- scott_s 15y agoThat was what I just said, yes.
- javert 15y agoYou 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.
- dnewcome 15y agoHacking 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 https://github.com/dnewcome/hn-plonk
- tomku 15y agoYou 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 15y agoI 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.
- primigenus 15y agoGood point. I just added a link to the screenshot near the top of the README.
- rubergly 15y agoIt 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 15y agoCould 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.
- primigenus 15y agoThat's a different read of "cleaner" than I had intended, but you're free to fork :-)
- chrisdroukas 15y agoIt doesn't fix the appearance of the comments section, but lately I've been browsing the homepage via http://hckrnews.com/ http://hckrnews.com/.
- dbh937 15y agoAbsoloutely love the theme. I use http://hn.gethifi.com/ 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 15y agoThanks, 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 15y agowhy the noise bg? can that ponytrick die already?
- deepkut 15y agoThe 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 15y agoWould be great to see a Stylish version for Firefox (and Chrome) users. Nice work.
- hellotoby 15y agoYou can also add these stylesheets to Safari using the User CSS plugin, found here: http://code.grid.in.th/ http://code.grid.in.th/
- deepkut 15y 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 15y agoI much prefer Hacker News +: https://chrome.google.com/webstore/detail/oieefcckcbbgniifdhhialgkmghahjgl https://chrome.google.com/webstore/detail/oieefcckcbbgniifdh... It includes keyboard shortcuts, too!
- luiperd 15y agoI also use this one, very clean!
- chrisdroukas 15y agoOh wow, that is nice. It looks a lot like Gmail.
- Tim_M 15y agoI 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.