A Little Story About A Big Bang Redesign

on YouTube ↗55m

" summary

Smashing Magazine abandons WordPress for a JAMstack + GitHub workflow, prebuilding markdown into static HTML served from CDN and using microservice APIs for comments, search and membership. Front end uses Preact (admitted pain), HTTP/2, 10–12 packaged CSS/JS bundles (bundling wins over many tiny files), and a service worker font cache trick to avoid flash. Fluid typography uses calc() formulas to eliminate many media queries. Result: start‑render around 0.4–0.5s and a fast, progressively enhanced site—warts and all, but working. 11° logo tilt

AI-written summary · about

" chapters (7)

1. 0:00Introduction and cats
2. 1:45Design philosophy and personality
3. 16:52Rebuilding Smashing Magazine
4. 28:59Frontend and performance optimizations
5. 38:50HTTP/2 and web fonts
6. 44:19Backend changes and results
7. 51:20Final thoughts and Q&A

" related talks

• 56mBig Bang Redesign: Smashing Magazine’s 2017 Relaunch, a Case StudyVitaly Friedman · Web Unleashed 2017
• 49mBig Bang Redesign: Smashing Magazine’s 2017 Relaunch, a Case StudyVitaly Friedman · You Gotta Love Frontend 2017
• 30mRise of the Jamstack — Mathias BiilmannMathias Biilmann · JAMstack Conf 2017
• 36mOn JAMstack ArchitecturesIlya Pukhalski · The Rolling Scopes Conference 2018
• 48mLightning talks from Josh Pollock, Andrew Kaiser, Cole Turner and Jason ClarkJosh Pollock, Andrew Kaiser, Cole Turner, Jason R. Clark · React Boston 2018
• 29mPreprocessors, Components, and CSS in JS or: How I Learned to Stop Worrying and Love the WebsiteJackie Balzer · CSSconf EU 2018
• 13mBring JAMstack to the WordPress communitySeiji Akatsuka · WordCamp Singapore 2019
• 14mHow to use React, webpack and other buzzwords if there is no needVarya Stepanova · React Finland 2018