On: A little bit of plain JavaScript can do a lot

[goranmoomin]

A bit more minified/modern version of this that I'm using:

    function $e(t='div',p={},c=[]){
      let el=document.createElement(t);
      Object.assign(el,p);
      el.append(...c);
      return el;
    }
    
    var $t=document.createTextNode.bind(document);

That's 173 bytes not minified, might be useful for someone.

Interestingly, the function names are exactly the same - I guess people think similarly :-)

[wolfgang42 → goranmoomin]

I like how short yours is—I really must use Object.assign() more. I hadn’t heard about append(); since my original version supported IE it had to use appendChild() in a loop and I never realized there was a better option.

It looks like append() also accepts strings directly. This eliminates the need for $T, which makes things even nicer.

[PetahNZ → goranmoomin]

Isn't clarity better than bytes. We can always running through a minifier at build time.

[goranmoomin → PetahNZ]

A minifier is better, but I find that snippet of code clear enough for personal use (el is element, t is tag, p is props, and c is children).

The small bytes also mean that for simple sites I can just copy paste it before transitioning to a real setup.

[yunruse → PetahNZ]

Clarity is only useful when the variable scope is complicated, which it isn’t here. The problem COULD be that the ultra-short variable names make an unclear external API… but given the function is internal, the context of its use would make it rather obvious it’s constructing HTML elements.

You’re not wrong about clarity; it wouldn’t hurt here at all, but it wouldn’t hinder without, so I imagine it’s to reduce cognitive load and make it abundantly clear the function is logicless glue.