8 ms·
An HTML/CSS/JS code editor in 230+ bytes
- python3 13y agoSimilar? https://github.com/runexec/static-prime#static-prime https://github.com/runexec/static-prime#static-prime
- xem 13y agowell, 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.
- gtramont 13y agoNeat! Absolutely simple! Congrats.
- mmahemoff 13y agoNice 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 13y agoYes, 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 13y agoI like this idea! Feel free to fork miniCodeEditor and add this kind of features :)
- xem 13y agoYou 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 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. ;)
- owenversteeg 13y agoAwesome. I love small things. In fact, I created a CSS library, min, that's 995 bytes - http://minfwk.com/ http://minfwk.com/.
- xem 13y agoCool! But your "get css" button doesn't work
- k__ 13y agoI like it small, but this also looks a bit cheap :\
- thenerdfiles 13y agoYou mean "vintage".
- jdkanani 13y agoGreat! I am going to definitely use it for my personal project.
- tiziano88 13y agonice, I like it!
- tomcam 13y agoAmazing 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 13y agoWoah woah woah, you can't just go around flashing your kilobytes around.
- xem 13y ago========== 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 ==========
- pablovidal85 13y agoVery 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.
- ddevault 13y agoThe attention-grabbing equals symbols come off as spammy and underhanded.
- kordless 13y agoYou make a lot of blaming statements around here. It may be spammy, but you have no evidence it's underhanded.
- Antwan 13y agoNice trick for the t3[v="value"] ... t2[v] ... t1[v] rather than t3.value ... t2.value ... t1.value to save 1 fucking char.
- deleted 13y ago[deleted]
- pyvek 13y agoClever! 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 13y agoNot intuitive? What do you think a post-decrement does do if not that?
- maaaats 13y agoThe 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 13y agoThat is clever.
- xmonkee 13y agoI 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 13y agoDon'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.
- dspillett 13y agoA 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.
- izietto 13y agoCopy & 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 13y agoThanks 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.
- kolodny 13y agoI 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>
- croddin 13y agoI 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 https://news.ycombinator.com/item?id=6862837
- dpweb 13y agoand on the cross-browser version, the forward and back buttons on the browser work as an undo/redo.. sick
- err4nt 13y agoI 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 13y agoThanks 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 13y agoThanks :) 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!
- thekingshorses 13y agoYou shouldn't use jQuery, inline CSS and inline JS right before closing </body> tag.
- gavinpc 13y agoI get the CSS, but why the others?
- thekingshorses 13y agoWhy 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.
- shaunrussell 13y agomade a quick pull request to save you 83kb, silly to include jQuery just for document.ready.
- dirkk0 13y agoIt's interesting that the keystrokes are recorded in history/back in Firefox but not in Chrome.
- bburky 13y agoLooks 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/iframe#attr-srcdoc https://developer.mozilla.org/en-US/docs/Web/HTML/Element/if... http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#attr-iframe-srcdoc http://www.whatwg.org/specs/web-apps/current-work/multipage/...
- xem 13y agoThanks 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
- xem 13y agoHi, 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!
- bedspax 13y agoXSS affected, just kidding!
- xem 13y agoGuys, the editor is almost tweetable! (143 characters) http://xem.github.io/miniCodeEditor/tweet.html http://xem.github.io/miniCodeEditor/tweet.html
- xem 13y agonow, it IS tweetable!