Sebastiaan ba55ie

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.~~

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

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.

	'use strict';

	const jsdom = require('jsdom');
	const window = jsdom.jsdom().defaultView;

	const url = 'http://YOUR_SIGNALR_URL'; // Used for CORS
	const hubs = 'http://YOUR_SIGNALR_HUBS_URL';

	function loadScript(src) {
	return new Promise((resolve, reject) => {

	const app = require('express');

	app.use(require('./default-middleware'));
	app.use(require('./router'));

	module.exports = app;

	{
	"name": "project-name",
	"description": "Template for static sites",
	"version": "1.0.0",
	"homepage": "http://www.project-name.com",
	"author": {
	"name": "Adam Reis",
	"url": "http://adam.reis.nz"
	},
	"license": "UNLICENSED",

	var str = 'class ಠ_ಠ extends Array {constructor(j = "a", ...c) {const q = (({u: e}) => {return { [`s${c}`]: Symbol(j) };})({});super(j, q, ...c);}}' +
	'new Promise((f) => {const a = function* (){return "\u{20BB7}".match(/./u)[0].length === 2 \|\| true;};for (let vre of a()) {' +
	'const [uw, as, he, re] = [new Set(), new WeakSet(), new Map(), new WeakMap()];break;}f(new Proxy({}, {get: (han, h) => h in han ? han[h] ' +
	': "42".repeat(0o10)}));}).then(bi => new ಠ_ಠ(bi.rd));';

	try {
	eval(str);
	} catch(e) {
	alert('Your browser does not support ES6!')
	}

	_registry = {};
	importPolyfill = path => {
	if(!(path in _registry)) {
	const entry = _registry[path] = {};
	entry.promise = new Promise(resolve => entry.resolve = resolve);
	document.head.appendChild(Object.assign(
	document.createElement('script'),
	{
	type: 'module',
	innerText: `import * as X from '${path}'; _registry['${path}'].resolve(X);`,

	<!--
	Complete feature detection for ES modules. Covers:

	1. Static import: import * from './foo.js';
	2. Dynamic import(): import('./foo.js').then(module => {...});

	Demo: http://jsbin.com/tilisaledu/1/edit?html,output

	Thanks to @_gsathya, @kevincennis, @rauschma, @malyw for the help.
	-->

	apiVersion: v1
	kind: ConfigMap
	metadata:
	name: nginx-conf
	data:
	nginx.conf: \|
	user nginx;
	worker_processes 3;
	error_log /var/log/nginx/error.log;
	events {