I really like Wikipedia page previews[1]. I think that this particular piece of interactivity should be everywhere; it helps avoid the mystery that comes with clicking on a link and a full context switch. Just that little bit of primed context can help a lot.
Today I worked on building a system that allows for just that.
I was inspired to do this after building the previews for this site and I ran into an interesting challenge: how to get previews for external pages?
This difference becomes relevant because of CORS, which prevents making requests from different domains client-side. So it becomes impossible to dynamically load an external page, meaning creating a preview is impossible.
I initially solved this on One Dimension[2] by fetching the preview data when the site is generated. I still think this is a decent solution, but it means building takes a very long time--it increases linearly as the number of links goes up. It also obviously doesn't work for sites that don't have a build step.
I figured the best way to overcome this challenge would be to write a small worker function that could fetch the pages' preview data remotely, not from the browser. I opted for trying out Cloudflare Workers[3] because I've always wanted to give it a shot, and it's super simple compared to the alternatives.
The experience was really nice. I think I'll explore more serverless approaches in the future. It seems like you could write a full API, especially with Cloudflare's key value store[4], which seems able to replace a database in some applications.
I returned to this project recently as I'd like to make it more usable and something that could be included in any website without reservation. I initially built this project for Twelve Websites[5], so the first implementation was a bit hacky and used svelte for creating the web component. In this new version, I'm using vanilla javascript to write it and creating a web component using the basic API[6].
This has made it much easier to integrate the package with UI frameworks, and I wrote some super clean examples in svelte and react[7].
Last updated Mon Feb 14 2022 in Berkeley, CA
1: https://diff.wikimedia.org/2018/04/18/how-we-designed-page-previews-for-wikipedia/
3: https://workers.cloudflare.com/
4: https://www.cloudflare.com/products/workers-kv/
5: /thought/twelve-websites.gmi
6: https://developer.mozilla.org/en-US/docs/Web/Web_Components
7: https://futureland.tv/christian/entry/151284