
Itty Bitty: Sites contained within their own links - Pulcinella
https://itty.bitty.site/#About/XQAAAAKrCQAAAAAAAAAeHMqHyTY4PyKmqfkwr6ooCXSIMxPQ7ojYR153HqZD3W+keVdvwyoyd+luwncAksvskG/my97qDaUEyfDGB0QDbdURMwS0L90o5EpQ7O+BMmWrcB7fs71TJEJv1I/T/JfksoiYu9CqkeO/3MjEVGWv6XhfDjWJZ9laLARogtAZtwl7FltrwO/ppSfgeKOjxCxTNdUQH9WBM3de22qOzClzeZaSsSM+/ETbHBIHe1Qc+UF7PDfY470lZNjQg3wfOam9KudUiHOOQD3Kn8FLfaae0lmdK4VHRgxpDtL1nExkdF+pzNQAIyktIv3dQUPDKhGJ61c+WBTNP6NI5AvZ0uFT+Mc2oG0mMUwwuupCrjTxxpYv3l4L3W5lBXqWDjEH+cL8VZc6xz4WwIMG5J9jaQTv1SSxJ1dLg2Z2F7iNQ0fCFI74yeqBM1koHGbscBj4GpwWuA7y/fMCu3sEzcwefjBOuUwDdDfsdxqQLnjywtBxR5qHmngo/agjHyILkZxU8IiTgJeSbjcEOWdiVxcb9tEdtZ7eDwWQcwMsQdU9A9sCnargxl1IdVsbB9dfcFTQL8OpvjdqnmFZZJ6n2cKr51FonrcrMjm68aS4Lemk+D4sRaHnN+O5BrF10BiSfjumSkvhZ0Uwu/tR35LSmtC1UmVPgRNMwWkSHZjfjEdqueqhYglmB7nHQ8TDWCTb7lJLtTdhx1btg7UWsAuNIhffUpBo+T+3oh8sg8c41WaX5JaNL19UkD2M0qFd8Sayfr0qeGXnrLrKkS0t56ckjui2rTTmUDKFup4CnEtE7fu6nGYeGSoCwGoRlYQD/SU1/GSIWfs8hSpK3KeSZgUQXk14b7dh2LaqrVKGJLja/hFcQCt2gdGD+Ml+iH+Cy0lqj3D32RSarS3k4mJyTKsGnETyXVlCbJtC7kiZ/gZ7i8ClkjOjSl7vH1h7l/yJZxfqmRNdl0Tr6HSxjwcNGISk66vPw5WVM2RxDcUJecKKoShy+sLRgZIwYj0YgSM+5NMGTXtBkBxabwiWnxcECQTItyM2XWkNjvIYJyHX5lVKC5z2wJn3yV8KPobM6ky+6l3oMBo2ffIQ4P35hgBU7bTOtF35gH0sxUWeVp+bVQ+Fwwo+v76Gcu1d/ZrXwiSFNfgxeBfE2zKfKeiZKPoJQgUSbwFXjlFgovL4fVjxBtS60mByYJLH/MakoIBlYL0w6mOukdQqv6FsyIj6Hlp4XqIBEydVIUjBSF8tQcPLdSgXxVkJKR1iWOK0tMefTK79Nn+qQE0VhRKmu7wBJeqboC7tnOpISeWc9NvG2GDVEa1W9bP7hEBEj+ThZNaWIkEOiX7PxZe/XmneEJdWyIMEKv2zB7qybBG/wVy1b7lz3wmg84u75TFjUd1hf7/+yOalyXiVvb/zrNAh8B62Hd1yAzlqY0kD2xM69DSKezUZA4seMZ7FEFdUENmkSnZwFMVIKutAgUpiMYG1fTcLHgwb6iWAi5YOrWoBlTcsk3fCDXIMrjFgSKZ/Bgp8PydrcQ2GYgkCtxRaEM4tgTHRheFg06vQdo478dSnhmSobCvF1nghp1ZuNsQvJdk8/eu/ZgeJp8OjJNzPL0Ovk9orPPtoX2uyUFXfP2qJIuVvjsx4opouk4lHrQZzADX3Wg3Tf4+eYos/HWyCeEDn/8Gnr1A=
======
ryanpetrich
A quine:
[https://itty.bitty.site/#/?XQAAAAIPAQAAAAAAAAAeGEPDwwAoaS2Sj...](https://itty.bitty.site/#/?XQAAAAIPAQAAAAAAAAAeGEPDwwAoaS2SjfmzbgJNBE+G+K4XOI91HV7SWCkxcfvhG0ogKSeNhUBdXvB6YB8z730BjbgRiydXuBgVTKkUl8fX5BZQGkYaqyDbdXWLJME3xFVLOuG1u/u73lcdjsRW02LnLnQRYi/2ZaPht09tMM/UgfxPyxisKUhh6b3Wz8o+jwEeQOYLSErM/qwMY9FgYA6o0WUQ8BBoN07NM08ltpAvbzrghducIPKuZuw0exavcBomDwk6kBr57ok8cKR3KDFsL/1SnhNGyG1fqGRw3/52oh0=)

~~~
erdemozg
It's like an image containing its own SHA2 hash. How is it possible?

~~~
lurenjia
Clever use of Javascript.

    
    
      <a><script src="https://itty.bitty.site/lzma/lzma_worker-min.js"></script> 
     <script>a=document.querySelector('a');LZMA.compress(a.outerHTML,9,function(r){a.innerText=a.href='https://itty.bitty.site/#/?'+btoa(String.fromCharCode.apply(null,new Uint8Array(r)))})</script></a>

~~~
mankash666
This makes the whole "Sites contained within their own links" untrue. You need
a server to host the javascript.

------
peterburkimsher
I discovered data URIs in 2014, when trying to make an app that doesn't need
to be distributed through an app store. They're fun.

Nihilogic made a 14KB Mario clone that can be fit into a data URI.

[https://web.archive.org/web/20090310220414/http://blog.nihil...](https://web.archive.org/web/20090310220414/http://blog.nihilogic.dk/2008/04/super-
mario-in-14kb-javascript.html)

I also know about the way Cemetech's jsTified TI-83 emulator parses pictures
to load a calculator ROM file (steganography).

[https://www.cemetech.net/projects/jstified/](https://www.cemetech.net/projects/jstified/)

I put those two together, and imagined a new form of app distribution, which I
call "Fondant".

1\. Click a data URI bookmarklet. That is a bootloader, with the parser code
for a picture. It presents a button to upload a picture.

2\. Select a picture from the camera roll, which is the app.

3\. To save, generate a picture and save that to the camera roll.

This could be used to transfer other file types (e.g. a music player with a
mixtape) over universally-supported photo sharing platforms.

Unfortunately, the iPhone recompresses JPGs when clicking Save to Camera Roll,
and the lost quality means the photo isn't parseable the next time. I did some
experiments, and turned a blue/green checkerboard pattern into grey after 50
repeated Saves.

I still think there's potential in the idea; if someone wants to work together
on it then please get in touch. I'll also write up my experiments if you
comment and ask for it.

~~~
jedimastert
The PICO-8 "fantasy console" is a playful old-school computer style emulator
that passes it's programs through images. You might even look into it's
algorithms [1]. I think it'd be perfect.

[1]:
[http://pico-8.wikia.com/wiki/P8PNGFileFormat](http://pico-8.wikia.com/wiki/P8PNGFileFormat)

~~~
sp332
Also the Spore Creature Creator from 2008 could export and import your
creatures as PNGs. It used the least-significant bit in each color channel.

------
Exuma
[https://itty.bitty.site/#/?XQAAAALfAAAAAAAAAAA0HSzgdXPvDK5AE...](https://itty.bitty.site/#/?XQAAAALfAAAAAAAAAAA0HSzgdXPvDK5AEi+dXR+Wp+VBBrHPUivt9QmuGfWQLaDzPoK1OINSJH8kY65bBkC0AlA1z6uxBe7XA66svOmlKtUCOjl0NqBjRKWb1K7gATXv4mdfvrbLH5qIBs5OFCEc6mlFqEjzlA+4tzQ2BFx2AqwbP6tWoWy6moAmT2l0YRTSngwnsoOTx/0QOUOV6SAmdcHylijJ+B6JLRuPYqaZVy83XDw61WKkzUCsVYmJ9n0ZxIUlcCjMfvDISU/0KPDsTkpWNaIRmjH4eef//j62gA==)

~~~
mchahn
I just get a page with the URL shown.

~~~
Exuma
your first clue

~~~
flyGuyOnTheSly
OK so you keep following the links (by copying and pasting into your address
bar) and after about four links it says "oh hi ".

Explain yourself! How did you do this?!

Impressive!

~~~
sterlind
Simple!

0\. Write oh hi :D, get link0

1\. Paste link0, get link1

2\. Paste link1, get link2 ...

Encoding goes E(T), E(E(T)), etc. let K be the per-char encoding overhead, so
E(T) = KT: complexity is O(K^N * T) where N is number of levels and T is
length of text at level 0!

~~~
flyGuyOnTheSly
D'oh! You're right! That IS simple!

------
adamdrake
This is neat!

I did something similar with
[https://tinysite.adamdrake.com](https://tinysite.adamdrake.com) where I have
a website that fits into a single ipv4 datagram (at least it did when I was
using my own HTTP server).

More details here: [https://adamdrake.com/the-biggest-smallest-
website.html](https://adamdrake.com/the-biggest-smallest-website.html)

~~~
ReverseCold
It's 9XX bytes, is the extra from TLS?

~~~
adamdrake
When I moved it to AWS Lambda there was some size introduced from TLS and also
from some headers that AWS API Gateway adds which seem, unfortunately,
impossible to easily drop (e.g., if you make the headers empty in the
response, APIGW will copy them into another header and still add its own).

I might pull that service off of AWS APIGW/Lambda, in which case the size as
an artifact of AGIGW would disappear again.

------
chias
This is neat!

My second reaction (after "awesome!") was that I'd love for this to support
some kind of optional identifier+hmac functionality. That's not necessary for
when you are fully in control of where people get the links of course, but as
soon as someone starts sharing links to "your" content they can by definition
modify it as well. It'd be cool if I could share a page that says "by chias"
and that can prove it.

Then again, that would require itty-bitty to know that I exist, store my key
somewhere, have some kind of auth system for me to log in and set my key...
and now we're talking usernames, passwords, recovery email addresses, etc.
etc., and I love the concept of services offered to people that _explicitly
don 't_ do any of that. So third reaction is that it's great as-is :)

~~~
ponyfleisch
you could just sign your content yourself using a publicly known key (e.g.
keybase.io)

Support for keys as a separate content "field" could be added to itty bitty i
suppose?

------
shakna
So from Content Lengths [0]... You've tested on Chrome, and IE, but not
Firefox?

[0]
[https://itty.bitty.site/#Content_Lengths/XQAAAAIXAwAAAAAAAAA...](https://itty.bitty.site/#Content_Lengths/XQAAAAIXAwAAAAAAAAAeHMqHyTY4PyKmqfkwr6ooCXSIMxPQ7ojYR153HqZD3W+keVdvwyoyd+luwncAksyBpBYltNr1Oj+0nFtw4rO71K7JRYBTu1/STbYi7TdKa6fx163w7+2NwPfmhoOPwFp2gWV4ZXeA0rB2gi0U/f9/E2cOaRXxIZgD6U7i6ie89XizK8ZD8Fq+/mkO2WT2uJMvs2IVmwdqcjmEFhkmeDr9BaUhampEh70WRk2sC97NHMFXHGhvU8nA5nGjHVrGCTMai5A+JsPaT5GVV8z6vEm8YhzZD8pHG1qLCbyRSpjFAVw8JVmePH6EIs0Oaa14O3tpLFoWCAEJ2uDF4Nyq3gOAMQGhSn5vwAFE2Y7iaghGFqMt4jsAnig63UM/dklujh27iHRdCMUdPttYxqZDghrhxUM/ge+Tlln5hcbX4Z5BIbtRXQW8R2Zjf8t/46VOvuURbM0yu3JmIbMLZxPcv/N1z0wAB8FWVKblgtwaPl5E1MfmdoITh5g4JL3LW2+EWFQkJOBvITY/PO6EvWgWyxD9Ugi6X8SFa+VHexlxpQTDJ+FUja6Yn/W1k2Zi7ypJLnPvCmkCmGiEMzuIzNPF/ygWcwA=)

~~~
sp332
Firefox's is very useful for testing image data URIs. You can paste the whole
thing into the address bar and it will render the image.

------
erlehmann_
I strongly suggest to not use this. Instead, create URIs that contain
arbitrary content with the data URI scheme:
[https://en.wikipedia.org/wiki/Data_URI_scheme](https://en.wikipedia.org/wiki/Data_URI_scheme)

The data URI scheme is standard and widely supported, does not rely on the
host bitty.site being reachable and does not need JavaScript. One can even
create data URIs with a small shell script that is given a filename argument:

    
    
      #!/bin/sh -eu
      printf 'data:%s;base64,%s' "$(file -bi "$1"|tr -d ' ')" "$(base64 -w 0 "$1")"

------
JAdamMoore
This is old news from 2011.
[https://news.ycombinator.com/item?id=2464213](https://news.ycombinator.com/item?id=2464213)
It was done better by David Chambers
[https://github.com/hashify/hashify.me](https://github.com/hashify/hashify.me)

And you can use it here:
[http://hashify.me/IyBUaXRsZQ==](http://hashify.me/IyBUaXRsZQ==)

~~~
recursor
That's cool, I hadn't come across hashify before, but I'm not sure about
"better" overall - depends how you're using it...

...itsy bitsy site's demo page gives a couple of nice additions

* I use markdown a Lot, but the inclusion of codepen.io makes it simple to compose richer docs, including svg's in a page etc. (I haven't read the hashify code - I'm assuming it does support full HTML, not just MD, but the demo doesn't make that clear)

* QR code link - is just using a 3rd party zXing tool, but, nice touch for the demo

* Compression - hashify URLs seem to be longer than the content (that might mean lower effective limits on content lent), relying on 3rd party lookups for shortening, meaning accessingv the content offline looks harder to achieve (afaict itty bitty just needs the JS to decode the url)

------
yourad_io
Try this: CTRL+A CTRL+C on a simple-ish site, then paste on itty bitty. Works
surprisingly well - with the exception of images not rendering.

Super quick static mirroring. I like.

Edit: tabular format is preserved as well - copy paste from Excel :ok_hand:

Edit: Bookmarked! I'm going to use this for sure.

Idea: A javascript bookmarklet of some sort may be nice here. Maybe "create
itty.bitty site from current selection" or "... from entire page"?

~~~
yourad_io
Excel:

This: [https://imgur.com/a/u0clXFg](https://imgur.com/a/u0clXFg)

[https://itty.bitty.site/#/?XQAAAAJFBQAAAAAAAAAFAp8sjXgCEbrRO...](https://itty.bitty.site/#/?XQAAAAJFBQAAAAAAAAAFAp8sjXgCEbrROte4r/PZu9q1Kh86Si++1yVV4oR95G2EWrrzXXUaVnHqQYFLKH1HTUwSEU98+lREuW2wY7veNWzt1rrbeouVybHu/x8tNj+jnWmjF+MBwCQZfNLdPFhOMA4sCoaoxqU7c0rQVjWBqzk7muImckyBR3rPFhYBqYLzD4VKrJOG53dB8Gmmr5EmOQUd/DwBxgJPbyEBqp9IOrWlWsIoOGIk2Te5D6pDEjuD5iDmDjQ+8b0OwTa79UwY4OKZiE1doZ7TeIX3XxHyvLpF05psA/u32kxqgQKwdC6M+7WlyE4LNd/7H+smtZ1vm3jnG71kJmD08cIo5PXZL3Mif0IReNhCeh75V5ymp+RUtxFp1EcOS8bavQ4mx8fa97dfu7Imh3D76uKGqTBhAB05fGzig8NJTgPCtlN40bSUzC5E7m+JyFPWyBYP0I6wkVbq/ueSticXo4GPU+vYGdFSweMPpypfxjS2UxPTYQsWqBa0nXD9hEAcHcRvzzZvU4ldi5iMwXEWYIB3UPNAu3Xau7JaNCJ5QF3bvB9WZ1nNNtBCax9KD+y/6EDiLok69qBi2/CtAuWXFTu/eeMVV25zhXzcD/3IOQnj6kwwTO1oTrfCBZMTIQ6eKMr4Pam5e5E3NVxLeIoTufI7JlUg6SAIdYpX35MQO79fZ1Z03egq//a9XS4=)

------
EddieDevalara
Love it!

[https://itty.bitty.site/#Hello/?XQAAAAIDAwAAAAAAAAAeGQknlxhI...](https://itty.bitty.site/#Hello/?XQAAAAIDAwAAAAAAAAAeGQknlxhIQakTsdMIbU8HlOZm/BDoJ2nSs58e048WkaWOrss+S6eHpsZSq6yRrN7Rme6MnkC8igbOQaDSEcCsEIMeRTt2WdOH3QwOZdSYjNE1TfTz4bPVzvJ1U6wyMS+p1DUito7UecYiggwLdi5nBWYPTDTK7TM2UQoRQR5PWT64d82WF0/qJj0nVM46mfsJ+HsMj8uzkNEswBVm2xdVmqJoH2ScQZaLJag3/woG8muMaSQl4Pu4fUV2+BhdN3ePErXGm4oPw6JDBTpSKpH4GREI3FftIeIPsTSkbH93C2mdm8sP5S0TmbThTHTns3ioOM1FODEHMVzaj1yNMwnrg2iLNnzZQUTwgf8A5wJjy6DE1eVZigoPsFt/NVFz14uf1zfxmNzvbbH0apTqh6q8bD85D8ItoLtftudLpkBRVOyKCXz9d+4wYf1E56LCHgUo+RJnZl0RPYjWPD4JvSJYj7wrYXU9DgQq7sZlqkrJEkWlAD1l+nZizcg04T26xOgP2cDXe/qhcAgHimV9FsC55PIxEqIWVps6yvG0CmbQf2Q/1nhjanz+P8VSJImJ+PhR/Q9YWY4Y2Ijvvq+AP2ckN3w8xar9ZXwO0bvMO2ex125DyhQXxG6tEEGaDv/Pip9q)

------
mkj
Ah, it's by Nicholas Jitkoff, of mac Quicksilver fame. More elegant design.

Edit: Oh, a bit more googling and he was lead designer for Material Design.

------
cetra3
Just be careful about XSS:
[https://itty.bitty.site/#/?XQAAAAIhAAAAAAAAAAAeHMhnVbtj2LI97...](https://itty.bitty.site/#/?XQAAAAIhAAAAAAAAAAAeHMhnVbtj2LI970NQdDTNrv4CLR793gw6k3+xZwRpB///91FAAA==)

~~~
tantalor
Why

~~~
cetra3
If you're using this in your site as it stands, you are opening up XSS attacks
as it does not appear to sanitise user input.

~~~
tantalor
Only if you do something silly like serve cookies on that domain

~~~
comesee
I think this is ignoring the content of his warning and is a tautology.

"it's only opens up an attack if you allow the attack vector"

------
qiqitori
Another service that does the same thing:
[http://urlhosted.graphicore.de/](http://urlhosted.graphicore.de/)

From
[http://urlhosted.graphicore.de/about.html](http://urlhosted.graphicore.de/about.html):
"urlHosted is an experimental web app that misuses the part after the "#" of a
URL to store and read data."

------
the_d00d
Great work and congrats on making it to the top of HN.

I did something similar awhile back...I called it inception host :)

[https://github.com/jrhea/inception/blob/master/readme.md](https://github.com/jrhea/inception/blob/master/readme.md)

------
kazinator
Data URL's do this without relying on the server.

E.g. this one cribbed from StackOverflow:

data:text/plain;base64,SGVsbG8sIHdvcmxkISBJJ20gZG93bmxvYWRlZCB2aWEgImRhdGE6dGV4dC9wbGFpbjsuLi4iIFVSTCB1c2luZyA8YSBkb3dubG9hZD0iZmlsZV9uYW1lIi4uLj4uDQpNeSBiaXJ0aHBsYWNlOiBodHRwOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzY0Njg1MTcvDQoNCk1vcmUgYWJvdXQ6DQpodHRwOi8vd3d3LnczLm9yZy9UUi9odG1sL2xpbmtzLmh0bWwjYXR0ci1oeXBlcmxpbmstZG93bmxvYWQNCmh0dHA6Ly93d3cudzMub3JnL1RSL2h0bWwvbGlua3MuaHRtbCNkb3dubG9hZGluZy1yZXNvdXJjZXMNCg0KQnJvd3NlciBzdXBwb3J0OiBodHRwOi8vY2FuaXVzZS5jb20vZG93bmxvYWQ=

------
saagarjha
I wonder how large a website using this scheme can practically be to work on
most browsers. I know of at least one browser that limited URLs to 100
characters, but it's almost 30 years old…

~~~
lainga
_While most sites /apps support about 2000 bytes (2KB), some can handle
more... Twitter and Slack, for example, allow 4000 bytes in a link._

4000 bytes is enough to apparently encode the full text of Poe's _The Raven_.

[https://twitter.com/edgar_the_poe/status/1003524516440563712](https://twitter.com/edgar_the_poe/status/1003524516440563712)

~~~
yourad_io
The HN frontpage bitty that I posted in another comment is around 8K. [1]

I also did a reddit one that works on my browsers[2] (copy/paste URL into new
tab) at 26K (!). Which is apparently too much for HN. (Where's my free 5GB of
storage for signing up?!)

[1]
[https://news.ycombinator.com/item?id=17460932](https://news.ycombinator.com/item?id=17460932)
[2] latest chrome, firefox on ubuntu

------
ummonk
Don't use this for anything where you don't want cross-site-scripting
vulnerabilities...

~~~
chias
What would such a cross-site scripting vuln do? There isn't anything to steal.

Moreover you wouldn't use this for anything where you aren't in control of
where people get the links from, because as soon as someone else starts
sharing it they can of course edit it too.

~~~
gbba
The trustworthiness of the domain name would effectively be stolen.

~~~
chias
I disagree. It's more similar to how you can "inject" your scripts into
fiddle.jshell.net (via JSFiddle), googleusercontent.com (via Google
Translate), etc.

Have a look at
[https://fiddle.jshell.net/pvcL4mjh/1/show/light/](https://fiddle.jshell.net/pvcL4mjh/1/show/light/)

Would you call that XSS / did I just steal JSFiddle's trustworthiness?

~~~
ummonk
That's a fair point.

------
recursor
Hypothetical:

Might a bad actor user something like this, combined with a homograph domain,
to conceal malicious content in the URL and prevent a crawler discovering the
malicious content (ignoring the fact that the homograph might be
detected/redflagged on its own).

(use case might be a homograph phishing site, with a fakelogin and the target
for the captured input being obfuscated into the URL)

\---- Note: Homograph effectiveness depends on the browser, which you'd hope
all be improving detection over time-
[https://dev.to/loganmeetsworld/homographs-attack--
5a1p](https://dev.to/loganmeetsworld/homographs-attack--5a1p)

------
ehnto
I do something similar in a bookmarklet to give myself a nice looking notepad.
It's essentially a padded content editable div, with a prepopulated H1. This
lets me print it out or save it as a document when needed. Which is never.

~~~
carapace
Oh yeah!

data:text/html,<html contenteditable></html>

That's one of my favorite "stupid HTML tricks". I wonder who first figured it
out? I can't find the original blog post (if it even was) and now it's a known
thing:

[https://news.ycombinator.com/item?id=6005295](https://news.ycombinator.com/item?id=6005295)

[https://www.simonewebdesign.it/how-to-make-browser-editor-
wi...](https://www.simonewebdesign.it/how-to-make-browser-editor-with-
html5-contenteditable/)

etc...

------
hackadoodle2
Hmmm... [https://www.engadget.com/2017/05/20/how-to-hide-tiny-
artwork...](https://www.engadget.com/2017/05/20/how-to-hide-tiny-artworks-in-
your-urls/) [https://hackaday.com/2017/05/13/javascript-art-is-in-the-
url...](https://hackaday.com/2017/05/13/javascript-art-is-in-the-url/)

------
ArtWomb
It's a legit pattern. Compression of binary data. Encoding to base64 string.
And packing into data uri. Golang out of the box has packages for handling the
entire pipeline.

You get a small performance hit on page load from decoding. But its still
performant and bandwidth-saving. For network constrained users this is a
solution. Also consider the scenario where you are bootstrapping. Serving
static content from a single server instance or S3. But still want to target a
global audience ;)

------
indigodaddy
So if one must think about it in terms of client/server (my mind works like
this), since the website data is contained in the URI itself, then the
server/site where you clicked on the URL from, can perhaps we thought of as
the "web server" per se. Just a way for me to think about it. This is pretty
crazy though, neat stuff.

------
waisbrot
The link says

> nothing is sent to–or stored on–this server

but isn't it the case that the entire page is sent to bitty.site as part of
the HTTP request?

~~~
sirsuki
No, the page content is never sent to the server. all the server does is serve
a static HTML page with some javascript. The javascript reads the compressed
encoded data in the URL (the fragment which browsers never send to the server
during a request) and then it decodes the data and writes the data to the
current DOM.

All content data is stored in the link itself and never seen by the itty.bitty
server.

------
dandare
The de-facto limit for the number of URL characters is around 2000 but it
greatly varies per browser. See
[https://stackoverflow.com/a/417184/487771](https://stackoverflow.com/a/417184/487771)

------
finagle
Cool hack aside, can anybody think of an actual use case for this?

~~~
mstade
My mind immediately went to stuff like tickets. Can't say how many times I've
gotten stuck having my ticket checked at a concert or on a train simply
because there's no connectivity and the page is no longer in cache on my
phone. If all the data is in the URI then it could work as an option for
entirely static data. I'd say this is useful for almost anything that fits in
a one page PDF.

~~~
Lxr
How does that solve the no connectivity problem? You’d still need the site
(with rendering scripts) cached.

~~~
jadedhacker
Browsers have offline capabilities that are currently massively underutilized.
You can store the LZMA scripts in IndexDB perhaps?

~~~
mstade
Unfortunately that comes with a bootstrapping problem: what if the first time
you hit the link is when you aren't connected? If everything is embedded in
the data URI and the link is in fact the data itself then it doesn't matter.

~~~
jadedhacker
I think that's an acceptable requirement. After all, you wouldn't expect an
app to work without downloading it. If instead of using lzma, gzip were used,
I bet you'd be able to include some code that would unzip itself using the
browser's unzip capability. I am not sure how much code that would take
though.

~~~
mstade
Right, for an app that makes sense but the use case I mentioned was really
just pure data. A ticket is rarely more than a qr code or some other
identifier, whose veracity is then checked t the point of reading. In an arena
full of people it’s not uncommon for cell towers to get overloaded, or you may
be roaming if overseas and don’t want to waste data, or you’re on a moving
train with no on board WiFi or if it has one it might not work right. In those
cases (and it seems to happen to me a lot) I would’ve preferred that the
ticket I received in my email was viewable offline, even if I’d never seen it
before. With a data URI, that’s possible. It’s not an entirely contrived use
case I don’t think.

~~~
recursor
Could you not register a URI format with the mobile OS to open an IttyBitty
reader app that contains the rendering scripts?

Sure, initially that means only users who've noticed it would be able to
benefit, but the app would be generic, not vendor-specific, so over time, it
_could_ become a standard & make it into the OS, at which point it becomes
properly useful.

Edit: (sorry, I appear to have been rate-limited)

In reply to @mstated below:

\---

Only really that itty bitty's compressed in the URL, not in the transport (&
could be extended to add encryption).

It's absolutely true that, that may be tackling the wrong area - if data: were
extended with compression/encryption options (not that itty bitty has
encryption, but it's an option with the JS layer there) then the itty bitty
decoder has nothing to do.

BUT, experiments like itty bitty might spur on ideas & standards changes for
things like data: which to me makes it worthwhile.

(Self-contained, standardised, compressed [, encryptable?] content objects [in
this case URL] renderable via ubiquitous web technologies feels like a win,
itty bitty or not)

\---

Also, if links are shared on html-based platforms, some block data: url's in
links. Not sure of the justification, but reddit doesn't seem to render
markdown formatted URLs with data: on them, as links. Not sure how to tackle
that one - itty bitty sidesteps the restriction.

~~~
mstade
Why? The `data:` schema is already there and is well supported across
platforms. All itty bitty does is take the base64 encoded fragment part of the
URL and put it in an iframe, wrapping it in the `data:` scheme. No need to
register anything new.

~~~
recursor
Only really that itty bitty's compressed in the URL, not in the transport (&
could be extended to add encryption).

It's absolutely true that, that may be tackling the wrong area - if data: were
extended with compression/encryption options (not that itty bitty has
encryption, but it's an option with the JS layer there) then the itty bitty
decoder has nothing to do.

BUT, experiments like itty bitty might spur on ideas & standards changes for
things like data: which to me makes it worthwhile.

(Self-contained, standardised, compressed [, encryptable?] content objects [in
this case URL] renderable via ubiquitous web technologies feels like a win,
itty bitty or not)

\---

Also, if links are shared on html-based platforms, some block data: url's in
links. Not sure of the justification, but reddit doesn't seem to render
markdown formatted URLs with data: on them, as links. Not sure how to tackle
that one - itty bitty sidesteps the restriction.

------
davidcollantes
What is required to run this on own web server? Is there something else to it,
such as node?

~~~
Jaruzel
No, you just host a local copy of the JavaScript file that the page calls to
decode the URL.

------
pwaai
very cool idea!

[https://itty.bitty.site/#/?XQAAAAIOAAAAAAAAAAAwnOxAdDhz11dLC...](https://itty.bitty.site/#/?XQAAAAIOAAAAAAAAAAAwnOxAdDhz11dLCTweFrUkFP/wyMAA)

------
ritlq
This seems like a website version of the Library of Babel

------
trqx
github page is missing instructions to inline the whole html/js/css package in
a single file.

Is it common knowledge?

------
Gaelan
How does this compare with data URLs?

~~~
sirsuki
It is smaller then data urls becausde the base HTML and javascript is provided
by the itty.bitty server and not part of the data url. Only the inner content
is encoded. So it is much smaller then a data url but requires a server to
serve the initial decoding HTML page.

~~~
zeroimpl
The base HTML/javascript coming from the itty.bitty server does not make it
smaller. As a matter of fact, it appears that the javascript provided by
itty.bitty simply decompresses the URL fragment and then converts it into a
data-URI and passes that to an iframe.

So it is smaller than a data URI - but only because it is compressed.

------
bkul_
Finally, a use case for code golf!

------
ttttt1
[https://itty.bitty.site/#/?XQAAAAJc2QAAAAAAAAAeHQgmOm3if2bOh...](https://itty.bitty.site/#/?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)

------
djsumdog
It does require Javascript to render.

~~~
Double_a_92
It does the decompressing and everything on client side. How would you do that
without?

~~~
nateguchi
css

~~~
Double_a_92
A decompression algorithm in CSS? What?

------
Pica_soO
Nice one.

[https://boutell.com/newfaq/misc/urllength.html](https://boutell.com/newfaq/misc/urllength.html)

JS-Fat-site shaming by link.

~~~
djsumdog
huh. I know a lot of early buffer overflows came via the URL back in the early
2000s and early IE days. I can understand why there shouldn't be a theoretical
limit today, at least until your machine would run out of resources. 32GB url
anyone?

------
shitloadofbooks
This seems like an exceptionally bad idea.

Even if if just used it for my blog, an attacker can craft a URL which renders
obscene content ("Hitler did nothing wrong"), then scatter that link
everywhere on the web and get it crawled. Eventually it shows up in searches,
but it's definitely "on my domain."

Furthermore, it's like running a public anonymous FTP, it'll just get used as
a malware hosting tool as soon as it's found.

~~~
wyldfire
Will crawlers do the js DOM rendering before the page is indexed?

~~~
danShumway
I think that Google does actually wait for Javascript to finish running. I
don't think that it indexes URLs with their query params though. Maybe I'm
wrong about that.

Not sure why it would be a problem though even if it did - if you've ever
hosted content on Instagram, Reddit, Facebook, Twitter, or, heck, even
HackerNews, it seems like you'd have the exact same threat model.

