Alma career 11. 06. 2025

Brno dnes: Diskusní večer o UX, Frontendu a AI – Jak na produktivní workflow
příště: 10. září
jinde: 25. června, Techtalk (SinageOS)
přespříště: 1. října, FrontKon (Hotel Passage Brno)

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

WWW minulém díle jste viděli

• Kristýna Marková - Robot prošel, člověk narazil: proč nestačí automatizované testy přístupnosti
• Lukáš Kratochvíl - I Know Kung Fu – Jak MCP odemyká skryté síly umělé inteligence
• Z. Pešková, I. Zatloukalová, M. Velas - Panelová diskuze: Jak si říci o peníze – a nejen o ně

note:

• automatizované testy odhalí 20 % chyb
• MCP = Model context protocol
• videa z Webexpa

Letem swwwětem

Prohlížeče

Firefox 139
vydán 27. května 2025
Chrome 137
vydán 21. května 2025
Safari 18.5
vydáno 12. května 2025

note:

• FF: Temporal API
• CH: CSS if()
• SF: příští verze bude 26 (nové číslování u Applu)

Web platform status

běžně dostupné: 5/2025

• font-palette

note:

• běžně dostupné (widely available): 2,5 roku od chvíle kdy fičuru implementoval poslední z trojice CH, FF, SF
• font-palette: vlastnost, která určí konrétní paletu u barevných fontů

nově dostupné: 5/2025

• dialog.requestClose()

note:

• nově dostupné: aktuální verze CH, FF, SF podporují
• metoda zavře dialog a navíc odpálí metodu cancel

omezená dostupnost: 5/2025

• reading-flow & reading-order
• if()

property: if(
  style(<condition>): <value>;
  style(<another condition>): <another value>;
  else: <fallback>
);

note:

• dostupné jen v některých prohlížečích
• reading-flow - pořadí prvků nemusí už odpovídat pořadí v DOMu

omezená dostupnost: 5/2025

CSS if()

div {
  color: var(--color);
  background-color: if(
      style(--color: white): black;
      media(width > 600px): crimson;
      else: white
  );
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

Zachyceno v síti

Stav CSS

Tiskové styly

note:

• Proč? A11y, státní správa atp. – záleží…
• Jak si upravit web
  • prostý návod jak obyčejnou stránku pěkně ostylovat

Ostylujte alt text

img {
  display: block;
  max-width: 100%;
  font-style: italic;
  font-size: var(--size-step-1);
  line-height: 1.5;
  text-wrap: balance;
}

note:

• událost onerror máte v základu
• háčky:
  1. Safari
  2. vyplňovat alt

Ostylujte alt text

const images = document.querySelectorAll("img");

if (images) {
  images.forEach((image) => {
    image.onerror = () => {
      image.setAttribute("data-img-loading-error", "");
    };
  });
}

Typografie pro nejmenší

note:

• najděte 5 rozdílů

CSS carousel není přístupný

note:

• článek od Adama Argylea
• Sara Soueidan rozebírá nový návrh od Googlu na prvočinitele
• Adrian Roselli rovnou obviňuje Google, že vydá něco nehotového a chce od dobrovolníků, aby za něj přístupnost dotáhli

Nástroje a udělátka

Prostě QR kód

Starý dobrý(?) Google

• dotaz
• tentýž dotaz od plic
• tentýž dotaz

note:

• trik je v parametru &udm=14

KoutPen

A11y: ARIA

note:

• sbírka koutpenů od Manuela Matuzoviće, různé použití aria- atributů

Ještě k přístupnosti…

A <div> is not a <button>, but a <Button> is often a <div>.

— Manuel Matuzović

note:

• opsáno od Andy Bella

Čtení na prázdniny: SVG animace

1. How Classic Cartoons Inspire Modern CSS
2. How CSS Masking Can Add An Extra Dimension
3. SMIL's Not Dead Baby, SMIL's Not Dead
4. Optimising SVGs

VC (vendor lock)

Dnes wwwečer

• Adam Kudrna
  CSS subgrid
• Petr Koláček, Etnetera
  Mobile First – proč neustále ignorujeme skutečnost?
• Tomáš Zezula, Upheal
  GraphQL pro správu licencí a feature flagů v SaaS aplikacích

note:

• přestávka po první přednášce?
• Upheal pořizuje poznámky během sezení u psychologa

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