June 16, 2022
🗑️ Throwaway Code

🗑️ Throwaway Code

🗑️ Throwaway Code

June 16, 2022

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!


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">
        Now we can just build some tooling directly into the application. If you
        have more advanced authentication available you can use that as well.

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

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

      {open && renderContent()}


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;


export const COOKIE_BETA = "custom_cookie_name"