An HTML/CSS/JS code editor in 230+ bytes | Hacker News Reader

JS code editor in 230+ bytes

xem.github.io

231 pointsxem55 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

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

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

==========

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.

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.

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

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

You mean "vintage".

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

nice, I like it!

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.

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.

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

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.

;)

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?

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.

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.

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

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.

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!

Reply on news.ycombinator.com