Back to boring (part 2)

Transcript

1. @stefanjudis Back to boring
2. @stefanjudis stefanjudis.com | webweekly.email Heyo, I'm Stefan!
3. checklyhq.com
4. webweekly.email
5. This is all way too complicated and too much code for a website... My CTO from almost 10 years ago
6. This is how we do it!
7. SPA MPA SSG SSR Edge Rendering (Partial) Hydration Server Components Resumability
8. SPA MPA SSG SSR Edge Rendering (Partial) Hydration Server Components Resumability It's a lot!
11. Stefan, welcome to Canada! Access 1 MB of data for 1 Euro! (~1.46 CA$)
12. 2013 Hello world! 10KB / 50KB 2023 Hello world! 100KB / 300KB* Complexity * powered by 200MB+ of text files #node_modules
13. cwvtech.report
14. Core Web Vitals Technology Report
16. Core Web Vitals Technology Report
17. UX DX My misconception
18. I do feel overwhelmed by the pace of change. [...] JavaScript is meant to feel overwhelming. It’s where we try stu! out. It’s where stu! moves fast. Jeremy Keith Source: "Building" presentation
19. JavaScript CSS HTML HTTP
20. The web platform wasn't ready...
21. The web platform still isn't ready...
22. The web platform still isn't ready... (but we'll get there sooner than later)
23. A cross-browser effort to reach a state where each technology works exactly the same in every browser. Interop Source: wpt.fyi/interop-2023
24. A cross-browser effort to reach a state where each technology works exactly the same in every browser. Interop Source: wpt.fyi/interop-2023
25. Aspect Ratio Cascade Layers Color spaces and functions Dialog Grid Flex Subgrid Containment Scrolling Interop 2022 * * This list is not complete.
26. Container Queries :has() Inert @property Import Maps Font features color-mix :nth-child(of syntax) Interop 2023 * * This list is not complete.
27. open-ui.org
29. How hard can it be to show a tooltip?
30. Floating UI Popper
33. .toggleBtn { anchor-name: -#my-anchor; }
34. .toggleBtn { anchor-name: -#my-anchor; } #something { -#width: 15rem; -#height: 5rem; anchor-default: -#my-anchor; position-fallback: -#left-to-bottom; }
35. .toggleBtn { anchor-name: -#my-anchor; } #something { -#width: 15rem; -#height: 5rem; anchor-default: -#my-anchor; position-fallback: -#left-to-bottom; } @position-fallback -#left-to-bottom { @try { top: calc(anchor(center) - var(-#height) / 2); left: calc(anchor(right)); } @try { top: calc(anchor(center) - var(-#height) / 2); right: calc(anchor(left)); left: auto; } }
36. @position-fallback -#left-to-bottom { @try { top: calc(anchor(center) - var(-#height) / 2); left: calc(anchor(right)); } @try { top: calc(anchor(center) - var(-#height) / 2); right: calc(anchor(left)); left: auto; } } !
37. Popover Anchor Positioning 114 ✅ 17 # 114 $ 117 # % &
38. How hard can it be to write maintainable CSS?
40. 1 Variables 2 Color functions 3 Nesting
41. Variables ? Color functions ? Nesting
42. .box { background: PaleVioletRed; } #DB7093 Relative colors
43. .box { -#my-color: PaleVioletRed; background: var(-#my-color); } #DB7093 Relative colors
44. .box { -#my-color: PaleVioletRed; background: rgb(from var(-#my-color) r g b); } rgb(219 112 147) Relative colors
45. .box { -#my-color: PaleVioletRed; background: rgb(from var(-#my-color) r g b); } rgb(219 112 147) Relative colors
46. .box { -#my-color: PaleVioletRed; background: rgb(from var(-#my-color) g r b); } rgb(112 219 147) Relative colors
47. .box { -#my-color: PaleVioletRed; background: rgb(from var(-#my-color) g b r); } rgb(112 147 219) Relative colors
48. .box { -#my-color: PaleVioletRed; background: hsl(from var(-#my-color) h s l); } hsl(340deg 60% 65%) Relative colors
49. .box { -#my-color: PaleVioletRed; background: hsl(from var(-#my-color) h s calc(l + 20%)); } hsl(340deg 60% 85%) Relative colors
50. .box { -#my-color: PaleVioletRed; background: hsl(from var(-#my-color) h 0% calc(l + 20%)); } hsl(340deg 0% 85%) Relative colors
51. .box { -#my-color: PaleVioletRed; background: oklch(from var(-#my-color) calc(l + 0.2) c h); } oklch(0.87 0.13 0.68) Relative colors
52. colorInput.showPicker(); hsl(from #38571a h s 0%) color-contrast(#38571a vs #000, #fff) (behind a flag)
53. Variables Relative colors ? Nesting
54. .card { .container { display: flex; flex-direction: column; gap: 1em; } .header { aspect-ratio: 3 / 2; } & h2, & p { margin: 0; } } Waiting for Firefox 116 (Shipping in ~3 weeks) Photo by Ben Michel on Unsplash
55. .card { .container { display: flex; flex-direction: column; gap: 1em; } .header { aspect-ratio: 3 / 2; } & h2, & p { margin: 0; } } Waiting for Firefox 116 (Shipping in ~3 weeks) ' Photo by Ben Michel on Unsplash
56. Source: developer.chrome.com/articles/css-nesting/
57. .card { h1 {} } .card { & h1 {} } .card { :is(h1) {} } Valid Valid X Invalid
58. How hard can it be to create responsive UI components?
59. .wide-nav { display: none; @media (min-width: 63rem) { display: flex; } }
61. Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries
62. .card { .container { display: flex; flex-direction: column; } }
63. .card { container-type: inline-size; .container { display: flex; flex-direction: column; @container (width > 400px) { flex-direction: row; } } }
64. .card { container-type: inline-size; .container { display: flex; flex-direction: column; @container (width > 400px) { flex-direction: row; .header { flex: 0 0 25cqw; } } } }
65. .card { container-type: inline-size; .container { display: flex; flex-direction: column; @container (width > 400px) { flex-direction: row; .header { flex: 0 0 25cqw; } } } } cqw 1% of a query container's width cqh 1% of a query container's height cqi 1% of a query container's inline size cqb 1% of a query container's block size cqmin The smaller value of either cqi or cqb cqmax The larger value of either cqi or cqb
66. .container { container-type: size; height: 12rem; } @container (orientation: portrait) { .portrait { display: grid; } .landscape { display: none; } }
67. .card { container-type: inline-size; .container { display: flex; flex-direction: column; } }
68. .card { container-type: inline-size; .container { display: flex; flex-direction: column; } &:has(img[src*="dog"]) { background: url(./dog.svg); } } Behind a flag
69. article:has(aside) { /% ..' *) } form:has(:invalid) { /% ..' *) } :root:has(.menu-toggle[aria-pressed=”true”]) { /% ..' *) } label:has(+ input) { /% … *) }
70. developer.chrome.com/blog/has-m105/
71. CSS has become a more complete mature language, that works better with the way we build websites today. Una Kravets Source: The state of the CSS community
72. How hard can it be to load a perfect image?
73. <picture> <!-, load webp images if supported --/ <source type="image/webp" srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=webp 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=webp 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px"> <!-, load traditional supported image format --/ <img srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=jpg&fl=progressive 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=jpg&fl=progressive 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em),
74. sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px"> <!-, load traditional supported image format --/ <img srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=jpg&fl=progressive 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=jpg&fl=progressive 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px" src="https:/0images.ctfassets.net/..'/paris.jpg" alt="Buildings of Paris" loading="lazy" decoding="async" width="1243" height="1500"> <1picture>
75. <picture> <!-, load webp images if supported --/ <source type="image/webp" srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=webp 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=webp 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px"> <!-, load traditional supported image format --/ <img srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=jpg&fl=progressive 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=jpg&fl=progressive 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px" src="https:/0images.ctfassets.net/..'/paris.jpg" alt="Buildings of Paris" loading="lazy" decoding="async" width="1243" height="1500"> <1picture>
76. <picture> <!-, load webp images if supported --/ <source type="image/webp" srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=webp 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=webp 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px"> <!-, load traditional supported image format --/ <img srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=jpg&fl=progressive 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=jpg&fl=progressive 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px" src="https:/0images.ctfassets.net/..'/paris.jpg" alt="Buildings of Paris" loading="lazy" decoding="async" width="1243" height="1500"> <1picture> type="image/webp"
77. <picture> <!-, load webp images if supported --/ <source type="image/webp" srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=webp 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=webp 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px"> <!-, load traditional supported image format --/ <img srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=jpg&fl=progressive 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=jpg&fl=progressive 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px" src="https:/0images.ctfassets.net/..'/paris.jpg" alt="Buildings of Paris" loading="lazy" decoding="async" width="1243" height="1500"> <1picture> srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=webp 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=webp 200w, ..'"
78. <picture> <!-, load webp images if supported --/ <source type="image/webp" srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=webp 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=webp 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px"> <!-, load traditional supported image format --/ <img srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=jpg&fl=progressive 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=jpg&fl=progressive 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px" src="https:/0images.ctfassets.net/..'/paris.jpg" alt="Buildings of Paris" loading="lazy" decoding="async" width="1243" height="1500"> <1picture> sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px"
79. <picture> <!-, load webp images if supported --/ <source type="image/webp" srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=webp 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=webp 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px"> <!-, load traditional supported image format --/ <img srcset=" https:/0images.ctfassets.net/..'/paris.jpg?w=100&fm=jpg&fl=progressive 100w, https:/0images.ctfassets.net/..'/paris.jpg?w=200&fm=jpg&fl=progressive 200w, ..'" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px" src="https:/0images.ctfassets.net/..'/paris.jpg" alt="Buildings of Paris" loading="lazy" decoding="async" width="1243" height="1500"> <1picture> loading="lazy" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px"
80. <img loading="lazy" width="200" height="200" sizes=" (max-width: 768px) calc(100vw - 3em), (max-width: 1376px) calc(50vw - 8em), 550px" srcset="swing-200.jpg 200w, swing-400.jpg 400w, ..'" src="swing-400.jpg" alt="Kettlebell Swing">
81. <img loading="lazy" width="200" height="200" sizes="auto" srcset="swing-200.jpg 200w, swing-400.jpg 400w, ..'" src="swing-400.jpg" alt="Kettlebell Swing">
82. <img loading="lazy" width="200" height="200" sizes="auto" srcset="swing-200.jpg 200w, swing-400.jpg 400w, ..'" src="swing-400.jpg" alt="Kettlebell Swing"> If images are lazy loaded, let the browser pick the best size.
83. <img loading="lazy" width="200" height="200" sizes="auto" srcset="swing-[width].jpg [width]w" src="swing-400.jpg" alt="Kettlebell Swing">
84. <img loading="lazy" width="200" height="200" sizes="auto" srcset="swing-[width].jpg [width]w" src="swing-400.jpg" alt="Kettlebell Swing"> Could this be a thing?
85. How hard can it be to build delightful UI?
87. codepen.io/stefanjudis/pen/abQLvOW
88. function transitionStuff(data) { /0 For non-Chromiums if (!document.startViewTransition) { updateTheDOMSomehow(); return; } /0 browser: ( (old) document.startViewTransition(() =3 { updateTheDOMSomehow(); /0 browser: ( (new) }) }
92. movies.nuxt.space export default defineNuxtConfig({ experimental: { viewTransition: true } })
93. live-transitions.pages.dev
94. Multipage transitions <meta name="view-transition" content="same-origin">
95. stefanjudis.com
96. smashing-transitions.netlify.app
97. developer.chrome.com/docs/web-platform/view-transitions/
98. The web platform is catching up!
99. JavaScript leads the way to the "next web"...
100. ... coming with a better user and developer experience!
101. Video platforms Blogs Shops Image & Illustration software Marketing sites Games Productivity Apps PWAs Streaming sites Social Networks
102. If your site feels like a "boring" Multi Page App, maybe it should be one?
103. If JavaScript doesn't bring users joy, thank it, and throw it away. Marie Kondo
104. If JavaScript doesn't bring users joy, thank it, and throw it away. Marie Kondo Addy Osmani Source: The Cost of JavaScript 2023
105. @stefanjudis stefanjudis.com | webweekly.email Thanks.