Etnetera 10. 09. 2025

partnerem srazu je Green:Code
Brno dnes: Diskusní večer na téma AI tooling pro efektivní webový vývoj

note:

• 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

Uwwwidíme se?

11. září
    React Girls, Mews: Budoucnost vývoje aplikací v AI době
12. září
    TechTalks, Make: Make It Agentic: From Idea to Prototype (and Paying Agents)
13. září
    TECH talk, signageOS: CTOs na GRILU
14. září
    FrontEnd Meetup, Ataccama: TBA
15. října
    FrontKon, Brno – Hotel Passage

note:

• v Maku ubývají místa!
• sinageOS: diskuse, připravte si otázky na tělo
• FrontKon:
  • lístky stále jsou, do neděle i lístky s obědem
  • z Prahy pojede vlak, respektive speciální vagón
• 9. října (čt po FrontKonu) Front&Cookies s Riki Fridrichem tady

WWW minulém díle jste viděli

• Petr Koláček - Mobile First – proč neustále ignorujeme skutečnost?
• Lena Ansorgová - Frontend versus Dokumentace
• Břetislav Proft - Může nám AI pomoci ladit Web Vitals?
• Form control styling - Tim Nguyen - CSS Day 2025
• Frontkec

note:

• Petr nám vyčinil, že to pořád děláme blbě. Všichni. I on.
• technický dokumentarista/technical writer – znáte? Tak šup, koukejte
• Břéťa představuje jednu s možných cest, jak se vyznat v záložce Perfomance, když nejste Michal Matuška
• Tim: stylování formulářových prvků dnes a hlavně zítra, appearance: base; + formulářové prvky rozpadlé do pseudoelementů
• Frontkec: Vzhůru dolů se převtělilo, venku 1. díl, příští týden další

Letem swwwětem

Prohlížeče

Firefox 142
vydán 19. srpna 2025
Chrome 140
vydán 27. srpna 2025
Safari 18.6
vydáno 29. července 2025

note:

• příští Safari bude 26

Zachyceno v síti

Co možná nevíte o atributu href

href=""
href="."
href="?"
href="data:"
href="video.mp4#t=10,20"

note:

• data: funguje ve FF, ne v CH
• video začne v 10. vteřině, zastaví po 20 s; omezená podpora!
• pokud znáte, možná budete znát i pravidla pro psaní e-mailových adres…

E-mail.wtf

Znáte pravidla pro platné emailové adresy?

👉@👈
"@"@[@]

I scored 9/21 on https://e-mail.wtf and all I got was this lousy text to share on social media.

note:

• JS date

Eric Meyer: Infinite Pixels

div {
	width: calc(infinity * 1px);
	height: calc(infinity * 1px);
	margin: 0;
	padding: 0;
	font-size: calc(infinity * 1px);
}

note:

• FF má výchozí hodnotu pro rozvržení stránky 1/60 px
  • oněch 17 mil je zhurba 2³⁰ šedesátin pixelu

Una Kravets: 5 Useful CSS functions using the new @function rule

/* Return a semi-transparent value */
@function --opacity(--color, --opacity) {
  result: rgb(from var(--color) r g b / var(--opacity));
}

/* usage */
div {
  background-color: --opacity(red, 80%);
}

/* with custom properties (assuming theme variables) */
.card {
  border-color: --opacity(var(--color-secondary), var(--mostly-opaque));
}

Una Kravets: 5 Useful CSS functions using the new @function rule

<nav aria-labelledby="toc-label">
	<span id="toc-label" hidden>Table of Contents</span>
    <ol role="list">
        <li><a href="#one">Section One</a></li>
        <li><a href="#two">Section Two</a></li>
        <li><a href="#three">Section Three</a></li>
        <li><a href="#four">Section Four</a></li>
        <li><a href="#five">Section Five</a></li>
    </ol>
</nav>

nav[aria-labelledby=toc-label] {
    scroll-target-group: auto;
}

a:target-current {
    font-weight: bold;
    text-decoration-thickness: 2px;
}

user.theme ||= 'light';

user.isLoggedIn &&= checkPermissions(user);

settings.timeout ??= 3000;