Jekyll2026-08-11T13:35:28+02:00https://mystie.dev/feed.xmlarfy’s cozy place :3a teen puppygirl barking around the internetarfypupWebsite updates: August 20262026-08-11T13:01:07+02:002026-08-11T13:01:07+02:00https://mystie.dev/2026/08/11/website-updates-august-2026In this post I am going to go over all the things that got added, changed, and removed on this website in August of 2026.

Added things

HTMX navigation (seamless navigation)

HTMX navigation (or ajax/seamless navigation/however you wanna call it) avoids a full page refresh and only loads things that are needed. You can toggle it in the settings modal, which I’ll cover next.

Settings

These are local settings aimed at improving accessibility and also letting people change the style of this website! They can be found in the website’s footer. Here’s how they look:

"A settings modal with settings such as toggling seamless navigation, changing text/heading font, font size, etc."

The settings use JavaScript’s localStorage to save/load settings.

There are 7 settings in total (as of writing this):

  • a toggle for window blur effect;
  • a toggle for seamless navigation;
  • a toggle for grayscale mode;
  • a slider for corner radius;
  • a slider for font size;
  • a dropdown for preferred text font;
  • and a dropdown for preferred heading font.

Changed things

New backgrounds

New backgrounds got added for both light and dark themes.

Light theme:

"A light purple wallpaper of an urban city with many buildings, near a sea at sunset."

Dark theme:

"A dark purple/pink wallpaper of a brightly-lit bridge. In the distance is an urban city with many buildings. In the sky, the Moon can be seen in its waning crescent phase."

Miscellaneous

These things aren’t that important to have their own sections, so I’ll cover them briefly here:

  • added text in the footer that’s shown when I’m (probably) sleeping;
  • added a fallback font which loads if certain Unicode characters aren’t supported by the system;
  • replaced the old mystie button with a new arfypup one;
  • blog pages no longer have the left sidebar;
  • updated the 404 page;
  • added a “valid atom” button;
  • removed the unicode warning in the blog;
  • 88x31 buttons are now automatically generated from a YAML file (_data/buttons.yml);
  • added delta chat and jami to the list of socials;
]]>arfypupSwitching from Last.fm: rewriting my “Now playing” widget to use ListenBrainz2026-07-12T09:38:00+02:002026-08-07T18:49:56+02:00https://mystie.dev/2026/07/12/rewriting-the-now-playing-widgetThis is not a tutorial! It’s just me sharing my own experience with rewriting the widget!

Today I switched from using Last.fm for my “Now playing” widget to ListenBrainz (+ MusicBrainz and Cover Art Archive).

The reason for switching is simple: Last.fm stopped working on my computer, giving me “Access Denied” errors in the player (is it a geo block? VPN block? I don’t know).

I had to change around 80% of the code to get the ListenBrainz version working, and it was honestly kinda a pain (since i now needed to get data from three sources instead of just one), but in the end, it was really worth it. Here’s how i did it:

Step 1: Connecting my music player to ListenBrainz

This was fairly easy, since the music player i use (Strawberry) already supports this feature. I just needed to log into ListenBrainz, get my user token, and authorize Strawberry to access ListenBrainz data.

Step 2: Getting data from ListenBrainz

This step was also pretty easy, though i ran into an issue of the player not sending listening data, but it randomly fixed itself, so i guess it’s all good now ¯\_(ツ)_/¯

Getting the data is as easy as making a GET request to https://api.listenbrainz.org/1/user/USERNAME/playing-now:

const username = "arfypup"
const url = `https://api.listenbrainz.org/1/user/${username}/playing-now`

const request = await fetch(url);
const data = await request.json();
console.log(data);
// {"payload":{"count":1,"listens":[{"playing_now":true,"track_metadata":{"additional_info":{"duration_ms":...,"media_player":"...","media_player_version":"...","submission_client":"...","submission_client_version":"...","tracknumber":...},"artist_name":"...","release_name":"...","track_name":"..."},"user_name":"arfypup"}],"playing_now":true,"user_id":"arfypup"}}

Step 3: Using the data to show currently playing track

For this, i made the structure of the widget with unique HTML id’s to show the data visually. It’s nothing special really, so i’ll skip most of it.

What is special though (and different from Last.fm) is that ListenBrainz includes player metadata in the response, so we can use that to show the player that’s being used to play the current track.

I could of course just show the raw response, but i opted to also show the player icon to make it more visually appealing.

This is done by utilizing the player name in the response to create a player name to icon filename map. Here’s how it looks:

const icon_map = {
	"musicolet": "musicolet.png",
	"listenbrainz-android": "listenbrainz_icon.svg",
	"brainzplayer": "listenbrainz_icon.svg",
	"strawberry": "strawberry.png"
}

It’s pretty simple, but it does the job.

Step 4: Getting the cover art

Step 4.1: Getting the track’s MBID

This was, by far, the hardest part in creating the widget.

To even get to the point of getting the cover art, you need to make 2 requests: one to MusicBrainz Search API (to get the MBID of the track), and another to Cover Art Archive to find cover art based on the track MBID.

First, I started trying to get the track MBID. Since I never used this API before, I didn’t know that you can use the fmt=json parameter to make the API return JSON instead of XML.

So I wasted a few minutes trying to parse the XML response (and I actually succeeded) before seeing the fmt=json parameter in the documentation and rewriting this part of the code to parse JSON instead.

Next, I needed to find the correct query to use to get the correct results. With a lot of trial & error, I eventually found the right one: artist:"${artist_name}" recording:"${track_name}" AND status:official

Then, I needed to get the MBID of the track (or rather of the album, since that yields good results more often). I ended up using the MBID of the first track’s album like this:

const mbid = res.recordings[0].releases[0].id;

Step 4.2: Getting the cover art itself

This step wasn’t that hard, as I already had the MBID from the previous step. Getting the cover art data is as easy as:

const c_url = `https://coverartarchive.org/release/${mbid}`;
const c_req = await fetch(c_url);
const c_res = await c_req.json();

const c_thumb_250 = c_res.images[0].thumbnails.small;
const c_thumb_500 = c_res.images[0].thumbnails.large;
coverArtEl.src = window.devicePixelRatio > 1 ? c_thumb_500 : c_thumb_250;

The c_thumb_250 and c_thumb_500 variables store the thumbnail URLs for the cover art. I won’t explain what window.devicePixelRatio is in this post, but here it determines whether to use the smaller (250) or the bigger (500) thumbnail.

I am omitting error handling and other stuff, but it’s not relevant to this blog post.

Step 5: Optimizing the widget

Since I’ve previously set the widget to update every 5 seconds, that means it’s now making at least 3 requests every 5 seconds, even if the data hasn’t changed. We can reduce it to 1 request by only executing the other 2 requests if the track name has changed.

For this, we can create a variable called track_name to store the track name and compare it with the API’s track name:

let track_name = null;

async function getCurrentTrack() {
	const currentTrack = ...;
	if (currentTrack.track_name !== track_name) {
		track_name = currentTrack.track_name;
		// do stuff
	}
}

Step 6: Making it prettier

Right now, the cover art changes without any sort of loading indicator, leading to previous cover art being briefly visible on a new track.

To fix this, I added a loading spinner SVG to the cover art that’s visible while new cover art is loading.

The logic of it is pretty simple: it stays hidden until the cover art is being loaded.

To make it look good, I overlayed the spinner on top of the cover art image like this:

<div style="position: relative;">
	<img src="/st/img/cover.svg" id="cover-art" width="64" height="64">
	<svg id="cover-loading" class="d-none" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) !important;" fill="var(--primary)" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="..."><animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/></path></svg>
</div>

The final result

The final widget looks like this:

"Now playing" widget, showing the currently playing track and the player that's playing it

Thanks for reading this blog post! I hope to write more in the future, so stay tuned!

UPDATE 19/07/26: it turns out that you don’t have to use MusicBrainz’s Search API to get the recording/release MBID!

You can use the ListenBrainz API instead to get user listens data, and that includes both the recording and the release MBID (and also CAA ID, but more about that later), and in my experience also gets the right MBID for cover art more often.

const url = `https://api.listenbrainz.org/1/user/${username}/listens?count=1`
const request = await fetch(url);
const res = await request.json();

const meta = res.payload.listens[0].track_metadata;
const mbid = meta.mbid_mapping.caa_release_mbid;
const caa_id = meta.mbid_mapping.caa_id;
const r_mbid = meta.mbid_mapping.recording_mbid;

I also found out that you don’t need Cover Art Archive at all to get the cover art URL - you can just craft the link yourself with the release MBID and CAA ID:

// set cover art url based on mbid and caa_id
coverArtEl.src = `https://archive.org/download/mbid-${mbid}/mbid-${mbid}-${caa_id}_thumb250.jpg`;

That’s one of the reasons I decided to switch to ListenBrainz API for getting the recording/release MBID’s.

In my experience, skipping Cover Art Archive decreases the cover art loading time by a lot.

I also removed the logic for using a 500px thumbnail, since the image element is 64x64 anyway.

Until next time!

]]>arfypupMaking toasts with the Popover API2026-07-11T12:09:00+02:002026-07-11T12:09:00+02:00https://mystie.dev/2026/07/11/making-toasts-with-popover-apiSo the new Popover API is now available in most1 browsers. It lets you easily create non-modal popovers. But what if we pushed it further than that? What if we could create toasts with zero libraries, using just the Popover API? That’s what this guide is about.

Let’s start with creating a function called makeToast() and initializing variables for the toast parts:

1
2
3
4
5
6
7
8
9
10

const t_anim_duration = 200;

function makeToast(title="Toast", msg="Hello World", color="white", bg="DarkSlateBlue") {
	// initializing toast parts
	const t = document.createElement('div');
	const t_head = document.createElement('div');
	const t_head_title = document.createElement('b');
	const t_head_close = document.createElement('button');
	const t_msg = document.createTextNode(msg);
	const t_timeout = 3000;
Variable explanation:
  • t - the toast itself;
  • t_head - toast head (title + close button);
  • t_head_title - toast title;
  • t_head_close - the close button;
  • t_msg - toast message.
  • t_timeout - how much to wait before removing the toast (in milliseconds)
  • t_anim_duration - duration of the closing animation

Notice that we define t_anim_duration outside of the makeToast function, that way we can use it in other functions later.

Next, we need to create the toast’s structure and style it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

	t.classList.add("toast", "newest");
	t_head.classList.add("toast-head");
	t_head_close.classList.add("toast-close");

	t.style.color = color;
	t_head_close.style.color = color;
	t.style.background = bg;

	t_head.appendChild(t_head_title);
	t_head.appendChild(t_head_close);

	t.appendChild(t_head);
	t.appendChild(t_msg);

	document.body.appendChild(t);

This does four things:

  1. Adds classes to toast’s parts for styling the toast with CSS
  2. Sets the color and background to the color and bg arguments that are passed to the function
  3. Appends the toast’s parts to the toast itself
  4. Appends the toast to the <body> of the document

Next, we need to add content to the toast and make it functional:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

	// ensuring the toast doesn't get closed with a click
	t.popover = "manual";

	t_head_title.textContent = title;
	// you can use other symbols if you want
	t_head_close.textContent = "✕";

	// remove toast upon clicking the close button
	t_head_close.addEventListener('click', (e) => {
		const target = t_head_close.parentElement.parentElement; // => <div class="toast"></div>
		removeToast(target);
	});

	t.showPopover();

	// old toasts should be pushed down when new ones spawn
	requestAnimationFrame(() => {
		moveToastsDown();
	});

	// remove toast after (timeout - animation_duration) ms
	let tm = setTimeout(() => {
		removeToast(t);
	}, t_timeout - t_anim_duration);

	// stop timeout if mouse is hovering over the toast
	t.addEventListener("mouseover", function (event) {
		clearTimeout(tm);
		tm = 0;
	}, false);

	// start timeout when mouse leaves toast
	t.addEventListener("mouseleave", function (event) {
		tm = setTimeout(() => {
			removeToast(t);
		}, t_timeout - t_anim_duration);
	}, false);
}

And finally, we need to add helper functions:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function removeToast(t) {
	t.classList.add("closing");

	setTimeout(() => {
		t.hidePopover();
		t.remove();
	}, t_anim_duration);
}

function moveToastsDown() {
	const toasts = [...document.querySelectorAll(".toast")].reverse();
	const initialOffset = 16;
	let offset = initialOffset;

	toasts.forEach((toast, i) => {
		toast.style.top = `${offset}px`;
		offset += toast.offsetHeight + initialOffset;
	});
}

Here’s how the final code looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

const t_anim_duration = 200;
function makeToast(title="toast", msg="Hello World", color="white", bg="DarkSlateBlue") {
	// initializing toast parts
	const t = document.createElement('div');
	const t_head = document.createElement('div');
	const t_head_title = document.createElement('b');
	const t_head_close = document.createElement('button');
	const t_msg = document.createTextNode(msg);
	const t_timeout = 3000;

	// adding classes
	t.classList.add("toast", "newest");
	t_head.classList.add("toast-head");
	t_head_close.classList.add("toast-close");

	// styling
	t.style.color = color;
	t_head_close.style.color = color;
	t.style.background = bg;

	// structuring
	t_head.appendChild(t_head_title);
	t_head.appendChild(t_head_close);
	t.appendChild(t_head);
	t.appendChild(t_msg);
	document.body.appendChild(t);

	// ensuring the toast doesn't get closed with a click
	t.popover = "manual";

	t_head_title.textContent = title;
	// you can use other symbols if you want
	t_head_close.textContent = "✕";

	// remove toast upon clicking the close button
	t_head_close.addEventListener('click', (e) => {
		removeToast(t_head_close.parentElement.parentElement);
	});

	t.showPopover();

	// old toasts should be pushed down
	requestAnimationFrame(() => {
		moveToastsDown();
	});

	// remove toast after (timeout - animation_duration) ms
	let tm = setTimeout(() => {
		removeToast(t);
	}, t_timeout - t_anim_duration);

	// stop timeout if mouse is hovering over the toast
	t.addEventListener("mouseover", function (event) {
		clearTimeout(tm);
		tm = 0;
	}, false);

	// start timeout when mouse leaves toast
	t.addEventListener("mouseleave", function (event) {
		tm = setTimeout(() => {
			removeToast(t);
		}, t_timeout - t_anim_duration);
	}, false);
}

function removeToast(t) {
	t.classList.add("closing");

	setTimeout(() => {
		t.hidePopover();
		t.remove();
	}, t_anim_duration);
}

function moveToastsDown() {
	const toasts = [...document.querySelectorAll(".toast")].reverse();
	const initialOffset = 16;
	let offset = initialOffset;

	toasts.forEach((toast, i) => {
		toast.style.top = `${offset}px`;
		offset += toast.offsetHeight + initialOffset;
	});
}

Here’s an example style for the toasts:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

:root {
	--t-background: DarkSlateBlue;
	--t-radius: 5px;
	--t-color: white;
	--t-font-size: 14px;
	--t-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.toast {
	padding: 1em;
	position: fixed;
	z-index: 9999;
	background: var(--t-background);
	border-radius: var(--t-radius);
	border: none;
	color: var(--t-color);
	min-width: 240px;
	max-width: 40%;
	opacity: 0;
	top: 0;
	transition: opacity 200ms ease-out, top .25s ease-in-out;
	font-size: var(--t-font-size);
	font-family: var(--t-font-family);
}

.toast.newest {
	top: -2em;
}

.toast:popover-open {
	opacity: 1;
	inset: unset;
	right: 1em;
	top: 1em;
}

.toast.closing {
	opacity: 0;
}

.toast-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.toast-close {
	border: none;
	background: transparent;
	cursor: pointer;
	font-size: var(--t-font-size);
	color: var(--t-color);
}

And here’s the final result:

See the Pen Popover API Toasts by arfypup (@arfypup) on CodePen.

  1. most browsers released after January 2025: Popover API - MDN Web Docs ↩

]]>arfypupSet Flatpak to use system cursor icons2024-09-04T20:03:33+02:002024-09-04T20:03:33+02:00https://mystie.dev/2024/09/04/flatpak-system-iconsvia flatseal gui

download flatseal

in flatseal, go to All applications, scroll to Filesystem -> Other files, click on the + folder icon, then add this into the text box:

/home/<your username>/.icons:ro

changes are saved automatically

via terminal

run this command:

flatpak --user override --filesystem=/home/$USER/.icons/:ro
]]>arfypup