11 ms·
Show HN: Hacker News front page in the style of a print newspaper
- enraged_camel 6y agoReally cool. No HTTPS, though? :)
- wolfgang42 6y agoThe site is HTTPS—if you’re talking about the mixed content warning, I’m hotlinking all the images so it’s unfortunately unavoidable.
- enraged_camel 6y agoAh, you're right. I just looked at Chrome's URL bar, and saw "not secure". Should've looked more closely. You're right about the mixed content warning being unavoidable.
- dan1234 6y agoYou could cache the images and serve them on your own domain. I’m pretty sure this is Reddit handles thumbnails in their lists.
- andai 6y agoOne of the top post images is 404ing so it displays a little broken file icon instead.
- wolfgang42 6y agoYeah, that page has very explicitly set an og:image that doesn’t exist. (It looks like it was intended specifically for that page, too.) It’s unfortunate but I’m afraid there’s not much I can do about it short of hard-coding a special case for that one post.
- xfan009 6y agoI'll echo what they're saying. I'm not getting SSL either.
- vikinghckr 6y agoIs there a reason that site needs to be HTTPS? It doesn't have any user login feature, and it's read-only. So what are the arguments for making it HTTPS?
- PhantomBKB 6y agoTo prevent a man in the middle attack. There's a possibility that a hacker could inject malicious scripts into the payload, or even completely change the content of the website that you think you are viewing.
- thekyle 6y agoSomeone sitting between you and the site (Wifi router? ISP?) could potentially inject their own scripts.
- dan1234 6y agoHTTPS stops the content being modified on its way to you. Some less than scrupulous ISPs have injected their own ads into pages, which would be prevented with SSL.
- vikinghckr 6y agoThanks. All pretty valid arguments, and probably enough to outweigh any potential slight performance/latency issue.
- DyslexicAtheist 6y agoamazing how quickly he went from inspiration to implementation. absolutely love it.
- sagunsh 6y agoYeah I saw a newspaper style interface for reddit yesterday here on Show HN and today one for Hacker News
- wolfgang42 6y agoThanks! I was inspired by looking at unim.press and wondering, “how hard would it be to put an extract from the page there instead of lorem ipsum?” (Quite difficult, it turns out—I don’t think there’s any way short of human curation or maybe some sort of ML training on a large corpus—but you can get reasonably far with a carefully tuned set of CSS selectors for commonly seen class names.) It took me about 8 or 10 hours yesterday to build, and I think about half of that was tweaking the heuristics for the paragraph/image extraction and keyword selection (the “STYLE, 3” that links to the thread page).
- thesephist 6y agoOP of Unim.press here-- yep, extracting text is pretty hard, though I think Instapaper and Pocket have good tech in that space. Certainly more than a weekend project's worth of work, which is why most of my focus personally was on the layout / visual fidelity. But it's cool to see that you put more time into extracting the content. I think for HN which is mostly longform online writing it definitely adds value.
- rossdavidh 6y agoOk, now something that turns a newspaper into HN format? Or has that already been done?
- dvtrn 6y agolooks around Psst..hey buddy, you want some RSS? ;)
- kenforthewin 6y agotada https://boards.kenforthewin.com/b/news https://boards.kenforthewin.com/b/news
- spurgu 6y agoThat's cool but it doesn't seem to have any users. And only NYT as a source (for now). And even if it had users there's no way to align them with my interests (you might get a hoard of neo-nazis upvoting all the wrong stories). This could be solved by basing it off a specific subreddit, for example. That said it's a cool RSS'y way of browsing NYT.
- kenforthewin 6y agoI haven't really posted it anywhere yet, just a WIP side project for now. That said you can create your own Board and add any RSS feed, and moderate comments.
- rossdavidh 6y agoI like it, but I'm afraid what it mostly showed me is that I don't think much of NYT's content. But thanks!
- wickedOne 6y agolove it!
- dvfjsdhgfv 6y agoI have just one problem with this - it's only one page.
- paledot 6y agoI love that your front page made your front page.
- phkahler 6y agoMakes sense if it's constructed on demand or even periodically fast enough to catch that.
- paledot 6y agoI didn't say it didn't make sense. The recursion just made me smile.
- wolfgang42 6y agoIf I make it to #1 I’m definitely updating the screenshot :) Edit: as I made it above the fold I updated the screenshot to show the site at #4. The Droste effect is quite pleasing, I think.
- kylecazar 6y agoTwo levels
- drwolff 6y agoI like the idea of changing the order of newspaper headlines and how this link could be #1 recursively.
- ChrisMarshallNY 6y agoI like this one!
- read_if_gay_ 6y agoThat was pretty fast
- gioscarab 6y agoYou should find a better font and work a little on the proportions. Nice to see the images, a little more polished and I would use this instead of the normal HN website.
- wolfgang42 6y agoThe font is whatever you have as the default in your browser—if you don’t like it then set a better one :) I agree about the spacing, it feels off to me too but I couldn’t put my finger on why. Whitespace has always been a challenge for me (I still remember my mom looking at my elementary school projects and telling me repeatedly, “Margins! You need more margins!”) and though I’m getting better at it I don’t expect to get a job in graphics design any time soon. If anyone has suggestions for improvements I’d be glad to hear them.
- dharmab 6y ago> The font is whatever you have as the default in your browser—if you don’t like it then set a better one :) The default serif fonts on most systems aren't the best choice for a site that is trying to imitate print media.
- manjalyc 6y agobody { font-kerning: none; letter-spacing: -0.00214em; font-family: Helvetica; } > but I couldn’t put my finger on why You probably shouldn't use serif, Helvetica is much easier on the eyes and more forgiving.
- jfk13 6y agoNot everyone has a Helvetica font installed; at least add the generic sans-serif as a fallback. (Though if the aim is to be reminiscent of a print newspaper, a serif font may still be the better choice.) Why disable kerning? If the user's font has kerning information, surely a newspaper should respect it.
- 6y ago
- ekvintroj 6y agoThis is nice :)
- JadeNB 6y agoHow is this related to https://news.ycombinator.com/item?id=23658721 https://news.ycombinator.com/item?id=23658721 ?
- thesephist 6y agoOP of the other post here -- not related except in concept, I guess just inspiration to quick execution :)
- pacamara619 6y agoSome sort of horizontal line between the articles would look nice and help with readability.
- wolfgang42 6y agoThanks for the suggestion—just added this, along with a few other tweaks.
- makison 6y agoQuite cool actually
- tpmx 6y agoWell, the distinct lack of "lorem ipsum" is a positive!
- beprogrammed 6y agoI really like this
- andai 6y agoI have JS off by default and the site still loads -- in fact it's exactly the same (including all functionality) except it's got a mobile layout? When I enable JS then it lays out like a real newspaper. That's interesting.
- wolfgang42 6y agoProgressive enhancement! CSS isn’t quite up to the task of arranging things the way I wanted so I’m using Masonry.js for layout. (This is also why there’s a progress bar while the page loads—it needs to wait for all the images so Masonry knows how much space everything takes. I’d like to cache the images and pre-specify their sizes but haven’t gotten to it yet.)
- nathcd 6y agoFor whatever it's worth, on mobile I think I'd prefer it without images, or maybe just a select few images throughout the page. The page just feels too long. I'm not sure what a good way would be to pick out which to show though. But I really like this! I'm excited to try it on desktop in a bit.
- wolfgang42 6y ago30 items is a lot no matter how you slice it, really. I did experiment with hiding some of the image but I couldn’t think of a way of identifying “good” images; and having them appear and disappear based on things like position on the page seemed to just make things more confusing.
- KajMagnus 6y agoLooks nice and inviting :- ) Took a while until I realized what to click, to jump to the actual discussions. What about showing a "NN comments" clickable link at the end of the articles? But: "... the master branch. SDF, 1" — then not so obvious what to click. This "HN newspaper" could maybe be a good way to make people interested in tech, if anyone wants that for some reason
- wolfgang42 6y agoI avoided the word “comments” to keep the newspapery feel—I fear that mentioning the ravening hordes just around the corner would rather spoil the effect. I agree that the result isn’t entirely intuitive, but I’m not sure what to do about it. (It’s not obvious that the headlines are clickable either, but underlining them looks ugly and letting them be blue is even worse. Such are the perils of skeumorphism.)
- KajMagnus 6y ago> I avoided the word “comments” to keep the newspapery feel (Maybe a comments icon instead, + a number? Or "123 readers thoughts" or "123 replies" or "123 people talking about this", here 123 would be unique users not comments)
- letitbeirie 6y agoThis is great. It reminds me how much I miss the straightforward, full screen width layouts from 15+ years ago.
- maxioatic 6y agoThis is really cool. I especially like the article preview text and the color image on hover (very nice touch). Interestingly, I feel more inclined to read the articles than peruse the comment section first.
- yingw787 6y agoThis is really cool, definitely see some of the polish come out since the last version published here. If you wanted to host this indefinitely for $12 / year, you could buy a domain like hackernewspaper.com or something similar, and host the frontend using a static HTML/CSS/JS bundle on S3 + CloudFront + Route 53. For reference, here's a CloudFormation (infrastructure-as-code) template I made for that stack here: https://github.com/tinydevcrm/tinydevcrm-api-docs/blob/a4d293f79d3a8a41920e4b4d9a6c5cc26fa988c5/stack.yaml https://github.com/tinydevcrm/tinydevcrm-api-docs/blob/a4d29...
- yingw787 6y agoTo clarify, the $12 / year would be the cost of the domain name, running the stack should be close to free.
- ozkan 6y agohow is it free?
- gpm 6y agoBecause "AWS Free Tier includes 50GB data transfer out, 2,000,000 HTTP and HTTPS Requests with Amazon CloudFront" presumably. For small websites you can often find ways to fit inside free tiers these days. If this site is just static files you could use similarly use netlify (100GB/month free). Or you could use a free tier VPS from GCP/AWS and cloudflare to cache traffic (to keep you under the free tier bandwidth limits). Or so on.
- yingw787 6y agoYup, CDNs and object stores are a dime a dozen these days. If one's too expensive or unreliable just move on to the next one. I believe this free tier doesn't run out after 12 months either.
- a0zU 6y agoSeeing this post in print newspaper style is a trip.
- GCA10 6y agoFascinating! Just to keep the conversation going, I'll argue that HN's current format works much better for me. I appreciate newspaper formats when dozens of stories have roughly equal appeal to me, and I get value out of lingering on each one for 5-30 seconds before moving on. HN, for me, is intensely bimodal. The bare-bones listing of headlines lets me skim very fast past the 93% that don't quite work for me -- and dive into the 7% that are today's gems. Those then deserve a close read and many minutes in the comments. So I'd be very frustrated if HN switched to newspaper mode. But everyone's tastes are different, and having both formats available would be cool.
- tom_mellior 6y agoUnfortunately many headlines stopped being informative with the rise of clickbait. One of HN's biggest problems is the headline-only format, as opposed to Slashdot for instance. I mostly choose what to click from an HN Twitter bot since Twitter shows short preview blurbs for many links. This is also a strength of the linked site compared to plain HN. As for the newspaper layout, yeah, that's a gimmick I don't need either.
- smoe 6y agoWell I think it also has a lot to do with, that, beyond a certain look & feel, this example has very little in common with a print news paper (or online outlet that use that style). In a traditional news paper absolutely everything is carefully curated. What stories go where, how much space they can take, whether they'll have an image, title setting guidlines, grouped by various things like topic, etc. For example the www.nytimes.com front page is very closely structured like a traditional print paper: The top stories (the main sellers from the kiosk age) of the moment are "above the fold", followed by a bit broader polical or societal pieces and the going into more and more softer content like fashion, cooking, travel. The latter topics are were generally the bulk of the advertisment money comes in. So I think a newspaper mode for sites like HN could work well. Not as a live view, but instead of say a weekly, curated edition of what has been relevant and interesting.
- ozkan 6y agowho bought the domain (hackernewspaper.com) name? i hope it's the author of the script.
- wolfgang42 6y agoNo, it wasn’t me. I‘m guessing someone else has gotten inspired and we’ll see another variation on the idea sometime in the next week or so.
- mdolon 6y agoThat was me! I came across the Reddit post yesterday too and figured it would make for a fun weekend project. I'm not sure when I'll get the opportunity to build it though so if you're interested in the domain, shoot me an email.
- anoncow 6y agoBookmarked it. Better than the news websites.
- cs02rm0 6y agoNow I just need a 32" eink display.
- WalterBright 6y agoI like this very much. Showing the first few lines of the article is nice to see if one wants to dig deeper. I made this my new default link to HackerNews!
- drinchev 6y agoI know that the OP probably did the research, so I'm just going to ask : Isn't this possible with only CSS? I see each article ( section ) with position absolute and heavy JS calculations. My browser brain thinks that with some combo of flex-box / flex-wrap and breakpoints you could achieve this without the need for resize handler. I guess that's not the truth So can you point the struggles not doing this with CSS?
- wolfgang42 6y agoSure. So, there are a couple of things I wanted from the design: 1. The top few stories should be wider than the rest, if there’s room to do so. 2. The stories should be sorted more-or-less with the top ones near the beginning of the page. 3. Stories in a column should flow continuously—there shouldn’t be any gaps where multiple columns realign. (Bear in mind that stories can be any height, and there’s no way to precompute it.) There’s a few ways of doing layouts that meet some of these criteria in pure CSS: • `column-width`: Meets requirement (3), but you can’t span columns and layout is done column-by-column so the top of the page would have stories 1, 8, and 19 (or so). • flexbox: Meets (1) and (2), but leaves unsightly alignment lines as stories can’t shift upwards to fill in gaps in the previous row. • grid: Same problems as flexbox. • server-side column break computation: requires the server to know how tall each story is, which (a) won’t work with a stylesheet where nearly everything is in relative sizes that depend on browser settings and (b) would probably be tricky with responsive design. As far as I can tell, there’s no way to do a responsive “masonry” layout with items of arbitrary height in pure CSS. At the very least it was going to be tricky and frustrating to get right, and Masonry.js was already available and (after a little poking to figure out how to tell it what I wanted) did the job without any more fuss.
- drinchev 6y agoThanks for that. Really appreciate the answer. I remember having similar struggles with infinite-scroll product page a while back ( ~5 years ago ), with variable card height. I thought this could be done with CSS nowadays, but I guess css grid & flex-box specs don't go that far. Awesome work!
- 6y ago
- mihaigalos 6y agoAbsolutely fascinating! Hail to you Sir. Amazing.
- gmantg 6y agoInteresting idea. I couldn't open the site, though, because uBO blocked something like 50 domains and figuring which ones are actually needed would be quite an effort. Yes, my uBO blocks everything unless I make an exception.
- wolfgang42 6y agoCongratulations on having a browser that doesn’t work? Most of requests are thumbnail images (I’m hotlinking at the moment); to get things to display you can either disable JavaScript altogether or unblock just unpkg.com to get the libraries the page needs for layout. Edit: just for you I’ve added a check to handle the case when the libraries can’t be loaded. It will look broken but at least you should be able to read it now.
- stormdennis 6y agoLooks way better than the real newspapers I see on the internet and I quite like it for Hacker News too. You just need some ads and you're set (joking). I'm very impressed anyway.
- wolfgang42 6y agoThere’s already some classified job ads at the bottom of the page—I figured it fit in with the theme and it was a good way to thank HN for making an API available.
- oandrei 6y agoOMG, how very beautiful ! Is it fully automatic? Will it persist?
- wolfgang42 6y agoThanks! It’s semi-fully-automatic; right now the generator is running off my laptop as I make tweaks but I plan to set up a cron job shortly. The page will stick around as long as the domain is still up, and I intend to keep it updating, but as it’s something I knocked together over a weekend I make no guarantees.
- ritter2a 6y agoThis looks really amazing! I particularly like that it makes good use of the width of an ultra-wide screen. While I wouldn't want it to replace the actual hackernews layout, I can really see it shine for discovering interesting articles whose headlines alone do not tell me enough to identify them as interesting (seems perfect for Friday afternoons). One suggestion: I would appreciate more visual hints to indicate which images and texts belong together. When I scroll down the site and something catches my eye, it takes me a bit of looking around to be sure where to read for the corresponding text. Slightly larger margins and/or vertical and/or horizontal lines between the articles might help to make it feel more convenient.
- wolfgang42 6y agoThanks for the suggestion! I added some more whitespace and some horizontal rules, what do you think of it now? (Please feel free to tell me it still looks terrible!)
- ritter2a 6y agoLooks great! This really makes it easier for me to see what belongs where. Thanks for the quick adjustment! I'm already curious what new things I will find with this site.
- yumraj 6y agoAre you planning to keep running it? I hope you do, I can definitely see it becoming my default home screen while browsing. It’d be cool to see if you can wrap up the rest of HN, especially comments also. But I do realize that may be a lot of work.
- qorrect 6y agoYes I second that, please keep it running I want to make this my HN client.
- wolfgang42 6y agoIt’ll keep running as long as the cron job doesn’t break. It might even keep running after that, if I get around to doing maintenance, but I’d like to keep expectations low. Worst-case scenario someone can always fork it and leave an issue on the repository explaining where to find the new one.
- lihaciudaniel 6y agoJust put my printer to do this everyday (laser black and white) this is the best thing I've seen
- keithnz 6y agosad there isn't an infinite recursion of the paper showing this page in an article. It's just one deep.... but maybe if we can get this towards the #1 spot....
- wolfgang42 6y agoSquint a little closer at the thumbnail :)
- crimsonalucard5 6y agoIt's there! Normally this would cause a bug where the page would never load as it's waiting for the infinite recursion to finish. There must be some time limit set on the headless browser that just converts the page to a screenshot once the time limit threshold has crossed. Makes sense given the fact that there's probably no way to determine whether or not a website has "finished" loading anyway.
- p-law 6y agoFantastic. Surprised to find myself with cataracts at my age, HN is so much more readable as presented here, comparable in improvement to viewing it under dark mode. More importantly, by providing the lead/lede, I've found a few more pieces to read that I didn't know I wanted to read just from the headline.
- Finnucane 6y agoHaving worked in print newspaper production, this looks cool, but of course no real newspaper would ever have that much white space.
- wolfgang42 6y agoA few minutes ago I added some extra space because people were complaining and excessively narrow margins have always been a bugbear of mine. Sounds like I may have overdone it a little; I’ve just changed the text to justified (which helps each section look a bit more like a cohesive solid block) and bumped the margins back down a bit.
- Finnucane 6y agoToo-narrow columns and margins are what made newspaper layout fun.
- moscovium 6y agoThis post itself being on the front page gives a sweet Droste effect
- zepearl 6y agoReally cool - thank you :)
- crazygringo 6y agoWow. I thought this would just be gimmicky, but I kind of... almost actually like it better than the main HN page. Having text snippets from the first paragraph, and an image, give me waaay more information as to whether something's interesting enough to click. This is really, really nice. A bunch of random thoughts, hopefully it's useful feedback: - I don't care about it looking like a "paper", but I love the grid view with image+blurb. So if you could make the top stories the same size as the rest, and make all images color, I'd love that even more - I find both the upvote count and hours ago added really useful, if you could find a way to include those back in - Some blurbs are 15 lines long, others are 2. Instead of trying to break at a paragraph boundary, I'd prefer if they were all just a standardized 6-8 lines. I'm glancing just to see what the article is actually about (for when the headline is vague), I don't care if it ends at a sentence ending - The bold "topic" thing you click on to get to the comments is clever in whatever ML you use to select it... but unfortunately is also meaningless and kind of distracting, so I'd prefer it without But for real... I think that if you focused on making this a "rich" image+blurb feed for HN instead of the newspaper thing, you could become a super-popular interface for HN. Kudos!
- galfarragem 6y ago-1 to images in color. BW images are way less distracting. According to your comment I think you might like https://hnews.xyz/ https://hnews.xyz/ that I read when in mood of a "HN magazine". I'm tempted to make a switch now.
- Wowfunhappy 6y agoOh, I like that one! Thanks!
- im3w1l 6y agoI really like both this and the Show HN! Thanks!
- NikkiA 6y agoI'd love to see it taken further with the images half-toned, I'm sure there has to be a good half-toning CSS filter out there somewhere.
- non-nil 6y agoNeat Droste effect when this article itself is featured: https://imgur.com/yrwMWnw https://imgur.com/yrwMWnw
- vagab0nd 6y agoWhy does it not timeout?
- wolfgang42 6y agoIt’s nowhere near as sophisticated as you’re imagining—I created the effect by running the generator locally, overwriting the screenshot a few times, and then setting the result as the og:image on the page. It doesn’t update automatically or anything like that.
- deleted 6y ago[deleted]
- elwell 6y agoHow many fractal iterations is that?
- stockkid 6y agoVery nice. What I liked about it is that thumbnails to the article allows readers to skim through the list more quickly and still understand more clearly what they are about.
- alzaeem 6y agoBravo! Such a refreshing take, and may yet become my preferred way of browsing HN.
- deleted 6y ago[deleted]
- fortran77 6y agoIt would be nice to see the top comments expressed, too. Like this https://unim.press/#LOLHackerNews https://unim.press/#LOLHackerNews
- u8mybrownies 6y agoLove the recursion of seeing this page on the page on the page
- haloblue 6y agoI love this. Exceptionally well done.
- kamilszybalski 6y agoI love how this contributes to our understanding of how we like to consume information. Great work.
- gitgud 6y agoPretty cool, but the format looks like literally every other news site now right? (title + image + read more) To me, the best thing about HN and Reddit is being able to efficiently skim through many article titles at once, without judging; writing style or image quality.
- ryanashcraft 6y agoI made something similar several months ago. Here’s the HN front page in the style of digg.com: https://rigg.now.sh/ https://rigg.now.sh/
- kamel3d 6y agoGreat job! what is your GitHub repo? I want to play with this later
- wolfgang42 6y agoIt’s linked in the box at the bottom of the page: https://github.com/wolfgang42/paper-hn https://github.com/wolfgang42/paper-hn Patches welcome!
- ggm 6y agopleasingly recursive instance of the site embedded in the site... because you're on the front page.
- jeppesen-io 6y agoThank you! One nit. On mobile I have to scroll left and right to read the titles. Otherwise, I love it
- wolfgang42 6y agoAck! Looks like I messed up the mobile view when I adjusted some spacing. How is it now?
- jeppesen-io 6y agoWow! Now that's feedback - Perfect now. Very nice work EDIT: I have a z-flip so it's more narrow than most phones, but still looks great
- ridaj 6y agoPictures + snippets = so much better than HN's default, for me anyway. Hopefully this will inspire HN!
- stevespang 6y agoThe pics add a nice touch . . .
- aritraghosh007 6y agoWow sitting at an outdoor dining table and just opened the link, looked like staring at an actual newspaper! Good work.
- ondrae 6y agoI love it.
- ghoshbishakh 6y agoThanks!! I love this
- stevage 6y agoWow, this is really nice. I'd love to see a tiny bit more refinement on the CSS. - Pick a specific serif font, maybe Palatino? - H2: text-align: justify - maybe something a bit lighter and more elegant than the heavy lines separating articles
- nloladze 6y agoBookmarked
- nloladze 6y agobookmarked
- utopcell 6y agoFascinating. Now do it for facebook posts.
- Pavan_ 6y agoLong back i built something similar to show a rich preview of articles posted on Hacker News. http://richhn.herokuapp.com http://richhn.herokuapp.com
- humility 6y agoKudos, amazing effort!
- balanced009 6y agocool! [bookmarked]