4 ms·

JS editor in less than 400 bytes

244 points by known 8y ago

mrcactu5 8y ago
github says 407 bytes... how is he doing that?? my HTML / CSS is nowhere near that level
- codefined 8y 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 https://femto.pw/irb7.html
- Jakob 8y 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 8y 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 8y 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.
- oneplane 8y 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 8y ago
    Have you tried writing code with a magnet and a needle ? https://xkcd.com/378/ https://xkcd.com/378/
  - shakna 8y 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 8y ago
  Real-time results updating is kind of heavenly, though.
myfonj 8y ago
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 8y 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 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.
myfonj 8y 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
- myfonj 8y 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.)
  - Kagerjay 8y ago
    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>
brtknr 8y ago
Didn't work on Safari, but it did on Chrome.
- oneplane 8y 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 8y 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 8y ago
Resizing the panes is wonky, I want my money and bytes back! :) Honestly, really cool demo.
jhack 8y ago
Now make it an Electron app. /s
justaaron 8y ago
that is SOOOOOOooooo cool!
jonstaab 8y ago
Just don't type while (true) {} or you have to throw everything away.

244 points by known 8y ago

mrcactu5 8y ago

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

codefined 8y 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 https://femto.pw/irb7.html
Jakob 8y 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 8y 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 8y 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.

oneplane 8y 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 8y ago
  Have you tried writing code with a magnet and a needle ? https://xkcd.com/378/ https://xkcd.com/378/
- shakna 8y 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 8y ago
Real-time results updating is kind of heavenly, though.

myfonj 8y ago

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 8y 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 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.

myfonj 8y 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

myfonj 8y 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.)
- Kagerjay 8y ago
  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>

brtknr 8y ago

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

oneplane 8y 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 8y 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 8y ago

Resizing the panes is wonky, I want my money and bytes back! :) Honestly, really cool demo.

jhack 8y ago

Now make it an Electron app. /s

justaaron 8y ago

that is SOOOOOOooooo cool!

jonstaab 8y ago

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