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

• [x] Basic bits & pieces DONE 26.01 OL+RF
  • [x] charset & lang
  • [x] favicon & robots.txt
  • [ ] dir=ltr
• [ ] Descriptive metadata
  • [ ] Twitter card
  • [ ] Dublin Core
  • [ ] link rel=canonical
• [ ] Optimizations
  • [x] preconnect to external static resources (Google Fonts) DONE 24.01 OL
  • [ ] crossorigin attribute when preconnecting to external resources
  • [ ] preload web component definitions
• [x] Desired fonts (see #12) DONE 24.01 OL
• [ ] Progressive Web App Manifest
  • [ ] link rel=manifest
  • [ ] meta name=theme-color
  • [ ] attributs mobile-web-app
  • [ ] attributs touch|Tile-icons
• [x] 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

• 13 Setup app root with WebGL/Pixi canvas

• 12 Design system

[olange]

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