honsa.ch honsa

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.

Observables

You don't really need a framework or fancy cutting-edge JavaScript features to do two-way data binding. Let's start basic - first and foremost, you need a way to tell when data changes. Traditionally, this is done via an Observer pattern, but a full-blown implementation of that is a little clunky for nice, lightweight JavaScript. So, if native getters/setters are out, the only mechanism we have are accessors:

var n = 5;
function getN() { return n; }
function setN(newN) { n = newN; }

console.log(getN()); // 5

setN(10);

Installing Xdebug for XAMPP with PHP 7.x

Requirements

XAMPP for Windows: https://www.apachefriends.org/download.html
The VC14 builds require to have the Visual C++ Redistributable for Visual Studio 2015 x86 or x64 installed
The VC15 builds require to have the Visual C++ Redistributable for Visual Studio 2017 x64 or x86 installed

	document.getElementsByTagName('button')[0].onclick = function () {
	scrollTo(document.body, 0, 1250);
	}

	function scrollTo(element, to, duration) {
	var start = element.scrollTop,
	change = to - start,
	currentTime = 0,
	increment = 20;

	<!DOCTYPE html>
	<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<style>
	body {
	background: repeat url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/7QCIUGhvdG9zaG9wIDMuMAA4QklNBAQAAAAAAGscAVoAAxslRxwCAAACAAAcAnQAV8KpIENoYWV5b3VuZ1dpbGxOZXZlckNoYWVvbGQgLSBodHRwOi8vd3d3LnJlZGJ1YmJsZS5jb20vcGVvcGxlL0NoYWV5b3VuZ1dpbGxOZXZlckNoYWVvbAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlubwIQAABtbnRyUkdCIFhZWiAHzgACAAkABgAxAABhY3NwTVNGVAAAAABJRUMgc1JHQgAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLUhQICAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABFjcHJ0AAABUAAAADNkZXNjAAABhAAAAGx3dHB0AAAB8AAAABRia3B0AAACBAAAABRyWFlaAAACGAAAABRnWFlaAAACLAAAABRiWFlaAAACQAAAABRkbW5kAAACVAAAAHBkbWRkAAACxAAAAIh2dWVkAAADTAAAAIZ2aWV3AAAD1AAAACRsdW1pAAAD+AAAABRtZWFzAAAEDAAAACR0ZWNoAAAEMAAAAAxyVFJDAAAEPAAACAxnVFJDAAAEPAAACAxiVFJDAAAEPAAACAx0ZXh0AAAAAENvcHlyaWdodCAoYykgMTk5OCBIZXdsZXR0LVBhY2thcmQgQ29tcGFueQAAZGVzYwAAAAAAAAASc1JHQiBJRUM2MTk2Ni0yLjEAAAAAAAAAAAAAABJzUkdCIElFQzYxOTY2LTIuMQAAAAAAAA

	$(function () {
	"use strict";

	// for better performance - to avoid searching in DOM
	var content = $('#content');
	var input = $('#input');
	var status = $('#status');

	// my color assigned by the server
	var myColor = false;

	I
	1100 version
	JOY

	OS: Windows
	Name: Saitek X52 Pro Flight Control System
	Display: Saitek X52 Pro

	Assignments:
	--------------------------------------------------------------

	function simulateDragDrop(sourceNode, destinationNode) {
	var EVENT_TYPES = {
	DRAG_END: 'dragend',
	DRAG_START: 'dragstart',
	DROP: 'drop'
	}

	function createCustomEvent(type) {
	var event = new CustomEvent("CustomEvent")
	event.initCustomEvent(type, true, true, null)

	#!/bin/bash
	# from https://chromium.woolyss.com/
	# and https://gist.github.com/addyosmani/5336747
	# and https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
	sudo apt-get update
	sudo apt-get install software-properties-common
	sudo add-apt-repository ppa:canonical-chromium-builds/stage
	sudo apt-get update
	sudo apt-get install chromium-browser
	chromium-browser --headless --no-sandbox http://example.org/