• Add filtering to delete emails from a specific domain/email address automatically

• Ignore them as always and keep using your email

• Declare email bankruptcy and move to a new email

As part of my journey to improve security and account hardening, I started looking for an email forwarding service. I could create random aliases for different services, permitting me to create new emails and forward them all to a single place.

Ideally, the final email would never be used, which means that the only way this email could get hit by spam is if you used it somewhere or if one of the email aliases received it.

Enter SimpleLogin

The free plan of SimpleLogin allows you to create 10 aliases to forward to a single email address. It also allows you to reply directly from your alias; this prevents you from leaking your original email address to any message. SimpleLogin is also open source, which is an essential aspect for me.

Using the service is pretty straightforward. Once you connect your email to SimpleLogin, you can create a custom alias or generate a random one. You can also generate temporary aliases and disable them after some time. The settings are also brilliant and allow you a great deal of control.

How it helps fight spam

This is all great, but you may be thinking:

"How does all of that will help me fight spam?"

Glad you asked. Once you receive an email from an alias, SimpleLogin allows you to block the sender, so even if the sender tries to send you more emails, they get blocked and will never reach your inbox.

As I mentioned above, it also allows you to generate temporary aliases, generating some for a set period and rotating them.

If you subscribe, you can even go a bit crazy (like I did) and generate a single alias for each website where I have an account. The fun thing with this approach is that you know who might have sold your email address, making it easier for you to delete your account with these services.

Moving a domain to SimpleLogin

I used a forwarding service with my primary email address from this domain. Although, I wasn't thrilled with it. Not only did the service expose the original email through a DNS checker, but it also didn't provide DMARC records.

SimpleLogin provided all that for me, so I didn't have to worry too much about email forwarding other than updating the DNS records.

The service also allows you to create catch-all aliases for your domain names, although that isn't recommended if you want to fight off spam, since folks can type any email address with your domain name, and you will get the email.

For example, i-really-want-to-spam-you@your-domain-name.com would create a new alias with the name i-really-want-to-spam-you, and the email would be forwarded to your original inbox.

The not so great

Okay, so this entry is starting to sound like I will get anything from SimpleLogin (I don't). Let's now look at the not-so-great aspects of the service.

It's unclear what you need to do if you want to reply to an email that was forwarded to you with the alias. You don't need to do anything, just hit reply and SimpleLogin will use your alias to send the reply.

If you haven't received an email from this email address, you need to add it to your contact list so SimpleLogin can generate a reverse-alias. To send a new email to a contact, click the contacts button and copy the reverse-alias from the list. SimpleLogin will then use your alias to send this email.

Look at the documentation for sending emails to learn more about how this works and how to add an email to your contact list.

As I mentioned above, the settings are great, but it can be confusing to know what each one of them does. You should refer to the documentation to know what each bit does.

Closing thoughts

It's pretty clear that I enjoy SimpleLogin. Not only it helps me with various email forwarding scenarios. It also allows me to create new aliases for each new account. This is important for account hardening since I can generate a new email alias and delete the breached alias.

• Reusing passwords

• Using the same email for everything

• Using easy-to-guess passwords

• Not using 2FA because it was annoying

• Thinking I'm not important enough for anyone to do anything with my information

Then I pasted my old email into haveibeenpwned and saw an extensive list of how many times that email was found.

First steps

The very first thing I did was research how to mitigate risk, which summed up to the following:

• Stop reusing passwords, silly

• Stop using the same email

• Make passwords hard to guess

• 2FA all the things!

To solve the issue of password management, I registered for LastPass and started using it as my password management. Until one day, I lost the master password and had to start all over again. Still, the second time LastPass was the winner again (mainly due to familiarity).

I've also occasionally started cycling passwords but not keeping a proper schedule.

The nail in the coffin

When it comes to breaches and hacking, it's not if you get breached/hacked, but when. This last LastPass breach put into perspective how (un)safe your data can be. In the end, you trust a specific company with the keys to all your accounts (and extra things if you use them to store cards and notes).

It is evident that LastPass wasn't an option, so I started looking for a replacement. At the same time, I started following the #infosec tag in Mastodon and saw a lot of great content about the LastPass breach and alternatives from Jeremi M Gosney.

Enter BitWarden

In the end, I decided to go with BitWarden for two reasons:

• Great price for the premium plan

• Is Open Source

Migrating from LastPass was easy; all you need to do is export your data. The export was easy but left a sour taste in the mouth since it opened a new browser tab with all the data in plaintext in a CSV format.

Then all that was left to do was to use the BitWarden import option to import the CSV file. Once that was done, the highly tedious task of changing ALL passwords began!

Even though the task was tedious, it was good because I could delete a bunch of accounts I was no longer interested in having.

Account hardening

As with the first discovery of haveibeenpwned, this LastPass breach made me want to improve even more my security practices. I would have to rely on a company to help me with this task.

I've used both the email and VPN services from Proton in the past, and I like that they are both Open Source and focus on privacy. I was going to rely on Proton to help me harden my accounts. So it was a no-brainer.

Here's what I have implemented:

• Regular password changes

• Use email alias for different accounts through simplelogin

• Delete any account that I haven't used in the past three months

• Call email bankrupt to my other emails

• Create a bunch of different proton emails for different purposes and use simplelogin to sieve email into through an alias

• I got an Yubikey and started using it as a 2FA alternative

There are a lot of things that I could do to harden my accounts even further. Please share your thoughts and ideas!

When I built the website for Landing in Tech I wanted to have a bar on top of the page with the latest episode.

The idea was to allow users to listen to the episode while browsing the page.

I added the iframe on my layout.js file and expected it to work, obviously, it didn't. With each route change, the whole layout reloads which means that you would lose your progress if you started to listen to the episode.

Yesterday, I asked on Twitter if anyone knew a way to fix this issue. Baz gave great advice on how to achieve this. He mentioned that Gatsby should have a way to handle this, that was my lightbulb moment - perhaps using the gatsby-browser api, might do exactly what I needed.

A lucky strike

I have to admit that I came to the solution by luck. I was scrolling through the browser api pages and came across the wrapRootElement.

"This is useful to set up any Provider components that will wrap your application. For setting persistent UI elements around pages use wrapPageElement." Gatsby documentation

After playing around with it, I have realised that both wrapRootElement and wrapPageElement do what I wanted, but since Gatsby suggests using the former for persistent UI elements, I've used that one instead.

Let's open the gatsby-browser.js file and add the SoundCloud iframe inside our Layout.

const React = require("react")
const Layout = require("./src/components/layout").default

exports.wrapPageElement = ({ element }) => {
    return (
        <Layout>
            <div className="sound-cloud">
                <iframe
                    className="mb-0"
                    width="100%"
                    height="20"
                    scrolling="no"
                    frameBorder="no"
                    allow="autoplay"
                    title="latest episode"
                    src="https://w.soundcloud.com/player/..."
                />
            </div>
            {element}
        </Layout>
    )
}

Refactoring Pages

Since I am importing the Layout and using it in wrapPageElement that means that each page will have two Layout components, the one that I have imported in each page and the one being set in gatsby-browser.

This meant that I had Ito refactor every page and remove the Layout component on every single one. A tedious task, but the end result does exactly what I wanted.

Update

After sharing this article on Twitter a lot of great developers told me that I need to add the same to the gatsby-ssr.js file, this is because Gatsby uses that file when running gatsby build. So, make sure you add the code to both gatsby-browser and gatsby-ssr file.

Version Control track changes in a series of snapshots and they contain the entire state of files or folders within a directory. They also add metadata that contains things like who created the snapshot, messages, changes, etc.

Version control is useful because it let you look at old snapshots of a project, keep a log of changes, work on different branches, see who wrote a specific line or who added a change and more.

Git data model

Git has a data model that enables features of version control such as keeping track of changes in history, allowing branches and collaboration with other folks.

Snapshots

A snapshot is what we know as a commit. It contains the history of files, folders and metadata. A snapshot is the top-level tree/directory that is being tracked.

Note: We can track a top-level tree with the command git init

We can think of a snapshoot as being built like this:

type commit = struct {
    parent: array<commit>
    author: string
    message: string
    snapshot: tree
}

Note: this is pseudo-code

In Git terminology, a file is called a "blob" because it's just a bunch of bytes. We can think of blobs as an array of bytes:

type blob = array<bytes>

A directory is called a tree. A tree maps names to trees or blobs which means that a directory can contain other directories.

type tree = map<string, tree | blob>

Objects and content-addressing

Even though we name each file, directory and commit differently, they are all objects. And git stores all this data as objects inside a content address store.

objects = map<string, objects>

This means that the core of git is a simple key-value data store. You can insert any object into your git storage and git will store it with a unique key.

This unique key is the SHA-1 hash of that object and it allows us to access the object with that key.

Note: Using a hash allows us to take a big piece of data and turn it into a short string

Taking the example from that git log that I have shown before:

* 8f0dede (HEAD -> twitter, upstream/master, master) Add twitch to config example (#1653)
| * a03b68c (origin/twitch, twitch) Add twitch to config example
|/
* 2c9b684 Migrate helper and connector tests to pytest (#1648)
* af00ac9 Fix typo on documentation - Gitter (#1652)

If we want to access or reference the snapshot "Migrate helper and connector tests to pytest" I can reference the first seven characters of that object hash: af00ac9.

Git Branches

We can look at snapshots as to what we call commits in git, they contain all the changes done inside the directory. Each snapshot/commit points back to the one that precedes it.

Since all these snapshots point back to the previous one, we can this history/line a branch. Usually, you will always have the main branch when you start tracking the changes of a folder with git.

Usually, this branch is the one that folks use to keep the latest version of a project. The powerful thing of git is that it allows you to branch off from a specific snapshot/commit, so you can work with different branches of a commit and then merge them.

Here you can see the log of a project that I work on. You can see that each * is a snapshot, each line shows the path that each snapshot took, you can also see the times that a branch was created and then merged back into the main one.

References and Repositories

Now that we know that git objects can be identified by their SHA-1 hash and that snapshots live inside branches we can explore more about what is a reference inside git.

A reference is a human-readable label to refer to a particular snapshot in history instead of using the whole SHA-1 hash.

references = map<string, string>

Let's look at the image from that git log that I used before. You can see things such as:

• HEAD
• upstream/master
• master
• refs/stash
• origin/ibm-watson
• ...

These are all references that reference something. The HEAD means that this is the current commit that we are working on, master refers to the main branch while upstream/master is the main branch from the original repository for this project.

So what is a repository?

Putting very simply, a git repository contains all the objects and references. These repositories live inside our disk, but you could use services like GitHub, Gitlab or Bitbucket to save your repositories on these services. They also allow better collaboration with other folks and the reason why they become so popular.

The Stating Area

The last thing that is worth to mention is that git has this concept of stating area. This is where you add files to this staging area to keep track of changes done and include them in your next snapshot.

By using the command git status, git tells you if you have any files that are currently untracked inside a project - these files will not be included on your next snapshot.

To include these files you can run the command git add <name of the file> or git add . to include all untracked files into the staging area.

After running that command you can type git status again and you will see your file names in green and bellow the text: Changes to be committed:

To create a new snapshot with these files in staging you need to run the command git commit which will open your text editor for you to choose a name for that snapshot. Alternatively, you can run the command git commit -m "<message>" to do it in a single command.

This article was written when taking the lesson on git from missing semester lessons on youtube.

References:

• Official course notes
• IncludeJS: Eva's lesson notes
• The git object store
• Book: Pro Git - Free
• Git from the Bottom up

Learning these will also help you boost your productivity because you don't have to retype your commands again just because you found a mistake.

I've also created a short(ish) video that shows some of the shortcuts mentioned in this article.

Note: When I recorded this video, I thought the shortcut CTRL+U was deleting the line, but it's just cutting the whole line, you can paste the text with CTRL+Y.

Shortcuts for moving around

Let's be honest how many times do we write a command, just to notice that around the beginning of the line there is a mistake and we delete everything and type the command again? These shortcuts will help you move the cursor easier without the need to delete the whole thing.

• CTRL + A - Moves the cursor to the beginning of the line
• CTRL + E - Moves the cursor to the end of the line
• CTRL + arrow keys - Moves the cursor from word to word
• ALT + B - Moves the cursor back from word to word
• ALT + F - Moves cursors forward from word to word

Cutting and pasting

• CTRL + W - Cut the word left of the cursor
• CTRL + K - Cut the entire text at the right of the cursor
• ALT + W - Cut the entire text at the left of the cursor
• CTRL + U - Cut the entire line
• CTRL + Y - Paste the previous cut text

Text manipulation

• CTRL + T - Swap two letters between the cursor
  • Example: this if the cursor is between the h and i it turns into tihs
• ESC + T - Swap two words between the cursor
  • Example: this text will become text this
• ESC + U - Uppercases text right of the cursor - moves cursor to the end of word
• CTRL + Q - Deletes text from line - clears line only

Other useful shortcuts

• CTRL + L - Clears the terminal -> No need to write clear all the time!
• CTRL + R - Reverse search your history for a term
  • Use CTRL + R again to cycle through results
• !! Repeat the last command used in the terminal
  • Use sudo !! to repeat the last command with sudo

Cheatsheets

I've created a cheatsheet with these commands, hopefully, this will help you get used to using the commands.

Dark Theme

Light Theme

On one of my first Gatsby projects, I had used the Elasticlurn Plugin for Gatsby to add a search bar to a website. I decided to try and use this plugin since I don't have to use an external service like Algolia.

Installing and Configuration

Installing the plugin is pretty straightforward. You need to run the command:

npm install @gatsby-contrib/gatsby-plugin-elasticlunr-search

Then on your gatsby-config.js file, you can add the configuration for the plugin. If you read the README.md, you can see that one of the configuration options is the resolvers, here you need to replace MarkdownRemark for Mdx.

 {
      resolve: `@gatsby-contrib/gatsby-plugin-elasticlunr-search`,
      options: {
        fields: [`title`, `category`, `tags`, `excerpt` ],
        resolvers: {
          Mdx: {
            title: node => node.frontmatter.title,
            category: node => node.frontmatter.category,
            tags: node => node.frontmatter.tags,
            excerpt: node => node.frontmatter.excerpt,
            slug: node => node.fields.slug
          }
        },
        filter: (node, getNode) => node.frontmatter.category
      }
    }

My frontmatter contains all those fields (but the slug). These are the fields that I want users to be able to search. You can choose as many or as little as you want.

Search Bar Component

With the plugin installed and configured, we have to create the search bar component. I re-used the component that I had created on the other project.

Note: This component needs refactoring. Most of this code was taken from the plugin instructions.

import React, { Component } from "react"
import { Index } from "elasticlunr"
import { Link } from "gatsby"

export default class Search extends Component {
    constructor(props) {
        super(props)
        this.state = {
            query: ``,
            results: []
        }
    }

    render() {
        return ( 
            <div className="my-5 relative">
                <div className="flex justify-center items-center">
                    <i className="gg-search mr-2" />
                    <input type="text" value={this.state.query} onChange={this.search} placeholder="Search..." />
                </div>
                {this.state.results.length !== 0 ? 
                    <div className="mt-2 flex flex-col absolute z-10 search-results">
                        {this.state.results.map(page => (
                                <Link className="link m-1" to={`${page.slug}`} key={page.title}>
                                    <span className="underline">{page.title}</span> : <span className="green">{page.tags.join(', ')}</span>
                                </Link>

                        ))}
                    </div>
                : ''}
            </div>
        )
    }

    getOrCreateIndex = () =>
        this.index ? this.index : Index.load(this.props.searchIndex)

    search = evt => {
        const query = evt.target.value
        this.index = this.getOrCreateIndex()
        this.setState({
            query,
            results: this.index
                .search(query, { expand: true})
                .map(({ ref }) => this.index.documentStore.getDoc(ref))
        })
    }
}

I want users to get partial matches straight away. So when you type something, you will get all matches first. Then the query will return fewer results. If you don't want this to happen and return the search results instead, you can remove the { expand: true } parameter from the search method.

You can probably see that on this site I am using TailwindCss. The only bit of CSS that I added outside Tailwind was the search-results which adds some styling(colour, spacing) to that div. The reason why I decided to use an absolute position, is because I want the search results to drop down and stay above the content.

Importing and Using the Search Bar

Now that the search bar component is completed, you can use it anywhere on your site by importing it. But you also need to provide a searchIndex to the component. Luckily, the plugin adds a query for you to use.

query {
    siteSearchIndex {
        index
    }
}

Then you can import the search bar component and use it like this:

<SearchBar searchIndex={props.data.siteSearchIndex.index} />

That's all there is to add a search bar with elasticlunr plugin and MDX. If you have any issues feel free to reach me on Twitter @FabioRosado, I will be happy to give you a hand!

References

• Elasticlurn Plugin for Gatsby
• TailwindCss
• Digital Garden

But your project might depend on a lot of dependencies and if you haven't worked on a project for a few months, chances are a lot of these dependencies are really outdated.

List all outdated dependencies

You can run the command npm outdated to get a list of all the dependencies that have new releases.

Check for updates

Now that we know how to check for outdated packages, we need to find a way to update them all. This is where we need help from a package called npm-check-updates. This package will look into your package.json versions and upgrade all the outdated ones.

npm install -g npm-check-updates

Note: You should install this package globally so you can use on other projects.

Upgrading and updating dependencies

After installing the package you need to run ncu -u on your terminal to upgrade your package.json.

You can now run the command npm update to update your dependencies.

Updating dependencies in one go

So we have seen that we can upgrade our dependencies with ncu -u and then upgrade them with npm update. How about we create a command that will run both of these so we don't have to type so much?

That's when aliases come in handy!

I keep all my aliases in a .bash_aliases file, in my home directory. You can add this alias anywhere, for example, ~/.bashrc, ~/.zshrc, ~/.bash_profile, etc. If you don't know which to use, you can use ~/.bash_profile or ~/.profile.

Open the file in your favourite editor and add the following alias:

 alias update='ncu -u && npm update'

Source that file or restart your terminal and you can now use the update command to update your dependencies in one go!

On this article, I will talk a bit more about job control. How you can see running processes and how to use the knowledge we gained with the Linux signals article to send signals to a process.

Running Processes

Everything running in a Linux system is considered a process. Every time a process is started, the operating system will assign a unique PID (Process Identification Number) to that process.

This is important to know because when a process doesn't terminate as you expect, or something causes it to hang and keep consuming resources, you might need to run the kill command followed by the PID of that process.

But How do you get a list of all running commands?

Two useful commands can help you get a list of the running processes - the ps command and the jobs command.

Let's get started with the ps command!

The ps command will show you information about running processes. If you want to get a list of all processes you can run ps aux - these will include processes started by other users including root.

Because ps aux gives you so much information, it's often a good idea to pipe a grep to your command, to get only processes that match the thing that you are looking for.

For example, this command will only show running processes that contain the word opsdroid:

> ps aux | grep opsdroid

Now let's have a look at the jobs command!

This command is not a command that comes with Linux but is instead a bash builtin. It allows you to get information about processes spawned by the current shell.

Because jobs shows you only processes started by the current shell, it can be easier to navigate and to find a specific process.

Let's assume that you have a few processes running in the background, you can run the jobs command to get a list of all the process, their status (running or stopped) and which command made that process run.

If you want to get the PID of these processes you can use the -l flag with the command.

For example:

> jobs
[1] + running python3 -m opsdroid start

Getting the PID of the process with the -l flag

> jobs -l
[1] + 3258 running python3 -m opsdroid start

Killing processes

Now that we know how to get a list of processes and the respective PID's, let's talk a bit about the kill command. This command is an interesting one because what this command does is sending a signal to a process.

The default signal of kill is the SIGTERM signal, which is a gentle request to terminate a specific process. But since this command is used to send signals to a process, we could easily send a stop signal with the command kill -STOP.

If you want to know what signals you can send with kill you can run the command with the -l flag.

For example, running the command on my ubuntu machine gives me the following:

❯ kill -l
HUP INT QUIT ILL TRAP ABRT BUS FPE KILL USR1 SEGV USR2 PIPE ALRM TERM STKFLT CHLD CONT STOP TSTP TTIN TTOU URG XCPU XFSZ VTALRM PROF WINCH POLL PWR SYS

Note: Sending a SIGKILL to a process will terminate a program no matter what, but that might leave orphan processes running, which might cause some odd behaviours. This means running kill -9 <PID> or kill -KILL <PID> might not be a good idea.

Why knowing about processes matter?

You might be wondering, why I talked about processes before talking about the kill command. Well, kill needs the PID of the process that you want to send the signal to.

So knowing how to get that PID comes in handy. Another good thing that is worth mention is that you can pass more than one PID to kill, this allows you to send a signal to multiple processes.

Using a process name to send signals

You might be thinking that fetching a process PID and remembering it is too much work. Luckily, you can also send signals to a process by using its name. The way to do that is by using the killall command.

The thing to remember here is that you need to pass the exact name of the process that you want to kill.

If you want to use just part of the name, there is another command for that - you can use the pkill command.

But there is something to keep in mind.

Let's say that you want to terminate a process and you only know part of its name. Using pkill opsdroid will kill any process that contains opsdroid in its name. This could terminate a process that you might not want to because it contains opsdroid on its name.

This is why using the exact name or the unique PID might be a better way to send signals to a process.

I hope this article helped you learn more about processes and how you can send signals to a specific process. Let me know if you have a favourite way to search for a process and what you use to send signals to a process.

For example, when you are running a program and you use CTRL+C to stop the program, you are sending a signal that tells the process that should interrupt its execution.

Why should you care about signals

You might be wondering, what's so important about this concept. It's because they are something that you rely on under the hood while using the command line. You can also write your code to handle the different signals and make your program do something else.

Understanding signals will also help you deal with programs that don't quit with CTRL+C and the only thing that seems to help is running the command kill <pid> to stop a process.

Exiting, Stopping and Continuing Signals

Let's have a look at signals that stops or terminates a process. Understanding these signals can be useful when your process just seems to freeze and nothing seems to be working when you try to stop it.

The SIGHUP Signal

This signal stands short for hang up, this signal is usually triggered when you have processes running in the terminal and you decide to close the terminal.

When you have an ssh session open and a running process, if you exit the session that could trigger a SIGHUP signal, if you want to make sure your process keeps running even if you close the terminal window, you can run its command with the nohup prefix.

For example:

nohup python myscript.py

The SIGINT Signal

This signal stands short for Interrupt, this signal is usually triggered when you want to interrupt a process. The keyboard shortcut to send this signal is by using CTRL+C.

This signal doesn't always stop a running process. This can be for various reason, maybe the process has a way to handle this signal, the process is busy or you are dealing with async threads.

The SIGQUIT Signal

this signal is similar to SIGINT but produces a core dump when it terminates the process, just like a program error signal. You can think of this as a program error condition “detected” by the user. GNU - Termination Signals

The Keyboard shortcut to send this signal is by using CTRL+\

The SIGKILL Signal

These signal forces terminate the process and it cannot be intercepted, ignored, blocked or handled. This signal is usually generated only by request and should be used as a last resort.

The SIGTERM Signal

This signal requests a process to terminate. Unlike SIGKILL this signal can be caught, ignore or interpreted. SIGTERM allows the process to terminate gracefully and release resources.

The shell command kill generates a SIGTERM by default.

The SIGSTOP and SIGCONT Signals

The SIGSTOP signal stops the running process, you can send a SIGSTOP signal by using the keyboard shortcut CTRL+Z.

The SIGCONT signal continues a running process. You can resume a stopped process by running the command bg %1

Note: %1 is the program/job that is located on the first item of the jobs list.

> jobs
[1] + suspended sleep 1000
[2] - running nohup sleep 2000

NOTE: bg sends commands to the program running on the background, if we want to continue a program in the current terminal we can use fg instead

Using Signals

This might be a bit counter-intuitive, but you can use the kill command to send a signal to a process, if you use a flag with this command.

For example, if you want to send a SIGHUP signal, you can run the command

kill -HUP <process id>

Each signal has an alphanumeric value that can be used as a flag with the kill command. Let's take the previous example, if we want to send a SIGHUP signal again you can run the command

kill -1 <process id>

You can check the value of each signal on the signal man pages or the C++ Signals Tutorial.

Hope this helps you understand what are signals how you can use them on your day-to-day. I've learned about this subject on the lesson 5 of Missing Semester.

References:

• GNU - Termination Signals
• Linux Signals
• Kill Signals in Linux

The Windows Terminal is great, but has a few problems:

• Pretty simple theme (a grey text on a black background)
• It's not using my favourite shell zsh shell
• No icons or interactive profiles

The terminal itself it's pretty good and allows you to have different tabs on it. It also comes with integrated support for the Windows Subsystem for Linux, Windows Powershell, Azure cloud shell and the Command Prompt.

Windows Terminal is a modern terminal application for users of command-line tools and shells like Command Prompt, PowerShell, and Windows Subsystem for Linux (WSL). Its main features include multiple tabs, panes, Unicode and UTF-8 character support, a GPU accelerated text rendering engine, and the ability to create your own themes and customize text, colours, backgrounds, and shortcut key bindings.

You can read more about the features of the Windows Terminal on the official documentation website.

You can also download the Windows Terminal from the Microsoft Store.

Setting up WSL as the default profile

When you run the Windows Terminal, you can see that the Terminal opens the Windows PowerShell by default. Since I am going to be using WSL all the time, I want this to be the default.

We can change the default profile by opening the terminal menu (press the down arrow) and select settings.

• Open settings from the terminal menu
• Scroll down to find the guid for the WSL
• Copy that guid and scroll back up
• Paste the WSL guid inside the defaultProfile setting

Now every time we run the terminal, the default profile will be the WSL one.

Install and setup zsh and Oh-My-Zsh

The next thing we need to do is installing the zsh shell in our WSL. Open the Windows Terminal (if you haven't it open already) and run the following command:

sudo apt update && sudo apt install zsh -y

This command will install the zsh shell, then we can install oh-my-zsh which is zsh on steroids. It comes with more functions, helpers, plugins, themes and much more.

We can install oh-my-zsh by running the command:

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Now that we have the zsh shell and oh-my-zsh installed, we can go to the next step. Customizing your terminal to look beautiful!

Pimp my terminal - Themes, Icons, Profiles

Remember that I said earlier in this article, that the Windows Terminal was pretty simple? Well, it's now time to pimp our terminal and change how it looks! We will do a few things:

• Install Powerlevel10k
• Install a font that contains icons
• Adding the font to Windows Terminal by using Nerd Fonts
• Choosing a decent theme for the terminal
• Changing the theme for the terminal

Installing Powerlevel10k

If you are unfamiliar with Powerlevel10k, the quick way to explain it to you is saying that it's a theme for zsh. It allows you to customize your terminal prompt from a set of default styles.

You can read more about Powerlevel10K on the official GitHub repo of the project.

To install Powerlevel10K, you can run this command or read the getting started documentation.

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10k

Then you will have to edit the ~/.zshrc file to activate the powerlevel10k theme. Look for the line that contains:

ZSH_THEME="robbyrussel"

Replace it with

ZSH_THEME="powerlevel10k/powerlevel10k"

Installing a font pack that contains icons

We need to get a font that contains text and icons on the same pack. Nerd Fonts has a lot of different font styles, all supporting the icons that we need.

The one that I've been using all the time is the DroidSansMono Nerd Font that you can find on the font downloads page. You can also preview some of these fonts on Programming Fonts.

Chose a font that you like, download it and install the font.

Now you need to open your Windows Terminal settings and scroll down to the WSL settings and add the following:

"fontFace": "DroidSansMono NF"

Note: You need to use the same font name as the one shown when you open the .otf file.

So your WSL settings will look like this.

{
    "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
    "hidden": false,
    "name": "Ubuntu-20.04",
    "source": "Windows.Terminal.Wsl",
    "fontFace": "DroidSansMono NF"
}

Note: your guid will have a unique number, don't copy this section of the code.

Activating Powerlevel10K with the new font

After updating your ~/zshrc file together with using a Nerd Font on the terminal, you should restart your terminal. By restarting the terminal, Powerlevel10K should say that it will try to configure itself, but if that doesn't happen, you can start the configure prompt by running the command:

p10k configure

This will go through a series of questions and styles that you can choose. Select the options to get the style and combination that looks best for your needs.

Updating the Windows Terminal colour scheme

Finally, we want to update the colour scheme of the terminal to look better than just the grey text on a black background.

• Windows Terminal Themes

I recommend this site because it allows you to see in real-time the different colour schemes and you can then click the Get Theme button to get the JSON for that colour scheme.

After you've picked a colour scheme that you like, open the Windows Terminal settings again and locate the line that says schemes: []. In this line, you can paste the colour scheme that you picked.

    "schemes": [
        {
            "name": "Tinacious Design (Dark)",
            "black": "#1d1d26",
            "red": "#ff3399",
            "green": "#00d364",
            "yellow": "#ffcc66",
            "blue": "#00cbff",
            "purple": "#cc66ff",
            "cyan": "#00ceca",
            "white": "#cbcbf0",
            "brightBlack": "#636667",
            "brightRed": "#ff2f92",
            "brightGreen": "#00d364",
            "brightYellow": "#ffd479",
            "brightBlue": "#00cbff",
            "brightPurple": "#d783ff",
            "brightCyan": "#00d5d4",
            "brightWhite": "#d5d6f3",
            "background": "#1d1d26",
            "foreground": "#cbcbf0"
        }
    ],

In my case, I've picked Tinacious Design because that's the theme that I am currently using in VS Code.

To activate the theme, we have to also tell Windows Terminal which profile should use this theme. Going back to the WSL configuration, we can add the following option:

"colorScheme": "Tinacious Design (Dark)"

So our WSL configuration will look similar to this:

{
    "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
    "hidden": false,
    "name": "Ubuntu-20.04",
    "source": "Windows.Terminal.Wsl",
    "fontFace": "DroidSansMono NF",
    "colorScheme": "Tinacious Design (Dark)"
}

By saving the file, we can see that our terminal already changed colours and it's now using the colour scheme that we want.

Set your WSL as default when opening a new terminal

You might notice that after opening the windows terminal back and forth, that it defaults to the Powershell.

If you are like me and are just using the WSL for all your dev needs, you probably want to set that shell as your default one.

Let's open the terminal settings again and scroll down to your WSL settings.

{
    "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
    "hidden": false,
    "name": "Ubuntu-20.04",
    "source": "Windows.Terminal.Wsl",
    "fontFace": "DroidSansMono NF",
    "colorScheme": "Tinacious Design (Dark)"
}

Copy your guid and then scroll back up and look for the "defaultProfile" setting. We can then replace that with the WSL guid, in my case I have to change this setting like this:

{
    "defaultProfile": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}"
}

Save the file, restart your terminal and you will see that it will open your WSL shell instead of the Windows Powershell.

Setting a default starting directory

The last thing that is worth mentioning on this article, is that, by default, when opening the terminal it starts the shell on mnt/c/Users/<your username>.

If you are happy to have this as your default starting directory, then you are all set. If you would rather change that starting location to the home folder instead, you can open the terminal settings and scroll down to your WSL settings.

We can have a look at the starting directory setting on the Windows Terminal documentation, we have the startingDirectory property that allows us to set the directory that the shell starts in when it's loaded.

Let's update the WSL setting with this startingDirectory property.

{
    "guid": "{07b52e3e-de2c-5db4-bd2d-ba144ed6c273}",
    "hidden": false,
    "name": "Ubuntu-20.04",
    "source": "Windows.Terminal.Wsl",
    "fontFace": "DroidSansMono NF",
    "colorScheme": "Tinacious Design (Dark)",
    "startingDirectory": "\\\\wsl$\\<distro name>\\home\\<username>"
}

Note: Don't copy this as you will have to change the <distro name and <username for your distro of choice and username.

So in my case, I am using Ubuntu 20.04 as my distro and FabioRosado as my username so this setting will become:

"startingDirectory": "\\\\wsl$\\Ubuntu-20.04\\home\\FabioRosado"

An important thing to mention here is that, if you mess up your path somehow it will just put the shell back on mnt/c/Users/<your username> so there are no issues if you make a mistake.

I hope this helps you, if it does or if you have any suggestions feel free to tweet @FabioRosado_

References

• The Windows Terminal by Nicky Meuleman
• Setting up WSL2, Windows Terminal and oh-my-zsh by Nills
• Setting up Windows Terminal, WSL and oh-my-zsh by Ivaylo Pavlov.
• Profile settings in Windows Terminal

I have been using the gatsby prism plugin to get my code highlighting work, but after moving to MDX this plugin stopped working, so I went ahead in search for a way to get the code highlighting working again. This article did that.

Dependencies

To get the code highlighting work with MDX, we need to install the pristm react renderer package.

npm install prism-react-renderer

The Code Block Component

Following the tutorial, I wrote a code block component. I've done some changes to my code block component since I wanted to use my code highlighting theme, I've also added line numbers to each line.

import React from "react"
import Highlight, { defaultProps } from "prism-react-renderer"

export default (props) => {

    const className = props.children.props.className || 'language-text' //needed for styling``

    const matches = className.match(/language-(?<lang>.*)/)

    return (
        <div className="gatsby-highlight">
            <Highlight {...defaultProps} 
                code={props.children.props.children.trim()} 
                language={matches && matches.groups 
                        && matches.groups.lang 
                        ? matches.groups.lang : ''}
                theme=''
            >
            {({ className, tokens, getLineProps, getTokenProps}) => (
                <pre className={className}>
                    <code className={className}>
                    {tokens.map((line, i) => (
                        <div className="code-block" key={i} {...getLineProps({line, key:i})}>
                            <span className="line-number">{i + 1}</span>
                            {line.map((token, key) => (
                                <span key={key} {...getTokenProps({token, key})} />
                            ))}
                        </div>
                    ))}
                    </code>
                </pre>
            )}
            </Highlight>
        </div>
    )
}

Notice that I am not passing a theme since I am using my own code highlight theme - you could download one theme from the official PrismJS repository and use it instead.

Or if you want, you can just copy my theme and use it.

Expanding the code block

I've seen Chris Biscardi digital garden and really liked the "header" of his code blocks, so I thought that it could be a nice addition to my code block.

To allow users to copy the code inside a code block, I had to create a function for the copy button and handle the event when someone clicks on it.

import React, { useState } from "react"
import Highlight, { defaultProps } from "prism-react-renderer"


export default (props) => {
    const className = props.children.props.className || 'language-text'

    const language = className.replace("language-", "")
    const matches = className.match(/language-(?<lang>.*)/)

    const CopyButton = props => {
        const [text, setText] = useState("Copy")

        return (
            <button className="code-copy-button" onClick={() => {
                navigator.clipboard.writeText(props.content)
                setText("Copied!")
                setTimeout(() => { setText("Copy")}, 1000)
            }}
            >
                {text}
            </button>
        )
    }

    return (
        <div className="gatsby-highlight">
            <Highlight {...defaultProps} 
                code={props.children.props.children.trim()} 
                language={matches && matches.groups && matches.groups.lang ? matches.groups.lang : ''}
                theme=''
            >
            {({ className, tokens, getLineProps, getTokenProps}) => (
                <pre className={className}>
                    <div className="code-header">
                        <span className="language-name">{language}</span>
                        <CopyButton content={props.children.props.children} />
                    </div>
                    <code className={className}>
                    {tokens.map((line, i) => (
                        <div className="code-block" key={i} {...getLineProps({line, key:i})}>
                            <span className="line-number">{i + 1}</span>
                            {line.map((token, key) => (
                                <span key={key} {...getTokenProps({token, key})} />
                            ))}
                        </div>
                    ))}
                    </code>
                </pre>
            )}
            </Highlight>
        </div>
    )
}

Adding Wrapper Component to MDXRenderer

The step 3 of the adding syntax highlighting to Gatsby Mdx with Prism, says that we need to add the code block as a component to the MDXProvider and also points to the MDXRenderer documentation.

I have to admit that I couldn't understand fully how to do this. Everything that I tried was failing, luckily Will Harris was kind enough to share his repository with me and explained that I should add the component to the gatsby-browser.js.

import React from "react"
import { MDXProvider } from "@mdx-js/react"

import CodeBlock from "./src/components/highlight/CodeBlock"

const component = {
    pre: CodeBlock
}

export const wrapRootElement = ({ element }) => {
    return <MDXProvider components={component}>{element}</MDXProvider>
}

By adding this bit of code to the gatsby-browser.js made the whole code highlighting work.

If you chose a theme, you should have everything working, if you prefer to build your own, then you can keep on reading and use my theme.

Code Highlighting Theme

I am using scss on this website so the theme that I am going to share with you, will be in scss.

.gatsby-highlight {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.code-header {
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #6089bd;
    padding: 1rem;
}

.language-name {
    padding-right: 1em;
    color: #ff85cb;
}

.code-copy-button {
    color: #79b3fd;
    background: none;
    border: none;
    cursor: pointer;
}

code {
  padding: 2px 6px;
  color: #78b2fd;
  border: 1px solid #1b2530;
  background-color: #1b2530;
  border-radius: 5px;
}


code[class*="language-"],
pre[class*="language-"] {
    padding: 0;
    color: #f8f8f2;
    background: none;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    line-height: 1.5;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    font-size: large;
}

/* Code blocks */
pre[class*="language-"] {
    overflow: auto;
    border-radius: 0.3em;
    border: 1px solid rgb(97, 137, 189);
    scrollbar-width: none;

    &::-webkit-scrollbar { 
        display: none; /* Chrome Safari */
    }
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
    background: #1A2430;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal;
}

.line-number {
    color: #6272a4;
    padding-right: 2rem;
}

.token-line {
    padding: 0 1em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #6272a4;
}

.token.punctuation {
    color: #f8f8f2;
}

.namespace {
    opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
    color: #ff79c6;
}

.token.boolean,
.token.number {
    color: #bd93f9;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #50fa7b;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
    color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
    color: #f1fa8c;
}

.token.keyword {
    color: #8be9fd;
}

.token.regex,
.token.important {
    color: #ffb86c;
}

.token.important,
.token.bold {
    font-weight: bold;
}

.token.italic {
    font-style: italic;
}

.token.entity {
    cursor: help;
}

Share your theme!

If you have used my template to get your own code highlighting and have changed it, I would love to see what you have created!

You can add your own theme to my code highlighting theme repository.

References

• Adding Syntax Highlighting to Gatsby MDX with Prism
• Chris Biscardi repository - for the language and copy button
• Will Harris - for sharing his repo with me

Luckily there are some easy to remember commands that will help you cut time when repeating commands.

History - Using reverse-i-search

Reverse-i-search will search through the whole history to match a command that contains what you typed. You will need to activate reverse-i-search by pressing the keys CTRL+R, your prompt will switch to (reverse-i-search)`':

With reverse-i-search activated, you can type the beginning of a command and the last one that was run will be matched. If you want to cycle through all matches you just need to press CTRL+R again.

If you know that you are going to use a command a lot you can write the command like this:

<command> #tag

Then all you need is run the reverse-i-search and search for #, your command will be matched straight away. Since the # indicates a start of a comment the terminal will simply ignore the text #tag.

Examples

History:

  1  git pull origin master #pull-origin-master
  2  git status
  3  git stash
  4  git pull origin master
  5  git stash apply
  6  git add file
  7  git commit -m "Added file"
  8  git rebase -i HEAD~2
  9  git push

Start reverse-i-search and type git:

(reverse-i-search)`git': git push

Git push was the last command typed so that's the first match that reverse-i-search returns.

Now let's use the tag trick to run the first command in our history. Let's reverse-i-search for #

(reverse-i-search)`#': git pull origin master #pull-origin-master

History - Using !

If you run the command history you can see a long list with all the commands that you have typed in the command line. To re-run a command you can do one of these two ways:

• Type: !<number of the command>
• Type !<first letters of command>

For you to use the number of the command you probably would have to run history, then get the number and type !<number of the command>, in some cases this will take even longer than typing the command again.

But since you know which command you want to run, you can simply type !<first letters of command> and those first letters will be matched to a command. This little trick can save you some precious time.

Examples

History:

  1 ls
  2 cd
  3 cd documents/
  4 mkdir folder
  5 rmdir folder
  6 ls

Let's run the last command in our history again by typing !!

user ~/documents > !!
ls
folder

As you can see the terminal will print the command before running it, this is to help you in case something happens that you weren't expecting.

Now let's try to run the second command in our history by using the number reference.

user ~/documents > !2
cd
user ~ >

The cd command was run and you should be in your home directory now.

Let's say you want to create a folder with the same name in your home directory you can do:

user ~ > !mk
mkdir folder
user ~ > ls
folder

Autocomplete

Typing long commands can take a while, luckily your terminal can autocomplete commands for you, all you need to do is start typing a few letters and press the TAB key and the command will be auto-completed.

If you forgot how do you type a command, but you know the first letter, you can type the first letter and press the TAB key twice, a long list of all available commands will appear and you can use that to help you.

Examples

Let's look for a command that starts with the letter K:

user ~ > K <TAB><TAB>
kadmin.local     kextfind         keytool          klist            kswitch
kcc              kextload         kill             kramdown         ktutil

As you can see any command that starts with the letter K will be returned.

I hope you find this helpful, let me know if there are more useful commands that I should add to this list!

This article was first published on my personal site on 7th of July