3 ms·
github says 407 bytes... how is he doing that?? my HTML / CSS is nowhere near that level
by mrcactu5 8y ago
github says 407 bytes... how is he doing that?? my HTML / CSS is nowhere near that level
- codefined 8y agoThe provided index.html is optimised for readability, so it has a lot of extra whitespace. If you minify it, which results in the same content, it reduces to 337 characters[0] [0] https://femto.pw/irb7.html https://femto.pw/irb7.html
- Jakob 8y agoThe code is easy to read, I encourage you to do so. Basically it is setting the content of an iframe via `.srcdoc` to the content of the textarea you write in.
- kroltan 8y ago407 with whitespace as mentioned by others. As for how it works: - There are textareas for each language - Through event bubbling, one can listen to events on all of those with just 1 handler - Elements with an `id` attribute have a corresponding property in the `window` (global scope), so you don't need to query for them. With those facts, the code just listens to every change on any field, and assembles a (technically invalid, but in practice functional) HTML snippet, which is just: (contents of the HTML box) <style>(contents of the CSS box)</style> <script>(contents of JS box)</script> And pastes it into the iframe's content. Not particularly efficient, but pretty good for <400b