LAB / DIAGRAMS

Technical diagrams

Plain SVG, rendered on the server, routed orthogonally. Every one carries a text description, because a diagram that explains an architecture to sighted readers and nothing to anyone else is half a diagram.

REQUEST PATH

PLATFORMGETBrowser → Edge (GET)POSTBrowser → API (POST)SQLAPI → Postgres (SQL)API → QueueQueue → ObservabilityPostgres → ObservabilityBrowserNext.jsEdgecacheAPIFluidPostgresprimaryQueueeventsObservability
A browser request reaches the edge, which either serves from cache or calls the API; the API reads from Postgres and publishes to the queue.
  • Browser connects to Edge, GET.
  • Browser connects to API, POST.
  • API connects to Postgres, SQL.
  • API connects to Queue.
  • Queue connects to Observability.
  • Postgres connects to Observability.

BUILD PIPELINE

Source → BuildBuild → TestsBuild → TypesTests → ProductionTypes → ProductionSourceBuildTests214TypesProduction
Source is built, then tested and type-checked in parallel, and only a run that passes both is promoted to production.
  • Source connects to Build.
  • Build connects to Tests.
  • Build connects to Types.
  • Tests connects to Production.
  • Types connects to Production.

THE SHADER PIPELINE

Effect → DisplaceDisplace → Blur XBlur X → Blur YBlur Y → CompositeEffect→ ADisplaceA → DBlur XD → BBlur YB → CCompositeD + C
The five passes: the effect renders to a texture, displacement warps it, two half-resolution blurs run in sequence, and the composite combines the warped and blurred results.
  • Effect connects to Displace.
  • Displace connects to Blur X.
  • Blur X connects to Blur Y.
  • Blur Y connects to Composite.