HN Explorer

74 comments

[ 3.0 ms ] story [ 124 ms ] thread
statico
FYI, this uses the Hacker News API which I didn't know existed until researching this: https://github.com/HackerNews/API
throwaway889900
Shame that there's no oEmbed endpoint.
loceng
I also wish it provided upvote and downvote totals, and not solely the final score - it'd allow more a lot more experiments of differing ways to display threads and comments.
throwaway889900
I disagree, there's good reason for hiding those totals from users, in any way.
loceng
What are the reasons, and are they all trying to prevent gamification or?
pjc50
AFAIK none of the APIs provide comment votes; you can only get the votes on your own comments, and only by scraping the web page :(
raevilman
Yep true,. I use the same approach to run weekly top 30 hn show newsletter.
titaniumtown
I had no clue that existed! Interesting.
statico
You had no reason to! It's about twelve hours old.
nwsm
I believe OP owns the ycombinator1.com domain and made this functionality themself.
jrockway
Is this just some random person that bought ycombinator1.com and added features, or an official thing?
[deleted]
(comment deleted)
tedmiston
I can't think of a reason an official thing would be rolled out on a separate domain.
jrockway
Ah, the other comments implied that it was their staging environment for testing new features or something, but that appears incorrect. Now that I'm matching HN names up with Github names, it all makes sense.

I personally wouldn't register someone else's domain with a 1 on the end, just because of fear of trademark law, but I guess it worked out this time.

bestnameever
for now. I'm pretty sure they will want to protect their trademark.
kroltan
I also get a preview using the usual URL, arguably more useful information like an absolute time stamp that won't get out of date.

https://i.imgur.com/YAEEesv.png

TimWolla
In Discord, yes. Unfortunately not in Slack, though.
pennaMan
how is "Today at x pm" an absolute timestamp?
kroltan
Given Discord's UI shows day passages, it is "absolute enough". Should have phrased better as "more absolute", but you're right it's not really.
dijonman2
I can’t help but think this is a terrible idea from a security perspective.
jedberg
You're technically right, if a lot of people use this, the owner of ycombinator1.com will have a lot of info about who shares which URLs and could actually change the redirects to whatever they want.

That being said, it's probably not much of an attack surface given the transient nature of the links.

statico
As of right now, I have almost zero information about who is using it. It's currently running on Vercel as a hobby project, and I've already used my single free analytics add-on for another project.

(Will I run out of free Vercel function execution credits or whatever? Probably. We'll see, I guess.)

EDIT: Vercel gives me a realtime function log but it's pretty basic and has no statistics: https://cln.sh/WlXBSY

jedberg
I believe you, I’m just saying in a zero trust world it’s a risk but a small one.
[deleted]
(comment deleted)
pininja
Pretty clever. Thanks for posting the source too - I learned something new about how these social previews are implemented!
statico
Sure thing! Also check out https://socialsharepreview.com/ which is great for larger social previews. I chose to go the more compact route for these previews because a giant orange "Y" logo for every link isn't very helpful.
karlzt
On Signal it is a giant orange "Y" logo.
karlzt
On Signal is not compact at all.
klohto
Been using metatags which has few more supported services.
caffed
doesn't work anymore as it just redirects. assuming author was told to take site down.
TacoSteemers
The redirect is for the humans. The page that does the redirect is for the applications, like Slack and Twitter. They will use the meta tags on that page to show a "social media preview".
ryandrake
Would have been helpful for OP to mention that in the summary. I also couldn't figure out what it did. I just clicked the links and they redirected. No clue what a "fancy social preview" is.
axegon_
It appears to be redirecting me back to the original one: https://i.imgur.com/gbonKb9.png
riedel
It is on purpose. You only see a difference when posting the link in a messenger or social media post with link preview.
lilyball
To those confused:

It looks like this only adds social graph info but is otherwise a redirect. The resulting page looks like

  <!doctype html>
  <html>
  <head>
    <title>…</title>
    <!-- lots of <meta> tags -->
  </head>
  <body>
    <script>
      document.location.href = "https://news.ycombinator.com/item?id=30180253";
    </script>
  </body>
  </html>
spiffytech
A better option would be using the HTML meta tag to perform the redirect, since HN has a bunch of JS-avoidant users:

  <meta http-equiv="refresh" content="0;url=https://news.ycombinator.com/item?id=30180253" />
statico
Happy to add this. Do you happen to know if this affects systems doing the scraping for social previews, which are already parsing meta tags?
Klonoar
Curious if there's reasoning against just checking the user agent and sending back the HTML with OG tags for them, but then straight up HTTP redirecting in all other cases?

I feel like any reputable agent calling for open graph stuff is going to be labeled correctly, though I'm open to being wrong.

spiffytech
It'll depend on the system doing the scraping. If it's just fetching the HTML with curl or similar, using the meta tag shouldn't be any different. I'm not familiar with HTML parsers that follow meta redirects.

But if the scraper is using Puppeteer, either approach will result in the redirect being followed and the Open Graph data being ignored.

For example, Microlink follows the JS redirect and seems to ignore your Open Graph data: https://microlink.io/meta?url=https%3A%2F%2Fnews.ycombinator... Scraped data at this time: https://i.imgur.com/pRLIt0S.png

This is normally the behavior you want from a scraper: if someone pastes a bit.ly / t.co link you want the link preview to show data on the other side of the redirect.

You could try to figure out how to distinguish between a scraper and a human operator, but that'll be tough, since people work very hard to make Puppeteer look 100% legit.

andjd
This is probably and edge case you don't need to worry about. For the most part, you can rely on the user agent for a scraper that cares about these meta tags to identify itself as a bot (e.g. twitterbot). Since meta tags are machine, not user, facing, I don't think there's much of any benefit in trying to serve the meta tags to a bot that is intentionally trying to emulate a human.
hyperhopper
While this is how web scrapers work, this post is targeted at url unfurlers, which have different goals and almost never follow redirects. Facebook, slack, etc, have documentation publicly available on how their unfurlers work: most effectively just curl the html then parse meta tags
junon
They follow redirects but only authoritative ones from the server. Not meta tag redirects. Just to be clear.
nhoughto
You could probably just do both? Once a redirect has fired, off you go..?
judge2020
Note that the redirect is intentional. This is specifically for opengraph tags appearing in Slack, Discord, Facebook, etc.

This is what it looks like in Discord:

https://i.judge.sh/XWc64/D_jqGLfScD.png

capableweb
As someone who never uses Slack, Discord nor Facebook (mostly IRC), how does a HN link look if you're not using that service? I'm not sure I understand the difference, is it just the icon/image on the right/below that is different?
reustle
The second link in the screenshot is an example without the service
capableweb
Aha, so the added information is number of votes (at indexing time? Reading the chat message time?), comments, relative timestamp and the logo is at the right instead of below with absolute timestamp. Got it, thanks!
jedberg
> number of votes (at indexing time? Reading the chat message time?)

At the time it was read from the server, which in most cases is when the sender hit send.

Gigachad
It’s more important on other services. Telegram won’t get a title at all, it just leaves the link without any preview because these tags are missing.
statico
I added some example screenshots to the README: https://github.com/statico/ycombinator1.com#readme
RileyJames
I’d suggest adding captions or titles to the screenshots. At present it’s just 4 screenshots. Not at all clear that some are with/without, or what each represents.

I like the idea and would use it. But the readme doesn’t give me that context, only the additional comments made here.

rcarmo
I wouldn’t mind having this as an official feature, TBH. It’s just a few meta tags and makes it a lot easier to figure out if the link is worth following in Slack/Teams/etc.
statico
The source code for this is in the public domain. If anyone wants to copy the behavior, there is no reason to consult me first.
[deleted]
(comment deleted)
nhoughto
Handy, I’ll probably forget the 1 suffix tho. Ycombinator-meta.com or smth might be more memorable, that’s my problem tho I guess =)
statico
This was my second choice. I tried to register hackernewssuperlinkpreview.pizza but it was taken.
dstroot
HN Team - could ya'all just add the OG tags? Geez that would be swell...
fouc
Super handy! You solved a pain point I had. I sometimes want to drop HN links in Slack, but the lack of preview makes me hesitate or forces me to go an extra step and set a name on the link.
123jc
conda install -c conda-forge scrapy
mongua
I don't get it, can somebody explain it?