grooovinger

Import Props Types from a Svelte 5 Component in JSDoc

Mon, 09 Mar 2026 00:00:00 GMT

Sometimes in JSDoc, we need to get the type of a Svelte component’s props in a different module. Svelte provides ComponentProps to achieve that goal:

// other-module.js

/**
 * @import { ComponentProps } from 'svelte'
 * @import ListComponent from 'path/to/List.svelte'
 * */


/** @type {ComponentProps<typeof ListComponent>} */
let list = {
  id: 'awesome-list',
  isAwesome: true
}

First, we import ComponentProps type from the svelte package as well as the default export of the Svelte component, in this example <List> (List.svelte).

Then, to get the type of the props that our <List> component defines (see below), we can use ComponentProps<typeof ListComponent> to extract just the type of the List component’s $props(). Basically, we provide the type of the ListComponent as a generic type variable to receive the $props that List.svelte define.

For completeness, this is how the Svelte component in this example could be typed with JSDoc:

<script>
  // List.svelte

  /**
   * @typedef {Object} Props
   * @property {string} id a nice id
   * @property {boolean} [isAwesome=true] is this list awesome?
   */

  /** @type {Props} */
  let {id, isAwesome = true } = $props();
</script>
...

Refreshed neo:lights:out

Fri, 06 Mar 2026 00:00:00 GMT

Years ago, I built neo:lights:out as a way to get hands-on experience with Svelte (v3) and Sapper (remember Sapper?). A while ago I migrated it from Sapper to SvelteKit version 1. Now, I updated it again – this time to SvelteKit 2 and Svelte 5.

While fiddling around with it, I noticed that I still enjoy playing that game (the reason I built it in the first place). Maybe you do to?
Try it out (it’s free): neolightsout.grooovinger.com

Stuff I changed:

New font: Lexend Variable (https://www.lexend.com/)
Removed all references to Twitter, just use navigator.share() for share buttons instead.
Migrated all components to Svelte 5 with runes syntax
Better hover/focus-visible states
Moved hosting from Netlify to my own Hetzner VPS, CI/CD through Coolify

Stuff I didn’t change:

still no tracking and analytics (I have no clue about how many people play it)
still only storing level progress in local storage, as simple as it gets
still let’s you skip levels if you can’t find a solution
still no hints that show the next necessary step. This would be really cool to have though.
kept the look, but did some minor color tweaks

Let me know if you experience any issues. I’m also happy to 👋 hear from you if you like this game. 😊

Define the Theme Color for Safari 26

Fri, 27 Feb 2026 00:00:00 GMT

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 and theme_color manifest member do not affect the browser theme color.

→ Here’s a demo ←

If you are using Safari 26 on MacOS/iOS/iPadOS 26¹ you might have noticed that on some websites, the browser’s chrome (the UI containing the URL bar, back buttons, tabs etc) has a solid background color matching the page colors. My colleague Marc and I tried to find out how that is defined and embarked on a journey that was longer than expected.

Say good-bye to theme-color 👋

In the past, the Theme-Color meta tag was used for that, at least in certain scenarios (like iOS fullscreen “PWAs”, or in other browsers like Vivaldi). But, this meta tag was dropped with Safari 26.

Back to Safari 26

So, if theme_color is not what is used on Safari to define the header background color, what is?

I went inspecting a few websites where Safari colorizes the header:

theverge.com:

Piccalilli:

I found a similarity: Safari simply uses the background color of the <body> element. You can even change the background color using Safari Dev Tools and see the changes reflected in the browser UI.

I thought I cracked the case, but alas – I was wrong. As it turns out there are other websites where Safari clearly does not simply use the body background-color. Check out ankerbrot.at for example:

The <body> background is beige, the site’s page header is dark red and so is the browser chrome! What is going on?

The answer (simplified)

After some more digging I think the rules Safari applies for its colorized chrome are:

take the page’s <body> background-color, except when
the page has a position: fixed element with a background-color at the very top* of the page

* in the sense of block-direction start

This fixed element must be 100% wide and have a minimum height of 6px for Safari to accept it as the base color for it’s chrome. Position: sticky does not count.

Applying a custom theme-color

Based on these two observations, I tried to trick the browser into appling a custom color even though the site I’m working on does not have a fixed header nor a desirable background color for this use-case. I just needed to find a way to hide the 6px-high fixed element for users while Safari still accepts it for it’s chrome color.

After more experimentation, here’s a list of declarations that cause Safari to not accept the fixed element to colorize the browser.

opacity: 0
visibility: hidden
display: none
z-index: -1
scale: 0
transform: scaleX(-100%)
transform: translateX(-100%)
clip: rect(1px, 1px, 1px, 1px)
zoom: 0.000001
translate: 0 0 -1px (as suggested by Ana Tudor – thanks!)

I ran out of options to hide an element for users while still have it visually ready for the browser’s magic.

Scroll-driven animations to the rescue

I did not care if the element is visible on page load/when scrolled to the very top, we can safely hide it below the “real” header using z-index. But as soon as the user scrolls down, we need to hide the element. Turns out, this is easy to achieve with scroll-driven animations.

.custom-theme-color {
  position: fixed;
  top: 0px;
  background-color: #bada55;
  height: 6px;
  width: 100%;
  animation-name: hide-on-scroll;
  animation-timeline: scroll();
  animation-fill-mode: both;
  animation-range-start: 10px;
  animation-range-end: 11px;
  animation-duration: 0.1s;
  z-index: 1; /* make sure this is lower than the actual header z-index */
}
@keyframes hide-on-scroll {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100px);
  }
}

Previously, the rule for .custom-theme-color did not include animation-range. Bramus suggested to add a range for a more concise @keyframes rule – thank you! This way, the theme-color defining element is only visible if the scroll position is within the top 10px (play around with that value depending on your layout). (added on 2026-03-03).

With this solution, the .custom-theme-color element is moved out of the viewport as soon as user starts scrolling while Safari still accepts the background color for the primary color of the browser chrome.

Another interesting observation: if you add a border-bottom to the fixed element, Safari will take that color instead of the background of the element. 🤷

→ Here’s the link to the demo again, if you want to play around with it (Safari 26 required to see the effect).

Disclaimer and Caveats

The solution breaks (i.e. no theme color in the browser) if the page is reloaded at a different scroll position than “top”. Maybe an interactive (JS-based) solution would be better suited, but I wanted to solve it with CSS only.

Also, this would need a check if scroll animations are supported – if not, the element should be hidden right away.

We do not use this in production and a possible production-ready solution needs more testing (especially on iOS).

Edited on 2026-02-28: Added translate declaration as suggested by Ana Tudor, see applying-a-custom-theme-color. Added more specific OS versions, as Curtis Wilcox pointed out Safari 26 on MacOS 15 does not apply page colors to it’s chrome, see footnote. Added a disclaimer about checking for browser support.
Edited on 2026-03-03: Improved the CSS rule for the .custom-theme-color to include animation-range as suggested by Bramus, see Scroll-driven animations to the rescue

Style sticky elements when they are stuck

Tue, 24 Feb 2026 00:00:00 GMT

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:

Is an element scrollable? If so, in which direction is it scrollable? (use scrollable:)
Is a scroll-snapping element currently snapped? (use snapped:)
Is a sticky element currently stuck? (use stuck: )

This feature is one type of container queries. To enable querying for scroll state, setup a container using container-type: scroll-state; with an optional container-name on the element you want to query.

In a @container query, you can then check for the scroll state of the container element and apply conditional styling to it descenants:

@container my-container-name scroll-state(stuck: top) {
  .inner-element {
    color: red;
  }
}

Demo

See the Pen Detect Sticky State with only CSS by Martin Grubinger (@mgrubinger) on CodePen.

Use case

One use case I came across this recently is on the npmx.dev package page. When you scroll down a bit, the package name stays on top (due to position: sticky) and, to visualize the boundaries between elements, they add a border to the bottom of the package name element. It seems they use JavaScript to achieve that (probably using Intersection Observer, but I haven’t checked), but this would be a perfect use case for a scroll-state container query.

Browser Support

Currently, only Chromium-based browsers (118+) support this feature. See Container scroll-state queries on Can I Use.

Import Types from other modules in JSDoc

Mon, 16 Feb 2026 00:00:00 GMT

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

Instead of using @typedef to locally redeclare a type, you can straight up use @import:

// instead of this:
/** @typedef {import("./other-file.js").MyType} MyType */

// do this instead:
/** @import { MyType } from "other-file.js" */

You can then use the MyType type in this module.

I find this syntax much nicer to work with! I also like that the syntax is basically the same as in ESM (except for the @ prefix).

Disclaimer

Even though this is technically not part of JSDoc, it works in VSCode (and probably any other editor that uses TypeScript for type checking).

Source

Source and more extensive example: https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/#type-imports-in-jsdoc

Editing my Astro site with Astro Editor

Tue, 13 Jan 2026 00:00:00 GMT

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

Just point it to an Astro project, it will read the schemas and then presents a UI with three main parts:

a basic navigator to your content collections (left sidebar)
an editor (centered)
frontmatter editing pane (right sidebar)

Frontmatter editing

The main value it adds to my writing experience is the frontmatter editor in the right sidebar. As it knows your content collections, it can render out UI elements depending on the defined type. For example, it will show a date picker for fields of type date.

Draft

Fields named draft get a special treatment with a red “Draft” badge in the navigator. Very helpful! I added a similar looking element to the list of posts on my website while developing, so that I can spot drafts easily.

Writing

The writing area in the center is – in their own words – inspired by iA Writer. After using it for a while, my verdict is: it’s mostly fine, but could benefit from font-size controls (cmd-plus/cmd-minus) and better contrast. But in general I like it and find mostly enjoyable.

You can even drag and drop images from the filesystem into the editing view and move the file to a defined location, but will always insert it at the cursor – so make sure to place the cursor on the correct spot before inserting an image.

Progress

It seems Astro Editor is maintained and gets frequent updates, which leaves me hopeful that annoying bugs (like the datepicker being one day off) get resolved soon.

Screenshot

This is what this very post looks like in Astro Editor:

Run code for incoming emails with Cloudflare Email Workers

Mon, 12 Jan 2026 00:00:00 GMT

Cloudflare has a feature called Email Workers, that lets you execute a worker as part of an email workflow. This is pretty niche, but I recently used it to create a waitlist and I think it is both very niche and pretty awesome.

Here’s the gist:

User sends an email to a specific email adress, like [email protected]">[email protected]
The Cloudflare Email Worker which is attached to the email adress gets called
The worker sends a PUT request to my own service to store the email adress in a waitlist DB table (or, use one of Cloudflares own data storage options directly)
the email gets delivered as expected to [email protected]">[email protected]

In my view, sending the email can be considered an active act (and Cloudflare implements checks regarding email sender adress as far as I can tell), this is a simple way to skip the “confirm your email” workflow for something like a waiting list.

PWA install experience is top-notch (on desktop)

Tue, 02 Dec 2025 00:00:00 GMT

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.

PWAs have come a long way, and I have been enjoying installing and using PWAs on Mac OS quite a bit lately. I use internal productivity tools, messenger apps, social media apps (like phanpy) as well as media players like YouTube as PWAs these days.

I’ll take the YouTube progressive web app (https://youtube.com) as an example.

While watching a clip, hit the install button (on the right-hand side in the URL bar), confirm – and boom 💥, you’re done.

From now on, you can open the YouTube app using Spotlight/Raycast, keep it in the dock etc – whatever you do with “regular” apps. Your still on the same video page as before the install, still logged in etc. And – this one blows my mind: the video even continues to play during install!

Chrome will now show button “Open in app” if the PWA is already installed:

I can’t think of any other install process that smooth.

A word on Vivaldi

Vivaldi browser does not expose the PWA icon next to the URL. To install a website as a PWA, right-click on the tab and select “Install [app name]” (or “Open [app name]” if it’s already installed). See Vivaldis help site for more info.

PWA install experience on mobile

Install experience on mobile has improved, but is not nearly as great as on desktop. I won’t go into great detail here, as this focuses on desktop, but I have hopes that the situation might improve with the Web Install API (behind origin trial in Edge). Bruce Lawson also has an article on the Web Install API, worth reading!

Prevent virtual keyboard overlaying content with the Interactive Widget meta tag

Tue, 23 Sep 2025 14:10:52 GMT

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.

MDN lists three possible values:

resizes-visual
resizes-content
overlays-content

You might want to play around with the different values to see which one fits your purpose.

In our case, we chose resizes-content. If the keyboard is shown, the remaining layout is adapted to the content viewport instead of obscurred.

You can see the difference here:

Open the product page on Geizhals.at if you want to further inspect the layout.

Talk: Svelte at Geizhals (@ Svelte Vienna)

Tue, 24 Jun 2025 10:36:01 GMT

Yesterday I had the honor to present my talk “Svelte at Geizhals” at the Svelte Vienna Meetup. This was my first meetup talk ever, and I was a bit nervous – but the hosts made sure I felt welcome and supported me very well! Thank you, Ermin and JYC!

Here is the link to my slides: Svelte at Geizhals Slides

The feedback I received after the talk was very good, and I had a lot of interesting conversations afterwards. I’m happy I could finally contribute back by giving a talk, after visiting the Svelte Vienna meetup many times in the past.

edit: You can watch the recording my my talk on youtube: https://www.youtube.com/watch?v=aJVdfPk9WmI

Notes from other talks:

ZeeltePHP (Svelte + PHP)

Harry set out to bridge the gap between PHP and SvelteKit and builds ZeeltePHP for that. Very engaging talk with lots of live coding (props to Harry for that!) – the crowd was also very supportive in spoting unsaved files and other typos along the way 🙂

Adding full to your full-stack sveltekit app

Jean-Yves did another great talk about Remult. They just launched v3 and a stunning new landing page and docs. Great work on that, Remult team!

The talk itself left me speachless – I think I deliberatly had to close my mouth during that talk because to not look like this: 😮😮😮

Jean-Yves delivered a super fun and engaging talk about a tool I never really looked into so far.

Remult looks like a very cool project. They really did think about so many use-cases, and made the whole system very flexible and customizable. Strong Meteor.js vibes, but 10× more awesome! The fact that they support so many Meta-Frameworks and database combinations is just 💯

I really felt inspired to try it out on one of my side projects.

Side note: Recently, I was wondering why there are not more frameworks utilizing SSE (Server-Sent Events) for progressively updating the DOM from the server. And now here’s Remult doing just that with their LiveQuery feature. Very exciting.

Svelte Vienna

As usual, I had a great time at the Svelte Vienna meetup. The folks who showed up yesterday made me feel welcome as a first-time speaker, with many faces in the audience nodding along as a sign of support. Highly appreciated!

Svelte Vienna also has a new domain now: svelte.at

Thanks for organizing, and thanks for hosting to Lean Coders and Ahead of Time Software.

How to deploy Fusion RSS Reader on Coolify

Mon, 17 Mar 2025 14:22:34 GMT

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 Compose Empty”
Add Docker Compose config:

version: '3'
services:
  fusion:
    image: 'rook1e404/fusion:latest'
    ports:
      - '127.0.0.1:3000:8080'
    environment:
      # Password for the frontend (login)
      - PASSWORD=A_STRONG_PASSWORD
      # which path should be served on the fully qualified domain name?
      - SERVICE_FQDN_FUSION=/
      # which port (must map to the services.fusion.ports property)
      - SERVICE_FQDN_FUSION_3000
    restart: unless-stopped
    volumes:
      - './data:/data'

click “Deploy”
When deployed, the Services section should show the generated subdomain <appname>.sslip.io

Et voilà – you’ve got yourself a fusion instance deployed:

Add Forgejo custom Gitlens Remote in VS Code

Tue, 11 Mar 2025 14:22:34 GMT

Gitlens in VS Code can be linked to a Forgejo instance. I find this very useful, as it enables:

Open a selected line (or lines) of code in VS Code and open it in Forgejo (right-click on the selected code and select “Open on Remote (Web)”)
Open current branch on Forgejo
Open commit on Forgejo
Open repository on Forgejo

All these commands are available in the Command Palette (cmd+shift+p) in VS Code.

Add this config to settings.json in VS Code (cmd+shift+p -> Preferences: Open User Settings (JSON)) (replace all <PLACEHOLDERS> with your Forgejo host details):

"gitlens.remotes": [
  {
    "regex": "ssh://(forgejo@<HOSTNAME>)/<PATH>/(.+)",
    "type": "Custom",
    "name": "Grooovingers Forgejo",
    "urls": {
      "repository": "https://<URL-TO-FORGEJO>/<ORGANISATION>/${repo}",
      "branches": "https://<URL-TO-FORGEJO>/<ORGANISATION>/${repo}/branches",
      "branch": "https://<URL-TO-FORGEJO>/<ORGANISATION>/${repo}/src/branch/${branch}",
      "commit": "https://<URL-TO-FORGEJO>/<ORGANISATION>/${repo}/commit/${id}",
      "file": "https://<URL-TO-FORGEJO>/<ORGANISATION>/${repo}/src/branch/main/${file}${line}",
      "fileInBranch": "https://<URL-TO-FORGEJO>/<ORGANISATION>/${repo}/src/branch/${branch}/${file}${line}",
      "fileInCommit": "https://<URL-TO-FORGEJO>/<ORGANISATION>/${repo}/src/commit/${id}/${file}${line}",
      "fileLine": "#L${line}",
      "fileRange": "#L${start}-L${end}"
    }
  }
]

More information about the possible configuration fields on Gitkraken GitLens Settings page.

Add Space to MacOS dock

Fri, 21 Feb 2025 00:00:00 GMT

I keep searching for this, so here is a link on how to add a bit of spacing between apps on your MacOS dock. This helps me to organize the dock into groups.

“How to add transparent space separators to the Dock on your Mac” on idownloadblog.com

Svelte 5 Props @typedef with restProps

Thu, 12 Dec 2024 16:06:36 GMT

  /**
   * @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. This seems to be the easiest way to allow restProps (i.e. “everything else”).

Do you have a better solution? Let me know :)

Inspired by Good Enough

Thu, 03 Oct 2024 14:22:34 GMT

I recently read about Pika blogging platform on Mastodon and checked it out. Oh, nice looking website. Nice choice of fonts, clean layout, fantastic image with some unexpected, but relateable copy around Barry. I was intrigued.

Then, I even scrolled down all the way to the footer, where it says “Pika is Good Enough, and so are you.” – and followed that link. Look at that – more products, more links! Clicky clicky. I was delighted at what I saw.

When was the last time you clicked around a company website, just because its design language appealed so much to you?

For me, it felt what browsing in the past felt like: just follow a bunch of links because you’re curious where it might lead to.

It’s hard to pinpoint what exactly it is that speaks to me, but the overall “look and feel” of those websites is just :100:

So refreshing – great work, Good Enough!

Note: this is not an ad. I just want to praise the folks who built these websites in an era, where pretty much all websites look alike.

The single most effective Cypress trick to improve accessibility

Mon, 19 Aug 2024 15:05:41 GMT

(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.

Cypress Testing Library is a plugin for Cypress that adds a bunch of additional commands to Cypress. The one I find most effective is findByRole.

By using findByRole() as much as possible (versus selecting elements based on class, id or data-test-id), we caught a ton of accessibility issues while authoring tests.

We found some elements that had a wrong role, like interactive elements that had non-interactive roles (think: divs as buttons etc).

We also found many elements where the accessible name of an element did not describe what sighted users would see. An example would be a “close” button that also included an icon name in the accessible name.

As an additional benefit, you get to write tests by thinking about how your users would interact with the page. An example would be:

“click on the button that reads ‘login’” vs “click on the button with the test-id data-test-id="login"”

This way, if classes or ids change (and they will!) your cypress tests will no longer break. But if the text content of an element is changed, your test should and will fail.

Overall this helped us write more natural tests while at the same time catching accessibility issues along the way. Highly recommended.

Side note: if you use Playwright instead of Cypress, you can use getByRole which does the same thing.

Easy screen orientation management with the ScreenOrientation API

Tue, 13 Aug 2024 09:06:50 GMT

The ScreenOrientation API recently reached Baseline support. This is a very handy API to check for the current orientation of the users device as well as reacting to changing orientation.

Interface

Type

screen.orientation.type

lets you read the current device orientation (one of: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary)

Angle

screen.orientation.angle

lets you read the current device angle in degrees (0-360)

Change event

change

event to react to change in orientation, e.g. screen.orientation.addEventListener('change', handleOrientationChange)

Locks

ScreenOrientationAPI also lets you request on orientation lock. This could be useful for games and other experience requiring a stable orientation.

Browser support

Chromium-based browsers supported this API for ages, while Safari recently added support in v16.4. So make sure to check for screen.orientation before using this API.

Create a bruno collection from an Open API document

Fri, 12 Jul 2024 12:13:38 GMT

edit 11.06.2025
Bruno now supports importing Open API Spec files, at least for Open API v3 files.
Consider the rest of this article obsolete, except when you need to import an OAS v2 (swagger) file.

Bruno does not yet support creating a collection based on an Open API document directly. One way to accomplish that is through an intermediate Postman collection.

Log into Postman
In your workspace, select “Import” and upload your Open API Specification
Once imported, choose “Export” from the menu (three dots) next to the imported collection
save the postman collection
Follow the steps in Import from Postman to import that Postman collection to bruno.

Voilà, you have all the endpoints from the Open API specification in bruno.

Multiple popovers with Popover API

Tue, 28 May 2024 09:05:14 GMT

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.

Demo/Codepen:

See the Pen <a href="https://codepen.io/mgrubinger/pen/wvbBOoK"> CSS Popover API: multiple popovers</a> by Martin Grubinger (<a href="https://codepen.io/mgrubinger">@mgrubinger</a>) on <a href="https://codepen.io">CodePen</a>.

Quickly serve a html document via https

Thu, 29 Feb 2024 10:16:17 GMT

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

Usually I would go for npx serve in the directory where the .html file resides. But serve does not support https, so I found this fork of vercels serve package: https://github.com/warren-bank/node-serve

Just hit npx @warren-bank/serve --ssl

If no certificate is provided, you’ll need to do the “this page is insecure but I still want to see it” dance in your browser, but that was enough for my use case (just needed a “secure context” to use secure browser APIs)

Optionally, you can provide a real certificate/key/passphrase as described in the docs.

Automatic resizing of textareas and inputs using CSS

Mon, 19 Feb 2024 17:02:02 GMT

There’s a new CSS property landing in Chrome 123 that will automatically resize textareas and inputs based on its content. Since I could not remember its name and only found it by digging through my Mastodon conversations and finding this [email protected]/111619407998095697">post by Jen Simmons again, I thought I’d note it down here.

The property is called field-sizing and has two possible values: strict (default, just as before) and content which will automatically grow the element if needed.

The team at Polypane did a great job explaining it in more detail in this blog post: Field-sizing just works! – go read it if you have not heard about it.

Export JSDoc Types from Svelte 4 Components

Fri, 09 Feb 2024 12:11:20 GMT

The component which defines the type needs to do so in a <script context="module"> block (see Svelte docs on context=“module”)

// ReusableComponent.svelte
<script context="module">
/**
 * An option object for <Select>
 * @typedef {Object} SelectOption
 * @property {string} value the value of this option
 * @property {string} label the visible label to render
 */
</script>

// ... rest of the component

then, in the importing component you can refer to the type by importing it from the module:

// MyComponent.svelte

<script>
import ReusableComponent from './ReusableComponent.svelte`

/** @type {import('./ReusableComponent.svelte').SelectOption[]} */
let optionsList = [
  {label: 'Option 1', value: 1},
  {label: 'Option 2', value: 2},
]
</script>

CSS media query to check for JavaScript support

Tue, 02 Jan 2024 11:48:30 GMT

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

@media (scripting: none) {
  .show-for-noscript-users {
    display: block;
  }
}

This example media query would show elements with the class .show-for-noscript-users if JavaScript is disabled in the users browser.

@media (scripting: enabled) {
  .show-for-script-users {
    display: block;
  }
}

This example media query would show elements with the class .show-for-script-users if JavaScript is enabled in the users browser.

Possible Values

Possible values are:

enabled – JavaScript is enabled
none – JavaScript is not enabled
initial-only – JavaScript is only enabled during the initial page load, not afterwards.

Initial Only?

This one is weird. It means that JavaScript is active during page load, but not afterwards. When would that happen? I can’t think of a case, but Chrome Platform Status mentions that this can never happen in a browser environment. This issue mentions printing environments. My conclusion is: good to know it’s there, probably never going to use it.

Browser support

Support is pretty decent as of January 2023, with Samsung Internet being the only major browser to not support it.

What happens if the browser does not recognize the media query? It will skip the whole block (query), so keep that in mind when using it.

Use cases

Get rid of noscript elements in a flex/grid layout

Traditionally we would use a combination of <noscript> and <style> elements to achieve styling that only applies to noscript environments (JavaScript disabled). However, sometimes an additional <noscript> element can break flex or grid layouts. Using this media query, we can set the display property of the <noscript> element to contents to skip it as a direct flex/grid child.

Demo on CodePen: Grid with a second row of items only for noscript environments (Visit this link with JavaScript disabled to see the second row of the grid)

Progressive Enhancement

According to Progressive Enhancement (PE) approach to building resilient websites, we can use this media query to style things in a certain way if JavaScript is turned off, but enhance the styles with additional rules for when JavaScript it turned on (or vice versa, depending on the use case).

Keep in mind that there are plenty of situations where JavaScript is on, but does not execute, or has not finished executing yet!

Futher reading

Scripting Media Query on MDN

Scripting at Can I Use

Pitch black darkness and the degradation of end user experience

Thu, 05 Oct 2023 20:49:31 GMT

Yesterday I rode my bike home in pitch black darkness, because the bike lamps ran out of battery. Luckily I was able to go almost all the way on backcountry gravel roads and/or cycle paths. No way I would have survived had I ridden on the main road without lights. I felt helpless without those lamps.

I thought: wouldn’t it be great if we had bike lamps powered by the circular motion of the wheels?

Wait, we had that!

When I was a kid*, every bike would be equipped with a dynamo which powered the head- and taillamps of the bike. No worrying about low batteries! No taking the lamps off the bike when parking it in public because otherwise they would be stolen 100%.

Another example: switching on a TV was a matter of pressing one button on a clunky remote. Now? I have to switch on the TV, the receiver, the sound system and set them all to the correct inputs. Luckily I still own a Logitech Harmony, so at least I can do it all through one remote, and some things the Harmony sets up automatically. But this is not the norm, I know many people with two or more remote controls for their TV setup.

This thought lead to the broader question: How come we are accepting such obvious degradations in end-user experience? Sure, the lamps are brighter and the TV sound is from a different league, but still.

Speaking about degradation of end user experience: a big chunk of the “modern” web is barely usable. Ads cluttering the UI, forms failing to submit without proper display of the problem, layout shifts all over the place, text contrast nowhere near conforming WCAG AA levels, janky scrolling experience — I could go on, but you get my point. (Except: have you tried using the facebook mobile website?)

Chris Coyier recently wrote about this topic as well in A lot of stuff is just fine. While I generally agree with his article, I do think a lot of things in the “real” world are not fine and could be significantly better.

What’s extra fricked about all this is that you really gotta try to screw up a website as much as we do. — Chris Coyier in A lot of stuff is just fine

Where do we go from here? In my opinion, there are a few things we can all do:

buy less shitty things
buy less (in general)
as craftspeople (like web developers): aim to build the best possible product for the end user
as product teams: don’t let capitalism ruin your product
as web developers: use the platform; stop using react ffs

* I know these things are still around, but most bikes are sold without.

Svelte Tricks Collection

Mon, 08 May 2023 15:50:48 GMT

A collection of tricks and niceties you might find useful when working with Svelte. This list is intended to be updated from time to time.

Style components using css variables
Forward events to parent component
Locally global styles (with Svelte-Preprocess)
Loop over part of an Array
Dynamic import of components within template

Style components using css variables

I can think of multiple options to apply external styling for a reusable component:

Expose a style prop
Expose a prop for different classes, which you can then apply to the individual elements inside the component
Use the :global() selector in the parent component
Use CSS Custom Properties (CSS vars).

In the example above I used the CSS vars approach. The idea is, that you allow overriding of certain styles based on CSS vars that get applied to the component. Svelte supports setting CSS vars directly when using a component, like this:

<Component --bg-color="blue" />

Note how you don’t need the style attribute, just pass in the props via --propname attribute!

Then, in the <style> block of your reusable component, use the CSS variable – ideally with a fallback value:

<style>
.mycomponent {
    --bg: var(--bg, red);
}
</style>

I think that’s a clean way to open up styling adjustments for a component. I think of this approach like a separate set of props, just for styling. You might also want to consider using special prefixes for these kind of variables to prevent naming clashes.

Forward events to parent component

If you want a component to pass an event to its parent, all you need to do is to set the attribute on: on the element triggering the event. Like this:

// within InnerComponent.svelte
<div class="card">
  <button on:click type="button">Open</button> // <<-- note the on:click here
</div>

// within ParentComponent.svelte
<MyComponent on:click={openCard} />

This is not a secret trick, it’s even in the new official tutorial. I find it very useful and it’s a svelte feature that just makes me authoring components such a joy.

Locally global styles (with Svelte-Preprocess)

(a weird name that I just made up)

In Svelte, you can set individual CSS rules to be global using the :global() keyword in the style section. Sometimes you might want to have styles, that are global, but only as long as the element is a child of a certain element to prevent clashes.

Utilizing svelte-preprocess with Less or Sass and postcss you can write rules like this:

<style lang="less">
.mycomponent {
  /* local styles of this component */

  :global {
    .dynamically-added-element {
        color: deeppink;
    /* global styles that are only available for elements with class dynamically-added-element which are children of .mycomponent */
    ...
    }
  }
}
</style>

Note that the :global {} block is a feature of svelte-preprocess

Loop over part of an Array

To run an each loop over just a part of an array, use a dynamically constructed array straight in the template:

{#each {length: 5} as _, index (index)}
    {@const item = items[index] }
    <!-- do stuff with {item} -->
{/each}

You might argue that extracting the slice of the array in the <script> area of a component is more readable. I agree.

Dynamic import of components within template

To dynamically load a component, you can import it straight from the template using #await:

{#await import("$lib/path/to/ComponentName.svelte") }
  <p>loading...</p>
{:then { default: ComponentName }}
  <ComponentName />
{/await}

Line number 5 destructures the imported module to get the default export (our svelte component) and renames it to ComponentName. Be careful not to accidently create request waterfalls by only loading components lazily your application does not need for the initial render.

Form with multiple submit buttons

Thu, 04 May 2023 12:07:52 GMT

tldr;

A form can have multiple input[type=submit] (or <button type=submit>) elements. You can specify different values, targets, methods or even different actions for these.

In JavaScript, the information which submit-button was used to submit the form can be accessed in the SubmitEvents submitter property.

Example:

Recently, I’ve been exploring the html <form> element more, mainly because it’s such a central building block for SvelteKit apps. Or, more precisely: forms have been a major building block for web applications forever, but I feel that it’s importance and role has been neglected in the last decade or so of JavaScript-heavy SPAs. Personally, I feel that I have a knowledge gap around such an important building block, and maybe I’m not alone.

The example above has two sections:

Form with two submit buttons with the same name attribute, but different values. By default, hitting one of the two submits will submit the form and change the URL of the example website, depending on the value of the clicked element. Kinda like a radio group, but for distinct actions a user can take.
The same form, but this time intercepting the forms submit event and updating text on the website via JavaScript – again, depending on which button was used.

There are more things you can specify on a submit element, like the action to submit to or the forms method. See this MDN page on the input[type=submit] element.

Editing Database in VS Code via SQLTools Plugin

Thu, 06 Apr 2023 07:53:07 GMT

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

It’s easy to set up (don’t forget to install the required drivers for your database engine, see the description of SQLTools) and easy to use.

I have not yet figured out, why it sometimes would open the result of a query in a new editor pane. Besides that, I find it comfortable to be able to quickly view and edit the database right from my editor.

By the way, this extension also works if you’re working on a remote environment via VS Codes Remote-SSH tools.

CSS Background Position Offsets

Tue, 14 Mar 2023 07:55:42 GMT

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 will place the image in the bottom-right corner, but move it 10px to the left and 5px towards the top. Kinda like setting a transform: translateX(-10px, -5px) (which you can’t for background images).

So far I’ve only ever used right bottom or a percentage/pixel based position for background images, but background offset comes in handy when making sure a flush right or bottom background-icon is positioned exactly where you need it.

Also see css-background-offsets on caniuse

Submit forms in dialogs

Mon, 20 Feb 2023 19:59:58 GMT

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

This will cause the dialog to close automatically on form submission and set the value of the submit button to dialog.returnValue. It will not actually submit the form though.

More details:

I learned about this from Dominik Reitzner at the Svelte Vienna Meetup.

npm: only install production dependencies

Mon, 23 Jan 2023 16:42:15 GMT

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

NODE_ENV=production npm ci will only install dependencies listed in dependencies of your package.json. devDependencies will not be installed.

Alternative: use npm ci --omit=dev

Sort strings/numbers while respecting special characters

Tue, 17 Jan 2023 15:53:44 GMT

localeCompare on MDN

grooovinger

Import Props Types from a Svelte 5 Component in JSDoc

Refreshed neo:lights:out

Define the Theme Color for Safari 26

tl;dr

Say good-bye to theme-color 👋

Back to Safari 26

The answer (simplified)

Applying a custom theme-color

Scroll-driven animations to the rescue

Disclaimer and Caveats

Style sticky elements when they are stuck

Meet Container Scroll State Queries

Demo

Use case

Browser Support

Import Types from other modules in JSDoc

Disclaimer

Source

Editing my Astro site with Astro Editor

Frontmatter editing

Draft

Writing

Progress

Screenshot

Run code for incoming emails with Cloudflare Email Workers

PWA install experience is top-notch (on desktop)

A word on Vivaldi

PWA install experience on mobile

Prevent virtual keyboard overlaying content with the Interactive Widget meta tag

Talk: Svelte at Geizhals (@ Svelte Vienna)

ZeeltePHP (Svelte + PHP)

Adding full to your full-stack sveltekit app

Svelte Vienna

How to deploy Fusion RSS Reader on Coolify

Add Forgejo custom Gitlens Remote in VS Code

Add Space to MacOS dock

Svelte 5 Props @typedef with restProps

Inspired by Good Enough

The single most effective Cypress trick to improve accessibility

tl; dr

Easy screen orientation management with the ScreenOrientation API

Interface

Type

Angle

Change event

Locks

Browser support

Further reading

Create a bruno collection from an Open API document

Multiple popovers with Popover API

Quickly serve a html document via https

Automatic resizing of textareas and inputs using CSS

Export JSDoc Types from Svelte 4 Components

CSS media query to check for JavaScript support

Possible Values

Initial Only?

Browser support

Use cases

Get rid of noscript elements in a flex/grid layout

Progressive Enhancement

Futher reading

Pitch black darkness and the degradation of end user experience

Svelte Tricks Collection

Style components using css variables

Forward events to parent component

Locally global styles (with Svelte-Preprocess)

Loop over part of an Array

Dynamic import of components within template

Form with multiple submit buttons

tldr;

Example:

Editing Database in VS Code via SQLTools Plugin

CSS Background Position Offsets

Submit forms in dialogs

npm: only install production dependencies

Sort strings/numbers while respecting special characters

Group all DOM elements by font-size

Mock navigator.share

Was the page navigated to using back or forward button?