{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

# {𝐅}rontendisti

## Praha, Pivovar Lajka <br> 13. března ’24
<!-- .element: class="c-text-md" -->

<small>příště: 10. dubna v [Alma Career](https://magazin.almacareer.com/cz/lmc-se-meni-na-alma-career-nase-sluzby-pro-vas-zustavaji) (exLMC)</small><!-- .element: class="fragment" -->
<small>mezitím v Brně: ARTIN</small><!-- .element: class="fragment" -->

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](https://docs.google.com/forms/d/e/1FAIpQLSe4mba2CAA8eFSaCJtypDkAQzmVmuhSNAP7VwuOIqLj8xEySA/viewform)

---

## WWW minulém díle jste viděli

- [Petr Koláček: CSS :has power](https://youtu.be/n23zomcLCPg?si=XNvjJzJXti0Vqe8d)
<!-- .element: class="fragment" -->
- [Katka Voláková: Container queries](https://youtu.be/Tmv92XFVquA?si=WCl8Bx9GCXkG4sj6) (z FrontKonu)
<!-- .element: class="fragment" -->

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
<!-- .element: class="fragment" data-fragment-index="1" -->
- `NavigationActivation`
<!-- .element: class="fragment" data-fragment-index="2" -->

note:

- form elements resize to the content width, [example by Adam Argyle](https://codepen.io/argyleink/pen/WNLzyJK)
- Safari se tváří pozitivně, FF mlčí
- [`NavigationActivation`](https://html.spec.whatwg.org/multipage/nav-history-apis.html#navigation-activation-interface) 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](https://github.com/tc39/proposal-import-attributes/)

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

<!-- .element: class="c-text-sm" -->

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](https://css-irl.info/how-i-solved-my-font-rendering-problem/)


---

[Michelle Barker: How I Solved My Font Rendering Problem](https://css-irl.info/how-i-solved-my-font-rendering-problem/)

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

<!-- .element: class="fragment c-text-xs" data-fragment-index="1" -->

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

<!-- .element: class="fragment c-text-xs" data-fragment-index="2" -->

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](https://css-generators.com/tooltip-speech-bubble/)

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

<!-- .element: class="c-text-xs" -->

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

<!-- .element: class="c-text-xs" -->

---

[Textová bublina](https://css-generators.com/tooltip-speech-bubble/)

.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;
}

<!-- .element: class="c-text-xs" -->

---

## Kitát na záwwwěr

> CSS is the only language that gets blamed when the author is bad.
<!-- .element: class="fragment c-text-lg" -->
> <small>[Josh Collinsworth](https://joshcollinsworth.com/blog/devaluing-frontend)</small>
<!-- .element: class="fragment c-text-lg" -->

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](https://twitter.com/frontendisti)