
Show HN: HackerNews reimagined without tables or center elements. - sergiotapia
http://coderwall.com/p/-vqwfg
======
pooriaazimi
(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_

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

~~~
pyre
That could be fixed with:

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

~~~
jurre
Cool, learned something!

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

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

~~~
simba-hiiipower
_"...and it would be nice to know when someone responds to a comment."_

<http://hnnotify.com/>

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

~~~
simba-hiiipower
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..

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

~~~
WickyNilliams
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!

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

~~~
simba-hiiipower
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).

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

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

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

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

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

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

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

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

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

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

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

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

~~~
ColinWright
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!

------
EzGraphs
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/>

~~~
achal
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>

~~~
EzGraphs
Thank you - reported to the design team :).

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

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

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

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

~~~
ceol
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_.

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

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

------
danielsju6
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...](https://chrome.google.com/webstore/detail/ofjfdfaleomlfanfehgblppafkijjhmi)

~~~
neeee
Or if you like dark themes; <http://userstyles.org/styles/71155>

------
VMG
Hacker News should have an API.

~~~
ianbishop
There is one! <http://www.hnsearch.com/api>

~~~
username3
_HNSearch data is about ~15min behind HN._

[https://groups.google.com/forum/?fromgroups#!topic/hnsearch/...](https://groups.google.com/forum/?fromgroups#!topic/hnsearch/wjBFEr5TvcY%5B1-25%5D)

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

------
novamantis
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...](https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe)

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

~~~
Kilimanjaro
My shot at a HN redesign:

<http://georgenava.appspot.com/demo/hn/index.html>

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

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

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

~~~
repsilat
> * 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.

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

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

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

~~~
nickknw
I sure hope not, that would be pretty misleading.

------
mkantor
I made some tweaks: <http://jsbin.com/ewufof/366/edit>

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

------
sandGorgon
Alignment problems on opera/android 2.3

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

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

------
StuieK
Love the search function.

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

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

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

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

~~~
commanderkeen08
Shoulda used Codepen.io ;-0

~~~
heyporter
<http://codepen.io/anon/pen/zhIiA> (<http://codepen.io/anon/full/zhIiA>)

