jesstelford

Regular Event Loop

This shows the execution order given JavaScript's Call Stack, Event Loop, and any asynchronous APIs provided in the JS execution environment (in this example; Web APIs in a Browser environment)

---

Given the code

jesstelford

Read Shape Up by basecamp on a kindle / reMarkable / eReader

Basecamp's new book Shape Up is now available online (https://basecamp.com/shapeup) to read page-by-page.

There is a .pdf version, but that's not the best format for Kindle / other eReaders. Instead, we can convert the page-by-page into an eReader friendly format.

Part 1: Convert to a single page

NOTE: This has only been tested on Chrome

jesstelford

Starving the Event Loop with microtasks

"What's the Event Loop?"

Sparked from this twitter conversation when talking about doing fast async rendering of declarative UIs in Preact

These examples show how it's possible to starve the main event loop with microtasks (because the microtask queue is emptied at the end of every item in the event loop queue). Note that these are contrived examples, but can be reflective of situations where Promises are incorrectly expected to yield to the event loop "because they're async".

• setTimeout-only.js is there to form a baseline

jesstelford

Getting started

• Everything except images in a website is text, so it's a lot of reading and writing. As such, it makes sense to use an editor built for the purpose to make your life easier.
• Install Visual Studio Code (VSCode): https://code.visualstudio.com/
  • This is where you'll do all your code editing
  • Really, you only need the text editing portion of the editor, but for all the other features, check out this guide: https://code.visualstudio.com/docs/getstarted/userinterface
• There are 3 main technologies that make up a website: HTML, CSS, JavaScript (JS)

jesstelford

#!/bin/sh
if (( $# < 2 )) || (( $# > 3 ))
then
  echo "$0 <are-in-this-branch> <are-not-in-this-branch> [<url-of-repo>]"
  exit 1
fi
URLPREFIX=
if (( $# == 3 ))
then
  URLPREFIX=$(echo "$3/pull/" | sed -e 's/[\/&]/\\&/g')

jesstelford

Put links inside codeblocks on GitHub:

<pre>
import { assign, map } from '<a href="https://www.npmjs.com/package/lodash" title="Lodash on npm">lodash</a>';

<a href="https://lodash.com/docs#assign" title="assign documentation">assign</a>({ 'a': 1 }, { 'b': 2 }, { 'c': 3 });
// → { 'a': 1, 'b': 2, 'c': 3 } 
<a href="https://lodash.com/docs#map" title="map documentation">map</a>([1, 2, 3], function(n) { return n * 3; });
// → [3, 6, 9] 

jesstelford

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

jesstelford

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

jesstelford

A fork of Capsize used to generate a typographic scale (https://github.com/seek-oss/capsize)

Generate the typographic scale by running generate-typographic-scale.js:

node generate-typographic-scale.js

Add it to your Chakra UI theme under the key typography:

jesstelford

/**
 * NOTE: We use console.error for log output below so that the output can be
 * redirected to a file by the user
 */

const path = require('path');

const entryFile = process.argv[2];

if (!entryFile) {