June 16, 2022

Throwaway Code

Writing code isn't all that different from traditional construction. They both require, time, resources, and planning. Both are 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"