IMPACT hub 10. 12. 2025

Praha dnes: v Brně
příště: 11. února…

note:

• na úvod vánoční hra, rozcvičíme se

WWWánoce!


note:

• lístky ranním ptáčatům za 3490 Kč (včera 99 ks – dnes?)

WWWánoce

WWWánoce

A to se vyplatí!!!

note:

• nadílka
• tip na vánoční dárek

WWW minulém díle jste viděli

• Milan Herda - Dependency Injection v JavaScript-e
• Tomáš Litera – Safe navigation through upgrades in npm package minefield
• Stage F
• Stage E
• Partnerská stage

note:

• konečně jsem zjistil, že depenency injection správná věc na rozdíl od třeba SQL injection
• Tomáš připomenul nedávné bezpečnostní potíže NPM a nabídl řešení
• FrontKon: ať si vyplníte čekání na další sraz tím spíš FrontKon '26

Letem swwwětem

Prohlížeče

Firefox 146
vydán 9. prosince 2025
Chrome 143
vydán 19. listopadu 2025
Safari 26.1
vydáno 3. listopadu 2025

note:

• CH144 až v lednu, SF26.2 jen v betě
• Interop 2025, dlužníci:
  • SF, FF Navigation API
  • FF kotvení CSS anchor positioning, @scope
  • SF Core web vitals, scrollend event, Storage access API, <details>

Web platform status

běžně dostupné: 12/2025

• matematické funkce
• konstanty pro calc(): e, pi, infinity, -infinity, NaN
• container queries
• @media (23ch < width <= 78ch)
• :nth-child() of <selector>
• lab, lch, oklab a oklch
• funkce color() a color-mix()
• :autofill
• inert
• JS moduly (ESM) ve workerech
• a další…

note:

• běžně dostupné (widely available): 2,5 roku od chvíle kdy fičuru implementoval poslední z trojice CH, FF, SF
  • fičury nově dostupné v prvním pololetí 2023
• atribut inert: označí NEinteraktivní prvky
• matematické fce s výjimkou abs() a sign()
• :autofill – formulářová pole vyplněná prohlížečem

nově dostupné: 12/2025

• View transitions
• ::details-content
• content-visibility

note:

• nově dostupné: aktuální verze CH, FF, SF podporují
• FF doplnil základní podporu přechodů v 144, ale pouze v rámci jednoho dokumentu
• content-visibility SF od verze 26
• bohužel tam není kotvení

Zachyceno v síti

Potřebujeme nastavovat box-sizing?

*,
&::before,
&::after {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

• Miriam Suzanne: Don't Inherit the Box Model
• Kevin Powel: It might be time to rethink box-sizing: border-box

note:

• podle mnohých už ho neopotřebujeme, protože dávno nenastavujeme prvkům pevné rozměry
  • dědictví Bootstrapu, jehož rozvržení vycházelo z pevně daných rozměrů (má to tam ještě verze 5, ehm)
• tzn. nechat výchozí box-sizing: content-box a kde je to potřeba nastavit border-box
• nicméně Kevin nedoporučuje to vykuchávat z existujících projektů
• There's no such thing as a CSS reset

Benjamin Anderson: Technická deflace

note:

• deflace zní sympaticky, ale nese v sobě problém – odloženou spotřebu
• je stále jednodušší vyvíjet software (co dříve trvalo měsíce, dnes trvá týdny, lze očekávat, že zanedlouho to budou dny)
• využít nabytý čas (i ostatní zdroje) na kšeft, promo, distribuci atd.

HTMHell Advent Calendar 2025

• Stephanie Eckles – Top layer troubles: popover vs. dialog
• Aubrey Sambor – Controlling dialogs and popovers with the Invoker Commands API
• Kilian Valkhof – IDREFs: What they are and how to use them

note:

• ponor do vybraných témat
• command a commandfor
  • kazí SF…26.2 🙏🏾
• <plaintext> k vychytávání much (debugging)
• Manuel Matuzović z předměstí Brna

Adam Argyle – Co všechno vědí prvky na stránce (dokonce o nás)

note:

• napadne vás, co všechno vědí?
  • aby byl jasný směr uvažování, tak třeba velikost zařízení a jeho orientaci, zda je dotykové či ne
  • uživatelské preference: světlé/tmavé téma, kontras tní barvy
  • směr písma
  • kolik mají prostoru, kolik obsahují prvků a jaké (:has())
  • co je a není zrovna vidět (scoll animations)
  • jestli je formulář vyplněný správně
  • a další => 23 položek zatím

Nástroje a udělátka

Andreas Møller – CSS has become too POWERFUL

• OKLCH
• gradienty
• časovací funkce (vč. lineární interpolace)
• shape()

note:

• CSS už se bez vizuálních nástrojů a udělátek zkrátka neobejde
• celá sada jich je v článku na blogu nástroje Nordcraft – snaží se odpovědět na bolesti Figmy, která nestíhá držet krok s rozvojem CSS

KoutPen

Interpolace barev v CSS

.prvok {
  color: color-mix(in lch longer hue, red, blue);
}

note:

• důležité je to longer (vs výchozí shorter)

Ještě jedna hra‽

note:

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