{𝐅}rontendisti v Betsys 12. 04. 2023

příště:
{F}rontendisti 10. května, Na věnečku, Smíchov
Pipedrive: 3. května Machine learning & OpenAI

note:

• v Brně právě teď: _Diskuzní večer o produktivitě při práci (nástroje, workflow)

• příště pravděpodobně na Věnečku

• Tomáš Litera, LMC
  Dialog element - nevymýšlej znovu modal!

• Dawid Zbiński, Betsys
  Úvod do zpracování obrázků v JavaScriptu

• moderovaná diskuse
  Jak se díky moderním nástrojům (z)mění práce (fe) vývojáře?

note:

• Marek Velas se omlouvá, onemocněl

Letem swwwětem

Nemělo by vám uninkout

• Vylda aka Vilém Lipold: State of CSS 2022 – outsiders
• Martin Rubáš: Play it wrong or Playwright
• Martin Michálek: Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojáře

note:

• přehled přednášek z posledních meetupů (Brno+Praha)
• Vylda přinesl přehled zajímavých novinek, které jsou, jak vyplývá ze State of CSS, opomíjené (neznámé, nebo nepoužívané)
• Martin o testování frontendu pomocí frameworku Playwright
• Máchal vyzobal ze své bohaté praxe 10 tipů na zrychlení webů (vybral jsem proto, že z přednášky vzešlo hned několik úkolů pro naše kódéry)
• další přednášky o blockchainech v prohlížeči, Nuxt 3, cachovací strategie, organizace projektů pomoc monorepa na YT kanále {𝐅}rontendisti

Prohlížeče

Microsoft Edge 111

vydán 13. března 2023

note:

• Nic převratného.

Firefox 112

vydán 11. dubna 2023

note:

• Nic zásadního, a 113 zatím vypadá obdobně…

Chrome 112

vydán 29. března 2023

• nativní zanořování (CSS nesting)

.foo {
  color: red;

  &:hover {
    color: navy;
  }

  + .bar {
    color: blue;
  }
}

note:

• obdoba toho, co známe z preprocesorů, ale nepůjde spojovat názvy tříd, jako se někdy zapisuje BEM
• byť konsorcium na specifikaci stále pracuje
• FF někdy také, Safari od 16.5

Nelze (na rozdíl od preprocesrů)

form {
  border: 1px solid silver;

  input {
    margin: 1em;
  }
}
/* Invalid, because "input" is an identifier. */

Nutno takto (na rozdíl od preprocesrů)

form {
  border: 1px solid silver;

  & input { margin: 1em; }
  /* valid, no longer starts with an identifier */

  :is(input) { margin: 1em; }
  /* valid, starts with a colon,
     and equivalent to the previous rule. */
}

Safari 16.4

vydáno 27. března 2023

@media (100px <= width <= 1900px) {
    /* rulesets */
}

article {
    margin-trim: inline-start;
}

note:

• zjednodušený zápis media queries pomocí rozsahů jako poslední důležitý prohlížeč, i když s křížkem po funuse, media queries už nejsou tak důležitá (tekutý gid, min(), max() funkce, container queries)
• margin-trim (příklad užití na MDN), pouze Safari…
• CSS nesting od verze 16.5 (nyní jako beta)

Zachyceno v síti

OpenProps

note:

• na minulém srazu představil Petr Koláček z Etnetery
• 4 kB framework od Adama Argyla
• demo základ
• demo komponenta
• tip k devTool: změnit paletu (barvy na stránce, všecky proměnné vlastnosti)

Josh Collinsworth: Ten tips for better CSS transitions and animations

note:

• perfektní sada tipů, chyb, kterým je třeba se vyhnout, a ukázek animací
• méně znamená více => nedělejme animace příliš dlouhé; zkracovat, dokud nám nepřijde příliš rychlá a pak ji malinko zpomalit
• nepoužívat výchozí hodnoty prohlížečů; VS code skvěle doplňuje hodnoty Bézierových křivek
• inspirovat se skutečným pohybem; nikdy se nic okamžitě nerozpohybuje ani nezastaví; CodePen

Daniel C. Wilson: Improving CSS Shapes with Trigonometric Functions

• sinus, cosinus, deskriptiva…
• clip-path, shape-outside

note:

• trigonometrické funkce (sinus, cosinus, tangens) jsou nově podporovány v CSS funkci calc()
• Chrome (jako poslední) přidal podporu ve verzi 111, v nowwwinkách jsem tehdy vynechal, přišlo mi to jako obskurní záležitost, leč chyba lávky!
• nutno oprášit znalosti kuželoseček a analytické geometrie => vyjadřování křivek pomocí rovnica
• přehled tvarů
• animace

Nevíte, co je to „překvapník“‽

note:

• anglicky interrobang
• nádherný blog pro typografické labužníky
• překvapník dle Wikipedie razí desginér Filip Blažek

Penpot

note:

• klon Figmy vzniklý v reakci na akvizici Adobe
• funguje i offline, buď v Dockeru nebo Elestio

CodePen

Infinite loader (animace SVG)

note:

• jak to funguje?!

Pixelated image

• využívá vlastnost image-rendering

  transform-origin: 0 0;
  transform: scale(6000, 1);
  background-image:inherit;
  image-rendering: pixelated;
  transition: all 2s cubic-bezier(.5,0,0,1) ;

note:

• jednoduché a efektní
• vlastnost image-rendering se uplatní pouze pro obrázky, u nichž se liší zobrazovaná velikost od skutečné

Díky, prezentace během večera na @frontendisti