grooovinger

A compilation of reasons why I think Progressive Web Apps (PWAs) rock in many regards – and still suck in others.

Heads-up: the following code is for Svelte 5.

Years ago, I built neo:lights:out as a way to get hands-on experience with Svelte (v3) and Sapper (remember Sapper?).

tl;dr On Safari 26 on MacOS/iOS/iPadOS 26 the theme color for the browser UI is either taken from the site’s body background color or from a position-fixed element at the very top of the page with a background-color if there is one. theme-color meta tag a…

It is now possible to detect whether or not a position: sticky element is currently “stuck” using only CSS. 🤩 Meet Container Scroll State Queries Container Scroll State Queries enable CSS to query the state of an element in regards to its scroll behaviour:

Today I learned about a less verbose way of importing types from a different module when working in a JSDoc codebase.

I recently discovered a nice little Mac OS app called Astro Editor by Danny Smith (Bluesky).

Cloudflare has a feature called Email Workers, that lets you execute a worker as part of an email workflow.

Hear me out: There is no better install story than the one you get for PWAs (progressive web apps) on Mac OS, at least if you’re using a Chromium-based browser.

The interactive-widget property (as part of the viewport meta tag) can change the way the layout of a website adapts when the virtual (onscreen) keyboard is shown.

Yesterday I had the honor to present my talk “Svelte at Geizhals” at the Svelte Vienna Meetup.

Here is how I set up Fusion RSS reader on my Coolify: (This assumes you already have Coolify installed, otherwise refer to the installation docs) Log on to your Coolify dashboard Add a project select production environment Add new Resource Select “Docker…

Gitlens in VS Code can be linked to a Forgejo instance.

I keep searching for this, so here is a link on how to add a bit of spacing between apps on your MacOS dock.

/** * @typedef {Object} Props * @property {string} name */ /** @type {Props & Record<string, any>} */ let { name, ...restProps } = $props(); Most of my Svelte 5 components are typed with a @typdef JSDoc declaration.

I recently read about Pika blogging platform on Mastodon and checked it out.

(Sorry for the stupid clickbaity title 😃) tl; dr By selecting elements based on their accessible role and name using Cypress Testing Library, we effortlessly found accessibility issues while authoring Cypress tests.

The ScreenOrientation API recently reached Baseline support.

edit 11.06.2025 Bruno now supports importing Open API Spec files, at least for Open API v3 files.

If you set popover=manual attribute on the popover trigger element (like the button that opens a popover), you can have multiple popover elements open at the same time.

I just needed to quickly serve a simple html document on a remote machine.

There’s a new CSS property landing in Chrome 123 that will automatically resize textareas and inputs based on its content.

Heads-up: this works for Svelte 4, but currently not in Svelte 5!

You can now use CSS to check if JavaScript is supported using the new Scripting media query.

Yesterday I rode my bike home in pitch black darkness, because the bike lamps ran out of battery.

A collection of tricks and niceties you might find useful when working with Svelte.

tldr; A form can have multiple input[type=submit] (or <button type=submit>) elements.

Lately I’ve been using the plugin SQLTools for VS Code for viewing and editing SQL databases.

You can set an offset for CSS background-position to specify the position of a background image from right and/or bottom boundaries, like this: .my-element { background-image: url('path/to/image.png'); background-position: right 10px bottom 5px; This…

If you’re using a <form> element inside a <dialog> element, you might want to consider setting its method attribute to dialog.

In a production environment, you should not need node_dependencies from listed in the devDependencies section of your package.json.

localeCompare on MDN

The <template> element is useful if you want to dynamically create markup based on a predefined “template” (great naming right there).

Group all elements on the current page by their font size: let elementsBySize = []; [...

Sometimes you can’t test the native [Navigator.share()](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) API, e.g. when the site you’re developing is not served via https.

window.performance.getEntriesByType("navigation")[0].type === "back_forward"; This is how to detect if a page was loaded because the user navigated via back or forward buttons.

When you need to immediately export a javascript module again (useful for creating index files, sometimes called “barrel” files): export { namedImport } from '.

Detect if the document is currently hidden (which means, not active. e.g. user currently has a different tab open) document.hidden https://developer.mozilla.org/en-US/docs/Web/API/Document/hidden

It is possible to make an element stick to the top and bottom of a scroll container!

👉 Heads-up: This post is probably outdated, but the main concept remains the same: don’t use window variables if you do server side rendering or static site generation.

👉 Heads-up: This post is probably outdated!

Cypress Testing Library outputs a rather verbose log message when it can’t find an element using e.g. findByRole.