If you've ever signed in to a site like freeCodeCamp with your Google or GitHub account, there's a good chance that you're already using a JWT.

In this article, we'll go over how JWTs are used, then dig into what JWTs are, and how they can securely transmit data through the signature and validation process.

How JWTs Are Used

JWTs are usually used to manage user sessions on a website. While they're an important part of the token based authentication process, JWTs themselves are used for authorization, not authentication.

Here's a good overview of how token based authentication works:

Source

When you sign in to a site with a username and password, or with a third party method like Google, you're proving who you are with those sensitive details or access. This process is called authentication.

Once you're signed in, the site's server sends back a JWT that allows you access to things like your settings page, shopping cart, and so on. This process is called authorization.

You send your JWT to the server with each request. When the server receives it, it generates a signature using some data from your JWT, verifies it, and if your JWT is valid, it sends back a response.

What are JWTs?

At their core, JWTs are just bits of encoded JSON data with a cryptographic signature at the end.

Here's an example of a JWT:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IlF1aW5jeSBMYXJzb24iLCJpYXQiOjE1MTYyMzkwMjJ9.WcPGXClpKD7Bc1C0CCDA1060E2GGlTfamrd8-W0ghBE

Each JWT is made up of three segments, each separated by a dot (.). These three segments are the header, payload, and signature.

If you copy and paste that JWT into the JWT.io Debugger, you can see the decoded versions of those three segments.

Header Segment

The header segment of a JWT contains information about the algorithm and token type.

Here's the header segment of the example JWT token above:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9

The header segment is base 64 URL encoded, and decodes to the following JSON object:

{
  "alg": "HS256",
  "typ": "JWT"
}

"alg" is the type of algorithm used in the last segment, the cryptographic signature. In this case, the HMAC SHA256 algorithm is used, though RSA is also common.

"typ" is the type of token the segmented string is, which in this case is JWT.

Payload Segment

The payload segment of a JWT contains registered claims or identifying information, usually for a user.

Here's the payload segment of the example JWT token above:

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IlF1aW5jeSBMYXJzb24iLCJpYXQiOjE1MTYyMzkwMjJ9

The payload segment is also base 64 URL encoded, and decodes to the following JSON object:

{
  "sub": "1234567890",
  "name": "Quincy Larson",
  "iat": 1516239022
}

Since JWTs are usually used as part of the authentication method for sites, the payload segment usually contains identifying information for a user. These claims fall into three categories: registered, public, and private.

Registered claims are a set of predefined claims defined here that are optional, but recommended when using JWTs.

Public claims are optional claims, usually from the IANA JSON Web Token Registry.

Private claims are optional, and are any claims that don't fall under the registered or public claims categories.

"sub" is the subject of the JWT, and is usually a unique identifying string for a user in an application, usually an email address, username, or id. Subjects are registered claims.

"name" is the full name of the user who was issued the JWT, and is a public claim.

"iat" is the "issued at" date for the token, and is a registered claim.

Signature Segment

The signature segment of a JWT contains the cryptographic signature of the token.

Here's the signature segment of the example JWT token above:

WcPGXClpKD7Bc1C0CCDA1060E2GGlTfamrd8-W0ghBE

The signature segment is made up of the base 64 URL encoded header and payload segments, a secret (usually the contents of a key in a signing algorithm), and hashed using the algorithm defined in the header segment:

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  your-256-bit-secret
)

The signature helps ensure that the data in the header and payload segments haven't been tampered with, and the JWT can be trusted.

However, it's important to note that the cryptographic signature at the end of the JWT is just for validation. It doesn't encrypt any data in the header or payload segments of the token. So you should never send sensitive information like a user's password in a JWT – everything in the header and payload can and should be public.

How to Validate JWT Signatures

The exact method for validating a signature depends on the algorithm defined in the header segment and used to generate the signature itself.

For the HS256 signing algorithm, a private key is shared between two entities, say your application's server and an authentication server. This private key is used both to generate signatures for outgoing JWTs, and to validate signatures from incoming JWTs.

When your authentication server receives an incoming JWT, it uses the incoming JWT's header and payload segments and the shared private key to generate a signature.

If the signature matches, then your application knows that the incoming JWT can be trusted.

Another popular signing algorithm is RS256, which uses public and private key pairs to validate signatures. This is similar to the system used for SSH and SSL.

If you'd like to read more about how RS256 works, check out this article:

Other Helpful Tutorials

If you'd like to learn more about JWTs and how to use them in applications, check out these tutorials:

Thanks for Reading

If you found this article on JWTs helpful, consider sharing it so more people can benefit from it.

Also, feel free to reach out on Twitter and let me know what you think.

They're common commands for Linux admins and people doing DevOps, but are handy to know even if you don't use the command line often.

In this article, I'll go into what both of these commands do, how to use them, and some frequently asked questions.

What Are the Differences Between sudo apt-get update and sudo apt-get upgrade?

The main difference is that sudo apt-get update fetches the latest version of the package list from your distro's software repository, and any third-party repositories you may have configured. In other words, it'll figure out what the latest version of each package and dependency is, but will not actually download or install any of those updates.

The sudo apt-get upgrade command downloads and installs the updates for each outdated package and dependency on your system. But just running sudo apt-get upgrade will not automatically upgrade the outdated packages – you'll still have a chance to review the changes and confirm that you want to perform the upgrades.

How to Use the sudo apt-get update Command

In your Debian-based Linux distro (Debian, Ubuntu, Linux Mint, Kali Linux, Raspberry Pi OS, and so on), open a terminal window.

Depending on your distro, the terminal might go by different names depending on how you open it. For example, in Ubuntu and Linux Mint, the default terminal is Gnome Terminal, but may be listed under Terminal in the application menu.

In the terminal, enter sudo apt-get update in the command line, enter in your admin password, and press the Enter key.

If there are updates, you'll see an output similar to this:

kris@pihole:~ $ sudo apt-get update
Hit:1 https://ftp.harukasan.org/raspbian/raspbian bullseye InRelease
Get:2 https://download.docker.com/linux/raspbian bullseye InRelease [26.7 kB]
Get:3 http://archive.raspberrypi.org/debian bullseye InRelease [23.7 kB]       
Get:4 http://packages.azlux.fr/debian buster InRelease [3,989 B]               
Get:5 http://archive.raspberrypi.org/debian bullseye/main armhf Packages [282 kB]
Get:6 http://packages.azlux.fr/debian buster/main armhf Packages [3,418 B]
Fetched 340 kB in 4s (94.8 kB/s)     
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
3 packages can be upgraded. Run 'apt list --upgradable' to see them.

If you want to see which packages can be upgraded, run apt list --upgradable:

kris@pihole:~ $ apt list --upgradable
Listing... Done
libcamera0/stable 0~git20220426+18e68a9b-1 armhf [upgradable from: 0~git20220303+e68e0f1e-1]
raspi-config/stable 20220425 all [upgradable from: 20220419]
rpi-eeprom/stable 13.13-1 armhf [upgradable from: 13.12-1]

But if there are no newer versions of packages or dependencies in your distro's software repository, you'll see an output like this:

kris@pihole:~ $ sudo apt-get update
Get:1 https://download.docker.com/linux/raspbian bullseye InRelease [26.7 kB]
Hit:2 https://ftp.harukasan.org/raspbian/raspbian bullseye InRelease           
Hit:3 http://packages.azlux.fr/debian buster InRelease                         
Hit:4 http://archive.raspberrypi.org/debian bullseye InRelease
Fetched 26.7 kB in 3s (8,789 B/s)
Reading package lists... Done

Notice that there is no mention of packages that can be upgraded, and no note about running apt list --upgradable.

But this does not necessarily mean there's no outdated software on your system, just that you already got the latest version of the package list. You may have run sudo apt-get update multiple times.

You can always run apt list --upgradable again to see if anything can be upgraded.

Or you can use the more modern sudo apt update command instead. This command will always show you the number of packages that can be upgraded, or a note saying everything is up to date.

For more information about the differences between apt and apt-get, check out this section below.

How to Use the sudo apt-get upgrade Command

After running the sudo apt-get update command, in the same terminal window, type in sudo apt-get upgrade, enter your password if necessary, and hit enter.

Then, you'll see an output similar to this:

kris@pihole:~ $ sudo apt-get upgrade
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
Calculating upgrade... Done
The following packages will be upgraded:
  libcamera0 raspi-config rpi-eeprom
3 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.
Need to get 2,616 kB of archives.
After this operation, 1,596 kB of additional disk space will be used.
Do you want to continue? [Y/n]

Towards the bottom of the output, you'll see the packages that will be upgraded:

The following packages will be upgraded:
  libcamera0 raspi-config rpi-eeprom
3 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.

The amount of data that needs to be fetched, and the amount of storage space the upgraded packages will use once installed:

Need to get 2,616 kB of archives.
After this operation, 1,596 kB of additional disk space will be used.

And finally, you'll see a prompt asking if you want to continue with the upgrade:

Do you want to continue? [Y/n]

You can enter y, Y, or yes to continue with the upgrade, or n, N, or no to exit out of the upgrade command.

If you choose to exit out, you'll see an output like this:

kris@pihole:~ $ sudo apt-get upgrade
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
Calculating upgrade... Done
The following packages will be upgraded:
  libcamera0 raspi-config rpi-eeprom
3 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.
Need to get 2,616 kB of archives.
After this operation, 1,596 kB of additional disk space will be used.
Do you want to continue? [Y/n] n
Abort.

If you choose to continue with the upgrade, you'll see a long output like this:

kris@pihole:~ $ sudo apt-get upgrade
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
Calculating upgrade... Done
The following packages will be upgraded:
  libcamera0 raspi-config rpi-eeprom
3 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.
Need to get 2,616 kB of archives.
After this operation, 1,596 kB of additional disk space will be used.
Do you want to continue? [Y/n] y
Get:1 http://archive.raspberrypi.org/debian bullseye/main armhf libcamera0 armhf 0~git20220426+18e68a9b-1 [548 kB]
Get:2 http://archive.raspberrypi.org/debian bullseye/main armhf raspi-config all 20220425 [30.3 kB]
Get:3 http://archive.raspberrypi.org/debian bullseye/main armhf rpi-eeprom armhf 13.13-1 [2,037 kB]
Fetched 2,616 kB in 3s (1,019 kB/s)   
Reading changelogs... Done
(Reading database ... 43496 files and directories currently installed.)
Preparing to unpack .../libcamera0_0~git20220426+18e68a9b-1_armhf.deb ...
Unpacking libcamera0:armhf (0~git20220426+18e68a9b-1) over (0~git20220303+e68e0f1e-1) ...
Preparing to unpack .../raspi-config_20220425_all.deb ...
Unpacking raspi-config (20220425) over (20220419) ...
Preparing to unpack .../rpi-eeprom_13.13-1_armhf.deb ...
Unpacking rpi-eeprom (13.13-1) over (13.12-1) ...
Setting up rpi-eeprom (13.13-1) ...
Setting up libcamera0:armhf (0~git20220426+18e68a9b-1) ...
Setting up raspi-config (20220425) ...
Processing triggers for man-db (2.9.4-2) ...
Processing triggers for libc-bin (2.31-13+rpt2+rpi1+deb11u2) ...

And once that's complete, all of the outdated packages and dependencies will be updated.

One important thing to remember about the sudo apt-get upgrade command is that it only upgrades what it can without removing anything.

For example, if an upgrade requires a new dependency, the upgrade command will download and install it, but it will not remove the old dependency. Removing old dependencies requires a different command. You'll see this a lot when you upgrade to a new kernel version.

If you see a message similar to this after upgrading:

The following packages were automatically installed and are no longer required:
  g++-8 gir1.2-mutter-4 libapache2-mod-php7.2 libcrystalhd3
Use 'sudo apt autoremove' to remove them.

You can follow the suggestion and use sudo apt autoremove to remove those unnecessary packages.

How to Use Special Options With the sudo apt-get upgrade Command

There are a number of special options or parameters that you can use with the sudo apt-get upgrade command, but two stand out: --dry-run and --yes.

How to Use the --dry-run Option:

The --dry-run (alternatively, -s or --simulate) option simulates what would happen during the upgrade process, but doesn't actually change anything on your system:

kris@pihole:~ $ sudo apt-get upgrade --dry-run
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
Calculating upgrade... Done
The following packages will be upgraded:
  libcamera0 raspi-config rpi-eeprom
3 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.
Inst libcamera0 [0~git20220303+e68e0f1e-1] (0~git20220426+18e68a9b-1 Raspberry Pi Foundation:stable [armhf])
Inst raspi-config [20220331] (20220425 Raspberry Pi Foundation:stable [all])
Inst rpi-eeprom [13.12-1] (13.13-1 Raspberry Pi Foundation:stable [armhf])
Conf libcamera0 (0~git20220426+18e68a9b-1 Raspberry Pi Foundation:stable [armhf])
Conf raspi-config (20220425 Raspberry Pi Foundation:stable [all])
Conf rpi-eeprom (13.13-1 Raspberry Pi Foundation:stable [armhf])

Though again, while Debian and Debian-based distros are very stable, this option is useful if you want to make sure there are no conflicts during an upgrade.

How to Use the --yes Option:

The --yes (alternatively, -y or --assume-yes) option automatically answers yes to any prompts if it's safe to do so:

kris@pihole:~ $ sudo apt-get upgrade --yes
Reading package lists... Done
Building dependency tree... Done
Reading state information... Done
Calculating upgrade... Done
The following packages will be upgraded:
  libcamera0 raspi-config rpi-eeprom
3 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.
Need to get 2,616 kB of archives.
After this operation, 1,596 kB of additional disk space will be used.
Get:1 http://archive.raspberrypi.org/debian bullseye/main armhf libcamera0 armhf 0~git20220426+18e68a9b-1 [548 kB]
Get:2 http://archive.raspberrypi.org/debian bullseye/main armhf raspi-config all 20220425 [30.3 kB]
Get:3 http://archive.raspberrypi.org/debian bullseye/main armhf rpi-eeprom armhf 13.13-1 [2,037 kB]
...
Processing triggers for libc-bin (2.31-13+rpt2+rpi1+deb11u2) ...

Note that the Do you want to continue? [Y/n] is skipped above, and all packages are upgraded.

FAQs

What Are sudo and apt-get?

An important thing to note about sudo apt-get update and sudo apt-get upgrade is that both commands are made up of three parts: sudo, apt-get, and update or upgrade.

sudo stands for "superuser do", and allows you to run programs with root or admin privileges.

For example, rebooting a system requires superuser/root-level privileges, so running reboot in the terminal might return errors similar to this:

Failed to set wall message, ignoring: Interactive authentication required.
Failed to reboot system via logind: Interactive authentication required.
Failed to open initctl fifo: Permission denied
Failed to talk to init daemon.

But if you run sudo reboot, then enter your admin password, you will run the reboot command as a superuser, and your system will restart immediately.

apt-get is a command line tool in Debian and Debian-based Linux distros that you use to install and manage packages.

What's the Difference Between apt-get and apt?

apt is a more modern tool for installing and managing applications on Debian and Debian-based distros.

For the most part, apt and apt-get can be used interchangeably – sudo apt update and sudo apt-get update both update the package list on your system.

The main differences you'll notice is that apt is easier to type, its output is generally more useful, and it includes some user-friendly features like a progress bar when installing packages.

While most of the examples in this article use apt-get, I strongly encourage you to use apt instead.

Are sudo apt-get update and sudo apt-get upgrade Safe to Use?

Yes, Debian and Debian-based distros are generally very stable, and the update and upgrade commands are safe to use. This is because major updates for packages / dependencies, and the distros themselves, are only released once or twice a year.

The downside is that, unlike with bleeding edge distros like Arch Linux, if you want to use the most recent version of a package, you might need to put in some extra work. You may need to configure a third-party repository via a PPA, use an alternative packaging system like Snap of Flatpak, or compile the package yourself.

But the stability that comes with slightly older software is worth it, at least in my opinion.

Can You Chain the sudo apt-get update and sudo apt-get upgrade Commands?

You might be thinking, isn't it tedious to run sudo apt-get update, wait for that to complete, then run sudo apt-get upgrade?

While both sudo apt-get update and sudo apt-get upgrade run pretty quickly, sometimes it's easier to execute a string of commands and check back on them a few minutes later.

With the && operator, you can chain multiple commands together like this:

sudo apt-get update && sudo apt-get upgrade

The important thing to remember with the && operator is that the command after the operator only runs if the command before it is successful.

Using the example above, sudo apt-get upgrade only runs if sudo apt-get update succeeds. If there's some sort of error, like a network problem while updating the package list, then sudo apt-get update is skipped.

What Are sudo apt-get dist-upgrade and sudo apt full-upgrade, and Are They Safe to Use?

According to this Stack Overflow thread, these commands do the same thing under the hood – they upgrade outdated packages, and also intelligently remove some packages whenever necessary.

Essentially they're like the combination of the sudo apt-get upgrade and sudo apt autoremove commands.

Running these commands should be safe in most cases.

But a lot of people, myself included, recommend using sudo apt-get update and sudo apt-get upgrade instead. You have more of a chance to review upcoming changes, and since upgrade never removes packages, it's less destructive.

./thanks_for_reading.sh

If you found this breakdown on sudo apt-get update and sudo apt-get upgrade useful, please share it with your friends so more people can benefit from it.

Also, feel free to reach out on Twitter and let me know what you think.

In other words, a rational number can be expressed as p/q, where p and q are both integers and q ≠ 0.

In this article, we'll go over what whole numbers and integers are, cover different types of rational numbers, and learn how to determine if a number is rational or not.

What Are Whole Numbers and Integers?

Before getting into integers, it would be helpful to review what whole numbers are.

Whole Numbers

A whole number is any number from 0 up to infinity: 0, 1, 2, 3, 4, 5, ...

Note that whole numbers are just that – whole. They do not include decimals or fractions, and since they start from 0 and go up, all whole numbers are positive.

So 11, 0, 2014, and 938,840,123 are all whole numbers.

-2, 3.8, and 13/100 are not whole numbers.

Integers

Integers are exactly like whole numbers, but can also include negative numbers: ..., -5, -4, -3, -2, -1, 0, 1, 2, 3, 4, 5, ...

12, -33, and 0 are all integers.

But 1/2, 3.14, and -3.333 are not integers.

Rational Numbers

Again, a rational number is any number that can be expressed as a fraction, where both the numerator and denominator are integers, and the denominator is not 0:

Source: Rational Numbers

Some examples of rational numbers include:

• 3/4 (three quarters)
• 1/2 (one half)
• 5/8 (five eighths)

According to Wikipedia, the term ratio "is derived from rational".

So if a number can be expressed cleanly as a fraction, or a ratio between two integers, then it's a rational number. And if a number can't be expressed this way, then it's an irrational number.

Types of Rational Numbers

Though you learned what rational numbers are earlier in the article, it's helpful to break them up into broad categories, and look at different examples.

There are four types of rational numbers:

• integers
• fractions made up of integers
• terminating decimal numbers
• non-terminating decimal numbers with infinitely repeating patterns

Integers

Any integer can be converted cleanly into a fraction, and is a rational number.

For example, 3 can be expressed as 3/1. And since both the numerator (3) and denominator (1) are integers, and the denominator is not 0, then 3 is a rational number.

This works for negative integers like -2 (or -2/1) and -2006 (or -2006/1).

The number 0 is also a rational number, because it can be converted into a fraction. For example, 0/1, 0/-4, and 0/18,572 are all valid fractions, and meet the definition of a rational number.

Fractions Made up of Integers

Any fraction made up of integers is a rational number, as long as the denominator is not 0.

For example, 1/3, -5/3, and 27/-463 are all rational numbers.

Terminating Decimal Numbers

Any decimal number that terminates, or ends at some point, is a rational number.

For example, take the decimal number 0.5. This can be converted to 1/2, which means its a rational number.

Even longer terminating decimal numbers can be cleanly converted into fractions. For instance, 0.0001 can be expressed as 1/10,000, meaning that it's a rational number.

As long as a decimal number eventually terminates, without rounding or approximation, it's a rational number.

Non-terminating Decimal Numbers With Infinitely Repeating Patterns

Decimal numbers that go on forever with repeating patterns are rational numbers. But this is a bit tricky, because the pattern must repeat infinitely.

For example, take the number 0.33333... Even though this is often simplified as 0.33, the pattern of 3's after the decimal point repeat infinitely. This means that the number can be converted into the fraction 1/3, and is a rational number.

But what about a more complicated number, like 0.142857142857...? Again, the 142857 pattern after the decimal repeats infinitely, and the number can be converted to 1/7, which is rational.

However, there are decimal numbers that go on infinitely that do not contain repeating patterns. These types of numbers are not rational numbers, and are known as irrational numbers.

Irrational Numbers

Any number that does not meet the definition of a rational number is an irrational number.

Numbers like pi (π = 3.1415926536...) and many square roots (√2 = 1.41421356237...) have digits that go past the decimal point infinitely. But they don't contain infinitely repeating patterns, so they're considered irrational.

For example, while pi is often shortened to 3.14159, that's just an approximation. At the time of writing, the world record for the number of digits of pi that have been calculated is 62.8 trillion. And as computing power increases, so will that record.

But as far as anyone can tell, within those endless digits there are no repeating patterns, so pi is considered an irrational number.

Thanks for Reading

If you found this article on rational numbers helpful, consider sharing it so more people can benefit from it.

Also, feel free to reach out on Twitter and let me know what you think.

In this system, symbols are used to represent different numbers, with I representing 1, V representing 5, X representing 10, L representing 50, C representing 100, D representing 500, and M representing 1,000.

Here is a table of the symbols used in the Roman numeral system:

The value of a numeral is determined by its position in relation to other symbols. When a symbol of equal or lesser value is placed after another symbol, their values are added. But when certain symbols of lesser value are placed before another symbol, their values are subtracted.

For example, the numeral VI, or 6, would be read as "five plus one" (5 + 1), and XI, or 11, is "ten plus one" (10 + 1).

But the methods for representing 4 and 9 are special. The Roman numeral IV, or 4, would be read as "one less than 5" (5 - 1). Also, the numeral IX, or 9, would be read as "one less than 10" (10 - 1).

Here is a table of numbers and their Roman numeral equivalent, followed by more in-depth explanations about how to perform the conversions. Just scroll through the table or use Ctrl/Cmd + f to find the value you're looking for:

How to Convert a Number into Roman Numerals

Because Roman numerals are often ordered from largest to smallest, break the number you're converting up into groups of thousands, hundreds, tens, and ones, and perform the conversion on each group.

For example, if you want to convert the number 2,014 (the year freeCodeCamp was founded) into Roman numerals, break the number up as follows:

2,014 = 2,000 + 10 + 4

Then perform the conversion on each group and combine them to get the Roman numeral equivalent:

* 2,000 = MM
* 10 = X
* 4 = IV

2,014 = 2,000 + 10 + 4 = MMXIV

How to Represent Large Numbers in Roman Numerals

You might have noticed that the chart above only goes from 1 to 3,999.

This is due to the special methods for representing 4 and 9 mentioned above. If you check the table above, you'll see that whenever a 4 or 9 appears (including 40, 90, 400, 900) that the Roman numerals are ordered in a particular way so the lesser symbol is subtracted from the one of greater value immediate afterwards.

Since Roman numerals were never fully standardized, you might see the number 4,000 represented as MMMM.

This works, but many see this as invalid since 4 (and 9) have special representations in lower numbers.

Instead, one of the most common ways to represent larger Roman numerals is with a vinculum, or a straight horizontal line above one or more symbols.

If you see a Roman numeral symbol with a horizontal line over it, that just means to multiply that symbol by 1,000.

Here are the Roman numeral symbols with the vinculum applied:

With this extended set of Roman numeral symbols, 4,000 would be represented as the following:

IV

And here's a table of larger numbers and their Roman numeral representations to get you started:

How to Add a Vinculum or Horizontal Line Over Roman Numerals With HTML and CSS

For you devs out there, the easiest way to add a vinculum to Roman numerals online is to wrap the symbols in an element and use a bit of CSS.

For example, to add a horizontal line over the symbols IV in IVIII, you can wrap them in a span element and set its text-decoration property to overline:

<p><span style="text-decoration: overline;">IV</span>III</p>

Which will render the following:

IVIII

Thanks for Reading

If you found this breakdown of Roman numerals helpful, please share it with your friends so more people can benefit from it.

Also, feel free to reach out on Twitter and let me know what you think.

TCP, which stands for Transmission Control Protocol, and UDP, or User Datagram Protocol, are part of the internet protocol suite. TCP and UDP are different methods to send information across the internet.

But even knowing what they stand for, it's hard to know which protocol you should use, or why you would use one over the other.

In this article, we'll go over computer networking basics, the differences between TCP and UDP, when each is used, and more.

Computer Networking Basics

Before diving into how TCP and UDP work, it's helpful to know the basics about how the internet works.

Generally speaking, the internet is a network of connecting devices. Each device, whether it's your smartphone or a server, communicate through the internet protocol suite.

The internet protocol suite is a collection of different protocols, or methods, for devices to communicate with each other. Both TCP and UDP are major protocols within the internet protocol suite:

Source

Each device that's connected to the internet has a unique IP address. And whenever two devices communicate over the internet, they're likely using either TCP or UDP to do so.

Here's a brief comparison between the two:

Source

For an even higher-level overview of how the internet works, check out this five minute video:

What is TCP?

TCP, or Transmission Control Protocol, is the most common networking protocol online. TCP is extremely reliable, and is used for everything from surfing the web (HTTP), sending emails (SMTP), and transferring files (FTP).

TCP is used in situations where it's necessary that all data being sent by one device is received by another completely intact.

For example, when you visit a website, TCP is used to guarantee that everything from the text, images, and code needed to render the page arrives. Without TCP, images or text could be missing, or arrive in the incorrect order, breaking the page.

TCP is a connection-oriented protocol, meaning that it establishes a connection between two devices before transferring data, and maintains that connection throughout the transfer process.

To establish a connection between two devices, TCP uses a method called a three-way handshake:

Source

For example, to read this article on your device, your device first sent a message to the freeCodeCamp News server called an SYN (Synchronize Sequence Number).

Then the freeCodeCamp News server sends back an acknowledgement message called a SYN-ACK.

When your device receives the SYN-ACK from the server, it sends an ACK acknowledgment message back, which establishes the connection.

Once a TCP connection is established between two devices, the protocol guarantees that all data is transmitted.

Going back to the example of your device and freeCodeCamp News, once the three-way handshake is complete, the News server can start sending all the data your device's web browser needs to render this article.

All devices break up data into small packets before sending them over the internet. Those packets then need to be reassembled on the other end.

So when the freeCodeCamp News server sends the HTML, CSS, images, and other code for this article, it breaks everything into small packets of data before sending them to your device. Your device then reassembles those packets into the files and images it needs to render this article.

TCP ensures that these packets all arrive to your device. If any packets are lost along the way, TCP makes it easy for your device to let the server know it's missing data, and for the server to resend those packets.

Once your device receives all the data it needs to render the article, TCP automatically terminates the connection between the two devices with a method similar to the three-way handshake, this time using FIN and ACK packets.

What is UDP?

UDP, or User Datagram Protocol, is another one of the major protocols that make up the internet protocol suite. UDP is less reliable than TCP, but is much simpler.

UDP is used for situations where some data loss is acceptable, like live video/audio, or where speed is a critical factor like online gaming.

While UDP is similar to TCP in that it's used to send and receive data online, there are a couple of key differences.

First, UDP is a connectionless protocol, meaning that it does not establish a connection beforehand like TCP does with its three-way handshake.

Next, UDP doesn't guarantee that all data is successfully transferred. With UDP, data is sent to any device that happens to be listening, but it doesn't care if some of it is lost along the way. This is one of the reasons why UDP is also known as the "fire-and-forget" protocol.

A good way to think about these differences is that TCP is like a conversation between two people. Person A asks person B to talk. Person B says sure, that's fine. Person A agrees and they both start speaking.

UDP is more like a protester outside with a megaphone. Everyone who is paying attention to the protester should hear most of what they're saying. But there's no guarantee that everyone in the area will hear what the protester is saying, or that they're even listening.

UDP vs TCP — Source

Which is Faster – TCP or UDP?

In general, UDP is the faster protocol.

UDP is much simpler, and doesn't try to establish a connection between devices before sending data, or verify that all the data even arrived. It simply sends out data to any device that requests it, and keeps doing that until the other device disconnects or there is no more data left to send.

Think drinking from a hose rather than sipping from a bottle. You'll quench your thirst either way, but will probably end up with a damp shirt using the former method.

_Not a hose, but still pretty accurate. Also imagine that the TCP bottle keeps asking if you received water while you drink from it. Source_

But being faster doesn't mean that UDP is the better protocol overall. It just means that it's better in certain situations.

As mentioned earlier, TCP is necessary in situations where it's vital that all data packets are sent in order, and that all packets arrive. The web just wouldn't function without TCP.

And while TCP is slower because of the way it establishes connections, and due to the checks for missing packets, it can still be blazing fast. Because they're on the web and use HTTP, sites like YouTube or Netflix all use TCP to send data to your devices.

TCP also allows for buffering, so your browser can request and load more data as you watch, allowing for smooth playback and for you to skip ahead to other parts of the video.

UDP is the better choice for live video and audio or online games where speed is more important than potential data loss.

When you make a call over Google Meet or Zoom, your video and audio are being transmitted over UDP. If some packets are lost along the way, it'll just appear as a bit of lag or clipped video/audio.

If you play video games, you might think that the way TCP ensures all data packets arrive at the other device would make it the ideal choice. But in reality, all the checking and resending data that TCP does just adds latency.

Game developers have found other clever ways to ensure that player input and state are as accurate as possible. If you're interested in reading more about why UDP is preferred for online gaming, check out this article.

FIN

I hope this article helped you understand some of the nuances between TCP and UDP. And if someone asks which is faster, tell 'em what you read here: "UDP is faster, but..."

And if you like what you read, let me know over on Twitter.

Fortunately, Gmail has a built-in dark mode theme. This will make it much easier to read at night.

In addition to reducing eye strain, dark mode can even reduce the battery consumption of your device, allowing you to use it for longer without charging it. (It's a small improvement, but it helps.)

So how do you turn on dark mode in Gmail? I'll show you how to switch to Gmail's dark theme in just a few steps.

Gmail Dark Mode on Desktop

First, open your browser and go to Gmail. Sign in if necessary.

Click on the gear icon in the top right and next to "Theme" click "View all":

In the "Pick your theme" menu, scroll down until you see the different color options.

Select "Dark" (this text will be visible when you hover over the black thumbnail), and click "Save":

And when you go back to your inbox, it'll be in dark mode:

Gmail Dark Mode on Android

Note: This method requires Android 10 and up.

First, open the Gmail app. Download the app and / or sign in if necessary.

In Gmail, open the side menu by tapping the three vertical bars on the top left of the screen, or by swiping from the left:

In the side menu, scroll down to the bottom and tap "Settings":

Then in the Settings menu, tap "General settings":

In the General settings menu, tap "Theme":

Finally in the Theme pop up menu, select "Dark":

And Gmail will switch to dark mode:

Gmail Dark Mode on iOS

Note: This method requires iOS 13 and up.

If you have an iPhone and want your Gmail to be in dark mode, it's super simple to make that happen.

There isn't a setting in the Gmail app itself – you simply set your phone's settings to dark mode (and Gmail will follow suit). Here's how to do that.

First, go to your phone's "Settings" and scroll until you see "Display & Brightness" partway down:

Click on Display and Brightness, and you'll be taken to this screen:

As you can see, my phone is currently set to Light Mode (it's selected). If I want to switch to dark mode, just toggle that option on, like this:

Now my phone is set to dark mode (all the time, rather than just auto-adjusting when it gets dark outside).

So my Gmail app will now look like this:

There you have it! If you only want your Gmail app to use dark mode at night, you can update your settings accordingly.

Just make sure your phone is on Light mode and the "Automatic" option is toggled on. Then just select the "Sunset to Sunrise" option under "Options" and your phone will automatically adjust your apps into dark mode when the sun goes down!

It'll look like this:

Thanks for Reading

If you found this helpful, please share it with your friends so more people can enable Gmail's dark mode on desktop, Android, and iOS devices.

Also, if you liked this article, let me know over on Twitter.

Either way, the freeCodeCamp community's got you covered.

A lot of the time, learning how to program is not so much a straight line as it is a vast flowchart, with lots of repeated sections and loops:

A flowchart for system calls in Windows Server Edition (source)

But it doesn't have to be that complicated.

I've gone through our vast catalog of tutorials and created a list of some of the best resources on how to learn pretty much everything you'd need to know as a developer.

The list is loosely organized into different sections and subsections. Feel free to browse the table of contents below and skip around to look for an article on whatever you're trying to learn.

Also, many things on this list require some prerequisite knowledge of another technology. Don't be surprised if you find yourself opening articles from multiple sections.

Finally, this is a living document, and will grow as we publish more helpful articles. Be sure to check back often, and share this with your friends if you find it helpful.

Table of Contents

• How to Build a Website
  • HTML
  • CSS
• How to Learn Programming
  • JavaScript
  • Node.js
  • TypeScript
  • Deno
  • Python
  • Java
  • Go (Golang)
  • Rust
  • C
  • C++
  • C#
• How to Learn Linux
• How to Learn Git and Version Control
• How to Learn a Frontend Framework / Library
  • React
  • Vue
  • Angular
• How to Learn Web Basics and Web Security
  • Web Basics
  • HTTPS
  • Cookies
• How to Learn Databases
  • SQL / MySQL
  • MongoDB / Mongoose (NoSQL)
  • Redis (NoSQL)
  • Postgres / PostgreSQL
• How to Learn Backend Development
  • Express
  • Flask
  • Django
• How to Learn Static Site Generators
  • Gatsby
  • Next.js
  • Hugo
  • Nuxt.js
  • Vuepress
• How to Learn Bundlers, Compilers, Dependency Managers, Task Runners, Formatters, and Linters
  • Webpack and Babel
  • ESLint and Prettier
  • Parcel
  • Gulp
  • npm Scripts
• How to Learn Mobile Application Development
  • React Native
  • Ionic
  • Flutter
• How to Learn Desktop Application Development
  • Electron
  • Proton Native
• How to Learn Data Science and Machine Learning
  • General Machine Learning
  • Pandas
  • Numpy
  • Scikit-Learn
  • Seaborn
  • Matplotlib
  • TensorFlow
  • PyTorch
  • Keras
• How to Learn Virtualization and Containerization
  • Virtual Machines
  • Docker
  • Kubernetes
• How to Learn Cloud Computing
  • Amazon Web Services (AWS)
  • Google Cloud Platform (GCP)
  • Microsoft Azure
• How to Learn DevOps
  • General DevOps
  • Travis CI
  • Jenkins
  • GoCD
  • Ansible
  • Chef
  • Kafka
  • Terraform

How to Build a Website

To build a basic website, all you really need are HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). HTML provides the content and structure of the site, and CSS is used to style it.

Here are some of the best resources on HTML and CSS. Once you're familiar with these technologies, move on to the next section and learn JavaScript to make your web sites more interactive.

HTML

• Learn HTML Basics for Beginners in Just 15 Minutes
• How to Make HTML Hyperlinks Using the HREF Attribute on Tags
• How to Use HTML to Open a Link in a New Tab
• HTML Link Code – How to Insert a Link to a Website with HREF
• HTML Entities – A List of HTML Space and other HTML Symbols and Special Character Codes
• How to Enable Dark Mode in HTML Email – Everything You Need to Know
• Make It Blink HTML Tutorial – How to Use the Blink Tag, with Code Examples
• HTML Basics: A Free Full-Length Course
• The HTML Handbook

CSS

• CSS Font Size Tutorial – How to Change Text Size in HTML
• HTML Background Color Tutorial – How to Change a Div Background Color, Explained with Code Examples
• Inline CSS Guide – How to Style an HTML Tag Directly
• HTML Center Text – How to CSS Vertical Align a Div
• How to Center Anything with CSS - Align a Div, Text, and More
• HTML vs Body: How to Set Width and Height for Full Page Size
• Box Shadow CSS Tutorial – How to Add a Drop Shadow to Any HTML Element
• How CSS Positioning and Flexbox Work – Explained with Examples
• Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!)
• An Introduction to CSS Grid Layout (with Examples)
• Learn CSS Grid by Building 5 Layouts in 17 minutes
• How CSS Grid Changes the Way We Think About Structuring Our Content
• Flexbox vs Grid - How to Build the Most Common HTML Layouts
• Learn CSS in this free 6-hour video course
• The CSS Handbook: A Handy Guide to CSS for Developers

How to Learn Programming

In essence, programming is how humans tell computers what to do. Whether it's a laptop, a smartphone, or a browser, programming and programming languages give us a way to interact with those devices.

In this section, you'll learn the fundamentals of programming and the basics of some of the most popular programming languages today.

If you want to learn frontend and backend development, definitely learn JavaScript and Node.js. And once you're familiar with those, look into TypeScript.

If you're more interested in data science and machine learning, learn Python. For mobile apps, it helps to know Java. Game development? C++, C#, or even Java.

We've got a bit of everything, including newer programming languages like Go.

JavaScript

• JavaScript Variables – A Beginner's Guide to var, const, and let
• JavaScript Split String Example – How to Split a String into an Array in JS
• JavaScript TypeOf – How to Check the Type of a Variable or Object in JS
• How to Check if a JavaScript Array is Empty or Not with .length
• JS For Loop Tutorial – How to Iterate Over an Array in JavaScript
• JavaScript Array Sort – How to Use JS Sort Methods (With Code Examples)
• JavaScript Reverse Array – Tutorial With Example JS Code
• JavaScript forEach – How to Loop Through an Array in JS
• JavaScript Array Slice vs Splice: the Difference Explained with Cake
• JavaScript Object Keys Tutorial – How to Use a JS Key-Value Pair
• JavaScript Create Object  –  How to Define Objects in JS
• Object Oriented Programming in JavaScript – Explained with Examples
• The JavaScript this Keyword + 5 Key Binding Rules Explained for JS Beginners
• A Beginner’s Guide to JavaScript’s Prototype
• JavaScript Date Now – How to Get the Current Date in JavaScript
• The Ultimate Guide to JavaScript Date and Moment.js
• What is Functional Programming? A Beginner's JavaScript Guide
• Learn JavaScript - Full 134-Part Course for Beginners
• Data Structures and Algorithms in JavaScript - Full Course for Beginners
• Sparse Arrays vs Dense Arrays in JavaScript — Explained with Examples
• JavaScript Regex Match Example – How to Use JS Replace on a String
• A Quick and Simple Guide to JavaScript Regular Expressions
• JavaScript Keycode List – Keypress Event Key Codes for Enter, Space, Backspace, and More
• JavaScript Object Destructuring, Spread Syntax, and the Rest Parameter – A Practical Guide
• How the Nullish Coalescing Operator Works in JavaScript
• Try/Catch in JavaScript – How to Handle Errors in JS
• How to Use Async/Await in JavaScript with Example JS Code
• How the Question Mark (?) Operator Works in JavaScript
• Ternary Operator JavaScript If Statement Tutorial
• Debounce – How to Delay a Function in JavaScript (JS ES6 Example)
• How to Find the Number of Vowels in a String with JavaScript
• Data Validation – How to Check User Input on HTML Forms with Example JavaScript Code
• What is Recursion? A Recursive Function Explained with JavaScript Code Examples
• The JavaScript Skills You Need For React (+ Practical Examples)
• Higher Order Functions in JavaScript – Reach New Heights in Your JS Code
• Node Module Exports Explained – With JavaScript Export Function Examples
• How to Make a Landing Page using HTML, SCSS, and JavaScript
• How to Build and Validate Beautiful Forms with Vanilla HTML, CSS, & JS
• How to Build a Responsive and Dynamic Progress Bar with HTML, CSS, and JavaScript
• The JavaScript Beginner's Handbook

Node.js

• How to Install Node.js and npm on Windows
• How to Install Node.js on Ubuntu and Update npm to the Latest Version
• Node Module Exports Explained – With JavaScript Export Function Examples
• npm Cheat Sheet - Most Common Commands and nvm
• What is npm? A Node Package Manager Tutorial for Beginners
• How to Ignore Files from Your npm Package
• How to Publish Packages to npm (the Way the Industry Does Things)
• How to Make a Beautiful, Tiny npm Package and Publish It
• How to Force Use Yarn or NPM
• How to enable ES6 (and beyond) syntax with Node and Express
• How to Automate Simple Tasks with Node.js
• The Ultimate Node.js Production Checklist
• How to Get Started with GraphQL and Node.js

TypeScript

• How to Install and Start Using TypeScript
• How to Add TypeScript to a JavaScript Project
• Learn TypeScript Data Types – From Zero to Hero
• All about TypeScript Static Members | TypeScript OOP
• No, Getters and Setters in TypeScript & JavaScript Aren't Useless
• A Crash Course in TypeScript
• TypeScript Types Explained – A Mental Model to Help You Think in Types
• The React TypeScript Cheatsheet – How To Set Up Types on Hooks
• How TypeScript Generics Help You Write Less Code
• How to Create a Great User Experience with React, TypeScript, and the React Testing Library
• Advanced TypeScript Types Cheat Sheet (with Examples)
• A Practical Guide to TypeScript - How to Build a Pokedex App Using HTML, CSS, and TypeScript
• How to Build a Todo App with React, TypeScript, NodeJS, and MongoDB
• How to Build a RocketChat Chatbot with TypeScript
• The Definitive TypeScript Handbook
• Learn TypeScript With This Crash Course
• How to Build a Quiz App Using React and TypeScript
• Build a Shopping Cart with React and TypeScript
• How to Use Typescript in React

Deno

• Learn Deno, a Node.js Alternative
• How to Build React Applications with Deno Using the AlephJS Library
• How to Build a URL Shortener in Deno
• How to Create a Todo API in Deno and Oak
• The Deno Handbook: A TypeScript Runtime Tutorial with Code Examples
• Securing Node.js RESTful APIs with JSON Web Tokens
• Learn Node.js and Start Executing JavaScript Outside of the Browser

Python

• Hello World Programming Tutorial for Python
• Python While Loop Tutorial – While True Syntax Examples and Infinite Loops
• Python New Line and How to Python Print Without a Newline
• Python Dictionaries 101: A Detailed Visual Introduction
• Python Sets: A Detailed Visual Introduction
• Python Read JSON File – How to Load JSON from a File and Parse Dumps
• Python List Files in a Directory Guide - listdir VS system("ls") Explained with Examples
• Python Write to File – Open, Read, Append, and Other File Handling Functions Explained
• Python Empty List Tutorial – How to Create an Empty List in Python
• Python List Append – How to Add an Element to an Array, Explained with Examples
• Python List Append VS Python List Extend – The Difference Explained with Array Method Examples
• The Python Sort List Array Method – Ascending and Descending Explained with Examples
• Python Unique List – How to Get all the Unique Values in a List or Array
• Truthy and Falsy Values in Python: A Detailed Introduction
• The Python Modulo Operator - What Does the % Symbol Mean in Python? (Solved)
• Python's datetime Module – How to Handle Dates in Python
• How to Handle Exceptions in Python: A Detailed Visual Introduction
• The @property Decorator in Python: Its Use Cases, Advantages, and Syntax
• The Python Sleep Function – How to Make Python Wait A Few Seconds Before Continuing, With Example Commands
• Mutable vs Immutable Objects in Python – A Visual and Hands-On Guide
• How to Build Your Very First Python Package
• Python Dictionary Guide – How to Iterate Over, Copy, and Merge Dictionaries in Python 3.9
• Binary Search in Python: A Visual Introduction
• Multithreaded Python: Slithering Through an I/O Bottleneck?
• How to Set Up a Python Virtual Environment on Ubuntu 20.04
• How to Set Up Virtualenv with Virtualenvwrapper on Ubuntu 18.04
• Installing Multiple Python Versions on Windows Using Virtualenv
• Take Your Python Skills to the Next Level With This Free 6-Hour Video Course
• The Python Handbook

Java

• Java String to Int – How to Convert a String to an Integer
• Java List Methods Tutorial – Util List API Example
• Java Array Methods – How to Print an Array in Java
• Using Java’s Arrays.sort() for any List of Objects
• How to Handle NullPointerException in Java
• Priority Queues in Java Explained with Examples
• Object-Oriented Programming Principles  in Java:  OOP Concepts for Beginners
• Polymorphism in Java Tutorial – With Object Oriented Programming Example Code
• Learn Functional Programming in Java - Full Course
• Multithreading in Java: How to Get Started with Threads
• Java Random Number Generator – How to Generate Integers With Math Random
• Garbage Collection in Java – What is GC and How it Works in the JVM
• JVM Tutorial - Java Virtual Machine Architecture Explained for Beginners
• Build a Java Android App Using a REST API - Network Data in Android Course
• How to Set Up Java Spring Boot JWT Authorization and Authentication
• JVM Tutorial - Java Virtual Machine Architecture Explained for Beginners
• Use Spring Boot and Java to Create a Rest API (Tutorial)
• How to Build a Sudoku Game Java Desktop Application – A Free 2-hour Course

Go (Golang)

• Go (Golang) Programming Language
• Learning Go — From Zero to Hero
• How to Automate Your GitHub Profile README
• How to Build Your Own Serverless Subscriber List with Go and AWS
• How to Validate SSL Certificates in Go
• How to Design a Transactional Key-value Store in Go
• How I built a Web Server Using Go — and On ChromeOS
• How to Set Up gRPC Server-Side Streaming with Go
• How to Set Up a Real-World Project with Go and Vue
• How to Implement Elasticsearch in Go
• How to Implement Heap-Sort in the Go Standard Library
• Learn the Fast and Simple Go Programming Language (Golang) in 7 Hours
• Learn Go in This Crash Course

Rust

• Rust for Beginners – Get Started with the Most Loved Programming Language
• How to Learn Rust Without Installing Any Software
• Rust Programming Language Tutorial – How to Build a To-Do List App
• How to Build Powerful GraphQL Servers with Rust

C

• Boost Your Programming Skills by Reading Git's Code
• Format Specifiers in C
• File Handling in C — How to Open, Close, and Write to Files

C++

• How Classes Work in C++
• Do While Loops in C++ with Example Loop Syntax
• How to Overload Operators in C++
• C++ Map Explained with Examples
• How to Write Clean Code in C++
• How to Compile Your C++ Code in Visual Studio Code
• Learn Object Oriented Programming (OOP) in C++ | Full Video Course

C

• C# Programming: An Intro for Beginners
• C# Basics - Your First C# Program, Types and Variables, and Flow Control Statements
• Is the C# Internal Keyword a Code Smell?
• How to Build an SPA with Vue.js and C# Using .NET Core
• Learn C# and Unity by Making Digital Tabletop Games
• Create a C# Application from Start to Finish - Complete 24-Hour Course

How to Learn Linux

Whether you know it or not, you probably use Linux every day. Android is based on Linux, and macOS, which is based on Unix just like Linux, is a close cousin. And an estimated 74.2% (as of March, 2021) of all web servers run on Unix, the vast majority of which are probably Linux.

In short, if you work on the web, you should get comfortable with Linux and its default shell, Bash. And here are some of our best tutorials to get started:

• Linux Commands - Basic Bash Command Line Tips You Should Know
• The Cat Command in Linux – Concatenation Explained with Bash Examples
• The Cat Command in Linux – How to Create a Text File with Cat or Touch
• Grep Command Tutorial – How to Search for a File in Linux and Unix with Recursive Find
• Linux: How to Add Users and Create Users with useradd
• Linux User Groups Explained: How to Add a New Group, a New Group Member, and Change Groups
• The Linux LS Command – How to List Files in a Directory + Option Flags
• Tar in Linux – Tar GZ, Tar File, Tar Directory, and Tar Compress Command Examples
• The Tar Command in Linux: Tar CVF and Tar XVF Explained with Example Commands
• Symlink Tutorial in Linux – How to Create and Remove a Symbolic Link
• Linux Package Management with Snaps
• How to Build Your Own Linux Dotfiles Manager from Scratch
• Learn the Basics of Linux and How It Can Be Used by Ethical Hackers
• How to Configure and Operate Linux Servers - Full Course
• The Linux Command Handbook

How to Learn Git and Version Control

Once your programs start growing in size and complexity, you'll want a way to track your changes in case you need to roll back to an earlier version.

Git lets you do just that, and is the most popular version control software in use today. If you want to collaborate with other developers and get a job in the industry, it's important to know how Git works.

Some of our best articles on Git are listed below. Also, when you use Git it'll probably be through the command line, so make sure you know some basic Linux / Bash before diving in.

• What is Git? A Beginner's Guide to Git Version Control
• Learn Git and Version Control in an Hour
• Git vs GitHub – What is Version Control and How Does it Work?
• What is GitHub? What is Git? And How to Use These Developer Tools
• Git Commands You Should Know, with Code Examples
• Git Cheat Sheet – 50 Git Commands You Should Know
• Git Reset to Remote Head – How to Reset a Remote Branch to Origin
• Git Checkout Remote Branch Tutorial
• How to Use Branches in Git – the Ultimate Cheatsheet
• A Beginner’s Guide to Git — How to Write a Good Commit Message
• How to Write Good Commit Messages: A Practical Git Guide
• A Beginner’s Guide to Git — What is a Changelog and How to Generate it
• How to Get and Configure Your Git and GitHub SSH Keys
• How to Use Multiple Git Configs on One Computer
• How to Understand and Solve Conflicts in Git
• How to Undo Mistakes with Git
• How to Use Git Aliases to Increase Your Productivity
• Git Reset Explained – How to Save the Day with the Reset Command
• Git Secrets: 7 Commands You Might Not Know
• How to Uncommit Sensitive Files from Git
• Git Pull Force – How to Overwrite Local Changes With Git
• Git Clone Branch – How to Clone a Specific Branch
• How to Switch Between Issues in Your Local Git Repository
• How to Sync Your Fork with the Original Git Repository
• Git and GitHub Crash Course

How to Learn a Frontend Framework / Library

Once you know how to build basic websites with HTML, CSS, and JavaScript, level up your skills by learning a frontend framework / library. Of these, the three most popular are React, Vue, and Angular.

Angular is considered a framework because it includes a lot of things like routing out of the box.

React, on the other hand, is usually referred to as a library because it doesn't come with a lot by default. Instead, you'll need to add some extra packages to handle routing and other things.

Vue falls somewhere in the middle in terms of functionality and weight.

Whatever you call them, each has its own strengths and weaknesses. There is no best framework / library – just choose one that seems the most interesting, or that companies in your area are hiring for, and go from there.

React

• How to Install React.js with create-react-app
• React Functional Components, Props, and JSX – React.js Tutorial for Beginners
• JSX in React – Explained with Examples
• React Background Image Tutorial – How to Set backgroundImage with Inline CSS Style
• How to Build an Accordion Menu in React from Scratch – No External Libraries Required
• How to Build React Forms the Easy Way with react-hook-form
• How to Build Your Own React Hooks: A Step-by-Step Guide
• React Testing Library – Tutorial with JavaScript Code Examples
• How to Build a Weather Application with React and React Hooks
• How to Add Drag and Drop in React with React Beautiful DnD
• How to Use SVG Icons in React with React Icons and Font Awesome
• How to Build a Shopping List Using React Hooks (w/ Starter Code and Video Walkthrough)
• Build a React Budget Tracker App – Learn React & Context API with this Fun Project
• The Best File Structure for Your React Components
• React Props Cheatsheet: 10 Patterns You Should Know
• How to Turn Google Sheets into a REST API and Use it with a React Application
• How to Fetch Data in React: Cheat Sheet + Examples
• How to Use the YouTube IFrame API in React
• How to Setup HTTPS Locally with create-react-app
• How to Create a React App with a Node Backend: The Complete Guide
• How to Add a Serverless Database to your React Projects
• The React Scripts Start Command – Create-React-App npm Scripts Explained
• Build a Shopping Cart with React and TypeScript
• Learn React.js by Building Projects – Create a Birthday Reminder App
• How to Create a Next.js Starter to Easily Bootstrap a New React App
• Learn How to Use React and GraphQL to Make a Full Stack Social Network
• React for Beginners – A React.js Handbook for Front End Developers

Vue

• Learn Vue: A 3-minute Interactive Vue JS Tutorial
• Learn How to Use the Vue.js CLI
• Learn Vue.js - Full Course for Beginners
• Vue Components: An Interactive Vue JS Tutorial
• How to Use Routing in Vue.js to Create a Better User Experience
• Build a Markdown Previewer with Vue.js
• How to Add Internationalization to a Vue Application
• How to Add Charts and Graphs to a Vue.js Application
• How to Build a Memory Card Game with Vue.js
• How to Create and Publish a Vue Component Library
• How to Build a Full Stack RPG Character Generator with MongoDB, Express, Vue, and Node (the MEVN Stack)
• How to Add Authentication to a Vue App Using Firebase
• How to Add Authentication to a Vue App Using Auth0
• How to Add Authentication to a Vue App Using AWS Amplify
• The Vue Handbook: A Thorough Introduction to Vue.js

Angular

• How to Install Angular on Windows: A Guide to Angular CLI, Node.js, and Build Tools
• Angular 9 for Beginners - Components and String Interpolation
• Angular 9 for Beginners — How to Install Your First App with Angular CLI
• Everything you need to know about ng-template, ng-content, ng-container, and *ngTemplateOutlet in Angular
• What Could Go Wrong? How to Handle Errors in Angular
• How to Build a Generic Form Validator in Angular
• How to Validate Angular Template-Driven Forms
• How to Validate Angular Reactive Forms
• How to Create a Reusable Loading-Indicator for Angular Projects
• How I Built a Customizable Loading-Indicator with Angular Dynamic Components
• How to Create an Online Poll with ASP.NET Core, Angular 5, and Highcharts
• How to Generate QR Codes in Angular 10
• Use Angular Material to add modern UI components to your Angular projects
• Angular RxJS In-Depth
• How To Create An Optical Character Reader Using Angular And Azure Computer Vision
• Learn Angular - Full Tutorial Course

How to Learn Web Basics and Web Security

When you get familiar with building web sites and web applications in the framework / library of your choice, you'll want to deploy them. But before you put your work online, it helps to know how the web works and the basics of web security.

Web Basics

• How HTTP Works and Why it's Important – Explained in Plain English
• HTTP 401 Error vs HTTP 403 Error – Status Code Responses Explained
• HTTP Error 403 Forbidden: What It Means and How to Fix It
• Error 403 Forbidden Explained - How Can I Fix This HTTP Error Code?
• HTTP Error 500 – Internal Server Error Explained in Plain English
• HTTP Error 503 Service Unavailable Explained – What the 503 Error Code Means
• An In-depth Introduction to HTTP Caching: Cache-control & Vary
• An Introduction to HTTP: Everything You Need to Know
• What is the TCP/IP Model? Layers and Protocols Explained
• WPA Key, WPA2, WPA3, and WEP Key: Wi-Fi Security Explained
• What is TLS? Transport Layer Security Encryption Explained in Plain English

HTTPS

• What is HTTPS? A Guide to Secure Web Browsing and Browser Encryption
• WTF is HTTPS?
• How to Protect Your WordPress Website With HTTPS in 5 Simple Steps
• How to Redirect HTTP to HTTPS Using .htaccess
• Simple Site Hosting with Amazon S3 and HTTPS
• HTTPS Explained with Carrier Pigeons
• How to Get HTTPS Working on Your Local Development Environment in 5 Minutes
• How to Add HTTPS to Your Website for Free in 10 Minutes, and Why You Need to Do This Now More Than…

Cookies

• Web Security: How to Harden Your HTTP Cookies
• Everything You Need to Know About Cookies for Web Development
• What are Cookies on the Web and How Do You Use Them?

How to Learn Databases

By this point you've probably built a bunch of websites and applications. You've likely used an API to get data on things like the weather, or to grab a random quote to display on the page.

But if you've ever wanted to create your own API, or store information from your users, you'll need to learn how to use a database.

Generally speaking, databases fall into two categories: relational, or SQL, and non-relational, or NoSQL. SQL stands for "structured query language", and is a broad term to refer to relational databases. NoSQL, or "not only SQL" refer to non-relational databases.

Neither type of database is better or worse than the other – it mostly comes down to the project you're working on, and the sort of data you'll be working with.

Here's a list of some of the best articles we have on databases. I'll make a note about whether the database system is relational (SQL) or non-relational (NoSQL) if it isn't clear:

SQL / MySQL

• What is SQL? What is a Database? Relational Database Management Systems (RDBMS) Explained in Plain English
• Why You Should Learn SQL – Even If You're Not a Developer
• Basic SQL Commands - The List of Database Queries and Statements You Should Know
• Learn SQL with These 5 Easy Recipes
• SQL Create Table Statement - With Example Syntax
• SQL Operators Tutorial – Bitwise, Comparison, Arithmetic, and Logical Operator Query Examples
• SQL Joins Tutorial: Cross Join, Full Outer Join, Inner Join, Left Join, and Right Join
• SQL Foreign Key VS Primary Key Explained with MySQL Syntax Examples
• SQL View Explained - How to Create a View in SQL and MySQL
• The SQL Update Statement Explained: Queries for Updating Tables (including MySQL Examples)
• SQL Insert Into and Insert Statements: With Example MySQL Syntax
• SQL Create Table Explained with Syntax Examples for MySQL and Postgres
• Check Constraint in SQL - Explained with MySQL and SQL Server Syntax Examples
• SQL Delete Row Statement - How to Remove Data From a Table With Example Queries
• Primary Key SQL Tutorial – How to Define a Primary Key in a Database
• Learn the Basics of SQL Injection and How to Protect Your Web Apps
• SQL Injection Tutorial - What is SQL Injection and How to Prevent it
• SQL Update Statement — Example Queries for Updating Table Values
• How to Make Sure Your MySQL Database is Secured
• How to Create and Manipulate SQL Databases with Python
• How to Build Your First CRUD App with Laravel and MySQL
• SQL and Databases - A Full Course for Beginners

MongoDB / Mongoose (NoSQL)

Note: Mongoose is a tool for MongoDB that lets you do things like object data modeling (ODM) to create models or schemas for your data. A lot of people use Mongoose to interact with a MongoDB database, so I've combined them here.

• How to Get Started with MongoDB in 10 Minutes
• How to Handle Advanced Data Processing with MongoDB's Aggregation Framework
• Learn Node + MongoDB by Creating a URL Shortener Project
• How to Use MongoDB + Mongoose with Node.js – Best Practices for Back End Devs
• How to Deploy a MERN Application to Heroku Using MongoDB Atlas
• How to Build a Todo App with React, TypeScript, NodeJS, and MongoDB
• How to Build a Full Stack RPG Character Generator with MongoDB, Express, Vue, and Node (the MEVN Stack)
• How to build a blazing fast GraphQL API with Node.js, MongoDB and Fastify
• How to Create a Realtime App Wsing Socket.io, React, Node & MongoDB
• How to Build Blazing Fast REST APIs with Node.js, MongoDB, Fastify and Swagger
• Introduction to Mongoose for MongoDB
• How to Log a Node.js API in an Express.js App with Mongoose Plugins
• Mongoose 101: An Introduction to the Basics, Subdocuments, and Population
• How to Allow Users to Upload Images with Node/Express, Mongoose, and Cloudinary
• MongoDB Quickstart with Python
• MongoDB Tutorial - CRUD App from Scratch Using Node.js
• MongoDB Full Course w/ Node.js, Express, & Mongoose
• How to Build a RESTful API Using Node, Express, and Mongo

Redis (NoSQL)

• How to Use Redis to Supercharge Your Web APIs
• A Quick Guide to Redis Lua Scripting
• How the Redis Hash Table Scan Function Works
• How to Build a Multi-Step Registration App with Animated Transitions Using the MERN Stack

Postgres / PostgreSQL

• How to Get Started with PostgreSQL
• Learn These Quick Tricks in PostgreSQL
• How to Use Fuzzy String Matching with PostgreSQL
• How to Update Objects Inside JSONB Arrays with PostgreSQL
• How to Deploy a Rails 5.2 PostgreSQL App on AWS Elastic Beanstalk
• How to Create a Django Server Running uWSGI, NGINX and PostgreSQL on AWS EC2 with Python 3.6
• How to Build Web APIs with NestJS, Postgres, and Sequelize - A Beginner's Guide
• How to Deploy a React App to Production on AWS Using Express, Postgres, PM2 and NGINX
• Docker Development WorkFlow — a Guide with Flask and Postgres
• Learn SQL with This Free 4-hour Course on the Popular PostgreSQL Database

How to Learn Backend Development

Similar to how frontend development is a broad subject, backend development can refer to many things, and encompasses a lot of different technologies.

Usually when you start working on the backend, which controls how sites and web apps work behind the scenes, you'll use a framework like Express, Flask, or Django.

Express

• How to Enable ES6 (and beyond) Syntax with Node and Express
• How to Deploy Your App to the Web Using Express.js and Heroku
• How to Add a GraphQL Server to a RESTful Express.js API in 2 Minutes
• Express.js Security Tips: How You Can Save and Secure Your App
• How to Build a Full Stack RPG Character Generator with MongoDB, Express, Vue, and Node (the MEVN Stack)
• How to Build a Multiplayer Card Game with Phaser 3, Express, and Socket.IO
• How to Build a Multiplayer Tabletop Game Simulator with Vue, Phaser, Node, Express, and Socket.IO
• How to Make Input Validation Simple and Clean in Your Express.js App
• How to Write a Production-Ready Node and Express App
• How to Build a RESTful API using Node, Express, and Mongo
• Learn Express.js in This Complete Course

Flask

• How to Develop an End-to-End Machine Learning Project and Deploy it to Heroku with Flask
• Learn About Python Microservices by Building an App Using Django, Flask, and React
• How to Use Python and Flask to Build a Web App — An In-Depth Tutorial
• Setting up CI/CD on GitLab for Deploying Python Flask Application on Heroku
• Learn Flask Web Development for Python in This Free 1-hour Course
• Learn Web Programming with Flask from Harvard's CS50
• Learn the Flask Python Web Development Framework by Building an Ecommerce Platform

Django

• How to Write Efficient Views, Models, and Queries in Django
• How to Manipulate Data with Django Migrations
• Django Project Best Practices That'll Keep Your Developers Happy
• Django Test Suite Introduction – How to Increase Your Confidence as a Python Developer
• ELI5 Full Stack Basics: Breakthrough with Django & EmberJS
• I Built a Members' Area on My Website with Python and Django. Here's What I Learned.
• How to Build a Web-Based Dashboard with Django, MongoDB, and Pivot Table
• How to Create an Analytics Dashboard in a Django App
• How to Build an E-commerce Website with Django and Python
• Build a Moodle / Blackboard clone with Django Rest Framework & React
• How to Build a Progress Bar for the Web with Django and Celery
• How to Document Your Django Project Using the Sphinx Tool
• Python Django Web Framework - Full Course for Beginners
• Learn About Python Microservices by Building an App Using Django, Flask, and React

How to Learn Static Site Generators

Static Site Generators were created to make development easy, and they represent the "M" in JAMstack (JavaScript, APIs, and Markup). With a static site generator, it's much easier to create a quick, scaleable website, blog, or web app with modern benefits like server-side rendering.

Gatsby

• Gatsby Starter Blog: How to Add Header Images to Posts with Support for Twitter Cards
• How to Create an Image Gallery Using Gatsby and Cloudinary
• How to Build a Blog with Gatsby and Netlify CMS – A Complete Guide
• Create a Full-Stack Website with Strapi and GatsbyJS
• How to Create a Travel Bucket List Map with Gatsby, React Leaflet, & GraphCMS
• How to Enable Offline Mode for Your Gatsby Site
• What Are Environment Variables and How Can I Use Them with Gatsby and Netlify?
• 3 Ways to Edit Markdown with TinaCMS + Gatsby
• How to Build Your Coding Blog From Scratch Using Gatsby and MDX
• What Is Gatsby and Why It's Time to Get on the Hype Train
• How to Build Authenticated Serverless JAMstack Apps with Gatsby and Netlify
• How to Keep State Between Pages with Local State in Gatsby.js
• How to Automatically Cross-post from Your GatsbyJS Blog with RSS
• How to Create a Searchable Log with Gatsby
• From Zero to Deploy: How I Created a Static Website from Scratch Using Netlify + Gatsby
• Get Your GraphCMS Data into Gatsby
• The Great Gatsby.js Bootcamp

Next.js

• What is Static Site Generation? How Next.js Uses SSG for Dynamic Web Apps
• Next.js Basics Tutorial – Server-side Rendering, Static Sites, REST APIs, Routing, and More
• Routing in Next.js – A Complete Beginner's Guide
• How to Create a Next.js Starter to Easily Bootstrap a New React App
• How to Build a Jamstack Site with Next.js and Vercel - Jamstack Handbook
• How to Create a Contact Form with Netlify Forms and Next.js
• How to Build an Image Gallery with NextJS Using the Pexels API and Chakra UI
• How to Add Interactive Animations and Page Transitions to a Next.js Web App with Framer Motion
• How to Use Github Actions to Deploy a Next.js Website to AWS S3
• How to Use Chakra UI with Next.js and React
• How to Run Visual Regression Testing on a Next.js App with Cypress and Applitools
• How to Fetch GraphQL Data in Next.js with Apollo GraphQL
• Discover Next.js and Write Server-Side React Apps the Easy Way
• The Next.js Handbook

Hugo

• How to Create Your First Hugo Blog: a Practical Guide
• A Portable Makefile for Continuous Delivery with Hugo and GitHub Pages
• Two Ways to Deploy a Public GitHub Pages Site from a Private Hugo Repository
• Hugo + Firebase: How to Create Your Own Static Website for Free in Minutes
• Hugo vs Jekyll: an Epic Battle of Static Site Generator Themes
• How to Self-Host a Hugo Web App

Nuxt.js

• How to Use Flat-File Data in a Static Nuxt App
• Up & Going with Nuxt.js, Bulma and Sass
• Universal Application Code Structure in Nuxt.js
• How to Architect a DApp Using Nuxt.js and Nebulas
• Deploy a Nuxt App to S3 in 5 Minutes

Vuepress

• How to Create a Documentation Website Using VuePress

How to Learn Bundlers, Compilers, Dependency Managers, Task Runners, Formatters, and Linters

Once you start working with frontend frameworks / libraries, or your projects start to grow in size and complexity, things can quickly get out of hand.

To keep things organized and tidy, it helps to learn linting, especially if you work on large teams. With linting, you can catch errors before they happen, and with a formatter like prettier, you can enforce a code style guide for your entire team.

And though a lot of Angular, Vue, and React projects already include a bundler like Webpack, it's helpful to learn more about how it works in case you need to adjust its behavior later.

Webpack and Babel

• An Intro to Webpack: What It Is and How to Use It
• How to Create a Production-Ready Webpack 4 Config From Scratch
• How to Share Variables Across HTML, CSS, and JavaScript Using Webpack
• How to Combine Webpack 4 and Babel 7 to Create a Fantastic React App
• How to Set up & Deploy Your React App from Scratch Using Webpack and Babel
• How to Use Babel Macros with React Native
• Learn Webpack to Simplify and Speed Up Your Website

ESLint and Prettier

• What Is Linting and How Can It save You Time?
• Don’t Just Lint Your Code - Fix It with Prettier
• How to Create Your Own ESLint Config Package
• ESLint: The Essential Facts About Essential Front End Tools
• How to Stop Errors Before They Ever Hit Your Codebase with Travis CI and ESLint

Parcel

• How to Set Up a React App with Parcel
• How to Use Parcel to Bundle Your React.js Application
• How to Build Chrome Extensions with React + Parcel
• Using Parcel Bundler with React

Gulp

• Super Simple Gulp Tutorial for Beginners
• Using Gulp 4 in Your Workflow for Sass and JS Files
• How to Minify Images with Gulp & Gulp-imagemin and Boost Your Site’s Performance

npm Scripts

• Why I Left Gulp and Grunt for npm Scripts
• The React Scripts Start Command – Create-React-App npm Scripts Explained

How to Learn Mobile Application Development

These days, a lot of mobile app development is done with a framework like React Native.

While in the past you had to know a specific language like Java to develop a mobile app, with a framework, a lot of your frontend framework / library knowledge can be used to develop a mobile app.

Also, if you use a framework, you can just build the app once, and create both iOS and Android versions from the same code base.

React Native

• How Animations Work in React Native
• How to Use Video As a Background in React Native
• How to Handle Navigation in React Native with react-navigation 5
• Why I Switched to React Native to Create a Super Easy Bottom Sheet
• How React Native Constructs App Layouts (and How Fabric is About to Change It)
• How to Create a Camera App with Expo and React Native
• How to Build Your First Serverless React Native App with User Authentication
• How to Add Authentication to React Native in Three Steps Using Firebase
• How to Build a React Native App and Integrate It with Firebase
• How to Set Up Google Login in React Native & Firebase
• Add Gestures and Animations to React Native Projects
• How to Use Babel Macros with React Native
• Build an Instagram Clone with React Native, Firebase Firestore, Redux, and Expo
• React Native Course: How to Build an iPhone App, Android App, and Website - All with the Same Codebase
• How to Integrate Redux into Your Application with React Native and Expo
• How to Convert a React App to React Native
• Intro to React Native Course

Ionic

• How to Write "Hello, World!" in Ionic
• How to Create a CRUD To-do App Using Ionic 3
• How to Build Your First Ionic 4 App with API Calls
• How to Get Push Notifications Working with Ionic 4 and Firebase
• How to Develop a Great Facebook Login Flow with Firebase and Ionic
• How to Integrate Google Login into an Ionic App with Firebase
• Learn Ionic 4 and start creating iOS / Android Apps

Flutter

• A Simplified Introduction to Dart and Flutter
• An Introduction to Flutter: The Basics
• How to Serialize An Object In Flutter
• How to Handle State in Flutter Using the BLoC Pattern
• How to Use Streams, BLoCs, and SQLite in Flutter
• How to Handle Navigation in Your Flutter Apps
• How to Use the Provider Pattern in Flutter
• How to Build a Chat App UI With Flutter and Dart
• How to Add Push Notifications to a Flutter App using Firebase Cloud Messaging
• How to Integrate Google AdMob into Flutter
• How to Build a Native Communication Bridge in Flutter with WebView and JavaScript
• How to Use Flutter to Build a Tip Calculator
• How to Build a Cryptocurrency Price List App Using Flutter SDK
• Flutter UI Tutorial – How to Build a Chat App with Stories Using the Flutter SDK
• Flutter Course – How to Create a Production iPhone and Android App with the Flutter UI Tookit
• Use Flutter to Make an App for Mobile, Web, and Desktop - All with One Codebase
• Learn to Build iOS and Android Apps with Flutter

How to Learn Desktop Application Development

Similar to modern mobile app development, a lot of desktop apps these days are developed using a framework. This has a lot of the same advantages, and means that you can write your desktop app just once, and create Windows, macOS, and even Linux versions from the same code base.

Electron

• Writing OS-specific Code in Electron
• Building an Electron Application with create-react-app
• Quick, Painless, Automatic Updates in Electron
• Here’s How I created a Markdown App with Electron and React
• How to Create an Electron App Using Angular and SQLite3
• Things I Wish I Knew Before Working with Electron.js
• How to Build an Electron Desktop App in JavaScript: Multithreading, SQLite, Native Modules, and Other Common Pain Points

Proton Native

• How to Build Native Desktop Apps with JavaScript (Proton Native)

How to Learn Data Science and Machine Learning

Data science and machine learning are all the rage, and the number of jobs in each field is growing every year.

Put simply, data science refers to a broad range of techniques used to analyze and make sense of vast amounts of data.

Machine learning falls under the umbrella of data science, and it employs techniques that data scientists use to enable computers to learn from all this data.

It's a lot to take in, but no worries – here are some of the best articles and courses we have on machine learning, and the different libraries and frameworks you'll use on the job.

General Machine Learning

• Machine Learning Basics for Developers
• What Is a Convolutional Neural Network? A Beginner's Tutorial for Machine Learning and Deep Learning
• Clustering Algorithms in Machine Learning that All Data Scientists Should Know
• Key Machine Learning Algorithms Explained in Plain English
• Random Forest Classifier Tutorial: How to Use Tree-Based Algorithms for Machine Learning
• Google BERT NLP Machine Learning Tutorial
• SVM Machine Learning Tutorial – What is the Support Vector Machine Algorithm, Explained with Code Examples
• Machine Learning with Scikit-Learn—Full Course

Pandas

• The Ultimate Guide to the Pandas Library for Data Science in Python
• How to Get Started with Pandas in Python – a Beginner's Guide
• How to Use Python and Pandas to Map Major Storms, Pessimism, and Hard Data
• How to Analyze Data with Python, Pandas & Numpy - 10 Hour Course

Numpy

• The Ultimate Guide to the NumPy Package for Scientific Computing in Python
• Python NumPy Crash Course – How to Build N-Dimensional Arrays for Machine Learning
• Learn NumPy and Start Doing Scientific Computing in Python

Scikit-Learn

• Machine Learning with Scikit-Learn—Full Course
• How I Used Regression Analysis to Analyze Life Expectancy with Scikit-Learn and Statsmodels

Seaborn

• Python Data Analysis: How to Visualize a Kaggle Dataset with Pandas, Matplotlib, and Seaborn

Matplotlib

• Matplotlib Course – Learn Python Data Visualization
• How to Embed Interactive Python Visualizations on Your Website with Python and Matplotlib
• How to Create Auto-Updating Data Visualizations in Python with IEX Cloud, Matplotlib, and AWS
• Python Data Analysis: How to Visualize a Kaggle Dataset with Pandas, Matplotlib, and Seaborn
• Python Data Science – A Free 12-Hour Course for Beginners. Learn Pandas, NumPy, Matplotlib, and More

TensorFlow

• Learn How to Use TensorFlow 2.0 For Machine Learning in This Massive Free Course
• Learn Natural Language Processing with Python and TensorFlow 2.0 – No Machine Learning Experience Required
• Learn to Apply Deep Learning with Pytorch in This Full Course
• Learn to Develop Neural Networks Using TensorFlow 2.0 In This Beginner's Course

PyTorch

• PyTorch Tensor Methods – How to Create Tensors in Python
• How to Build a Neural Network from Scratch with PyTorch
• Learn How to Use PyTorch for Deep Learning
• Free Live Course: Deep Learning with PyTorch

Keras

• Keras Course – Learn Python Deep Learning and Neural Networks
• How to Classify Butterflies with Deep Learning in Keras
• How to Build Your First Neural Network to Predict House Prices with Keras

How to Learn Virtualization and Containerization

Once you learn the basics of Linux, you'll want to learn about virtual machines / virtualization, and containerization.

The main difference between the two is that virtualization is an abstraction on the hardware level, and allows multiple emulated machines to run on a single machine.

For example, with virtualization, you can split up a single machine's resources (CPU, SSD, RAM, and so on) into two smaller machines, with one running Windows server and another running Ubuntu.

On the other hand, containerization is emulation on the software level. This allows you to package applications and all their dependencies into a small, portable container that runs pretty much anywhere.

With containerization, you have a Node.js app that runs on Ubuntu. You can include your app, all its node_module files, and even the entire Ubuntu OS, in a small ~1 GB container. VMs are typically between 20 - 160 GB in size.

But both are useful, and serve different purposes. Check out our tutorials below to learn more about both virtualization and containerization.

Virtual Machines

• Linux Server Virtualization: The Basics
• VirtualBox: Are You Getting Your Money’s Worth?
• How to install Ubuntu on VirtualBox
• What is a Virtual Machine And How to Setup a VM on Windows, Linux, and Mac

Docker

• What is Docker Used For? A Docker Container Tutorial for Beginners
• A Comprehensive Introduction to Docker, Virtual Machines, and Containers
• Docker 101 - How to Get from Creation to Deployment
• A Beginner’s Guide to Docker — How to Create Your First Docker Application
• Docker Remove Image: How to Delete Docker Images Explained with Examples
• How to Get A Docker Container IP Address - Explained with Examples
• How to Install Docker on Ubuntu 18.04 [Guide for both CE and EE]
• How to Run Docker on Windows 10 Home Edition
• How to Debug a Node.js Application with VSCode, Docker, and Your Terminal
• Docker Exec - How to Run a Command Inside a Docker Image or Container
• Where are Docker Images Stored? Docker Container Paths Explained
• Docker Data Containers
• Docker Image Guide: How to Delete Docker Images, Stop Containers, and Remove All Volumes
• Cleaning Up Docker
• A Quick Introduction to Docker Tags
• How to Enable Live-reload on Docker-based Applications with Docker Volumes
• A Practical Introduction to Docker Compose
• A Beginner’s Guide to Docker — How to Create a Client/Server Side with docker-compose
• Docker Deployment Guide – How to Deploy Containers to the Cloud with AWS Lightsail
• The Docker Handbook – 2021 Edition
• Free 4-Hour Course on Docker and Kubernetes
• Learn DevOps Basics with This Free 2-hour Docker Course

Kubernetes

• Kubernetes VS Docker: What's the Difference? Explained With Examples
• A Simple Introduction to Kubernetes Container Orchestration
• A Friendly Introduction to Kubernetes
• How to Develop Kubernetes Applications with Joy
• What is a Helm Chart? A Tutorial for Kubernetes Beginners
• Helm Charts Tutorial: The Kubernetes Package Manager Explained
• Learn Kubernetes in Under 3 Hours: A Detailed Guide to Orchestrating Containers
• Docker Swarm vs Kubernetes: How to Setup Both in Two Virtual Machines
• The Kubernetes Handbook
• An Introduction to the Helm Package Manager for Kubernetes

How to Learn Cloud Computing

Once you learn the basics about virtual machines, you'll want to learn about cloud computing.

Not too long ago, if a company wanted to run a server to host a website, they would have to build and maintain the server themselves.

With cloud computing, you can spin up virtual machine running your OS of choice in a few minutes. Better yet, the company hosting your VM will take care of the general maintenance for you, and ensure that the server is online and highly available.

And with cloud computing, you don't even have to have a server running 24/7 – with certain services, you can run a function and just pay for the milliseconds of time it took to complete.

Check out our tutorials below to learn more about cloud computing on the three big players in this space: Amazon Web Services, Google Cloud Platform, and Microsoft Azure.

Amazon Web Services (AWS)

• AWS Training – Learn the Basics of Amazon Web Services
• AWS Cheatsheet: The Top 5 Things to Learn First When Getting Started with Amazon Web Services
• Everything You Need to Know About AWS S3
• How to Spin Up a Remote Server on AWS
• How to Install the AWS Elastic Beanstalk CLI on a Mac
• AWS CLI Tutorial – How to Install, Configure, and Use AWS CLI to Understand Your Resource Environment
• How to Host a Static Site in the Cloud in Four Steps
• How to Host and Deploy a Static Website or JAMstack App to AWS S3 and CloudFront
• How to Host your Static Website with AWS - A Beginner's Guide
• Cron Job AWS Lambda Functions Tutorial – How to Schedule Tasks
• How to Build and Deploy AWS Applications on Your Local Machine
• How to Build a Serverless Application Using AWS SAM
• How to Build a Serverless Application Using AWS Chalice
• How to Design Almost Any Backend and Deploy It to AWS with No Code
• How to Add Authentication to a Vue App Using AWS Amplify
• How to Build a Screenshot Capture API Using Terraform, AWS API Gateway, and AWS Lambda
• How to Build Your Own Serverless Subscriber List with Go and AWS
• How to Secure Your Workloads on AWS
• How to Build a Full Stack App with AWS Amplify and React
• How to Use Github Actions to Deploy a Next.js Website to AWS S3
• How to Optimize your AWS Cloud Architecture Costs
• The Complete Guide to building an API with TypeScript and AWS
• How to Build and Deploy a GraphQL Server in AWS Lambda Using Node.js and CloudFormation
• How to Build a Complete Back End System with Serverless
• Simple Site Hosting with Amazon S3 and HTTPS
• Pass the AWS SysOps Administrator Associate Exam With This Free 14-Hour Course
• DynamoDB Cheatsheet – Everything you need to know about Amazon Dynamo DB for the 2020 AWS Certified Developer Associate Certification
• Pass the AWS Developer Associate Exam With This Free 16-Hour Course

Google Cloud Platform (GCP)

• Google Cloud Platform Tutorial: From Zero to Hero with GCP
• How to Create and Connect to Google Cloud Virtual Machine with SSH
• How to Pass Almost Every Google Cloud Platform Professional Certification Exam
• How to Run Laravel on Google Cloud Run with Continuous Integration - a Step by Step Guide
• How to perform CRUD operations using Blazor and Google Cloud Firestore
• The JavaScript + Firestore Tutorial for 2020: Learn by Example
• Firestore: How to Stay Within the Limits of Firebase's New Database Free Tier
• Build an Instagram Clone with React Native, Firebase Firestore, Redux, and Expo
• How to Get Started with Firebase Using Python
• How to Add Authentication to a Vue App Using Firebase
• How to Build an Android App with Firebase and Kotlin
• How to Authenticate Users And Save Data in a Database Using Firebase
• How to Set Up Google Login in React Native & Firebase
• How to Build a TodoApp Using ReactJS and Firebase
• How to Build an Event Booking App Using HTML, CSS, JavaScript, and Firebase
• How I Got Netlify Functions, Firebase, and GraphQL to Work Together At Last
• You Can't Get There from Here: How Netlify Lambda and Firebase Led Me to a Serverless Dead End
• Build an Evernote clone using React and Firebase (Video Tutorial)
• Learn How to Create a Social Media App from Scratch Using React, Firebase, Redux, and Express

Microsoft Azure

• How to Get Started with Microsoft Azure - Function Apps, HTTP Triggers, and Event Queues
• A Quick Introduction to Azure Function Proxies
• Making Sense of Azure Durable Functions
• An Introduction to Azure Durable Functions: Patterns and Best Practices
• How to Implement Azure Serverless with Blazor WebAssembly
• How to Use Azure Functions to Process High Throughput Messages
• Azure Fundamentals Certification (AZ-900) – Pass the Exam With This Free 3-Hour Course

How to Learn DevOps

Now that you know virtualization, containerization, and cloud computing, it's time to take things to the next level.

DevOps is equal parts software development and IT operations. If you're involved in DevOps, not only can you build an application, but you can spin up the VMs, deploy the app, monitor the servers, and scale the app and resources as more people start using it.

There's a lot to cover, and these articles should get you started on your DevOps path.

General DevOps

• The 2020 Web Developer Roadmap – A Visual Guide to Becoming a Front End, Back End, or DevOps Developer
• How to Make Your Startup’s Cloud More Stable: 4 Practical DevOps Tips
• Learn DevOps Basics with This Free 2-hour Docker Course
• Want to learn DevOps? This Free 3-Hour Course will Teach You the Prerequisites to Get Started

Travis CI

• How to Stop Errors Before They Ever Hit Your Codebase with Travis CI and ESLint
• How to Automate Deployment on GitHub-Pages with Travis CI
• How to Set Up Advanced Automatic Deployment with Travis CI
• How to Use Travis CI and GitHub for Your Web Development Workflow’s Heavy Lifting

Jenkins

• You Rang, M'Lord? Docker in Docker with Jenkins Declarative Pipelines
• How to Make an iOS On-demand Build System with Jenkins and Fastlane

GoCD

• How to Integrate DangerJS into GoCD Pipelines

Ansible

• How to Use Ansible to Manage Your AWS Resources
• Why You Might Need Ansible and Not Even Know It

Chef

• A Complete Beginner’s Guide to Chef and Infrastructure As Code

Kafka

• How to Implement Change Data Capture Using Kafka Streams
• What to Consider for Painless Apache Kafka Integration
• How to Ingest Data into Neo4j from a Kafka Stream
• How to Build a Aimple Chatops Bot with Kafka, Grafana, Prometheus, and Slack

Terraform

• Terraform Workflow: How to Work Individually and in a Team
• What Are Terraform Modules and How Do They Work?
• How to Use Terraform to Automate Your AWS Cloud Infrastructure – Tutorial
• How to Extend Your AWS Infrastructure with Direct Connect Using Terraform
• How to Manage Wavefront Resources Using Terraform
• How to Build a Screenshot Capture API Using Terraform, AWS API Gateway, and AWS Lambda

In Closing

Thanks for reading this far. If you found this compilation of resources helpful, share it with your friends so they can learn something, too.

Was there an article or video tutorial you liked? Did I miss anything? Let me know over on Twitter.

If you search for these codes online, you'll often find tables that are really just images. These are inaccessible to people with disabilities, and inconvenient to use – you can't search for something and copy-paste code you want.

To make your life easier, I created a table from the best sources I could find. Just scroll or use Ctrl/Cmd + f to find the value you're looking for.

Here's the traditional ASCII table:

And here's the extended ASCII table for the web:

Sources for both tables: ASCII, Windows-1252, and ASCII Code - The extended ASCII table

Note that there are several other extended ASCII tables like ISO 8859, ISO 8859-1, ISO 8859-2, and so on. The extended table above is based on Windows-1252 ASCII table, and is what web browsers used before UTF-8 was created.

Even though we've largely moved past ASCII and its limitations to modern character encodings like UTF-8, all of the HTML values in the tables above will still work on current browsers.

If you'd like to learn more about character encoding, ASCII, and unicode characters, check out this article.

How to Use ASCII Characters in HTML

ASCII characters can be useful for web developers, like if you need to manually insert whitespace or a special character into your HTML.

If you look at the tables above, you'll see that every ASCII character has an HTML entity number, and some also have an HTML entity name.

Each HTML entity number and name starts with an ampersand (&) and ends with a semicolon (;).

You can use these anywhere in your HTML to reliably render that character, no matter what the a person's browser language is set to.

In general, it's recommended to use the HTML entity name whenever possible – they're easier to remember, and are self-descriptive for any other developers that read your code.

For example, if you need to render the Euro currency sign (€), the HTML entity name € is much easier to remember than €.

Here are some of the more common ASCII characters you'll use in HTML, along with some examples.

How to Use the   Non-Breaking Space Character Code

There are times when you'll want to add a space, but want to keep other words or characters together, even if there's a limited amount of horizontal space.

An easy way to do this would be to use a non-breaking space character, for example:

<span>Superpower:&nbsp;listening</span>

Which renders the following:

Superpower: listening

Sure, it looks like there's a normal space between the colon and the "l" in "listening", but the   character makes it so that the line will never break there.

For example, here's that code with an outline around the span element, and with a width of 150 pixels:

Superpower: listening

With a normal space character, the line would break like this:

Superpower: listening

You can even insert several non-breaking spaces in a row to create make-shift text padding:

<span>Superpower:&nbsp;&nbsp;&nbsp;listening</span>

How to Make a Newline in HMTL using the 
 Newline Character Code

While you can use JavaScript to render \n as a newline in HTML, that's not always an option. You might only have access to the HTML code, or just want to keep things simple.

In that case, you can use the newline / line feed character code to force a newline:

<div style="margin-bottom: 1.5em;">
  <label for="example-1">Example 1: </label>
  <textarea name="example-1" id="example-1">Hello&#10;freeCodeCamp</textarea>
</div>

Which renders the following:

And yes, you can use these back-to-back, too:

<div style="margin-bottom: 1.5em;">
  <label for="example-2">Example 2: </label>
  <textarea name="example-2" id="example-2" style="height: 150px;">Hello&#10;&#10;&#10;freeCodeCamp</textarea>
</div>

However, note that the 
 character doesn't override the default styling of the element it's used in. For example, the p element doesn't allow line breaks within the element – you'd have to create another paragraph element:

<p style="outline: red 1px solid;">This is paragraph text and &#010; whoops there is a new line.</p>

The code above renders everything to a single line:

This is paragraph text and whoops there is a new line.

To override this behavior, just set the white-space property to pre-wrap:

<p style="outline: red 1px solid; white-space: pre-wrap;">This is paragraph text and &#010; whoops there is a new line.</p>

This is paragraph text and whoops there is a new line.

Thanks for Reading

If you found this helpful, please share it with your friends so more people can get started using ASCII characters.

Also, if you liked this article, let me know over on Twitter.

To make your life easier, the freeCodeCamp community has made this simple cheat sheet. Just scroll or use Ctrl/Cmd + f to find the value you're looking for.

Here are the charts, followed by some explanations of what they mean.

• /31 is a special case detailed in RFC 3021 where networks with this type of subnet mask can assign two IP addresses as a point-to-point link.

And here's a table of the decimal to binary conversions for subnet mask and wildcard octets:

Note that the wildcard is just the inverse of the subnet mask.

If you are new to network engineering, you can get a better idea of how computer networks work here.

Finally, this cheat sheet and the rest of the article is focused on IPv4 addresses, not the newer IPv6 protocol. If you'd like to learn more about IPv6, check out the article on computer networks above.

How Do IP Address Blocks Work?

IPv4 addresses like 192.168.0.1 are really just decimal representations of four binary blocks.

Each block is 8 bits, and represents numbers from 0-255. Because the blocks are groups of 8 bits, each block is known as an octet. And since there are four blocks of 8 bits, every IPv4 address is 32 bits.

For example, here's what the IP address 172.16.254.1 looks like in binary:

Source: IPv4

To convert an IP address between its decimal and binary forms, you can use this chart:

The chart above represents one 8 bit octive.

Now lets say you want to convert the IP address 168.210.225.206. All you need to do is break the address into four blocks (168, 210, 225, and 206), and convert each into binary using the chart above.

Remember that in binary, 1 is the equivalent to "on" and 0 is "off". So to convert the first block, 168, into binary, just start from the beginning of the chart and place a 1 or 0 in that cell until you get a sum of 168.

For example:

128 + 32 + 8 = 168, which in binary is 10101000.

If you do this for the rest of the blocks, you'd get 10101000.11010010.11100001.11001110.

What is Subnetting?

If you look at the table above, it can seem like the number of IP addresses is practically unlimited. After all, there are almost 4.2 billion possible IPv4 addresses available.

But if you think about how much the internet has grown, and how many more devices are connected these days, it might not surprise you to hear that there's already a shortage of IPv4 addresses.

Because the shortage was recognized years ago, developers came up with a way to split up an IP address into smaller networks called subnets.

This process, called subnetting, uses the host section of the IP address to break it down into those smaller networks or subnets.

Generally, an IP address is made up of network bits and host bits:

Source: What is IPv4

So generally, subnetting does two things: it gives us a way to break up networks into subnets, and allows devices to determine whether another device/IP address is on the same local network or not.

A good way to think about subnetting is to picture your wireless network at home.

Without subnetting, every internet connected device would need its own unique IP address.

But since you have a wireless router, you just need one IP address for your router. This public or external IP address is usually handled automatically, and is assigned by your internet service provider (ISP).

Then every device connected to that router has its own private or internal IP address:

Source: What Is My IP Address?

Now if your device with the internal IP address 192.168.1.101 wants to communicate with another device, it'll use the IP address of the other device and the subnet mask.

The combination of the IP addresses and subnet mask allows the device at 192.168.1.101 to figure out if the other device is on the same network (like the device at 192.168.1.103), or on a completely different network somewhere else online.

Interestingly, the external IP address assigned to your router by your ISP is probably part of a subnet, which might include many other IP addresses for nearby homes or businesses. And just like internal IP addresses, it also needs a subnet mask to work.

How Subnet Masks Work

Subnet masks function as a sort of filter for an IP address. With a subnet mask, devices can look at an IP address, and figure out which parts are the network bits and which are the host bits.

Then using those things, it can figure out the best way for those devices to communicate.

If you've poked around the network settings on your router or computer, you've likely seen this number: 255.255.255.0.

If so, you've seen a very common subnet mask for simple home networks.

Like IPv4 addresses, subnet masks are 32 bits. And just like converting an IP address into binary, you can do the same thing with a subnet mask.

For example, here's our chart from earlier:

Now let's convert the first octet, 255:

Pretty simple, right? So any octet that's 255 is just 11111111 in binary. This means that 255.255.255.0 is really 11111111.11111111.11111111.00000000 in binary.

Now let's look at a subnet mask and IP address together and calculate which parts of the IP address are the network bits and host bits.

Here are the two in both decimal and binary:

With the two laid out like this, it's easy to separate 192.168.0.101 into network bits and host bits.

Whenever a bit in a binary subnet mask is 1, then the same bit in a binary IP address is part of the network, not the host.

Since the octet 255 is 11111111 in binary, that whole octet in the IP address is part of the network. So the first three octets, 192.168.0, is the network portion of the IP address, and 101 is the host portion.

In other words, if the device at 192.168.0.101 wants to communicate with another device, using the subnet mask it knows that anything with the IP address 192.168.0.xxx is on the same local network.

Another way to express this is with a network ID, which is just the network portion of the IP address. So the network ID of the address 192.168.0.101 with a subnet mask of 255.255.255.0 is 192.168.0.0.

And it's the same for the other devices on the local network (192.168.0.102, 192.168.0.103, and so on).

What Does CIDR Mean and What is CIDR Notation?

CIDR stands for Classless Inter-Domain Routing, and is used in IPv4, and more recently, IPv6 routing.

_Source: Classless Inter-Domain Routing_

CIDR was introduced in 1993 as a way to slow the usage of IPv4 addresses, which were quickly being exhausted under the older Classful IP addressing system that the internet was first built on.

CIDR encompasses a couple of major concepts.

The first is Variable Length Submasking (VLSM), which basically allowed network engineers to create subnets within subnets. And those subnets could be different sizes, so there would be fewer unused IP addresses.

The second major concept CIDR introduced is CIDR notation.

CIDR notation is really just shorthand for the subnet mask, and represents the number of bits available to the IP address. For instance, the /24 in 192.168.0.101/24 is equivalent to the IP address 192.168.0.101 and the subnet mask 255.255.255.0.

How to Calculate CIDR Noation

To figure out the CIDR notation for a given subnet mask, all you need to do is convert the subnet mask into binary, then count the number of ones or "on" digits. For example:

Because there's three octets of ones, there are 24 "on" bits meaning that the CIDR notation is /24.

You can write it either way, but I'm sure you'll agree that /24 is a whole lot easier to write than 255.255.255.0.

This is usually done with an IP address, so let's take a look at the same subnet mask with an IP address:

The first three octets of the subnet mask are all "on" bits, so that means that the same three octets in the IP address are all network bits.

Let's take a look at the last forth octet in a bit more detail:

In this case, because all the bits for this octet in the subnet mask are "off", we can be certain that all of the corresponding bits for this octet in the IP address are part of the host.

When you write CIDR notation it's usually done with the network ID. So the CIDR notation of the IP address 192.168.0.101 with a subnet mask of 255.255.255.0 is 192.168.0.0/24.

To see more examples of how to calculate the CIDR notation and network ID for a given IP address and subnet mask, check out this video:

Classful IP Addressing

Now that we've gone over some basic examples of subnetting and CIDR, let's zoom out and look at what's known as Classful IP addressing.

Back before subnetting was developed, all IP addresses fell into a particular class:

Source: Subnetting for dummies

Note that there are class D and E IP addresses, but we'll go into these in more detail a bit later.

Classful IP addresses gave network engineers a way to provide different organizations with a range of valid IP addresses.

There were a lot of issues with this approach that eventually lead to subnetting. But before we get into those, let's take a closer look at the different classes.

Class A IP Addresses

For Class A IP addresses, the first octet (8 bits / 1 byte) represent the network ID, and the remaining three octets (24 bits / 3 bytes) are the host ID.

Class A IP addresses range from 1.0.0.0 to 127.255.255.255, with a default mask of 255.0.0.0 (or /8 in CIDR).

This means that Class A addressing can have a total of 128 (2⁷) networks and 16,777,214 (2²⁴-2) usable addresses per network.

Also, note that the range 127.0.0.0 to 127.255.255.255 within the Class A range is reserved for host loopback address (see RFC5735).

Class B IP Addresses

For Class B IP addresses, the first two octets (16 bits / 2 bytes) represent the network ID and the remaining two octets (16 bits / 2 bytes) are the host ID.

Class B IP addresses range from 128.0.0.0 to 191.255.255.255, with a default subnet mask of 255.255.0.0 (or /16 in CIDR).

Class B addressing can have 16,384 (2¹⁴) network addresses and 65,534 (2¹⁶) usable addresses per network.

Class C IP Addresses

For Class C IP addresses, the first three octets (24 bits / 3 bytes) represent the network ID and the last octet (8 bits / 1 bytes) is the host ID.

Class C IP Addresses range from 192.0.0.0 to 223.255.255.255, with a default subnet mask of 255.255.255.0 (or /24 in CIDR).

Class C translates to 2,097,152 (2²¹) networks and 254 (2⁸-2) usable addresses per network.

Class D and Class E IP Addresses

The last two classes are Class D and Class E.

Class D IP addresses are reserved for multicasts. They occupy the range from 224.0.0.0 through 239.255.255.255.

Class E IP addresses are experimental, and are anything over 240.0.0.0.

The Issue with Classful IP Addresses

The main issue with classful IP addresses is that it wasn't efficient, and could lead to a lot of wasted IP addresses.

For example, imagine that you're part of a large organization back then. Your company has 1,000 employees, meaning that it would fall into class B.

But if you look above, you'll see that a class B network can support up to 65,534 usable addresses. That's way more than your organization would likely need, even if each employee had multiple devices with a unique address.

And there was no way your organization could fall back to class C – there just wouldn't be enough usable IP addresses.

So while classful IP addresses were used around the time IPv4 addresses became widespread, it quickly became clear that a better system would be necessary to ensure we wouldn't use up all of the ~4.2 billion usable addresses.

Classful IP addresses haven't been used since they were replaced by CIDR in 1993, and are mostly studied to understand early internet architecture, and why subnetting is important.

I hope this cheat sheet has been a helpful reference for you

If you found this helpful, please share it with your friends so more people can benefit from it.

Also, feel free to reach out on Twitter and let me know what you think.

But it took us a long time to get to this point, and developers came up with a number of techniques to adapt sites to different screen sizes before settling on responsive web design.

In this article, we'll take a look at the early web, different ways developers would adapt a site to different screen sizes, and modern responsive design.

The first website

On August 6, 1991, the first website ever came online. The site was created by Tim Berners-Lee, and detailed the World Wide Web (W3) project. It originally ran off of a NeXT computer at CERN, the European Organization for Nuclear Research.

Though the original site went offline, CERN launched a project in 2013 to "preserve some of the digital assets that are associated with the birth of the web." Everything from the original machine names, IP addresses, and URL of the first website was restored to the best of their ability.

While the original 1991 version of the website was lost, they were able to restore a version from 1992. If you'd like to check out yourself, it now lives at http://info.cern.ch/hypertext/WWW/TheProject.html.

Early web design

The web changed rapidly since Berners-Lee's first website went online. Every year, thousands of websites were launched, and new design techniques developed as rapidly as web technology itself.

In the early 90s, web design was very simple. Most websites used simple header, paragraph, and early list tags like <dl>, <dt>, and <dd> tags to organize information.

Yahoo in 1994 (Source)

More complex sites had to use tables to control the layout of the page, and create things like navigation and sidebars that are common today.

Though methods of styling websites existed in some form or another, Håkon Wium Lie first proposed CSS in 1994 while working at CERN. Then in 1996, the World Wide Web Consortium (W3C), also founded by Berners-Lee, released the first formal specification for Cascading Style Sheets, level 1 (CSS1).

With CSS and other technologies like JavaScript and Flash, web developers could get more creative and playful with their designs.

Internet Archive in 1997 (Source)

By the late 90s to early 2000s, patterns in web design and user experience had emerged, and websites started to look like the ones we use today:

DeviantArt in 2000 (Source)

Early responsive design methods

With the wider adoption of CSS, developers had to spend a lot more time on things like layout, design, and typography. But one thing they didn't have to worry much about was adapting to different screen sizes. At the time, most people's monitors were either 640x480, 800x600, or 1024×768.

Still, developers found a few different ways to work with these monitor or browser window sizes, which eventually lead to responsive web design as we know it today. Let's take a look at a few of them.

Liquid layouts

According to MDN, the two main layout options developers had early on were either fixed-width, where content was set to an exact, to-the-pixel width, or liquid, where content was sized using percentages.

MDN has some good examples of both fixed-width and liquid layouts.

Liquid layouts, first coined and popularized by Glenn Davis, were revolutionary at the time, and can be considered one of the first major methods of responsive web design.

While fixed-width layouts might break if your monitor wasn't the same resolution as the one the site was designed on, liquid layouts were much more flexible, and could adapt to different monitor resolutions or browser sizes.

An example of liquid design (Source)

But it wasn't perfect. On liquid layout sites, content could overflow and text could break on smaller screens, and on larger screens there could be a lot of unnecessary white space.

Resolution dependent layouts

In 2004, Cameron Adams wrote a blog post where he detailed a method of using JavaScript to swap out different stylesheets based on the size of the browser window.

This technique came to be known as resolution dependent layouts, named after Adams' blog post. Even though it was a bit of extra work for developers at the time, it allowed more fine-grained control over the layout of the site, and functioned as an early version of CSS breakpoints before those were a thing.

Adams' example of a resolution dependent layout (Source)

The downside of this method was that developers had to create different stylesheets for each target resolution, and ensure that the styling and JavaScript worked across all major browsers.

There were a whole lot of browsers at the time, and sometimes they handled HTML, CSS, and JavaScript differently. In fact, that's one of the major reasons that jQuery first became so popular at the time – it abstracted a lot of the browser differences away so you only had to write your code once.

Mobile subdomains

All this was happening right around the time that more mobile devices were going online. Nokia, Blackberry, and eventually, the iPhone, came with their own browsers. And suddenly developers had to come up with different ways to tailor the online experience to different screen sizes.

One clever way that developers came up with to handle all these new devices was to create a version of a site just for mobile and make it available on a subdomain.

Mobile subdomains, sometimes called m-dots or m subdomains, are just that – a mobile specific version of a site that's hosted on a subdomain, typically m.

For example, the desktop version of Facebook is at facebook.com, or more specifically, at the www subdomain, www.facebook.com:

The desktop version of Facebook

But the mobile version of Facebook is at m.facebook.com:

The mobile version of Facebook

If you sign in to both applications and look at them side-by-side, they look pretty similar. But under the hood, they're really two separate applications – the mobile version is quite a bit lighter, and is optimized to work on smaller screens and on most mobile browsers.

Mobile subdomains are still around today, and there are some definite advantages to this approach. With a separate version of a site on a mobile subdomain, developers can ensure the site loads quickly, and uses less mobile data.

Also, having a mobile subdomain allows developers to really tailor the SEO (search engine optimization) to mobile devices, and drive more traffic to the mobile version of the site.

But there are some definite downsides as well. Going with mobile subdomains means that developers have to maintain two, sometimes very different, websites instead of just one.

And mobile subdomains can sometimes be frustrating. I'm sure many of you know the pain of trying to visit the desktop version of a site only to get redirected to the mobile version.

Not only that, but developers have to figure out which devices to redirect, and under what conditions.

Traditionally this was done by checking the user agent of the visitor's browser, but with the number of devices coming out at the time, it was a constant moving target. Eventually developers started checking the width of the browser window with JavaScript and redirecting based on that.

Now you might be thinking, that sounds a lot like responsive web design today. And it's true – in many ways, modern responsive web design is a, well, response, to past techniques. It takes a lot of the good ideas that developers came up with and builds on top of them.

Responsive web design

By the late 2000s, designing a site to work on different screen sizes was quickly becoming the norm. But to do this, developers had to come up with a lot of tricks.

Even for simple layouts, developers had to use things like the max-width: 100% trick for flexible images, and float with clearfixes to keep things from breaking.

Then in 2010, a developer named Ethan Marcotte published an article in A List Apart where he outlined a new way of thinking about flexible web design. In the article, Marcotte listed three important components for creating a responsive website: fluid grids, flexible images, and media queries.

Beyond outlining the major components of responsive web design, Marcotte is also credited for coining the term itself, which was named after the title of the 2010 article.

Fluid grids

Fluid grids are the idea that a website should adopt a different number of flexible columns that grow or shrink depending on the current screen size. On mobile devices, there should be one or two flexible columns of content, and on desktops there can be more:

Ethan Marcott's website on a mobile device (Source)

The same page on a desktop (Source)

You can read more of Marcott's thoughts on fluid grids in this earlier article.

Flexible images

Flexible images are the idea that images should grow or shrink along with the fluid grid they're in:

Smaller photos on a mobile device (Source)

Larger photos on a desktop (Source)

A common way to do this is with the max-width trick mentioned above.

If you have an image in a container, it could overflow, especially if the container is responsive. For example, if you have the following, the image could overflow like this:

<style>
  .container {
    width: 250px;
    outline: solid;
    text-align: center;
  }
</style>
<body>
  <div class="container">
    <img src="./images/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg" />
    <p>Example image</p>
  </div>
</body>

But if you set its max-width to 100%, the image will not overflow:

<style>
  .container {
    width: 250px;
    outline: solid;
    text-align: center;
  }

  .my-image {
    max-width: 100%;
  }
</style>
<body>
  <div class="container">
    <img
      class="my-image"
      src="./images/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg"
    />
    <p>Example image</p>
  </div>
</body>

And will even resize with the parent container:

<style>
  .container {
    width: 600px;
    outline: solid;
    text-align: center;
  }

  .my-image {
    max-width: 100%;
  }
</style>
<body>
  <div class="container">
    <img
      class="my-image"
      src="./images/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg"
    />
    <p>Example image</p>
  </div>
</body>

Media queries

Media queries refer to CSS media queries that were available in 2010, but not widely adopted until its official release as a W3 Recommendation in 2012.

A media query is just a CSS rule that gets triggered based on options like the media type (screen, print, etc.) and media features (width, height, and so on):

@media screen and (min-width: 500px) {
  background-color: red;
}

Even though they were a bit simpler back then, media queries allowed developers to implement breakpoints, which are still used in responsive web design today.

A breakpoint is just when a website changes layouts or other styles based on the device or browser window's width. For example, here's the full code for the snippet above:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <style>
    .container {
      width: 250px;
      outline: solid;
      text-align: center;
    }

    .my-image {
      max-width: 100%;
    }

    @media screen and (max-width: 500px) {
      .container {
        background-color: red;
      }
    }
  </style>
  <body>
    <div class="container">
      <img
        class="my-image"
        src="./images/kelly-sikkema-v9FQR4tbIq8-unsplash.jpg"
      />
      <p>Example image</p>
    </div>
  </body>
</html>

Note that it's important to use a viewport meta tag for media queries to work the way you expect. This works in most cases:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

With the media query above, here's what the container looks like when the resolution is 500px wide or below:

And here's what it looks like when the resolution is 501px or greater:

Mobile-first vs Desktop-first

More recently, there are two main approaches to responsive web design: mobile-first or desktop-first. Both are totally valid options, and each has its pros and cons.

If you're designing a website from scratch, many developers today feel that mobile-first is the way to go – mobile designs tend to be single column, and are much easier.

If you want to go the mobile-first route, you would write your styles normally, then create breakpoints like the one above with min-width once you start creating the tablet and desktop layouts.

But maybe you're working on an older site that was designed with desktops in mind, and need to adapt it to smaller mobile devices. In this case you'd use media queries with max-width to target those lower resolutions.

You can read more about mobile-first and desktop-first design philosophies in this article.

In closing

That's it! Now you know a bit about the history of responsive web design, and all the fits and starts that developers went through before everything we have today.

If you'd like to take a deep dive into responsive web design, Flexbox, and other modern techniques, check out this 4 hour tutorial on our YouTube channel:

And if you'd like to learn about CSS Grid, the new way to create complex, flexible layouts, check out one of our written tutorials here.

What's your history with responsive web design? Did I miss something? Let me know over on Twitter.

Whether you know it or not, cookies are everywhere, and for better or worse, they completely changed the way we use the web.

In this article, we'll go over the history of cookies, how they work, how to use them in JavaScript, and some security concerns to keep in mind.

A brief history of cookies

HTTP, or the Hypertext Transfer Protocol, is a stateless protocol. According to Wikipedia, its a stateless protocol because it "does not require the HTTP server to retain information or status about each user for the duration of multiple requests."

You can still see this today with simple websites – you type in the URL to the browser, the browser makes a request to a server somewhere, and the server returns the files to render the page and the connection is closed.

Now imagine that you need to sign in to a website to see certain content, like with LinkedIn. The process is largely the same as the one above, but you're presented with a form to enter in your email address and password.

You enter that information in and your browser sends it to the server. The server checks your login information, and if everything looks good, it sends the data needed to render the page back to your browser.

But if LinkedIn was truly stateless, once you navigate to a different page, the server would not remember that you just signed in. It would ask you to enter in your email address and password again, check them, then send over the data to render the new page.

That would be super frustrating, wouldn't it? A lot of developers thought so, too, and found different ways to create stateful sessions on the web.

The invention of the HTTP cookie

Lou Montoulli, a developer at Netscape in the early 90s, had a problem – he was developing an online store for another company, MCI, which would store the items in each customer's cart on its servers. This meant that people had to create an account first, it was slow, and it took up a lot of storage.

MCI requested for all of this data to be stored on each customer's own computer instead. Also, they wanted everything to work without customers having to sign in first.

To solve this, Lou turned to an idea that was already pretty well known among programmers: the magic cookie.

A magic cookie, or just cookie, is a bit of data that's passed between two computer programs. They're "magic" because the data in the cookie is often a random key or token, and is really just meant for the software using it.

Lou took the magic cookie concept and applied it to the online store, and later to browsers as a whole.

Now that you know about their history, let's take a quick look at how cookies are used to create stateful sessions on the web.

How cookies work

One way to think of cookies is that they're a bit like the wristbands you get when you visit an amusement park.

For example, when you sign in to a website, it's like the process of entering an amusement park. First you pay for a ticket, then when you enter the park, the staff checks your ticket and gives you a wristband.

This is like how you sign in – the server checks your username and password, creates and stores a session, generates a unique session id, and sends back a cookie with the session id.

(Note that the session id is not your password, but is something completely separate and generated on the fly. Proper password handling and authentication is outside the scope of this article, but you can find some in depth guides here.)

While you're in the amusement park, you can go on any ride by showing your wristband.

Similarly, when you make requests to the website you're signed in to, your browser sends your cookie with your session id back to the server. The server checks for your session using your session id, then returns data for your request.

Finally, once you leave the amusement park, your wristband no longer works – you can't use it to get back into the park or go on more rides.

This is like signing out of a website. Your browser sends your sign out request to the server with your cookie, the server removes your session, and lets your browser know to remove your session id cookie.

If you want to get back into the amusement park, you'd have to buy another ticket and get another wristband. In other words, if you want to continue using the website, you'd have to sign back in.

Source: Session vs Token Authentication in 100 Seconds (YouTube)

This is just a simple example of how cookies can be used to keep you signed in to websites. They can be used to remember your setting for dark mode, to track your behavior on a website, and so much more.

How to use cookies

Now that you know about the history of cookies and why they're used, let's look at some of the limitations of using cookies, then dive into some simple examples.

Cookie limitations

Cookies are quite limited compared to some modern alternatives to storing data in the browser like localStorage or sessionStorage. Here's a rundown of cookies compared to those other technologies:

Based on: cookies vs localStorage vs sessionStorage - Beau teaches JavaScript (YouTube)

Cookies are a much older technology, and have a very limited capacity. Still, there's quite a bit you can do with them. And their small size makes it easy for the browser to send cookies with each request to the server.

It's also worth mentioning that browsers only allow cookies to work from one domain for security reasons.

So if you sign in to your bank at, say, ally.com, then cookies will only work within that domain and its subdomains. For example, your ally.com cookie will work on ally.com, ally.com/about, and the subdomain www.ally.com, but not axos.com.

This means that, even if you have accounts and are signed in at both ally.com and axos.com, those sites won't be able to read each other's cookies.

It's important to remember that your cookies are sent with every request you make in the browser. This is very convenient, but has some serious security implications we'll get into later.

Finally, if there's one thing you take away from this article, just remember that cookies are meant to be openly read and sent, so you should never store sensitive information like passwords in them.

How to set a cookie in JavaScript

Cookies are really just strings with key / value pairs. Though you'll probably work with cookies more on the backend, there may be times you'll want to set a cookie on the client side.

Here's how to set a cookie in vanilla JavaScript:

document.cookie = 'dark_mode=true'

Then when you open the developer console, click "Application" and then on the site under "Cookies", you'll see the cookie you just added:

If you take a closer look at your cookie, you'll see that its expiration date is set to Session. That means the cookie will be destroyed when you close your tab / browser.

That might be the behavior you want, like for an online store with payment information.

But if you want your cookie to last longer, you'll need to set an expiration date.

How to set an expiration date on a cookie in JavaScript

To set an expiration date, just set the value of your cookie, then add an expires attribute with a date set sometime in the future:

document.cookie = 'dark_mode=true; expires=Fri, 26 Feb 2021 00:00:00 GMT' // expires 1 week from now

JavaScript's Date object should make this much easier and more flexible. You can read more about the Date object here.

Or you could use the max-age attribute with the number of seconds you'd like your cookie to last:

document.cookie = 'dark_mode=true; max-age=604800'; // expires 1 week from now

Then when that date rolls around, the browser will automatically remove your cookie.

How to update a cookie in JavaScript

Whether or not your cookie has an expiration date, updating it is easy.

Just change the value for your cookie, and the browser will automatically pick it up:

document.cookie = "dark_mode=false; max-age=604800"; // expires 1 week from now

How to set the path for a cookie in JavaScript

Sometimes you'll only want your cookie to work with certain parts of your website. Depending on how your website is set up, one way to do this is with the path attribute.

Here's how to make it so a cookie only works on the about page at /about:

document.cookie = 'dark_mode=true; path=/about';

Now your cookie will only work on /about and other nested subdirectories like /about/team, but not on /blog.

Then when you visit the about page and check your cookies, you'll see it:

How to delete a cookie in JavaScript

To delete a cookie in JavaScript, just set the expires attribute to a date that's already passed:

document.cookie = 'dark_mode=true; expires=Sun, 14 Feb 2021 00:00:00 GMT'; // 1 week earlier

You could also use max-age and pass it a negative value:

document.cookie = 'dark_mode=true; max-age=-60'; // 1 minute earlier

Then when you check for your cookie, it'll be gone:

And that should be everything you need to know about using cookies in vanilla JS.

Everything we covered will work in a pinch, but if you plan on working with cookies extensively, look into libraries like JavaScript Cookie or Cookie Parser.

Security concerns with cookies

In general, cookies are very secure when implemented correctly. Browsers have a lot of built-in limitations that we covered earlier, partly due to the age of the technology, but also to improve security.

Still, there are a few ways that a bad actor can steal your cookie and use it to wreak havoc.

We'll go over some common ways this can happen, and look at different ways to fix it.

Also, note that any code snippets will be in vanilla JavaScript. If you want to implement these fixes on the server, you'll need to look up the exact syntax for your language or framework.

Man-in-the-middle attacks

A man-in-the-middle (MitM) attack describes a broad category of attacks where an attacker sits between a client and a server and intercepts the data going between the two.

Source: Man-in-the-Middle Attacks and How To Avoid Them

This can be done in a lot of ways: by gaining access to or listening in on an insecure website, mimicking a public WiFi router, DNS spoofing, or through malware / adware like SuperFish.

Here's a high-level overview of MitM attacks, and how websites can protect themselves and their users.

Warning: The beginning of the video talks about Mary, Queen of Scotts, and shows an animated depiction of her beheading. It's not overly gruesome, but if you'd like to avoid it, skip ahead to this timestamp:

As a developer, you can greatly reduce the chance of a MitM attack by ensuring that you enable HTTPS on your server, use an SSL certificate from a trusted certificate authority, and ensure your code uses HTTPS instead of the insecure HTTP.

In terms of cookies, you should add the Secure attribute to your cookies so they can only be sent over a secure HTTPS connection:

document.cookie = 'dark_mode=false; Secure';

Just remember that the Secure attribute doesn't actually encrypt any data in your cookie – it just ensures that the cookie can't be sent over an HTTP connection.

However, a bad actor could still possibly intercept and manipulate the cookie. To prevent this from happening, you can also use the HttpOnly parameter:

document.cookie = 'dark_mode=false; Secure; HttpOnly';

Cookies with HttpOnly can only be accessed by the server, and not by the browser's Document.cookie API. This is perfect for things like a login session, where only the server really needs to know if you're signed into a site, and you don't need that information client side.

XSS attacks

An XSS (cross-site scripting) attack describes a category of attacks when a bad actor injects unintended, potentially dangerous code into a website.

These attacks are very problematic because they could affect every person that visits the site.

Source: Cross-site scripting

For example, if a site has a comments section and someone is able to include malicious code as a comment, it's possible that every person who visits the site and reads that comment will be affected.

In terms of cookies, if a bad actor pulls off a successful XSS attack on a site, they could gain access to session cookies and access the site as another signed in user. From there, they may be able to access the other user's settings, buy things as that user and have it shipped to another address, and so on.

Here's a video that gives a high-level overview of the different types of XSS – Reflected, Stored, DOM-based, and Mutation:

As a developer, you'll want to ensure that your server enforces the Same Origin Policy, and that any input you receive from people is properly sanitized.

And like with preventing MitM attacks, you should set the Secure and HttpOnly parameters with any cookies you use:

document.cookie = 'dark_mode=false; Secure; HttpOnly';

CSRF attacks

A CSRF (cross-site request forgery) attack is when a bad actor tricks a person into carrying out an unintended, potentially malicious action.

For example, if you're signed into a site and click on a link in a comment, if that link is part of a CSRF attack, it may lead to you unintentionally changing your sign in details, or even deleting your account.

Source: Cross-site request forgery

While CSRF attacks are somewhat related to XSS attacks, specifically reflected XSS attacks where someone inserts malicious code into a site, each preys on a different type of trust.

According to Wikipedia, while XSS "exploits the trust a user has for a particular site, CSRF exploits the trust that a site has in a user's browser."

Here's a video that explains the basics of CSRF, and gives some useful examples:

As for cookies, one way to prevent possible CSRF attacks is with the SameSite flag:

document.cookie = 'dark_mode=false; Secure; HttpOnly; SameSite=Strict';

There are a few values you can set for SameSite:

• Lax: Cookies are not sent for embedded content (images, iframes, etc.) but are sent when you click on a link or send a request to the origin the cookie is set for. For example, if you're on testing.com and you click on a link to go to test.com/about, your browser will send your cookie for test.com with that request
• Strict: Cookies are only sent when you click on a link or send a request from the origin the cookie is set for. For example, your test.com cookie will only be sent while you're in and around test.com, and not coming from other sites like testing.com
• None: Cookies will be sent with every request, regardless of context. If you set SameSite to None, you must also add the Secure attribute. It's better to avoid this value if possible

Major browsers handle SameSite a bit differently. For example, if SameSite isn't set on a cookie, Google Chrome sets it to Lax by default.

Alternatives to cookies

You might be wondering, if there are so many potential security flaws with cookies, why are we still using them? Surely there must be a better alternative.

These days, you can use either sessionStorage or localStorage to store information that originally used cookies. And for stateful sessions, there's token-based authentication with things like JWT (JSON Web Tokens).

While it may seem like you have to choose between cookie-based or token-based authentication, it's possible to use both. For example, you might want use cookie-based authentication when someone signs in through the browser, and token-based authentication when someone signs in through a phone app.

To muddy the waters a bit more, authentication-as-a-service providers like Auth0 allow you to do both types of authentication.

If you'd like to learn more about web tokens and token-based authentication, check out some of our articles here.

When you give a developer a cookie

That's it! That should be just about everything you need to know to get started with using cookies, and what to watch out for along the way.

Did you find this useful? How do you use cookies? Let me know over on Twitter.

In this article, we'll briefly go over the differences between JSON and JavaScript, then jump into different ways to parse JSON with JavaScript in the browser and in Node.js projects.

Differences between JSON and JavaScript

While JSON looks like regular JavaScript, it's better to think of JSON as a data format, similar to a text file. It just so happens that JSON is inspired by JavaScript syntax, which is why they look so similar.

Let's take a look at JSON objects and JSON arrays and compare them to their JavaScript counterparts.

JSON objects vs JavaScript Object Literals

First, here's a JSON object:

{
  "name": "Jane Doe",
  "favorite-game": "Stardew Valley",
  "subscriber": false
}

The main difference between a JSON object and a regular JavaScript object – also called an object literal – comes down to the quotation marks. All the keys and string type values in a JSON object have to be wrapped in double quotation marks (").

JavaScript object literals are a bit more flexible. With object literals, you don't need to wrap keys and strings in double quotation marks. Instead, you could use single quotation marks ('), or not use any type of quotation mark for the keys.

Here's what the code above might look like as a JavaScript object literal:

const profile = {
  name: 'Jane Doe',
  'favorite-game': 'Stardew Valley',
  subscriber: false
}

Note that the key 'favorite-game' is wrapped in single quotes. With object literals, you'll need to wrap keys where the words are separated by dashes (-) in quotes.

If you'd like to avoid quotation marks, you could rewrite the key to use camel case (favoriteGame) or separate the words with an underscore (favorite_game) instead.

JSON arrays vs JavaScript arrays

JSON arrays work pretty much the same way as arrays in JavaScript, and can contain strings, booleans, numbers, and other JSON objects. For example:

[
  {
    "name": "Jane Doe",
    "favorite-game": "Stardew Valley",
    "subscriber": false
  },
  {
    "name": "John Doe",
    "favorite-game": "Dragon Quest XI",
    "subscriber": true
  }
]

Here's what that might look like in plain JavaScript:

const profiles = [
  {
    name: 'Jane Doe',
    'favorite-game': 'Stardew Valley',
    subscriber: false
  },
  {
    name: 'John Doe',
    'favorite-game': 'Dragon Quest XI',
    subscriber: true
  }
];

JSON as a string

You might be wondering, if there are JSON objects and arrays, couldn't you use it in your program like a regular JavaScript object literal or array?

The reason why you can't do this is that JSON is really just a string.

For example, when you write JSON in a separate file like with jane-profile.json or profiles.json above, that file actually contains text in the form of a JSON object or array, which happens to look like JavaScript.

And if you make a request to an API, it'll return something like this:

{"name":"Jane Doe","favorite-game":"Stardew Valley","subscriber":false}

Just like with text files, if you want to use JSON in your project, you'll need to parse or change it into something your programming language can understand. For instance, parsing a JSON object in Python will create a dictionary.

With that understanding, let's look at different ways to parse JSON in JavaScript.

How to parse JSON in the browser

If you're working with JSON in the browser, you're probably receiving or sending data through an API.

Let's take a look at a couple of examples.

How to parse JSON with fetch

The easiest way to get data from an API is with fetch, which includes the .json() method to parse JSON responses into a usable JavaScript object literal or array automagically.

Here's some code that uses fetch to make a GET request for a developer-themed joke from the free Chuck Norris Jokes API:

fetch('https://api.chucknorris.io/jokes/random?category=dev')
  .then(res => res.json()) // the .json() method parses the JSON response into a JS object literal
  .then(data => console.log(data));

If you run that code in the browser, you'll see something like this logged to the console:

{
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
}

While that looks like a JSON object, it's really a JavaScript object literal, and you can use it freely in your program.

How to stringify JSON with JSON.stringify()

But what if you want to send data to an API?

For instance, say you'd like to send a Chuck Norris joke to the Chuck Norris Jokes API so other people can read it later.

First, you'd write your joke as a JS object literal:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

Then, since you're sending data to an API, you'd need to turn your newJoke object literal into a JSON string.

Fortunately, JavaScript includes a super helpful method to do just that – JSON.stringify():

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

console.log(typeof JSON.stringify(newJoke)); // string

While we're converting an object literal into a JSON string in this example, JSON.stringify() also works with arrays.

Finally, you'd just need to send your JSON stringified joke back to the API with a POST request.

Note that the Chuck Norris Jokes API doesn't actually have this feature. But if it did, here's what the code might look like:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

fetch('https://api.chucknorris.io/jokes/submit', { // fake API endpoint
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(newJoke), // turn the JS object literal into a JSON string
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => {
    console.error(err);
  });

And just like that, you've parsed incoming JSON with fetch and used JSON.stringify() to convert a JS object literal into a JSON string.

How to work with local JSON files in the browser

Unfortunately, it's not possible (or advisable) to load a local JSON file in the browser.

fetch will throw an error if you try to load a local file. For example, say you have a JSON file with some jokes:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

And you want to parse it and create a list of jokes on a simple HTML page.

If you create a page with the following and open it in your browser:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>Fetch Local JSON</title>
  </head>
  <script>
    fetch("./jokes.json", { mode: "no-cors" }) // disable CORS because path does not contain http(s)
      .then((res) => res.json())
      .then((data) => console.log(data));
  </script>
</html>

You'll see this in the console:

Fetch API cannot load file://<path>/jokes.json. URL scheme "file" is not supported

By default, browsers don't allow access to local files for security reasons. This is a good thing, and you shouldn't try to work around this behavior.

Instead, the best thing to do is to convert the local JSON file into JavaScript. Fortunately, this is pretty easy since JSON syntax is so similar to JavaScript.

All you need to do is create a new file and declare your JSON as a variable:

const jokes = [
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

And add it to your page as a separate script:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width" />
    <title>Fetch Local JSON</title>
  </head>
  <script src="jokes.js"></script>
  <script>
    console.log(jokes);
  </script>
</html>

You'll be able to use the jokes array freely in your code.

You could also use JavaScript [modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to do the same thing, but that's a bit outside the scope of this article.

But what if you want to work with local JSON files and have Node.js installed? Let's take a look at how to do that now.

How to parse JSON in Node.js

Node.js is a JavaScript runtime that allows you to run JavaScript outside of the browser. You can read all about Node.js here.

Whether you use Node.js to run code locally on your computer, or to run entire web applications on a server, it's good to know how to work with JSON.

For the following examples, we'll use the same jokes.json file:

[
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "elgv2wkvt8ioag6xywykbq",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/elgv2wkvt8ioag6xywykbq",
    "value": "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."
  },
  {
    "categories": ["dev"],
    "created_at": "2020-01-05 13:42:19.324003",
    "icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
    "id": "ae-78cogr-cb6x9hluwqtw",
    "updated_at": "2020-01-05 13:42:19.324003",
    "url": "https://api.chucknorris.io/jokes/ae-78cogr-cb6x9hluwqtw",
    "value": "There is no Esc key on Chuck Norris' keyboard, because no one escapes Chuck Norris."
  }
]

How to parse a JSON file with require()

Let's start with the easiest method.

If you have a local JSON file, all you need to do is use require() to load it like any other Node.js module:

const jokes = require('./jokes.json');

The JSON file will be parsed for you automatically and you can start using it in your project:

const jokes = require('./jokes.json');

console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

Note that this is synchronous, meaning that your program will stop until it parses the entire file before continuing. Really large JSON files can cause your program to slow down, so just be careful with that.

Also, because parsing JSON this way loads the entire thing into memory, it's better to use this method for static JSON files. If the JSON file changes while your program is running, you won't have access to those changes until you restart your program and parse the updated JSON file.

How to parse a JSON file with fs.readFileSync() and JSON.parse()

This is the more traditional way (for lack of a better term) to parse JSON files in Node.js projects – read the file with fs (file system) module, then parse with JSON.parse().

Let's see how to do this with the fs.readFileSync() method. First, add the fs module to your project:

const fs = require('fs');

Then, create a new variable to store the output of the jokes.json file and set it equal to fs.readFileSync():

const fs = require('fs');
const jokesFile = fs.readFileSync();

fs.readFileSync() takes a couple of arguments. The first is the path to the file you want to read:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json');

But if you log jokesFile to the console now, you'd see something like this:

<Buffer 5b 0a 20 20 7b 0a 20 20 20 20 22 63 61 74 65 67 6f 72 69 65 73 22 3a 20 5b 22 64 65 76 22 5d 2c 0a 20 20 20 20 22 63 72 65 61 74 65 64 5f 61 74 22 3a ... 788 more bytes>

That just means that the fs module is reading the file, but it doesn't know the encoding or format the file is in. fs can be used to load pretty much any file, and not just text-based ones like JSON, so we need to tell it how the file is encoded.

For text-based files, the encoding is usually utf8:

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');

Now if you log jokesFile to the console, you'll see the contents of the file.

But so far we're just reading the file, and it's still a string. We'll need to use another method to parse jokesFile into a usable JavaScript object or array.

To do that, we'll use JSON.parse():

const fs = require('fs');
const jokesFile = fs.readFileSync('./jokes.json', 'utf8');
const jokes = JSON.parse(jokesFile);

console.log(jokes[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

As the name suggests, JSON.parse() takes a JSON string and parses it into a JavaScript object literal or array.

Like with the require method above, fs.readFileSync() is a synchronous method, meaning it could cause your program to slow down if it's reading a large file, JSON or otherwise.

Also, it only reads the file once and loads it into memory. If the file changes, you'll need to read the file again at some point. To make things easier, you might want to create a simple function to read files.

Here's what that might look like:

const fs = require('fs');
const readFile = path => fs.readFileSync(path, 'utf8');

const jokesFile1 = readFile('./jokes.json');
const jokes1 = JSON.parse(jokesFile1);

console.log(jokes1[0].value); // "Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris."

// the jokes.json file changes at some point

const jokesFile2 = readFile('./jokes.json');
const jokes2 = JSON.parse(jokesFile2);

console.log(jokes2[0].value); // "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."

How to parse JSON with fs.readFile() and JSON.parse()

The fs.readFile() method is very similar to fs.readFileSync(), except that it works asynchronously. This is great if you have a large file to read and you don't want it to hold up the rest of your code.

Here's a basic example:

const fs = require('fs');

fs.readFile('./jokes.json', 'utf8');

So far this looks similar to what we did with fs.readFileSync(), except we're not assigning it to a variable like jokesFile. Because it's asynchronous, any code after fs.readFile() it will run before it's finished reading the file.

Instead, we'll use a callback function and parse the JSON inside it:

const fs = require('fs');

fs.readFile('./jokes.json', 'utf8', (err, data) => {
  if (err) console.error(err);
  const jokes = JSON.parse(data);

  console.log(jokes[0].value);
});

console.log("This will run first!");

Which prints the following to the console:

This will run first!
Chuck Norris's keyboard doesn't have a Ctrl key because nothing controls Chuck Norris.

Like with fs.readFileSync(), fs.readFile() loads the file into memory, meaning you'll need to read the file again if it changes.

Also, even though fs.readFile() is asynchronous, it eventually loads the entire file it's reading into memory. If you have a massive file, it may be better to look into Node.js streams instead.

How to stringify JSON with JSON.stringify() in Node.js

Finally, if you're parsing JSON with Node.js, there's a good chance that you'll need to return JSON at some point, maybe as an API response.

Luckily, this works the same way as in the browser – just use JSON.stringify() to convert JavaScript object literals or arrays into a JSON string:

const newJoke = {
  categories: ['dev'],
  value: "Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."
};

console.log(JSON.stringify(newJoke)); // {"categories":["dev"],"value":"Chuck Norris's keyboard is made up entirely of Cmd keys because Chuck Norris is always in command."}

And that's it! We've covered just about everything you need to know about working with JSON in the browser and in Node.js projects.

Now get out there and parse or stringify JSON to your heart's content.

Did I miss something? How do you parse JSON in your projects? Let me know over on Twitter.

It doesn't have to be this way. JavaScript includes several helpful methods that make using regular expressions much more manageable. Of the included methods, the .match(), .matchAll(), and .replace() methods are probably the ones you'll use most often.

In this tutorial, we'll go over the ins and outs of those methods, and look at some reasons why you might use them over the other included JS methods

A quick introduction to regular expressions

According to MDN, regular expressions are "patterns used to match character combinations in strings".

These patterns can sometimes include special characters (*, +), assertions (\W, ^), groups and ranges ((abc), [123]), and other things that make regex so powerful but hard to grasp.

At its core, regex is all about finding patterns in strings – everything from testing a string for a single character to verifying that a telephone number is valid can be done with regular expressions.

If you're brand new to regex and would like some practice before reading on, check out our interactive coding challenges.

How to use the .match() method

So if regex is all about finding patterns in strings, you might be asking yourself what makes the .match() method so useful?

Unlike the .test() method which just returns true or false, .match() will actually return the match against the string you're testing. For example:

const csLewisQuote = 'We are what we believe we are.';
const regex1 = /are/;
const regex2 = /eat/;

csLewisQuote.match(regex1); // ["are", index: 3, input: "We are what we believe we are.", groups: undefined]

csLewisQuote.match(regex2); // null

This can be really helpful for some projects, especially if you want to extract and manipulate the data that you're matching without changing the original string.

If all you want to know is if a search pattern is found or not, use the .test() method – it's much faster.

There are two main return values you can expect from the .match() method:

1. If there's a match, the .match() method will return an array with the match. We'll go into more detail about this in a bit.
2. If there isn't a match, the .match() method will return null.

Some of you might have already noticed this, but if you look at the example above, .match() is only matching the first occurrence of the word "are".

A lot of times you'll want to know how often a pattern is matched against the string you're testing, so let's take a look at how to do that with .match().

Different matching modes

If there's a match, the array that .match() returns had two different modes, for lack of a better term.

The first mode is when the global flag (g) isn't used, like in the example above:

const csLewisQuote = 'We are what we believe we are.';
const regex = /are/;

csLewisQuote.match(regex); // ["are", index: 3, input: "We are what we believe we are.", groups: undefined]

In this case, we .match() an array with the first match along with the index of the match in the original string, the original string itself, and any matching groups that were used.

But say you want to see how many times the word "are" occurs in a string. To do that, just add the global search flag to your regular expression:

const csLewisQuote = 'We are what we believe we are.';
const regex = /are/g;

csLewisQuote.match(regex); // ["are", "are"]

You won't get the other information included with the non-global mode, but you'll get an array with all the matches in the string you're testing.

Case sensitivity

An important thing to remember is that regex is case sensitive. For example, say you wanted to see how many times the word "we" occurs in your string:

const csLewisQuote = 'We are what we believe we are.';
const regex = /we/g;

csLewisQuote.match(regex); // ["we", "we"]

In this case, you're matching a lowercase "w" followed by a lowercase "e", which only occurs twice.

If you'd like all instances of the word "we" whether it's upper or lowercase, you have a couple of options.

First, you could use the .toLowercase() method on the string before testing it with the .match() method:

const csLewisQuote = 'We are what we believe we are.'.toLowerCase();
const regex = /we/g;

csLewisQuote.match(regex); // ["we", "we", "we"]

Or if you want to preserve the original case, you could add the case-insensitive search flag (i) to your regular expression:

const csLewisQuote = 'We are what we believe we are.';
const regex = /we/gi;

csLewisQuote.match(regex); // ["We", "we", "we"]

The new .matchAll() method

Now that you know all about the .match() method, it's worth pointing out that the .matchAll() method was recently introduced.

Unlike the .match() method which returns an array or null, .matchAll() requires the global search flag (g), and returns either an iterator or an empty array:

const csLewisQuote = 'We are what we believe we are.';
const regex1 = /we/gi;
const regex2 = /eat/gi;

[...csLewisQuote.matchAll(regex1)]; 
// [
//   ["We", index: 0, input: "We are what we believe we are.", groups: undefined],
//   ["we", index: 12, input: "We are what we believe we are.", groups: undefined]
//   ["we", index: 23, input: "We are what we believe we are.", groups: undefined]
// ]

[...csLewisQuote.matchAll(regex2)]; // []

While it seems like just a more complicated .match() method, the main advantage that .matchAll() offers is that it works better with capture groups.

Here's a simple example:

const csLewisRepeat = "We We are are";
const repeatRegex = /(\w+)\s\1/g;

csLewisRepeat.match(repeatRegex); // ["We We", "are are"]

const csLewisRepeat = "We We are are";
const repeatRegex = /(\w+)\s\1/g;

[...repeatStr.matchAll(repeatRegex)];

// [
//   ["We We", "We", index: 0, input: "We We are are", groups: undefined],
//   ["are are", "are", index: 6, input: "We We are are", groups: undefined],
// ]

While that just barely scratches the surface, keep in mind that it's probably better to use .matchAll() if you're using the g flag and want all the extra information that .match() provides for a single match (index, the original string, and so on).

How to use the .replace() method

So now that you know how to match patterns in strings, you'll probably want to do something useful with those matches.

One of the most common things you'll do once you find a matching pattern is replace that pattern with something else. For example, you might want to replace "paid" in "paidCodeCamp" with "free". Regex would be a good way to do that.

Since .match() and .matchAll() return information about the index for each matching pattern, depending on how you use it, you could use that to do some fancy string manipulation. But there's an easier way – by using the .replace() method.

With .replace(), all you need to do is pass it a string or regular expression you want to match as the first argument, and a string to replace that matched pattern with as the second argument:

const campString = 'paidCodeCamp';
const fCCString1 = campString.replace('paid', 'free');
const fCCString2 = campString.replace(/paid/, 'free');

console.log(campString); // "paidCodeCamp"
console.log(fCCString1); // "freeCodeCamp"
console.log(fCCString2); // "freeCodeCamp"

The best part is that .replace() returns a new string, and the original remains the same.

Similar to the .match() method, .replace() will only replace the first matched pattern it finds unless you use regex with the g flag:

const campString = 'paidCodeCamp is awesome. You should check out paidCodeCamp.';
const fCCString1 = campString.replace('paid', 'free');
const fCCString2 = campString.replace(/paid/g, 'free');

console.log(fCCString1); // "freeCodeCamp is awesome. You should check out paidCodeCamp."
console.log(fCCString2); // "freeCodeCamp is awesome. You should check out freeCodeCamp."

And similar to before, whether you pass a string or a regular expression as the first argument, it's important to remember that the matching pattern is case sensitive:

const campString = 'PaidCodeCamp is awesome. You should check out PaidCodeCamp.';
const fCCString1 = campString.replace('Paid', 'free');
const fCCString2 = campString.replace(/paid/gi, 'free');

console.log(fCCString1); // "freeCodeCamp is awesome. You should check out PaidCodeCamp."
console.log(fCCString2); // "freeCodeCamp is awesome. You should check out freeCodeCamp."

How to use the .replaceAll() method

Just like how .match() has a newer .matchAll() method, .replace() has a newer .replaceAll() method.

The only real difference between .replace() and .replaceAll() is that you need to use the global search flag if you use a regular expression with .replaceAll():

const campString = 'paidCodeCamp is awesome. You should check out paidCodeCamp.';
const fCCString1 = campString.replaceAll('paid', 'free');
const fCCString2 = campString.replaceAll(/paid/g, 'free');

console.log(fCCString1); // "freeCodeCamp is awesome. You should check out freeCodeCamp."
console.log(fCCString2); // "freeCodeCamp is awesome. You should check out freeCodeCamp."

The real benefit with .replaceAll() is that it's a bit more readable, and replaces all matched patterns when you pass it a string as the first argument.

That's it! Now you know the basics of matching and replacing parts of strings with regex and some built-in JS methods. These were pretty simple examples, but I hope it still showed how powerful even a little bit of regex can be.

Was this helpful? How do you use the .match(), .matchAll(), .replace(), and .replaceAll() methods? Let me know over on Twitter.

In most cases you probably won't need to update your hosts file on Windows. But knowing where it is and how it works can be helpful if:

• you're having trouble with local development
• you suspect malware has tampered with the hosts file
• you want a quick and simple way to block some websites
• or if you want to set up some helpful shortcuts to internal IP addresses

In this article we'll cover what a hosts file is, how to edit it on Windows, and we'll go over some neat tricks you can do with it.

What's a hosts file anyway?

Back in the early days of the internet, before it was widespread, computers used a hosts file to map long, hard to remember IP addresses with much shorter, easier to remember hostnames.

For example, here's a line you'll find in many hosts files on Windows, Linux, and macOs:

127.0.0.1       localhost

That way, instead of having to remember a long IP address, all you had to do was visit localhost.

Why hosts files fell out of favor

The hosts files system worked well for the early internet, but there were a few major problems.

As the internet grew, so did the length and complexity of the hosts files. Also, each hosts file only worked for the computer it was on, and keeping them in sync with the changes in hostnames and IP addresses became a huge pain.

For example, imagine that you have two computers, A and B. Their hosts files contain this mapping for google.com:

172.217.26.46       google.com

But when Google updates their IP addresses, only computer A updates its hosts file to match:

172.217.175.78       google.com

So everyone on computer B is stuck without Google until someone updates the hosts file. When that person does update the hosts file, they add another entry to handle Google with the www subdomain.

172.217.175.78       google.com
172.217.175.78       www.google.com

Now everyone on computer B is taken to the correct website whether they visit google.com or www.google.com.

And everyone on computer A can only visit google.com, not www.google.com, at least until its own hosts file is updated to match.

As you can imagine, hosts files would get complicated, fast.

The solution

If you're thinking that someone should have just made a central repository to map all IP addresses with all hostnames, that's exactly what happened.

Early on, a central hosts file was manually maintained and shared by the Stanford Research Institute. This system lead to the invention of domains and top level domains like .com and .edu, Whois, and it became increasingly automated.

In the end, the humble hosts file and innovators like Elizabeth J. Feinler lead to the invention of the Domain Name System still in use today.

How to edit a hosts file on Windows

To edit a hosts file on Windows 10, you'll need to open it as an administrator.

First, open Notepad as an administrator by pressing the Windows key, typing in "notepad", and clicking "Run as administrator":

Note: You may need to click the arrow button to expand the dropdown to see the "Run as administrator" option

To open the hosts file in Notepad, click "File", "Open", and navigate to C:\Windows\System32\drivers\etc.

You won't be able to see any files in this directory because they aren't text documents. To change the file type, click on the dropdown in the bottom right of the Open menu and click on "All Files":

You'll see a file named hosts. Double click on that file to open it.

Then, you'll see a hosts file similar to this:

# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#    127.0.0.1       localhost
#    ::1             localhost

Note that everything is commented out with # characters, meaning that nothing is actually being read from the hosts file. Modern versions of Windows include a sort of DNS system already, so if you visit localhost it'll automatically redirect you to 127.0.0.1.

With that out of the way, here are some things you can do with the hosts file.

How to update the hosts file on Windows 10 if you have trouble with localhost

If you're doing some local development and are having problems with localhost, you can just remove the comments from your hosts file:

...
# localhost name resolution is handled within DNS itself.
127.0.0.1       localhost
::1             localhost

After saving the hosts file, close Notepad.

Then, open PowerShell by pressing the Windows key, searching for "powershell", and clicking "Run as Administrator":

In the PowerShell window, enter ipconfig /flushdns to flush the inbuilt Windows DNS:

After that, you should be able to visit localhost in your browser and see whatever you're hacking on. If you're still having issues, try closing your browser completely, then open a new browser window and try again.

How to update your hosts file on Windows 10 if you think it's been tampered with

Even though hosts files have fallen out of favor with newer systems like DNS, they still work for legacy reasons. And hackers have definitely taken advantage of this in the past.

What they would do is point a common website like google.com towards an unsafe IP address. This IP address could serve a site that looks just like Google's, but is actually trying to steal your sensitive information.

While this was a problem in the past, most security software like the Windows Security Suite can recognize and fix problems with the hosts file automatically.

That said, if you open up your hosts file and see a lot of strange entries, then you may want to revert to the default Windows hosts file.

Just copy and paste the default hosts file from earlier in the article into your hosts file and save. Then, open PowerShell and use the ipconfig /flushdns command to flush the Windows DNS.

Note that some third-party security software uses the hosts file to block dangerous websites. If that's the case, no worries – your security software should add all those entries back to your hosts file. We'll go over how this works in the next section.

How to use the hosts file on Windows 10 to block websites

Don't want friends or family to visit certain websites on your computer? Or are you like me and get distracted by all the cat photos on the internet?

If so, then you can use the hosts file to block websites entirely.

For example, if you want to block Reddit, just add this to the bottom of your hosts file:

127.0.0.1     reddit.com
127.0.0.1     www.reddit.com

Then, open PowerShell and run ipconfig /flushdns to flush the Windows 10 DNS. Also, close the browser windows that are open and reopen them.

After that, every time you try to visit Reddit, or click on a Reddit URL like https://www.reddit.com/r/FreeCodeCamp/, your browser will be redirected to 127.0.0.1, or localhost.

Since there's no website there, your browser will show an error message:

The one downside is that this only works on one device – you could just reach for your phone and browse Reddit on that instead. Still, it's a neat way to create some friction on your work computer.

This leads nicely into the last trick, which is to use the hosts file to make your life a little bit easier.

How to use the hosts file on Windows 10 to set up helpful shortcuts

If you spend a lot of time adjusting your router's settings, or you have a cool project running on a Raspberry Pi, you'll know that typing in a long IP address is a drag.

Instead, you can use the hosts file to make connecting to other devices on your local network much faster.

For example, if your router is at 192.168. 0.1, you can add the following to your hosts file:

192.168.0.1       my.router

Then, flush your Windows 10 DNS with ipconfig /flushdns and restart your browser.

And then any time you visit my.router, you should be redirected to 192.168.0.1.

Just note that you may need to visit http://my.router, at least the first time. Otherwise your browser might not recognize .router as a valid top-level domain (TLD), and will try to search for the term my.router instead.

To get around this, you could use a hostname like this instead:

192.168.0.1       router.my

This should work right away because .my is the TLD for people and companies in Malaysia.

Fortunately there are a whole lot of valid TLDs nowadays. Here's a list of some of the most common TLDs out there: https://en.wikipedia.org/wiki/List_of_Internet_top-level_domains

Again, the one downside to this method is that it only works on once device. You'd have to update the hosts files on your other devices to enable the same shortcuts.

And that should be just about everything you need to know about the hosts file on Windows 10. And a lot of this knowledge should carry over to Linux and macOS.

So get out there and customize your hosts file like the pioneers of the internet once did.

Did you find this helpful? Are there any other hosts file tricks you know? Let me know over on Twitter.

Stay safe and happy hosts file editing!

The Antimalware Service Executable, or MsMpEng.exe, is part of the Windows Security suite that ships with Windows 10. Windows Security includes everything from anti-malware tools, to a firewall, account management and protection services, and more.

Your computer might run slowly at certain times because Windows Security is doing an automated malware detection scan. Occasionally this scan might run into issues with certain files, folders, or software, even if they're secure.

In this article we'll go over a few things you can do to improve Windows Security's performance.

#1: Check for third-party anti-malware software

It's generally recommended that you only run one anti-malware/anti-virus/anti-spyware software on your PC at a time.

Running Windows Security and third-party software like Malwarebytes together can cause issues where they both recognize each other as potential threats. This can lead to situations where neither works properly.

Windows Security is considered to be very secure, so it's safe to remove third-party security software. Simply uninstall the third party software and reboot your computer.

Then to check that Windows Security is running, press the Windows key, type in "windows security", and click on "Windows Security" to open the app:

Open the Windows Security app

Click on "Virus & threat protection", and click "Manage settings" under "Virus & threat protection settings":

The Virus & threat protection menu

Once in the "Virus & threat protection settings" menu, ensure that the "Real-time protection" toggle is on:

Alternatively, if you'd like to use third-party security software, just install and configure that first. Then repeat the steps above and turn the "Real-time protection" toggle off.

This will prevent Windows Security from scanning and potentially flagging your third-party software as insecure.

#2: Prevent Windows Security from scanning certain files and folders

As mentioned earlier, Windows Security can sometimes run into issues while scanning certain files, folders, and executable programs.

Though you do want Windows Security to scan as much of your system as possible, there are some things you can safely exclude to reduce the amount of CPU and memory it uses.

Prevent Windows Security from scanning MsMpEng.exe

The first thing you can try is to prevent the Antimalware Service Executable process from scanning itself.

Press the Windows key, type in "windows security", and click on "Windows Security" to open the Windows Security app.

Click on "Virus & threat protection", and click on "Manage settings" under "Virus & threat protection settings":

The "Virus & threat protection" menu

In the "Virus & threat protection settings" menu, scroll down to "Exclusions" and click on "Add or remove exclusions":

Then click the plus button with the text "Add an exclusion", and click "File":

Then in the File Explorer window, select C:\Program Files\Windows Defender\MsMpEng and click "Open":

Now Windows Security will skip over the Antimalware Service Executable/MsMpEng.exe file while scanning for malware, and should use less available CPU and memory than before.

Prevent Windows Security from scanning the Windows Defender directory

Similar to the last method of skipping over the Antimalware Service Executable, it's possible to exclude the entire Windows Defender directory from anti-malware scans.

Follow the steps from the last method, but after clicking the "Add an exclusion" button, select "Folder" instead:

Then in the File Explorer window that pops up, select C:\Program Files\Windows Defender and click "Select Folder":

And now Windows Security will skip over everything in the Windows Defender folder, including the MsMpEng.exe file itself.

#3: Consider upgrading your PC

If none of the other solutions work, it might be worth upgrading parts of your PC. As of 2020, new PCs are often configured with at least 8 GB of RAM and a solid-state drive (SSD) rather than an older hard disk drive (HDD). And increasingly, software is written with those minimum specs in mind.

If your computer is older and has less RAM and a slower HDD, consider adding more RAM and doing a clean install of Windows 10 on an SSD.

This won't solve the issue of the Antimalware Service Executable using 100% of the CPU, but more RAM and a faster SSD will ensure that anti-malware scans are completed much faster overall. Also, you'll find that everything from booting your computer to opening and saving files is much faster than before.

While PC upgrades are outside the scope of this tutorial, it's worth considering as an option – just a couple new (or used!) parts can make an older computer feel like an entirely different machine.

In summary

There are a bunch of reasons why the Antimalware Service Executable/MsMpEng.exe could cause a system to slow down. But usually it'll only use a lot of the available CPU and memory when it's scanning for malware.

So really the trick is to speed up the malware scan itself – check for conflicting security software, limit the files and folders it has to scan, or consider upgrading your PC's hardware.

Did any of these methods work for you? Or did you find something else that solved the issue? Either way, let me know on Twitter.