Alma Career 12. 02. 2025

Brno dnes: Jak CSS5 mění přístup k psaní webu
příště: 12. března

note:

• Brno: jak se CSS6 postupně proměňuje v plnohodnotný jazyk pro vizuální logiku
• březen: hospodský sraz???, ale 14. května Mews
• 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

WWW minulém díle jste viděli

• Lukáš Chylík - Pozicování pomocí CSS anchor

• Karel Navrátil - Dark patterny. Kde leží hranice mezi motivací a manipulací uživatelů?

další videa na YT @Frontenditsti

note:

• trénink CSS anchor à la Flexbox froggy

Letem swwwětem

Prohlížeče

Firefox 135
vydán 4. února 2025

Chrome 133
vydán 29. ledna 2025

Safari 18.3
vydáno 27. ledna 2025

Web platform status

běžně dostupné: 3/2025

• contain: style
• samostatné transformační vlastnosti: translate, rotate, scale
• prefers-contrast

note:

• běžně dostupné (widely available): 2,5 roku od chvíle kdy fičuru implementoval poslední z trojice CH, FF, SF

nově dostupné: 3/2025

• ::target-text

• scrollbar-width, scrollbar-gutter

• popover

• Promise.try()

note:

• nově dostupné: aktuální verze CH, FF, SF podporují

omezená dostupnost: 3/2025

• text-box (CH, SF); KoutPen

• attr() (CH)

note:

• leading ~ proklad řádků
• dostupné jen v některých prohlížečích

omezená dostupnost: 3/2025

CSS funkce attr()

My text color is blue
My text color is red (the fallback value)

div {
    color: attr(data-clr type(<color>), red);
}

omezená dostupnost: 3/2025

CSS funkce attr()

<div class="star-rating" data-rating="4.5"> ...

.star-rating {
    --percent-fill: calc(attr(data-rating type(<number>)) * 20%);
    background: linear-gradient(
        to right,
        gold var(--percent-fill),
        transparent var(--percent-fill)
    );
}

KoutPen

note:

• přednou hodnotu otypujete, čárkou se odděluje výchozí hodnota (podobně jako u fce var())
  • nelze předávat URL, tj. obrázek na pozadí ne e
• hvězdičkové hodnocení pomocí <input type="range">

Zachyceno v síti

Josh Comeau: Browser support

note:

• Josh se zamýšlí nad přístupem k tak banální věci jako je podpora v prohlížečích
• ani 97% podpora nemusí znamenat bezproblémové použití
• přistupuje k věci z pohledu JS vývojáře, má celý kurz CSS for JS devs

Some Things You Might Not Know About Custom Counter Styles

@counter-style style-fourth-item {
  system: fixed 4;
  symbols: "💠";
  suffix: " ";
}

li {
  list-style: style-fourth-item;
}

note:

• KoutPen
• @counter-style nově dostupné od 9/2023 => běžně dostupné v 3/2026

@counter-style dice {
  system: additive;
  additive-symbols: 6 "⚅", 5 "⚄", 4 "⚃", 3 "⚂", 2 "⚁", 1 "⚀";
  suffix: " ";
}

li {
  list-style: dice;
}

note:

• KoutPen

Stefan Judis: Avoid uneven paragraph spacing


note:

• Stefan připomíná jednotku lh (nově dostupná od 11/2023 => běžně dostupná 5/2026)

State of…

• State of react 2024: výsledky
• State of AI

note:

• Kačka

Nowwwinky z JS

JavaScript Temporal is coming

// The current date in the system's time zone
const dateTime = Temporal.Now.plainDateTimeISO();
console.log(dateTime); // e.g.: 2025-01-22T11:46:36.144

// The current date in the "Europe/Brno" time zone
const dateTimeInBrno =
      Temporal.Now.plainDateTimeISO("Europe/Brno");
console.log(dateTimeInBrno);
// e.g.: 2025-01-22T05:47:02.555

note:

• po 30 letech nový objekt, který (snad dříve než za 30 let) nahradí Date()
• na MDN přibylo 270 stránek
• FF Nightly a jen experimentálně
• na příštím brněnském srazu bude přednáška (záznam)

Nástroje a udělátka

rozhodovací mapa pro použití alt

Color Find

note:

• trénink očí, včera do 26 úrovně

knihovna scrollovacích animací

note:

• Adam Argyle v rámci svého Nerdy notebook

KoutPen

note:

• ještě jeden KoutPen od Manuela Matuzoviće, který vše rozepsal v článku

Dnes wwwečer

• Tereza Kosnarová
  Inkluzivní mindset - důležitý krok k tvorbě přístupných digitálních služeb?
• Tomáš Litera, Alma Career
  Jak předcházet chaotické organizaci npm skriptů
• Adam Kulhánek
  Code & mind - Jak si udržet výkon, klid a sebevědomí v IT světě

note:

• přestávka po první přednášce: pizza!

Díky, prezentace v komentáři na Meetup.com