Marius Bleuer mbleuer

Angular CLI version	Angular version	Node.js version	TypeScript version	RxJS version
~16.0.0	~16.0.0	^16.13.0 \|\| ^18.10.0	>=4.9.5 <5.1.0	^6.5.5 \|\| ^7.4.0
~15.2.0	~15.2.0	^14.20.0 \|\| ^16.13.0 \|\| ^18.10.0	>=4.8.4 <5.0.0	^6.5.5 \|\| ^7.4.0
~15.1.0	~15.1.0	^14.20.0 \|\| ^16.13.0 \|\| ^18.10.0	>=4.8.4 <5.0.0	^6.5.5 \|\| ^7.4.0
~15.0.5	~15.0.4	^14.20.0 \|\| ^16.13.0 \|\| ^18.10.0	~4.8.4	^6.5.5 \|\| ^7.4.0
~14.3.0	~14.3.0	^14.15.0 \|\| ^16.10.0	>=4.6.4 <4.9.0	^6.5.5 \|\| ^7.4.0
~14.2.0	~14.2.0	^14.15.0 \|\| ^16.10.0	>=4.6.4 <4.9.0	^6.5.5 \|\| ^7.4.0
~14.1.3	~14.1.3	^14.15.0 \|\| ^16.10.0	>=4.6.4 <4.8.0	^6.5.5 \|\| ^7.4.0
~14.0.7	~14.0.7	^14.15.0 \|\| ^16.10.0	>=4.6.4 <4.8.0	^6.5.5 \|\| ^7.4.0
~13.3.0	~13.3.0	^12.20.2 \|\| ^14.15.0 \|\| ^16.10.0	>=4.4.4 <4.7.0	^6.5.5 \|\| ^7.4.0

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

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

	<link rel="shortcut icon" width=32px>
	<canvas style="display: none" id="loader" width="16" height="16"></canvas>

	<script>
	class Loader {
	constructor(link, canvas) {
	this.link = link;
	this.canvas = canvas;
	this.context = canvas.getContext('2d');
	this.context.lineWidth = 2;

	function isWin10S() {
	try {
	var mode = JSON.parse(window.external.getHostEnvironmentValue('os-mode'));
	if (mode && mode['os-mode'] === '2') {
	return true;
	}
	return false;
	} catch(e) {
	return false;
	}

	function decorate(tag, template) {
	customElements.define(tag, class extends HTMLElement {
	constructor() {
	super();
	this.attachShadow({ mode: 'open' });
	}

	connectedCallback() {
	let root = this.shadowRoot;
	if(!root.firstChild) {

	Jeff Escalante

	# Dato & Contentful

	There are many areas in which I'd consider Dato to be much stronger of a CMS than
	contentful, and one in which I'd consider the opposite to be the case. I will try to be as
	balanced as possible with this overview, as I am not employed by dato or anything ‐ my
	goal is to ensure that my clients and developers get the best possible experience working
	with a CMS.

	// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating

	// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel

	// MIT license

	(function() {
	var lastTime = 0;
	var vendors = ['ms', 'moz', 'webkit', 'o'];