JS tricks

Hello, I recently found this piece of code that allows me to quickly generate elements in vanilla JS: (() => { const assignDeep = (elm, props) => Object.entries(props).forEach(([key, value]) => { if (typeof value === 'object') return assignDeep(elm[key], value); try { Object.assign(elm, {[key]: value}); } catch (e) { elm.setAttribute(key, value); } }); Array.from([ 'a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'br', 'button', 'canvas', 'caption', 'cite', 'code', 'col', 'colgroup', 'data', 'datalist', 'dd', 'del', 'details', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'embed', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hr', 'html', 'i', 'iframe', 'img', 'input', 'ins', 'kbd', 'label', 'legend', 'li', 'link', 'main', 'map', 'mark', 'meta', 'meter', 'nav', 'noscript', 'object', 'ol', 'optgroup', 'option', 'output', 'p', 'param', 'picture', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'source', 'span', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'template', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'track', 'u', 'ul', 'var', 'video', 'wbr' ]).forEach(tag => window[tag] = function(...args) { const props = typeof args[0] === 'object' && !(args[0] instanceof HTMLElement) ? args.shift() : null; const elm = document.createElement(tag); props && assignDeep(elm, props); elm.append(...args.map(a => typeof a === 'string' ? document.createTextNode(a) : a)); return elm; }); })(); This code has helped me to generate interfaces without the need for any framework. const myDiv = div({class: 'my-class'}, 'Hello, World!', span('This is a span')); Do you know any other interesting JavaScript tricks?

>>43498 Object.assign(document.createElement('template'), { innerHTML: /* html */ ` <div class="my-class"> Hello, World! <span>This is a span</span> </div> ` }).content.firstElementChild

>>43498 I didn't know that you could dynamically create variables using window[xyz]. Makes sense in hindsight though, given I never needed to prefix window to anything... >Do you know any other interesting JavaScript tricks? Let me fetch my tophat real quick... Technically not JS but in TypeScript I've used this to workaround broken types provided by a library: const eraseType = (x: any) => x;

>>43498 >>43506 function $(tag, attributes = {}, children = []) { const $element = document.createElement(tag); for (const [name, value] of Object.entries(attributes)) $element.setAttribute(name, value); $element.append(...children); return $element; } function $MyElement({name}) { return $("div", {"class": "my-class"}, [ `Hello, ${name}!`, $("span", {}, ["This is a span"])]); } const $container = $("div", {}, [ $("h1", {"style": "color: red"}, ["Composibility!"]), $MyElement({name: "Lain"}), ]); document.body.append($container); Don't worry about the dollar signs they're just a naming convention of mine, and if you use jquery (really?) I'm sure you can come up with another name for the first function.

Tsoding made a video on how to make a simple 3d viewer using pure JS https://www.youtube.com/watch?v=qjWkNZ0SXfo

https://github.com/Named666/BaseDOM single file components in html that generate elements in vanilla js with reactivity <template> <div class="counter"> <h1>{{ message }}</h1> <p>Count: {{ count }}</p> <button x-on:click="increment">Increment</button> <input x-model="message"> </div> </template> <script> import { signal } from '../basedom/state.js'; export default function() { const [count, setCount] = signal(0); const [message, setMessage] = signal('Hello, BaseDOM!'); return { count, message, increment: () => setCount(count() + 1) }; } </script> <style> .counter { padding: 2rem; border: 1px solid #eee; border-radius: 8px; text-align: center; } input { margin-top: 1rem; padding: 0.5rem; } </style>

This is a bookmarklet I use to turn a YouTube short into a normal YouTube video. javascript:match = location.pathname.match(/^\/shorts\/(.*)/); if (match) {location.href = `${location.protocol}//${location.hostname}/watch?v=${match[1]}`}

>>43908 This is a handy tool for making bookmarklets. https://caiorss.github.io/bookmarklet-maker/ It'll let you write your code normally, and it'll generate a minified bookmarklet link for you.

Not a JS trick, but here's a video editor built entirely in vanilla JS https://github.com/bwasti/mebm