HackerNews Grid | Hacker News Reader

HackerNews Grid

hackernewsgrid.com

359 pointskubopaper115 comments

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

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

    Did you mean: recursion

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

some engineer at google must have loved doing this.

http://catb.org/jargon/html/R/recursion.html :)

"Department of redundancy departmemt"

https://www.google.com/search?q=cartoon+department+of+redund...:

It's taken a screenshot of itself, but it needs to climb higher so that we can see it recurring inside of itself

http://hackernewsgrid.com/screenshots-compressed/52bbadf90a3...

It's high enough now but looks like it hasn't refreshed yet.

Probably it captures a screenshot only once per URL.

The person that made the site could manually trigger a series of new screenshots though.

Aye. That's likely.

This is called the Droste Effect.

Cool! From a 1904 Dutch cocoa package design, I've now learned:

https://en.wikipedia.org/wiki/Droste_effect

The only reason I know about it is because I'm Dutch and my grandmother would serve me cocoa from powder in tin with that image on it.

The visual memories of childhood can be powerful. For some reason -- I know it's a stretch! -- this reminds me of the Froebel blocks that Frank Lloyd Wright played with as a kid:

Wright, who died in 1959, often spoke and wrote eloquently about the influence of the blocks in his understanding of design. In his 1957 book, ''A Testament,'' he wrote: ''I sat at the little kindergarten table top and played with the cube, the sphere and the triangle. I soon became susceptible to constructive pattern evolving in everything I saw. I learned to see this way, and when I did, I did not care to draw casual incidentals of nature. I wanted to design.''

Some architecture observers have noted the similarities between the block structures Froebel designed and the eminent architect's buildings.

http://www.nytimes.com/1985/10/13/style/the-froebel-gift-tak...

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.

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.

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.

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.

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.

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

That would seem to be the point the OP is making.

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.

I don't think it's that difficult if it's rendered live. You could have a similar site with a series of iframe. Could spoof it as an image by overlaying a div that captures and discards all clicks.

I bet the whole thing could be done with a couple lines of JS.

What does require real dev work and infrastructure is prerendering the web page screen shots and serving them up.

Similar things could be done with IFTTT, Zapier and, in the past, Yahoo Pipes.

The average internet user could use Dropmark: http://www.dropmark.com/ (not affiliated, but happy user)

Given that the word 'software' only really started appearing around 50 years ago [1], that might be a stretch, but nonetheless, I think you do our current set of technologies a disservice.

I'm sure it would be relatively incidental for the majority of HN readers to cobble something together that fulfils this sort of functionality without much work. If your complaint is that languages don't form higher abstractions of things like 'thumbnails', I think that is just due to us collectively preferring the flexibility of lower level code - it's certainly not because it would be difficult to create a language with such abstractions.

[1] https://books.google.com/ngrams/graph?content=software&year_...

I dread the day when the average Internet user can do such things. Or even _want_ to do such things. Please hire a good developer to do this and pay good money :)

I recollect a conversation I had with a recruiter around 12 years back. He was predicting that a day will come when a "manager" can drag and drop objects and create any kind of software application. That day has not come and it will not come.

Before I try to address the idea that "software" should just be fully adaptable to the needs and wants of the average internet user, let's stick to this more specific use case.

If you want a web site that allows you to create your own personal grid of thumbnails for a list of links (from a URL), that is something that can be built with software (with relative ease). If this particular developer created that tool, the considerations would certainly elevate rapidly - now it's useful to a lot more people, so you need to provide hosting for your larger audience. Instead of a novelty, you've created a burden on your resources. Particularly if they want a "live" grid of thumbnails, and thus it updates "constantly", the resource costs could quickly become staggering.

What are reasonable expectations for software, and if they are not being met, what is the roadblock? What exactly were the predictions and hopes for software in the late 60s?

A relatively average user can use WYSIWYG editors (including word processors, web editors, and apps that provide text, photo and video editing at your fingertips.) What else should they be able to do?

Are we merely discontent with the rate of progress? People who are not in the line of work of home automation are able to purchase hardware and configure it in their homes. People can buy inexpensive, versatile computer chips off the shelf and program them to be unique devices, meeting specific needs. We can already imagine, predict and hope for a future where the functionality of a web site or device is wildly configurable to the individual. What metrics do we have to reach before we're satisfied?

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

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

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

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.

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

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

On a related note, but different implementation (iframes), I recently learned that W3C does not believe infinite recursion should be a thing: https://stackoverflow.com/questions/14223628/why-does-a-self...

Nice example of the Droste Effect.

https://en.wikipedia.org/wiki/Droste_effect

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.

The internal HN links are going with a double slash.

E.g. https://news.ycombinator.com//item?id=15080693

Resulting in Unknown page.

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.

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.

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!

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

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... would be a crop of https://cdn.gobankingrates.com/wp-content/uploads/2016/03/sh...), 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?

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

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

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

What API did you use for the screenshots?

Not the author, but taking screenshots is nowadays rather simple with headless Chrome: https://developers.google.com/web/updates/2017/04/headless-c...

Thanks for the tip!

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.

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.

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.

I have five columns on my 1920x1080 screen using Firefox, dont know if that makes a difference.

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?

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

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

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

Also https://hnews.xyz/new

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!

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.

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

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.

I wouldn't like 0 threading, but I strongly dislike the depth of threading on HN for some reason, I find it hard to follow as it gets progressively narrower.

The 4chan post referencing (>>>/g/565645674567/) which allows you to reference any post from any board and it embeds itself on hover is a very underused useful feature I believe.

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

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.

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

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

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

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.

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! =)

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

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

Is this a side effect of Puppeteer lib?

https://github.com/GoogleChrome/puppeteer

Opportunity for infinite recursion.

http://i.imgur.com/9PGlGOG.jpg

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

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

Apologies for the laziness.

check out https://hckrnews.com/ the "top 10", "top 20", "top 50%" links are great features for me.

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

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

Cool, is that thing made by using React?

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

That site loaded so fast!

a bit higher and we can make a hackernews grid inception

Try pinterest style

Nice! I like it :)

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

Fantastic one!

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.

Second this. ProductHunt is unusable for me becasue of the thumbnails. They are distracting and add nothing but noise to the page.

Well, it moves the "click-bait titles" to "click-bait images"...

Click-bait titles can be moderated and edited more easily.

Especially algorithmically, we're a way off being able to do the same with images.

Except when the aggregators guidelines specify that titles must remain verbatim.

People sometimes think that about HN but of course it's not true.

Good point. I wonder if this might be measurably worse. A click-bait image might have the power to grab your attention from your peripheral vision in a way that pure text, however click-baity, can't.

I totally agree.

Perhaps visuals would work for a community of graphics designers. But outside of that, it's just not useful. Especially if half of the thumbnail is filled by ads or logos.

I found myself evaluating links I would have otherwise skipped.

Same. "Disconnect. Offline only." was completely uninteresting to me on the HN homepage, but the thumbnail made me curious:

http://i.imgur.com/0k4fbc5.png

I think people here are just romanticizing text titles like they're some objective description of the material.

(Not actually) shower thought: maybe if google showed thumbnails beside results, that'd drive websites to avoid using them popups that appear on page load?

That's the first thought that came to me, when I saw this.

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

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.

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.

Reddit appears to only show images to posts about the image, not to a website. Most of reddit content are just posts to images and the discussion about the image, so IMHO that improves reddit's usability for their target audience.

HN is more about interesting content/discussion instead of posting memes and it is much harder to scan and determine interesting content from images than it is from titles. As a note: when HN has the same target audience as reddit is when i stop using HN.

Well you can easily disable them (I always do).

On the other hand, one of the sites' thumbnails is one of those email capture modals, so at least I know to avoid that one.

Actually fuck sites that have a modal popup on window mouseout. Great way to get me to not return.

I agree. There are two (mildly related) parts to this: grid layout and using an image.

Image instead of text does not work for me. I prefer to read things. Grid layout makes curated content less clearly ranked: does your eye wander horizontally first, vertically, or some random pattern? does screen size affect this?

What could be interesting is to supply 3-5 main points from the article. Doing this automatically is, I suspect, very hard, but if done would give me significantly more information on whether to click the link, go to comments or ignore. Just my 2c.

Couldn't he/she just write the text over the image?

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

This makes it sound like clickbait is a better option than flashy thumbnails, but it's essentially the same bullshit.

But at least most of us here have by now trained ourselves to be mostly immune to click bait. Don't want to go through the same process again but with misleading thumbnails this time.

Clickbait text loads a lot faster and is easier for me to mentally sift through than thumbnails. Agree they're both BS though!

I discovered the "Disconnect. Offline only." article through the thumbnail :)

I don't know, I would want to see titles put above the thumbnail before I conclude that the title becomes less important. Right now I think that this effect may be exaggerated because the thumbnail is the first thing you see.

In general I am inclined to agree, but I would want to see titles be first before I write it off completely.

Edit: And perhaps boldface as well...

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

How'd you get the thumbnails?

How are you getting the thumbnail images?

Reply on news.ycombinator.com