{𝐅}rontendisti v Betsys
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?!
- 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-renderingse uplatní pouze pro obrázky, u nichž se liší zobrazovaná velikost od skutečné
Díky, prezentace během večera na @frontendisti