sbussard

#!/usr/bin/env bash

BUILD_DIR=build

git checkout -b _build_staging_
git add -f $BUILD_DIR
git commit -am add_build_ouput
git subtree split --prefix $BUILD_DIR -b gh-pages
git push origin gh-pages -f
git checkout -

sbussard

Let's say you have a list of items, and something to do with each item. You want to be able to tell the system when to do the thing on an item, and to be able to select what item to do the thing on. For convenience sake, you want to be able to choose the next item or the previous item, or any item in the list (by index of course). 

The difference between this and a reducer, for example, is that this system provides an interface for outside interaction. 

Right now the class assumes that the list of items are dom elements, children of some parent element, and the task to be applied is toggling a css class. This is already useful for a wide variety of applications, including carousels, image sliders and slide shows. But essentially it only works on the front end. 

sbussard

import AWS from 'aws-sdk/global';
import S3 from 'aws-sdk/clients/s3';
import {
  AuthenticationDetails,
  CognitoUser,
  CognitoUserPool,
} from 'amazon-cognito-identity-js';

const REGION = 'some-string-value';
const USER_POOL_ID = 'some-string-value';

sbussard

from mcpi import minecraft
from mcpi import block
from minecraftstuff import MinecraftTurtle
from random import randint
import time
import os.path, sys

mc = minecraft.Minecraft.create(address="158.69.221.37", name="steve")

block_air = 0

sbussard

// given a form element
// get its children that have a name attribute
// map to { name, value } objects
// reduce individual into one { [name]: value } object

export default formElement => Array.from(formElement.querySelectorAll('[name]'))
  .map(({ name, value }) => ({ name, value }))
  .reduce((current, item) => ({ ...current, [item.name]: item.value }), {});

sbussard

open https://youtu.be/rfMC2aVhYuo?t=39s

sbussard

let itemData = [
  { name: 'Chair', price: '$199', id: 'abc123' },
  { name: 'Table', price: '$799', id: 'def456' }
];

let ItemList = ({ items }) => (
  <ul>
    {items.map(({ name, price, id }) => (
      <li key={id}>{`${name} - ${price}`}</li>
    ))}

sbussard

let itemData = [
  { name: 'Chair', price: '$199', id: 'abc123' },
  { name: 'Table', price: '$799', id: 'def456' }
];

let Item = ({ description, id }) => <li key={id}>{description}</li>;

let makeProps = ({ name, price, id }) => ({
  id,
  description: `${name} - ${price}`

sbussard

/*

	Author: Stephen Bussard
	Twitter: @sbussard

*/

var sin = Math.sin,
	cos = Math.cos,
	tan = Math.tan,

sbussard

import React, { useState } from "react";

let ChildComponent = ({ setRef }) => <div ref={setRef}>{/* content */}</div>;

let ParentComponent = () => {
  let [ref, setRef] = useState();

  useEffect(() => {
    if (ref) {
      // whatever you want to use ref for