Josh Gillies joshgillies

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

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?)

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.

At CampJS this week there were a lot of talks about frontend web components, mostly focused on views. It struck me, as a mostly backend engineer that we could do with some better abstractions around client side/server side data sync to go with the new view model systems out there. Here's a few thoughts I had over the weekend..

A client side, in memory data store:

Which is atomic (transactional?)
With data that is strongly typed (validated)
That syncs to a server (which is authoritative)
That syncs uncommitted content to local storage transparently
That is resilient to connectivity trouble
That is bounded by the developer

Change node version for current project.

This is a little ZSH function that hooks change cwd and checks for our ./deployment.json it then uses nvm to change the current node version to the one required by the project.

Install deps

jq
nvm

mdless

Read markdown files in your terminal

cd ~/code
git clone [email protected]:axiros/terminal_markdown_viewer.git
cd terminal_markdown_viewer
pip install markdown pygments pyyaml

	#!/bin/bash

	# This script will download a cloud image and deploy it as a template in Proxmox VE
	# Tested on Proxmox VE 8.2.4
	clear

	# Default values for cloud template
	MEMORY="512"
	DISK_SIZE="10G"
	STORAGE="local-lvm"

	// base64.decode(base64.encode('💩'));

	// Browsers
	const base64 = {
	encode: str => btoa(unescape(encodeURIComponent(str))),
	decode: str => decodeURIComponent(escape(atob(str)))
	};

	/* ES3 compat version
	var base64 = {