single_line_application.md

Single Line Application

SLA-Serverless and whatnot

Maybe you heard about SPA:s, Single Page Applications. But you might not heard about Single Line Applications.

A brief background

Some years ago i was into making practical js-bookmarklets for myself. A bookmarklet can look something like this:

<a href="javascript:alert('hello there!')">say hello</a>

If you visit a page with such a link as the one above, you could drag it to your bookmarks bar, then click it and it will say hello there! whenever you click it, and there was much rejoicing.

You get the idea.

I thought it was much fun to write useful bookmarklets, like one for finding a table on the page and download it as a .csv and similar stuff.

Then i stumbled upon jspm.io, the system.js loader.

With this you could actually load almost any package from npm and github.

I fiddled around a bit with it and came up with the idea to actually use this in a bookmarklet. like so:

<a href="javascript:System.import('jquery').then(function($){console.log($)})">import and log $</a>

But then i would need to load System.js first. Of course it is possible to load an external script with js. An easier and less verbose way to get a script on a page is to write a script tag with src in HTML.

But i am writing javascript, right?

Turns out there is a way to actually write HTML in the adress bar, it is called DataURl:s Prepend whatever HTML with data:text/html, So, if you copy:

data:text/html,<h1>Hello There!</h1>

and paste in the address bar of your browser you will get a HTML page with the text Hello etc in big bold heading style.

Pretty neat.

This insight now took me to a javascript lala-land.

If i can write a <h1> i must be able to write a script tag, right?

data:text/html,<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script><script>console.log($)</script>

And it works perfectly fine.

• A link to a style sheet? ✓
• Loads of hand rolled javascript? ✓
• Moar HTML? ✓
• A whole web app in the browsers address bar*? ✓

Fun times indeed.

There is one caveat, though. I found it very difficult to put all quotation marks, commas etc in the correct way for the browser to actually parse it correctly.

I had made a link looking like this:

<a href="data:text/html, <link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet'> <script src='https://jspm.io/system@0.18.js'></script><script>System.import('jquery').then(function($){$('h1').html('jQuery version: '+$.fn.jquery+' loaded');System.import('github:twbs/bootstrap').then(function(){$('h1').html('bootstrap loaded. PS Hover over this text').attr('title','Yo i am a bootstrap tooltip').tooltip({placement:'bottom'});System.import('npm:lorem-ipsum').then(function(a){$('#text').html(a({count:1000}))})})});</script><div class='container'><div class='page-header'><h1>Loading stuff…</h1></div><div id='text'>">click me</a>

Placing this in a HTML page does not produce a link, it looks more or less like the mother of all broken HTML…

Base64 to the rescue.

But! With href converted to base64 it now looks like this:

<a href="data:text/html;base64, PGxpbmsgaHJlZj0naHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjUvY3NzL2Jvb3RzdHJhcC5taW4uY3NzJyByZWw9J3N0eWxlc2hlZXQnPiA8c2NyaXB0IHNyYz0naHR0cHM6Ly9qc3BtLmlvL3N5c3RlbUAwLjE4LmpzJz48L3NjcmlwdD48c2NyaXB0PlN5c3RlbS5pbXBvcnQoJ2pxdWVyeScpLnRoZW4oZnVuY3Rpb24oJCl7JCgnaDEnKS5odG1sKCdqUXVlcnkgdmVyc2lvbjogJyskLmZuLmpxdWVyeSsnIGxvYWRlZCcpO1N5c3RlbS5pbXBvcnQoJ2dpdGh1Yjp0d2JzL2Jvb3RzdHJhcCcpLnRoZW4oZnVuY3Rpb24oKXskKCdoMScpLmh0bWwoJ2Jvb3RzdHJhcCBsb2FkZWQuIFBTIEhvdmVyIG92ZXIgdGhpcyB0ZXh0JykuYXR0cigndGl0bGUnLCdZbyBpIGFtIGEgYm9vdHN0cmFwIHRvb2x0aXAnKS50b29sdGlwKHtwbGFjZW1lbnQ6J2JvdHRvbSd9KTtTeXN0ZW0uaW1wb3J0KCducG06bG9yZW0taXBzdW0nKS50aGVuKGZ1bmN0aW9uKGEpeyQoJyN0ZXh0JykuaHRtbChhKHtjb3VudDoxMDAwfSkpfSl9KX0pOzwvc2NyaXB0PjxkaXYgY2xhc3M9J2NvbnRhaW5lcic+PGRpdiBjbGFzcz0ncGFnZS1oZWFkZXInPjxoMT5Mb2FkaW5nIHN0dWZmLi4uPC9oMT48L2Rpdj48ZGl2IGlkPSd0ZXh0Jz4=">click me</a>

A lot better, right? Turns out it works perfectly fine in a HTML page.

Try the awesome SLA web app here.

Or just copy the stuff below and paste it in your address bar:

data:text/html;base64, PGxpbmsgaHJlZj0naHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjUvY3NzL2Jvb3RzdHJhcC5taW4uY3NzJyByZWw9J3N0eWxlc2hlZXQnPiA8c2NyaXB0IHNyYz0naHR0cHM6Ly9qc3BtLmlvL3N5c3RlbUAwLjE4LmpzJz48L3NjcmlwdD48c2NyaXB0PlN5c3RlbS5pbXBvcnQoJ2pxdWVyeScpLnRoZW4oZnVuY3Rpb24oJCl7JCgnaDEnKS5odG1sKCdqUXVlcnkgdmVyc2lvbjogJyskLmZuLmpxdWVyeSsnIGxvYWRlZCcpO1N5c3RlbS5pbXBvcnQoJ2dpdGh1Yjp0d2JzL2Jvb3RzdHJhcCcpLnRoZW4oZnVuY3Rpb24oKXskKCdoMScpLmh0bWwoJ2Jvb3RzdHJhcCBsb2FkZWQuIFBTIEhvdmVyIG92ZXIgdGhpcyB0ZXh0JykuYXR0cigndGl0bGUnLCdZbyBpIGFtIGEgYm9vdHN0cmFwIHRvb2x0aXAnKS50b29sdGlwKHtwbGFjZW1lbnQ6J2JvdHRvbSd9KTtTeXN0ZW0uaW1wb3J0KCducG06bG9yZW0taXBzdW0nKS50aGVuKGZ1bmN0aW9uKGEpeyQoJyN0ZXh0JykuaHRtbChhKHtjb3VudDoxMDAwfSkpfSl9KX0pOzwvc2NyaXB0PjxkaXYgY2xhc3M9J2NvbnRhaW5lcic+PGRpdiBjbGFzcz0ncGFnZS1oZWFkZXInPjxoMT5Mb2FkaW5nIHN0dWZmLi4uPC9oMT48L2Rpdj48ZGl2IGlkPSd0ZXh0Jz4=

(It is a totally pointless poc-application, btw. It loads some stuff and inits it)

This opens a whole new universe of Single Line Applications, right?

Maybe a new 2 kb* contest?

“-Such an interesting quirk”, as a friend of mine expressed it.

*turns out there is a limit in about 2000 chars for most browsers adress bar