/blog/

2022 1007 Fun with iframes

My stance towards the humble iframe has been one of suspicion. I remember so many things were implemented in iframes back in the early 2000s, and with such bad UX, that it seems like using iframes is a fallback that should be avoided if at all possible.

However, I’ve made a few things with iframes recently myself, and seen some cool things built by others as well.

My projects

Tweet archives

My twarchive project is based on iframes of individually downloadable HTML files of tweets. Each file is the fully self-contained (and downloadable!) tweet, and they look like this:

A Linux kernel in wasm, and a Linux terminal in iframes

I wanted a system for showing a real command-line fortune utility in a real Unix computer, in the browser, and so I built unfortunate.

You can see it working at https://unfortunate.micahrl.com, but I realized that an iframe would let me place that terminal on any page I wanted, and voila:

(It may take a few seconds to load the kernel and filesystem, and start the emulator.)

Friends’ projects

Noah’s Animal Crossing Inspire app

Noah built a webapp for pulling screenshots from Animal Crossing videos, to serve as inspiration. It lives at https://inspire.ndled.us, but it’s perfect for the iframe treatment, which is shown on his project page, and also right here:

Webgardens

I recently learned about webgardens (not the IIS kind). It’s a decentralized informal protocol of sorts, where you define an HTML file on your own webserver designed to fit in to a 250x250 iframe on other sites.

I first learned about webgardens from Maya’s thoughts to Robin Sloan’s Spring of ‘83 protocol idea. It’s a really great post, and a good starting point for exploring a bunch of ideas, definitely a recommended read.

I wrote a short webgardens howto guide.

My webgarden

Here’s my plot for this site:

I also have a greenhouse containing other plots.

Webgarden examples

Perhaps you’d like to see some examples?

Responses

Webmentions

Hosted on remote sites, and collected here via Webmention.io (thanks!).

Comments

Comments are hosted on this site and powered by Remark42 (thanks!).