---
# System prepended metadata

title: 10. září ’25
tags: [frontendisti]

---

---
title: "10. září ’25"
tags: frontendisti
---

{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

<style>
    svg {
        padding: 1em;
        background-color: #000021;        
        color: #00baff;
    }
</style>

<svg xmlns="http://www.w3.org/2000/svg" width="226.634" height="80" viewBox="0 0 59.964 21.167" id="frontendisti-logo">
  <path fill="#fff" d="M17.587 4.913V3.744h-5.499V9.43h1.38V7.277h3.55V6.108h-3.55V4.913Zm2.519 4.517V7.82h2.324l.861 1.609h1.576l-1.032-1.933c.626-.374.942-.958.942-1.755 0-.593-.203-1.08-.6-1.446-.407-.365-.95-.552-1.633-.552h-3.818V9.43zm0-4.509h2.438c.487 0 .78.317.78.837 0 .553-.293.886-.78.886h-2.438Zm9.042-1.323c-2.177 0-3.29 1.014-3.29 2.989 0 1.974 1.113 2.99 3.29 2.99h1.057c2.177 0 3.29-1.016 3.29-2.99 0-1.975-1.113-2.99-3.29-2.99zm.244 4.801c-1.398-.008-2.097-.617-2.097-1.812 0-1.21.7-1.812 2.097-1.812h.569c1.397 0 2.096.601 2.096 1.812 0 1.195-.699 1.804-2.096 1.812zm6.783 1.03V5.597l3.738 3.834h1.38V3.744h-1.38v3.834l-3.738-3.834h-1.38V9.43zm9.668 0V4.922h2.193V3.744H42.27v1.177h2.194V9.43z"/>
  <path fill="currentColor" d="M50.242 10.94h-1.38v5.686h1.38zm-4.521 1.177h2.194V10.94h-5.768v1.177h2.194v4.51h1.38zm-8.937.358c0-.44.236-.56 1.618-.56h.162c1.138 0 1.536.275 1.536.966h1.453c0-1.39-.877-2.087-2.623-2.087h-.813c-1.008 0-1.714.138-2.128.414-.414.284-.617.714-.617 1.307 0 .512.219.91.527 1.162.155.122.35.228.601.317.488.171.959.252 1.617.317h.016c.577.057.951.098 1.317.163.52.105.788.252.788.585 0 .235-.106.398-.309.471-.21.082-.642.122-1.3.122h-.163c-1.527-.032-1.763-.276-1.77-.983h-1.454c.008 1.495.617 2.07 2.859 2.103h.812c1.958 0 2.746-.6 2.746-1.713-.008-.74-.244-1.154-.747-1.414a3.53 3.53 0 0 0-.918-.276c-.422-.065-.715-.09-1.276-.147-1.275-.122-1.934-.292-1.934-.747m-4.101 4.151h1.38V10.94h-1.38zm-1.159-2.843c0-1.893-1.096-2.843-3.281-2.843H24.88v5.686h3.363c2.234 0 3.281-1.047 3.281-2.843m-1.437 0c0 .593-.146 1.016-.447 1.276-.3.268-.853.398-1.641.398H26.26v-3.348h1.739c.788 0 1.34.13 1.641.39.301.268.447.69.447 1.284m-8.277 2.843h1.38V10.94h-1.38v3.834l-3.738-3.834h-1.38v5.686h1.38v-3.834zm-12.088 0h5.5V15.45h-4.12v-1.147h3.477v-1.168h-3.477v-1.017h4.12V10.94h-5.5z"/>
  <path fill="currentColor" d="M6.51 19.184h-.535c-.59 0-1.01-.116-1.26-.348-.25-.232-.374-.679-.374-1.34v-4.555c0-.84-.193-1.428-.577-1.768-.384-.34-.888-.51-1.513-.51v-.16c.625 0 1.13-.17 1.513-.51.384-.338.577-.928.577-1.767V3.67c0-.66.124-1.108.375-1.34.25-.232.67-.348 1.259-.348h.536V0h-.429C4.814 0 3.885.313 3.296.938c-.59.625-.884 1.492-.884 2.599v4.662c0 .518-.103.87-.309 1.058-.205.188-.585.281-1.138.281H0v2.09h.965c.553 0 .933.094 1.138.282.206.187.309.54.309 1.058v4.662c0 1.108.294 1.974.884 2.599.59.625 1.518.938 2.786.938h.429ZM53.453 19.184h.536c.59 0 1.009-.116 1.259-.348.25-.232.375-.679.375-1.34v-4.555c0-.84.192-1.428.576-1.768.384-.34.889-.51 1.514-.51v-.16c-.625 0-1.13-.17-1.514-.51-.384-.338-.576-.928-.576-1.767V3.67c0-.66-.125-1.108-.375-1.34-.25-.232-.67-.348-1.26-.348h-.535V0h.428c1.269 0 2.197.313 2.787.938.59.625.884 1.492.884 2.599v4.662c0 .518.103.87.308 1.058.206.188.586.281 1.139.281h.965v2.09h-.965c-.553 0-.933.094-1.139.282-.205.187-.308.54-.308 1.058v4.662c0 1.108-.295 1.974-.884 2.599-.59.625-1.518.938-2.787.938h-.428Z"/>
</svg>


## Praha, Etnetera<br> 10. září ’25
<small>partnerem srazu je [Green:Code](https://www.greencode.cz/)</small>
<small>Brno dnes: Diskusní večer na téma AI tooling pro efektivní webový vývoj</small><!-- .element: class="fragment" -->

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](https://docs.google.com/forms/d/e/1FAIpQLSe4mba2CAA8eFSaCJtypDkAQzmVmuhSNAP7VwuOIqLj8xEySA/viewform)

---

## Uwwwidíme se?

 11. září
React Girls, Mews: **[Budoucnost vývoje aplikací v AI době](https://www.meetup.com/reactgirls/events/310581059/)**
<!-- .element: class="fragment c-text-sm" -->
 16. září
TechTalks, Make: **[Make It Agentic: From Idea to Prototype (and Paying Agents)](https://luma.com/df0pvqke)**
<!-- .element: class="fragment c-text-sm" -->
 17. září
TECH talk, signageOS: **[CTOs na GRILU](https://www.meetup.com/reset-hard/events/310468544/)**
<!-- .element: class="fragment c-text-sm" -->
 24. září
FrontEnd Meetup, Ataccama: **[TBA](https://www.meetup.com/prague-frontend-community/events/310933153/)**
<!-- .element: class="fragment c-text-sm" -->
 1. října
**[FrontKon, Brno – Hotel Passage](https://www.frontkon.cz/)**
<!-- .element: class="fragment c-text-sm" -->

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
<!-- .element: class="text-center" -->

- [Petr Koláček - Mobile First – proč neustále ignorujeme skutečnost?](https://www.youtube.com/watch?v=5ERi4tcq2dA)
<!-- .element: class="c-text-sm fragment" -->
- [Lena Ansorgová - Frontend versus Dokumentace](https://www.youtube.com/watch?v=8dTAu9g2rF4)
<!-- .element: class="c-text-sm fragment" -->
- [Břetislav Proft - Může nám AI pomoci ladit Web Vitals?](https://www.youtube.com/watch?v=-lBbenivY48)
<!-- .element: class="c-text-sm fragment" -->
- [Form control styling - Tim Nguyen - CSS Day 2025](https://www.youtube.com/watch?v=WgSiqSqxTxw)
<!-- .element: class="c-text-sm fragment" -->
- [Frontkec](https://www.frontendisti.cz/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_
<!-- .element: class="fragment" -->
**Chrome 140**
_vydán 27. srpna 2025_
<!-- .element: class="fragment" -->
**Safari 18.6**
_vydáno 29. července 2025_
<!-- .element: class="fragment" -->

note:

- příští Safari bude 26

---

## Zachyceno v síti

---

### [Co možná nevíte o atributu `href`](https://blog.jim-nielsen.com/2025/href-value-possibilities/)

`href=""`<!-- .element: class="fragment" -->
`href="."`<!-- .element: class="fragment" -->
`href="?"`<!-- .element: class="fragment" -->
`href="data:"`<!-- .element: class="fragment" -->
`href="video.mp4#t=10,20"`<!-- .element: class="fragment" -->

note:

- `data:` funguje ve FF, ne v CH
- video začne v 10. vteřině, zastaví po 20 s; [omezená podpora!](https://caniuse.com/media-fragments)
- pokud znáte, možná budete znát i pravidla pro psaní e-mailových adres…

---

### [E-mail.wtf](https://e-mail.wtf/)

Znáte pravidla pro platné emailové adresy?

👉@👈<!-- .element: class="fragment" -->
"@"@[@]<!-- .element: class="fragment" -->

> I scored 9/21 on https://e-mail.wtf and all I got was this lousy text to share on social media.
<!-- .element: class="fragment" -->

note:

- [JS date](https://jsdate.wtf/)

---

### [Eric Meyer: Infinite Pixels](https://meyerweb.com/eric/thoughts/2025/08/07/infinite-pixels/)

```css
div {
	width: calc(infinity * 1px);  
	height: calc(infinity * 1px);
	margin: 0;
	padding: 0;
	font-size: calc(infinity * 1px); 
}
```
<!-- .element: class="c-text-xs" -->

| Browser | Computed value | Layout value |
| -------- | -------- | -------- |
| Safari | 100 000 | 100 000 |
| Chrome |  10 000 | 10 000 |
| Firefox (Nightly) | 3,40282e38 | 2 400 / 17 895 700 |
<!-- .element: class="c-text-sm" -->

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](https://una.im/5-css-functions/)

```css=
/* 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));
}
```
<!-- .element: class="c-text-xs" -->

---

#### [Una Kravets: 5 Useful CSS functions using the new @function rule](https://una.im/5-css-functions/)

<video src="https://una.im/posts/css-functions/border-radius.mp4" controls/>

note: 

- toto lze i bez funkcí
- budou i mixiny (oproti funkcím může být výstupem komplexnější kód)

---

### [Sara Soueidan: CSS-only scrollspy effect using scroll-marker-group and :target-current](https://www.sarasoueidan.com/blog/css-scrollspy/)
<!-- .element: class="c-text-sm" -->
    
```html
<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>
```
<!-- .element: class="c-text-xs" -->

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

a:target-current {
    font-weight: bold;
    text-decoration-thickness: 2px;
}
```
<!-- .element: class="c-text-xs fragment" -->

---

### [Ahmad Shadeed: Better CSS layouts: Time.com Hero Section](https://ishadeed.com/article/time-layout/)

- seriál o designových úpravách známých webů

---

### [Marcin Wichary: The day Return became Enter](https://aresluna.org/the-day-return-became-enter/)

![return-enter](https://hackmd.io/_uploads/r1uFyEjqxg.jpg =40%x)

note:

- čtení na víkend od Marcina Wicharyho
- konec řádku CRLF => víte co je to za zkratku
    - a k čemu sloužil _line feed_ víte?
- [odkud se vzaly špičaté závorky v HTML](https://mastodon.online/@mwichary/114713601903171155)

---

### Nowwwinky z JS

[Matt Smith: Logical assignment operators in JavaScript: small syntax, big wins](https://allthingssmitty.com/2025/07/28/logical-assignment-operators-in-javascript-small-syntax-big-wins/)

```js
user.theme ||= 'light';
```
<!-- .element: class="fragment c-text-sm" -->
```js
user.isLoggedIn &&= checkPermissions(user);
```
<!-- .element: class="fragment c-text-sm" -->

```js
settings.timeout ??= 3000;
```
<!-- .element: class="fragment c-text-sm" -->

note:

- `||` přiřadí pokud vlevo `false`
- `&&` přiřadí pokud vlevo `true`
- `??` přiřadí pokud vlevo `null` nebo `undefined`

---

## Nástroje a udělátka (wwwercajk)

---

#### wwwercajk

- [SVG crop](https://svgcrop.com/)
<!-- .element: class="fragment" -->
- [SVG/URL encoder](https://yoksel.github.io/url-encoder/)
<!-- .element: class="fragment" -->
- [Fonty k prototypování](https://frontendmasters.com/blog/fonts-for-wireframing/)
<!-- .element: class="fragment" -->
- [Logoipsum](https://logoipsum.com/) 
<!-- .element: class="fragment" -->


note:

- místo placeholderu pěkně barevné logo
- ořízne vám bílé místo okolo SVG

---

#### wwwercajk: fonty k prototypování

**Redacted script**
![ukázka fontu Redacted Script](https://hackmd.io/_uploads/SJyQUEicel.png =50%x)
<!-- .element: class="fragment" -->
**FILLR**
![ukázka fontu FILLR](https://hackmd.io/_uploads/ry-EIEsqlg.png =50%x)
<!-- .element: class="fragment" -->

---

#### wwwercajk: Logoipsum

![snímek obrazovky: galerie log](https://hackmd.io/_uploads/SJlVMVs5ee.png =80%x)

---

## Dnes wwwečer

- **Jakub Randák**, [Green:Code]()
Výroční zpráva pro Škoda Auto
<!-- .element: class="fragment" -->
- **Marek Velas**, [EDUpunk](https://edupunk.cz/)
LinkedIn nemusí být vždycky na ho*no: 
Jak si z něj udělat nástroj?
<!-- .element: class="fragment" -->
- **Vojta Dušek**, [Etnetera](https://www.etnetera.cz/)
AI mi vydělává v realitách
<!-- .element: class="fragment" -->

note:

- přestávka po první přednášce?
- uplete Marek z ho*na bič?

---

![image](https://hackmd.io/_uploads/ByDb8Qyogg.png)

Díky, prezentace v komentáři na [Meetup.com](https://www.meetup.com/frontendisti/)
