---
# System prepended metadata

title: "14. února ’24 | {\U0001D405}rontendisti"
tags: [frontendisti]

---

{%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ů

```css=
/* 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`

```css=
@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>

---

```css=
@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)

---

```css=
@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ů

```css=
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)

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

note:

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

---

#### Scope v CSS

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

---

#### Scope v CSS

```css=
.card .content {
  background-color: green;
}

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

/* -> blue */
```

---

#### Scope v CSS

```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)