Vladimir Hooke userhooke

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

Why I use web components

This is some sort of answer to recent posts regarding Web Components, where more than a few misconceptions were delivered as fact.

Let's start by defining what we are talking about.

The Web Components Umbrella

As you can read in the dedicated GitHub page, Web Components is a group of features, where each feature works already by itself, and it doesn't need other features of the group to be already usable, or useful.

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.

S3 Static Sites

⚠ This post is fairly old. I don't keep it up to date. Be sure to see comments where some people have posted updates

What this will cover

Host a static website at S3
Redirect www.website.com to website.com
Website can be an SPA (requiring all requests to return index.html)
Free AWS SSL certs
Deployment with CDN invalidation

In the background script we have:

chrome.webRequest.onBeforeRequest.addListener(function (details) {
  if (details.method === 'HEAD') {
    if (details.url.endsWith('?start')) {
      ringSound.play();
    } else if (details.url.endsWith('?stop')) {
      ringSound.pause();
 ringSound.currentTime = 0;

Common Options

-#, --progress-bar Make curl display a simple progress bar instead of the more informational standard meter.

-b, --cookie <name=data> Supply cookie with request. If no =, then specifies the cookie file to use (see -c).

-c, --cookie-jar <file name> File to save response cookies to.

	// proxy server
	// ref: https://gist.github.com/m99coder/bc9120da4c54fa947466ce1e34c93f3a
	// belows are only upload related code

	const http = require('http');
	const multer = require('multer');
	const upload = multer({
	storage: multer.memoryStorage(),
	limits: {}
	})

	#!/usr/bin/env node

	// dependencies
	const https = require('https');
	const express = require('express');
	const multer = require('multer');

	// app
	const app = express();
	const storage = multer.memoryStorage();

	# oh-my-zsh Theme
	# Default robbyrussell theme with node version info.
	# Installation: place this file in .oh-my-zsh/custom/themes/robbyrussell.zsh_theme

	function node_prompt_version {
	if which node &> /dev/null; then
	echo "%{$fg_bold[blue]%}node(%{$fg[red]%}$(node -v)%{$fg[blue]%}) %{$reset_color%}"
	fi
	}