Skip to main content

Ralsina.Me — Roberto Alsina's website

Locche: The Untouchable Pastebin

TL;­DR:

I did man­age to write this thing, sort of, in 2 hours. You can see it in ac­tion here: http://tinyurl.­com/loc­che1 and it has some rather un­usu­al fea­tures :-)

  • You can hack Loc­che in­­­side Loc­che.

  • You can go back to pre­vi­ous ver­­sions of the text (or Loc­che) from any copy of Loc­che

  • It us­es no serv­er what­­so­ev­er (other than a CDN to get JS and codemir­ror)

What's miss­ing?

  • Mak­ing it pret­­ty

  • Short­­en his­­to­ry URLs so the size does­n't ex­­plode so much

  • Fix han­dling of ' " and prob­a­bly oth­­er char­ac­ters in the text

  • Doc­u­­ment it

But I think it's cool. Be­low is the live­blog of how it was done. Have fun match­ing it with the com­mit his­to­ry at http­s://github.­com/ralsi­na/loc­che


I am go­ing to live-­code a paste­bin, with a few twist­s.

It's called Loc­che, in hon­our of Nicol­i­no Loc­che, The Un­touch­able.

This page will up­date ev­ery 5 min­utes un­til I am done, or 2 hours have elapsed.

22:26

Idea: A re­al­ly server­less paste­bin. AL­ready cre­at­ed the github re­po and am cur­rent­ly in the fea­ture plan­ning stage (let's give it 10 min­utes).

I want it to be what Short­ly claims to be. But let's try to take it to the next lev­el.

It will not be as fea­ture­ful as Kilink (be­cause I have on­ly 2 hours), but it should be use­ful enough.

So, fea­tures:

  • Nice ed­i­­tor (codemir­ror?)

  • Server­­less (da­­ta URL­s)

  • Self­­-up­­dat­ing (whoa)

  • Ver­­sioned paste­bins (whoa^2)

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

22:32

So, this will in­volve JS. Let's use JQuery, and Codemir­ror for the ed­i­tor. GOod thing: they are both host­ed in CDNs. js­De­livr has the awe­some fea­ture of just giv­ing me a chunk of HTML I can copy­-­paste.

22:36

So, how does codemir­ror work? Let's fig­ure that out and fin­ish the 1st draft of the UI.

22:48

I have a pa­thet­ic 22-­line page show­ing an ed­i­tor and a but­ton. That's ok, most of this is go­ing on in my head right now ;-)

22:52

Now the but­ton, when clicked, will show the con­tents of the ed­i­tor. This is 30% done, in a way.

22:54

So, the raw con­tent of loc­che.html is here. that is go­ing to come handy soon (as in, when I find out how JQuery lets you down­load a file).

23:03

Pity, github on­ly puts raw files on http­s, and I can't load it from a lo­cal file, and the same hap­pens for http. Boo. Ok, mov­ing on.

23:20

Note: I have just writ­ten what seems to be a mem­o­ry bomb for Chromi­um, and I was not even try­ing.

23:26

I just found a res­on­able way to keep a copy of the page's HTML in­side the HTM­L. So, no need to fetch it from some­where else (good)

23:32

I can now save the ed­i­tor's con­tents in­side a textarea so that the con­tents of the textarea are ... a copy of loc­che but with the ed­i­tor's da­ta in­side it.

23:35

And now, ini­tial­ize the ed­i­tor with the right val­ue, and hide the textarea. Now, I need to fig­ure out how to cre­ate a da­ta URL from JS.

23:45

Now, Loc­che can self­-­mod­i­fy it­self once to have the ed­i­tor's con­tents in its HTML and then for­ward it­self to the new ver­sion.

23:55

With a reg­exp I can make the sub­sti­tu­tion work for more than one gen­er­a­tion.

So, what have we got now?

  • You start with loc­che.html

  • You ed­it the tex­t, and click "Paste!"

  • This will cre­ate a new gen­er­a­­tion of Loc­che, where in­­stead of "WRITE HERE" the ed­i­­tor will con­­tain what you type­­d.

  • That page will be turned in­­­to a da­­ta URL

  • You get sent to that da­­ta URL

So, you can keep as many ver­sions of your paste­bin as you wan­t, just re­mem­ber the chang­ing URLs ;-)

00:07

Added a link to the pre­vi­ous URL. This means that any giv­en copy of Loc­che con­tains all the pre­vi­ous ver­sions of the paste­bin, nest­ed like a Ma­triosh­ka. Of course that means things ex­plode a bit in size ;-)

00:21

It can now han­dle mul­ti­line data, but it breaks if you use "'" and adds some dou­ble quotes around stuff. I'd say good enough for now. Al­most. Let's make it hack­able by the re­cip­i­en­t.

00:30

Done, more or less in time. The end re­sult is, of course, here: http://tinyurl.­com/loc­che1

And here is the orig­i­nal, the un­touch­able Loc­che:

ddevine / 2013-10-11 02:35:

It'd be cool to have https://togetherjs.com/ for collaborative editing.