Catching Trailing Spaces - A Superhero's Story!

A few years ago, I came across a sidekick on the VSCode marketplace that claimed it could help me catch pesky trailing spaces in my code by highlighting them in red, the perfect colour for marking your targets 🔫

Initially, I was sceptical but decided to take a chance, and in hindsight, I'm so glad I did.
Ever since, we've been a formidable team, never leaving each other's company, fighting bugs and delivering features 🦸

The VSCode extension I'm talking about is called Trailing Spaces
Here's a photo of this extension on the VSCode Marketplace 🏪:

And here's how it works in action (notice the red highlights):

In our years as a team, I've never once pondered how it achieved its amazing superpowers ⚡️

But should I? 🤔

• Do Superman and Wonder Woman ever ponder how Aquaman manages to communicate with marine life?
• Does Captain America ever consider how Bucky Barnes masters his skills so effortlessly?
• Are there moments when The Flash reflects on how Kid Flash can keep up with his incredible speed? ...

Maybe I'm going off-topic, but you get my point.

Ever since the question about the origin of my sidekick's superpowers came to mind, it has become the only thing I can think about as I go about my day 🏙️ and night 🌃 fighting bugs and delivering features.

However, I could never find the answer... until now!

The Origins of a Superhero 🦸

Enter Regular Expressions!

Regular Expressions... A force so powerful that many developers who have tried to harness it have failed, leaving only a lucky few to tell their woeful tales 😱

But what is this magic force? What makes it so special?

Let's jump in 🙌

Regular Expressions

Formally, a regular expression is an algebraic notation for characterizing a set of strings.

In non-superhuman speech, regular expressions (a.k.a. regexes) are strings with special powers sprinkled in that allow you to describe how a set of strings look like.
Essentially, regexes allow you to describe a pattern that can potentially match zero or more strings.

Let's take an example using the below three strings:

• sing
• sang
• sung

Notice a few interesting details about these three strings:

1. Same first letter s
2. Same set of ending letters: n followed by g
3. The second letter of each string is different
   1. In the sing, it is i
   2. In the sang, it is a
   3. In the sung, it is u

Regular expressions allow you to describe these strings as s[iau]ng.

Pro Tip: Please do not read it as sia-ung 🤦

This regex is actually read as follows:

The set of all strings that start with the letter s followed by either the letter i, a, or u and ends with the letters n followed by g.

This pattern is powerful because it allows you to succinctly describe a set of strings without explicitly writing out each one 💡

To understand the benefit, imagine for a second that you have a set of thousand strings. Describing each one would be a nightmare (yes, this also applies to superheroes 🤫). Writing a single regex to describe that set of a thousand strings is much more pleasant 😌

Now, with that super-quick primer on regexes, let's discuss why they are important in this hero's story.

Harnessing the Formidable Force 🔮

Trailing spaces are technically a set of strings. You could have one or more spaces at the end of every line, and each would be a different string.

Let's take an example to understand this better.
We'll take the following Python 🐍 code to make things easier to visualise.
I've represented the space character, i.e., , with the <space> symbol to help make it easier to see.

n = 10<space><space>
for i in range(n):<space><space><space><space>
    print(i)<space><space><space>

In this example, each of the strings of trailing spaces, i.e., <space>, <space><space><space><space> and <space><space><space>, share a common pattern:

1. They occur at the end of the line
   1. More accurately, they occur between the last non-space character of the line and the end of the line.
2. They only contain spaces.

So, let's use regexes to describe them!

However, before I show you the regex, let me tell you about two important regex symbols we'll use:

• + Symbol
  • Putting aside the complicated definitions, for our use case, the + symbol simply means that the immediate previous character should appear one or more times.
• $ Symbol
  • It represents the end of the line.

Putting it all together, our regex is... 🥁

<spaces>+$

This regex is read as follows:

The set of all strings at the end of a line that contain one or more spaces.

This is exactly the string pattern we need to detect trailing spaces 🎯

We have this force in our grasp!

Let's try it out! 🔥

Trying out our new Superpower ⚡️

To try out our newfound regex, I will use the website called RegEx101. It's a superhero favourite, so you better bookmark it for later 🔖

Steps:

1. Paste in our regex along with the Python 🐍 code example from earlier onto their website.
2. Replace the <space> symbol with the actual character.

We see that our regex works flawlessly ✨

You can play with this regex on RegEx101 by clicking here.

Beginning of a New Chapter 📖

I can now sleep fight bugs, and deliver features without thinking about the origins of my sidekick's superpowers.
Overall, I have a newfound appreciation of their superpowers ⚡️

I am more confident that we make a formidable team and we can achieve anything together!

Finally, regexes are a powerful force!
Harness them correctly, and any supervillain 🦹 will run the other way.
Make a mistake, and you stir up a chain of chaos 🌪️

Regular practice is the secret to getting better at anything, and regular expressions are no different.

It may be a formidable force, but you can tame it! 💪

Good luck, and practice well! 👋