DEV Community: Kai

How to Know Whether to Use Data URLs

Kai — Sat, 24 Feb 2024 14:49:43 +0000

We often can provide assets with a URI or a so-called “Data URL” on the web. As they are so straightforward to use, they get pretty often copied (from a tutorial, snippet, or whatnot) without us being able to tell what they do, when to prefer them, or whether you should still be using them altogether. It's one of the lesser-known performance tweaks I will shed some light on in this blog post.

This post was reviewed by Leon Brocard & David Lorenz. Thank you! ❤️

What are Data URLs Anyway

First things first, what are we talking about here? Let's make a simple example of a background image:

<div></div>


div {
  height: 100px;
  width: 100px;
  background-image: url('https://placehold.co/600x400');
}

That snippet is quite simple. We add a div and configure it to hold a background image. You might know that there is a second approach to this, however. This approach makes use of a so-called “data URL”:

div {
  height: 100px;
  width: 100px;
  background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL(...)TEwLjRaIi8+PC9zdmc+');
}

Now, that is different. The two snippets output the same result. However, in the latter, we provide the image data directly in the CSS instead of requesting it from a server. Here, we provide the encoded image binary data directly in a given convention. There is no need to catch it from the server, as we provide the file in CSS.

A new URL scheme, “data”, is defined. It allows inclusion of small data items as “immediate” data, as if it had been included externally.

Base64 Encoding

How does this work? The image data is encoded with an algorithm called “Base64”. It sounds a bit complicated, but it's, in fact, not. The main goal of such encodings is to display binary data in Unicode. That's why such are called “binary to text encodings.” A digit in Base64 can represent a maximum of 6 bits. Why is that? Let's make an example. We want to display 101101 as text. But hold on a second. Did you recognize something? We already did it! Writing out 101101 made a bit-sequence apparent to you as a reader. _We encoded binary to text._Now, let's imagine instead of “0” and “1”, we decide for “A” and “B”: BABBAB. Guess what? We have just Base 2 encoded data! Yay. Do you see the issue here? We must utilize eight bytes of data to encode six bits of data, as A and B in ASCII take up one byte. We “inflate” or bloat this data by ~1067% (100 % / 6 bit * 64 bit).

Binary Sequence	Base2 Encoded
0	A
1	B
101101	BABBAB

To tackle this problem, there is a little trick: we add more characters to encode a bigger binary sequence at once. Let's make another example here: Base4 encoding.

Binary Sequence	Base4 Encoded
00	A
01	B
10	C
11	D
101101	CDB

How would our sequence of 101101 look with that algorithm? It encodes to CDB. This results in a far smaller bloat of only 400%! We continue in that manner until we have 64 distinct characters representing a specific sequence each. That's what Base64 encoding is.

Binary Sequence	Base64 Encoded
000000	A
000001	B
...	...
011001	Z
011010	a
...	...
101101	t
...	...
111111	/

In the given table, we see that our example sequence of 101101 is encoded by only using the character t. That means we only add two more bits to display 6 bits of data!  That is merely an inflation of roughly 133%. Awesome! Well, but why stop there? Why did we expressly agree on “6 bits” and not use, e.g., Base128 encoding? ASCII has enough characters, right? However, 32 of them are control characters that computers may interpret. That would lead to severe bugs. Why this is exactly is out of the scope of this blog post (I mean, the Base64 algorithm already kinda is). Just so much: There is a Base91 and Base85 encoding; however, as illustrated in our examples above, “power of two” is more readily encoded when it comes to byte data, and that's why we mostly settled on that.

To summarize this a little, let's say we want to encode 10 bytes of data, which is 80 bits. That means we need 14 characters (80/6≈14) to represent that. The binary sequence 000000 is represented as ASCII A in Base64. Read this: “The binary data of my image has six consecutive zeros somewhere. The algorithm of Base64 encoding will transform this into 'A.'” In ASCII, A is eight bits long. Represented in binary, it looks like this: 01000001. Thus, we made this sequence two bits larger.

Preamble

As always, when it comes to performance, it's complex. There are a lot of layers to the question of whether to use a data URL or not. It heavily depends on how your external resources are hosted. Are they hosted on the edge? What's the latency? The same goes for the hardware of the users. How long does it take for them to decode the given data? May this take even longer than requesting the already decoded resource? You must always collect RUM data and compare approaches to know best. However, generally speaking, we could say that there is a sweet spot where the Base64 encoding overhead exceeds the overhead of an HTTP request, and thus, it's advisable not to use Data URLs.

The Premise

Let's repeat this: if the overhead of a request to an external resource exceeds the size of the Base64 extra bloat, you should use a data-url. We are not talking about the payload here. It's just what the request in isolation costs us. Do we have a bigger total size with Base64 encoding or an HTTP request? Let's make an example here. We start with a white pixel. We decode this as PNG in, well, the resolution 1x1. We will add other background colors throughout this blog post. The following table already yields the most important values: uncompressed file size as PNG, the (bloated) size when Base64 is encoded, the total request size (headers and payload), and finally, the total size of the data-URL.

Resolution	Background Color	Size	Base64 Encoded Size	Request Size (total)	Data URL Size
1x1	White	90	120	864	143

In this first example, we would need to transfer 721 (864 – 143) more bytes if we did not utilize a data URL.

Measure the Request

Before we head deeper into data points and their analysis, I want to clarify how we measure the total size of a request. How do we get the value in the “Request Size (total)” column? The most straightforward way is to head to the network tab in the Web Developer Tools. The first thing you do is create a snapshot of all the page's network requests. Then, find the one for the particular media in question.

{
    "Status": "200OK",
    "Version": "HTTP/2",
    "Transferred": "22.12 kB (21.63 kB size)",
    "Referrer Policy": "strict-origin-when-cross-origin",
    "Request Priority": "Low",
    "DNS Resolution": "System"
}

Now, you might think it's pretty easy, right? Subtract the payload (21.63 kB) from the transferred data (21.63 kB) and done. However, you also have to take the request header into account! That adds a little something.

Long story short: in the screenshot above, we see both headers, request and response. This data is the “overhead” we need to take into consideration. Everything else is payload – not bloated by Base64 encoding.

To the Lab!

Now, equipped with that knowledge and skills, we can create some data points. I did this with a Node.js script. It creates many images and writes their file sizes and Base64 encoded sizes in a CSV file:

import sharp from "sharp";
import fs from "fs";

// Create a new direcotry for that run
const nowMs = Date.now();
const outputDirectory = `./out/${nowMs}`;
fs.mkdirSync(outputDirectory);

// Create a CSV file in that directory
const csvWriter = fs.createWriteStream(`${outputDirectory}/_data.csv`, {
  flags: 'a'
});

// Write the table column labels
csvWriter.write('color,resolution,fileSize,base64size \n');

// Create 700 images for each color in the given list
["white", "red", "blue", "green", "lavender"].forEach(async (color) => {
  for (let index = 1; index <= 700; index++) {
    const image = await createImage(color, index, index, outputDirectory);
    // Write the data into CSV file
    csvWriter.write(`${color},${index},${image.sizeByteLength},${image.sizeBase64} \n`);
  }
});

async function createImage(color, width, height, outputDirectory) {
  const imageBuffer = await sharp({
    create: {
      width,
      height,
      channels: 3,
      background: color
    }
  }).png().toBuffer();
  const fileName = `${width}x${height}.png`;
  fs.writeFileSync(`${outputDirectory}/${fileName}`, imageBuffer);

  return {
    outputDirectory,
    fileName,
    // This is where we unwrap the relevant sizes and return them
    sizeByteLength: imageBuffer.byteLength,
    sizeBase64: imageBuffer.toString('base64url').length
  }
}

Okay, this might seem a bit excessive (and it might be), but it generates 700 images with different resolutions (from 1x1 to 700x700) for five different background colors. It then writes the file size and the Base64 encoded size into a file that can be imported into a spreadsheet.

The Data

Let us analyze the data a bit, starting with the raw results. Just so that we know what we are basically looking at.

color	resolution	fileSize	base64size	requestSize	Data-url size
blue	1	90	120	864	143
blue	2	93	124	867	147
...	...	...	...	...	...
blue	699	8592	11456	9366	11479
blue	700	8606	11475	9380	11498
green	1	90	120	864	143
green	2	93	124	867	147
...	...	...	...	...	...
lavender	700	9218	12291	9992	12314
red	1	90	120	864	143
...	...	...	...	...	...
red	700	8606	11475	9380	11498
white	1	90	120	864	143
...	...	...	...	...	...
white	700	2992	3990	3766	4013

We have data points for 700 PNG images for five colors: blue, green, red, lavender, and white. The essential part is within the columns “fileSize” and “base64size”. These are the (uncompressed) file size and the size when we Base64 encode the same file. These data points are followed by columns referring to the total sizes. Column “requestSize” stands for the size of the payload plus the headers (request and response). In reality, they will differ a bit from request to request. Here, I assumed a static value of 774 bytes, more or less the median in Firefox. That's good enough for the analysis. The same goes for the data URL size. We want to add 23 bytes, as the encoded string is prefixed by data:image/png;base64,.

Findings

Interestingly, more than one data point may cross the line of 100% bloat. It's the line where the sizes would be exactly equal. That means that there may be cases where it would have been finally better not to use a data-URL, to be the other way around again right afterward.

Let's understand the basic chart first. What does this mean? Simply put, for lavender, red, green, and blue, it would be preferable to use data-url up to a resolution of about 340x340. For white, you must start asking questions from a resolution of 570x570. Let's dig deeper into it. You can recognize a few things. First of all, the more complex (in our case, 'lavender') an image is, the more it gets bloated, thus reaching the point of “request preference” faster. That makes sense, as the PNG encoding needs to yield more uncompressable value. The next thing to notice is how the three base colors (Red, Green, and Blue) behave more or less identically. This makes sense because their binary data looks more or less the same. Of course, the most remarkable is the white data series. Not only is it the least complex image, thus the one that's longest in the “use data-url sector,” but it's also crossing the 100% bloat line twice! Well, the most critical data points are the ones where we cross the line of 100% bloat, right? Let's have a look at this then:

resolution	blue	green	lavender	red	white
337			0.9993
339			1.0013
341			0.9997
343	0.9997	0.9997		0.9997
573					0.9997
602					1.0287
608					0.9936

Woah! Even the lavender-series does the “crossing the line twice move”! Outstanding. Okay, what do these data points mean?

For blue, red, and green, using a data URL for resolutions up to 343x343 would be preferable
Lavender has different sections:
- 337 and 338: A request is preferable
- 339 and 340: A data URL is preferable (again)
- 341 and bigger: A request is preferable
As already said, white also has different sections that stretch over a greater delta:
- 573 to 601: A request is preferable
- 602 to 607: A data URL is preferable (again)
- 608 and bigger: A request is preferable

⚠️ Just a heads up again: this is merely a lab. It is there to showcase how to measure and compare your data. It is not 100% accurate for the field, as we assumed static sizes that may differ from request to request. This is especially relevant for the lavender series, where the conclusion might change from one probe to the next. Also, it would help if you did not draw general conclusions from here. Depending on the complexity and file format, the results are entirely different. See how lavender is already far more different from white. That means that the edge cases are not to be generalized.

To the Field!

Now, let's examine a real example. There is a great website hosted at https://www.ungra.dev/. We load one optimized image there. It's as good as it gets for a JPG. The image has 21.63 kB, which adds up to 22.57 kB with the header overhead.

I refrain from posting the Base64 encoded version here. It's huge. It has a solid of 28,840 characters. Thus, the Data URL is 28,2 kB large. All in all, using a Data URL would transfer 5,751 bytes more.

Now, that image is only 239 × 340 pixels large. You can see that the evaluation depends more on the complexity of the image than its sheer resolution.

File Formats

You may wonder about file formats. I tried to see how far I could go with the image in question from the previous chapter and converted it to AVIF. I compressed it – with reasonable losses - to 3,9 kB! That sounds promising to come to an even more apparent conclusion this time, right? However, the same picture also only has 5,2 kB Base64 encoded. That means that, in general terms, the question of whether to use a Data URL is not significantly impacted by the file format. It just scales the numbers.

Excurse: What's with non-binary data?

Something that is probably interesting here is what happens with non-binary data. Let's take SVGs, for example. How are they Base64 encoded, and what does that mean for our decision to put them into data URLs or not? You can, of course, Base64 encode them just as any other data. However, it generally doesn't make sense, as the original file is already available in Unicode. Remember, Base64 is a “binary to text encoding” algorithm! If you encode SVGs, you don't win anything but bloat the file.

⚠️ There are some edge cases where this might come in handy! In general terms, however, refrain from doing this.

However, you can still use Data URIs for SVGs and the like! It's just that you do not add charset=utf-8;base64 to it. It's merely data:image/svg+xml;utf8,<SVG>.... Remember that such a URL does not need to be Base64 encoded. We need this extra step to render binary data.

Draw a Conclusion

Now that you know how to get the relevant numbers, it's relatively easy to conclude. Again, you must compare the request overhead with the increased file size of the Base64 encoded media. Is the request header size, response header size, and payload bigger than the Base64 data URL string? If yes, use the latter. If not, make a request.

Other Considerations

In reality, you have to take a few more considerations into account. However, as they are very individual for particular scenarios or concern other “layers,” I will only briefly mention them here.

Media Processing

First, if your media is not hosted on the edge, the latency increase may not be worth it. Also, the other way around: if your web app runs on really (!) poor hardware, it might not be worth using a data-url.

Compare Zipped Data

Your data should be compressed. If you haven't done so yet, do it now (there is a big chance you do this already, as it's pretty much the default for most hosters/servers/...). This also means that we need to compare the compressed data here. (What we didn't do throughout this post to keep things simple.) The same goes for optimizing your resources first. For images, compress them as much as possible and use modern file formats like AVIF or WebP. SVGs should also be minimized with tools like OMGSVG.

HTTP/2 and Server Push

With HTTP/2, a concept called server push makes data URLs nearly obsolete! A server can provide the resources we have encoded inline in one go. Read more about that here: https://web.dev/performance-http2/#server-push.

Unfortunately, server push is mainly abandoned and deprecated nowadays. Even to an extent where I can say ignore it. If you want to read more about the why, head to this article: https://developer.chrome.com/blog/removing-push/.

Conclusion

Data URIs are primarily used with binary data encoded with an algorithm called Base64. It is made to display binary data in a text-based way. This is excellent for Data URIs, for they are text-based! However, Base64 makes the data larger. That means you must check whether it's better to have overhead with the request or to bloat your file.

Confluence - a List of Recurring Posts

Kai — Wed, 24 May 2023 17:38:27 +0000

One of my most controversial opinions is that I have a soft spot for Confluence. But wait, let me explain it a bit further. I understand all the pain people have with it. I get it. I'm usually in the same boat. However, I do not think it's Atlassian's fault for providing a better UX. For many things, it is just administrated and used poorly! Or, to put it in simpler terms, Confluence needs to be utilized correctly. I do not want to discuss this further in this post, but I want to provide an excellent example of what you can do with Confluence. This already implicitly covers my main (opinionated) arguments for my stance on the discussion.

The Use-Case

One of the most common things people want to do in Confluence is to have a list of recurring posts. Picture meeting notes, workshops, etc. Usually, they have these requirements:

a structured template for a post
an overview of the posts
a complete/detailed post
having that data searchable
good UX to add another item

What we want is a list of notes that share the same structure. For example, all of them should serve an agenda, a date, a list of participants, and so on. They should be organized in a structured overview to be easily scanned and searched.

The Problems

I discovered that many teams (or even organizations) struggle to have a good concept for this everyday use case. The problems are often the same:

Bad UX of Adding a New Entry

That's probably the most annoying issue. The concept of adding a new entry is quite often to copy a portion of the page. This comes with various problems: It's unclear what to copy, formatting issues are cloned, copying on a slow page (and such page is getting bloated, thus slow over time) is cumbersome, specific formats are cluttered and need to be manually fixed, etc. Wouldn't having a “Add Entry” button be nice instead?

No Overview

It usually gets confusing when all the entries are pushed into one page. The information is all over the place, you can't keep track, it's hard to find and filter entries, the page gets slow, and the structure is not visible from the page tree. It's also hard to distinguish between general and detailed information. Latter is not necessarily needed prominently in the list, yet you have no choice.

No Clear Blueprint

Having a blueprint with mandatory information is relatively easy to maintain initially. People commonly add a table with respectively labeled columns. However, as the lists progress, columns might get removed, renamed, added, formatted differently, interpreted, copied with flaws, and so on. The needed information more and more get ambiguous. And the lower the quality of the entries, the more people feel demotivated to maintain the same in the upcoming items. Do you also have a list with missing and low-quality data in the rows? Didn't that list start out pretty ambitious and well-thought-out, only to be neglected after a while?

Making it Work

Now comes the fun part. We solve these issues in an exquisite and convenient way. We use custom templates, the table of contents feature, the excerpt macro, task lists, and a button to add a new child page.

Adding a Template

The first thing we need is a template. That's basically a prefilled page representing our recurring document. Let's stick with meeting notes for our example.

ℹ️ Info

Explanation on how to exactly add a template is beyond the scope of this post and varies heavily between the different Confluence versions. However, you can always head to the official Atlassian documentation and read about it there.

First of all, you need to know these things:

What information is needed on the blog post as a whole?
What information is known upfront or mandatory?
What information is needed in an overview?
The basic outline and layout of your post.

Based on this, you can create your post template. What we do now is create a blank template. First, we are going to add variables to the page. To do so, open the add macro dialog (macros are called slash commands in the newest versions) and choose “New Variable.” Do this for every mandatory information that can not be automatically (computational) evaluated, and the author knows upfront. Let's say, for example, the time and date the meeting will take place. Don't overthink it at this point. Our template can be further optimized and adapted as time moves on. All we have to do now is further build (or set up) the post template. Add the needed sections, fields, placeholders, headlines, and whatnot. Follow along with the official documentation in case you need help—attention to the “Instructional Text” and “Template Variables” chapters. There is one last step you need to do now: add an excerpt! To do so, choose the excerpt macro (or slash command) and add it. Now place everything into the box needed for a basic post overview. Commonly you'd refer to this as “header data.” For meeting notes, it can be, for example, the date of the meeting, participants, agenda, etc. Only add a little. Be very cautious not to overload the excerpt. Further information and a detailed guide are here: https://confluence.atlassian.com/doc/excerpt-macro-148062.html. The idea is that we, later on, show this exact excerpt in the overview. This can be easily done with a specific macro.

⚠️ First Confluence Pitfall: Do not restrict users from adding templates! They are a crucial part of the app and are meant to be dynamically used.

Adding a Parent Page

Now we want to have a parent page. Think of this more as a “folder” than really a page. The difference to a directory as we know it from operating systems is that it's quite feature-rich. We can provide any content we want, including an overview of child pages! That's precisely what we do now. First, add some meta information to your page. Let's say a title: “Meeting Notes of Foobar!”. You can do whatever you want and need. Add a header image, disclaimer, intro, or whatever. Now comes the critical part: the child-page macro. Add it where you want to have the overview of past meetings and configure it like so:

Excerpt Display: Rich Text
Heading Style: Something that suits your document, but the second level should do the trick, usually
Sort Children by: Creation
Optional – Number of Children: Normally, you want to restrict the child pages displayed For meeting notes, it's often a good idea to set this to three. It would show the currently open notes, the preceding meeting, and one additional for reference.

More usage information here: https://confluence.atlassian.com/doc/children-display-macro-139501.html

Mention the “Exceprt Display” option. This is where you tell the macro to show the page excerpts. Remember how we added it to the template? The option “Rich Text” shows the content precisely like on the page (otherwise, it would be transformed into a text-only version).

⚠️ Second Confluence Pitfall: Pages are directories, not documents! Please do not use them as you would with a word processor (or whatever is used to create a content-complete PDF eventually). Generally, it would help if you strived to have many pages with little content. The same goes for spaces. There is no one fits all solution, but often spaces are defined far too broadly.

Okay, now you should have a list of child pages that, more or less, looks like you'd have added their excerpt content to the just added page. You can try this out by adding a few example pages (they don't necessarily have to be created from the template from the first chapter). Now we need one additional thing. Add the macro “Create from Template.” We use it to have a button to create a child page, so a meeting note. Configure it like so:

Button Text: Set this to your needs, e.g., “Add Meeting Note”
Template Name: The Template you have created in the first chapter
Title of the Page to be Created: Set this to your needs (be aware that you can use variables here), e.g., “Meeting – @spaceName on @currentDate”
Space Key: the key of the current space (usually defaults to that already)

More usage information here: https://support.atlassian.com/confluence-cloud/docs/insert-the-create-from-template-macro/

⚠️ Third Confluence Pitfall: Don't consider Confluence to be a document silo. It's not Google Drive. Try to utilize dynamic tools and macros as much as possible. Try to use it as a no-code front-end platform rather than a document management system.

Bonus – Task List

If you plan to keep track of the pages' tasks, you may also consider adding the task report macro. It lists all the tasks on a particular page and its child pages. In our case, that would be our newly created parent page.

Conclusion

With this approach, you have an easy way for users to add a new post with a given format. You have a very easy-to-scan archive of posts and keep the overview performant. It mitigates the problems we addressed in this post. You may want to read through them again now. Please also take this opportunity to rethink how you utilize the tools you have within Confluence! Get creative. 😊 The features are meant to be used!

Why I don't Use Odd.af Anymore

Kai — Sat, 25 Feb 2023 19:53:34 +0000

The last few days, I have been pretty busy migrating my domain from “odd.af” to “ungra.dev”. I posted a bit on Social Media about the story, but I wanted to wrap it up in detail in this blog post.

What Happened

ℹ️ The top-level domain “AF” is Afghanistan's country code top-level domain. A country that the Taliban took over in 2021.

A few weeks ago, my domain provider, Vercel, wrote me that my domain will not be able to be renewed. It's due for auto-renewal on the 22nd of April. They stated they have issues with the authorities in Afghanistan.

Due to factors that are out of Vercel’s control, we are no longer able to accept or renew .AF registrations, similarly to most registries today. CcTLDs (country-code Top Level Domains), like .AF, are managed by bureaus from the country, sovereign states, or dependent territory. An attempt to register a ccTLD will open a series of requests to the managing entity. We have made this decision due to the uncertainty Afghanistan continues to have with an evolving political situation. The .AF registry has been unresponsive and payments to them have not been possible, disrupting process renewals and new registrations.

So, long story short, the Tailban did not create a bureau being able to handle domain registry. I'm, however, still not sure whether this means every single domain provider is in the same boat and all “.AF” domains will expire sooner or later. On one hand, it sounds like this. On the other hand, this would be huge. Like, imagine not holding a silly domain for private use but for a big company with its HQ in Afgahnistan.

What I had to do

Vercel recommended I get a new domain ready.

We recommend you prepare another domain and are here to help you with that process.

To be honest, at first, I thought about talking to other providers in order to keep “odd.af”. I love that domain and didn't want to go through the pain of migration. The longer I slept about it, the clearer it was that I had to move away. I had several good reasons.

Reason One: The Expiry

Well, that one is easy. Since my domain cannot be renewed, I have to do something. A possible solution to the problem is to ditch it and use another.

Reason Two: Language Barrier

A problem I always had with “odd.af” was that it was hardly understood in Germany. Not only was it a different language, but you also needed to know basic “internet slang”. Especially for older folks, it was quite confusing. Admittedly it was rather short and very easy to spell out. Also, not that I really cared, but many people are not keen on profanity in – at least somewhat – professional domains.

ℹ️ “af” is an internet acronym for “as fuck”. The domain meant “odd as fuck”.

Reason Three: Uncertainty of CcTLDs

The first reason I didn't like to use a ccTLD anymore was simply that it was semantically incorrect. I have nothing to do with Afgahnistan, especially because AF is not a ccTLD with a “Commercial License”. Such domains (e.g., “me”, “am”, “fm”, “sh”) adopt policies to be not reliant on the infrastructure of a country. For example, “.co” is not managed by the Colombian Government but rather a Colombian and US company. The second reason is, well, that it's a ccTLD, thus dependent on the particular country. 😊 What happened to my domain is seldom enough but can happen anytime. I don't want to have this unnecessary risk anymore.

What I did

At first, I gathered a list of potential domain names. The problem was to find one that had not a ccTLD (see previous chapter), was affordable, and was not too boring. I pretty much liked the idea of translating “odd” to German. Among others, it means “ungerade” or “ungrade”. Then “ungra.de” came to my mind. However, first of all, that domain was already taken, and second, it still relies on a ccTLD. (I mean, “DE” would've been not too bad since I'm a resident of Germany, but well.) Finally, I went with “ungra.dev” it's a portmanteau of “ungrade” (German for “odd”) and “dev. I pretty much like it, and it's only 15 $ per year.

Now came the hard part: migrating. It was a bit easier than I initially thought to be honest, but still pretty much painful. At first, I went through all accounts using an “odd.af” mail address. I just filtered for “odd.af” in my password manager. Surprisingly, they were very few since I use masked e-mails for most of my credentials.

After I changed all the addresses in these accounts (not to my new “ungra.dev”, but rather “masked e-mails”), I went on and checked my mail account. I informed everyone I had contact with that my mail address changed.

Then I updated all the links on my social media profiles and my website. Nothing should point to “odd.af” anymore.

The last step was to redirect the old domain to the new endpoints technically. In most cases, this was just a case of adding “ungra.dev” to the project and installing a 301 (“moved permanently”) redirect to the “odd.af” domain. One redirect was a bit more complicated. It was blog.odd.af. I changed the custom domain configuration in write.as, but I can only provide one, meaning I needed to create a redirect at Vercel. This is also surprisingly inelegant, as you have to create a repository with a certain configuration file and then assign the “to be redirected” domain to it.

{
    "redirects": [
        { "source": "/", "destination": "https://blog.ungra.dev/" }
    ]
}

Or in other words, I needed to create a nearly empty project and assign “blog.odd.af” to it. I found this blog post explaining this approach.

Done

I'm so glad that I'm through with this truly unnecessary workload. It's super hard to find the time and energy to do this. It's quite a relief that I think I have it off the plate. Keep your fingers crossed that I didn't forget about anything. 🤞

How to Fix Faulty Spotify Icon in KDE Plasma Application Switch

Kai — Wed, 14 Dec 2022 09:30:56 +0000

Cover image description

A screenshot showing an application switch with three open apps: system settings, Spotify and Firefox. The icon of the Spotify entry is highlighted and clearly wrong. Only the label "Spotify" gives away, that it's actually the app. The icon is the X11 fallback icon.

Applying a KWin Rule

Whether I installed the app image or the Flatpack version of Spotify, I always had issues with the app icon in the window's title bar and the application switch. It fell back to a defaulting x11 icon.

After investigating, it turned out that it's relatively easy to fix. All you need is a simple KWin rule. You don't even need to set any properties with it (at least, I have observed so far). It just needs to be there. For the sake of "better safe than sorry", we add a meaningful property anyway.
Open up "Window Rules" in the "System Settings". Add a new rule and give it a meaningful description. Something like "Spotify" should do the trick. Then add spotify (lowercase is essential!) as the Window Class. Afterward, click "Add Property" and choose "Desktop file name". Add spotify-client as the value and select the mode Force.

That's it already! Applying the changes should fix the icon.

Destructuring Tweets - Episode 13 - Let's Construct

Kai — Mon, 07 Jun 2021 12:30:10 +0000

How's tricks? I welcome you to the marvelous world of JavaScript quizzes on Twitter! This very article is part of a series where we deep dive and demystify them. This week is a tough one, so this article is a little longer than usual. So let's jump right into the in-depth exploration of constructors in JavaScript!

Snippet of the Week

This week's snippet is from Oliver Jumpertz:

const c = 'constructor';
c[c][c]('console.log("wth?")')();

This time we have a complex one. However, as confusing as it might seem, it also makes a hell of a lot of fun to destruct.
We start by creating a string. The value of it is pretty essential here, for it's the name of the property we access in the second line two times iteratively. We are accessing the constructor property of the string. Then we (again) access the property constructor of the resulting value.
The resulting function gets called with an argument representing a call of a function, console.log("WTH?"), itself. The return value of that call gets executed (()) anonymously right after.
So far, so confusing. But worry not, we clear things up right away.

The Output

The output here is probably something the least can guess on the fly. Presumably, the context of the riddle gave it away a bit, tho. It is a log to the console reading "wth?" Well, indeed: what the heck?!

The Analysis

Let us move through this step by step. First, we get the more accessible things out of the way: accessing object properties by the given string value constructor twice. Splitting this fraction up in an additional snippet helps to understand what's going on:

const stringObject = new String('test');
stringObject.test = { test: 'foobar'};
// Three times the same call:
console.log(stringObject[stringObject][stringObject]); // foobar
console.log(stringObject['test']['test']); // foobar
console.log(stringObject.test.test); // foobar

It shows how we can access specific object properties by a string, even if they are part of the string object reference itself. For our Twitter quiz meaning, we are accessing the constructor property of the string. Then yet again, the property constructor of the resulting value.
Now comes the crucial part of understanding all of this — the property constructor. What does it hold? Why is it there? Well, it stores the function used to construct the object. Let me explain this concept by another snippet (I'm sorry):

function FooBar() {
}
const fooBarInstance = new FooBar();
console.log(fooBarInstance.constructor); // function FooBar()

const stringInstance = 'foobar'; // OR new String('foobar')
console.log(stringInstance.constructor); // function String()

Here we define a custom function used to construct an instance. This instance then holds a property constructor with the value of the specified function. That's simply what JavaScript automatically does on instantiation.
Further, you can see how this concept works with strings. You use syntactical sugar to avoid writing new String(''), but the paradigm is the same: a function "String" exists. It accepts an argument, and when called to create an instance, the resulting object has a property constructor holding the used function. And that's the key-secret here.
Coming back to the original snippet, we create a string and access its property constructor. By now, we know that this property holds the function String. So what happens if we access the constructor property of a function object? Well, yet again, it holds a function. This time the one used to construct, well, functions themselves. Which is indeed function Function().
Let's examine this by another snippet:

function foo() {}
console.log(foo.constructor); // function Function()

const bar = new Function('console.log("something")');
bar(); // something
console.log(bar.constructor); // function Function()

const stringInstance = 'foobar'; // OR new String('foobar')
console.log(stringInstance.constructor); // function String()
console.log(stringInstance.constructor.constructor); // function Function()

Mention how a function declaration is just syntactical sugar around new Function(). So, if the constructor property of a String object is a function, the constructor property of this function is the function used to construct functions, thus the function Function(). 🤯😂
Now that we have learned this, the rest is pretty straightforward. After accessing the constructor property the second time, we have a function constructing functions. So whatever we pass in as a string gets returned as a function instance. In our case, console.log("wth?"). Since we do not store this return-value, we call it anonymously immediately right after via (). And that's how after all of this, console.log("wth?") gets executed and, well, logs the string wth? to the console.
Let's wrap it up in one last snippet:

const c = 'constructor';
const stringConstructorFunction = c[c];
console.log(stringConstructorFunction[c]); // function Function()

// As simple as:
Function('console.log("wth?")')(); // wth?
// Or in a more common syntax:
(() => console.log('wth?'))(); // wth?

Snippet Summary

Trickery: the constructor property
Key Learning: how constructor functions work in JS
Further Reading:

Destructuring Tweets - Episode 12 - Coalesced False

Kai — Sun, 02 May 2021 18:23:40 +0000

S.P.D.S.V.B.E.E.V.! Look who managed to head to dev.to only to find himself reading an article about a tweeted Javascript quiz. In this series, I try to break such down and this week features a lesser-known but often useful operator: Nullish Coalescing!

Snippet of the Week

This week's snippet is from Hossein Moradi:

console.log(1 === null ?? 1)

This week we have a super quick one. It logs a logical expression to the console. And that's pretty much already it!
The expression itself consists of two parts. The first one compares null to 1. The result of that is the left-hand side operand of a so-called "Nullish Coalescing Operator" typed as ??.
The right-hand side operand is, again, just 1.

The Output

The output is also pretty straightforward. At least if you know what a "nullish coalescing operator" does. This expression will log false to the console.

The Analysis

For the analysis, we start with the Strict Equal Operator (===) as it takes higher precedence ("will be evaluated before") than the mysterious two question marks. And it's also reasonably easy. Comparing null to 1 will undoubtedly result in false, won't it?
What's left looks something like: false ?? 1.
So far, so good, now comes the fun part. A Nullish Coalescing Operator works in its core like a Logical Or (||). However, instead of checking for falsy values, it only validates for nullish ones! That means either null or undefined. To get this straight: it will return the left-hand side value if it's not "nullish" or the right-hand side value if not.
And that is the reason false gets printed to the console. 🥧

Snippet Summary

Trickery: a not so well known operator in use
Key Learning: operator precedence and what nullish coalescing operator does
Further Reading:
- Nullish Coalescing Operator
- Operator Precedence

Destructuring Tweets - Episode 11 - Continue to Break

Kai — Sun, 21 Mar 2021 16:29:56 +0000

What up, homeslice? Glad you found this blog series about JavaScript Twitter quizzes! This week is a funny snippet around the loop-manipulating key-words break and continue. Get ready for some serious trickery!

Snippet of the Week

This week's snippet is from fullstack_learning_path:

for (var i = 1; i < 10; ++i) {
  if (i % 3) {
    continue;
  }
  if (i == 7) {
    break;
  }
  console.log(i);
}

The snippet features a for-loop initializing the variable i with 1. Said gets incremented by 1 until it's 9 (< 10). To put it simply: we count from 1 to 9.
In the loop, there are two checks before printing the current index to the console — the first tests whether modulo 3 returns a truthy value, which means everything except 0. In that case, continue gets executed.
If not, the snippet further validates whether the current index holds 7. In case it does, break is executed.

The Output

Okay, that one is a bit of a brain-fuck. On first thought, you might conclude it'll log 3 and 6. Since the loop breaks on 7, right? However, it will still also print 3, 6, and 9! All three of the values having no remainder when divided by 3 (% 3). In case you are still or even more confused, worry not and jump right to the next chapter.

The Analysis

So, we already figured the loop is counting from 1 to 9. Let's focus on the first check, i % 3. It will always be true if it does not result in 0. In case the index can be divided by three without having a remainder, the expression is false. It's true for 1, 2, 4, 5, 7, 8 in this context, to be even more exact.
Let's examine what happens then: continue is called. This key-word tells the loop to skip the rest of its body and move to the next iteration. Meaning the console.log at the bottom is never reached. Or the other way around, only 3, 6, and 9 are logged.
Now let's focus on the second if-statement. In case the index holds the value 7, the loop breaks. break is a key-word telling the loop to stop with everything. It skips the rest of its body and will not iterate further, continuing with whatever is next in the sequence.
That's why this snippet is so funny. It tricks you into believing 9 will not print since it stops after i reached 7. Well, as we know, this is not the case. And by now, you probably already figured also why. The second statement is, just as console.log(i), only reached by 3, 6, and 9. These numbers are not 7 🤯, thus making the body of the second if-statement unreachable code! break is never executed.

Snippet Summary

Trickery: creating logically unreachable-code
Key Learning: what continue and break does
Further Reading:

Destructuring Tweets - Episode 10 - Short && Circuit && Evaluation

Kai — Sun, 07 Mar 2021 20:40:58 +0000

What's cookin', good lookin'? Welcome to my blog series about demystifying JavaScript quizzes from Twitter! This week is about a rather basic concept. Let's dive right into the beautiful world of logical operators in JavaScript!

Snippet of the Week

This week's snippet is from Ravin:

let name1 = " ",
  name2 = undefined,
  name3 = "ravin",
  name4 = "rav",
  username = name1 && name2 && name3 && name4;

console.log(username);

Here, we see a declaration of several variables. Or, more precisely, four names. The first one is a seemingly empty string. However, hold in mind that this is not the case! It contains a whitespace symbol. Next, they store undefined, right followed by another two strings.
The next line is where things get interesting. The previously defined variables are chained with the && operator, and the output is stored in yet another. They log this last variable, leaving us with the question, what the value of it is.

The Output

If you are not familiar with the presented API, the log might seem to be wildly random. For it is merely undefined. Isn't it weird how a logical operator does not return a bool? And why does it not take any of the provided strings into account?

The Analysis

First things first, we need to understand how the && in JavaScript works. It returns the first falsy value it encounters or the last (most-right) one. Such value is one of NaN, null, 0, an empty string ("" and such) or undefined.
This definition may sound a bit weird at first. However, it makes actual total sense (at least in JavaScript terms). Please give it a thought. If everything is truthy, the last expression is returned. This final expression can also be truthy or falsy, then having the sole power to determine the full statement's logical outcome.
Think through these different statements:

if ('a string' && true) {
 //?
}
if (NaN && true) {
 //?
}
if (NaN && '') {
 //?
}
if (true && false) {
 //?
}
if (true && true && false) {
 //?
}
if ('a string' && 123 && 'foo'){
 //?
}

By now, you should know why the output in the given snippet is undefined. It's merely the first falsy statement encountered! name1 is a truthy (non-empty!) string, name 2 a falsy undefined. The other two variables aren't even taken into considerations at this point.
Our snippet comes down to:

console.log(' ' && undefined); // returning undefined being falsy

This behavior is called "Short-Circuit Evaluation" btw.

The logical AND expression is evaluated left to right, it is tested for possible "short-circuit" evaluation using the following rule:

(some falsy expression) && expr is short-circuit evaluated to the falsy expression;

Short circuit means that the expr part above is not evaluated,

from MDN Logical AND (&&)

Snippet Summary

Trickery: short-circuit evaluation returning the first falsy expression
Key Learning: how exactly the Logical AND operator in JavaScript works
Further Reading:
- Logical AND (&&)
- MDN Expressions and Operators - Logical Operators

Destructuring Tweets - Episode 9 - Short Read about Length

Kai — Sun, 28 Feb 2021 14:55:35 +0000

Wad up? Welcome to my dev.to series about my takes on Twitter code challenges! This time it's going to be awesome. You will learn something about an API you use on a daily basis: length! You read that correctly. Length. Let's jump right in 👉👉👉

Snippet of the Week

This week's snippet is from Apoorv Tyagi:

const numbers = ['100', '200'];
numbers.length = 0;

console.log(numbers[0]);

In that piece of code, they initialize a constant with an array containing two strings - nothing special so far. However, in the next line, the property length gets overwritten by 0.
Just in case, length is a property holding the element count of an Array.

The length property of an object which is an instance of type Array sets or returns the number of elements in that array. The value is an unsigned, 32-bit integer that is always numerically greater than the highest index in the array.

from MDN Array.prototype.length

Okay, so what we do here is replacing the item-count of 2 with a 0.
On the last line, the snippet logs the first element of the array to leave it up for us to guess the output.

The Output

The logged value is not exactly spectacular but may be somewhat counter-intuitive. You probably would expect the length to be read-only or have no significant effect on the calling instance, thus still logging 100.
However, in reality, that's not the case, and it is a tedious matter of undefined.

The Analysis

That's probably the most boring analysis in the existence of my blogging career yet. Cause the answer is that it's designed like that! The length can be overwritten and ditches any elements on indexes exceeding the given value.

Decreasing the length property does, however, delete elements.

from MDN Array

In our example, we provide the value of 0. The array is emptied and does not hold a single item anymore. When we call the first index (0), the value of undefined reflects precisely that.

Snippet Summary

Trickery: special behavior of overwriting length
Key Learning: the length property of an array is not read-only and heavily influences the calling instance
Further Reading:

Destructuring Tweets - Episode 8 - Timeout!

Kai — Sun, 21 Feb 2021 20:03:26 +0000

Ahoy! Welcome to one of the articles about destructuring a coding quiz from Twitter. This time, we check out a very funny sorting algorithm. Be prepared to order numbers with timeouts!

Snippet of the Week

This week's snippet is from Catalin Pit:

const numbers = [29, 11, 201, 7, 99, 912, 39, 31];

for (let num of numbers) {
  setTimeout(() => console.log(num), num);
}

The author defines and initializes an array holding a bunch of random numbers. Afterward, we iterate over each of them to set a timer to execute a simple console.log. Each timer gets executed after so many milliseconds, as the value of the individual array item is.

The Output

No big surprise here. Well, at least if you are familiar with the setTimeout API and gave the snippet some thought.
Indeed you get a list of sorted integers:

The Analysis

The idea behind this snippet is glorious! Instead of comparing the values and ordering them, you just let time decide. The highest value will delay the callback most, thus be printed last.

Appendix

Don't take this snippet seriously! It's meant to be a joke. It would be best if you never utilized setTimeout like that. It's solely for, well, "setting a timer". Never abuse this behavior.

Snippet Summary

Trickery: visualising how setTimeout works
Key Learning: setTimeout is an API to execute a callback after n milliseconds
Further Reading:
- WindowOrWorkerGlobalScope.setTimeout()

Destructuring Tweets - Episode 7 - Even more Evil Eval

Kai — Sun, 14 Feb 2021 19:36:33 +0000

Grüß dich! Welcome to the series about destructuring a JavaScript quiz from Twitter. This Sunday, you'll learn about the one API you should never use: eval.¹

Snippet of the Week

This week's snippet is from h43z:

function challenge(input){
  eval(input.toUpperCase())
}

// provide an input that makes function challenge call alert(1)
challenge('alert(1)');

Here we move into muddy waters. The author declares a function called challenge, which wraps eval. The trick is that the argument of the wrapper-function gets piped through .toUpperCase() first.
The exercise is to make the function execute alert(1).

The Output

The output here is not spectacular but feels kind of magic if you do not know what eval exactly does. However, it is reasonably straightforward: eval executes whatever piece of code gets passed as a string.
So, for our snippet, the interpreter throws an error since eval goes and tries to execute "ALERT", which is undefined in the global scope.

ReferenceError: ALERT is not defined

The Analysis

So, first things first, let's go back to the snippet and examine what exactly happens there. We pass on the argument alert(1). In case we would not have a wrapper function, this piece of code would execute an alert just fine:

eval('alert(1)');

However, since it gets piped through .toUpperCase(), the string, thus the called function, is actually ALERT, and JavaScript is a case-sensitive language!
Now we need to overcome this issue. I came up with three possible solutions. Let's check them one by one.

Altering the Prototype of String

Since the method toUpperCase is part of the String prototype, we can easily alter its function body:

function challenge(input){
  eval(input.toUpperCase())
}

String.prototype.toUpperCase = () => alert(1);
challenge('alert(1)');

In that case, when toUpperCase gets called on input, it does not pipe and parse the string but instead executes an alert. The called function is just overwritten with the target behavior.

Adding the function ALERT

We can also go the other way around and add the missing function ALERT to the global object.

function challenge(input){
  eval(input.toUpperCase())
}

window.ALERT = input => alert(input);
challenge('alert(1)');

That approach is straight forward. We add another function with the right name. Instead of calling alert, we call ALERT instead, which then passes its argument on to alert.

Passing an Object

The first two solutions were actually illegal. The author explicitly stated to solve the challenge by just passing an input. This is what we do in that approach. We pass an object with the function toUpperCase.

function challenge(input){
  eval(input.toUpperCase())
}

challenge({ toUpperCase: () => 'alert(1)' });

Instead of using the implementation in String's prototype, we pass an object with its own version of toUpperCase.

Snippet Summary

Trickery: how to manipulate an existing function call
Key Learning: JavaScript is case-sensitive, eval executes code from a string (and shouldn't be used!), prototyping & global scope
Further Reading:

Warning: Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use eval(). Read more at MDN ↩

Destructuring Tweets - Episode 6 - Default Parameter Values

Kai — Sun, 07 Feb 2021 13:37:57 +0000

Yo! Welcome to the series about destructuring those over-shared JavaScript quizzes on Twitter. Have fun with digging into default values.

Snippet of the Week

This week's snippet is from Agira Technologies:

let year = 2020;
const evolution = (defaultYear = 2000) => {
  year = defaultYear;
}
evolution(null);
console.log(year);

At first, a variable year gets declared and initialized with the number 2020. Just to be manipulated in an arrow-function evolution in the very next line. It accepts a parameter with a default value of 2000. This parameter's value gets assigned to the variable year.
Now comes the exciting part. The function gets called with null as the argument, followed by logging the manipulated variable to the console.

The Output

You have a relatively high chance of 50 % to guess the output right here. As it's either 2000 or null, right? The initial value of 2020 gets surely overwritten.
However, null wins. And there is a good reason for that.

The Analysis

The reason is that null is indeed a value. It means the intentional absence of any other matter. It stands for "nothing" or "void".
That's different with undefined. Undefined is a primitive type (and a value), meaning that a variable does not have a value assigned.
So, if we leave out an argument in a function call, we do not pass "no value" but rather undefined. And that logic is also applied when it comes to default parameters. Only if "no value", so undefined, is passed, it gets overwritten by the defined default value.

Snippet Summary

Trickery: When is a default parameter value applied
Key Learning: Null is indeed a value and therefore a valid argument
Further Reading:

DEV Community: Kai

How to Know Whether to Use Data URLs

What are Data URLs Anyway

Base64 Encoding

Preamble

The Premise

Measure the Request

To the Lab!

The Data

Findings

To the Field!

File Formats

Excurse: What's with non-binary data?

Draw a Conclusion

Other Considerations

Media Processing

Compare Zipped Data

HTTP/2 and Server Push

Conclusion

Further Reading

Confluence - a List of Recurring Posts

The Use-Case

The Problems

Bad UX of Adding a New Entry

No Overview

No Clear Blueprint

Making it Work

Adding a Template

Adding a Parent Page

Bonus – Task List

Conclusion

Why I don't Use Odd.af Anymore

What Happened

What I had to do

Reason One: The Expiry

Reason Two: Language Barrier

Reason Three: Uncertainty of CcTLDs

What I did

Done

How to Fix Faulty Spotify Icon in KDE Plasma Application Switch

Cover image description

Applying a KWin Rule

Destructuring Tweets - Episode 13 - Let's Construct

Snippet of the Week

The Output

The Analysis

Snippet Summary

Destructuring Tweets - Episode 12 - Coalesced False

Snippet of the Week

The Output

The Analysis

Snippet Summary

Destructuring Tweets - Episode 11 - Continue to Break

Snippet of the Week

The Output

The Analysis

Snippet Summary

Destructuring Tweets - Episode 10 - Short && Circuit && Evaluation

Snippet of the Week

The Output

The Analysis

Snippet Summary

Destructuring Tweets - Episode 9 - Short Read about Length

Snippet of the Week

The Output

The Analysis

Snippet Summary

Destructuring Tweets - Episode 8 - Timeout!

Snippet of the Week

The Output

The Analysis

Appendix

Snippet Summary

Destructuring Tweets - Episode 7 - Even more Evil Eval

Snippet of the Week

The Output

The Analysis

Altering the Prototype of String

Adding the function ALERT

Passing an Object