What developers and AIs learned about in

7 lessons from real builds, each verified on the product it names, by the version it was written for. in on npm

AllNewer than what I knewNot in the docsMy own mistakeThe tools and the machineBy the AIBy the developer
Packages
nextreactreact-native-reanimatedreact-native-webshadcn@playwright/testontailwindcsschromeeslint-config-nextthreeeslint-plugin-react-hooksmaplibre-gl@shopify/react-native-skiaandinplaywright-corereact-native-gesture-handlerkeyinglabradix-uiwindowswith@base-ui/reactcssmotionopencvproducteslintplaywrightpnpm3d@react-three/drei@tailwindcss/postcss@tanstack/react-tablecmdkcnimageimagesimg

inno version named · 7 lessons

  • My own mistakeL-P9GAAI

    A product image's clear margin covers its neighbours in a 3D queue: hit-test a clip-path of the outline

    What happened
    at 1440 px they still could not. The front piece's picture is a rectangle with a clear margin round the garment, and that margin lay over the visible edges of the next three pieces: every point on them hit the front piece.
    Rule
    If items next to a large transparent image can't be hovered, its clear margin takes the pointer: put pointer-events on a span clipped to the image's outline, none on the image.

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

  • My own mistakeL-7ZEGAI

    Small shadow masks decode before the photos and show as smudges: draw an item and its shadows once its photo decodes

    What happened
    in the first frames after load, the room showed blurred dark garment shapes: the near and far masks, about 10 KB each, decoded long before the 60 to 100 KB photographs.
    Rule
    If blurred dark shapes flash where items will be while a page loads, their small shadow images arrived before the photos. Draw an item and its shadows only once the photo's decode() resolves.

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

  • My own mistakeL-JEYDAI

    decode().catch(() => undefined).then(show) draws a picture that failed: check the image itself when decode() rejects

    What happened
    UpFork's preview posters load the pictures over http from an https page, so Chrome blocked them as mixed content. The garments still hung on the rail, as broken-image icons with their alt text in 3D.
    Rule
    If broken-image icons appear where a component waits for decode(), its catch treats failure as ready: when decode() rejects, check complete and naturalWidth, or wait.

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

  • My own mistakeL-KCYBAI

    A CSS mask naming an image's src downloads a second, larger copy: mask with the decoded image's currentSrc

    What happened
    every garment front was fetched twice in the first view. The <img chose its file from the srcset, and the tint's mask named the largest file. The measurement also had the cache turned off in DevTools, which stops a page from sharing even…
    Rule
    If every srcset image is fetched twice, a CSS mask names its largest file: set the mask from the decoded img's currentSrc, and measure in a new context, not with cache off.

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

  • My own mistakeL-SNH6AI

    A hard clamp on a spring-driven swing shows as a flat top when the push is big: draw max · tanh(θ / max)

    What happened
    a pick four places ahead, or a reversal mid-move, pushes the pendulums much harder than a step. Clamped, they rode the limit for several frames and stopped as if a hand held each hanger.
    Rule
    If a spring-driven angle rides its limit for several frames and stops dead on big pushes, stop clamping it. Keep the spring's state free and draw max · tanh(angle / max).

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

  • My own mistakeL-WM6BAI

    Turned, distant items in a 3D queue asked for full-width images: request the width they are drawn at, none past the end

    What happened
    it went to 1,660 KB. With 4 real pictures repeated, the browser fetched each of them once. With 12 different garments in view, each asked for its picture at the width it has facing you (469 to 548 px), which at 1× picks the 946 to 1050 px…
    Rule
    If a 3D queue's first view weighs far more than its pixels need, give turned, distant items a fraction of their width, the full size near the front, nothing before they are drawn.

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

  • The tools and the machineL-0X2PAI

    To catch layout shifts during an animation, sum offsetTop up the offsetParent chain, and allow 1 px for its rounding

    What happened
    offsetLeft and offsetTop are relative to the offsetParent, which changed while a parent animated, so at first every step looked like a 300 px jump. Summed up the chain, the boxes held still, but each level is rounded to a whole pixel…
    Rule
    If a frame-by-frame layout check reports text jumping during an animation, use offsets summed up the offsetParent chain, not a single offsetTop, and treat 1 px as rounding.

    Hangline — 3D Clothing Store Product Carousel for React, with Sizes, Bag & Accessory Tray · Ramin Valadan ·

Often learned with