
HackerNews Grid - kubopaper
http://hackernewsgrid.com/
======
fairpx
Interesting experiment. My observation: With the thumbnails, the title of each
post becomes a less-important-caption. In the case of HN, I think the text-
only approach is far better. Product Hunt used to be text only, and frankly,
it was a better experience. The moment you introduce images to these types of
communities, people will start using that real estate to create flashy-
attention-grabbing visuals. Over time, it'll be more about how good a
thumbnail looks, rather than the curiosity of a title that lures you into the
content.

~~~
arca_vorago
On a similar note, I consider the moment reddit abandoned text only their
first large mistake. (Many more since then)

~~~
m3rc
What was stopping people from taking the same click-bait approach to the text
titles? Titles on reddit are still pretty damn nondescript, and rarely have
actual relevant information in them.

~~~
arca_vorago
Honestly it was a difference in the userbase and how they interacted. There's
some unknown threshold of users where once a platform becomes too popular it
begins to degrade. I'd say pre-2010 reddit is a vastly different beast than
today.

------
helloworld
I'm hoping that this makes HN's front page just to see the fun recursion of
the site displaying a screenshot of itself. (And I do appreciate the
experiment in user experience design, too.)

~~~
helloworld
P.S. I just Googled "recursion," and got this very witty reply:

    
    
        Did you mean: recursion

~~~
aidenn0
At least one dictionary used to end their entry on recursion with "see also:
recursion"

------
nemoniac
A huge part of the appeal of the standard HN page for me is the simple,
straightforward, sensible headline without the discration of images. The title
guidelines and the insistence on adhering to them are a big plus in this
regard.

~~~
AnkleInsurance
I really like that HN is so low bandwidth. I often check the fp on shitty
mobile connection and while I can't read most stories until my rss reader
catches up, at least I know what people are talking about.

~~~
SOLAR_FIELDS
I enjoy this as well. Plus the raw site is faster than any app reader I've
tried before and while I have somewhat fat fingers I typically don't have too
much of a problem clicking links on the mobile site.

------
AriaMinaei
Whenever I see something like this, I sigh and wonder, "Why should it be so
hard for the average internet user to create a live 'grid of thumbnails' for
'a list of links to webpages'? Why should it take a whole developer to code
and deploy an entire website, just for this one use-case?"

Software today is not as "soft" as one would've hoped, fifty years ago. It's
not malleable. It's not composable. It's barely reactive.

This is not how it was meant to be.

~~~
onion2k
Every time someone says "Why should it be so hard to.." with software it's
because they've not thought about the requirements. If you break down "a live
grid of thumbnails" it's actually a relatively complex app even if you're just
making an MVP. Even if you're prescriptive about things like the number of
links in the list, the size of thumbnails, the layout of the thumbnails, the
way the user manages what links they see, the regularity of updates, you're
still left with an application that needs a basic list CRUD UI, a grid of
thumbnails, something to render a screenshot of the website to a thumbnail,
code to handle the site being unavailable or un-rendererable, a backend to
store the list data and thumbnail images, maybe something to check to see if
the site has actually changed (which can be tricky if it loads content with
JS). And that's before the user's ask for features like drag and drop grid
reordering, update scheduling, etc.

That's not to suggest it'd take more than half a day to knock something
together, but that's more down to the awesome ecosystem of software libraries
than it being a simple project. To write an app from scratch in, say, C++
would be a _huge_ project.

~~~
AriaMinaei
I would disagree. All of the problems that you mentioned, such as "the layout
of the thumbnails", "the regularity of updates" and "something to render a
screenshot of the website to a thumbnail" can already be solved and
parameterized to such genericness to be sufficiently usable for this use-case
and, I'd surmise, most others.

------
Jonas_ba
We have done something similar for the hn search at Algolia but flagged it
under style -> experimental in the settings panel. It's not a grid layout, but
more a refresher to the current design.
[https://hn.algolia.com](https://hn.algolia.com)

~~~
cheeaun
Somehow clicking on the thumbnails keep appending `%7B%20%7B%20hit.url%7D%7D`
to the URL. Bug?

~~~
Jonas_ba
Could be, we haven't nurtured this much as the "experimental" layout didn't
seem to get much traction

------
grey-area
You really, really need to update the screenshot for hackernewsgrid.com for
infinite recursion, now that you're on the HN home page the screenshot should
include a picture of itself.

~~~
rvanmil
Hah! I've been refreshing the site all day just to see the recursion happen,
but it looks like the screenshot won't update :(

~~~
nthcolumn
Clear your browser cache (just for news.ycombinator.com)?

------
jacquesm
Nice example of the Droste Effect.

[https://en.wikipedia.org/wiki/Droste_effect](https://en.wikipedia.org/wiki/Droste_effect)

~~~
omni
To lessen the clickbaity nature of your post:

> The Droste effect (Dutch pronunciation: [drɔstə]), known in art as mise en
> abyme, is the effect of a picture appearing within itself, in a place where
> a similar picture would realistically be expected to appear. The appearance
> is recursive: the smaller version contains an even smaller version of the
> picture, and so on.

------
sidcool
The internal HN links are going with a double slash.

E.g.
[https://news.ycombinator.com//item?id=15080693](https://news.ycombinator.com//item?id=15080693)

Resulting in Unknown page.

------
hiisukun
Thanks for posting this - I quite enjoy browsing hacker news using thumbnails
from mobile after trying it. On my laptop, I think I prefer the original
homepage. I like to check the news once a day, but some days I'm short of time
and use an alternative that cuts down results shown [1].

Overall I'm very happy to have now three good options for checking out what I
consider to be a very good source of fuss free tech news and discourse.

[1] hckrnews.com - hopefully it isn't a faux pas to mention a potential
competitor to your site in this thread.

~~~
Qub3d
I use hckrnews too. You can set it to show everything, but its more of a nice
CSS skin for the main site.

This one seems to do a bit more, and changes things more dramatically. I don't
think the subgroups of HN that like hckrnews would overlap much with the one
that would like this site. Its much more visual.

------
Bobbleoxs
I definitely clicked a couple more just by looking at the screenshots than
reading the plain text index. I wonder if there's psychological lure in
graphics. Thank you!

------
captainmuon
That's nice. I thought about using thumbnails to linked sites before, but I
wonder about the legal dimension.

What if someone puts something illegal, or copyrighted on one of the linked
pages? Does anybody have advice (internationally / US / Germany)?

I'm based in Germany, and here there is strong legal protection for "quoting"
excerpts. However, it is often debatable what counts as a quote. German news
sites often take a photograph of a screen, instead of a screenshot. There
seems to be protection for search engines (e.g. Google Photo Search), but the
situation is not clear. There is also no "fair use" or safe harbor like in the
US.

I'm especially afraid of cease and desist letters (Abmahnungen) - there is an
entire industry of people who crawl the web and find copyrighted images with
image recognition. The mean thing is that they don't let you use their tool to
check for compliance - I would gladly buy a license for images I accidentially
use, or remove them - but it is more profitable for them to send you a letter.

(Rant: I once had a case where someone accidentially printed a copyrighted
image on a document and put a scaled down picture of that document on a domain
managed by me. The copyrighted image was about 50x50 pixels, mirrored, and
black and white, but they had me pay ~800 Euros for it. Funny thing is that
they never ever contacted us via the contact email. They didn't care about
their client's rights or about selling an image, they wanted to milk us. They
sent physical letters to people they thought related to the site, until they
grabbed me (the Admin-C of the domain).

Now I heard they are going after people rewteeting or liking copyrighted
images - IMHO that is ridiculous, there should be a difference between
"including" and "linking to" an image.)

------
thiht
I don't really see the point since most thumbnails are just a screenshot of
illegible text. It doesn't help at all.

I think a better thumbnail system would be to use an actual image of the
article (for example, the thumbnail for the page
[https://www.gobankingrates.com/retirement/1-3-americans-0-sa...](https://www.gobankingrates.com/retirement/1-3-americans-0-saved-
retirement/) would be a crop of [https://cdn.gobankingrates.com/wp-
content/uploads/2016/03/sh...](https://cdn.gobankingrates.com/wp-
content/uploads/2016/03/shutterstock_160438778-1420x595.jpg)), or simply a
favicon in case there's no image available. Hell, you're experimenting so why
not even a carousel of all the images in the article? (moving on mouse hover
ideally)

Also the title should not be secondary, below the thumbnail. Maybe it should
be over the image in some way?

------
aaronhoffman
I have a "preview" feature on
[https://www.sizzleanalytics.com/HackerNews](https://www.sizzleanalytics.com/HackerNews)
that uses OG tags, but I'd much rather use these images. Any way we can work
something out?

~~~
cjr
Have you thought about using something like urlbox
([https://urlbox.io](https://urlbox.io)) to quickly add website preview
thumbnails?

~~~
aaronhoffman
Something like that, or a headless browser, would be great, thanks!

------
dredmorbius
Ugh. No.

I keep seeing sites shifting to high-graphics, low-text content. HN is an
interesting exception in that it's zero-graphics, low-text -- the only
indication of content is a <80 char subject, the originating site, user, and
current votes.

What I'd prefer is deeper _textual_ context, a'la Jacob Nielsen's long-
standing microcontent guidelines. A 140 - 500 character introduction a strong
title, and _maybe_ an accompanying thumbnail or avatar.

------
owens99
What API did you use for the screenshots?

~~~
Jhsto
Not the author, but taking screenshots is nowadays rather simple with headless
Chrome:
[https://developers.google.com/web/updates/2017/04/headless-c...](https://developers.google.com/web/updates/2017/04/headless-
chrome)

~~~
owens99
Thanks for the tip!

------
Waterluvian
If I were to add another feature to HN I would add color coding of how content
dense a link is. Sometimes a link is a big long essay, and I might not want to
click on it just yet.

------
znpy
This is awesome, but I would really appreciate if it would use all of my
screen estate (i am using a 1920x1200 screen) instead of using only three
columns.

~~~
pluma
What browser are you using? The site seems to be responsive in Chrome (1440
width shows four columns, 1920 shows five, not sure where the breakpoints are
exactly).

EDIT: It's using a flexbox grid layout so it shouldn't actually need any
breakpoints. Maybe the layout changed since you checked it or your browser is
triggering a fallback?

------
max23_
Just notice some thumbnails are showing pop up dialog instead of the site
itself.

If Puppeteer[1] is used to screenshot the site, probably need to use the
page.click API to close it.

But, one problem with that is you need to know the exact selector name which
maybe is not a generic one.

[1]
[https://github.com/GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer)

~~~
aaronhoffman
You could try pressing 'escape' maybe? Works for some sites

~~~
max23_
I think that will work too as there is an API for generating keypress event.

------
97-109-107
Also [https://hnews.xyz/new](https://hnews.xyz/new)

~~~
valentinvieriu
Thank you for mentioning this. There are couple of similar patterns between
the projects, but feels that hnews.xyz it's faster and has more features.
Congratulations to the creator for having fun building this and please share
the code!

------
have_faith
Personally, I don't find the thumbnails add anything and also detract a little
from reading the headlines. Not to knock on it as an experiment.

My main UX issue with HN is the comment nesting. Would much prefer less
nesting and something akin to 4chan's backlink post referencing.

~~~
RickS
What's the advantage of that comment style? 4chan's comment threading is
effectively non-existent

~~~
unkown-unknowns
4chan style makes it easier to see which comments are new. However it does so
at the cost of separation of subtopics. IMO 4chan style is not a good fit for
HN because we often have many different conversations going on at the same
time within the discussion of a story. If HN switched to 4chan style comments
I believe that it would dramatically change the nature of the discourse for
the worse.

------
senectus1
looks great, but needs meta info... like post time/comment numbers/points
etc...

~~~
sleepychu
and the URL domain, I thought "Shop Walmart and more of your favorite stores,
faster" was an inserted ad till I noticed it was on blog.google on the real
front page.

------
hiven
When I clicked on a link it added an additional slash to the URL, I.e
[https://news.ycombinator.com//item?id=15074526](https://news.ycombinator.com//item?id=15074526)

------
Pavan_
There is one more similar site
[http://richhn.herokuapp.com/](http://richhn.herokuapp.com/) which fetches
meta tags of hackernews links and shows it's rich preview.

------
Vilkku
Nice. There's a bug, self posts have an extra slash in the url (for example
"Show HN: How to discuss with opinionated people using the Socratic
method[video]" which is currently on the front page for me).

------
technofide
Would love to know what are you using for the screenshots? Is it urlbox?

------
djKianoosh
Usability question.

Is it easier to read, or just otherwise better, if the picture came after the
link/heading?

I find it hard to visually read/parse the way they have it now with picture
first then title.

------
Meekro
Several people here are asking how you automatically screenshot websites. Look
up PhantomJS -- you don't need to use someone else's API when you can make
your own! =)

~~~
jakub_g
PhantomJS is kind of deprecated (and the maintainer said he's stepping down
[1]) since Chrome finally got a headless mode several weeks ago. There's even
a tool from Chrome team [2] that allows making screenshots from nodejs:

[1]
[https://groups.google.com/forum/#!msg/phantomjs/9aI5d-LDuNE/...](https://groups.google.com/forum/#!msg/phantomjs/9aI5d-LDuNE/5Z3SMZrqAQAJ)

[2]
[https://github.com/GoogleChrome/puppeteer#usage](https://github.com/GoogleChrome/puppeteer#usage)

------
ankit84
Is this a side effect of Puppeteer lib?

[https://github.com/GoogleChrome/puppeteer](https://github.com/GoogleChrome/puppeteer)

------
myth_buster
Opportunity for infinite recursion.

[http://i.imgur.com/9PGlGOG.jpg](http://i.imgur.com/9PGlGOG.jpg)

------
carapace
Sort of off-topic, but uh, how to generate thumbnails of websites? Is there a
service?

Apologies for the laziness.

------
mrleinad
Awesome, just found my new go-to HN site.

------
funvill
check out [https://hckrnews.com/](https://hckrnews.com/) the "top 10", "top
20", "top 50%" links are great features for me.

------
calcifer
Wow, looks and works perfectly without JS enabled! Really appreciated.

------
lowkeyokay
For the love of God please upvote the this (the OP) so that it will be in the
top 9 posts. Then we can all watch a feedback loop in all its pixel glory!

edited to clarify that I'm not in any way asking anyone to update my comment -
just the original post

------
sAbakumoff
Cool, is that thing made by using React?

------
williamle8300
How'd you get the thumbnails?

------
thinbeige
This is the wrong kind of presentation for the typical HN content. And
somebody did the same thing already before.

------
filipmares
That site loaded so fast!

------
iorekz
a bit higher and we can make a hackernews grid inception

------
mindhash
Try pinterest style

------
justbaker
Nice! I like it :)

------
popol12
I frankly prefer the original, it's more efficient to me.

------
sunilkumarc
How are you getting the thumbnail images?

------
allenleein
Fantastic one!

