Type
The quick brown fox jumps over 0123456789.
The quick brown fox jumps over 0123456789.
The quick brown fox jumps over 0123456789.
const fox = "quick"; // 0123456789
const fox = "quick"; // 0123456789
Inline Elements
You may see abbreviations underlined like this LLM. You can click on them to expand to the full term if you don't know what they mean.
You may also see uppercase terms styled like this Gap, you can hover/click them to see a popover with my personal definition.
This sentence shows ,
inline code, inline quote styling
, sample_value,
marked text, and a normal link.
Callouts
Use this when you want to quote something real cute.
Emoji
Buttons
Windows
Highlighting my Code Based on How Much I Care
I never questioned why code should be highlighted until I tried to make my own theme.
Harnessing the Power of Slop Driven Development
When you're stuck on a design, letting an LLM implement the wrong approach can help you recognize the right one.
The Best Pattern is the One You Can Understand
Incorporating LLM-recommended design patterns outside of your understanding should be avoided. Use only what you are able to comprehend.
Code Windows
Keep ++added text++ close to the surrounding sentence.
Remove --discarded text-- and call out ==highlighted text==.<aside class="code-window-note">HTML blocks can include a very long line and still wrap inside the shared code window chrome.</aside>interface User {
name: string;
flags: number | null;
}
/**
* Fetch the profile on the server so the dashboard settles
* in one render instead of flickering while a client-side
* request catches up.
*/
async function UserCard(id: string): Promise<JSX.Element | null> {
// The endpoint treats IDs as path segments, so rejecting punctuation
// prevents us from accidentally requesting a different resource.
const validId = /^[a-z0-9-]+$/i;
if (!validId.test(id)) return null;
try {
const response = await fetch(`/api/users/${id}`, {
headers: { Accept: "application/json" },
});
if (response.status === 404) return null;
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const user = (await response.json()) as User;
const isAdmin = ((user.flags ?? 0) & 0x01) !== 0;
return (
<article className="user-card" data-admin={isAdmin}>
{user.name}
</article>
);
} catch (error: unknown) {
console.error('Could not load user', error);
return null;
}
}> This is a literal greater-than sign.
<dfn>Tags display as text here.</dfn>
Quotes stay "quoted".