⌘+\

Dev + Design Documentation

This is a doc to keep a record of dev / design thought process. There will be sections which contain a mix of both dev and design.

Dev & Design

Rendering / Animation + Timing Functions

RAIL Model(Response, Animation, Idle, and Load) for performance measurement & animation timing

  • <10ms to paint a frame (60fps).
    • Examples: Entrances | Exits | Tweens | Loading Spinners | Scrolling | Dragging | Pan | Zoom

[!TIP] use of the 100 ms response to input time to pre-calculate expensive work

[!CAUTION] > requestAnimationFrame()

  • <50ms to respond to user input (Metric: INP — into effect from March 2024)

[!TIP] use yieldToMain() -> Break long tasks.

  • <1000ms — users start to lose focus
  • >10000ms — abandon page

TODO

Dev

  • 2s for subsequent nav
    • bfcache
      • ensure nothing uses the ‘unload’ event. There are more concerns that are listed on bfcache documentation on web.dev

Design | UX