signageOS
Brno dnes: diskuzní večer na téma vyhoření
příště: 11. září nesjpíš hospoda
Letem swwwětem
note:
- představit spolek
Budujeme a vzděláváme komunitu frontendových vývojářů a designérů
- organizační náležitosti
- 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
Dnes
- Michael Žabka, signageOS
Webové technologie trochu jinak - Ovládání a monitorování profesionálních displejů (televizí) - Petra Nulíčková, Pale Fire Capital
Ovládnutí pohovoru pro frontend vývojáře: Klíčové otázky, varovné signály a strategie, jak zazářit na pohovoru. - Lukáš Trumm, Quanti
CSS se stále zlepšuje - využijme toho!
note:
- prožram
WWW minulém díle jste viděli
-
Ondřej Konečný: Problémy a složitosti při psaní CSS
-
-
Jindřich Karásek: The astounding web of cognitive warfare
-
Nick Fine: Signal to noise in the age of misinformation
-
Bramus Van Damme: Scroll-driven animations with CSS
-
note:
- tentokrát mimo YT kanál Frontendisti.cz
- Ondra: výsledky dotazníku příští týden
- kdo byl na Webexpu?
- Jindra: lovec hackerů, vlivové operace, které u nás probíhají
- Nick: příměr s jídlem
Nedáme si do úst jakékoli jídlo, které najdeme. Pokud neznáme jeho původ, nejsme si jisti, že nám po něm nebude špatně, raději ho vynecháme. Tak proč bez obav konzumujeme informace odkudkoli?
- Bramus: protože jsem vám to říkal posledně, že to bude jízda, a byla
- kdo byl v Amsterdamu?
- předplatné 50 Kč/měsíc – 14 přednášek se dá
- i oni 10 let jako {F}rontendisti
Prohlížeče
Firefox 127
vydán 11. června 2024
note:
- vlastnost
zoomvšechny ostatní prohlížeče podporují už od jednotkových verzí (přes 12 let)- zřejmě souvisí s původem této nestandardní vlastnosti v IE6, kde se jejím použitím zapínala vlastnost
hasLayout, takový hack z dřevních dob - používejme raději
transform: scale()
- zřejmě souvisí s původem této nestandardní vlastnosti v IE6, kde se jejím použitím zapínala vlastnost
Chrome 126
vydán 5. června 2024
.obrazek-pred {
&::before {
content: url("cat.jpg") / "Kočička k zulíbání";
}
}
note:
- tohle už funguje! (od verze 77, rok 2019)
Chrome 126
vydán 5. června 2024
.obrazek-pred {
&::before {
content: url("cat.jpg") / attr(data-zviratko) " k zulíbání";
}
}
note:
- tohle je novinka
- těch
attr()tam údajně může být víc
Safari 17.5
vydáno 13. května 2024
-
light-dark() -
text-wrap-style: auto|balance|stable -
supportsv@import
@import url("gridy.css") supports(display: grid) screen and (max-width: 400px);
@import url("flexy.css") supports((not (display: grid)) and (display: flex)) screen and (max-width: 400px);
note:
- dorovnává ostatní
- podmíněný
@importjsme už viděli, ale zopakujeme si ještě jednou
Zachyceno v síti
Tip
- vzít si zpět kontrolu nad vzhledem stránky pomocí
:has()
p:has(>img) {
display: contents;
}
note:
- markdown (nebo CMS) obaluje obrázky do odstavců, což může hatit dezén
- posílit ještě
:only-child?
- posílit ještě
Kerntype
note:
- díky Karlosovi (advokát-kódér) za tuhle kratochvíli do mobilu (užitečnější než doom scrolling) – Webexpo after party
CSS day 2024: Kevin Powell
note:
- Jak zhustit Kevinovu přednášku do pár vět, když trvala asi 35 minut?
- Nebát se overengineeringu: i když se může zdát ztraceným časem, něco se naučíte, něco se dozvíte. Obzvlášť když to publikujete: při troše štěstí se vám někdo ozve s tím, „a nešlo by to udělat spíš takhle?“
- víc on sám
- vytvoříte-li něco robustního, je potřeba usnadnit ovládání (příměr s autem)
- Kevinovy KoutPeny
- TIL: media queris +
calc()
CSS day 2024: Kevin Powell
@media (min-width: calc(60ch - 20px)){}
@media (min-width: min(60ch, 400px)){}
@media (min-width: clamp(60ch, 10rem, 400px)){}
note:
- sice mě nenapadá (krom prvního) použití, obzvlášť když se masivně odkláníme od používání media queries (právě díky funkcím jako je
min(),max()aclamp()), ale je to pozoruhodné (a funguje to už dlouho)- a možná, že to v nowwwinkách už zaznělo, ale kdo si to má všecko pamatovat
Hudba v CSS gridu
.staff {
display: grid;
row-gap: 0;
grid-template-rows:
[A5] 0.25em [G5] 0.25em [F5] 0.25em [E5] 0.25em
[D5] 0.25em [C5] 0.25em [B4] 0.25em [A4] 0.25em
[G4] 0.25em [F4] 0.25em [E4] 0.25em [D4] 0.25em
[C4] 0.25em ;
background-image: url('/path/to/staff.svg');
background-repeat: no-repeat;
background-size: 100% 2.25em;
background-position: 0 50%;
}
note:
- tip od Kevina Powella
staff= notová osnova
Hudba v CSS gridu

note:
Nowwwinky z JS
-
ECMAScipt News: Stay up-to-date on JavaScript and tools
note:
- malá splátka dluhu té části přítomných, která holduje spíše JS
- ECMAScript news: týdenní souhrn novinek:
- Rust nejrychleji rostoucím jazykem – programovacím, ale na JS zatím nemá ani smykem
- návod jak na Promises
- jak pracovat s
ArrayBuffers- víte, co jsou
ArrayBuffers? (úložiště binárních dat v JS, v podstatě černá skříňka – tvrdí autor, za tuto větu jsem nečetl)
- víte, co jsou
- aktualizace knihoven (Prettier 3.3)
- zajímavé NPM balíčky (regex)
Bytes.dev
window.name = "Mike Tyson";
const me = {
name: "Tyler",
sayName() {
console.log(this.name);
},
};
const sayName = me.sayName;
sayName();
note:
- Co se vypíše do konzole?
Nástroje a udělátka
Layout Breakouts Builder
note:
- jak to funguje, vysvětluje Kevin Powell
Cosima Mielke: Color tools (Smashing magazine)
note:
jen Picular
- sbírka nejrůznějších pomůcek k míchání a kombinování barev, tvorbě přechodových pozadí a další jako např.:
- Picular: maso×flesh, jiné věci odpovídají
- Meshy už jsem tu možná ukazoval…
- nejen generátory, ale i kontrola kontrastu
KoutPen
note:
- stačilo :wink:
Díky, prezentace za chvíli na @frontendisti
