spyesx

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.

spyesx

// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);

spyesx

body{
    background:none;
    font-family:arial;
    max-width:1440px;
    margin:0 auto;
    font-size:16px;
}

h1,h2{
    color:white;

spyesx

# source: https://docs.nextcloud.com/server/19/user_manual/files/access_webdav.html#accessing-files-using-curl

curl -u USERNAME:PASSWORD -T /path/to/file https://my.nextcloud.tld/remote.php/dav/files/USERNAME/path/to/directory/

spyesx

Get all volumes' names

$ docker volume ls | awk '{print $2}' | grep -v 'VOLUME'
> 0d8ffd800baf623b030e727829f6a31dd05a0ed73877021f018a849be0ce6433
> 0dc6353456b723b4885f556fb49938b497bdea4bf792bca12d7b5c6ef12dcf16
> 2a579e3e73596349308a4ece576f00c6822f1a04481965f6b8ed366b771dd5ea

spyesx

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

spyesx

# https://explainshell.com/explain?cmd=detox+-s+iso8859_1+-r+-v+.%2F*
detox -s iso8859_1 -r -v ./*

# Lowecase filenames

# linux
rename 'y/A-Z/a-z/' *

# macOS needs to be forced

spyesx

# https://explainshell.com/explain?cmd=convert+-density+200x200+-quality+60+-compress+jpeg+input.pdf+output.pdf
convert -density 200x200 -quality 60 -compress jpeg input.pdf output.pdf

spyesx

apiVersion: v1
data:
  auth: <SECRET>
kind: Secret
metadata:
  name: staging-basic-auth
type: Opaque

spyesx

var cleanStorage = function(){
	console.log('%c Start clean localStorage', 'color: green')
	var myStorage = window.localStorage;
	var ids = Object.keys(myStorage).filter( (key) => {
		return key.slice(0,3) === '5G_'
	})
	ids.forEach( (id) => {
		console.log('clean: '+id)
		window.localStorage.removeItem(id);
	})