Alright here my first hacky coding post. Im this post I'll be exploring the capabilities of data uris to display webpages without the use of a web server.
For this exploration I'll use a small demo web page that can be used to draw strings of colorful blocks like the image above using a mouse, your finger or Apple pencil on your computer screen or tablet.
Have you ever wondered why every website starts with http: or https:? It is because it tells a browser what to do what comes behind the colon. In the http case which stand HyperText Transfer Protocol, it is a web address where it can load the document that repesents the web page. https is the secure version of http.
An example of another protocol is file:. The file protocol tells the browser that what is behind the colon is a file location on your hard disk.
A data URI starts with data: and what follows is the actual content of a file. It can be an image, csv data, etc basically anything that can loaded using the http: protocol can also be embedded in a data: url. Here an example of an image.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQYAAABMCAYAAACPgRmCAAAMbWlDQ1 ...
It shows the first few characters as it is actually quite long. Notice after the data: it says image/png which is the type of data (mimetype) and the way it is encoded, often this is base64. This is an ascii encoding that is used to encode binary data.
Here I show the image using the data uri.
When you copy the location of the image and drop it in your browser's address bar you see the full data uri.
Now what is pretty cool is that you can also store a web page in a data uri. I made a small web page called Color Blocks that draws strings of blocks using your mouse, fingers or Apple pencil. You can try it below, anywhere in the rectangle try to draw a line.
The start of the data uri for a web page looks like this. Notice it says it is data of type html text.
data:text/html;charset=utf-8;base64,PGh0bWw+DQo8c3R5bGU+ ...
If you right click on the ColorBlocks link and open it in another tab it will load the web page there without having the go the server because the whole html page is embedded in the link. You can even bookmark it.
You can play with the code for the ColorBlocks web page on CodePen.
Now you may ask how do I make a data uri like that. I used this website data URI generator. At some point I'll make a data URI app for it.
By request here a hosted version of Color Blocks.