Jeremiah Naylor-Trein jtrein

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

How to setup AWS lambda function to talk to the internet and VPC

I'm going to walk you through the steps for setting up a AWS Lambda to talk to the internet and a VPC. Let's dive in.

So it might be really unintuitive at first but lambda functions have three states.

No VPC, where it can talk openly to the web, but can't talk to any of your AWS services.
VPC, the default setting where the lambda function can talk to your AWS services but can't talk to the web.
VPC with NAT, The best of both worlds, AWS services and web.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

The 0.13.0 improvements to React Components are often framed as "es6 classes" but being able to use the new class syntax isn't really the big change. The main thing of note in 0.13 is that React Components are no longer special objects that need to be created using a specific method (createClass()). One of the benefits of this change is that you can use the es6 class syntax, but also tons of other patterns work as well!

Below are a few examples creating React components that all work as expected using a bunch of JS object creation patterns (https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/ch4.md#mixins). All of the examples are of stateful components, and so need to delegate to React.Component for setState(), but if you have stateless components each patterns tends to get even simpler. The one major caveat with react components is that you need to assign props and context to the component instance otherwise the component will be static. The reason is

	let UserContext = React.createContext();

	class App extends React.Component {
	state = {
	user: null,
	setUser: user => {
	this.setState({ user });
	}
	};

	# Dont forget to set the env variable "certdomain", and either fill in your email below or use an env variable for that too.
	# Also note that this config is using the LetsEncrypt staging server, remove the flag when ready!

	Resources:
	sslSecurityGroupIngress:
	Type: AWS::EC2::SecurityGroupIngress
	Properties:
	GroupId: {"Fn::GetAtt" : ["AWSEBSecurityGroup", "GroupId"]}
	IpProtocol: tcp
	ToPort: 443

	var webpack = require('webpack');
	var HtmlWebpackPlugin = require('html-webpack-plugin');
	var path = require('path');
	var folders = {
	APP: path.resolve(__dirname, '../app'),
	BUILD: path.resolve(__dirname, '../build'),
	BOWER: path.resolve(__dirname, '../bower_components'),
	NPM: path.resolve(__dirname, '../node_modules')
	};

	package main

	import (
	"fmt"
	"log"
	"net"
	"net/mail"
	"net/smtp"
	"crypto/tls"
	)

	/* Polyfill indexOf. */
	var indexOf;

	if (typeof Array.prototype.indexOf === 'function') {
	indexOf = function (haystack, needle) {
	return haystack.indexOf(needle);
	};
	} else {
	indexOf = function (haystack, needle) {
	var i = 0, length = haystack.length, idx = -1, found = false;