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:

tannerlinsley

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]) {

jamiebuilds

assert() (sometimes called invariant())

Instead of checks like:

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

msukmanowsky

// 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,
    }

Yuyz0112

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';

greglockwood

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);
};

mwdchang

[
   {
   "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"
   },
   {

maisano

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}>

dragonfax

// ==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==

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

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.

---