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, gatheringArray = []) {
  folders.forEach(folder => {
    const {children, ...rest} = folder

    gatheringArray.push(rest)

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

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 useForceUpdate() {
  const [, setState] = React.useState(true)
  return () => setState(s => !s)
}

function Toggle() {
  const forceUpdate = useForceUpdate()
  const value = React.useRef(false)
  
  const handleClick = () => {

kyleshevlin

// Part of my Othello code, no idea if this is the _best_ way to solve this,
// but it's part of my solution

// `grid` is in the parent scope how I write/use this function
function findPiecesToChange(acc, x, y, run, rise) {
  const nextX = x + run
  const nextY = y + rise
  const cell = grid[nextY] && grid[nextY][nextX]

  if (!cell) {

kyleshevlin

// This component has the prop `children`
// In a universe of infinite possibilities,
// the only limit is that `children` is inside
// the `div`. There are no other limits.
function Wrap({ children }) {
  return <div>{children}</div>
}

const BOX_SIZES = {
  small: 100,

kyleshevlin

function Script() {
  return (
    <script
      dangerouslySetInnerHTML={{ __html: `(${setCSSVars.toString()})()` }}
    />
  )
}

function setCSSVars() {
  const theme = localStorage.getItem('kyleshevlin:theme') || 'light'

kyleshevlin

const NEXT_DOTS = {
  '': '.',
  '.': '. .',
  '. .': '. . .',
  '. . .': '',
}

function Dots() {
  const [dots, setDots] = React.useState('')