Hacker News new | comments | show | ask | jobs | submit login
An HTML/CSS/JS code editor in 230+ bytes (xem.github.io)
231 points by xem on Dec 6, 2013 | hide | past | web | favorite | 55 comments



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


I can do one better

      data:text/html,%20<x%20id=e><script>d=['','//js','/*css*/','<!--HTML-->'];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])\'>'+d[i]+'\n'</script>


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.


I added placeholders to the textareas, for the cost of 42 characters: https://github.com/xem/miniCodeEditor/pull/4


Added in the homepage ;)


Thank you :)


I made one that can let you visit the page in a data uri, and can edit itself awhile ago. I just put it on github. https://news.ycombinator.com/item?id=6862837


That's very nice too!


Leading %20 is redundant here.


==========

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

And my other code golfing projects: http://xem.github.io/?golfing

==========


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


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


Very impressive work, however, your "Keys Pressed" code could let a keypress position in the array on "true" if a key is pressed more than 1 second. I think you should set up a timeout to ensure a keypress position state is returned to false after the user interaction.


Nice trick for the

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

rather than

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

to save 1 fucking char.


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

Screenshot: http://i.imgur.com/SuXoXHb.png

Demo: http://staticresource.com/editor


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


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!


You shouldn't use jQuery, inline CSS and inline JS right before closing </body> tag.


I get the CSS, but why the others?


Why do you want to include a huge library if only use is to check if page is ready?

Extra HTTP request has more overhead then few inline bytes.

if you put that code at bottom, you won't need jQuery to know if page is ready, and won't need extra HTTP request.


made a quick pull request to save you 83kb, silly to include jQuery just for document.ready.


Awesome. I love small things.

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


Cool! But your "get css" button doesn't work


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


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


Great! I am going to definitely use it for my personal project.


I like it small, but this also looks a bit cheap :\


You mean "vintage".


nice, I like it!


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

http://www.whatwg.org/specs/web-apps/current-work/multipage/...


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


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/

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


You know, thare's already a save function: you can write stuff in the cross-browser editor and save it on your desktop as a standalone HTML page (Ctrl-S / File > "Save as...")

http://xem.github.io/miniCodeEditor/editor.html

I recommend you to use Firefox: it will keep the code in the textareas. Chrome will only save the iframe's content.

;)


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


I like this idea!

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


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


Now it's 176+


Now it's 161+


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

http://xem.github.io/miniCodeEditor/tweet.html


now, it IS tweetable!



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.


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


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


A lot of people forget (or never knew) that the increment and decrement operators return a value as well as affecting the target variable, and that you can put what-ever you like in the iteration end control portion of a for statement as long as it returns truey/falsey.


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


That is clever.


I recommend reading K&R (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.


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.


There's pre-increment (++i), post-increment (i++), pre-decrement (--i), post-decrement (i--). The pre-ops operate on the variable and resolve to the new value. The post-ops resolve to the current value, and then operate on the variable.


i-- returns the value before, --i returns the value after decrementing


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


Neat! Absolutely simple! Congrats.


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


XSS affected, just kidding!




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: