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

Back to boring (part 2)

Back to boring (part 2)

stefan judis

July 11, 2023
Tweet

More Decks by stefan judis

Other Decks in Technology

Transcript

  1. This is all way too complicated and too much code

    for a website... My CTO from almost 10 years ago
  2. 2013 Hello world! 10KB / 50KB 2023 Hello world! 100KB

    / 300KB* Complexity * powered by 200MB+ of text files #node_modules
  3. 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
  4. A cross-browser effort to reach a state where each technology

    works exactly the same in every browser. Interop Source: wpt.fyi/interop-2023
  5. A cross-browser effort to reach a state where each technology

    works exactly the same in every browser. Interop Source: wpt.fyi/interop-2023
  6. Aspect Ratio Cascade Layers Color spaces and functions Dialog Grid

    Flex Subgrid Containment Scrolling Interop 2022 * * This list is not complete.
  7. Container Queries :has() Inert @property Import Maps Font features color-mix

    :nth-child(of syntax) Interop 2023 * * This list is not complete.
  8. .toggleBtn { anchor-name: -#my-anchor; } #something { -#width: 15rem; -#height:

    5rem; anchor-default: -#my-anchor; position-fallback: -#left-to-bottom; }
  9. .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; } }
  10. @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; } } !
  11. .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
  12. .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
  13. .card { h1 {} } .card { & h1 {}

    } .card { :is(h1) {} } Valid Valid X Invalid
  14. .card { container-type: inline-size; .container { display: flex; flex-direction: column;

    @container (width > 400px) { flex-direction: row; .header { flex: 0 0 25cqw; } } } }
  15. .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
  16. .container { container-type: size; height: 12rem; } @container (orientation: portrait)

    { .portrait { display: grid; } .landscape { display: none; } }
  17. .card { container-type: inline-size; .container { display: flex; flex-direction: column;

    } &:has(img[src*="dog"]) { background: url(./dog.svg); } } Behind a flag
  18. article:has(aside) { /% ..' *) } form:has(:invalid) { /% ..'

    *) } :root:has(.menu-toggle[aria-pressed=”true”]) { /% ..' *) } label:has(+ input) { /% … *) }
  19. 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
  20. <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),
  21. 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>
  22. <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>
  23. <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"
  24. <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, ..'"
  25. <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"
  26. <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"
  27. <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">
  28. <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.
  29. function transitionStuff(data) { /0 For non-Chromiums if (!document.startViewTransition) { updateTheDOMSomehow();

    return; } /0 browser: ( (old) document.startViewTransition(() =3 { updateTheDOMSomehow(); /0 browser: ( (new) }) }
  30. Video platforms Blogs Shops Image & Illustration software Marketing sites

    Games Productivity Apps PWAs Streaming sites Social Networks
  31. If JavaScript doesn't bring users joy, thank it, and throw

    it away. Marie Kondo Addy Osmani Source: The Cost of JavaScript 2023