Dizzle developerdizzle

Auto-deploying built products to gh-pages with GitHub Actions

This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.

A file below this one contains the steps for doing this with Travis CI. However, these days I recommend GitHub Actions, for the following reasons:

It is much easier and requires less steps, because you are already authenticated with GitHub, so you don't need to share secret keys across services like you do when coordinate Travis CI and GitHub.
It is free, with no quotas.
Anecdotally, builds are much faster with GitHub Actions than with Travis CI, especially in terms of time spent waiting for a builder.

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

pure() can be used as a higher order function or a decorator.

When passed a pure functional component, it wraps the function in a classful Component with a shouldComponentUpdate() that ignores renders for unchanged props.

When passed a classful Component, it injects a shouldComponentUpdate() method into the Component's prototype that ignores renders for unchanged props & state.

Functional Example

import pure from 'pure-component';

	Drop in replace functions for setTimeout() & setInterval() that
	make use of requestAnimationFrame() for performance where available
	http://www.joelambert.co.uk

	Copyright 2011, Joe Lambert.
	Free to use under the MIT license.
	http://www.opensource.org/licenses/mit-license.php

	/* *******************************************************************************************
	* THE UPDATED VERSION IS AVAILABLE AT
	* https://github.com/LeCoupa/awesome-cheatsheets
	* ******************************************************************************************* */


	// 0. Synopsis.
	// http://nodejs.org/api/synopsis.html

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title>Scroll Test</title>

	<style>

	* {