Pivovar Lajka 13. 03. 2024

příště: 10. dubna v Alma Career (exLMC)
mezitím v Brně: ARTIN

note:

• brněnský sraz se zaznamenává, můžete se podívat na přednášky o Next.js 14 a serverovém GTM

Letem swwwětem

note:

• představit spolek

  Budujeme a vzděláváme komunitu frontendových vývojářů a designérů

• organizační náležitosti
• Vítáme nové spíkry! Máš-li zajímavé téma nebo případovku, nenechávej si ji pro sebe. Call for papers AKA náležitosti na webu Frontendisti.cz

WWW minulém díle jste viděli

• Petr Koláček: CSS :has power

• Katka Voláková: Container queries (z FrontKonu)

note:

• FrontKon 2024: 9/10/2024

Dnes

• Yana Taran, Lentiamo.cz
  New approach to sticky columns (EN)
• Martin Michálek, PageSpeed.cz
  INP: jak zrychlit interakce na webu
• Riskuj
  kvízová hra

note:

• prožram
• INP = Interaction to Next Paint
• Riskuj: týmy o přestávce, pilotní uvedení, uvidíme

Prohlížeče

note:

• dnes velmi stručně

Firefox 123

vydán 20. února 2024

• podpora 103 early hints

note:

• jako poslední z velkých prohlížečů
  • early hints: ještě během zpracovávání požadavku napovědí prohlížeči jaké další zdroje budou asi potřeba
  • nástupce (de facto náhrada) preload a preconnect (více Máchal)

Chrome 123

vydán 13. března 2024

• field-sizing vlastnost CSS

• NavigationActivation

note:

• form elements resize to the content width, example by Adam Argyle
  • Safari se tváří pozitivně, FF mlčí
• NavigationActivation ukládá info o tom, odkud uživatel na stránku přišel, a to v tom smyslu, zda na ni přišel ponejprv, nebo se na ni vrací
  • bude tak možné nativně pozměnit obsah stránky např. pro nové návštěvníky
  • hudba budoucnosti, FF se tváří pozitivně, Safari mlčí

Chrome 123

• import attributes

import json from "./foo.json" with { type: "json" };
import("foo.json", { with: { type: "json" } });

note:

• dříve se nazývalo import assertions
• podporuje Safari od verze 17.2, FF mlčí

Zachyceno v síti

Michelle Barker: How I Solved My Font Rendering Problem

Michelle Barker: How I Solved My Font Rendering Problem

@font-face {
  font-family: 'Frontendisti';
  src: url('../fonts/verdana.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Frontendisti';
  src: url('../fonts/verdana.woff2') format('woff2-variations');
  font-display: swap;
  font-weight: 100 800;
}

note:

• klíčové jsou řádky 3 a 5
• podle MDN je formát woff2-variations pouze doporučený, ale řeší ten problém

Nástroje a udělátka

Textová bublina

<div class="tooltip">{F}rontendisti jsou prostě boží!</div>

.tooltip {
  color: #fff;
  font-size: 1.25rem;
  max-width: 28ch;
  text-align: center;
}

Textová bublina

.tooltip {
  /* tail dimension */
  --b: 2em; /* base */
  --h: 1.5em; /* height */
  --p: 50%; /* main position (0%:left 100%:right) */
  --x: 1.8em; /* tail position (relative to the main position). Can be percentage */
  --r: 1.2em; /* the radius */
  --c: #4ECDC4;

  padding: 1em;
  border-radius:
      var(--r)
      var(--r)
      min(var(--r),100% - var(--p) - var(--b)/2)
      min(var(--r),var(--p) - var(--b)/2)/var(--r);
  clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
    clamp(var(--b),var(--p) + var(--b)/2,100%) 100%,
    calc(var(--p) + var(--x)) calc(100% + var(--h)),
    clamp(0%,var(--p) - var(--b)/2,100% - var(--b)) 100%);
  background: var(--c);
  border-image:
      conic-gradient(var(--c) 0 0) 0 0 1 0/0 0 var(--h) 0/0 999px var(--h) 999px;
}

Kitát na záwwwěr

CSS is the only language that gets blamed when the author is bad.

Josh Collinsworth

note:

• „CSS je jediný programovací jazyk, který se obviňuje namísto pranýřování mizerného autora.“
• pochází z článku kde se Josh zamýšlí nad tím, proč se pořád snižuje význam frontendu

Díky, prezentace za chvíli na @frontendisti