The beautiful magic of Itty Bitty

How to build exquisite micro-sites that exist solely as URLs.

Itty Bitty was launched on July 4 by techie extraordinaire Nicholas Jitkoff, VP of Design at Dropbox, formerly with Google where he led the work of the Material Design team, iterating with product groups across the company to create a coherent design language for Google’s suite of products.

In his Independence Day tweet, Nicholas described the Itty Bitty experiment as “a tool to create websites contained within their own link.” His experiment currently exists as an open source project on GitHub.

At its core, Itty Bitty is exactly that: you can create a simple, elegant, self-contained, shareable, text-based micro-website without the need of coding it, and without the need of a server or domain name. However, if you already have your own domain but no hosting, one simple way to host your new Itty Bitty would be by forwarding your domain to it — just paste the Itty Bitty URL in the redirect.

Just go to https://itty.bitty.site, put a title, and type your content. You can add plain text, ASCII characters, or emojis. And you can then share it on social media and even create a QR code — so long as the site can be compressed into about 2,610 bytes.

The actual byte limit depends on where the link is shared — both Twitter and Slack allow for around 4,000 bytes, while Chrome for Mac accommodates up to 10,000 bytes.

Nicholas explains that Itty Bitty “takes html (or other data), compresses it into a URL fragment, and provides a link that can be shared.” The URL fragment that contains the micro-site content is compressed using what is known as the the Lempel–Ziv–Markov chain algorithm to “significantly reduces the size of html, allowing for nearly a printed page worth of content.”

“Fragments have a unique property: they are not sent to the server when requesting a website,” he says. “Instead, the web browser traditionally uses them to scroll the page when it is loaded.”

Because the micro-site is basically a link, not only is easily shareable but it is also very portable, as you don’t need a server to host it. It is also private, as nothing is sent to — or stored — on the Itty Bitty server.

Nicholas warns that on Itty Bitty micro-sites, scripting is enabled, “which allows for greater flexibility, but can enable malicious use.”

“As there are no databases, user accounts or persistent data, scripting does not allow any meaningful attacks here,” he explains. “This is subject to the same precautions you might have with any website with script content — what is shown on Itty Bitty comes from the content people make and it is not inherently more trustworthy than a random site on the Internet. Longer term, this may degrade perception of the domain, but for now, the experimental nature of the site makes it worthwhile.”

In addition to text-based micro-websites, Itty Bitty can be used to create more complexed and rich content with advance editing capabilities. You can handcraft your own HTML files and drag one on the Itty Bitty editor to convert it or you can use CodePen.IO to craft your content and paste the codepen URL into the editor.

Nicholas offer a template and a few samples to start create with Itty Bitty.

To test Itty Bitty, I used Nicholas’ template and replicated this Medium post with CodePen and some simple HTML coding.

This is the URL for my Itty Bitty test page:

https://itty.bitty.site/#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

You can copy+paste it onto your browser as Medium does not support it :(

It’s a lot of fun and the potential is almost unlimited! LOVE IT!