---
title: 14 June ’23 | {𝐅}rontendisti
tags: frontendisti
---

{%hackmd KXd2iUBpSjq7Ib2Z4h3LMg %}

# {𝐅}rontendisti

#### Praha, Pipedrive 14 June

<small>next: 13 September, TBA</small>

note:

- Welcome in Pipedrive
- last meet-up before summer
- next: to be announced
- practical info about venue

---

## Today

- **Getting Started Right** – Martin Kolář, freelancer
- **Open source - where did we go wrong, and what to do now?** – Georgy Marchuk, Co-founder at Open Source Software Institute
- **Understanding GPT and other AI news** – Roman Schejbal, Software Engineer in the fintech industry

---

## { 𝐅 } <br> Newwws<br>

note:

---

### Browsers

note:

---

#### Microsoft Edge 114
_released 8 June 2023_

note:

- Nothing worth mentioning

---

#### Firefox 114
_released 6 June 2023_

note:

- Nothing interesting

---

#### Chrome 114
_released 24 May 2023_

- [`popover`](https://developer.chrome.com/blog/introducing-popover-api/)

note:

- [KoutPen](https://codepen.io/Kout/pen/BaGoNmb) => Chrome 115! (positioning)
- good news: Safari is working on it, too

---

#### Safari 16.5
_released 27 May 2023_

- native CSS nesting
- `:user-valid`
- `:user-invalid`

note:

- native CSS nesting waits for FF
- `:user-valid` waits for `blur` event (maybe not technically, but practically)
- `:user-valid` in FF already
- Safari 17-beta in July
- `popover` will come with Safari 17 later this year
- masonry in TP (now only in FF behind flag)

---

## Cought in the net

---


> [Baseline](https://web.dev/introducing-baseline/) helps you to see, at a glance, whether a feature or API is safe to use in your site or web applicationsp.

note:

- kinda LTS of web APIs
- is now shown on MDN and web.dev; example: [grid on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/grid)

---

### Jehl’s Law of Web Performance:

> A website should load before you can say “cumulative layout shift”

(@stoyanstefanov [calculated](https://www.phpied.com/jehls-law-of-web-performance/) it to be 1.722 seconds.)

note:

- from Scott Jehl’s Webexpo talk
- a challenge: load your page before you can say CLS

---

### [Using :is() in complex selectors selects more than you might initially think](https://www.bram.us/2023/01/17/using-is-in-complex-selectors-selects-more-than-you-might-initially-think/)

.a .b .c {
  background: green;
}

.a :is(.b .c) {
  background: green;
}

note:

- [KoutPen by Bramus](https://codepen.io/bramus/pen/ExpwXwZ)

---

`.a :is(.b .c)` comes down to following:

1. `.a .b .c`
1. `.b .a .c`
1. `.a.b .c`

note:

- Why worth mentioning? There is a difference between CSS native nesting and preprocessor nesting.

---

.b .c {
  .a & {
    background: green;
  }
}

CSS native nesting above becomes this:

.a :is(.b .c) {
  background: green;
}

note:
- Let’s look at CodePen
- [KoutPen (CSS nesting)](https://codepen.io/Kout/pen/LYXpaEm)
- [KoutPen (SCSS nesting)](https://codepen.io/Kout/pen/oNQjVNy)

---

Thanks, presentation later this night on [@frontendisti](https://twitter.com/frontendisti)