Casey First Lesson Notes

casey-first-lesson-notes.md

Main issue

• Why doesn't setting the cookie in the auth middleware work?

My Sleuthing

• If res.cookie("spotify", token) works in spotifyAuthRouter, why not the middleware?
  • AH! It's because the connect call is made through href
• Could this possibly be the issue? (missing 'credentials: include')
  • https://stackoverflow.com/a/42735038/3225108
• setting axios credentials flag
  • https://stackoverflow.com/a/43178070/3225108
  • https://axios-http.com/docs/req_config

Main Improvements

• setup prettier https://prettier.io/
• don't use nested promises
  • multiple fixes, async / await probably preferred
  • https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html
• missing eslint on the server
  • converting to npm workspace will fix this, more on that below

Small Improvements

• remove redunant ternaries
  • a = b ? b : c -> a = b || c
  • a = b ? c : b -> a = b && c
• use optional chaining
  • a && a.b -> a?.b
• more consisent usage of object shorthand
  • { a: a } -> { a }
• use tailwind class sorting via prettier
  • https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
• setup absolute imports
  • https://dev.to/andrewezeani/how-to-create-absolute-imports-in-vite-react-app-a-step-by-step-guide-28co
• shouldn't use nested ternaries in JSX
  • this may be personal preference, but it's a rule I enforce

Setting Up Globals

• Put things like environment variables in a single place and import them

// config.js
import dotenv from 'dotenv'
dotenv.config()

export default {
  jwtSecret: process.env.JWT_SECRET
}
...
import config from './config'
config.jwtSecret

Put Fail Cases First

• why? possibly improved readabiliy, definitely improved debugging
• code execution will be linear, matching the way the function is written

// fail case last
if (a && b) {
  return a > b;
}
return false;

// fail case first
if (!a || !b) return false;
return a > b;

• If it's a lot of variables you could write this as:

if ([a, b, c, d].some((x) => !x)) return false;

You can make a helper function for this:

function checkFalsey(...args) {
  return args.some((x) => !x);
}

if (checkFalsey(a, b, c, d)) return false;

This is true for JSX too:

// fail case first
if (!loggedIn()) return <Component />;
return <App />;

UX Improvements

• visual event & error handling
  • currently I'm only seeing console.log(error)
  • ex: loading spinners, toast notifications

Debugging notes

• use lsof to check for open ports
• don't re-use npm script names
• use different console.log titles to be more clear where issues are arising

  // use numbers
  console.log(123, value);
  // use object shorthant
  console.log({ value });

Longer term things

• the repo currently has a hybrid workspace, make it a proper workspace
  • server should have its own package json
  • https://docs.npmjs.com/cli/v7/using-npm/workspaces
• switching to TypeScript
  • https://www.typescriptlang.org/
• know all your array methods
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
• lodash familiarity
  • https://lodash.com/docs/4.17.15
• FP familiarity (Mostly Adequate Guide)
  • https://mostly-adequate.gitbook.io/mostly-adequate-guide/
• Join a programming community group like Toronto JS (slack)
  • https://torontojs.com/
• cyclomatic complexity (aka nesting)
  • https://en.wikipedia.org/wiki/Cyclomatic_complexity

remove redunant ternaries
a = b ? b : c -> a = b || c

i recommend the nullish coalescing operator. it more accurately represents the intention of most cases. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing (careful refactoring code with it, because falsey values like 0 and '' will behave differently)

shouldn't use nested ternaries in JSX
this may be personal preference, but it's a rule I enforce

agree. but it's less a style issue and more likely a symptom of your component having too many boolean props.

recommend refactoring the component to accept a variant prop which accepts a descriptive string enum.
see https://chakra-ui.com/docs/components/alert for example. they use two different variant props, status and variant. this example's variants are mostly style related, but hopefully you can see how to extend this idea into interactive or rendering logic.

@soojeen 🙏