Hacker News Reader

Comment by habosa | Hacker News Reader

This was nicely done. And since it's Hacker News let me immedy shift focus to tech ... this was fantastically usable on my mobile phone. It was laid out perfectly and very responsive. I've seen plain text articles jump and stutter so I wasn't expecting this to work. Good job to the dev team.

View on HN

How does one even render a page like this? I have minimal HTML and CSS knowledge and this as far as I can tell is magic

The site, pudding.cool has a how to section

https://pudding.cool/#how

I'm very curious about this as well. What JavaScript framework(s) enable this? How does it integrate with certain CSS frameworks or HTML templating languages?

This uses D3.js [1], and waud [2] for audio. The Pudding have their own library for scrollytelling (Scrollama.js [3]), but I don't think it's used in this project.

[1]: https://d3js.org/

[2]: http://www.waudjs.com/

[3]: https://pudding.cool/process/introducing-scrollama/

I don't know about this website, but you can take look at reveal.js [1]. It's a pretty powerful open source tool for making similar kind of presentations.

[1] https://github.com/hakimel/reveal.js/

From my quick inspect of the source, it seems like it's powered by D3, which is precisely what you imagine it to be: a framework for making visualizations based on Data Driven Documents (hence the D3): https://d3js.org/

My only fault with it was that a certain segment of the page when clicked goes back through the slideshow - that was quite confusing, I thought they were getting a bit excessive with using the same slides... nope, going backwards through the presentation

I liked the format but I think it could be improved a lot by (1) a way to disable the auto-forwarding to the next page, (2) an indication of the overall length of the piece and my position in it and (3) a unique URL for each page, so that I can I use other browser features like bookmarking, backward/forward buttons, etc. In fact I hit the back button because I expected this and then had to start over from the beginning because my progress was lost.

I was just pleasantly surprised it didn't ruin my back button functionality.

Reply on news.ycombinator.com