jawad-console

My developer easter egg for the browser console. Open DevTools on jawad.work and you're greeted by an on-brand banner — my OG image, a wordmark, and a tagline — plus a set of bare commands a curious recruiter or engineer can run. Just type the word and press Enter — no prefix, no ():

resume    → open my resume in a new tab
contact   → email + social links
hire      → open the hire flow and print the steps
help      → reprint the menu

Each command is a global getter, so evaluating the word fires it. (DevTools eager-evaluation previews expressions side-effect-free, so nothing runs until you actually press Enter.) The same actions are also available as methods on a back-compat window.jawad object — jawad.resume() — for anyone who prefers that.

This package is hardcoded for me. It takes no configuration — there's nothing to pass in. It's published mostly as a "show off my code" artifact; everything it renders and links to lives in src/profile.ts, and the banner image is embedded in the bundle (no network request, works offline and behind any CSP). To make it yours you'd fork it and edit that file.

Install

npm i jawad-console

Usage

Any site (vanilla)

import { mountConsole } from "jawad-console";

mountConsole();

mountConsole() takes no arguments. It no-ops during SSR and if called more than once, so it's safe to drop into any entry point.

Astro

---
import ConsoleCard from "jawad-console/astro";
---
<ConsoleCard />

The component renders no visible markup — it boots the console on the client.

How it works

The three banner rows are each drawn to a <canvas> at a fixed 440px width and printed with the one reliable way to show a picture in console.log — a CSS background on a styled %c run, where width comes from horizontal padding and height from line-height. Rendering to a fixed-pixel image (instead of measuring text) is what keeps the rows aligned: the DevTools console doesn't necessarily have the page's webfonts and handles letter-spacing differently, so canvas images are the only way to guarantee they line up. The menu and greeting below are live, styled %c text.

The OG image is embedded in the bundle as a base64 data: URL, so the banner paints with no network request — it works offline and behind any Content-Security-Policy. (It's generated from assets/og.png by npm run embed:og into src/og-image.ts.) The image is routed through a canvas to a stable data: URL so it survives the console re-evaluating the style later.

Each bare command (resume, contact, hire, help) is installed as a non-enumerable global getter, so typing the word and pressing Enter evaluates it and fires the action. DevTools eager-evaluation (the faint inline preview as you type) runs in V8's side-effect-free mode, where the getter's first console.log / window.open / DOM write aborts the preview — so a command only ever runs on Enter, never mid-keystroke.

Browser support

The banner images render in Chromium-based DevTools consoles (Chrome, Edge, Brave, Arc). Other consoles ignore the %c background and simply show the text greeting; the bare commands (and the window.jawad object) work everywhere.

Development

npm run build      # bundle to dist/ (ESM + CJS + .d.ts) via tsup
npm run dev        # rebuild on change
npm run typecheck  # tsc --noEmit
npm run embed:og   # regenerate src/og-image.ts from assets/og.png

To change anything the console shows, edit src/profile.ts (or replace assets/og.png and run npm run embed:og for the image), then rebuild and republish.

License

MIT © Jawad Ahbab