4 ms·

https://blog.cyrusroshan.com https://blog.cyrusroshan.com Recently redesigned my blog to show previews of the posts before you read them. Though I can't say I

https://blog.cyrusroshan.com https://blog.cyrusroshan.com Recently redesigned my blog to show previews of the posts before you read them. Though I can't say I thought of the idea on my own--it's inspired by the way Dan Luu screenshots the beginning of his blog posts whenever he posts them on twitter (for example, https://twitter.com/danluu/status/1472142011918471170?s=20&t=x8qStJcVYal2CaxLt3-5uQ https://twitter.com/danluu/status/1472142011918471170?s=20&t...)

bdlowery 5y ago
Something to fix: I click on an article but there's no way to go back to the homepage.
- croshan 5y ago
  Thank you for mentioning that, I'll add it soon!
ottobonn 5y ago
Those previews are great! I like that I can start reading the article before clicking it.
- croshan 5y ago
  Thanks! At first they were rendered HTML of the entire article (because nextjs makes that easy), but that caused performance issues, especially on mobile Safari. So now they're auto-generated screenshots. Glad you like them!
  - kevincox 5y ago
    That's kinda a shame from a size POV. The screenshots are 1/2MiB each for a bit of text and common styles. I wonder if it would be feasible to go back to HTML but somehow smartly decide where to chop off the article to avoid much overflow, image downloads and whatnot.
    - croshan 5y ago
      Right? The problem is articles could potentially have early media content, specifically a fat youtube iframe, in the case of the DIY 3d scanner article. I'm glad for this feedback, though. I'll play around with slightly dropping image quality (currently it's JPEG output at quality = 100), and lazy-loading.
      - kevincox 5y ago
        Yeah, I saw the iframe and it definitely made me think. You could filter out "expensive" elements or smartly replace them with a thumbnail but eventually you will slowly go crazy. The image preview approach is definitely the sane and simple solution. It just feels less elegant. I would have a hard time resisting the urge to make it work somehow.

bdlowery 5y ago

Something to fix: I click on an article but there's no way to go back to the homepage.

croshan 5y ago
Thank you for mentioning that, I'll add it soon!

ottobonn 5y ago

Those previews are great! I like that I can start reading the article before clicking it.

croshan 5y ago
Thanks! At first they were rendered HTML of the entire article (because nextjs makes that easy), but that caused performance issues, especially on mobile Safari. So now they're auto-generated screenshots. Glad you like them!
- kevincox 5y ago
  That's kinda a shame from a size POV. The screenshots are 1/2MiB each for a bit of text and common styles. I wonder if it would be feasible to go back to HTML but somehow smartly decide where to chop off the article to avoid much overflow, image downloads and whatnot.
  - croshan 5y ago
    Right? The problem is articles could potentially have early media content, specifically a fat youtube iframe, in the case of the DIY 3d scanner article. I'm glad for this feedback, though. I'll play around with slightly dropping image quality (currently it's JPEG output at quality = 100), and lazy-loading.
    - kevincox 5y ago
      Yeah, I saw the iframe and it definitely made me think. You could filter out "expensive" elements or smartly replace them with a thumbnail but eventually you will slowly go crazy. The image preview approach is definitely the sane and simple solution. It just feels less elegant. I would have a hard time resisting the urge to make it work somehow.