Chang Wang cheapsteak

On reusable components API design

Let’s compare the different ways Space Kit’s is implemented vs Chakra’s .

Starting with the base case:

Instead of checks like:

if (value === null) {
  throw new Error("missing value")
}
doSomethingThatNeedsValue(value)

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

	import { BroadcastChannel, createLeaderElection } from 'broadcast-channel'
	import React from 'react'

	const channels = {}

	export function useBroadcastLeader(id = 'default') {
	const [isBroadcastLeader, setIsBroadcastLeader] = React.useState(false)

	React.useEffect(() => {
	if (!channels[id]) {

	// middleware.js

	exports.filesUpload = function(req, res, next) {
	// See https://cloud.google.com/functions/docs/writing/http#multipart_data
	const busboy = new Busboy({
	headers: req.headers,
	limits: {
	// Cloud functions impose this restriction anyway
	fileSize: 10 * 1024 * 1024,
	}

	const sessionId = Cypress.env('sessionId');
	const appFrame = window.parent.document.querySelectorAll('iframe')[0];

	Cypress.on('window:load', () => {
	appFrame.contentWindow.eval(`
	const request = new XMLHttpRequest();
	request.open('GET', 'https://cdn.jsdelivr.net/npm/rrweb@0.7.4/dist/rrweb.min.js', false);
	request.send('');
	const script = document.createElement('script');
	script.type = 'text/javascript';

	const print = (param, ...args) => {
	console.log(param, ...args);
	return param;
	};

	const traceFn = (fn, context) => function () {
	console.trace(`${fn.name} called with arguments: `, arguments);
	return fn.apply(context \|\| this, arguments);
	};

	[
	{
	"cmd": "ssh -D9002 proxy-something.lalala.com",
	"des": "SOCK5 Proxy to proxy-something"
	},
	{
	"cmd": "ssh -D9003 proxy-something-else.lalala.com",
	"des": "SOCK5 Proxy to hproxy-dev"
	},
	{

	import React, { PropTypes } from 'react';
	import { TransitionMotion, spring } from 'react-motion';

	/**
	* One example of using react-motion (0.3.0) within react-router (v1.0.0-rc3).
	*
	* Usage is simple, and really only requires two things–both of which are
	* injected into your app via react-router–pathname and children:
	*
	* <RouteTransition pathname={this.props.pathname}>

	// ==UserScript==
	// @name Monster Minigame Auto-script
	// @namespace https://github.com/wchill/steamSummerMinigame
	// @description A script that runs the Steam Monster Minigame for you. Modified from mouseas's original version to include autoclick.
	// @version 1.0
	// @match http://steamcommunity.com/minigame/towerattack*
	// @updateURL https://raw.githubusercontent.com/wchill/steamSummerMinigame/master/autoPlay.js
	// @downloadURL https://raw.githubusercontent.com/wchill/steamSummerMinigame/master/autoPlay.js
	// ==/UserScript==