June 16, 2022

🗑️ Throwaway Code

Writing code isn't too different from actual construction. You'll have a plan, the blueprint, or ticket(s). It's executed in discrete phases, similar to sprints. And throughout the entire process, we bring tools in/out as required.

So next time you feel inclined to add a bunch of "console.log" statements, or you're looking to debug things, build something... I frequently create a "debugger component" and hide it behind something simple, like a cookie. Below is a simple example using React and TailwindCSS, hope it helps!
⁠⁠
⁠

~/components/AppDebugger.tsx

import * as React from 'react';

import { useBetaFlag } from '@src/hooks/useBetaFlag';

export const AppDebugger = () => {
  // Hooks
  const [open, setOpen] = React.useState(false);
  const isBeta = useBetaFlag();

  // Markup
  const renderContent = () => (
    <div className="rounded-lg border border-solid border-stormy bg-white p-2">
      <p>
        Now we can just build some tooling directly into the application. If you
        have more advanced authentication available you can use that as well.
      </p>
    </div>
  );

  // 🔌 Short Circuit
  if (!isBeta) return null;

  return (
    <div className="fixed right-4 bottom-4 flex flex-col justify-end">
      <button
        className="mb-2 rounded-lg border border-solid border-stormy bg-white p-2"
        onClick={() => setOpen(!open)}
        type="button"
      >
        {open ? '🐛' : '✖️'}
      </button>

      {open && renderContent()}
    </div>
  );
};

~/hooks/useBetaFlag.ts

import { useCookies } from 'react-cookie';
import { COOKIE_BETA } from '~/config/constants';

export const useBetaFlag = (): boolean => {
  const [cookies] = useCookies();
  const isBeta = cookies[COOKIE_BETA];

  return isBeta;
};

~/config/constants.ts

export const COOKIE_BETA = "custom_cookie_name"