WebReflection

About

Highly Experimental

If you are using this already, consider changes soon due the discussion around current ESX proposal.

Feel free to keep an eye on udomsay as that will be the implementation reference for consumers.

---

WebReflection

Proxy Traps Cheat Sheet

There are various shenanigans around the Proxy API, including issues with Array.isArray and Object.ownKeys so that this gits purpose is to describe all the undocummented caveats to help anyone dealing with all possibilities this half-doomed API offers.

The 3 + 1 Proxy Types

• object: any non primitive value can be proxied but apply and construct traps won't work with it. If the object somehow wants to represent an array without being one, it's impossible to survive Array.isArray brand check (it will be false) and with ownKeys the target needs to have a non configurable length property or it will also fails once reached
• array: it's like object but it survives the `

WebReflection

This gist is a simple no-brainer description of the 3 ways (actually 2.5) the Web handle events.

<tag onclick />

The declarative inline HTML event listener is mostly an indirection of DOM Level 0 events, meaning this simply uses the equivalent of tag.onclick = listener behind the scene.

Example

click me

WebReflection

My FE/DOM Libraries

a gist to recap the current status, also available as library picker!

Minimalistic Libraries

do one thing only and do it well

• µhtml (HTML/SVG auto-keyed and manual keyed render)
• augmentor (hooks for anything)
• wickedElements (custom elements without custom elements ... wait, what?)

WebReflection

Handy Custom Elements' Patterns

^{Photo by Ricardo Gomez Angel on Unsplash}

This gist is a collection of common patterns I've personally used here and there with Custom Elements.

These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.

WebReflection

I've saved this file as /usr/local/bin/new-tab but I think there is a way to configure it as Ctrl+Shift+T shortcut somehow, yet I really wanted to write this down as I've lost 20 minutes of my life to have WSL behaving just like any regular Linux distro in a console/terminal.

#!/usr/bin/env sh

cmd.exe /c wt.exe wt -w 0 nt -d "$(pwd)" -p "$WSL_DISTRO_NAME"

If you have better tips, hints, or follow ups, you're more than welcome to share, thank you!

WebReflection

Update

If you're OK in having a node-esm executable, please consider this solution.

#!/usr/bin/env sh
# the /usr/local/bin/node-esm executable
input_file=$1
shift
exec node --input-type=module - $@ <$input_file

WebReflection

Save this file as ai2svg, make it executable via chmod +x ai2svg then run it optionally passing the folder to look for.

It will convert in that folder, or the current one, all .ai files into .svg

#!/usr/bin/bash

createsvg() {
  local margin="$1"
 local d

WebReflection

// https://medium.com/@bdc/web-components-the-react-way-8ed5b6f4f942
const store = (() => {
  let state;
  return todos => {
    if (todos) {
      state = todos;
      render("todo-list");
    }   
    return state;
  };  

WebReflection

// https://webreflection.medium.com/using-the-input-datetime-local-9503e7efdce
Date.prototype.toDatetimeLocal =
  function toDatetimeLocal() {
    var
      date = this,
      ten = function (i) {
        return (i < 10 ? '0' : '') + i;
      },
      YYYY = date.getFullYear(),
      MM = ten(date.getMonth() + 1),