June 16, 2022🗑️ 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!
~/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"