Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

aarondancer
Copy link

@aarondancer aarondancer commented Aug 12, 2018

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

@aarondancer aarondancer changed the title Use JS to dynamically create elements, Flexbox for layour 280 bytes: Use JS to dynamically create elements, Flexbox for layout Aug 12, 2018
@explodingcamera
Copy link

explodingcamera commented Aug 12, 2018

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
Copy link
Author

@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
Copy link
Author

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

Nice catch for the onload. Saves 2 bytes.

@aarondancer aarondancer changed the title 280 bytes: Use JS to dynamically create elements, Flexbox for layout 278 bytes: Use JS to dynamically create elements, Flexbox for layout Aug 12, 2018
@gruhn
Copy link

gruhn commented Aug 13, 2018

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

kvker commented Aug 15, 2018

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

@aarondancer aarondancer changed the title 278 bytes: Use JS to dynamically create elements, Flexbox for layout 263 bytes: Use JS to dynamically create elements, Flexbox for layout Aug 15, 2018
@aarondancer aarondancer changed the title 263 bytes: Use JS to dynamically create elements, Flexbox for layout 271 bytes: Use JS to dynamically create elements, retain layout & placeholders, abuse browsers Aug 16, 2018
@aarondancer aarondancer changed the title 271 bytes: Use JS to dynamically create elements, retain layout & placeholders, abuse browsers 271 bytes: Use JS to dynamically create elements, retain layout & placeholders Aug 16, 2018
@aarondancer aarondancer changed the title 271 bytes: Use JS to dynamically create elements, retain layout & placeholders 282 bytes: Use JS to dynamically create elements, retain layout & placeholders Aug 16, 2018
@aarondancer
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants