
An HTML/CSS/JS code editor in 230+ bytes - xem
http://xem.github.io/miniCodeEditor/
======
izietto
Copy & paste this in the address bar of your browser in order to use it as
inline resource (it's data URI format):

    
    
      data:text/html,%20<x%20id=e><script>for(i=4;i--;)e.innerHTML+=(i?'<textarea%20id=t'+i:'<iframe')+'%20style=width:49%;height:48%%20oninput=\'e.lastChild.src="data:text/html;base64,"+btoa(t3[v="value"]+"<script>"+t1[v]+"<\/script><style>"+t2[v])\'>'</script>
    

Taken from this:
[https://coderwall.com/p/lhsrcq](https://coderwall.com/p/lhsrcq)

~~~
xem
Thanks for mentioning this!

I also thought of this approach this morning, but didn't mention it because I
thought people would just add the editor in their bookmarks.

~~~
izietto
I added placeholders to the textareas, for the cost of 42 characters:
[https://github.com/xem/miniCodeEditor/pull/4](https://github.com/xem/miniCodeEditor/pull/4)

~~~
xem
Added in the homepage ;)

~~~
izietto
Thank you :)

------
xem
==========

Wow! This topic is successful!

You can also take a look at this 512b project that didn't live long on HN
yesterday:

A minesweeper game
[https://news.ycombinator.com/item?id=6853868](https://news.ycombinator.com/item?id=6853868)

And my other code golfing projects:
[http://xem.github.io/?golfing](http://xem.github.io/?golfing)

==========

~~~
Sir_Cmpwn
The attention-grabbing equals symbols come off as spammy and underhanded.

~~~
kordless
You make a lot of blaming statements around here. It may be spammy, but you
have no evidence it's underhanded.

------
Antwan
Nice trick for the

t3[v="value"] ... t2[v] ... t1[v]

rather than

t3.value ... t2.value ... t1.value

to save 1 fucking char.

------
err4nt
I built a quick responsive front-end for this and re-wrote the JavaScript so
the order goes: HTML -> CSS -> JavaScript

Github:
[https://github.com/tomhodgins/liveeditor](https://github.com/tomhodgins/liveeditor)

Screenshot: [http://i.imgur.com/SuXoXHb.png](http://i.imgur.com/SuXoXHb.png)

Demo: [http://staticresource.com/editor](http://staticresource.com/editor)

~~~
xem
Thanks for this hommage :D

This user interface is very nice, bravo!

In your JS, you can replace html["value"], css["value"] and js["value"] with
html.value, css.value and js.value

~~~
err4nt
Thanks :) I write a ton of CSS every day but I'm still learning JavaScript.
Expanding this helped me understand a few things already, I'll go update that
right now!

------
owenversteeg
Awesome. I love small things.

In fact, I created a CSS library, min, that's 995 bytes -
[http://minfwk.com/](http://minfwk.com/).

~~~
tomcam
Amazing how much you wedged into 995 bytes. I have to admit, I would have been
willing to pay 997 or 988 bytes for it, but I'm a big spender ;-)

~~~
lifeformed
Woah woah woah, you can't just go around flashing your kilobytes around.

------
bburky
Looks like you're setting the <iframe>'s contents with a data uri in the src
attribute, you save some characters if you use the HTML5 srcdoc attribute:

    
    
        <x id=e><script>for(i=4;i--;)e.innerHTML+=(i?'<textarea':'<iframe')+' id=t'+i+' style=width:49%;height:48% oninput=\'t0.srcdoc=t3[v="value"]+"<script>"+t1[v]+"<\/script><style>"+t2[v]\'>'</script>
    

[https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/if...](https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/iframe#attr-srcdoc)

[http://www.whatwg.org/specs/web-apps/current-
work/multipage/...](http://www.whatwg.org/specs/web-apps/current-
work/multipage/the-iframe-element.html#attr-iframe-srcdoc)

~~~
xem
Thanks for your help! You shoud join us on Github, and discuss this subject
here:
[https://github.com/xem/miniCodeEditor/issues/6](https://github.com/xem/miniCodeEditor/issues/6)

------
mmahemoff
Nice and you could probably make it save in under 512 bytes. Just persist
everything to localStorage like the tiny spreadsheet
[http://jsfiddle.net/ondras/hYfN3/](http://jsfiddle.net/ondras/hYfN3/)

Or save everything on the URL so it can be bookmarked too.

~~~
myfonj
Yes, saving to URL would make this also _shareable_ , so it would become real
'self contained Codepen' :]

I've made something in this manner recently:
[http://tinyurl.com/selfcontained-editable-
datauri](http://tinyurl.com/selfcontained-editable-datauri)

~~~
xem
I like this idea!

Feel free to fork miniCodeEditor and add this kind of features :)

------
xem
Hi, the counter dropped to 185+ bytes. The project's homepage was reworked
too:
[http://xem.github.io/miniCodeEditor/](http://xem.github.io/miniCodeEditor/)
Thank you all!

~~~
xem
Now it's 176+

~~~
xem
Now it's 161+

------
xem
Guys, the editor is almost tweetable! (143 characters)

[http://xem.github.io/miniCodeEditor/tweet.html](http://xem.github.io/miniCodeEditor/tweet.html)

~~~
xem
now, it IS tweetable!

------
python3
Similar? [https://github.com/runexec/static-prime#static-
prime](https://github.com/runexec/static-prime#static-prime)

~~~
xem
well, not really. miniCodeEditor (like codepen.io or jsfiddle.net) is more
like a tool helping to quickly setup a HTML/CSS/JS prototype, not to build a
website.

------
pyvek
Clever!

Use of `i--` in loop for condition check wasn't intuitive at first. Apparently
`i--` will return the current value of i (before decrementing).

~~~
waterlion
Not intuitive? What do you think a post-decrement does do if not that?

~~~
maaaats
The clever part here is that it's defined as:

for(i=4;i--;)

instead of the more common (off by one?)

for(i=4; i > 0; i--) syntax

~~~
waterlion
That is clever.

~~~
xmonkee
I recommend reading K&R
([http://en.wikipedia.org/wiki/The_C_Programming_Language](http://en.wikipedia.org/wiki/The_C_Programming_Language))
if you haven't already. It's got all sorts of elegant tricks like this. But of
course it depends on very particular implementation details at times.

~~~
waterlion
Don't worry, I have (hence my disbelief at the first comment). Funny we've
come full circle (via e.g. Java) back to the point where that is valid code.

------
dirkk0
It's interesting that the keystrokes are recorded in history/back in Firefox
but not in Chrome.

------
gtramont
Neat! Absolutely simple! Congrats.

------
dpweb
and on the cross-browser version, the forward and back buttons on the browser
work as an undo/redo.. sick

------
bedspax
XSS affected, just kidding!

