Pipedrive 14. 06. 2023

next: 13 September, TBA

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

{ 𝐅 }
Newwws

Browsers

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

note:

• KoutPen => 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 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

Jehl’s Law of Web Performance:

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

(@stoyanstefanov calculated 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

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

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

note:

• KoutPen by Bramus

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

1. .a .b .c
2. .b .a .c
3. .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)
• KoutPen (SCSS nesting)

Thanks, presentation later this night on @frontendisti