Deploying a webapp

Backend

  • app to the server
    • scp
    • git
    • maven/npm/pip/whatever
  • start it
    • prefer using a “webapp container” like tomcat or gunicorn
    • on a “high” port like 5000, 8000, 8080
  • make it start on reboot
    • systemd
    • supervisord/pm2

Core Web Vitals

Google: “page experience” will be (June 2021) part of search ranking

What

  • LCP: Largest Contentful Paint
  • FID: First Input Delay (RUM only)
  • CLS: Cumulative Layout Shift

Rendering content to HTML

  • offline/static
  • online/dynamic

Offline

Somebody or something generates the raw HTML “offline”, long before the request, then the generated HTML is served via a static webserver (nginx, apache, …) or CDN.

Container Queries

The problem

Currently we have media queries, but in most cases widgets have not the full width of the viewport.

CSS Painting API

One of the new CSS Houdini APIs:

  • CSS Parser API - possibility to implement sass/less/etc support
  • CSS Properties and Values API - more advanced CSS properties (variables)
  • CSS Typed OM - CSS values as typed JS objects
  • CSS Layout API - create custom layouts (like grid or flexbox)
  • CSS Painting API - draw something in CSS

WebComponents

  • reusable custom elements
  • framework independent
  • standardized

Loading JS

How can we load JavaScript code into a website?