Rich-Harris

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.

kevinkace

var iteration = 0,
    maxIterations = 200;

function addClass(node, className) {
    var classNameRegex = new RegExp(className, "g");

    node.attrs = node.attrs || {};

    if(!node.attrs.class || !classNameRegex.test(node.attrs.class)) {
        node.attrs.class = node.attrs.class ? node.attrs.class + " " + className : className;

donmccurdy

Moved: Gamepad Support on the Web.

darktrojan

var script = 'data:text/plain,' + encodeURIComponent(`
	var cursors = {
		pointer: 'red',
		text: 'blue'
	};
	var lastEvent;
	var left = 200;
	var top = 0;
	var canvas = content.document.createElementNS('http://www.w3.org/1999/xhtml', 'canvas');
	canvas.width = 800;

dfabulich

1. Save greenwtf.ps1 (included in the gist below) to a directory of your choosing.

2. Copy steam_api.dll to that directory, from the Steamworks SDK 1.34 (that exact version)

3. Create a steam_appid.txt file in that directory, containing an app ID that you own.

4. Launch Steam, logged in as your developer account.

5. Run the script like this:

hsleonis

html {
    /* Adjust font size */
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    /* Font varient */
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    /* Smoothing */
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;

mattdesl

agnostic modules

Most of the modules I write are "agnostic" in that they should work in Node, browserify, webpack, Rollup, jspm... hell, even Unreal.js. It's just ES5, CommonJS and a few quirks like process.nextTick or require('path') (which browserify and webpack will shim).

Other modules are a bit trickier, and need to include a static asset like HTML, GLSL or another file.

In Node you might see this:

var fs = require('fs')

spalladino

# Backup
docker exec CONTAINER /usr/bin/mysqldump -u root --password=root DATABASE > backup.sql

# Restore
cat backup.sql | docker exec -i CONTAINER /usr/bin/mysql -u root --password=root DATABASE

max-mapper

Video stabilization using VidStab and FFMPEG

Examples here use the default settings, see the VidStab readme on GitHub for more advanced instructions.

Here's an example video I made

Install ffmpeg with the vidstab plugin from homebrew

brew install ffmpeg --with-libvidstab

PaulKinlan

#! /bin/bash

mkdir -p ./backgrounds


function get_google_device_art {
  local device=$1
  # Get the Google Device backgrounds
  curl "https://developer.android.com/distribute/marketing-tools/device-art-resources/$1/port_back.png" > "./backgrounds/$1_port_back.png"
  curl "https://developer.android.com/distribute/marketing-tools/device-art-resources/$1/port_fore.png" > "./backgrounds/$1_port_fore.png"