Sam Tsai samtsai

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

Regular Event Loop

This shows the execution order given JavaScript's Call Stack, Event Loop, and any asynchronous APIs provided in the JS execution environment (in this example; Web APIs in a Browser environment)

Given the code

Converting libraries to Ember CLI addons

In this guide we will cover two main cases:

Ember specific library
vendor library

Ember library

The Ember library will assume that Ember has already ben loaded (higher in the loading order) and thus will assume it has access to the Ember API.

	#!/bin/bash

	PASSWORD="password"
	USERNAME="username"
	SSHPORT=22

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

	# lazyload nvm
	# all props goes to http://broken-by.me/lazy-load-nvm/
	# grabbed from reddit @ https://www.reddit.com/r/node/comments/4tg5jg/lazy_load_nvm_for_faster_shell_start/

	lazynvm() {
	unset -f nvm node npm npx
	export NVM_DIR=~/.nvm
	[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm
	if [ -f "$NVM_DIR/bash_completion" ]; then
	[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion

	# To get the `action` prop:
	#
	# 1. Go to your dashboard on mailchimp.com and navigate
	# to Lists > Signup Forms > Embedded Forms.
	#
	# 2. Copy the `<form>` action from the generated HTML code.
	#
	# 3. Pass that into the component via the prop, like so:
	#
	# <mailchimp-subscribe

	import Ember from 'ember';

	export default Ember.Component.extend({
	didInitAttrs(options) {
	console.log('didInitAttrs', options);
	},

	didUpdateAttrs(options) {
	console.log('didUpdateAttrs', options);
	},

	8 REM MINNESOTA EDUCATIONAL COMPUTING CONSORTIUM STAFF
	9 REM PROGRAMMING REVISIONS BY DON RAWITSCH - 1975
	11 REM CURRENT VERSION - 3/27/75
	15 REM FOR THE MEANING OF THE VARIABLES USED, LIST LINES 4900-4960
	25 PRINT "DO YOU NEED INSTRUCTIONS (YES/NO)";
	30 DIM C$[5]
	35 INPUT C$
	40 IF C$="NO" THEN 400
	45 PRINT LIN(2)
	59 REM *INSTRUCTIONS*

	/* Original source: https://gist.github.com/oskarrough/914653b03d886c015320
	* Modified fork: https://gist.github.com/consideRatio/761c6286158e70feaed7
	*
	* Working authentication with
	* Firebase 2.0.x + Ember.js 1.8.1 + Ember Data Canary + EmberFire 1.3.0 + Ember CLI
	* works for me! [email protected]
	*
	* Note: this assumes you've set up login on your Firebase,
	* only handles Google and Facebook for now.
	*