
TinyEditor: A functional HTML/CSS/JS editor in less than 400 bytes - known
https://github.com/umpox/TinyEditor
======
myfonj
For those wondering what such a thing could be useful besides showing some rad
golfing skills, be informed that this is pretty nice and really fast
prototyping tool. I made similar for myself [1] and I can honestly say I use
it daily: you can take the dataURI, bookmark it, make a keword (i.e. the `%s`
sumbsitiution) for it and from this point you have instant, offline "Codepen"
in your URL bar. Let's say you want to check if your browser still supports
the marquee tag: just type `s <marquee>...` into url, hit enter and see. Most
online sandboxes with live preview would not even load in such timespan.

[1] this is for usage as keyword URL; it "saves" its state into location hash
so you can return to it or share or whatever; such "save" currently fails in
Chrome when loaded from pure datauri because security. also you can test
different mimetypes (like application/xhtml+xml or image/svg+xml) in it, what
comes in handy from time to time. Golfed just slightly.

    
    
        data:text/html;charset=utf-8,<!DOCTYPE%20html><title>HTML%20sandbox%201.0.8</title><style>*{box-sizing:border-box;width:100vw;height:100vh;margin:0}[id]{border:inset;width:50vw;float:left}</style><body%20onload=A.value=decodeURIComponent((L=location).hash.slice(1)||'');T=W=0;E=RegExp('^'+(D='data:text/html;charset=utf-8,'));F=function(){if(W!=(V=A.value))W=V,M=V.match(/(^data:.+?,)?([^]*)/),I.src=(M[1]||D)+encodeURIComponent(M[2])};F()%3E%3Ctextarea%20autofocus%20id=A%20onkeyup=clearTimeout(T);T=setTimeout(F,400)%20onblur=L.hash=I.src.replace(E,%27%27)%3E%3C/textarea%3E%3Ciframe%20id=I%3E#%s

~~~
myfonj
Just to clarify: above code ending with `#%s` (`%s` being placeholder of the
content written after the bookmark's keyword) does not work when pasted into
URL in this form; if you want to try it, delete `%s` before pasting or
substitute it with desired content (e.g.`<marquee>...`). (Too late to edit,
sorry.)

~~~
Kagerjay
thats cool, I didn't know about <marquee>

demonstration of what you stated above

[https://i.imgur.com/GXakWpD.gif](https://i.imgur.com/GXakWpD.gif)

text used

data:text/html;charset=utf-8,<!DOCTYPE%20html><title>HTML%20sandbox%201.0.8</title><style>
_{box-sizing:border-
box;width:100vw;height:100vh;margin:0}[id]{border:inset;width:50vw;float:left}
</style><body%20onload=A.value=decodeURIComponent((L=location).hash.slice(1)||'');T=W=0;E=RegExp('^'+(D='data:text/html;charset=utf-8,'));F=function(){if(W!=(V=A.value))W=V,M=V.match(/(^data:.+?,)?([^]_)/),I.src=(M[1]||D)+encodeURIComponent(M[2])};F()><textarea%20autofocus%20id=A%20onkeyup=clearTimeout(T);T=setTimeout(F,400)%20onblur=L.hash=I.src.replace(E,%27%27)></textarea><iframe%20id=I>#<marquee>

------
myfonj
XEM [0] and others golfed such thing to 142 bytes [1] some time ago.

[0]
[https://news.ycombinator.com/submitted?id=xem](https://news.ycombinator.com/submitted?id=xem)
[1]
[http://xem.github.io/miniCodeEditor/](http://xem.github.io/miniCodeEditor/)

~~~
h43z
I did not know about the iframe's srcdoc attribute which all these creative
hacks use in order to get javascript evaluated. Just yesterday I created
[http://localhorst.43z.one](http://localhorst.43z.one) to play with saving
websites in the browsers localstorage and I used innerHTML and 'reinsertion'
of script nodes to make js execute.

------
hamptydumpty
This really amazes me. Just tried it out and (of course) it's fully
functional. Although I have to say that this is probably the way I have to
code in hell.

~~~
oneplane
The way to code in hell would be vi (not vim) but without any command support
>:D Starts in insert mode, and that's it. Kind-of like the old days where
computers had no persistence and you just had to type in all of your code at
once.

~~~
shakna
I've been working on and off on my own tiny computer. Mostly MicroPython.

I finally got it the stage where I wrote an editor - and I've been using it.

Not a good editor. Append only, has to be typed directly into the machine.
Does that classify?

------
brtknr
Didn't work on Safari, but it did on Chrome.

~~~
oneplane
In safari, the address bar doesn't allow JS by default. You can turn it on via
the Develop menu, but when you have that menu on, you could also just use the
snippet editor that's in there ;-)

~~~
oblib
Pretty cool stuff.

Works great in Firefox. Turning on JS in the Safari Develop menu didn't work
for me, but I'm using a late `09 Mac mini running Mac OS 10.11.6 (El Capitan)
so that may be why.

------
jhack
Now make it an Electron app.

/s

------
jonstaab
Just don't type while (true) {} or you have to throw everything away.

------
clintonc
Resizing the panes is wonky, I want my money and bytes back! :)

Honestly, really cool demo.

------
mrcactu5
github says 407 bytes... how is he doing that?? my HTML / CSS is nowhere near
that level

~~~
kroltan
407 with whitespace as mentioned by others. As for how it works:

\- There are textareas for each language

\- Through event bubbling, one can listen to events on all of those with just
1 handler

\- Elements with an `id` attribute have a corresponding property in the
`window` (global scope), so you don't need to query for them.

With those facts, the code just listens to every change on any field, and
assembles a (technically invalid, but in practice functional) HTML snippet,
which is just:

    
    
        (contents of the HTML box)
        <style>(contents of the CSS box)</style>
        <script>(contents of JS box)</script>
    

And pastes it into the iframe's content.

Not particularly efficient, but pretty good for <400b

------
justaaron
that is SOOOOOOooooo cool!

