282 bytes: Use JS to dynamically create elements, retain layout & placeholders

umpox / TinyEditor

A functional HTML/CSS/JS editor in less than 400 bytes

tiny-editor-umpox.vercel.app

MIT License

2.34k stars 154 forks source link

282 bytes: Use JS to dynamically create elements, retain layout & placeholders #8

Open aarondancer opened 6 years ago

aarondancer commented 6 years ago

New size: 282 bytes Tested in: Chrome, Firefox Demo: https://aarondancer.github.io/TinyEditor/

explodingcamera commented 6 years ago

I would actually stick to

i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'

for better compatibility and the same size, and

document.body.innerHTML+='hcj'.replace(/./g,'<textarea id=$&></textarea>')+'<hr width=100%><iframe id=i>'

would be actually smaller than the es6 version.

Also, font-size:1em seems unnecessary since it sets the size to the default

aarondancer commented 6 years ago

@explodingcamera the default size actually isn't 1em. 1em = 16px/root font size. At least for me, my browsers render 11px as the default, so 1em is substantially bigger and relatively close to 18px like the original version.

aarondancer commented 6 years ago

@explodingcamera the ES6 implementation for oninput is 1 byte smaller and supports all modern browsers.

Nice catch for the onload. Saves 2 bytes.

gruhn commented 6 years ago

<style>
  [id]{display:flex;flex-flow:wrap;font-size:1em;flex:1}
</style>

<body
  oninput="i.srcdoc=h[v='value']+`<style>${c[v]}</style><script>${j[v]}</script>`"
  onload="b.innerHTML='hcj'.replace(/./g,'<textarea id=$&></textarea>')+'<hr width=100%><iframe id=i>'"
  id=b>

assign id to body and reuse reference: -12 bytes
store 'value' in a variable: -1 byte
don't use template syntax to prepend strings: -2 bytes
putting style above body allows body.innerHTML= instead of body.innerHTML+=: -1 byte

=> with minimal white space: 262 bytes

kvker commented 6 years ago

i have try to fix 'placeholder', but it was impossible...

aarondancer commented 6 years ago

Updated with placeholders and old styling (minus font-size)