Forrest O. forresto

From zero to microservice with 𝚫 now

The following guide will show you how to deploy a simple microservice written in JavaScript using 𝚫 now.

It uses Open Source tools that are widely available, tested and understood:

Node.JS
NPM
Express

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

#!/usr/bin/env bash

# Assuming OS X Yosemite 10.10.4

# Install XCode and command line tools
# See https://itunes.apple.com/us/app/xcode/id497799835?mt=12#
# See https://developer.apple.com/library/mac/documentation/Darwin/Reference/ManPages/man1/xcode-select.1.html
xcode-select --install

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.

	// Disable smooth scrolling for users who have set `prefers-reduced-motion` in their operating system

	// 1. Place this snippet before the end of the <body> tag;
	// NOT in the <head> tag!
	// 2.Make sure it's inside $(function() {})!

	$(function() {
	const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
	if (mediaQuery.matches) $(document).off('click.wf-scroll');
	})

	const html = require('choo/html')
	const css = require('sheetify')

	// first we import all of tachyons, it's a design system and the class names
	// are the interface
	css('tachyons')

	// Then we define some of our variables. This is just to show these values can
	// be interpolated. Realistically only colors really have to be declared here
	// as they're re-used. Almost all other values will only be declared once

	import Html exposing (..)
	import Keyboard
	import Window exposing (Size)
	import AnimationFrame

	import Task
	import Html.App as App

	import Collage exposing (..)
	import Element exposing (..)

	c = new noflo.Component
	c.desciption = 'A component that posts on behalf of user'
	c.inPorts = new noflo.InPorts
	timeout:
	datatype: 'int'
	control: true
	user:
	datatype: 'object'
	post:
	datatype: 'object'

	{
	"properties": {
	"name": "Clock Example",
	"environment": {
	"type": "noflo-browser",
	"content": "<div class='area' title='.area'><img id='clock' src='http://i.meemoo.me/v1/in/GJPUFPc8ThuRp9itdXC9_clock-face.png' style='position:absolute; width:300px; height:300px;' /><img id='hours' src='http://i.meemoo.me/v1/in/fRL213GT1uCRltIqXkK2_clock-hours.png' style='position:absolute; top:50px; left:130px; height:200px;' /><img id='minutes' src='http://i.meemoo.me/v1/in/23DZFKYoRTOIAjPA7sed_clock-minutes.png' style='position:absolute; top:0; left:140px; height:300px;' /><img id='seconds' src='http://i.meemoo.me/v1/in/VU2HqPmuTqucRpnUGGBj_clock-seconds.png' style='position:absolute; top:0; left:145px; height:300px;' /></div>",
	"width": 300,
	"height": 300
	}
	},