kyleshevlin

const submitEvent = {
  SUBMIT: [
    {
      target: 'submitting',
      cond: 'isValidData',
    },
    { target: 'error' },
  ],
}

kyleshevlin

// One of my favorite things about using Emotion for CSS-in-JS is the
// ability to put nested CSS selectors write into my components.
// Ignoring my use of `bs()` from my ShevyJS library (it just mathematically
// calculates spacing based on my vertical rhythm config), this is such
// a simple way to tell this div to space these links out if they're both
// present. I love it.

function MyComponent() {
  return (
    // ... lots of other code

kyleshevlin

// Let's learn higher order functions, currying, and partial application
// with a simple, yet useful example

// It's a nice UI touch is to dynamically change a word in a phrase from
// singular to plural based on the quantity of that item

// 4 cats
// 0 dogs
// 1 human
 

kyleshevlin

// This code solves a problem, but it doesn't tell me _what_ the problem is
// or _why_ I need to stop propagation. In the long run, someone
// will come across this code and have no idea why it's written this way

function handleItemSelection(event) {
  event.stopPropagation()
  selectItem(assetId)
}

// Here's my solution, one additional function, a small indirection that

kyleshevlin

// Naming things based on what they do means we don't have to change
// the name when we change the implementation details

function applyDiscountToItems(items) {
  return items.map(item => ({
    ...item,
    price: item.price * .75
  }))
}

kyleshevlin

const VIEWS = {
  FULL: 'FULL',
  SIDE: 'SIDE'
}

const itemMachine = Machine({
  id: 'item',
  context: {
    view: VIEWS.SIDE,
  },

kyleshevlin

const designerSubChart = {
  initial: 'standard',
  states: {
    standard: {
      on: {
        '': {
          target: 'readOnly',
          cond: 'hasReadOnlyParam'
        },
        ENTER_PREVIEW: 'preview',

kyleshevlin

const itemMachine = Machine(
  {
    id: "item",
    context: {
      view: "SIDE",
    },
    on: {
      SELECT_ALL: "forSelection.selected",
      SET_VIEW: {
        target: ["forHover.idle", "forSelection.unselected"],

kyleshevlin

const getBooleanTable = number => Array(Math.pow(2, number))
  .fill()
  .map((_, idx) => idx)
  .map(num => num.toString(2).padStart(number, '0'))
  .map(stringOfBits =>
    stringOfBits.split('').map(bit => Boolean(parseInt(bit)))
  )

console.log(getBooleanTable(3))

kyleshevlin

import React from 'react'

export default SimpleForm () {
  const [value, setValue] = React.useState('')
  
  const handleSubmit = e => {
    e.preventDefault()
    console.log(value)
  }