HTML: How to Make Loveliness

on YouTube ↗22m

" summary

Uses concrete results: swapping client-side React rendering for server-side HTML cuts Javascript from 770 KB to 238 KB and drops load time from ~17 s to 4 s; adding structured data yields measurable gains (Eventbrite +100% search traffic, Jobrapido +115% organic, +270% new registrations, Rakuten 2.7× traffic); choosing real elements matters — use a label with an input and a button element not divs for built-in keyboard and focus support; picture element provides WebP fallback automatically; run automated accessibility tests (WebAIM finds 98% of top million homepages with errors). use semantic elements avoid unnecessary JavaScript

AI-written summary · about

" chapters (13)

1. 0:00Intro
2. 1:10TL; DR
3. 1:53Tim Berners-Lee
4. 2:57The raw materials
5. 3:21HTML is declarative & fault-tolerant
6. 5:31JavaScript is not declarative
7. 6:56Don't rely on JavaScript
8. 8:20HTML is more than div & span
9. 11:22"Structured data"
10. 14:19Accessibility is part of usability
11. 15:55What can you do?
12. 19:15How to make the Internet affordable
13. 21:15The Internet matters

" related talks

• 39mHow To Make Loveliness: an HTML treasure huntBruce Lawson · International PHP Conference Spring 2019
• 44mThe HTML Treasure Hunt: from JavaScripter to Front End Superhero in 29 MinutesBruce Lawson · iJS 2018 Spring
• 41mYou Really Don't Need All That JavaScript I PromiseStuart Langridge · Pixel Pioneers Bristol 2022
• 50mAdvanced HTML for Good DevelopersMandy Michael · NDC Sydney 2024
• 44mThe HTML Treasure Hunt: from JavaScripter to Front End Superhero in 29 MinutesBruce Lawson · iJS London 2019
• 32mStay Away From My Path!Alex Moldovan · ReactiveConf 2018
• 57mAdvanced HTML for Performance & AccessibilityMandy Michael · NDC Oslo 2024
• 30mAdvanced HTML for Performance & AccessibilityMandy Michael · RubyConf AU 2024