Webventures

To boldly go where countless others have gone before.

Safe-area-inset-bottom does not update for keyboard

TL;DR: The safe-area-inset-bottom value doesn't update when the keyboard is visible, creating an unnecessary gap above the keyboard. Here's a CSS-only workaround (with a caveat...)

Ever since the iPhone X (/ai·fown eks/), websites and web apps have been able to render under the system UI (just like native apps!), leveraging the CSS env( safe-area-inset-* ) values to make sure the system UI doesn't clash with our UI. However, i...

An Abridged History of Safari Showstoppers

TL;DR: iOS Safari is more than an inconvenience for developers, it's the fundamental reason interoperability has been stymied in mobile ecosystems; frequent showstopping bugs, a large patch gap, and lack of competing engines ensures the web is not a credible competitor to native. Here are the receipts to prove it.

As noted elsewhere, a developer-lamented but regulator-overlooked aspect of Apple's monopoly on iOS browser engines has been the prevalence of show-stopping bugs. We define "showstoppers" here as bugs that cause working apps to become entirely broken...

No, the EU is not okay with Apple's PWA WebKit restriction

TL;DR: I believe the EU is very much going to have an opinion on the WebKit restriction Apple is trying to keep in place.

Yesterday, Apple announced that they decided to unpoop their plan to kill PWAs on iOS in Europe: To anyone reading this as "Looks like the EU is okay with PWAs being restricted to Safari/Webkit": (I've seen a couple of those comments go around on HN an...

Web Push on iOS - 1 year anniversary

TL;DR: Web Push on iOS is nearing its one year anniversary. It's still mostly useless.

It's been almost a year since I wrote about how iOS 16.4 beta was announced, and with it, Apple finally started supporting Web Push. With every other major browser supporting push notifications for ~6 years, Apple was late to the game, but at least...

AIHTW: The useStyle hook

TL;DR: It's like clsx, but for `style` props.

This is the first post in what I hope will become a series called "Am I holding this wrong?" The idea is to do a short post where I share something I've come up with, but where I'm not 100% convinced if I'm actually doing it right, if it makes sense and...

Web Push on iOS requires installing the web app

TL;DR: iOS' Web Push implementation kind of defeats a key point of the web.

Yesterday, the WebKit team dropped some big news: iOS and iPad OS 16.4 beta 1 won't just bring support for Web Push, they will also add support for the Badging API and 3rd-party browsers will finally be allowed to add a website to the home screen!...

Abortable promise chains

TL;DR: An idea for a small library that makes it easier to abort Promise chains.

I've found myself wanting to be able to easily abort a Promise chain many times. And by that I don't mean just the initial promise itself (which is possible), I want the ability to abort anywhere in a Promise, even in the middle of the chain. "But...

Stripping html - dos, don'ts and more

TL;DR: Use template (not div) and textContent (not innerText).

Every so often I run into a situation where I need to strip HTML from a string. For example. this blog's post list includes a short excerpt of the actual post, but I didn't want any of the content's HTML in there, just the plain text. I recently revisit...

In-App Browsers are tracking you(r users)

TL;DR: Users are being spied on, websites are broken and hijacked.

Most people probably don't know this, but when you click a link in Facebook, Instagram, TikTok and many other apps, you're viewing the site (and all subsequent pages you visit from there) in a so-called In-App Browser (IAB). Felix Krause uncovered tha...

Need cheap paint? Use getComputedStyle().opacity

TL;DR: If you need a double rAF() for a transition to work, getComputedStyle().opacity may be a cheap, synchronous alternative.

I thought I'd share a neat little trick I learned a few years back, just a nice and short blog post like I did a while ago. As it turned out, that little trick lives in the intricate world of the Browser rendering pipeline. I knew that, I just didn...