kyleshevlin

// The gotcha
function List({ items }) {
  return (
    items.length && items.map((item) => <Item key={item.id} item={item} />)
  );
}

// What will happen when the length of `items` is 0?

// It'll render a 0 as text in a Text Node, because JSX has to be able

kyleshevlin

function getInitialValues({
  thing,
  slug,
}): {
  return {
    _id: thing?._id ?? "",
    birb: thing?.workingThing?.birb
      ? JSON.parse(thing?.workingThing?.birb)
      : undefined,
    doge: thing?.workingThing?.doge ?? "",

kyleshevlin

import React from 'react'

const WIDTH = 20
const HEIGHT = 14
const CX = WIDTH / 3
const CY = HEIGHT / 2
const RADIUS = 2

export default function Tag({ fill = 'black', width = WIDTH }) {
  const height = HEIGHT * (width / WIDTH)

kyleshevlin

// Sometimes you'll have a component that you want to allow the consumer
// to render a different HTML element for semantic purposes. Use an `as`
// prop and a facade pattern to make it happen.

export function CallToAction({as = 'button', ...props}) {
  return <CallToActionFacade as={as} {...props} />
}

function CallToActionFacade({ as, ...props }) {
  switch (as) {

kyleshevlin

// I'm reading SICP at the moment, and they use a LISP called Scheme.
// In a LISP based language, the function or operator is in the "prefix" position
// To add numbers, you first write the operator `+` (hence prefix, it comes first)
// and then the arguments.
//
// In JavaScript, many of our operators come in the "infix" position, that is in the
// middle of two arguments. This limits how many arguments we can give that operation.
//
// What's nice about the prefix position is that you can then give the expression
// as many arguments as you would like and it will apply the operation to all of those

kyleshevlin

// I see this mistake often (and have made it myself before)
// What's the bug with this function?

function isFavSeason(season) {
  return season === 'spring' || 'summer' ? 'yes' : 'no'
}

// Let's try it and find out
console.log(isFavSeason('spring')) // yes
console.log(isFavSeason('summer')) // yes

kyleshevlin

// Run this in your console with whatever `newColors` you choose.
function recolorContributionGraph(newColors) {
  const days = [...document.querySelectorAll('.day')]
  const legendItems = [...document.querySelectorAll('.legend > li')]
  const colors = [
    ...days.reduce((acc, day) => {
      acc.add(day.getAttribute('fill'))
      return acc
    }, new Set()),
  ]

kyleshevlin

import React from 'react'

export default function PrismHack() {
  React.useEffect(() => {
    const diffs = [...document.querySelectorAll('.language-diff-javascript')]

    diffs.forEach(diff => {
      diff.setAttribute('class', 'language-diff-javascript diff-highlight')
    })
  }, [])

kyleshevlin

function flattenFolderTree(folders) {
  return folders.reduce((acc, folder) => {
    const {children, ...rest} = folder;

    if (!children || !children.length) {
      return [...acc, rest];
    }

    return [...acc, rest, ...flattenFolderTree(children)];
  }, []);

kyleshevlin

function flattenFolderTree(folders, gatheringArray = []) {
  folders.forEach(folder => {
    const {children, ...rest} = folder

    gatheringArray.push(rest)

    if (children && children.length) {
      flattenFolderTree(children, gatheringArray)
    }
  })