Setup app shell

[olange]

Desired features

• Progressive Web App
• Good Web Vital Metrics scores TODO define our performance budget
• WebComponents, PIXI.js & WebGL based application
• Avoid FOIT and minimise FOUT when loading fonts

Actions

• Basic bits & pieces DONE 26.01 OL+RF
  • charset & lang
  • favicon & robots.txt
  • dir=ltr
• Descriptive metadata
  • Twitter card
  • Dublin Core
  • link rel=canonical
• Optimizations
  • preconnect to external static resources (Google Fonts) DONE 24.01 OL
  • crossorigin attribute when preconnecting to external resources
  • preload web component definitions
• Desired fonts (see Design system #12) DONE 24.01 OL
• Progressive Web App Manifest
  • link rel=manifest
  • meta name=theme-color
  • attributs mobile-web-app
  • attributs touch|Tile-icons
• Firebase services DONE 24.01 OL
• Flex layout & typographic grid
  • Choose & define box-sizing model CSS attribute at root
  • Set viewport correctly: width=min-fixed or device-width?
  • Use CSS variables for font size & line height
  • Grid layout
  • Prevent grid blowout
  • Define content-visibilty and overflow CSS properties where it matters to improve performance
• Fullbleed / Fullscreen layout (for the game)
• Promote installation of PWA (from the app)
• Smooth CSS transition on active elements after everything loaded TODO see onload remove class unresolved and may be apply a backdrop-filter frosted-glass effect
• ‹app-loading-progression› thin bar in header TODO informed by the pre-caching service worker

See also

• npm install pixi.js; add pixi-hello.js  #13 Setup app root with WebGL/Pixi canvas
• Design system #12 Design system

[olange]

Review Rudi's early experiments with PIXI.js and Snowpack, it contains contain a minimalistic framework.