OddPen

Including Schema.org Data in A PostHTML Component with Parcel.js

Sun, 16 Feb 2025 17:21:42 +0000

I love Parcel.js to build static websites. It's really neat. There is one common use-case, I recently had to wrap my head around. Utilizing reusable code. I used to have only a one-pager website (really, just an index.html) up to this point. However, with the rewrite of my personal page, I wanted to have more pages. Hence, I needed to figure how to reuse a header. Luckily, generally spoken, that is super simple with Parcel.js and PostHTML. Really, all you have to do is create an HTML file and put it in via include. You can even pass parameters with a special syntax. Read more about that here: https://parceljs.org/languages/html/#posthtml. There was one issue with that. I didn't know how to pass Schema.org data. The problem was, that I used it with JSON-LD. That works through a script tag. Usually, you have something like:

That format is what Google (or, more specifically, the Chrome team) recommends when it comes to Schema data. Now we have a slight problem. You cannot pass JSON that easily, nor can you pass a whole HTML tag. At least not to my knowledge. However, at the same time, I didn't want to rewrite my whole Schema data, so I fiddled a bit with it. At the end of the day, my solution was to create another reusable component as a file to be included with the original component (a header in my case). This include tag accepts a src attribute, that can be filled by the PostHTML parameter syntax! Hurray. Okay, step by step. You have your HTML page. You want to have your header on there, without needing to maintain it for each page separately. So you create an HTML file for the header, that can be included via PostHTML. You parametrize all the dynamic attributes, like title, keywords and thereof.

PAGE.html ──includes──► HEADER.html ──includes──► SCHEMA-FILE.html             
                                                                  
                             │                                                       
                             │                                                       
       passes parameters including a src (path) to the schema file

One of those parameters is the path to the schema file that you can pass to the src attribute of the include tag within the header. Thus, when everything is glued together, the page requests PostHTML to include the header, which requests to include the schema file as configured by a parameter.

The Page Includes the Header


  {
  "title": "Foobar",
  "schemaFile": "./src/schemas/index-schema.html"
  }

The Header Includes the Schema


  
  
  {{title}}

The Schema File Contains the Data

Games to Play with a Distributed Team

Mon, 03 Feb 2025 20:02:20 +0000

Believe me or not, but games are super important with distributed teams. We do not meet in person that often. Hence, it's crucial to provide opportunity to socialize. And nothing better for that than playing games together! Here is my subjective list of proven (by me 😜) games that work well through a video conference meeting and are SFW.

Codenames

This is easily the best, I guess. It is usually well received by everyone, does not require any special hand-eye-coordination, and has the perfect pace. It only really makes sense with at least four people, though. Check it out here: https://codenames.game/

Gartic Phone

That's always a good ice-breaker. From my experience, people are confused about it in the first round. The second round is hilarious and from then on, it wears off kind of quickly. Hence, I usually suggest it at a very early stage in the “bonding journey” of a group. Also, because there is no competition. There is very little opportunity to affront someone. Find it here: https://garticphone.com/

Make it Meme

Falls in the same category as Gartic Phone, but is very flexible in terms of how much time it consumes. It can only be a quick 10 minutes round and still provide good laughs. What I also like about this (same goes for Gartic Phone, btw!) is, that you create digital assets that you can archive in your Slack channel etc. There were often times when peeps created emojis out of these. See who is the spiciest meme lord: https://makeitmeme.com/

Letterjam

A bit harder to learn I would say, but once understood very lightweight. It is a viable alternative to Codenames, but can as well played with two people. Once people got the concept, it's loved. My advice would be to provide rules upfront. Jam here: https://letterjam.game/

Vote's Out

That's a very cool game if you want to introduce people. I heavily recommend it in groups where peers are new to each other. It can reveal a lot about a person in a fun and non-intrusive way. Other than that, I would prefer Codenames etc., but hey, try it out. Start voting here: https://votesout.com/

Squabble

That's one of my personal favorites, but not everyone's cup of tea, unfortunately. I would describe it as competitive Wordle. In my experience, it's definitely worth trying out, but do not get disappointed if people do not like it too much. It's one of those “love it or hate it” games. Wordle with damage: https://squabble.me/

Boring

A tedious game! No, that's, of course, just the ironic name. It's actually super cool and unique. You have to find words of a certain category and the other players vote if it's a fit. The clue is, that you do not get any points, if you have the same answer as someone else. This game is usually perceived well, albeit usually not the group's top favorite. Get bored: https://really.boring.website/

Spyfall

Finally, an absolute classic. As far as I'm concerned, the original was taken down, but there are a gazillion of clones that are often even better. Check it out. Everyone loves it. Falls in the same category as Codenames: everybody's darling. Find the spy here: https://spyfall.adrianocola.com/

That's my curated list of games. We try to have a game session every three weeks or so in my teams, but whatever works for you, of course. I really think they are an essential tool (as ridiculous as this might sound) in distributed teams. Getting people together on a social and emotional level is super hard in a remote environment. Do yourself a favor and make it, at least, fun.

Please Start from Textbook

Sat, 28 Dec 2024 10:07:53 +0000

Nowadays, for good or for worse, if you google something you end up on Reddit. Wait, wait, stay here. I do not want to talk about how this is bad. I want to discuss a phenomenon you can observe there. Or more precisely: on every platform, people ask for help! (I think it's even one of the issues that people find so annoying about starting out on Stackoverflow.) Answerers are often either in the state of unconscious competence, thus be able to reflect and adapt a given standard solution, or were coached by such folk, and just proxy a bias.

Unconscious competence: The individual has had so much practice with a skill that it has become “second nature” and can be performed easily. As a result, the skill can be performed while executing another task. The individual may be able to teach it to others, depending upon how and when it was learned. — Four Stages of Competence

What does that mean? Let's start with an example. Lately, I came across a thread where people discussed Pair Programming. And, as expected, it was super controversial. I immediately thought it's an excellent example of what I want to talk about here. You could observe two groups that did not recommend it. The first one suggested a solution that was better (in their anecdotal experience). The second one said they tried it, and didn't like it. This group, more often than not, described a process that was, in fact, not Pair Programming. Another collective that we can throw into the pit here, is people suffering from “Not Invented Here Syndrome” in companies. It basically describes a bias against ideas from outside. We unconsciously are more critical with things we did not create in our “tribe.” I'm sure you have heard variations of “this will not work here”, haven't you? 🙂

[Not Invented Here Syndrome is] the tendency of a project group of stable composition to believe it possesses a monopoly of knowledge of its field, which leads it to reject new ideas from outsiders to the likely detriment of its performance. — Learnosity

All these groups have one thing in common: they refuse or are incapable of consulting for or adopting the textbook approach. By that, I mean the concept as given, as it is fully defined. And that can be an issue. The problems with that reach from a harder onboarding process, to lack of knowledge depth, and everything in between. One of the most obvious ones is a communication problem. It already manifests at the earliest point during hiring. Either you explain what your special process looks like, or you will deliberately run into a misunderstanding. And that issue exists throughout the whole journey. Coining a term differently for your domain, let's say your team, is a misalignment waiting to happen. Now, that does not mean you can't adapt a given standard to fit your scenario perfectly. No, absolutely not. However, please be very diligent with it and create small feedback loops. Start to adapt only, when you are in a state of unconscious competence. Only then you have the profound knowledge it takes to communicate why your approach is different. A good example of this is Scrum. Contrary to popular belief, it is black and white. You either do Scrum, or you don't. There is no in between. Still, it gives you the freedom to adapt, once you know what you are doing. However, it is not Scrum anymore. It is something that you have to give a name. And to be able to do that, you have to understand the textbook approach first. You need to be able to tell the differences, why they were introduced, and how you measure whether they have the desired effects.

The Scrum framework, as outlined herein, is immutable. While implementing only parts of Scrum is possible, the result is not Scrum. Scrum exists only in its entirety and functions well as a container for other techniques, methodologies, and practices. — The Scrum Guide

If you make changes, it's in my opinion, crucial to measure data. What did you want to achieve by introducing that concept? Does the adaption aid that better? Because there is one major pitfall I observe quite often: The adaptions actually benefit a different goal than what we have introduced the general idea for. And, sorry for being the killjoy here, often it's to sacrifice actual goal score for engineers' comfort. If you do not start from how it is supposed to be, you never really tried it. You never put it into practice. Hence, you also cannot understand it fully. Starting with an adapted version shields you from making valuable experiences, that are necessary, to understand why an adaption might make sense. Now, what can you do about that? It depends a bit on your context. Usually, you find yourself in one of the groups as described at the beginning. We have a group being experienced enough to adapt, we have a group that just echoes what they have been told (often to appear competent), and one that simply think their work environment is too special for something to work. In the first, you have worked your way through a concept and thoroughly understood it. So much, that you were able to finally make changes to fit it directly onto your individual scenario. That is good. You optimized things and – hopefully – ended up more effective. However, be aware of a pitfall! You went through a huge learning curve to end up where you are. To end up in a state where you could question things. Others did not. This is vital. If you provide consultancy or advice, you have to respect that. Of course, you can explain, why you have adapted or what optimizations you have found, but recommend others to start from 0. Start from textbook. Their scenario is not yours. If you believe you have found a better universal solution, you have to create another textbook. 😁 That brings us to the next category, kind of like the victims of the first, if you want so. You research a topic and ask more experienced people for their opinion. That's wonderful! Always reach out for different perspectives. However, hold in mind that you may not hear the most thoughtful, objective, and unbiased advice. Usually, you end up listening to anecdotes of very specific cases. All of them have in common (or should have) that they tried out what worked for them. This is not your reality. Do not start to simply echo what they told you. I understand why we do that. We want to sound as competent and smart as them, right? And it's, indeed, smart to keep their remarks in your notebook. It is smart to, later, use them for your own thoughts and ideas. It's important, thought, that this needs to take place when you have moved to a state of unconscious competence yourself. You have to start from scratch. You have to start from textbook. Your scenario is not theirs. The last group in my book is related to a different dynamic. If you often diverge from the vanilla textbook approach or are generally eager to challenge new ideas, you might be a victim of the Not Invented Here bias: You think your scenario is too special for anything to work. However, most likely it's not. Most of the time, when we discuss methodologies, frameworks, or industry-standards, there was put a lot of thought into what is almost universally applicable, and what is not. It has already been stripped down to the basic things that are highly likely to fit every work environment. To battle Not Invented Here Syndrome, it helps a lot to know that it exists and that it's easy to fall victim. My first advice is to exercise honest self reflection. Does this apply to you? What behaviors can you observe, and how can you change them? You will never know whether you are right, unless you try things out. And to try them out profoundly, you have to – you guessed it – start from the textbook! Do not try to utilize an adapted version upfront, to accommodate your alleged “specialities.” Try to do it as given. Now I really need to come to an end. This already feels wordy, sorry for that. It's just a phenomenon I observed quite a lot throughout my career, and it always bugged me. Hence, I really wanted to bring this post out. I hope that I got the point across and could convince you to “start from the textbook!” 😁

How to Know Whether to Use Data URLs

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 {
  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 Base2 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,. 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

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

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

Mon, 13 Feb 2023 18:44:43 +0000

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

Mon, 13 Feb 2023 18:42:44 +0000

I welcome you to the marvelous world of JavaScript quizzes on Social Media! This very article is part of a series where we deep dive and demystify them. This 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!

The Snippet

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

This time we have a complex one. However 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 in 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. Returning 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 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?

Destructuring Tweets - Episode 12 - Coalesced False

Mon, 13 Feb 2023 18:03:09 +0000

Look who managed to head to my blog only to find himself reading an article about a tweeted Javascript quiz. In this series, I try to break such down, and this post features a lesser-known but often useful operator: Nullish Coalescing!

The Snippet

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

This time 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 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. 🥧

Destructuring Tweets - Episode 11 - Continue to Break

Mon, 13 Feb 2023 17:24:09 +0000

Glad you found this blog series about JavaScript Social Media quizzes! This week is a funny snippet around the loop-manipulating keywords break and continue. Get ready for some serious trickery!

The Snippet

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 values have no remainder when divided by 3 (% 3). If 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. The expression is false if the index can be divided by three without having a remainder. It's true for 1, 2, 4, 5, 7, and 8 in this context, to be even more exact. Let's examine what happens then: continue is called. This keyword 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. If the index holds the value 7, the loop breaks. break is a keyword 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 reaches 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.

OddPen

Including Schema.org Data in A PostHTML Component with Parcel.js

The Page Includes the Header

The Header Includes the Schema

The Schema File Contains the Data

Games to Play with a Distributed Team

Codenames

Gartic Phone

Make it Meme

Letterjam

Vote's Out

Squabble

Boring

Spyfall

Please Start from Textbook

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

Destructuring Tweets - Episode 13 - Let's Construct

The Snippet

The Output

The Analysis

Further Reading

Destructuring Tweets - Episode 12 - Coalesced False

The Snippet

The Output

The Analysis

Further Reading

Destructuring Tweets - Episode 11 - Continue to Break

The Snippet

The Output

The Analysis

Further Reading