signageOS 12. 06. 2024

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

• Webexpo

  • 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

• CSS day 2024

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

• zoom

note:

• vlastnost zoom vš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()

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

• supports v @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ý @import jsme 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?

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)
  • sloupce
  • breaKouts
• 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() a clamp()), 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:

• knihovna/nástroj od Stephana Banda (sic!)
  • ukázka: Dolphin dance

Nowwwinky z JS

• ECMAScipt News: Stay up-to-date on JavaScript and tools

• Bytes.dev
  

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

• Picular (Google for colours)

• Cool backgrounds

• Meshy

• kontrola kontrastu u tlačítek

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