I was going to have dinner when I noticed a regression in Safari. Now I’m very hungry, but there’s a bug with a minimal test case!

Parent’s padding affects the width of a positioned image with max-height: 100% 🤔

Bug https://bugs.webkit.org/show_bug.cgi?id=252425
Demo https://codepen.io/pepelsbey/pen/JjadGQv

Most of the people: Oh, wow! Cool mic 😎

Me: Yep, Shure 55SH, and he’s singing to the wrong side of it 🙄

(The Guardians of the Galaxy Holiday Special)

Apparently, you can’t underline text in the <summary> in Safari. It got something to do with the shadow tree of the <details> element. Chrome fixed it in 2020, and it’s been in the WebKit tracker for 2 years.

• Chrome fix
• WebKit bug

Hooray! This render-blocking behavior is now fixed in the latest Safari TP 164 and probably will be available in the next stable release later this year 🥳

> Fixed <link> elements with media queries that do not match to not block visually first paint

https://webkit.org/blog/13902/release-notes-for-safari-technology-preview-164/

While waiting for the new controller/keyboard to arrive, I’m fiddling with a possible layout. This one’s for podcast editing, and it got all the tools/commands I need. It’ll have blank keycaps, but I might print stickers with (mostly) three-letter legends.

Apart from the obvious:

SLN — trim silence
AUT — show automation
PAU — insert a pause marker
DSB — disable fragment
PLH — locate playhead
PRC — precise jog

Holding FUNC will bring a second layer for:

RDO — redo
HOM — timeline start
END — timeline end

Playing around with the new zoom settings in Chrome Canary for Android. It works pretty much the same as the one in mobile Safari (much smoother, though) or Cmd/Ctlr+ on desktop.

I finally found an icon that uses SVG fragments in the production on https://lit.dev/. It’s the same icon but with different viewports:

Full https://lit.dev/images/logo.noscript
Flame https://lit.dev/images/logo.noscript#flame
Name https://lit.dev/images/logo.noscript#name

Read more about it in my article 😉

https://pepelsbey.dev/articles/noscript-sprites/

👋 Hey! I’m open to Berlin-based or remote work.

DevRel, community, and open source. Front-end with a focus on UI and accessibility. Writing, editing, and producing content, including podcasts and videos.

Blog https://pepelsbey.dev/
LinkedIn https://www.linkedin.com/in/pepelsbey/
CV https://pepelsbey.notion.site/pepelsbey/28c6517a714b49ab9a0d2adc002b7059

Hmm, time for a new nickname or just pizza time? 🤔

Tried to change the email for RiversideFM account:

> Please send us a document on company letterhead that is signed by an authorized signatory of the company. The document must state why the change in email is being requested and authorize the change in email 🤡

So I canceled the subnoscription instead.

Good news! The F-Word is back 😎 If you haven’t heard about it before, it’s an English-speaking front-end podcast that we record together with Bruce Lawson. It’s been on pause for a while, but we’re back and planning to release monthly episodes.

You can follow The F-Word on Mastodon or Twitter. All subnoscription options are available on the f-word.dev website.

Tonight I’m going to sleep like a front-end engineer: before coming to bed, I built it from ikea_modules 🤓

✨New article!✨ Jumping HTML tags. Another reason to validate your markup. Sometimes, browsers take our mistakes personally, and tags start jumping around 😳

https://pepelsbey.dev/articles/jumping-html-tags/

✨A quick note!✨ If you copy one of my article noscripts, you’ll probably get “ARTICLE TITLE” in uppercase. Why would I name my article like that? It’s not me, it’s browsers and specs again. The problem and a questionable trick.

https://pepelsbey.dev/articles/uppercase-copy-paste/