Ali Karaki
Senior front-end-leaning full-stack engineer specializing in React/TypeScript, Next.js, and GraphQL. I build complex interactive UIs (canvas editors, large tables) and obsess over performance + observability (profiling, Web Vitals/RUM).
From the blog
View AllI built md-mermaid-pdf: Markdown → PDF with Mermaid that actually renders
Architecture notes in Cursor and Claude became Markdown + Mermaid; PDF export was the weak link. I shipped md-mermaid-pdf on npm—CLI, programmatic API, Docker, GitHub Action, docs, recipes, and a live demo—so diagrams render before the PDF is written.
Vite + React Lighthouse Part 2: 81 → 100 (render-blocking, code-splitting, fonts)
After Part 1 took the site to 81 with SSG, Part 2 goes to 100 by eliminating render-blocking resources (Tailwind CDN, Google Fonts), code-splitting routes and post content, and self-hosting fonts and assets.
Vite + React Lighthouse win: CSR → SSG (73 → 81) with a tiny prerender pipeline
How I took a Vite/React SPA from an empty HTML shell to fully pre-rendered pages (SSG), why that boosted Lighthouse, and the real-world gotchas (redirects, router context, localStorage, dynamic routes) you’ll hit when you build it yourself.
Building canvas-based editors in React (Konva patterns)
Interaction design, performance, and state architecture lessons from real production floorplan tooling.
Relay for complex React UIs: fragments, connections, and sane cache strategy
Practical patterns for fragments, pagination, cache strategy, and UI state in large React + Relay codebases.
Virtualizing data-heavy tables (200k+ rows) without breaking UX
Tradeoffs that matter: virtualization, fetch strategy, column rendering, and perceived performance.
Performance profiling in React: from "feels slow" to measured wins
A practical workflow for profiling, validating improvements, and tying results to real-user metrics (Web Vitals/RUM).
Engineering Focus
Core Competencies
Interface architecture, performance profiling, design system governance, and resilient testing strategies.
Technical Stack
React, TypeScript, Next.js, GraphQL (Relay), PostgreSQL, Redis, AWS, Docker, Sentry.