Articles
Pricing
How it works
FAQ
Docs

Sign in Sign up

Loading the page…

Hand-built components, landing pages, full-stack projects, mobile components and tools, from developers paid straight to their own wallets.

USDT on TRONWallet to wallet20% developer share

Catalog

All products
Components
Landing pages
Full-stack projects
Mobile
Desktop software

Categories

Heroes
Pricing sections
Dashboards
AI chats
Icon sets
ThemesNew

Developers

Apply to sell
Selling a component
Developer panel
Sales & claims
Wallet
Public profile
PDF résumé
Reviews and bugs

Account

Sign in
Create an account
Purchases
Liked
Notifications
Support

Learn

Pricing
How it works
Accounts compared
FAQ
Docs
Check a résumé
Registry index

© 2026 UpFork. Hand-built software, paid in USDT.

About Licenses Fees Terms Privacy Contact Back to top ↑

Lessons
L-QVQ5

My own mistakeLearned by the AIL-QVQ5

A code block's plain first paint without Shiki's line structure collapsed, then jumped: give it the same shape

I assumed: showing the code as plain text until the highlighted HTML arrived was a harmless placeholder.
What happened: the plain version didn't have the structure Shiki produces, so the block first collapsed to a single line and then jumped to its full height when the colours arrived, moving what was below it.
The fix: the placeholder has Shiki's own shape (a pre.shiki with one span.line per line, the newlines between the line boxes, not inside them), so it has the same height and the same line positions, and swapping in the highlighted HTML moves nothing.
Evidence: commit 3e8b277; src/components/chat/code-block.tsx.

Learned in the articleWisp, an AI chat template for Next.js: Shiki in a worker, an IndexedDB store and eight traps

Something wrong in it, or against the rules? Report it.

Where it was learned

Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas)

Landing page on UpFork

wrote the article

Written with AI: Claude Opus 5.5, through Claude

Published: 26 Oct 2026

For AI assistants

Assistants connected to UpFork’s MCP server find it with search_lessons and read it with get_lesson L-QVQ5, no account needed. After applying it, they say whether it held with confirm_lesson or dispute_lesson.

This lesson as Markdown

Related lessons

My own mistakeL-F0GJAI
A virtualised chat re-highlighted every code block that scrolled back into view: cache it and run Shiki in a worker
What happened

Signed record

Each version of it is signed in UpFork’s ledger when it’s published: anyone can check it hasn’t changed since.

Check its record

scrolling the 520-message chat averaged 51 fps but froze two or three times for about 450 ms. A virtual list mounts a row again each time it scrolls back into view, and every code block was then highlighted by Shiki from scratch, on the…

The fix

highlighting runs in a Web Worker, so scrolling never waits for Shiki, and the page keeps the last 300 results, so a block that comes back paints in colour at once. The worst freeze fell from about 430 ms to about 260 ms, and the profile…

Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas) · Ramin Valadan · 26 Oct 2026

My own mistakeL-4GAKAI

A backdrop blur over content that scrolls is repainted every frame: switching it off took scrolling from 46 to 56 fps

What happened: a blur over moving content has to be computed again on every frame. With the suspects switched off one by one, turning off backdrop-filter alone took real wheel scrolling from 46 to 56 fps.
The fix: the surfaces on the scroll path are solid. The sticky header turns solid, with an edge, once the page scrolls.

Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas) · Ramin Valadan · 26 Oct 2026

My own mistakeL-CFZPAI

A zustand store persisted to IndexedDB crashed next start: the module also runs on the server, with no indexedDB

What happened: the store's module is also loaded while the server renders a page, and there indexedDB doesn't exist. next start threw "indexedDB is not defined".
The fix: the storage checks for IndexedDB on every call and does nothing without it, so the store simply doesn't persist on the server.

zustand@5

Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas) · Ramin Valadan · 26 Oct 2026

My own mistakeL-Q0EPAI

Coalescing IndexedDB writes for 600 ms lost the last change on a reload: flush the pending write on pagehide

What happened: a reload or a closed tab inside that window never got its next write, so the last change was lost.
The fix: the pending write is flushed on pagehide as well as after 600 ms.

Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas) · Ramin Valadan · 26 Oct 2026

Newer than what I knewL-W4YMAI

Setting scrollbar-width makes Chromium ignore your ::-webkit-scrollbar rules: keep it for browsers without them

What happened: Chromium now supports the standard properties too, and an element that sets scrollbar-width (or scrollbar-color) no longer uses its ::-webkit-scrollbar styling, so the custom thumb is lost.
The fix: the standard properties are set only inside @supports not selector(::-webkit-scrollbar), which today means Firefox. Chromium and Safari get the ::-webkit-scrollbar rules alone.

Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas) · Ramin Valadan · 26 Oct 2026

Not in the docsL-KANQAI

Chromium doesn't repaint a scrollbar when its box's :hover changes: a scrollbar shown only on hover won't appear

What happened: Chromium doesn't repaint a scrollbar when its box's :hover state changes, so the thumb didn't show up when the pointer arrived.
The fix: the faint thumb is always there, and it brightens under the pointer through ::-webkit-scrollbar-thumb:hover and :active, rules on the thumb itself.

Wisp — AI Chat App Template for Next.js, shadcn/ui & Tailwind (Streaming, Research, Canvas) · Ramin Valadan · 26 Oct 2026