Hacker News new | comments | ask | show | jobs | submit login
Show HN: HackerNews reimagined without tables or center elements. (coderwall.com)
165 points by sergiotapia on Aug 13, 2012 | hide | past | web | favorite | 146 comments



(off-topic) What is wrong with Coderwall? They're worse than Google+ and the stupid "Join Google+" bar... If someone wants to join, they will. No need to rub it in their face. At least have the decency to show a close button...

In case it's not clear, I'm talking about the stupid, 105px tall black bar that asks you to "Join Coderwall" when you start to scroll


I literally couldn't finish the article, thanks to that bar, and I normally care alittle to none about things like formatting if the content is good.

Unfortunately, having a massive black bar overhead gave me a feeling of claustrophobia. Made the reading intensely uncomfortable.


Founder here...we have been experimenting on variations of a bar with the goal that someone that stumbles upon a pro tip like this one can discover more about Coderwall. I agree that it looks a little big, intentions were not to be obnoxious - we'll be fixing that.


Any time a developer drops one of these "popup" spam div's into my page while I'm on their site I block it using Adblock Plus.

If there are enough people like me that get tired of seeing this particular piece of visual spam it gets added to the list of elements that are blocked for all Adblock Plus users.

The lesson site designers and developers really need to start learning is STOP DOING THIS. Put a link in your nav, or at the top of the page.

Turning hover on for everything is annoying. Crap popping up on your page when I use the scrollbars is annoying. I really don't care how clever you think it is. It's just damned annoying.


While you're at it - on 13'' screen and 2 year old machine your site is absolutely unreadable and unusable. There is a little bit of text in the middle and vast swaths of space with strange blurred colors occupying most of my visible space. Then the black bar. Selecting text takes forever (some JS tricks? I dunno?).

Generally speaking I find arguments about usability from someone who can't present their own blog a little dubious.


if you're trying to help this guy tell him what your browser, os, and screen resolution are.

if you're trying to stifle those that would make contributions to this community then keep doing what you are doing.


it seriously does not matter. the pixel sizes are hardcoded so it'll look unreadable on any small screen, your particular OS does not matter. my resolution is 1440x900 if this helps.


Just add a big sign up link to a bar on the top. Your potential userbase is smart enough to scroll up and figure it out.

Edit: I can type good


Alternatively, if you want something that's always there, you could put it on the side.

One of the seldom talked about problems with floating headers/footers is that they break page up/down. Hitting space bar now takes you slightly too far to keep reading uninterrupted.


Personally, any fixed element on a webpage drives me up the wall. I've had to install adblock just to manually hide divs like this.


When I'm reading an article (on anything other than my iDevices or Mac, as they all thankfully have 'Reader' that show a no-bullshit version of the article), I like to press 'space bar' to go to next page. It just drives me nuts when I have to 'press space bar, press up arrow 4 times' just because some designer thought it's clever and nice to have a go with a reincarnation of navbar iframe (that everyone agreed were heinous)... What the fuck is the purpose of a giant bar that shows some silly social icons? You already have that damn 'like' button on 20 other places on your web2.0 page... Just look at TheNextWeb: vhttp://thenextweb.com/apple/2012/07/20/apple-gives-developer... (you have to scroll a bit to see the "feature")


Good to see founders responding personally to criticism like this.


How about adding a button to close it while you're at it? Or better yet, clicking anything other than the button should dismiss it.


Wow, I didn't even notice it. I wonder if you or I are the majority here?


I didn't notice it either. I'm on a 27" iMac though. I'm sure if I was on my Air it might be different.


I'm on a 30" monitor and noticed it right away. It's pretty annoying.


I noticed because I wanted to click to the front page (coderwall.com), but when I scrolled back to the top, the banner was covering the 'coderwall' logo/link/branding. Had their been a button to close it, it would have been preferable.


Didnt notice it on my iPad either.


OP here: I just opened the site on a fresh machine and it is big! I hope the team fixes it in the future.


We go through this every now and then. Hell, I even replicated the exact HN look, on a project that pg asked me to shut down a couple years ago, using a much simplified div/CSS structure.

Point is, it doesn't matter.

Yes, could HN be totally revamped? Sure, there are thousands of capable engineers in the community that could and have done it. Should it be? Meh.

Honestly, it just works. Its pretty stable. I read HN as much from my phone as a laptop. I've tried the various alternate UIs and iOS apps, but I always just come back to the site.

I'm probably not the only old-timer that feels this way, but there are plenty of alternative UIs for those that want them, and indeed they use them.

HN is a great lesson in the "don't fix it if it ain't broke" methodology of engineering. 2000+ year old Roman aqueducts are still used in some places in Europe. If somethings doing the job it was designed for, you don't have to upgrade the concrete just because you have newer cement.


> Honestly, it just works.

Honestly, it's a pain. My personal experience is vastly different. I have a 40min (one-way minimum) commute to work and I use that time where I can't create things to read news, so that I can spend time working at work and doing stuff at home. HN is simply an excruciating pain on a touch device. I regularly hit flag by mistake. I regulary miss the upvote arrow. I regularly downvote instead of upvote. It's just text and on my laptop I can see the content render like in those "Chrome is Fast" slow motion videos, except it's in real time (Chrome says 1+ second). Proxy apps simply don't cut it: they're either read only or have access to my credentials, and generally they appear to reach 90% of their development, and leave the remaining 90% undone.

> We go through this every now and then.

I'd take that as a clue that something's amiss.

> "don't fix it if it ain't broke"

But it is broken. It regularly times out on me, whether I load the site or I try to post a comment. I know it times out on me on votes, because I vote and then I come back later, and the vote arrow is there again. I don't know why, if that's because I'm across an ocean or whatever, but I have the feeling that ~3K characters of human text should not inflate by an order of magnitude with markup. I feel a code smell every time I browse here, the kind of which that could have an impact at scale. I'm not saying I know how to fix it, I'm not bragging I could do better, but hell yes is there something wrong. The only reason I put up with it is that the voting system is smart, and the content and community are great.

Now I will click 'reply', and as always I will take great care of copying the content of my reply, just in case.

</rant>


Excellent points. For your situation, you might try some of the alternative interfaces. Might have a better experience.


You should check out the Lazarus browser addon for textarea backups :)


If one needs a browser addon to make a site work well, then the site isn't well designed. Tumblr, for example is a delight to use on all browsers (mobile and otherwise) and it doesn't require an add-ons.


I agree, except this addon is useful for any site - I suggest you look at it.


I think the UI matters. HN is great but I feel the commenting system could be greatly improved. Collapsable threads anyone? In general I wish HN would use a StackOverflow-like system (rep and votes on comments).


I give up on long threads. There's no way to know at a glance which comments I've already read which makes keeping up-to-date on a quick moving discussion so painful I just give up. A simple colour coding of replies would make it much easier to revisit a thread.


There's also no point posting on a thread after the comments start paginating, as maybe 10% of people will go to the second page to view it, and you'll get no replies, in my experience.


In my opinion it's fine the way it is. HN comments are compact and only separated by the bare minimum, which makes for easy and fast reading. Stackoverflow doesn't digest that well for me because it has a lot of unnecessary padding, boxes, user info, etc.


I think it could do with a little more spacing. Whitespace is an important part to easy skimming. Maybe 5px?


I'm often disappointed to find comments veer off track and never return. In rare cases the digressions are more valuable than the original article, but it sure would be great to be able to collapse ego wars, etc.


i second the collapsable threads. that would be a huge improvement.


But it is broken.

No thread collapsing. Screen readers don't work well here. Renders poorly on mobile devices.


I would love it if the site were responsive. Reading and commenting via iPhone is an exceptional pain.


The current HTML/CSS of HN acts as an API for third-party services and apps that depend on HN's data. If you change this API, you break all these services.

So in my opinion, it's not worth the change.


Scraping a rendered HTML view ≠ a stable API in any sense of the word.


Why? What's your argument?


While you're at it, change the "static" up-vote triangle to this unicode character: ▲ http://www.fileformat.info/info/unicode/char/25b2/index.htm so it scales nice on high-dpi devices, or simply when you zoom-in in a desktop browser.


I don't feel like firing up my IE VM to test it myself, but are you certain that character is browser safe? I've run into a lot of issues with unicode glyphs not working on vanilla IE8 machines that didn't ship with fonts containing them.


According to browsershots (not affiliated), it works fine on IE6-10.


Does anyone on HN use IE6/7/8? I’d guess that this is a more web savvy place than that.


Individual web savviness doesn't always come into it. There are those here who work within environments that mandate less than cutting edge browsers.


Chrome doesn’t need admin rights to install for what it’s worth. Although I have to say that if I was working for a company that mandated IE8 or lower as the solitary browser I’d be planning my exit. Maybe I’m just spoiled by working for a web agency.


Working in IE8 here.


[deleted]



It's not just an argument of preference when programmers suggest not using tables for layout - it's about using a best practice and a standard instead of an old hack that is a habit many are lazy to break in an age when most browsers have excellent CSS support.

This is what a screen reader emulator tells me the front page of HN sounds like:

"Page has one hundred thirty links Hacker News dash Internet Explorer Table with one column and ninety-eight rows Table with three columns and one row Link Graphic slash yeighteen .gifLink Hacker NewsLink new vertical bar Link comments vertical bar Link ask vertical bar Link jobs vertical bar Link submitLink login Table end Table with three columns and ninety-two rows"

Of course, anyone actually using HN with a real screen reader will probably only get the links list from their reader, knowing how useless the supporting markup is (aside from the table layout, HN doesn't use meaningful heading tags).

There are many more reasons not to use tables for layout, but accessibility should be enough of a reason alone to stay away from layout tables.


Instead of numbering the articles, you should put them in an OL instead of a UL, then you'll get automatic browser generated numbers and save a few more bytes.


That would only work on the front page though, wouldn't it? Once you click the "more" link it would just start from 1 again.


That could be fixed with:

  <ol start="21">
    <li>
    <li>
  </ol>


Cool, learned something!


How would that work exactly? That would make the HTML really cumbersome and clunky. Normally I'd agree, but in this case, imagine you're using a View engine to render the html against populated objects, it's easier to just output the number and not rely on the browser.

Can you illustrate what you mean?


    <ol>
        <li class="post>
            <button class="upvote">▲</button>
            <strong>India outsourcing back to USA</strong> 
            <span class="source">(shhhh.org)</span>
            <div class="stats"> ... </div>
        </li>
        ...
    </ol>


This change would also make a line wrap on a narrow interface wrap to the right of the number, helping the numbers stand out.


This comes up from time to time. From over a year and a half ago: http://news.ycombinator.com/item?id=2019950

And from almost five years ago: http://news.ycombinator.com/item?id=50159


Nitpick: what's up with the underlines to the right of the up-arrows? http://i.imgur.com/PSPES.png (OS X 10.7.4, Chrome 21.0.1180.57)

Bigger nitpick: I'd rather have a fix for functionality than for loading some extra data. The "next" page problem still occurs, and it would be nice to know when someone responds to a comment.


"...and it would be nice to know when someone responds to a comment."

http://hnnotify.com/


I mostly want other people to be aware of it - often times, I'll ask a question and never get a response. I don't know if that person is just ignoring me, or if they have no idea.


very true; clearly it would be best to have it actually integrated into the site itself. or, at the very least, throw-up a link to HN Notify on the profile/settings page..


There is the notifo option on the profile page, which I've been using successfully for some time.

It also doesn't address the 'mostly want other people to be aware of it' part though.


When i saw this i thought "Wow! This is something I wasn't aware of", grinning with delight. Then when i went to the profile page, hoping to see a simple opt-in/out via a checkbox. Instead I'm greeted with a mysterious text box with indication as to what I'm supposed enter.

I've assumed email address for now, let's see if I'm right!


Yeah, it is a little cryptic isn't it. I should have been less so with my comment. To get it working:

1. Sign up for an account at http://notifo.com

2. Download one or more of their client applications here: http://notifo.com/mobile_apps and enter your details

3. Enter your notifo username in the box on your HN profile page.

I think the reason this facility exists here on HN is because Notifo is a Y Combinator company.


thanks for the info; was always wondering what exactly that box was for..

unfortunately, given that i have a Windows Phone and they only seem to have completed an iPhone app, this doesn’t cut it for me personally (and i’m assuming for many others on Android as well). also, it seems they’ve closed down, so no hopes for further support coming anytime soon, if ever: http://blog.notifo.com/notifo

and i get that it was a YC Company and hence it probably made sense to feature them there (as it really could have added value to the site if widely adopted) but, as it’s gone, i really think the optimal solution would be to replace it with something like HN Notify which is platform agnostic (just need an email).


That is sad news (and I somehow missed this until now). I thought it was a good little service, I have been using it for a personal project too.

Indeed, something like HN notify would seem to be the go for me now also.


Only just saw your reply as my prior assumption that all it took was an email address was, of course, incorrect :) delicious irony!

Thanks for the info, sad to hear the company has gone under.


For what it's worth, that blog post was from September last year and Notifo notifications are still being sent at present. I assume the dude has put it in caretaker mode as he says in his post.


I'll investigate later on, hopefully they're still accepting new users. Thanks for the heads up


Woops, forgot to add the rule to remove the border off the image.

Are you talking about the "link expired" error that pops up when you want to go to the next page?


Yup.


This is part of the core of HN. As I understand it, it generates those links on the fly, and they expire. I think they are handled by some sort of lisp callbacks that expire at a certain age. It's not something that can be fixed with re-theme-ing the frontpage.


I've heard the explanation and I've heard the justifications, but it's still occasionally annoying to actual users of the website.


Right, but complaining about it to someone that spent a small bit of free time reworking the frontpage for fun seems out of place. He probably doesn't have the skills or access to make the changes that you want.


Right, but a bit of javascript to rewrite the links and form submissions should be doable.



Took me about 10 seconds to locate & fix, and I am not the author :P

http://jsbin.com/ewufof/6/edit


Regarding his whole point of using css, that upvote image should really be a background in the css file and the innerHTML should be text with a negative indent.


Or we could go one step further and replace images with unicode characters: ▲ + ▼

    ▲ - U+25B2 BLACK UP-POINTING TRIANGLE
    ▼ - U+25BC BLACK DOWN-POINTING TRIANGLE


Just please either don't put them right next to each other or make the vote reversible. I've often accidentally hit the wrong arrow.


So YOU'RE the person downvoting my brilliance! ;)



>> but the browser will render it faster because it has less to do

Is that strictly true? My thinking is that you may be able to express something in less notation, but the browser may have to calculate more to render it (such additional reflows or CSS lookups). Just saying. Reality is that it probably will be faster.

But I like the point that table-less designs do save on bandwidth and maintainability.


You should replace the <li>|<li> with li:after { content: " | "; }


Does that work on older browsers? (Meaning IE8 and above)


IE8 supports pseudo elements with few catches (none that affect this use case) http://css-tricks.com/browser-support-pseudo-elements/


I used to do this with a right-border, not sure if that's a best practice these days or not. You could do something similar in between the date/link/comment sections underneath a given link as well (since it logically is a list).


right-border prevents users from copying the "|" character, which always seemed like the correct behavior to me.


I think generated content (i.e. created by using the :after pseudo-element) also is not selectable or copyable.


Doesn't load at all on two of the browsers I use. Yes, no doubt you'll say "Well, upgrade to a better browser!" but I can't upgrade on those platforms.

So you're advocating making the site genuinely unusable for me.


Isn't the problem with JSBin (or CoderWall)?

His updated version of Hacker News isn't really that complex or incompatible with older browsers.


Coderwall loads, although it looks completely dreadful. Then I clicked on http://jsbin.com/ewufof/3/edit and that doesn't load. I get the very attractive spinning graphic, and that's all she wrote.

It would be nice to see if the HN alternative worked.


You might want to try http://jsbin.com/ewufof/21 so you get the actual page and not the JS Bin edit interface.


Thank you!

Now when I get some time a little later I can have a look at the source and see what's going on.

Cheers!


The problem I have with HN style by default is:

1) It is hard to tell what has changed recently (new comments, votes, changes in ranking)

2) The information is kind of crammed together and not lined up.

3) I hit refresh every few minutes

Am not a a designer, so had my son who has an eye for it help out on styling: http://hn4d.com/


Just a heads-up, the `font-weight:700` on anchor tags causes some issues (Firefox 17, Win 7)

Your site: http://imgur.com/ZYObO Without the font-weight rule: http://imgur.com/qfEaz


Thank you - reported to the design team :).


Not to nitpick, but - http://imgur.com/6xgeK


Hardly a nitpick. What are those things next to all the links on the bottom. I get them iceweasel 14 too...


This is a nice idea, but your css is horribly inefficient (using `.nav ul.actions li a` as a selector for example). I'm also a bit of a convert to http://smacss.com/ - make your html/css a bit more declarative rather than relying on nested selectors to apply rules.


Agreed, the CSS is really inefficient, for every anchor tag, the browser has to traverse the DOM up to the root element 6 times (not including the hover rules) ... It's a shame that so many developers don't know this (it's not very intuitive though).


CSS optimization should be the last thing a developer does, if at all. Most of the time, it's not worth it.

As a general rule, just be as concise as possible. `.nav ul.actions li a` could be turned into `.actions a` as long as it's alright for the .action anchor tags not in the .nav element to have the same style. But if you use .actions elsewhere and want the .actions list to look different in .nav, that's fine.


Thanks for sharing! I'm always looking to improve my code and I have to admit, LESS has really allowed me to write less code, but at the cost of producing longer reference chains. :)


Just in case the parent was misinterpreted: I think "inefficient" is referring not to how space-inefficient the CSS is, but that it forces the browsers to do a lot of extra work. (In the vein of https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficie... )


Yes I'm aware - I was referring to that.


> The point I'm trying to make is that using <table> elements for layout is bad and you should feel bad for using them. If you tried modifying something in original HN it would take a long time.

If you made the same point but removed the "should feel bad" bit, the point would be even better.


Just in case you aren't aware, "is bad and you should feel bad" is a meme from Futurama, so the author was probably just trying to be funny.


I use Georgify (Chrome Extension) makes things a lot better, I've actually forgotten what HN is like without it (yuck!) https://chrome.google.com/webstore/detail/ofjfdfaleomlfanfeh...


Or if you like dark themes; http://userstyles.org/styles/71155


I am using it, but Georgify sometimes messes with thread child indentation.


Hacker News should have an API.


If only Paul had a large community of talented developers from which to solicit volunteers to help with this...



HNSearch data is about ~15min behind HN.

https://groups.google.com/forum/?fromgroups#!topic/hnsearch/...


I can't see how to submit stories or post comments with that API


As another example, I wrote a HN clone the 'right' way: https://bitorama.com. It even supports right-to-left!


Probably get down voted. But this makes it bearable for me at least. No Firefox Allowed Club

http://userstyles.org/styles/70289/hacker-news-w-gsu AND https://chrome.google.com/webstore/detail/stylish/fjnbnpbmke...


This is the right time for nReduce to start a news aggregator site, with the latest bells and whistles, and start competing with HN in quality content.

Show the latest startups they're incubating, the best advice from their investors, that would be the best place to follow up on what's going on over there.

One last thing, add a little red envelope to the header and you win my upvote.



I agree with removing tables for layout, but I think it's OK to use them for the posts.

Maybe an unordered list would work even better.

The point is, tables are good for what they are made for: tabular data.

We don't have to cheat anymore, CSS and HTML have had moved forward a lot.

Changing HN wouldn't be too much work and would help keep it with the times.


Tables are easier to code for a functional programmer. That's why.


The main things I dislike about HN:

* Comments are allowed to get too wide for easy reading.

* OP text color is too uncontrasted from the background.

Other than that, I don't see a reason why it needs a revamp.


> * OP text color is too uncontrasted from the background.

IIRC this was intentional - the low contrast was meant to make people keep their message to the point instead of posting screeds of text in "self posts". If you want to say something meaningful you should host it off-site, if you want to discuss something with the community you should follow up in the comment thread.

I don't have strong feelings either way, though I do tend to select the text for better contrast when it gets long.


Anybody care to comment on whether this is intended to be ironic? It replaces a clear, concise table layout with a somewhat more verbose CSS version for seemingly no reason.

Had the author attacked the threaded comment page (which might actually benefit from using nested lists) rather than the tabular submissions page, I might be less confused.

As it stands though, I find I'm confronted with the least convincing attack on tables I've seen in a while (and I tend to put myself in the "CSS over tables" camp normally).


> It replaces a clear, concise table layout with a somewhat more verbose CSS version for seemingly no reason.

That's interesting that you claim it is more verbose. The author measured the before-and-after and came up with these numbers:

> Since he (and so many others) are all about the numbers, how's this for a number:

> Original HN website: 26087 characters long.

> My rewrite: 3587 characters long.

> That is some massive savings. This will not only be lighter down the wire, but the browser will render it faster because it has less to do.

Where is your evidence that the table layout is clear and concise, and where is your evidence that using CSS makes it more verbose? It looks exactly opposite to me.


Was that 3587 characters for the three items displayed on the coderwall version, as opposed to the 30 items on the HN page?


I sure hope not, that would be pretty misleading.


CSS would allow HN to have a layout that adapted itself to smaller screen sized much better. I find it horrible to open HN on my phone or even tablet.


What kind of phone or tablet? It works great on my iPhone / iPad, better than most mobile sites. I know that the Android browsers zoom differently than Safari on iOS, maybe that's the difference?


You can't vote (you have to zoom 3x or you'd accidentally down-vote a poor guy), and the front page is not readable in portrait mode, and only barely legible in landscape mode. Nested comments (more than 4 levels deep) are usually unreadable.


One rather handy feature of Chrome on Android is showing a small, zoomed window of where you click when there are a few links together; allowing you to select the correct link. I also assume this feature is present on the iOS version of Chrome.


"Great"? Are we looking at the same site? It looks lke this on my iPhone .. https://moo.mx/grabs/31902728.png


Google "Responsive Web Design." you shouldn't have to pinch your zoom your way into every website. HN has a poor mobile experience.


Comment pages look okay on your iphone when there is six or seven levels of replies? I switch to iheckernews.com if I want to read a long comment thread on the iphone.


Substantially smaller transfer size is certainly a valid reason. I don't know how accurate his numbers are though.


I'm not sure why refactoring a table layout (an old html layout hack) into something more semantically correct and accessible is considered an "attack".


I made some tweaks: http://jsbin.com/ewufof/366/edit


Bravo!

The infinite reasons for not doing this:

1) PG has much more important things to do.

2) It would break every other hack ever done based on HN.

3) Recurs back to 1.


Alignment problems on opera/android 2.3


If I were making changes to HN it would be to add a "Nuke From Orbit" button to posts.


I'm reading hackernews on links right now. It works. This new version doesn't.


Love the search function.


I don't have to turn on Javascript to read HN. Why should I have to with this?

Hell, I had to turn on Javascript just to not see a wall of text on coderwall. Honestly, HTML and CSS for layout people.


What are you talking about? His "mockup" (http://jsbin.com/ewufof/3/edit or http://jsbin.com/ewufof/3 (full-screen)) has no JavaScript.


I have to allow jsbin to see anything more than some spinning image. No, I don't allow javascript to see text.


His mockup is hosted on a javascript-based sketchbook platform (which is nominally intended for sharing/developing javascript snippets), despite the fact that there's no javascript in his mockup.


Shoulda used Codepen.io ;-0



It did rather confuse me too.

This is what I see when I visit that page in FF14 on Kubuntu - http://imgur.com/DTf8t.

The links, eg to the updated HN, are plain text without JS enabled. Had me wondering for several minutes a) how the designer of the page could possibly be criticising someone elses design and b) how everyone else was managing to see the new HN design (yes if I'd bothered to read it I'd have seen the link text but I was scanning for a link to view the work).




Applications are open for YC Summer 2019

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: