{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

# {𝐅}rontendisti
#### Praha, Seznam.cz <br> 14. února ’24

<small>příště: 13. března, upřesníme kde</small><!-- .element: class="fragment" -->
<small>pozvánka na event [Jest & Yarn](https://oss.institute/events/christoph-nakazawa)</small><!-- .element: class="fragment" -->

note:

- organizačně:
- nechodit po schodech nahoru ani dolů
- odchod z budovy jen s doprovodem
- předat Břéťovi pozvánku
- představit spolek
> Budujeme a vzděláváme komunitu frontendových vývojářů a designérů, a to již 10 let!!!!!!!!!!
- **pozvat Břéťu s Máchalem – organizátory**
- 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)

---

# Letem swwwětem

note:

- 10 let, 21. února 2014: preprocesory (Martin Michálek: [Less](https://www.youtube.com/watch?v=d1fbvvleZYk), Michal Matuška: [Stylus](https://www.youtube.com/watch?v=yCx_yrsLbKE), Jonáš Krutil: [Sass](https://www.youtube.com/watch?v=Q4UCtuvMDTI))

---

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

- Petra Nulíčková: [Když ptáčka lapají… aneb na co si dat pozor než příjmu nabídku](https://youtu.be/KDhjQviA-qM?si=JavAa1yr3NPCeZED)
- Radek Šír: [CORE WEB VITALS: Co nejvíce kazí metriku CLS](https://www.youtube.com/watch?v=3gYyW2752AI)
- [CSS Café](https://www.youtube.com/@9elements/videos) (en)

note:

- Petra sice nemohla dorazit, ale před časem nám prozradila spoustu tipů, na co si dát pozor, chystáte-li se na pohovor [v listopadu 22](https://youtu.be/KDhjQviA-qM?si=15dgd0eX8NSt6Smz): Když ptáčka lapají
- CSS Café: naposledy povídání o tom, jak lze pomocí CSS loupit uživatelská data (z formulářů)
- videa z FrontKonu! Kolik jste jich od listopadu zhlédli?

---

## WWWe výhledu

note:

---

## Dnes WWWečer

- **Josef Krajkář**, Seznam.cz
Vývoj TV aplikací v Reactu
- **Marek Velas**, [EDUPunk](https://edupunk.cz/)
Pracovní portfolio, které mluví za Vás: Umění prezentovat vlastní dovednosti a neztratit se.
- **Petr Koláček**, [Etnetera Core](https://www.etnetera.cz/)
CSS :has power

note:

- změna programu: Petra Nulíčková onemocněla, objeví se někdy příště

---

## Letem swwwětem aneb nowwwinky

note:

---

### Prohlížeče

note:

- prohlížeč od Seznamu mi na linuxu nefunuguje 🥺
- ale podíváme se na stav prohlížečů v době prvního srazu Frontendistů v Klubu cestovatelů

---

#### Stav prohlížečů 2/2014

- Internet Explorer: 11<!-- .element: class="fragment" -->
- Chrome: 33<!-- .element: class="fragment" -->
- Firefox: 27<!-- .element: class="fragment" -->
- Safari: 7.0<!-- .element: class="fragment" -->

note:

- IE11 ¼ roku starý!
- Google zrušil Chrome frame - plugin do IE6, který umožnil uvnitř prastarého IE6 surfovat v Chromu
- ještě ani rok od úmrtí mé milované a jistých ohledech stále nepřekonané Opery

---

#### Stav prohlížečů 2/2014

| prohlížeč | podíl |
| ---------- | ------- |
| Chrome | 36,48 % |
| IE | 17,34 % |
| Firefox | 14,88 % |
| Safari | 12,57 % |
| Android | 7,08 % |
| Opera | 4,21 % |
| UC Browser | 2,65 % |

---

#### Microsoft Edge 121
_vydán 25. ledna 2024_

note:

- Jako posledně… jdeme dál

---

#### Firefox 122
_vydán 23. ledna 2024_

- `:has` od verze 121

note:

- 119=>122
- Máme má (podpora `:has` ve FF od prosince) více dnes Petr Koláček
- `:has` je asi největší trhák loňského roku

---

#### Chrome 122
_vydán 14. února 2024_

- zjednodušený pravopis pro zanořování selektorů

/* původní zápis zanořených selektorů */
.card {
  & h1 {
    /* … */
  }
}

/* od verze 120 (FF 117…) */
.card {
  h1 {
    /* … */
  }
}

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

---

- `supports` pro `@import`

@import url("fallback-layout.css") supports(not (display: flex));
@supports (display: flex) {
  ...
}

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

note:

- 119=>122
- další posílení stylopisů => odklon od preprocesorů (které navíc toto nedokážou)

---

#### Safari 17.3
_vydáno 22. ledna 2024_

- `counter-set`

note:

- 17.1=>17.3
- dohání to, co uměly ostatní před 3 a více lety
- spousty oprav

---

## Zachyceno v síti

---

### [Interop](https://web.dev/blog/interop-2024)

- [Interop 2024](https://wpt.fyi/interop-2024?stable) => skoro 50 % hotovo,
- [Interop 2023](https://wpt.fyi/interop-2023?stable) => 83 % splněno

note:

- iniciativa prohlížečů postupovat pokud možno jednotně v implementaci nových funkcí
- FF vychází hůře, ale vinou nepodpory opravud pokročilých akcí s proměnnými vlastnostmi, chybějící podporou atributu `popover` a dalších, ovšem je únor a beta FF je na tom mnohem lépe

---

### Jquery 4.0

<img src="https://hackmd.io/_uploads/HytotVIoa.png" style="width: auto" height="400"><!-- .element: class="fragment" -->

note:

- zdravíme Rikiho

---

### Nativní funkce a mixiny v CSS

<iframe src="https://front-end.social/@mia/111920937380059792/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="600" height="500" allowfullscreen="allowfullscreen"></iframe>

---

@function --negative (--value) {
  result: calc(-1 * var(--value));
}

html { padding: --negative(var(--gap)); }

note:

- toto není výsledná podoba, pouze návrh, jak bychom v budoucn mohli funkce a mixiny zapisovat
- související [diskuze W3C](https://github.com/w3c/csswg-drafts/issues/9350#issuecomment-1939628591)

---

@mixin --button (--face, --text, --radius) {
  --background: var(--face, teal);
  --color: color-mix(in lch, var(--text, white) 85%, var(--background));
  --border-color: color-mix(in lch, var(--text, white) 80%, var(--background));

  @result {
    background: var(--background);
    border: medium double var(--border-color);
    border-radius: var(--radius, 3px);
    color: var(--color);
    padding: 0.25lh 2ch;
  }
}

button[type='submit'] { @apply --button(rebeccaPurple); }
button.danger { @apply --button(maroon); }

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

note:

- v Interops 2024 to zatím není

---

### Jak využít zanořování k tvorbě if/else selektorů

complex-selector {
  if-styles;

  :not(&) {
    else-styles
  }
}

note:

- [zdroj: Lea Verou](https://front-end.social/@leaverou/111920203377359401)

---

### [Scope v CSS](https://matuzo.at/blog/2023/100daysof-day101)

@scope(.card) { 
  .content {
    border: 5px solid red;
  }
}

note:

- zatím jen v Chromu za flagem, ale vypadá to slibně

---

#### Scope v CSS

<div class="wrapper">
  <div class="card">
    <div class="content">
      kaskádu nezastavíš
    </div>
  </div>
</div>

---

#### Scope v CSS

.card .content {
  background-color: green;
}

.wrapper .content {
  background-color: blue;
}

/* -> blue */

---

#### Scope v CSS

@scope (.card) {
  .content {
    background: green;
  }
}

@scope (.wrapper) {
  .content {
    background: blue;
  }
}

/* -> green */

note:

- nezvyšuje se specificita, `.content` má specificitu 0, 1 ,0
- scoping upřednostní pravidlo pro selektor, který je blíže ke stylovanému prvku
- celé to nabírá grády
- dokud nebude scoping, existuje [hack pomocí přepínačů proměnných vlastností](https://kizu.dev/cyclic-toggles/#and-nand-or-nor-xor-xnor)
- nebudu zabrušovat, skončil jsem s vyvrácenou sanicí u čtvrtého odstavce, navíc nemáme čas
- ukázky kódu lze přinejmenším použít na důkaz toho, že CSS je programovací jazyk

---

### KoutPen

---

Stephanie Eckles: [Nemálo husté užití `:is`, `:has`, `:not`](https://codepen.io/5t3ph/pres/KKEmMXR)

note:

- mrkněte i na [diskuzi pod příspěvkem](https://front-end.social/@5t3ph/111778445324803830), Bramus tam řeší výkonnost daných pravidel
- CodePen: vizuelně nic moc, ale ten kód!

---

Ana Tudor: [jednobarevné emoji pomocí CSS filtrů](https://codepen.io/thebabydino/pen/PoQEqxg)

note:

- 💗 💓 💞 💕 ❣️ 💘 💋 💯 🔥 🧡 💛 💚 💙 💜 🤎 🖤 🤍 💥 💔 💦

---

Díky, prezentace za chvíli na [@frontendisti](https://twitter.com/frontendisti)