HipsterNews - DesignerNews theme for HackerNews | Hacker News Reader

HipsterNews - DesignerNews theme for HackerNews

chrome.google.com

92 pointscwhitaker0159 comments

I use HNES (Hacker News Extension Suite) and it's awesome.

Here's the GitHub link: https://github.com/etcet/HNES

etcet is awesome about contributions, I added a big feature and he merged my pull request within hours.

On top of making HN look way-more-awesomer, it also adds features like comment collapsing (best thing ever), inline comment reply, and more.

If you're a Hacker News user on Chrome, definitely check it out.

Another option is Georgify: https://chrome.google.com/webstore/detail/georgify/ofjfdfale...

I've been using it for well over a year without problems.

I am using Georgify as well. I love it :)

I use it too, but sometimes it messes up with the comments threads.

Too bad it doesn't have support for https.

HNES is very good, but I prefer something less invasive, so I created this:

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

https://github.com/danmaz74/HNMarkAllRead

Hey that looks awesome! Loads of great features :)

Thanks so much for sharing this; it's a complete upgrade to the classic experience in nearly every way.

Thanks for linking to this.

Hey guys, thanks for the feedback. I put this together over a couple of evenings so it’s still a work in progress. I’ll try and address any feedback you guys have so I appreciate you taking the time to share it with me.

- Only in Chrome for now as their extensions framework seemed the easiest to get up and running with. Happy to add others if there’s actual demand for it.

- Clicking on the HN logo should take you to the HN root and not the YC root. I’ll have to look into why this is occurring. In the interim try updating your extension, it should be v.0.3

- Will address the button hiding issue ASAP * this is now fixed

My Hacker News looks like this:

http://cl.ly/image/1e061p3Q2U0U http://cl.ly/image/0B1s3m1R1b1Y

I'm using a custom stylesheet, which you can find here:

https://gist.github.com/kballenegger/5022493

I forked this from something somebody posted here a while ago, but I cannot remember it. If anybody knows the source, I'd be more than happy to throw a comment in there for credit.

It looks sort of similar to this: https://chrome.google.com/webstore/detail/hacker-news-enhanc...

But maybe that extension spawned from whatever you had seen.

Not a Chrome user (poor font rendering on my m/c).

If you released it as a usertyle in userstyles.org, that would have been truly browser agnostic. The Stylish extension makes it possible to then use it on pretty much all browsers:

I use Georgify with Solarised (light) and comfy Helvetica together in all my browsers (Seamonkey/Firefox, Opera, Maxthon) for reading HN.

In my view, this is a much more memory friendly approach for Chrome users also, since there is no need for yet-another extension specific to one site. All they would need is the Stylish extension (which can be used to customise Google, Wikipedia, and a lot other sites).

Just my two coins.

Yeah valid criticism. The biggest issue is that the HTML for HN is almost devoid of any semantic markup. This means I’m reliant on a little bit of JS to differentiate between different pages in order to achieve the desired look.

Hmmm, I see.

In this case, we simply move from userstyles.org to userscripts.org ;-) There is grease monkey, tamper monkey & violent monkey which essentially allows various customisable JS codes tailored to various different sites. Like userstyles/Stylish, userscripts/greasemonkey is supported by every browser out there in some form or another.

Still, I forgot to mention earlier. Your screenshot looked good. :-)

Might want to post a link to a web page that actually contains some info about whatever this is. On my iPad all I see is a Chrome web store "Sorry, your operating system is not supported".

I understand that whatever app the link is about may not actually run on the iPad, but I should at be able to read about it in case it's something I want to use when I get back to my desktop system.

I like this one more.

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

Reasons:

  Commenting is not broken
  No eye attracting solid blocks of color taking attention away from the text.
  Works better with zoomed in.

The link appears to be broken. Happy to check it out, also I have just fixed up commenting, sorry about that.

Hey I fixed the link. I think your skin def looks better than the default HN skin. You should pay some attention to how it adapts to different levels of zoom though. I really prefer the one I linked for this reason. Things like inline replies and tagging are just nice extras.

I can’t really claim any credit for the design. I simply wanted to recreate the look of https://news.layervault.com/ which I really like so all credit for that should go to @Allan

As for the zooming, that should technically work as is, unless there’s something I missed. Let me know if there any particular pages that are looking wonky.

Here's mine:

.comhead { color: #777; }

.subtext { background: #f8f8f8; border-radius: 4px; color: #888; font-size: 60%; text-align: right; width: 90%; }

.subtext a:visited { color: #a00; }

.title { font-size: 120%; padding: 4px 12px; text-shadow: 1px 1px 1px #ccc; }

.title a { line-height: 90%; }

a { color: #008 !important; }

a:hover { color: #00f !important; }

a:visited { color: #c44 !important; } a:visited:hover { color: #f00 !important; }

span.pagetop a { color: #000 !important; } span.pagetop a:hover { color: #ff0 !important; }

body > center > table { background: #f0f0f0; width: 100%; }

span.comment { display: inline-block; width: 800px; }

table { border-spacing: 0; margin: -1px; padding: 0; }

td { padding: 0; }

td.default { background: #fcfcfc; border: 1px solid #444; border-radius: 2px 4px 4px 4px; box-shadow: 1px 1px 6px -2px #444; padding: 10px 20px 20px 15px; }

textarea { height: 20em; width: 1000px; }

I really dig the way comments are displayed.Great idea.

Here's what my HN looks like http://cl.ly/image/080p02233E3O https://gist.github.com/i386/4949727

This isn't helping me when I wget the front page of HN and email it to myself.

Hey folks, apologies for the commenting issue. I have updated and resolved this now. You can update your extension to 0.4 in the extension manager and comments should work now.

Another note, both down and up vote arrows point up: http://i.imgur.com/sVdi10q.png

Nice job though!

Pretty incomplete at this stage: lots of broken layouts, parts of the original HN theme showing up in odd places. Nice stuff though, I definitely found the Designer News' design to be interesting. However, after using this theme I feel like the current design provides a pretty nice density that I've grown accustomed to.

Yeah a few friends have mentioned they like the density, which is very reasonable. I personally find it easier to scan when content is more spaced out, but I may just include a settings page that will let you change layout density to your taste.

Also apologies for the things that are still broken, my original post on DesignerNews mentioned that it’s still a work in progress and I didn’t expect this many folks to take notice of it so quickly.

No worries: I think HN could use a bit of a clean up. Thanks for sharing.

Down arrows are broken, they appear as up arrows for me. The HTML is probably not easy to parse as there are no classes, but it's like the up arrows but with 'down' instead of 'up' in both id and href.

Also, the edit form is broken for comments and arrows appear beside all the links - they are being treated as upvotes I assume.

Hey grey-area, yeah I’m yet to fix all these up. Truth be told my karma count is a little low so I wasn’t even aware of the down vote links. Will amend.

I must say, the choice of Verdana for the body-text is a bit weird and clashes with the Helvetica in the meta-text. I would stick to Helvetica like Designer News.

Actually, scratch that. Designer News uses Helvetica Neue. Don't believe the hype, Helvetica Neue renders like crap on-screen. Arial all the way at sizes under 16px.

Yeah was meant to be Helvetica, will fix this :)

Looks like everyone has their own hn design. :) Here is mine: https://github.com/bjourne/readable-userstyles/blob/master/h... It's a user stylesheet so you need the Stylish plugin to use it.

It looks ok, but the HN logo goes to the main YCombinator page and not the main news page... And you can't comment at all because the button gets hidden when you try and click on it.

It's really good, the only thing about it is the fact that the points are not displayed near the username. Thanks a lot for this extension ;)

Yeah it’s one of the things I intend on fixing up. I literally spent two evenings on this so there’s a bunch of things that need work but I thought it was good enough for other folks to try out.

Off-topic but this is the first I've heard of DesignerNews. Anyone have an invite? There's no way to apply for one on the site.

You can find some people giving them on twitter: https://twitter.com/search?q=%23DesignerNews

What if one is not on twitter? Are there email invites available, a la lobste.rs ?

Thanks!

If somebody happens to have an invite of DesignerNews I'd like to give this a try, thanks!

Find me by @itsnotvalid on twitter

You guys shoot me an email samuel@auburn.edu

I've got a few invites to give away.

The downvoting icon is wrong: http://cl.ly/image/111r3V1A0W0r

There's a downvoting icon? I only see one up arrow. You must be special.

You should have at least 500 points of karma to see it.

It was a little higher for me. I only was granted when I crossed 520 or so.

Hmmm, no wonder I missed it, my karma is too low to have seen it :\

I love the design. But, it would be better if the author also attach the source code on the Github : )

I believe in the potential of this, keep up the great work, and I look forward to updates :)

Only works in Chrome? Do not want.

I like it but it doesn't let me comment when clicking "add comment", I had to uninstall.

I fixed this up now, really sorry about that

Hurray for no confusing icons w/o alt-text like DN has!

This is cool. Thanks for putting this together!

Hey Kelly, no problem. Thanks for building Designer News in the first place, it’s awesome!

Is it open source ?

No reason it couldn’t be. I’ll do some code-tidying and put up a git repo for it.

I will wait for the github repo : )

Reply on news.ycombinator.com