frontend
Technical notes on web development, DevOps, and AI integration.
103 articles
- 00:54frontend
Chat result rows, timeline style: metadata first
The time chip and tags in the chat popup were never a CSS problem. Metadata had to travel from SQL up to the DTO before the UI could dress up.
TL;DR: The popup rows looked flat because the API never sent published_at, tags, or categories—the fix started at the database, lifting metadata through repositories, DTOs, and SSE until the frontend had data to render. The existing TimelineRow component was reused across all three popup contexts instead of copying markup. Total cost: seven files, 214 lines added.
#react#pydantic#sqlmodel - 16:38ai
One SSE Stream, Two AI Answers
A chatbot needs both a quick summary and a full explanation from one LLM generation. The answer: marker-based splitting in the SSE stream, with separate cache storage and mid-stream parsing.
#sse#ai#streaming - 15:06frontend
Chat History That Lives in Local Storage
The AI search box now remembers yesterday's questions. The trick: localStorage, a 30-turn cap, and a try/catch that silently surrenders when the browser says no
#react#frontend#nextjs - 13:16frontend
Chat Left, Results Right: Splitting One Overlay Into Two
The source list and the chat fought over one overlay. Two panels with different z-index plus render-time visibility ended the fight.
#react#css#tailwind - 12:55frontend
Search Dialog to AI Thread: One Array, Seven useState Gone
Follow-up questions wiped the previous answer. One ThreadEntry array with functional updates turned the single-slot dialog into a real thread.
#react#nextjs#sse - 12:28ai
Asking AI on My Blog: SSE Streaming Through Plain fetch
EventSource can't POST. The blog's Ask AI answers run through a plain fetch, a hand-rolled SSE parser, and one CRLF trap worth remembering.
#sse#fastapi#nextjs - 03:34frontend
Semantic Related, TLDR Boxes, Live Search
Tag-matched related articles kept missing the point. Swap in cosine similarity, add a TLDR box, and make search live, all fail-safe against an old API.
#nextjs#react#tailwind - 18:32backend
Site Head and Footer Snippets Without a Redeploy
Snippet changes used to mean an edit, a commit, and a deploy wait. A whitelisted settings endpoint turns that into one PUT request.
#nextjs#fastapi#seo - 16:29frontend
My Homepage Keeps Forgetting I Published
The homepage blog section used to be three hardcoded cards I edited by hand. Now it fetches the latest posts live, with dates pinned to one timezone.
#nextjs#react#frontend