Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build for the Web, Build on the Web, Build With...

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Harry Roberts Harry Roberts
March 12, 2026
Design
0
3

Build for the Web, Build on the Web, Build With the Web

Every layer of abstraction made in the browser moves you further from the platform, ties you further into framework lock-in, and moves you further away from fast.

By using progressive enhancement, you can opt into browser-native features that are usually faster, more accessible, more secure, and—perhaps most importantly to the business—maintained by someone else.

The beauty of opting into web platform features as they become available is that your site becomes contextual. The same codebase adapts into its environment, playing to its strengths, rather than trying to build and ship your own environment from the ground up. Meet your users where they are.

Avatar for Harry Roberts

Harry Roberts

March 12, 2026
Tweet

More Decks by Harry Roberts

See All by Harry Roberts
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.5k
cache rules everything
Avatar for Harry Roberts csswizardry
5
3.7k
My Website Is Slow!
 Where Do I Start?
Avatar for Harry Roberts csswizardry
5
550
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.6k
Get Your Head Straight
Avatar for Harry Roberts csswizardry
15
21k
From Milliseconds
 to Millions: A Look at the Numbers Powering Web Performance
Avatar for Harry Roberts csswizardry
1
2.7k
More Than You Ever Wanted to Know About Resource Hints
Avatar for Harry Roberts csswizardry
6
9.8k
It’s My (Third) Party, and I’ll Cry if I Want To
Avatar for Harry Roberts csswizardry
13
5.8k

Other Decks in Design

See All in Design
CULTURE DECK／Frontend Engineer
Avatar for M-HAND,Inc. mhand01
0
930
AI時代に必要な アイデアの形
Avatar for ux-man uxman
0
130
Mandalyn_DT5001_FinalAssignment.pdf
Avatar for Mandalyn Teo lynteo
0
170
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
220
Drawing_for_Anim_Final_PDF.pdf
Avatar for Mandalyn Teo lynteo
2
110
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
170
体験負債を資産に変える組織的アプローチ
Avatar for hikarutakase hikarutakase
0
750
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.1k
AIでデザインをつくる：基礎編
Avatar for 太田賢一 kenichiota0711
3
2.8k
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
340
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
2
27k
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
280

Featured

See All Featured
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
140
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.2k
Technical Leadership for Architectural Decision Making
Avatar for Kenny Baas-Schwegler baasie
3
280
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.2k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.3k
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
270
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Reality Check: Gamification 10 Years Later
Avatar for Sebastian Deterding codingconduct
0
2k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.4k
How to make the Groovebox
Avatar for あそなす asonas
2
2k

Transcript

  1. build for the web, build on the web, build with

    the web

  2. hi, i’m harry

  3. None
  4. None
  5. None
  6. None

  7. this isn’t anti-react

  8. react and facebook problems’ ‘

  9. None

  10. the number of companies solving facebook-problems is exactly one

  11. innovation, adoption, calibration

  12. unsuitable defaults

  13. None

  14. that shouldn’t have been an spa

  15. optimising for a scenario that doesn’t exist

  16. None

  17. 89%

  18. 89%

  19. robbing peter to pay paul

  20. None
  21. None

  22. ‘but it’s faster that way!’

  23. None

  24. “All else being equal, doing more work can never be

    faster.”
  25. None
  26. None
  27. None
  28. None

  29. traditional ‘mpa’ architectures, simpler rendering models, server-first HTML; sensible defaults

  30. “The best SPA is better than the best MPA. The

    average SPA is worse than the average MPA.” — Nolan Lawson

  31. it costs a lot to look this cheap

  32. import Image from 'next/image' export default function Page() { return

    ( <Image src="/profile.png" width={500} height={500} alt="Picture of the author" /> ) }

  33. “… these were ex-clients who had to re- hire me

    because with the ‘upgrades ’ came severe site-speed regressions.” — bit.ly/4rrTylj

  34. every bit of complexity you introduce, you also have to

    maintain

  35. sales driven development

  36. “Simplicity is a great virtue, but it requires hard work

    to achieve and education to appreciate. And to make matters worse, complexity sells better.” — Edsger Dijkstra
  37. None
  38. None
  39. None

  40. what’s old is new again

  41. but we are starting to correct course

  42. None
  43. None

  44. cloud repatriation

  45. cloud repatriation self-hosted

  46. server-side rendered

  47. server-side rendered web page

  48. static site generation

  49. static site generation flat-file

  50. <div id=app></div>

  51. <div id=app></div> .swf

  52. multiple page app

  53. multiple page app website

  54. the platform can do that*!

  55. *now

  56. smooth page transitions

  57. view transitions!

  58. @view-transition { navigation: auto; }

  59. @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }

  60. route prefetching

  61. speculation rules!

  62. <!-- Prerender next and previous articles. --> <script type=speculationrules> {

    "prerender": [ { "urls": [ "/why-do-we-have-a-cache-control-request-header/", "/build-for-the-web-build-on-the-web-build-with-the-web/" ] } ] } </script>

  63. sending just the diff

  64. compression dictionaries!

  65. <html lang=en-gb> <meta charset=utf-8> <meta name=viewport content="width=device-width, minimum-scale=1.0"> <title>Page One</title>

    <h1>Page One</h1> <p><a href=page-two.html>Go to Page Two</a></p>

  66. <html lang=en-gb> <meta charset=utf-8> <meta name=viewport content="width=device-width, minimum-scale=1.0"> <title>Page Two</title>

    <h1>Page Two</h1> <p><a href=page-one.html>Go to Page One</a></p>

  67. <html lang=en-gb> <meta charset=utf-8> <meta name=viewport content="width=device-width, minimum-scale=1.0"> <title>Page Two</title>

    <h1>Page Two</h1> <p><a href=page-one.html>Go to Page One</a></p>

  68. scroll positioning

  69. the back button!

  70. None

  71. “Users don ’ t want smooth page transitions, they want

    a f—king website that works.” — Ryan Townsend, bit.ly/40LKZ9O

  72. forwards compatibility

  73. dormancy

  74. you don’t have to wait

  75. img { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

  76. img { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

  77. img { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

  78. img { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }

  79. the ebb and flow of the platform underneath you

  80. the ebb and flow of the platform underneath you

  81. it’s not about being behind the curve or ahead of

    it…

  82. the curve is moving; move with it

  83. versionless is a virtue

  84. the platform’s responsibility to itself is its promise to you

  85. it’s not unique to the web, but it is a

    core tenet

  86. long live the platform

  87. long live the web

  88. thank you

  89. harry.is/for-hire