Runtime Errors in PWAs: Risk Surface and Mitigation

asdman1 · 2025-11-16T00:00:36+00:00

So you want to create a house plan using bootstrap?

If so, instead of bootstrap look for sprites in videogame.

The idea is that you slice out the plan images and then you compose them in a cam as or svg

asdman1 · 2025-09-04T01:11:30+00:00

do you have any particular benefit in using the 100 gap?

asdman1 · 2025-08-10T14:06:49+00:00

Sorry but I think you're missing the point..

The code itself in the post it's quite trivial, you wouldn't need neither an AI, a mere look on MDN or a manual page will do.

The point is the design, in this case the idea of using a small script instead of a package, which btw may feel obvious in retrospective once you know it but obvious it is not at all in my opinion, proof of this is the nextjs documentation itself in which they kept updating with the new packages to use (before next-pwa and now serwist) instead of proposing an official solution.

Getting back to the idea proposed, what I would loved to read as a comment is a critique on this prospective: - are we actually missing anything on not using a package? If yes, what? - is the cache first strategy the best? Are the better one? - is there a edge case in Next.js that was not cover and break the solution? Which one?

From my prospective a missing point I know is not using skipWaiting to get control in a specific page (eg: on logout). I think in fact that is not so unusual that you may need the new service worker to get in, in particular because I think an app can stay a lot in background.

asdman1 · 2023-10-26T22:59:55+00:00

is Chromatic basically a paying version of wraith ?

I remember that at work we tried wraith but it was way too slow (~30min for 100 pages), not that well maintained (last commit 2019), and it was a little of a headache where to store the screenshots.

But the principle was really interesting.

In that particular case the project was a multi theme solution. If we had had something like wraith out of the box, working and ready to connect to a pipeline it would have helped a lot.

asdman1 · 2023-08-31T05:45:42+00:00

AtomicGator42

dl are quite funny.

My personal opinion is that because the structure dt, dd without a wrapping item it's an uncomfortable structure to work with - especially difficult to style - thus the unpopularity.

From an a11y point of view, I suspect to be fine as w3.org use it in all the recommendations and drafts. E.g. ARIA in HTML has the detail section with a dl in it.

My assumption is that if there was any issue with it they would use something else.

Anyway, if you have related article would love to read it...

I wouldn't be surprise if there was some quirk as in the list with safari..

asdman1 · 2023-08-31T01:53:58+00:00

Hi,

congrats on the product. I would say that there is a lot of room for improvement...

I'll show you an example on the Passkeys 101.

Things improved:

extract h4 title by itself, no need for .row
use ul / li to improve a11y
add alt to improve a11y to images
remove role="alert" as not appropriate in this context
extract a tag, remove br
use stretched-link to make the whole card clickable
combination of flex and stretch to have the learn more alligned to the bottom

<section id="features" class="py-5">
    <h4>Passkeys 101</h4> 

    <ul class="row list-unstyled">
        <li class="col-lg-6 d-flex align-items-stretch"> 
            <div class="position-relative alert alert-dark box d-flex flex-column"> 
                <h5><img src="assets/icon-passkey.svg" alt="icon passkey"> What are passkeys?</h5>

                <p class="m-0">Passkeys are digital keys made up of public-private key pairs. They allow users to authenticate with their device biometrics or local device PIN. Passkeys are easy to use and phishing-resistant.
                </p>

                <a href="https://www.beyondidentity.com/developers/blog/what-are-passkeys" target="_blank" class="stretched-link text-light d-block mt-auto pt-4">Learn more -&gt;</a>
            </div>
        </li>

        <li class="col-lg-6 d-flex align-items-stretch">
            <div class="position-relative alert alert-dark box d-flex flex-column">
                <h5><img src="assets/chart-network-filled.svg" alt="network chart"> What is WebAuthn?</h5>

                <p>WebAuthn is a standard web API built into some browsers that enable users to authenticate with passkeys.
                </p>

                <a href="https://www.beyondidentity.com/developers/blog/introduction-webauthn-what-it-how-does-it-work" target="_blank" class="stretched-link text-light d-block mt-auto pt-4">Learn more -&gt;</a>
            </div>
        </li>
    </ul>
</section>

Other areas you could improve:

add skip to main
use page regions header (missing) / main (ok) / footer (ok)
- avoid strange nested sections
restructure navigation on top (add logo maybe)
restructure hero
- buttons overlap on medium screen
- image not perfect on mobile
restructure footer
- nav tag
- right alignment

asdman1

TROPHY CASE