$30 off During Our Annual Pro Sale. View Details »

Things you should know about Frontend Developme...

stefan judis
December 08, 2022

Things you should know about Frontend Development in 2022

stefan judis

December 08, 2022
Tweet

More Decks by stefan judis

Other Decks in Technology

Transcript

  1. TypeScript GraphQL Grid webp Font Display :focus-within ESM Lazy Loading

    PWA JAMStack Zero-Config JavaScript Cypress Serverless Web Components
  2. TypeScript GraphQL Grid webp Font Display :focus-within ESM Lazy Loading

    PWA JAMStack Zero-Config JavaScript Cypress Serverless Web Components
  3. TypeScript GraphQL Grid webp Font Display :focus-within ESM Lazy Loading

    PWA JAMStack Zero-Config JavaScript Cypress Serverless Web Components Played out
  4. TypeScript GraphQL Grid webp Font Display :focus-within ESM Lazy Loading

    PWA JAMStack Zero-Config JavaScript Cypress Serverless Web Components Evolved
  5. TypeScript GraphQL Grid webp Font Display :focus-within ESM Lazy Loading

    PWA JAMStack Zero-Config JavaScript Cypress Serverless Web Components Sorta played out
  6. .grid { grid-template-columns: [a] auto [b] minmax(min-content, 1fr) [b c

    d] repeat(2, [e] 40px) repeat(5, auto); } CSS Grid and its incredible power arrived!
  7. 55!

  8. :fullscreen :modal :picture-in-picture :auto-fill :enabled :disabled :read-only :read-write :placeholder-shown :default

    :checked :indeterminate :blank :valid :invalid :in-range :out-of-range :required :optional :user-invalid :dir() :lang() :any-link :link :visited :local-link :target :target-within :scope :playing :paused :current :past :future :root :empty :nth-child :nth-last-child :first-child :last-child :only-child :nth-of-type :nth-last-of-type :first-of-type :last-of-type :only-of-type :hover :active :focus :focus-visible :focus-within :is() :not() :where() :has()
  9. :fullscreen :modal :picture-in-picture :auto-fill :enabled :disabled :read-only :read-write :placeholder-shown :default

    :checked :indeterminate :blank :valid :invalid :in-range :out-of-range :required :optional :user-invalid :dir() :lang() :any-link :link :visited :local-link :target :target-within :scope :playing :paused :current :past :future :root :empty :nth-child :nth-last-child :first-child :last-child :only-child :nth-of-type :nth-last-of-type :first-of-type :last-of-type :only-of-type :hover :active :focus :focus-visible :focus-within :is() :not() :where() :has()
  10. section h1, article h1, aside h1, nav h1 { font-size:

    25px; } :is(section, article, aside, nav) h1 { font-size: 25px; } :where(section, article, aside, nav) h1 { font-size: 25px; } :is() and :where() Specificity: 0,0,2 Specificity: 0,0,1
  11. figure:has(> figcaption) { /$ ..& *( } a:not(:has(> svg)) {

    /$ ..& *( } article:has(>h1):has(>h2) { /$ ..& *( } h1:has(+ p) { /$ ..& *( } form:has(:focus-visible) { /$ ..& *( }
  12. .container { container: article / inline-size; } section { background:

    blue; } Hello world! <div class="container"> <section>Hello world!<*section> <*div>
  13. .container { container: article / inline-size; } section { background:

    blue; } @container article (min-width: 200px) { section { background: red; } } Hello world! <div class="container"> <section>Hello world!<*section> <*div>
  14. .container { container: article / inline-size; } section { background:

    blue; } @container article (min-width: 200px) { section { background: red; } } Hello world! <div class="container"> <section>Hello world!<*section> <*div> 150px
  15. .container { container: article / inline-size; } section { background:

    blue; } @container article (min-width: 200px) { section { background: red; } } Hello world! <div class="container"> <section>Hello world!<*section> <*div> 250px
  16. .container { container: article / inline-size; } section { background:

    blue; } @container article (min-width: 200px) { section { background: red; } } Hello world! <div class="container"> <section>Hello world!<*section> <*div> 150px
  17. .posts { container-name: posts; } @container posts (background-color: #f8a100) {

    .post { color: #fff; } } The future — Container Style Queries
  18. .posts { container-name: posts; } @container posts (-,mode: blue) {

    .post { color: #fff; } } The future — Container Style Queries
  19. Truly Component-driven CSS Container queries enable you to style elements

    based on their size whereas :has() lets you style them based on their content!
  20. Truly Component-driven CSS Container queries enable you to style elements

    based on their size whereas :has() lets you style them based on their content! THIS IS HUGE!!!
  21. Alert Avatar Badge Breadcrumb Button Card Checkbox Datepicker Dialog File

    Flex Focusgroup Icon Image Menu Popup Radio Button Select Skeleton Slider Switch Table Tabs Text Toast Tooltip
  22. Alert Avatar Badge Breadcrumb Button Card Checkbox Datepicker Dialog File

    Flex Focusgroup Icon Image Menu Popup Radio Button Select Skeleton Slider Switch Table Tabs Text Toast Tooltip
  23. <selectmenu id="ambassadors" class="ambassador"> <div slot="button"> <button behavior="button">Pick one<*button> <span behavior="selected-value"><*span>

    <*div> <div popup slot="listbox" behavior="listbox"> <div class="grid"> <option value="benedek" checked>Benedek<*option> <option value="carmen">Carmen<*option> <option value="jeremias">Jeremias<*option> <*div> <*div> <*selectmenu> selectmenu and popup open-ui.org/prototypes/selectmenu Not ready yet...
  24. async function navigate(data) { if (!document.createDocumentTransition) { await updateTheDOMSomehow(data); return;

    } const transition = document.createDocumentTransition(); await transition.start(async () =. { await updateTheDOMSomehow(); }); }
  25. MPA

  26. /** * @param {string} p1 - A string param. *

    @param {string=} p2 - An optional param (Closure syntax) * @param {string} [p3] - Another optional param (JSDoc syntax). * @param {string} [p4="test"] - An optional param with a default value * @return {string} This is the result *( function someMethod(p1, p2, p3, p4 = 'test') { // TODO }
  27. Video platforms Blogs Shops Image & Illustration software Marketing sites

    Games Productivity Apps PWAs Streaming sites Social Networks
  28. First render (All of it!) index.html main.css jQuery.js A Fetch-Render

    Waterfall some-spaghetti.js DB Calls API Calls API Calls API Calls Server Browser index.html DB Calls API Calls API Calls API Calls All done!
  29. <App> <Sidebar> <Nav /1 <*Sidebar> <Main> <TweetBox /1 <Tweets /1

    <*Main> <SideBar> <Trends /1 <OtherNonSense /1 <*SideBar> <*App> App Sidebar Nav Main TweetBox Tweets SideBar Trends OtherNonSense Data for OtherNonSense Data for Trends Data for Tweets A Render-Fetch Waterfall (aka "fetch as you render")
  30. <App> <Sidebar> <Nav /1 <*Sidebar> <Main> <TweetBox /1 <Tweets /1

    <*Main> <SideBar> <Trends /1 <OtherNonSense /1 <*SideBar> <*App> App Sidebar Nav Main TweetBox Tweets SideBar Trends OtherNonSense Data for OtherNonSense Data for Trends Data for Tweets A Render-Fetch Waterfall (aka "fetch as you render") Network? CPU? Memory?
  31. SSR Server Side Rendering CSR Client Side Rendering SSG Static

    Site Rendering DPR Incremental Static Regeneration Distributed Persistent Rendering ISR
  32. // @ts-check const { test, expect } = require("@playwright/test"); test.describe("navigation",

    () =. { test.beforeEach(async ({ page }) =. { // Go to the starting url before each test. await page.goto("https://playwright.dev/"); }); test("main navigation", async ({ page }) =. { // Assertions use the expect API. await expect(page).toHaveURL("https://playwright.dev/"); }); });
  33. npx playwright test -,workers 4 // playwright.config.js const config =

    { workers: process.env.CI ? 2 : undefined, }; module.exports = config;
  34. // pages/_app.js import { Inter } from '@next/font/google' // If

    loading a variable font, you don't need to specify the font weight const inter = Inter({ subsets: ['latin'] }) export default function MyApp({ Component, pageProps }) { return ( <main className={inter.className}> <Component {..&pageProps} /1 <*main> ) } next/image Higher level components
  35. Container Queries :has() View Transitions AVIF <selectmenue> Playwright Rendering patterns

    Popup Edge Compute End-to-end Type Safety Rust/Go Tooling