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.
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.)
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.
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 ;-)
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.
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
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.
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]
[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.