How to build exquisite micro-sites that exist solely as URLs. was launched on July 4 by techie extraordinaire , VP of Design at , formerly with Google where he led the work of the team, iterating with product groups across the company to create a coherent design language for Google’s suite of products. Itty Bitty Nicholas Jitkoff Dropbox Material Design 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 , 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. https://itty.bitty.site The actual byte limit depends on where the link is shared — both Twitter and allow for around 4,000 bytes, while Chrome for Mac accommodates up to 10,000 bytes. Slack 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 to “significantly reduces the size of html, allowing for nearly a printed page worth of content.” Lempel–Ziv–Markov chain algorithm “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 to craft your content and paste the codepen URL into the editor. CodePen.IO Nicholas offer a and a few to start create with Itty Bitty. template samples To test Itty Bitty, I used Nicholas’ template and replicated this post with CodePen and some simple HTML coding. Medium 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 unlimited! LOVE IT! almost
