Welcome to TinkerBytes — a blog where I write about frontend engineering, share things I've learned, and publish posts with live interactive demos embedded directly in the page.
Why another dev blog?
Most dev blogs are great at explaining concepts. But there's always a gap between reading about something and actually seeing it move. I wanted a blog where I can drop a React component right into the post — no CodeSandbox embed, no screenshot — just the real thing running in the page.
The stack
This site is built with:
- Next.js 16 (App Router) — static generation, great developer experience
- MDX via
next-mdx-remote— write markdown, embed React components - Tailwind CSS v4 — utility-first, fast to iterate
- Shiki — zero-runtime syntax highlighting
The content lives as .mdx files in the repo — no CMS, no database. Just git and your editor.
What to expect
Posts about:
- React patterns and advanced hooks
- Frontend performance techniques
- CSS and layout deep-dives
- Mini interactive demos
Here's a code sample to show syntax highlighting works:
function useCounter(initial = 0) {
const [count, setCount] = useState(initial)
return {
count,
increment: () => setCount((c) => c + 1),
decrement: () => setCount((c) => c - 1),
reset: () => setCount(initial),
}
}Stay curious. Tinker often.