All Articles

const intervalRef = useRef(null)

const resetGame = useCallback(() => {
  clearInterval(intervalRef.current)
}, [])

<Pressable
  accessibilityRole="button"
  accessibilityLabel="Submit form"
  onPress={handlePress}
/>

const { userId } = useLocalSearchParams()

useEffect(() => {
  getUserDetails(userId).then(setUser)
}, [userId])

export const resources = {
  en, fr,
} as const

type Locale = keyof typeof resources

// arrow: 'this' is always the class
logName = () => console.log(this.name)

// function: 'this' depends on caller
logName() { console.log(this.name) }

if (true) {
  var x = 1
}
console.log(x) // 1, var leaks out!

const Btn = ({ onClick, children }) => (
  <button onClick={onClick}>
    {children}
  </button>
)

<SectionWithHeading
  headingID="about"
  headingTitle="About"
  headingLevel={2}
/>

const logger = () => console.log('yo!')
const theJoeCodes = () => logger()

theJoeCodes()
// call stack: theJoeCodes → logger → log

localStorage.setItem('thejoecodes', '123')

window.addEventListener('storage', () => {
  console.log(localStorage.getItem('thejoecodes'))
})

const xmas = christmasChallenge()
// 5 puzzles to unlock 🎅
xmas.santaSecretPassPhrase('???')
xmas.giveSantaFood('???')

const next = themeColors[index].trim()
body.setAttribute('dark-theme-color', next)

const urls = routes.map(r => `${baseUrl}${r}`)

await Promise.all(
  urls.map(url => $`npx axe ${url}`)
)

<Emoji emoji="✋" label="high five" />
// <span role="img" aria-label="high five">✋</span>

<img src={src} /> // missing alt prop

Host github-work
  IdentityFile ~/.ssh/id_work

Host github-personal
  IdentityFile ~/.ssh/id_personal

@mixin responsive($type) {
  @if $type == mobileMinMax {
    @media (max-width: 800px) { @content; }
  }
}

.rem { padding: 1rem; }  /* bad: scales with font */
.px  { padding: 16px; }  /* good: always 16px */
p    { font-size: 1rem; } /* good: rem is right here */

<button aria-label="Hide emoji">X</button>
<img src={src} alt="Red warning sign" />
<input aria-required="true" aria-label="Name" />

while (!valid) {
  await askDirectoryName({ ui })
    .then(val => { valid = true; dir = val })
}

let val: unknown = getData()

if (typeof val === 'string') {
  console.log(val.toUpperCase())
}

'The Joe Codes'.split(' ')     // ['The', 'Joe', 'Codes']
'The Joe Codes'.includes('Joe') // true

const el = document.getElementById('app')
renderLoader(el)
const data = await fetchUsers()
el.innerHTML = createHtml(data)

promiseAddOne(value)
  .then(val => promiseMultiplyByTwo(val))
  .then(val => promiseDivideByTen(val))
  .then(val => console.log(val))

@mixin button($padding: 0.75rem) {
  padding: $padding;
  border-radius: 8px;
}
.primary { @include button; }

console.log('👻')
setTimeout(() => console.log('🎃'), 0)
// ^ runs last, not second!