Show HN: IDE for code assembly of reusable code blocks
Tetrees is an AI IDE for assembling reusable code blocks. The team eliminated the white flash on cold load by inlining critical styles, optimizing favicon, and separating the stylesheet for caching and parallel fetch.
and elements (rather than an inline in
) because Vite 5's html-inline-proxy plugin still chokes
on tags here — see the bootstrap.css public-folder
migration for the same plugin's previous breakage. Inline style
attributes are processed by the browser's HTML parser BEFORE any
external stylesheet downloads, so the dark Tetrees background
paints the moment the first 1 KB of HTML arrives — well before
bootstrap.css, gtag, Clarity, or the main JS bundle land. This
is the primary fix for the "white flash" Microsoft Clarity has
been recording on cold POPs (Canada/NA mobile + Reddit in-app
webview), and it costs zero extra bytes on the wire.
-->
` entry
because Chrome/Edge prefer SVG when both formats are listed
and our SVG's thin bracket strokes collapse to "just a T" at
16×16 favicon sizes. PNGs downscale cleaner and match the
provided square logo. ?v= query busts the browser's
indefinite favicon cache (HTTP cache headers don't reset it
on their own). -->
Tetrees — The AI IDE for ready-made code-block assembly
Seoul AWS) can be 2-5 seconds of pure white. The BE log analysis + Clarity recordings show this cohort consistently bouncing inside that window.
Branding intent: lock in the Tetrees emerald on the very first frame so a paid-ad click knows where they landed before the JS bundle finishes parsing. Spinner cadence (1.2s) matches the post-mount app loader so the handoff feels continuous when React commits.
Why a separate stylesheet vs inline : Vite 5's
html-inline-proxy plugin has a long-standing issue with
processing inline blocks in index.html (see vitejs
issue #14108). Serving from /public bypasses processing
entirely and gets a clean .css filename for CDN caching —
browsers fetch this in parallel with the head HTML stream
so it ends up on the wire before the main bundle anyway.
Marked fetchpriority="high" to push it above other
tag-manager assets on the critical path.
-->
tag below uses, so the fetch kicked off here is the exact same resource the body's consumes — no double download. -->
rule above; redundant but cheap, and belt-and-braces against any UA that paints body differently (notably some older Android WebViews that ignore html bg). -->
Tetrees — loading the AI IDE…