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

kyleshevlin

const hexagons = ({
  fill = COLORS.white.replace('#', ''),
  opacity = 0.08,
  width = 28,
}) => {
  const height = (width * 49) / 28

  return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${width}' height='${height}' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23${fill}' fill-opacity='${opacity}' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")
`
}