Andrea Giammarchi WebReflection

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

~~Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.~~

This snippet helps understanding packages dependencies and versions across different projects/folders.

You can pass 2 or more folders to compare their package.json

You can also pass just one fodler to check all modules in it (example: a node_modules folder)

You can pass nothing to analize the current list of packages.

#!/usr/bin/env node

	function date(year, month, day, hours, minutes, seconds, ms) {
	var today = new Date();
	today.setYear(year);
	today.setMonth(month - 1);
	today.setDate(day);
	today.setHours(hours \|\| 0);
	today.setMinutes(minutes \|\| 0);
	today.setSeconds(seconds \|\| 0);
	today.setMilliseconds(ms \|\| 0);
	return today;

	#!/usr/bin/env bash

	#$ 2gif video.mp4 # creates video.gif
	#$ 2gif video.mp4 out.gif # creates out.gif

	extension2gif() {
	local name="$1"
	echo "${name%.*}.gif"
	}

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

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

	/* ES3 compat version
	var base64 = {

	// 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),

	#!/usr/bin/env bash

	# @example
	# chmod a+x randommac.sh
	# ./randommac.sh wlp2s0

	# @credits original macOS / osX version via @rem
	# https://remysharp.com/2017/05/29/getting-free-wifi

	if [ "$1" != "" ]; then

	// Players
	class ClickCounter {
	constructor() { this.clicks = 0; }
	onclick(e) { this.clicks += (e.type === 'click') ? 1 : -1; }
	}

	class Handler extends ClickCounter {
	constructor(currentTarget) {
	super();
	currentTarget.addEventListener('click', this);

	<!doctype html>
	<html lang="en">
	<head>
	<title>hyperHTML & Firebase</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<style>
	html { font-family: sans-serif; }
	html, body, ul, p { padding: 0; margin: 0; }
	ul, li { list-style: none; }

	(function (document, TEMPLATE) {
	var container = document.createElement(TEMPLATE);
	if ('content' in container) return;
	var createElement = document.createElement;
	var descriptor = {
	get: function () { return this.content ? this.content.innerHTML : ''; },
	set: function (html) {
	var el = createElement.call(document, TEMPLATE);
	if (/^[^\S]*?<(t(?:head\|body\|foot\|r\|d\|h))/i.test(html)) {
	var selector = RegExp.$1;