astoilkov

Async Operations with useReducer Hook

9 March, 2019

We were discussing with @erusev what we can do with async operation when using useReducer() in our application. Our app is simple and we don't want to use a state management library. All our requirements are satisfied with using one root useReducer(). The problem we are facing and don't know how to solve is async operations.

In a discussion with Dan Abramov he recommends Solution 3 but points out that things are fresh with hooks and there could be better ways of handling the problem.

Problem

paulirish

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

ericelliott

Essential JavaScript Links

I no longer mantain this list. There are lots of other very comprehensive JavaScript link lists out there. Please see those, instead (Google "awesome JavaScript" for a start).

PatrickJS

var EventEmitter = require('events').EventEmitter;
var _ = require('lodash');

// Factory shared
var makePerson = function() {
  var person = {};
  EventEmitter.call(person);
  person.wallet = 0;
  _.extend(person, personMethods)
  return person;

demisx

Provider	Singleton	Instantiable	Configurable
Constant	Yes	No	No
Value	Yes	No	No
Service	Yes	No	No
Factory	Yes	Yes	No
Decorator	Yes	No?	No
Provider	Yes	Yes	Yes

Constant

hemanth

#!/usr/bin/env bash
# Setup script for hacking chrome devtools
# Source -> https://medium.com/p/8c8896f5cef3

echo "Creating folder and initialize a git repo"
mkdir devtools-frontend && cd devtools-frontend
git init

echo "Adding chromium remote and initialize sparse checkout"
git remote add upstream https://chromium.googlesource.com/chromium/blink

Gaya

module.exports = function(grunt) {
	// Project configuration.
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		concat: {
			options: {
				separator: "\n", //add a new line after each file
				banner: "", //added before everything
				footer: "" //added after everything
			},

tomas-stefano

Capybara Actions

# Anchor
click_link 'Save'

# Button
click_button 'awesome'

# Both above

addyosmani

stopBefore.js

2min screencast

Examples

stopBefore(document, 'getElementById')
stopBefore('document.getElementById') // the same as the previous
stopBefore(Element.prototype, 'removeChild')

addyosmani

Update May 2017

Eric Bidelman has documented some of the common workflows possible with headless Chrome over in https://developers.google.com/web/updates/2017/04/headless-chrome.

Update

If you're looking at this in 2016 and beyond, I strongly recommend investigating real headless Chrome: https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md

Windows and Mac users might find using Justin Ribeiro's Docker setup useful here while full support for these platforms is being worked out.