---
author: ''
category: ''
date: 2013/10/10 22:17:41
description: ''
link: ''
priority: ''
slug: locche-the-untouchable-pastebin
tags: ''
title: 'Locche: The Untouchable Pastebin'
type: text
updated: 2013/10/10 22:17:41
url_type: ''
---
**TL;DR:**

I did manage to write this thing, sort of, in 2 hours. You can see it in action here:
http://tinyurl.com/locche1 and it has some rather unusual features :-)

* You can hack Locche inside Locche.
* You can go back to previous versions of the text (or Locche) from any copy of Locche
* It uses no server whatsoever (other than a CDN to get JS and codemirror)

**What's missing?**

* Making it pretty
* Shorten history URLs so the size doesn't explode so much
* Fix handling of ' " and probably other characters in the text
* Document it

But I think it's cool. Below is the liveblog of how it was done. Have fun
matching it with the commit history at https://github.com/ralsina/locche

------------

I am going to live-code a pastebin, with a few twists.

It's called Locche, in honour of Nicolino Locche, The Untouchable.

This page will update every 5 minutes until I am done, or 2 hours have elapsed.

.. TEASER_END

**22:26**

Idea: A *really* serverless pastebin. ALready created the
`github repo <https://github.com/ralsina/locche>`_ and am currently in the
feature planning stage (let's give it 10 minutes).

I want it to be what `Shortly <http://t.co/cJjzNR1f6B>`_ claims to be. But let's try to
take it to the next level.

It will not be as featureful as Kilink (because I have only 2 hours), but it should be
useful enough.

So, features:

* Nice editor (codemirror?)
* Serverless (data URLs)
* Self-updating (whoa)
* Versioned pastebins (whoa^2)

I don't expect I will get to all of them, but... let's try.

**22:32**

So, this will involve JS. Let's use JQuery, and Codemirror for the editor. GOod thing: they are
both hosted in CDNs. jsDelivr has the awesome feature of just giving me a chunk of HTML I can copy-paste.


**22:36**

So, how does codemirror work? Let's figure that out and finish the 1st draft of the UI.

**22:48**

I have a pathetic 22-line page showing an editor and a button. That's ok, most of this is going on in my head right now ;-)

**22:52**

Now the button, when clicked, will show the contents of the editor. This is 30% done, in a way.

**22:54**

So, the raw content of locche.html is `here. <https://raw.github.com/ralsina/locche/master/locche.html>`_
that is going to come handy soon (as in, when I find out how JQuery lets you download a file).

**23:03**

Pity, github only puts raw files on https, and I can't load it from a local file, and the same happens for
http. Boo. Ok, moving on.

**23:20**

Note: I have just written what seems to be a memory bomb for Chromium, and I was not even trying.

**23:26**

I just found a resonable way to keep a copy of the page's HTML inside the HTML. So, no need to
fetch it from somewhere else (good)

**23:32**

I can now save the editor's contents inside a textarea so that the contents of the textarea are
... a copy of locche but with the editor's data inside it.

**23:35**

And now, initialize the editor with the right value, and hide the textarea.
Now, I need to figure out how to create a data URL from JS.

**23:45**

Now, Locche can self-modify itself once to have the editor's contents in its HTML and then forward itself to the
new version.

**23:55**

With a regexp I can make the substitution work for more than one generation.

So, what have we got now?

* You start with locche.html
* You edit the text, and click "Paste!"
* This will create a new generation of Locche, where instead of "WRITE HERE" the editor will contain what you typed.
* That page will be turned into a data URL
* You get sent to that data URL

So, you can keep as many versions of your pastebin as you want, just remember the changing URLs ;-)

**00:07**

Added a link to the previous URL. This means that any given copy of Locche contains all the previous versions of the
pastebin, nested like a Matrioshka. Of course that means things explode a bit in size ;-)

**00:21**

It can now handle multiline data, but it breaks if you use "'" and adds some double quotes around stuff.
I'd say good enough for now. Almost. Let's make it hackable by the recipient.

**00:30**

Done, more or less in time. The end result is, of course, here: http://tinyurl.com/locche1

And here is the original, the untouchable Locche:

.. media:: http://www.youtube.com/watch?v=3LEKHMUCh8k