Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

An HTML/CSS/JS code editor in 230+ bytes

xem.github.io

Post reply on HN
Print view View original

31–40 of 57 posts

Re: An HTML/CSS/JS code editor in 230+ bytes

#31

Post by kolodny »

izietto wrote: post #14

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 for(i=4;i--;)e.innerHTML+=(i?' "+t1[v]+" "+t2[v])\'>' Taken from this: https://coderwall.com/p/lhsrcq

I can do one better

      data:text/html,%20d=['','//js','/*css*/',''];for(i=4;i--;)e.innerHTML+=(i?'"+t1[v]+""+t2[v])\'>'+d[i]+'\n'

Re: An HTML/CSS/JS code editor in 230+ bytes

#33

Post by xem »

err4nt wrote: post #32

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

Re: An HTML/CSS/JS code editor in 230+ bytes

#35

Post by izietto »

xem wrote: post #17
izietto wrote: post #14

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 for(i=4;i--;)e.innerHTML+=(i?' "+t1[v]+" "+t2[v])\'>' 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

Re: An HTML/CSS/JS code editor in 230+ bytes

#36

Post by err4nt »

xem wrote: post #33
err4nt wrote: post #32

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!

Re: An HTML/CSS/JS code editor in 230+ bytes

#37

Post by xem »

izietto wrote: post #35
xem wrote: post #17

Earlier quoted context omitted.

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

Re: An HTML/CSS/JS code editor in 230+ bytes

#39

Post by thekingshorses »

err4nt wrote: post #32

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

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

Re: An HTML/CSS/JS code editor in 230+ bytes

#40

Post by croddin »

izietto wrote: post #14

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 for(i=4;i--;)e.innerHTML+=(i?' "+t1[v]+" "+t2[v])\'>' Taken from this: https://coderwall.com/p/lhsrcq

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
Post reply on HN