TinyEditor: A functional HTML/CSS/JS editor in less than 400 bytes

by known • 8 years ago

244 21 8 years ago

mrcactu5• 8 years ago

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

codefined• 8 years ago

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

Jakob• 8 years ago

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.

kroltan• 8 years ago

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

hamptydumpty• 8 years ago

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.

oneplane2• 8 years ago

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.

s3m4j• 8 years ago

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

shakna• 8 years ago

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?

white-flame• 8 years ago

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

myfonj3• 8 years ago

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/

h43z• 8 years ago

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.

myfonj3• 8 years ago

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

myfonj3• 8 years ago

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

swaggyBoatswain• 8 years ago

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>

brtknr• 8 years ago

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

oneplane2• 8 years ago

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• 8 years ago

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.

clintonc• 8 years ago

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

Honestly, really cool demo.

jhack• 8 years ago

Now make it an Electron app.

justaaron• 8 years ago

that is SOOOOOOooooo cool!

jonstaab• 8 years ago

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

TinyEditor: A functional HTML/CSS/JS editor in less than 400 bytes

Related Stories