In documents and subtitles, embedding fonts can easily increase the file size tenfold. As for the web, here are some popular fonts and a potential network impact:

Size is based on rendering "Hello, Čihař!" in regular, bold, italic, and bold italic – it varies based on what characters you use. The estimated network speeds and latency are taken from Throttling - Firefox Source Docs.

On the modern web, we've normalized fetching fonts from client-side, or embedding fonts in resources that are served to users. While this may be tempting, it actually makes very little sense for most use-cases.

This isn't suggesting to never use external fonts. Just a reminder that fonts aren't free, and that it's a good idea to review if it's worth packaging or fetching external fonts when it's avoidable.

Instead, I'd recommend you consider an expansive font selection, featuring typefaces available across operating systems. There are times we should fetch external fonts, but it shouldn't be the default attitude in everything that we build.

In short, you may just need an arbitrary typeface to show arbitrary text on your website. That's fine. But it's worth sticking to the wide array of typefaces already installed on the client's operating system.

In other words… only fetch an external font when it actually enhances the user experience!

Why?

Given the number of typefaces available on all operating systems, there are likely many suitable options for your use-case.

There's no need to specifically fetch Roboto, Inter, or another font that's similar enough to the preinstalled options.

This is particularly relevant to corporate websites, blogs, forums, and web applications.

The user is there to consume content or get a task done. Unless you're looking to be creative, the average user doesn't know, and doesn't care, what typeface it has so long as it's legible.

Meanwhile, they may care for other things impacted by your font choices…

Performance

Whether we're talking about embedding fonts in offline documents, or fetching fonts on the web, it increases the overall size and load time of resources.

Typefaces can be upwards of 160 KB per font face. The impact of this can be significant on slower networks or old mobile devices.

Particularly on the web, you'd derive more value building a lightning-fast user experience, than fetching a typeface the user didn't ask for.

Until the typeface has finished fetching, sites can choose to block rendering or swap, neither of which is ideal.

Font swapping is when the font changes shortly after visiting the site, leading to a flicker and an increase in Cumulative Layout Shift.

A demo of blocking and font swapping on the MDN website. I refreshed with the cache disabled on a high-spec laptop connected to Wi-Fi with no throttling.

A demo of the MDN website using Nimbus Sans, based on Helvetica, instead of external fonts. I refreshed under the same conditions.

Dropping external fonts is pretty simple, but can improve load time, reduce bandwidth usage, and avoid font swapping, which all improve your Core Web Vitals and SEO.

Privacy

When fetching fonts from a third-party server such as Google Fonts, client information is leaked to the third party. This includes the IP Address, User-Agent, and Referer, among other headers.

Every website that loads a typeface from Google Fonts has given Google the potential to track the visitor. The domain you visited, the time you accessed it, what browser and operating system you're on, and so on. They can form a timeline of the websites you visit from the fonts alone.

Google states that they don't track or store this information. But given the nature of the internet, they inevitably must receive it.

A German court has actually ruled that websites that load Google Fonts are violating GDPR:

"A regional court in the German city of Munich has ordered a website operator to pay €100 in damages for transferring a user's personal data — i.e., IP address — to Google via the search giant's Fonts library without the individual's consent." (Source: German Court Rules Websites Embedding Google Fonts Violates GDPR)

This problem can be avoided by self-hosting fonts. If you're going to use an external font, make sure you consider this.

But you should also know that some users disable custom fonts or block third-party fonts, so you should still specify at least a generic family name regardless.

"You should always include at least one generic family name in a font-family list, since there's no guarantee that any given font is available. This lets the browser select an acceptable fallback font when necessary.‌‌‌‌‌‌‌‌" (Source: MDN Documentation for font-family)

Familiarity

Users are familiar with the experience of their operating system.

Maybe not how it works under the hood, or even how to perform simple operations, but they do encounter the welcome screen, context menus, and their preinstalled applications regularly.

It's safer to stick with typefaces the user already has access to because these are the typefaces the user is already accustomed to reading from.

This argument is in a similar vein to why it's a good idea to use the system date picker, color picker, or modal/dialog boxes instead of creating custom ones.

Users are familiar with their system!

From my experience, often one of the following occurs:

• The user couldn't tell that an external font was used, making it largely redundant. Most non-specialists experience this everyday, it's hard to even tell that websites are using different fonts from each other unless you're conscious of it.

• The user was able to tell, and thus has a different reading experience than what they're used to. The potential for disruption depends on the needs of the user, but that risk is often unnecessary.

Unless you have a reason to change it, it's best to stick with what the user is familiar with.

Who Else Does This?

Wikipedia is the most notable example, and they even have a page elaborating on the topic: Meta page on Wikipedia's use of typography.

Some of the most popular sites don't fetch a single font on their landing page, in favor of using system fonts only:

You can verify for yourself by inspecting the site with your browser's development tools.

There are no outgoing network requests for fonts, and the font-family properties are set to system fonts only.

Exceptions

There are times loading and embedding fonts does make sense, particularly if the look and feel you're after is significantly different from common system fonts:

• You're targeting an environment that doesn't have typefaces available.

• To fit with existing branding, like an in-house font.

• A creative or unique design, especially relevant for gaming and artsy sites.

• Icon fonts like OpenMoji, but note that most clients come with emojis already.

• A website that's literally for distributing, displaying, and testing fonts.

Consequences

If you apply a local font stack, your text content may not look pixel-for-pixel identical across clients. But you should measure success by the user experience.

It's important for the site to feel familiar, but there are more significant changes between clients already, like the human-interface, resolutions, and DPI.

Compared to this, it's fine if the arch of the a has a slightly different radius, or the tick on the l is a few pixels longer. In fact, this is unlikely to get noticed, so it's unlikely to impact the user experience at all.

Users would sooner have qualms with the difference in speed or a flicker, before the difference between similar typefaces.

Another argument is that allowing different typefaces may make the layout difficult to manage. Glyphs can have different widths, and therefore take up varying space.

But modern sites should be following responsive design, so you should be taking the time to make the pages fluid anyway.

To minimize impact, you can use web safe fonts.

If you dislike how limiting that is, pick a typeface included with your operating system, and find similar typefaces on other operating systems.

Even better if you can pick metrically compatible typefaces.

Comparison

Let's visit a website and see what it's like to disable downloadable fonts.

I'll also replace all font stacks to use Helvetica.

Note, my computer doesn't actually have Helvetica installed, so my operating system automatically translates this to Nimbus Sans, which is based on Helvetica. Nimbus Sans is preinstalled on Debian.

In the case of MDN, is the second version really so undesirable that we need to load a 252 KB font, given the penalties and demonstrations raised above? Ultimately, this one is down to user preference, so I'll let you decide.

MDN, with the Inter typeface fetched from client-side.

MDN, with the font-family overridden to use Helvetica.

On the flip side, that doesn't mean to never fetch fonts. There are examples where the aesthetic may be more valuable to the user experience than the performance penalty.

Let's look at Framasoft. They went for a more creative look and feel, also featuring a lot of David Revoy's illustrations.

Using Tovari Sans was a design choice which enhances the user experience, and isn't easily replaceable with a local font stack.

If we were to take that font away, the page feels inconsistent and unpolished. Even if we cleaned up the CSS, we'd still be detracting from the theme of the website.

Framasoft, with the Tovari Sans typeface fetched from client-side.

Framasoft, with the font-family overridden to use Helvetica.

Resources

Whether you want to go local, or just need to specify some fallback fonts, here are some helpful resources for picking out your font stack:

• List of typefaces included with Apple operating systems

• List of typefaces included with Windows

• Core typefaces included with ChromeOS

• Documentation for web safe fonts

Cross-Platform Font Stacks

There are countless articles and resources available online that feature predefined font lists you can use. These are referred to as "font stacks".

In particular, I'd like to highlight a resource by Dan Klammer, a designer and web developer who created Modern Font Stacks (GitHub repository), a website that helps you pick out native font stacks for your project.

Modern Font Stacks proposes a list of fonts for a variety of styles like Neo-Grotesque (a style of sans-serif) or Monospace Code (a style of monospace) and offers a visualization of how it will look across operating systems. It runs through a description of each stack, the CSS to use it, metadata like the weights available, and which of the fonts you personally have installed.

Some font classifications don't explicitly include a font from every operating system that exists, but remember that the generic font family (sans-serif, serif, monospace, cursive, and so on) at the end will have you covered.

If you like the stack, you can run with it. But don't feel constrained either, you can also use it as a starting point and tweak the font stack to your needs.

I've included images from the GitHub repository (at the time of writing), featuring proposed font stacks for two of the most common styles used on the internet today:

Base font stack proposed by Modern Font Stacks for the Neo-Grotesque style, a type of sans-serif font.

Base font stack proposed by Modern Font Stacks for the Monospace Code style, a type of monospace font.

Conclusion

In the end, the user experience is what matters most. Sometimes that means prioritizing visual design, other times that means prioritizing performance.

I hope this was worth your time, and that with the knowledge you can make an informed decision when choosing fonts for your next project.

Feedback and questions welcome, you can hit me up on GitHub or Mastodon.

Cover art illustrated by hashrock and released under CC BY 4.0.

This would allow users to share links that point to any particular text on a webpage!

What's a URI fragment?

The URI fragment is the optional part at the end of a URL which starts with a hash (#) character. It lets you refer to a specific part of the document you've accessed.

For example, if you visit the following link, you'll automatically scroll to the top of the section you're reading right now!

What's a URI fragment?

Assuming you're consuming this article in the browser, you'll notice the URL changes too. It's now appended with #what-s-a-uri-fragment, which is the ID that the Ghost CMS assigned to the heading.

What's Changing?

Before, the primary way to anchor links to part of a page was by specifying the ID of an HTML element in the fragment (source).

This put readers at the whim of the web developer or content writer. If writers didn't provide appropriate IDs, there'd be no way to anchor links to that section.

Some websites or tools provide a non-standard way of handling this, namely highlighting. For example, in Read the Docs you can pass the highlight query parameter to highlight any particular text on the page.

You can try it out in the Weblate documentation.

This is what you see when you specify the highlight query parameter on the Weblate documentation.

Text Fragments are a relatively new proposal which extend the usability of URI fragments to query and highlight any arbitrary text as well.

Why Would This Be Useful?

Can you relate to one or more of these scenarios?

• When sourcing information, you can link directly to the quote or content you cited.

• As a member of support staff, you can link to and highlight a particular excerpt of the documentation or FAQ for the user.

• Text fragments can be used with any arbitrary text document that can't store anchor metadata, such as plaintext or configuration files.

• You're a web developer who implemented a custom solution for this, but can now just let the browser handle it for you.

If so, then this might help better attribute content on the web, highlight information your users need, or relieve some maintenance effort for developers.

The Proposal

You can specify either literal text, or the start and end of a range of text. The spec includes a pseudo-diagram that demonstrates what the syntax looks like:

:~:text=[prefix-,]textStart[,textEnd][,-suffix]

         context  |-------match-----|  context

Or alternatively, a more digestible version:

The sections prefix and suffix are used for context, so if the text you want to match appears multiple times on a page, you can use them to indicate to the browser which instance you want to match.

To provide some examples, let's suppose we open the Web Monetization website which includes the following text.

A JavaScript browser API that allows the creation of a payment stream from the user agent to the website

— https://webmonetization.org/

For longer excerpts of text, a range is preferred to avoid bloating the URL. Usually, developers will aim to keep the total length of URLs below 2,000~ characters anyway. This avoids potential issues with older user-agents, especially after accounting for the length of the domain and query parameters.

Here is how highlighting looks on Chromium when you visit a webpage with a text fragment.

Implementation Details

From reading the spec, and testing manually in a Chromium browser, here are some of the finer details with querying content in a text fragment.

• The sections are not case-sensitive, and accents are ignored (source)

• All sections match whole words only, so you can't partially match

• Only the first match will be highlighted if there are multiple (source)

Compatibility

Text fragments are available in most Chromium browsers, as this was implemented in Chromium itself in 2020.

Text fragments are not available in Firefox at all yet. Mozilla will hopefully have this implemented in the future – in February 2022 they opened a ticket to track progress.

Privacy and Security

Some concerns have been raised with the specifications, namely that automatically scrolling to parts of the page may reveal certain details about the user.

An interesting thing about URI fragments is that they shouldn't be sent to web servers for processing. URI fragments are intended to be a client-side/user-agent only mechanism to be handled locally by the browser or web application.

To verify this, we can run a small Express server that just logs the URL. We'll see if it includes the fragment:

const express = require('express');
const app = express();
const port = 3000;

app.get('*', (req, res) => {
   console.log('URL:', req.url);
   res.status(204).send();
});

app.listen(port, () => {
   console.log(`Listening on port ${port}.`); 
});

The results of each request via curl. The same strings would've printed had I executed the requests in a browser.

Some websites take advantage of this to improve privacy and reduce the bandwidth sent to web servers.

For example, if you look at TypeScript Playground, you'll notice instead of using query parameters or building a short URL, they just encode the TypeScript and store it in the URI fragment.

Observe how the URL includes a URI fragment. It's actually just console.log('Hello, World!'); but encoded.

With an implementation like this, you can bookmark or share the link with anyone, and their web server won't know or care about the code. However, any services you use to share the link could, of course, decode and read it.

However, the concern raised with text fragments is that, if a user-agent will automatically scroll down to a given section of a page, while the text fragment wouldn't have been shared with the web server, network requests may've been induced such as loading images on that part of the site. This would allow the web server to derive that you were linked to that section of the page (source).

Despite these concerns, it appears to me that URI fragments as a whole have been susceptible to this for a long-time, not just text fragments.

Regardless, it's a good thing to keep in mind until browser developers and security researchers give this more thought.

Link to Text Fragment Extension

Google has also developed an extension which provides a UI to link any arbitrary text as a URL.

The extension adds "Copy Link to Selected Text" to the context-menu when you select text and secondary-click on it. You can see it in action on the following video.

The extension also ships for Firefox, and polyfills an implementation of text fragments into each webpage, so it'll even scroll to and highlight the matched text too.

Conclusion

I hope this gives more incite on URI fragments as a whole, and especially text fragments.

If you have any ideas for how the specification can be improved, feel free to review the open issues on the browser's and WICG's repositories and provide your thoughts.

I'm eager to see more browsers support this, as it makes the experience of citing, attributing, and linking to content on the web a lot more convenient.

Other organizations also get involved by offering their own rewards. You can find a community-sourced list of organizations offering incentives to contribute on Hacktoberfest Swag.

Only meaningful contributions will count toward the total 4 required. Take your time and show common courtesy with maintainers to ensure your pull requests get merged. More on this in Let's Avoid Turning it into Spamtoberfest below.

How you can Participate in Hacktoberfest

It's important to note that Hacktoberfest is for making any quality contribution to open-source projects. No one said it has to be code!

Everyone is capable of putting something forward:

• Authors

• Artists

• Software Developers

• Technical Writers

• Translators

Recommended Projects for Hacktoberfest Contributions

I'm not going to explicitly list repositories for contributing code because that's easy enough to find. All repositories listed on the following links have opted-in to Hacktoberfest.

• GitLab (All repositories with the topic hacktoberfest on GitLab.)

• GitHub (All repositories with the topic hacktoberfest on GitHub.)

Below are projects I recommend if you don't know how to code but still want to contribute to open-source (or Creative Commons) projects. It only includes projects that have manually opted-in to Hacktoberfest.

You shouldn't need to know any programming languages or HTML to contribute to them. You will be expected to know how to commit your work with Git, though, which we'll cover later.

Art

Projects that need art or animations:

• Cult of the Party Parrot — Animated parrot emojis.

• Elypia Emotes — Red panda emojis.

Awesome Lists

Community-maintained lists of resources:

• Awesome Mechanical Keyboard ­— List of open-source keyboards.

• Free Programming Books — List of free books anyone can access.

• Free Science Books — List of free books anyone can access.

• Remote-Friendly Companies — List of remote-friendly companies.

Books

Free eBooks maintained with a docs-as-code approach:

• Introduction to Bash Scripting — Free eBook for Bash.

Configuration

Projects that revolve around configuration files. A contribution could just be appending an entry to a JSON file:

• 2fa.directory — List of sites with 2FA. (More Info)

Documentation

Projects where you just have to type in plain English. Programming and technical knowledge will help, but there's no need for a specialized skill.

This only includes repositories that maintain documentation in a format that would be simple for most users, like Markdown.

• .NET Docs — Documentation for .NET.

• GitHub Docs — Documentation for GitHub.

• Jellyfin Docs — Documentation for Jellyfin.

• Nextcloud Docs — Documentation for Nextcloud.

• tldr-pages — Cheat sheets for CLI applications.

Translations

Projects that need text translated from English to other languages.

Projects that use crowd-translations platforms like Weblate aren't included here, since the translator doesn't create the pull request. Unfortunately, Hacktoberfest only considers whoever opened the pull request, not the authors of the changes.

Please make sure that you only contribute human-reviewed translations – so either translated by a human, or machine-translated but verified by a human. Again, quality is important.

• Free Programming Books — Translate health files.

• tldr-pages — Translate cheat sheets.

Miscellaneous

Projects that are one of a kind:

• Dumb Password Rules — List of sites with dumb password rules.

• Hacktoberfest Swag — List of projects rewarding contributors.

Let's Avoid Turning it into Spamtoberfest

Unfortunately, Hacktoberfest has developed a bit of a bad reputation among some projects due to spam. Sometimes contributors can be a bit eager to complete Hacktoberfest and miss the point. ^-^'

From 2020, if a user makes 2 pull requests that get assigned a label with the word spam or invalid in it, the contributor will be banned from Hacktoberfest indefinitely, including future events.

Mindustry handles this the best in my opinion with the Hacktoberfest Hall of Shame.

From 2021, Hacktoberfest is doing more to crack down on spam by excluding projects that encourage pull requests with no value.

The goal of giving back to open-source gets undermined if most contributions just go to "Complete Hacktoberfest!" repositories.

How to make valuable Hacktoberfest contributions

• You have a month to make the 4 pull requests. Use it! They're more likely to get merged if you make fewer good quality pull requests.

• Don't assume every pull request you make will be merged before Hacktoberfest is over. Try to do more than 4 if you can!

Practice common courtesy

Open-source maintainers have a life too. They don't always have time to review all pull requests, especially towards the end of Hacktoberfest.

Don't make maintainers feel bad, don't rush them, and don't demand attention. Just work on something else if they're busy.

How to Commit Work and Open a Pull Request

Now that you know how to be a helpful Hacktoberfest participant, and you've learned about some projects you'll be able to contribute too, the only thing left is to actually learn how to contribute.

GitHub and GitLab both provide ways to simplify contributing for small changes. We're not going to use them because it'll be simpler to show a single set of instructions that will work everywhere rather than rely on platform-specific features.

Before you continue, pick a repository that you want to contribute to. If you're multilingual then tldr-pages will be easiest, otherwise consider Free Programming Books.

I'm going to use Free Programming Books in my examples.

How to install Git

First, you should install Git which is a version control system. This is the tool that projects are using to manage changes.

Windows users can download it from the git-scm website. Linux users can install it using their preferred package manager.

Once you have Git installed, verify it's installed correctly with git --version.

Now configure your name and email address. The name doesn't matter, but you should specify the same email address you're using for Hacktoberfest.

git config --global user.name "Your Name"
git config --global user.email "your@email.org"

Note that the email address you specify here will be considered public information once your pull request has been merged. Anyone can view the details of a commit which includes the author details.

For example, my email address is in the output when I do git log on one of my commits.

commit 9647912b202a57474b4cd0ce796126c462c1ecc0 (HEAD -> added-react-book, develop/added-react-book)
Author: Seth Falco <seth@falco.fun>
Date:   Tue Oct 5 14:04:25 2021 +0200

    added a react book from digitalocean

If this is a problem, both GitHub and GitLab provide a feature to hide your email address by giving you a disposable one. You can enable the feature and use that email address in git config instead.

How to fork and clone a repository

Next, you'll want to fork the repository. You won't be allowed to push changes directly to the repository, so instead you'll make a fork which is a copy of the project that's under your control.

The "Fork" button is at the top-right of the repository page.

Next, clone the repository locally. This pulls a copy of everything in the repository to your machine so you can start working on it.

We'll do this in the terminal. If you're on Windows you can use Command Prompt or PowerShell.

Go to an appropriate location on your file system like your Downloads or Documents directory, then execute this following:

• Clone the repository you want to work on.

• Enter the directory in the terminal.

• Link the repository with the fork on your account.

git clone https://github.com/EbookFoundation/free-programming-books.git
cd free-programming-books
git remote add develop https://github.com/{YOUR_USERNAME}/free-programming-books.md

How to work with the project

Now that you've cloned the repository locally, you can start working with it. With most repositories, it's best to open it up in a code editor like Visual Studio Code, but you can technically work with any text editor including Notepad.

Open the directory containing the repository you cloned in your editor. By default, it's named after the repository name, for example I now have a folder named free-programming-books.

Now you can make changes:

• If you're not sure what to do, check if there's anything specific they need by looking under the "Issues" tab on the repository.

• Alternatively, make whatever meaningful change you want.

With Free Programming Books, it's a repository for maintaining a list of free eBooks, so we can add more resources to it.

DigitalOcean has some great books in the community section of their website, so we can just add one or more of them to the repository. I've picked out How To Code in React.js for this example.

I can go to the respective section in the project which is the books/free-programming-books-langs.md file, and add the resource under the React section of the document.

The line I added looks like this:

* [How To Code in React.js](https://www.digitalocean.com/community/books/how-to-code-in-react-js-ebook) - Joe Morgan

How to commit your work

Now that you've made a change, you'll want to actually commit and push your work back up.

You've only made the change locally so far – now we want to send a pull request. This basically means you'll send a request asking the maintainer of the repository to include your changes in their repository.

In your terminal, we'll execute the following which will:

• Create a new branch.

• Tell Git you want to stage all changes to be saved.

• Commit the change with a message describing what you did.

• Push the changes to your fork.

git checkout -b added-react-book
git add .
git commit -m "added a react book from digitalocean"
git push develop added-react-book

This should hopefully produce output like the following:

Enumerating objects: 7, done.
Counting objects: 100% (7/7), done.
Delta compression using up to 8 threads
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 1.07 KiB | 1.07 MiB/s, done.
Total 4 (delta 3), reused 0 (delta 0)
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
remote: 
remote: Create a pull request for 'added-react-book' on GitHub by visiting:
remote:      https://github.com/SethFalco/free-programming-books/pull/new/added-react-book
remote: 
To github.com:SethFalco/free-programming-books.git
 * [new branch]        added-react-book -> added-react-book

How to create a pull request

Both GitHub and GitLab will drop a link in the output of the command above that will take you to open a pull request.

If you click that link (you may need to hold CTRL), it'll take you to a page where you can provide more information and submit your pull request.

Just fill in the details requested and click "Create pull request". All that's left is to wait for the maintainers to review it.

Clean up the code

As soon as you've finished a pull request, you should leave your branch and go back to the primary branch of the repository.

Execute the following commands in your terminal:

• Check if the primary branch is main or master.

• Switch to the primary branch of the repository.

• Update your local copy to be in sync with the repository.

git branch
git checkout main
git pull

Restart from the "How to work with the project" step to make more changes.

Conclusion

I hope this gives more information about Hacktoberfest, and that you feel more confident participating with the open-source community even if you don't write software.

Best of luck with your pull requests!

There are many extensions that add this functionality to your browser. I'll be focusing on uBlock Origin, as many will already have it. If you don't, then I'd strongly recommend installing it.

What is uBlock Origin?

uBlock Origin is a free and open-source ad blocker available for all major browsers. It also includes an element picker tool that can remove custom elements, which is what we'll be using in this article.

Having knowledge of CSS selectors or XPath will help you go through this tutorial, but isn't required. uBlock Origin provides visual tools to select elements without technical knowledge. Still, writing the selector manually will usually be more reliable.

Why Blocking Elements Is Useful

On the internet, we're constantly consuming information, but quite often it's information that simply isn't relevant to us.

If you access particular websites frequently, it can be a big boost to productivity if you can conditionally single out the information you know you won't need and never consume it in the first place.

• Removing certain types of events from activity or social media feeds.

• Removing popups that ask you to do things you don't want to.

• Removing posts from particular authors on YouTube or social media.

• Removing distractions or dynamic elements that draw your attention.

How to Filter HTML Elements

To filter elements, you can click the uBlock Origin icon at the top of your browser, then click the element picker, the one with the eye drop icon. (More Info)

The uBlock Origin interface, this appears if you click the icon in your browser's toolbar.

You can start by selecting the content you want to remove. Even if the selection isn't perfect, it's just a starting point.

Once the box appears at the bottom-right, you can use the visual tools with the "Pick" button and sliders, or manually specify a selector.

The content highlighted in red is what will be removed once you select the "Create" button. These changes will persist even after refreshing or revisiting the page at a later date. Let's see how this works.

CSS Selectors

You can remove most elements you want to remove easily using CSS selectors. This is great for removing static content on the page.

Removes all release and push events from appearing in my GitHub activity feed. (##div.news div.release, div.news div.push)

Removes the banner to download Slack. (##.p-client__banners)

XPath

You'll usually want to use XPath for one of two reasons:

• You need to check against the value of an element.

• You need to select an element based on the attributes of its children.

This is useful for removing dynamic or user-generated content. We want to remove the entire element, but only if something inside it matches the criteria rather than the element itself.

Removes all plugins from DevilBro. (##:xpath(//a[./div/div/p/object/a = "DevilBro"]))

How it looks after removing all plugins by DevilBro.

Troubleshooting your filters

When filtering elements, your selectors can break at any time. Websites change for various reasons, in most cases due to maintenance or updates.

Don't let that deter you from doing what you want, though. It just means you should keep this in mind when you remove elements.

Try to keep your selectors local to what you actually want to remove, but strict enough that it won't falsely select other elements on the page.

There are also many websites that don't appreciate client-side modifications, and try to hinder this by arbitrarily changing HTML attribute values or obfuscating them.

In these cases, it's best to specify CSS attribute selectors or use XPath to partially match attribute values.

Removing the "Active Now" view on Discord using an attribute selector, (##div[class^="nowPlayingColumn"])

How to Remove Filters

If you no longer want to block something, or the website has changed, you can go to the settings to remove the old filter before making a new one.

To remove a custom filter:

1. Navigate to the uBlock Origin settings.

2. Select the "My filters" tab.

3. Delete the lines with the filter(s) you want removed.

4. Click "Apply changes" at the top.

5. Refresh the page you were on.

Other Helpful Browser Extensions

There are other extensions you can use to remove specific types of content on websites, too.

Highlight or Hide Search Engine Results

Highlight or Hide Search Engine Results (HOHSER) supports all major search engines, including DuckDuckGo and Google.

I believe domain blacklisting should be a native user-setting available in search engines, but until that's a thing, you can use this extension to hide results under domains you don't like.

• Websites with re-hosted or shady download links.

• Search engine optimized junk, like fake coupon websites.

• Websites that block users in the EU.

I still don't care about cookies

I still don't care about cookies removes cookie warnings from appearing on most websites, that way you don't have to deal with them yourself.

The extension will attempt to hide the cookie message, only accepting cookies if necessary.

I strongly recommend only using this in combination with extensions like uBlock Origin and Privacy Badger, to prevent undesirable cookies from being saved.

Conclusion

I hope you're not in a situation where you feel the need to block a significant amount of content from the pages you load.

But if you do feel the need, I hope this makes browsing the internet just a little more bearable for you.

EditorConfig on its own is just a vendor-agnostic configuration file. It relies on third-party tools or integrations to implement support for the rules declared in the file.

They can be read by IDEs (Integrated Development Environments), code editors, or build tools to enforce or apply formatting conventions.

What Does EditorConfig Solve?

Users usually configure the code style settings in an editor to their preferences. Unfortunately, their preferences probably don't correlate with yours.

What happens when they're contributing to a shared project? This might be a project at work, or an open-source project on GitLab or GitHub.

The user's style settings get applied to the files they modify. This can result in projects feeling inconsistent or messy, with some or all of the following issues:

• Mixed use of tabs and spaces.

• Mixed use of line endings. (Usually not a significant issue with Git.)

• Files may not have the desired character encoding.

• Various indentation sizes across files.

Without consistency, the code can appear untidy and be a pain to read, depending on a user's development environment.

eclipse.jdt.ls mixes tabs and spaces, here's how it looks on GitHub with a tab size of 8.

A common solution is to share editor settings as part of the project, but this assumes all committers are using the same editor as you, which probably isn't the case.

For Java development alone, the following are all popular choices:

• Visual Studio Code (What I use!)

• Eclipse

• IntelliJ

• NetBeans

You'll bloat your project with unrelated files if you add the configuration for every editor someone might use.

So, how about a vendor-agnostic solution where editors are responsible for utilizing a shared configuration instead?

How EditorConfig Helps

Defining conventions helps everyone throughout a project's life-cycle. There are namely three ways it saves time.

EditorConfig Makes Code More Readable

Making code more readable is by far the most important reason to use it. This improves the maintainability of the project, and the speed that people can work.

“Indeed, the ratio of time spent reading versus writing is well over 10 to 1. We are constantly reading old code as part of the effort to write new code… Therefore, making it easy to read makes it easier to write.”
― Robert C. Martin

There are many other reasons someone might be reading the code outside of development too:

• Researchers that need to better understand how the project works.

• Security analysts that are checking for vulnerabilities.

• Technical writers that are documenting application behavior.

People will be able to perform their role more effectively if your code is kept tidy, consistent, and human-readable.

EditorConfig Makes Code Reviews Easier

As a project maintainer, you'll inevitably have to review code contributed by others. They might be a fellow team member, or open-source contributors that discover your project.

Enforcing formatting should be delegated to software. This will make reading and reviewing the code more efficient, and avoids the need to request changes based on formatting.

Reducing the feedback loop ultimately saves everyone time.

EditorConfig Makes Development Easier

Developers can save a lot of headache by having conventions that are automatically applied by their editor.

Without it, they have to find a contribution guide, style guide, or check other code manually to learn project conventions.

Even when the conventions are known, they may conflict with a developer's settings. Then they'll have to code against the editor's automatic formatting, or frequently change settings between projects.

This is especially useful for developers that jump between projects a lot. For example, open-source contributors frequently write code for projects across organizations that follow different coding conventions.

How EditorConfig Works

EditorConfig uses a simple INI-like file named .editorconfig. This file declares rules that will be translated to settings in your editor, or perform formatting over your workspace.

For example, in my editor I use 2-space indentations for XML files, but a project I contribute to might prefer 4-space indentations.

[*.xml]
indent_size = 4

When I open the project, my editor will see the .editorconfig file, and override the settings to suit the project's conventions.

Writing an XML file with my default editor settings. I use spaces for indentation with a size of 2.

Automatically reformatting the file after overriding the XML formatting settings.

How to Use EditorConfig

Depending on your editor of choice, it may have native support for EditorConfig already. There is a list of "No Plugin Necessary" editors on the website, which includes JetBrains IDEs and Visual Studio.

If your editor doesn't have native support, you'll likely be able to add it with a plugin. Editors like Visual Studio Code and Eclipse support it this way, which can also be found on the EditorConfig website under "Download a Plugin".

Once installed, your editor should automatically find the EditorConfig file in your project if it exists, and start applying the rules.

How to Define Rules in EditorConfig

You can find a list of rules on the EditorConfig Wiki. It contains all officially supported rules, as well as proposals for domain-specific rules that may be supported by certain implementations.

Not all implementations support every rule. This is especially true for domain-specific rules like curly_bracket_next_line. It can still be worth declaring these properties anyway for users that can utilize it, or to at least document the preference.

You must set root to true for the top level EditorConfig in the project, which is normally in the root of your project directory.

Additional EditorConfig files can be defined in nested directories, but shouldn't set root to true.

Then you can define a header that selects files, with rules for what to apply to matching files.

# Declares that this is the top-level configuration
root = true

# Applies to all files
[*]
indent_style = space
indent_size = 2

# Applies to all Markdown files
[*.md]
trim_trailing_whitespace = false

# Applies to all C# and Java files, overriding rules declared before
[*.{cs,java}]
indent_size = 4

There are no standard conventions for how to write an .editorconfig file, but there are two notable approaches you can take.

Define Rules Per Project

Just add to it as you need to. This means just defining rules, or appending file formats as your project grows.

You can start by generating the file with your editor, or just create a file named .editorconfig manually. You can copy-and-paste the example from the official website.

Define Rules for All Projects

Alternatively, you can put together all of your preferences and plan the ideal configuration for all files you might interact with.

You can work from scratch, or start with mine and make the necessary adjustments.

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
curly_bracket_next_line = false
spaces_around_operators = true

[*.bat]
end_of_line = crlf

[*.cs]
curly_bracket_next_line = true

[*.{cpp,cs,gradle,java,kt,py,rs}]
indent_size = 4

[*.{js,ts}]
quote_type = single

[*.md]
trim_trailing_whitespace = false

[*.tsv]
indent_style = tab

EditorConfig Rule Recommendations

These are rules I'd objectively recommend declaring, if your project contains the respective file format. It'll help you avoid tedious issues that can occur due to a user's development environment.

Batch

Line endings need to have a textual representation when stored. This is usually something you wouldn't see or have to worry about.

However, different systems use different characters to represent the end of a line. (More Info)

• Unix systems use a line feed. (lf or \n)

• Windows uses a carriage return and line feed. (crlf or \r\n)

Batch files can have unexpected behavior if they end with Unix line endings. You can avoid this by setting end_of_line to crlf to ensure they have Windows line endings instead. (More Info)

[*.bat]
end_of_line = crlf

Markdown

In Markdown, you can write a line break in the current paragraph by adding 2 spaces at the end of a line. (More Info)

You'll want to set trim_trailing_whitespace to false to avoid having your editor remove those spaces when you save.

[*.md]
trim_trailing_whitespace = false

Tab Separated Values

TSV (Tab Separated Values) files are very similar to CSV (Comma Separated Values), but use tabs instead of commas as the column delimiter.

It's very common for developers to have tabs automatically convert to spaces. You should set indent_style to tab to avoid the delimiter from being replaced, otherwise your entire table might become a single column.

[*.tsv]
indent_style = tab

Conclusion

If you're a maintainer, either working in a collaborative environment or in open-source, I strongly recommend adding an .editorconfig file defining the project's conventions to the root of your repository.

Maintainers can then spend more time reviewing clean pull requests that adhere to the style guide, as the editor will automatically start enforcing or applying the conventions.

Committers get a better experience, as the project will override their workspace settings. This reduces the need to reformat code or work against preconfigured editor settings.

And projects will be cleaner, as the conventions will be in a single vendor-agnostic file, rather than editor-specific files that only certain contributors can use anyway.

Bookmarklets are natively available in all major browsers, including Mozilla Firefox and Chromium-based browsers like Chrome or Brave.

Scripting with JavaScript

Learning how to write scripts provides many benefits, namely the huge time-savings from automating repetitive or tedious tasks.

If you aren't a developer, the idea of learning to code might be intimidating, however scripting doesn't require software engineering knowledge or design patterns. The goal isn't to make scalable software, but rather to automate specialized or trivial tasks.

Regardless of profession, even if you've never written code before, consider what you do in your browser. If you ever feel what you do is repetitive or robotic, consider the possibility of delegating the task to an actual robot.

Use Cases for Bookmarklets

With bookmarklets, you can manipulate the current page as the function will have the context of the current tab. This means you can:

• Click buttons virtually

• Modify the content

• Use the content of the page to open a new page

• Remove elements from the page

You can also make bookmarks that don't utilize the context at all, such as conditionally opening a URL, or generating HTML for a new tab.

You'll find some bookmarklets I made for this article in Example Bookmarklets. They're just for demonstration, but should make the capabilities and implementations apparent.

How to Create Bookmarklets

Creating a bookmarklet is almost identical to creating a regular bookmark. The only difference is that you'll write JavaScript in the URL field instead of an HTTP/HTTPS URL.

Navigate to the Bookmark Menu

Mozilla Firefox

Either in your bookmarks bar, or in the Bookmarks sidebar (CTRL + B), you can right-click, then click "Add Bookmark...":

Chromium

You can right-click your bookmarks bar, then click "Add page...". Alternatively, you can go to your Bookmarks manager, then right-click and click "Add new bookmark":

How to Write a Bookmarklet

In the URL field of the bookmark modal, write a JavaScript function in the following format.

javascript: (() => {
  // Your code here!
})();

javascript: is the URL's protocol. This indicates that the browser should execute the bookmark as JavaScript.

(() => { }) defines an anonymous function (lambda). You should write the code you want to execute between the curly braces.

(); will execute the anonymous function you just created.

javascript: (() => {
  alert('Hello, World!');
})();

You can also make it generate HTML and open it as an HTML document:

javascript: (() => {
  return '<h1 style="color: white; background-color: black;">Hello, World!</h1>';
})();

Spacing for Bookmarklets

Most browsers don't allow a multiline input field in the bookmark URL, so you'll usually have to make strict use of curly braces ({ and }) and semi-colons (;) when writing bookmarklets. This is especially important when scoping conditional constructs (if/for/while).

Other than this, spacing doesn't matter. Don't be afraid to have a lot of code in one line because that's all you've got:

javascript: (() => {   const documentHTML = document.documentElement.outerHTML;   const matches = documentHTML.matchAll(/[\w.+=~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/g);   const flatMatches = Array.from(matches).map((item) => item[0]);   const uniqueMatches = Array.from(new Set(flatMatches));      if (uniqueMatches.length > 0) {     const result = uniqueMatches.join('\n');     alert(result);   } else {     alert('No emails found!');   } })();

If your script is complex, it'll be easier to maintain your bookmarklet in a code editor like Visual Studio Code. You can copy and paste it over to your browser when it's ready.

How to Interact with Websites

The most common thing you'd do with bookmarklets is manipulating or interacting with websites you have open.

The Global Document Object

As the bookmarklet has the context of the page you're on, you have access to the [document](https://developer.mozilla.org/en-US/docs/Web/API/Document) object.

The ideal functions for selecting elements for our use case are:

• querySelector to select a single element by CSS selector.

• querySelectorAll to select all matching elements by CSS selector.

• [evaluate](https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate) to select all matching elements by XPath.

There are other functions like [getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) and [getElementsByClassName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName), but we want to avoid false-positives, so we'll always make a strict selection using multiple element attributes.

CSS Selectors and XPath

If you're only selecting elements based on element names, IDs, classes, and other attributes, using a CSS selector will be simple and efficient.

CSS selectors are used to select elements in HTML documents to apply styles. If you're familiar with web development or CSS in general, then you already know how to use CSS selectors. (More Info: MDN, freeCodeCamp)

If you need to match the text content of an element as well, then you'll have to use XPath instead.

XPath is used to traverse XML documents, it provides all the capabilities of CSS selectors and more, including comparing the content of elements or using a regular expression to match it. (More Info: MDN, Wikipedia)

How to Select Elements from the Webpage

One of the most common uses for bookmarklets is manipulating webpages. To interact with, manipulate, or remove elements from the page, you'll always have to select the elements first.

1. First open the browser development tools by pressing F12, or CTRL + SHIFT + I.

2. Click the Inspector/Elements tab, which displays the full HTML document of the page you have open.

3. Use the element selector tool (CTRL + SHIFT + C) and click on the element you want to interact with. The document viewer will scroll to the element you clicked in the HTML document. You'll see the element ID, classes, and attributes.

4. Check if you're on the correct element. Elements can be nested where it's easier to navigate to it manually in the HTML. For example, you may have clicked an svg element, but actually needed the button or div it was inside of.

5. Define a CSS selector or XPath that matches everything you want, you might want to make it more strict than necessary to avoid potential false-positives.

For example, suppose I wanted to dismiss all topic suggestions on Twitter because they're annoying. Here is how a clickable element to dismiss a topic looks like.

Twitter topic suggestions, with an X button to mark it as "Not interested".

<div aria-label="Dismiss" role="button" tabindex="0" class="...">
  <!-- The parent div element has the click listener. -->
  <div class="...">
    <svg viewBox="0 0 24 24" aria-hidden="true" class="...">
      <!-- The actual X icon. -->
    </svg>
  </div>
</div>

An appropriate selector is div[aria-label=Dismiss][role=button].

We need to use the querySelectorAll function from The Global Document Object, then call the [click](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click) method to simulate a click.

A bookmarklet can be implemented to select every dismiss button, and trigger a click event to all of them with a 250ms interval.

javascript: (() => {
  const selector = 'div[aria-label=Dismiss][role=button]';
  const topics = document.querySelectorAll(selector);

  for (let i = 0; i < topics.length; i++) {
    let topic = topics[i];
    setTimeout(() => topic.click(), i * 250);
  }
})();

How to Redistribute Bookmarklets

To "install" a bookmarklet, users create a bookmark on their browser and copy and paste the code to it.

This can be inconvenient, so it's common to link bookmarklets when sharing. This is as simple as putting it in the href attribute of your link anchor.

<a href="javascript: (() => {   alert('Hello, World!'); })();">
  Hello, World!
</a>

Now users can right-click and "Bookmark Link", or drag it to the bookmarks bar for easy access.

Clicking the link on the web page will execute the script immediately. Ensure it's not going to obstruct what a user is trying to achieve on your site if they accidentally click it.

For example, the following link will display an alert with "Hello, World!".

User Content and Content Security Policy Bypass

If you run a service that allows user-generated content to contain custom HTML, it's important to sanitize link anchors (a).

The bookmarklet is executing like code in the developer tools console, and bypasses the configured Content Security Policy (CSP).

The "Hello, World!" link can just as easily send data to another server, including the input of form fields, or cookies.

As a service provider, it's important to be wary that users can exploit this to share malicious code on your platform. If their link anchor is running on a page under your domain, it can access sensitive information on the page and [document.cookies](https://developer.mozilla.org/en-US/docs/web/api/document/cookie).

You can try it yourself in a sandbox environment:

<a href="javascript: (() => {   alert(document.cookie); })();">
  EvilScript
</a>

Only Run Code You Trust

As a user, it's important to note that any code can be malicious, only click or add bookmarklets where at least one of the following are true:

• It came from a reputable source.

• You know JavaScript, and you reviewed what it does.

• Someone you trust knows JavaScript, and they reviewed it for you.

Privacy and Security

Bookmarklets can be handy, but we also have web extensions and user scripts too. What makes them different?

Web extensions are incredibly user-friendly and flexible. Bookmarklets can't block network requests, update content as the page changes, or manage tabs.

However, there're some benefits to using bookmarklets over anything else, namely for privacy and security.

An extension that modifies the font on all pages must get permission to access all data on all web pages. On Firefox and Chrome, this includes all input and password fields. (More Info: Mozilla, Google)

In contrast, a bookmarklet only has access to the page for the very moment it's executing, and only when manually triggered by the user.

This results in less risk of malware, a rogue employee can't push a malicious update, and data won't silently get sent to other servers.

The Chrome Web Store has previously had several malicious extensions which had to be taken down. Some of which had millions of installations before being removed. (More Info)

Example Bookmarklets

Here's a list of bookmarklet ideas, along with the code that implements it. You can copy and paste them into new bookmarks to try them out.

javascript: (() => {
  const documentHTML = document.documentElement.outerHTML;
  const matches = documentHTML.matchAll(/[\w.+=~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/g);
  const flatMatches = Array.from(matches).map((item) => item[0]);
  const uniqueMatches = Array.from(new Set(flatMatches));

  if (uniqueMatches.length > 0) {
    const result = uniqueMatches.join('\n');
    alert(result);
  } else {
    alert('No emails found!');
  }
})();

javascript: (() => {
  const xpath = "//a [contains(., 'Jobs') or contains(., 'Careers') or contains(., 'Hiring')]";
  const elements = document.evaluate(xpath, document);
  const element = elements.iterateNext();

  if (element) {
    element.click();
  } else {
    alert('No links for jobs found!');
  }
})();

javascript: (() => {
  const allElements = document.querySelectorAll('*');

  for (let element of allElements) {
    element.style.fontFamily = 'Comic Sans MS';
  }
})();

javascript: (() => {
  const destination = "https://www.freecodecamp.org/";
  const alternate = "https://tenor.com/Y6jj.gif";

  const date = new Date();
  const hours = date.getHours();

  if (hours < 3 || hours >= 6) {
    window.open(destination);
  } else {
    window.open(alternate);
  }
})();

Thank you for reading! Now go forth and create your own bookmarklets.

Jack Schofield was a prolific journalist who wrote for The Guardian and covered technology for nearly four decades. During that time, he wrote three particular articles called "Schofield's Laws of Computing".

Jack didn't create these principles all at once, but they were rather an accumulation of "discoveries" that he had encountered throughout his career.

Individually, the principles aren't special or revolutionary – in fact, they're pretty basic. However, they're valuable lessons that you should adhere to, especially in an organizational setting.

Schofield's First Law of Computing

"Never put data into a program unless you can see exactly how to get it out." ― Jack Schofield (2003)

Schofield's First Law states that when you depend on an organization, you should verify that it'll be easy to move your data to another organization.

Common reasons you might want to change providers could be:

• A change in the terms of service.

• Another company with a different vision takes it over.

• Price hikes or a shift to a less favorable business model.

• The service shuts down, or software becomes abandonware.

For example:

• LastPass limiting free users to one type of device. (More Info)

• ArtStation getting acquired by Epic Games. (More Info)

• Adobe shifting to a software as a service business model. (More Info)

• Megaupload shutdown and seized by governing bodies. (More Info)

Data portability is an essential feature for software and services. It's the primary solution when you need to avoid vendor lock-ins or must budget for costly migration processes.

What are Vendor Lock-ins?

Vendor lock-ins are when companies tie users down to their software. They can put practices in place to add friction when migrating to competing software.

The aim is to compel users to stay, even if there are better options for them, by making steps to leave inconvenient, time-consuming, or tedious.

When you're choosing software or services to use, you'll want to keep an eye out for such practices. This can come in a variety of forms:

• Not allowing you to export personal data or user-generated content.

• Not allowing files to be exported to open or human-readable formats.

• Making software incompatible with existing open-standards.

The Right to Data Portability

The General Data Protection Regulation (GDPR) has helped with this. It's led companies like Discord, Instagram, and Twitter to add automated tools for users to export their content.

Article 20 of GDPR is the "right to data portability", which is the right to have the means to move your personal data from a data controller to a standard format that you can give to another data controller.

Despite the fact that GDPR is specific to personal data, this has promoted data portability in general, including user-generated content. While it's debatable how easy it is to enforce GDPR outside the EU, these tools are usually accessible to members of other jurisdictions, too.

If you're representing an organization or a freelancer and you're in charge of picking software, keep this in mind!

Schofield's Second Law of Computing

"Data doesn't really exist unless you have at least two copies of it."
― Jack Schofield (2008)

Backing up data is a chore that most individuals procrastinate until it's too late. But fortunately organizations have proven to be a bit more mature with this.

Schofield's Second Law of Computing suggests that unless you have at least 2 copies of your data, you should treat it like it doesn't exist.

Ideally, you should keep both copies in different physical locations – and by that, I don't mean different drives, but ideally different countries or continents.

For data in your possession, such as your desktop, laptop, or flash drives:

• Devices or your whole inventory could get lost or stolen.

• If you have full-disk encryption, you could forget your password.

• Your hardware may fail on you, resulting in data loss.

• Disasters such as fires or floods may destroy everything on-premise.

It could even be due to user-error. No matter how technical you are, you could "Overwrite" instead of "Save As", flash an operating system to the wrong drive, or a developer might forcefully push to the wrong branch after amending a commit.

You should always be prepared for the scenario that may lead to loss of data. While not everyone has disposable income lying around, physical goods are generally easy to replace with enough money, potentially years worth of accumulated data is irrecoverable.

Data in the Cloud

Schofield's Second Law doesn't only target data in your possession, but also data you keep in the cloud. For example, you should store your cloud storage, emails, and media content in a second location as well.

This is especially important when using services that don't take responsibility for backing up your data, or close your account after a period of inactivity. This is common with companies that provide truly free services, free of cost and free of tracking, like Nextcloud providers or Tutanota.

Don't assume your data is safe just because it's in the cloud. A recent example of this is the fire that started in one of OVH's datacenters resulting in the loss of data. OVH Public Cloud provides unmanaged servers, which means the user is responsible for managing and backing up their servers. (More Info)

There is also the risk of vulnerabilities that allow unauthorized access to your account.

For example, last year hackers obtained access to Twitter's administrative tools which granted them access to many high-profile accounts. Using such tools, it would've been just as easy to delete previous posts and media. (More Info)

Sync Your Data

You can solve some of these problems by using solutions that sync your data between your computer and a server. This offers protection from any hardware related failures, or physical damage.

Data that would have detrimental consequences if lost should be encrypted and synced to cloud storage. Some software like Bitwarden or Thunderbird natively rely on syncing as well, so even if the server were to disappear, you'll still have a recent copy on your device.

However, syncing doesn't solve all problems – it's ideal to have an isolated backup as well. Syncing will automatically send all changes, including user-errors, or even changes made by malware or ransomware. Having regular cold storage backups would be handy for cases like this.

Schofield's Third Law of Computing

"The easier it is for you to access your data, the easier it is for someone else to access your data." ― Jack Schofield (2008)

Protecting data has always involved finding a balance between security and convenience. We want data to be easy to access for us, but hard to access for others.

This conflict has led to issues regarding data negligence.

When you put data on the cloud, you automatically make it easier for others to access. Your cloud provider could have vulnerabilities, someone might guess your password, or an employee could go rouge and compromise or sell your data.

You might be able to blame someone or get compensation for the incident, but your data and potentially your clients' data is still out there, and you'd be the one who ultimately allowed it to happen.

Increasing security tends to be inconvenient, but these are the inconveniences that others bet on when looking to compromise accounts:

• Brute-force Attacks – Bet on short passwords, as it's quicker to type.

• Credential Stuffing – Bet on password reuse, as it's more convenient than managing multiple.

• Dictionary Attacks – Bet on logical passwords, as it's easier to recall.

Furthermore, these attacks rely on users not enabling 2FA, and that the data on the other side isn't obfuscated or encrypted.

You or your organization should be using a password manager, enforcing 2FA on all systems, and where possible encrypting data before it's sent to third-party servers.

Even better, remove data that is no longer relevant. It's always better to erase data than to worry about protecting it.

This might include chat histories, emails, or files that contain confidential information, social media passwords, and client or employee data. Especially if they're months or years old and no longer relevant. If you don't need them, nobody else does either.

Conclusion

These principles were established over 10 years ago, and apply more today than ever before.

Technology and open-standards have evolved, so they are easier to adhere to. But with the growth of cloud infrastructure, we're increasingly trusting third-parties with our data. In many cases, we may be too comfortable with where it's being left and who has access to it.

Unfortunately, Jack Schofield died in March 2020, but he supported many in the tech community. I hope through sharing his experiences, others may continue to learn from them.

Meta

This article was discussed on The Hedge, a technology and business podcast led by network engineers. I recommend giving it a listen if you enjoyed this, as their input and real-world experience add a lot of value to the topic.

Embedded content

TL;DR: If you don't care for the details, and just need to get commit signing setup quickly, skip to How to Sign Commits.

Signing, or code signing specifically, is the process of using cryptography to digitally add a signature to data. The receiver of the data can verify that the signature is authentic, and therefore must've come from the signatory.

It's like physical signatures, but digital and more reliable.

Git's Default Behavior

First let's note that all commits have the following properties:

• Author – The contributor who did the work, this is informational.

• Committer – The user who committed the change.

In most cases, these will be the same, but they can be overridden when committing, so it's important to note the difference.

When you first installed Git, you probably had to configure a few settings, namely user.email and user.name. This may've been handled for you depending on your Git client.

In the command line, this requires executing the following commands:

git config --global user.email "seth@example.org"
git config --global user.name "Seth Falco"

Git commits are trust-based, so it'll assume you put in your real email and name. You can then commit and push to remote providers like GitHub and GitLab with the details provided.

What happens when someone else uses your email address, and then pushes changes remotely?

git config --global user.email "seth@example.org"
git commit -m "Jen did this."
git push origin main

The result looks normal, but I'm not the one who did this commit. Jen committed to her repository, authenticating with her GitHub credentials, but it's showing my name and linking to my profile. The default behavior sets both the author and committer to the details in git config.

On GitHub, the commit is already indistinguishable from my own. If a user set both user.email and user.name to mine, which they can get from doing git log on any of my commits, then even locally it'd look the same.

This means that anyone can set their user.email to your email address, and it'd look like you made the commit.

Why Does Git Do This?

You might wonder why this is possible. You authenticate to your account when you push to the repository after all, shouldn't it use that email? Doesn't this seem a bit flawed?

When you authenticate to push to remote repositories, you're authenticating to do just that– push changes. The commits don't require authentication regardless of who authored or committed them.

If commits required authentication by default, it'd be impossible to migrate or mirror projects to other platforms. The commit history will include former employees, dead users, inactive accounts, or email addresses that aren't on other platforms.

The only solution would be to rewrite the history to remove that they ever worked on the project, which isn't ideal.

Another scenario would be if I forked a project on GitHub, but want to maintain my fork on GitLab. My first push would include all commits from previous committers. For a large project, it's not feasible to authenticate every committer.

The author of a commit signifies attribution for who did the work, not proof of who did the work.

In fact, you can always override the author when committing just for this purpose. Using the --author argument, you can specify a different name and email to your global settings, even details that aren't associated with an account where the repository is hosted.

On public repositories, be mindful when committing on behalf of someone without an account, though. Names and email addresses become public information once pushed, and are accessible to anyone using git log!

git commit -m "Jen didn't even author this." --author "Jen <jen@example.org>"
git push origin main

This has different behavior than using another email in git config. This makes the author what we specified in --author, but the committer what we specified in git config.

Translation platforms like Weblate rely on this feature to ensure translators still get attribution, even though an automated user commits and opens the pull requests, not the translator.

How to Prove You're the Committer in Git

GNU Privacy Guard (GnuPG or GPG) allows you to create cryptographic asymmetric key pairs that can be used for the encryption and signing of data. They consist of a public and private key.

You can share the public-key with anyone – you may upload this to your GitHub and GitLab accounts, or put it on the internet for anyone to access.

The private-key, as the name suggests, is private. You should treat this like a password, and under no circumstances should you ever share your private-key with anyone.

We'll be generating a key pair, and then uploading the public key to GitHub and GitLab. Using your private-key, you can sign your commits, and servers with the public key will use it to confirm it was really you.

How to Sign Commits in Git

I'll only cover how to do this in the terminal, since this provides a uniform experience across operating systems. If you're uncomfortable with the terminal, you pretty much just have to copy the commands.

Prerequisites

The only prerequisite, other than Git itself, is to install the GPG command-line utility.

You can verify if it's installed with gpg --version.

Windows

Git BASH

If you have Git BASH installed (optionally bundled with Git for Windows), then you already have access to GPG. Just launch an instance of Git BASH, and it'll be available immediately.

Gpg4win

If you don't have Git BASH, then there's no need to install it. You can install Gpg4win, which will provide GPG globally, so you can just use it from PowerShell.

When installing Gpg4win, you can untick all the additional components, as we won't be needing them since we plan to use the terminal.

If you already had PowerShell open, you'll have to restart it before you can use GPG.

Linux

Your distribution most likely already includes GPG. If not, then you can install it through your package manager.

apt (Debian / Ubuntu)

sudo apt install gnupg

pacman (Arch / Manjaro)

sudo pacman -S gnupg

How to Generate GPG Keys

If you already have a GPG key, you can skip this step. It's perfectly fine to reuse GPG keys. Just read below and verify that your key is compatible with Git and GitHub.

You can get a list of your GPG keys with:

gpg --list-keys

First we need to generate an RSA key pair. The following will start an interactive script that will ask questions so we can provide the necessary information.

gpg --full-gen-key

1. For what kind of key you want, input 1 which is "RSA and RSA".

2. For key size, input 4096. This is the minimum size for GitHub and GitLab, and the maximum size GPG will let us generate.

3. For how long the key should last, use whatever suits you. The default is 0, which means to never expire.

4. Verify the information is correct by inputting y.

GPG will ask for personal information which is stored in your key.

1. Your name, this can be anything at least 5 characters in length.

2. Your email address, use an email you plan to commit with. You must've verified this email on the remote account you'll push with.

3. A comment, you can type whatever, or press enter to leave it blank.

4. Verify the information is correct by inputting o.

root@799d1cc3c99c:/# gpg --full-gen-key
gpg (GnuPG) 2.2.19; Copyright (C) 2019 Free Software Foundation, Inc.
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.

Please select what kind of key you want:
   (1) RSA and RSA (default)
   (2) DSA and Elgamal
   (3) DSA (sign only)
   (4) RSA (sign only)
  (14) Existing key from card
Your selection? 1
RSA keys may be between 1024 and 4096 bits long.
What keysize do you want? (3072) 4096
Requested keysize is 4096 bits
Please specify how long the key should be valid.
         0 = key does not expire
      <n>  = key expires in n days
      <n>w = key expires in n weeks
      <n>m = key expires in n months
      <n>y = key expires in n years
Key is valid for? (0) 0
Key does not expire at all
Is this correct? (y/N) y

GnuPG needs to construct a user ID to identify your key.

Real name: Seth Falco
Email address: seth@example.org
Comment: 
You selected this USER-ID:
    "Seth Falco <seth@example.org>"

Change (N)ame, (C)omment, (E)mail or (O)kay/(Q)uit? o

GPG will ask for a passphrase to protect the key. You can set this to anything, or leave it blank for no passphrase at all. Of course, it's ideal to use a good passphrase, rely on your password manager if you use one.

The password prompt is environment-dependent, so this step will look different for different users, but what it's asking is effectively the same.

It'll start generating the key, which requires a lot of randomly generated data. Performing actions on your PC will help make it more random, so I'd recommend moving your mouse around while the key is generating.

How to Export Your Keys

Next you need to get the identifier of the newly generated key so we can refer to it when exporting your key and configuring Git.

GPG keys can be referred to in multiple ways. It's a good a habit to use and share the full fingerprint, to minimize the risk of ambiguity when users request it from a key server. Long (64-bit) IDs are fine for now, but short (32-bit) IDs are best avoided, as it's easy to produce a collision. (More Info)

We'll be using the full GPG fingerprint, which we can get with the command:

gpg --list-keys

You'll get output like the following:

pub   rsa4096 2021-05-23 [SC]
      C6656513A0F9B7B7F4E76389EF39187D04795745
uid           [ultimate] Seth Falco <seth@example.org>
sub   rsa4096 2021-05-23 [E]

For me, it's C6656513A0F9B7B7F4E76389EF39187D04795745. Make sure to use your fingerprint instead of mine when you do the rest of the commands.

You need to export the public-key so you can upload it to GitHub. We use the --armor argument to indicate that we want to export it in an ASCII armored format instead of binary. This writes the public-key to a file named gpg-key.pub.

gpg --export --armor C6656513A0F9B7B7F4E76389EF39187D04795745 > ./gpg-key.pub

How to Back Up Your Keys

It's worth having a remote backup of your GPG keys because you'll likely use them across services. If you lose it, it'd be a pain to have to update everything.

You can export your private-key in the same way we exported the public-key, this writes the private-key to a file named gpg-key.asc:

gpg --export-secret-keys --armor C6656513A0F9B7B7F4E76389EF39187D04795745 > ./gpg-key.asc

You can now back up both your public and private keys, but remember that you should never send the non-encrypted copy of the private-key to the cloud. Always use end-to-end encrypted cloud storage, or a password manager like Bitwarden to back up sensitive data.

How to Enable Commit Signing

Then to enable signing all commits, set the commit.gpgsign setting using git config. This will make git commit sign commits by default.

git config --global commit.gpgsign true

If you have multiple GPG keys, or just for future reference, you may want to set user.signingkey as well. This will indicate specifically which key Git should use for signing to avoid ambiguity.

git config --global user.signingkey C6656513A0F9B7B7F4E76389EF39187D04795745

How to Use your Key

Finally, you have to upload your public key. You can use the same GPG key for both GitHub and GitLab, or any other Git provider.

We'll need the exported public-key for the following steps, so open the gpg-key.pub file in any editor like Visual Studio Code, and copy the contents to your clipboard.

On GitHub, you can go to your settings, under "SSH and GPG keys", then click "New GPG key". Paste the contents of gpg-key.pub into the Key field on GitHub, and click "Add GPG key".

On GitLab, the steps are almost identical, just go to your preferences, then "GPG Keys". Paste the contents of gpg-key.pub into the Key field on GitLab, and click "Add key".

Now you're able to make signed commits to your repositories! The next commit will prompt for your GPG key password, since it's the first time using it. Subsequent commits will be seamless.

How to Verify Commits in Git

GitHub and GitLab will show a "Verified" badge next to your new commits.

The final thing to remember is that commit signing will only verify the committer, not the author. That means when you see a verified commit, the author has nothing to do with the verified status.

Vigilant Mode

As a bonus, on GitHub specifically there is a setting called vigilant mode.

You can optionally enable this if you want all unsigned commits to explicitly say "Unverified". This can be enabled in your settings, under "SSH and GPG keys", then tick "Flag unsigned commits as unverified".

Now the commit that Jen did with my email address shows "Unverified" next to it, to indicate that it wasn't signed with a key associated with my account.