(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
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.
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.
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.
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")
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.
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'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.
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 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'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.
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.
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.
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.
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.
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.
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.
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..
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!
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).
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.
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.
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.
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.
>> 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.
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).
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.
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.
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... )
> 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.
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.
> * 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.
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.
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.
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".
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.
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).
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