A recent hackclub event opened me up to the world of qr codes, and what its possible to fit inside of them.
Qr Codes
There are a bunch of diffrent “versions” of qr codes, (1 to 40) 1 is the smallest, 40 is the largest
Image Credit1
Each version has a maximum data capacity (and includes error correction)
version 1 can contain a max amount of 25 alpha-numeric charaters, and version 40 can contain a maximum of 4,296 (or 2,953 bytes)
Thats enough space to encode some (albiet incredibly basic) websites.
Data URLs
Thats great! we can just make a website now, minify it down to get some bytes back, and its smooth sailing right? not quite.
To display the website, we leverage data URLs (formerly known as data URIs).
I don’t want to yap to hard about them, but it’s basicly just a way to put content directly in the browser. if you copy and paste the following into a new tab, you should get a fully fledged html document.
This example uses URL encoding, but data URLs can alse be base64 encoded.
data:text/html,%3Ch1%3EHello%2C%20World%21%3C%2Fh1%3E
Browsers dont let you hyperlink data: urls, you have to copy and paste and open in a new tab.
AGGGHHH nothing is ever that easy
So the size limit to making a qr code is ~2,900 bytes? Lets go as close to the limit as I can get, then encode it to base64!
Bas64 sucks. It makes my inky dinky little website from 2638 bytes to 3520, over the limit! Thats a 133% increase!
Past me was dumb at the time, and didn’t know any better so I kept on removing things from my site until it fit within the limit.
I asked a question in the slack about my bundle getting bigger after base64, and someone commented,
Don’t use the base64!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Just do data:text/html, and then paste your HTML code after
