Emergency Website Kit

on YouTube ↗47m

" summary

An emergency website kit is a static HTML starter that prioritizes resilience and accessibility by choosing simplicity over complex stacks, using 11ty to generate pages, inlining and purging CSS with htmlnano and PurgeCSS, and registering an offline cache via Workbox service workers with skipWaiting and timestamps to avoid stale content. It targets a 14 kilobytes first-round-trip budget, hits ~4 ms first render on 4G and ~2.3 s on slow 3G, enforces ARIA landmarks, rem sizing and AA contrast, and offers one‑click deployment and editing via Netlify CMS.

AI-written summary · about

" chapters (11)

1. 0:00THE EMERGENCY WEBSITE KIT Max Böck // @mxbck
2. 9:24Resilience through SCALE
3. 10:01Resilience through Simplicity
4. 10:20The Rule of Least Power
5. 24:06Removing Cognitive Barriers
6. 25:12Progressive Enhancement for Offline
7. 31:21Security and Independence
8. 33:05Not everyone is a Web Developer
9. 34:27One-Click Deployment
10. 38:20User-First Development
11. 38:45These are Good Practices for All Websites

" related talks

• 47mResilienceJeremy Keith · ColdFront Conference 2015
• 01h 03mBetter performance === greater accessibilityAaron Gustafson · Inclusive Design 24 (#id24) 2018
• 28mCSS and the Critical PathPatrick Hamann · CSSConf US 2014
• 42mBuilding quick apps in 2018Ivan Akulov · CSS-Minsk-JS 2018
• 31mJS in Extreme Conditions: WebApps for the Refugee Aid MovementTaylor Fairbank · JSConf Budapest 2019
• 41mKeith and Mario’s Guide to Fast WebsitesKeith Pitt, Mario Visic · RubyConf AU 2013
• 32mMake Websites, Not AppsSoledad Penadés · CSSConf.Asia 2016
• 29mSpeed Essentials: Key Techniques for Fast WebsitesKatie Hempenius, Houssein Djirdeh · Chrome Dev Summit 2018