Host a web app on Twitter in a single Tweet

I love Twitter and I love programming constrains.

I understand all the reasons why Twitter has stuck with the 140 character limit but it really bugs me that I have to navigate away from Twitter to engage in any content that might be of interest to me. In most cases, the external links are either filled with ads or performance on the web sites are abysmal. For my own content, I really don’t want to host my own web site or use external services that are separate from the connections I have on Twitter.

So over the holidays, I played around with a technique that allows me to embed my web apps inside Twitter. Take a look at my video to see how it works:

Basically, this works by embedding the HTML/CSS/JAVASCRIPT of your application inside a PNG Image, which then gets hosted on Twitter. As far as Twitter is concerned, it’s just a plain old image and treats it as such. For more information on embedding text inside images, take a look at this:

Steganography - Wikipedia_The first recorded use of the term was in 1499 by Johannes Trithemius in his Steganographia , a treatise on…_en.wikipedia.org

The encoding and decoding of the image is accomplished by two simple browser bookmarklets. Bookmarklets, and how to create them are described here:

Bookmarklet - Wikipedia_A bookmarklet is a bookmark stored in a web browser that contains JavaScript commands that add new features to the…_en.wikipedia.org

The following bookmarklet encodes the HTML into a PNG image:

javascript: (function() {function encode(a) {if (a.length) {var c = a.length,e = Math.ceil(Math.sqrt(c / 3)),f = e,g = document.createElement("canvas"),h = g.getContext("2d");g.width = e, g.height = f;var j = h.getImageData(0, 0, e, f),k = j.data,l = 0;for (var m = 0; m < f; m++)for (var n = 0; n < e; n++) {var o = 4 * (m * e) + 4 * n,p = a[l++],q = a[l++],r = a[l++];(p || q || r) && (p && (k[o] = ord(p)), q && (k[o + 1] = ord(q)), r && (k[o + 2] = ord(r)), k[o + 3] = 255)}return h.putImageData(j, 0, 0), h.canvas.toDataURL()}}var ord = function ord(a) {var c = a + "",e = c.charCodeAt(0);if (55296 <= e && 56319 >= e) {if (1 === c.length) return e;var f = c.charCodeAt(1);return 1024 * (e - 55296) + (f - 56320) + 65536}return 56320 <= e && 57343 >= e ? e : e},d = document,b = d.body,img = new Image;img.src = encode(d.querySelector("table").innerText), b.innerHTML = "", b.appendChild(img)})();

And this decodes the image back into HTML and inserts it into the existing web page:

javascript: (function() {d = document;t = d.querySelector("img");var s = String.fromCharCode,c = d.createElement("canvas");var cs = c.style,cx = c.getContext("2d"),w = t.offsetWidth,h = t.offsetHeight;c.width = w;c.height = h;cs.width = w + "px";cs.height = h + "px";cx.drawImage(t, 0, 0);var x = cx.getImageData(0, 0, w, h).data;var a = "",l = x.length,p = -1;for (var i = 0; i < l; i += 4) {if (x[i + 0]) a += s(x[i + 0]);if (x[i + 1]) a += s(x[i + 1]);if (x[i + 2]) a += s(x[i + 2])}var dd=d.documentElement;while(dd.firstChild){dd.removeChild(dd.firstChild)};var doc = (new DOMParser()).parseFromString(a, "text/html");var head=(new Range()).createContextualFragment(doc.head.outerHTML);var body=(new Range()).createContextualFragment(doc.body.outerHTML);dd.appendChild(head);dd.appendChild(body);})();

Of course this technique is not specific to Twitter and the images can be hosted anywhere you choose.

Simple, yet functional.

I’d love to hear your feedback!