Bill Hance billhance

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

Go vs. Scala (Akka) Concurrency

A comparison from 2 weeks using Go.

Actors vs. Functions

Akka's central principle is that there you have an ActorSystem which runs Actors. An Actor is defined as a class and it has a method to receive messages.

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

Place the supervisord.conf under .ebextensions/supervisor/
Place the supervisor.config under .ebextensions/
Place the data_import_consumer.conf under .ebextensions/supervisor/

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

ANNOUNCEMENT

I have moved this over to the Tech Interview Cheat Sheet Repo and has been expanded and even has code challenges you can run and practice against!

\

How-to setup a simple git push deployment

These are my notes basically. At first i created this gist just as a reminder for myself. But feel free to use this for your project as a starting point. If you have questions you can find me on twitter @thomasf https://twitter.com/thomasf This is how i used it on a Debian Wheezy testing (https://www.debian.org/releases/testing/)

Discuss, ask questions, etc. here https://news.ycombinator.com/item?id=7445545

	exports.handler = function(event, context) {

	var sampleInput = {
	totalPhotos: 496,
	imagesPerLambda: 100,
	bucketName: 'sample-bucket',
	imageSizes: [{
	width: 600,
	height: 400,
	description: 'A medium thumbnail',

	// make a "base" component
	const FakeButton = (props) => (
	<div
	{...props}
	style={{
	cursor: 'default',
	border: '1px solid',
	borderRadius: '3px',
	...props.style
	}}

	{
	"require": {
	"mfacenet/hello-world": "v1.*"
	}
	}