There’s finally a decent AirTag holder for a bicycle saddle 😍 It took a while to install, but mostly because I tried to save time by not removing the saddle, lol. I guess it won’t fit every saddle rail, but it worked for the Brooks C15.

https://www.amazon.de/dp/B0B6H4PSQK

Remember this old trick that allowed us to load only critical CSS and defer the rest? The one that used media="print" and onload event. I just realized that it doesn’t work in Safari 😳

https://pepelsbey.dev/articles/lazy-loading-safari/

Whoa! The next day after the article, there’s already a PR in WebKit fixing the behavior 😊

https://github.com/WebKit/WebKit/pull/9746

Instantly backed! 🤓

https://www.kickstarter.com/projects/mwichary/shift-happens

Right, there’s more to it: apparently, CSS lazy loading is _kinda_ broken in Safari. So I updated the second part of the article: if your page is bigger than 200 characters (or 33 emojis), then you’re safe. No, I’m not kidding 😬

https://pepelsbey.dev/articles/lazy-loading-safari/#full-body

TIL: Y is called /ˈiɡ.rɛk/ in many languages because Romans called it “i Greek”. Thank you, Rob!

https://youtu.be/CYqqFqoLnnk

If you happen to use Chrome Canary with the “viewTransition API for navigations” enabled in chrome://flags (not a chance, I know), you might notice that I progressively enhanced my MPA website to use fancy slide-in transitions for page navigation. No JS!

https://pepelsbey.dev

View Transitions API for SPAs is already available in Chrome Beta. Read more in Jake Archibald’s article I used to copy-paste the effect 😅 https://developer.chrome.com/docs/web-platform/view-transitions/

Here’s the commit: <meta> tag to enable the transition and some CSS to make it look better https://github.com/pepelsbey/pepelsbey.dev/commit/accf0da

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