Seznam.cz 14. 02. 2024

příště: 13. března, upřesníme kde
pozvánka na event Jest & Yarn

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

Letem swwwětem

note:

• 10 let, 21. února 2014: preprocesory (Martin Michálek: Less, Michal Matuška: Stylus, Jonáš Krutil: Sass)

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
• Radek Šír: CORE WEB VITALS: Co nejvíce kazí metriku CLS
• CSS Café (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: 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

Dnes WWWečer

• Josef Krajkář, Seznam.cz
  Vývoj TV aplikací v Reactu
• Marek Velas, EDUPunk
  Pracovní portfolio, které mluví za Vás: Umění prezentovat vlastní dovednosti a neztratit se.
• Petr Koláček, Etnetera Core
  CSS :has power

note:

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

Letem swwwětem aneb nowwwinky

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
• Chrome: 33
• Firefox: 27
• Safari: 7.0

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

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 {
    /* … */
  }
}

• supports pro @import

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

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

• Interop 2024 => skoro 50 % hotovo,
• Interop 2023 => 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

note:

• zdravíme Rikiho

Nativní funkce a mixiny v 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

@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); }

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

Scope v CSS

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

note:

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

Scope v CSS

  

    

      kaskádu nezastavíš
    
  

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í
  • 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

note:

• mrkněte i na diskuzi pod příspěvkem, Bramus tam řeší výkonnost daných pravidel
• CodePen: vizuelně nic moc, ale ten kód!

Ana Tudor: jednobarevné emoji pomocí CSS filtrů

note:

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

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