alanbsmith

const MyToggleButton = ({ isContentReady, {...props} }) => {
  const modelConfig = {
    isIntiallyToggled: true,
    shouldToggle: (data, state) => {
      if (!iContentReady) {
        return false;
      }
      return true;
    },
    onToggle: (data, prevState) => {

alanbsmith

function eventHandler(...fns) {
  return (e) => {
    fns.forEach(fn => fn(e);
  }
}

function Component({ onClick )) {
  const handler = useClickable();
 

alanbsmith

// generate a random answer for a given range
function setAnswer(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

// find the midpoint for a given range
function getRangeMidpoint(min, max) {
  const count = min + max - 1;
  return Math.ceil(count/2);
}

alanbsmith

Cocktail Starter List

Below are lists of simple cocktails to make at home that often share the same ingredients. If you're getting started, this is a great list to get some classic cocktails under your belt and practice your technique.

Great Starter Cocktails

Gin

• Gin & Tonic - gin / tonic / fresh lime or lemon
• Gimlet - gin / simple syrup / fresh lime

alanbsmith

Peach Thyme Bourbon Cocktail

Infusion

Ingredients

• 2 cups high-proof bourbon (I like Knob Creek)
• 1 peach
• a few small fresh thyme sprigs

alanbsmith

Lemon Scones

Ingredients

• 3 cups all-purpose flour
• ⅓ cup granulated sugar
• 1 tsp salt
• 2 ½ tsp baking powder
• ½ tsp baking soda
• ¾ cup unsalted butter frozen and grated (see post)

alanbsmith

Menu follows the Actions Menu pattern using aria-activedescendant. Below is table of supported keyboard shortcuts and associated actions.

Key	Action
Enter or Space	Activates the menu item and then closes the menu
Escape	Closes the menu
Up Arrow	Moves focus to the previous menu item – if focus is on first menu i

alanbsmith

function sign(name, fontSize = 96) {
  // assumes the id of the canvas element is 'canvas'
  const canvas = document.getElementById('canvas')
  const ctx = canvas.getContext('2d');
  ctx.font = `italic ${fontSize}px Snell Roundhand`;
  const signatureWidth = ctx.measureText(name).width;
  const x = canvas.width/2 - signatureWidth/2;
  const y = canvas.height/2 + fontSize/2;
  ctx.fillStyle = ctx.strokeStyle;
  ctx.fillText(name, x, y);

alanbsmith

Session 1 Walkthrough | June Workshop

Table of Contents

• Session 1 Walkthrough | June Workshop
  • Table of Contents
  • Fork the Codesandbox Template
  • Build a PageHeader
    • Add Initial Header
• Build a Sidebar

alanbsmith

Type Hierarchy Mapping

Main Mapping

Labs Mapping

• { type.body2 } => { type.levels.subtext.medium }