TinyEditor: A functional HTML/CSS/JS editor in less than 400 bytes | Hacker News Reader

JS editor in less than 400 bytes

github.com

244 pointsknown21 comments

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

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.)

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

demonstration of what you stated above

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>

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

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

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 to play with saving websites in the browsers localstorage and I used innerHTML and 'reinsertion' of script nodes to make js execute.

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.

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.

Have you tried writing code with a magnet and a needle ? https://xkcd.com/378/

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?

Real-time results updating is kind of heavenly, though.

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

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 ;-)

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.

Now make it an Electron app.

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

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

Honestly, really cool demo.

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

The provided index.html is optimised for readability, so it has a lot of extra whitespace. If you minify it, which results in the same content, it reduces to 337 characters[0]

[0] https://femto.pw/irb7.html

The code is easy to read, I encourage you to do so. Basically it is setting the content of an iframe via `.srcdoc` to the content of the textarea you write in.

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

that is SOOOOOOooooo cool!

Reply on news.ycombinator.com