How to make a website that fits inside its own link

By

Itty Bitty could turn paper posters into web servers.
Itty Bitty could turn paper posters into web servers.
Photo: Charlie Sorrel/Cult of Mac

Quick question: If you wanted to publish a quick one-page website right now, how would you do it? You’d either put it up on a service like Tumblr, or you’d have to register a domain name, find a host, and Zzzzzzzz. But what if you could just create that web page, then zip it up into its own link? Whenever anyone clicked on that link, it would unpack itself, and show up in their browser like any regular web page. That’s what Itty Bitty does.

It’s pretty wild, and gets even wilder. Because while you can paste your link anywhere, like a Tweet, you can also turn that link into a QR code and print it. If you do so, then that paper QR code contains your actual website. Whenever anyone scans it, it will be unpacked, and rendered, no internet required.

Itty Bitty websites

Itty Bitty comes from Nicholas Jitkoff aka. Alcor, the creator of Quicksilver, and current VP of Design at Dropbox. It consists of a web-based editor that lets you type in anything you like. When you’re happy with what you’ve written — a poem, a resume, or a fully-coded webpage with images — you just copy the URL from Safari’s URL bar. Then share that URL, just like you’d share any link.

The difference is that your website is contained inside that URL. It’s not a regular link that points to a website hosted somewhere on the internet. It is fully self-contained.

Now, this comes with certain constraints, the biggest of which is size. The Itty Bitty editor shrinks your text as much as possible, but there is a limit to the size of links that can be shared. Twitter limits you to just over 4000 bytes, or 4K. A QR code can store a maximum of 2,610 bytes. But if you’re only using text, this is quite a lot of space. Jitkoff:

To fit more in the URL, the content is compressed using the Lempel–Ziv–Markov chain algorithm. This significantly reduces the size of html, allowing for nearly a printed page worth of content.

How to create an Itty Bitty web page

Itty Bitty editor.
Itty Bitty editor.
Photo: Cult of Mac

To create a site, head over to the editor, and get started. You can give your page a title, and you can write anything you like in there, using HTML. You can hand-craft this HTML, or use your favorite editor to create it, and then paste the result into the Itty Bitty editor. More advanced users can hook it up to Codepen.io. For this article, I am going to create an Itty Bitty version of this entire post, and paste it in, using Ulysses’ excellent HTML export.

As you can see in the editor, there’s a counter at top right that tells you how big your page is so far, in bytes. Keep this under 2000 bytes for maximum compatibility. As a guide, this page — without images — comes in at just XXX.

When you’re happy with the result, just copy the URL from Safari (or whatever browser you’re using), and paste it into a new tab. You can also just hit the reload button, and the site will load itself (it’s contained in its own link, remember). However, this makes it difficult to go back and edit for any mistakes you made.

Complex code

This app fits inside its own URL.
This app fits inside its own URL.
Photo: Cult of Mac

You’re not limited to basic HTML, either. Check out this calculator app, built in Itty Bitty.

No internet!

When you load an Itty Bitty site, it is completely self-contained. The URL may begin with itty.bitty.site, but that doesn’t mean that it’s loading from Itty Bitty’s servers. You can test this by scanning a QR code containing this page. If you put your iPhone onto airplane mode, and then scan this QR code, it’ll load up just fine. Now, you could use this to put an entire website on a poster, on a business card, or anywhere.

Scan me.
Scan me.
Photo: Cult of Mac

This idea exists in something called Data URLs, but Jitkoff points out some differences in a tweet:

  • Most tools don’t treat data urls as valid links (including Twitter), and so they are much harder to share reliably.
  • Data URLs don’t support compression, so content size becomes a problem sooner ?

Security

The obvious downside to this is security. Using a cleverly-crafted site, it would be possible to spread malware using just a QR code, which isn’t great. Perhaps Itty Bitty will eventually end up as a dump for malware, but perhaps not. In the meantime, it’s an amazing way to share tiny bits of information, without anyone trying to stop you.