PatrickJS

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.

PatrickJS

/* eslint-disable no-param-reassign */
const path = require('path');
const fse = require('fs-extra');

class LoadablePlugin {
    constructor({ filename = 'loadable-stats.json', writeToFileEmit = false } = {}) {
        this.opts = { filename, writeToFileEmit };
    }

    apply(compiler) {

PatrickJS

function logger(strings,...values) {
	var str = "";
	for (let i = 0; i < strings.length; i++) {
		if (i > 0) {
			if (values[i-1] && typeof values[i-1] == "object") {
				if (values[i-1] instanceof Error) {
					if (values[i-1].stack) {
						str += values[i-1].stack;
						continue;
					}

PatrickJS

AWS region code	AWS region name	Number of AZs	AZ names
us-east-1	Virginia	4	us-east-1a, us-east-1b, us-east-1c, us-east-1e
us-west-1	N. California	2	us-west-1a, us-west-1b
us-west-2	Oregon	3	us-west-2a, us-west-2b, us-west-2c
eu-west-1	Ireland	3	eu-west-1a, eu-west-1b, eu-west-1c
eu-central-1	Frankfurt	2	eu-central-1a, eu-central-1b
ap-southeast-1	Singapore	2	ap-southeast-1a, ap-southeast-1b
ap-southeast-2	Sydney	2	ap-southeast-2a, ap-southeast-2b, ap-southeast-2c
ap-northeast-1	Tokyo	2	ap-northeast-1a, ap-nort

PatrickJS

addEventListener('fetch', event => {
  event.respondWith(fetchAndCheckPassword(event.request))
})

async function fetchAndCheckPassword(req) {
  if (req.method == "POST") {
    try {
      const post = await req.formData();
      const pwd = post.get('password')
      const enc = new TextEncoder("utf-8").encode(pwd)

PatrickJS

addEventListener('fetch', event => {
  event.respondWith(fetchAndCheckOrigin(event.request))
})

async function fetchAndCheckOrigin(req) {
  try {
    startTime = new Date();
    const body = await req.body;
    const ip = req.headers.get('cf-connecting-ip');
    const es = req.headers.get('cf-ipcountry');

PatrickJS

Scaling your API with rate limiters

The following are examples of the four types rate limiters discussed in the accompanying blog post. In the examples below I've used pseudocode-like Ruby, so if you're unfamiliar with Ruby you should be able to easily translate this approach to other languages. Complete examples in Ruby are also provided later in this gist.

In most cases you'll want all these examples to be classes, but I've used simple functions here to keep the code samples brief.

Request rate limiter

This uses a basic token bucket algorithm and relies on the fact that Redis scripts execute atomically. No other operations can run between fetching the count and writing the new count.

PatrickJS

In this gist I would like to describe an idea for GraphQL subscriptions. It was inspired by conversations about subscriptions in the GraphQL slack channel and different GH issues, like #89 and #411.

Conceptual Model

At the moment GraphQL allows 2 types of queries:

• query
• mutation

Reference implementation also adds the third type: subscription. It does not have any semantics yet, so here I would like to propose one possible semantics interpretation and the reasoning behind it.

PatrickJS

#! /usr/bin/env node
// I am ./bin/buildSitemap.js

const path = require('path')
const glob = require('glob')
const fs = require('fs')

const SITE_ROOT = process.env.SITE_ROOT || 'https://www.actionherojs.com'
const SOURCE = process.env.SOURCE || path.join(__dirname, '..', 'pages', '/**/*.js')
const DESTINATION = process.env.DESTINATION || path.join(__dirname, '..', 'static', 'sitemap.xml')

PatrickJS

Tutorial: Designing a GraphQL API

This tutorial was created by Shopify for internal purposes. We've created a public version of it since we think it's useful to anyone creating a GraphQL API.

It's based on lessons learned from creating and evolving production schemas at Shopify over almost 3 years. The tutorial has evolved and will continue to change in the future so nothing is set in stone.