EP02: base64, dependencies, border-image, JWT

15 Minutes Reading / 4 Topics

We have 4 topics in this episode, which takes about 15 minutes to read!

1. Encode and Decode Strings with Base64 in JavaScript

2. Different Types of Dependencies in the package.json

3. CSS Border Images

4. What’s JSON Web Token (JWT)

---

Download Printable Version: A4 / A5

---

01. Encode and Decode Strings with Base64 in JavaScript

Base64 is an ASCII representation of binary data, allowing for easy transmission over text-based protocols. Unlike JSON, it does not include special characters, making it highly advantageous in specific use cases.

There’re 2 built-in functions: atob() and btoa() that can be used to convert a string between plain text and Base64 easily.

atob()

The atob() function is used to decode a base64 encoded string. The name atob stands for "ASCII to binary."

The atob() function takes a single argument, which is the base64 encoded string that you want to decode. It returns a string representing the decoded data.

Here is an example of how to use the atob() function:

btoa()

The btoa() function is used to encode a string. The name atob stands for "ASCII to binary."

Same as atob(), the btoa() function takes a single argument, which is the string that you want to encode in base64 format. It returns a base64 encoded string.

It's worth noting that the btoa() function can only encode strings that contain characters within the ASCII character set. If the string contains non-ASCII characters, the function will throw an DOMException error.

---

02. Different Types of Dependencies in the package.json

As modern frontend projects become more complex, the number of installed packages tends to increase. Choosing the appropriate dependency types in the package.json file is crucial as it ensures that the intended packages are installed and you won’t get an over-weighted bundle.

The 3 Most Used Types

1. Dependencies ("dependencies"): These are the packages that are required for the application to run in production. They are typically packages that the application relies on to function properly.

2. Development Dependencies ("devDependencies"): These are the packages that are required for development and testing, but are not necessary for the application to run in production. They typically include packages for testing, linting, and building the application.

3. Peer Dependencies ("peerDependencies"): These are the packages that the application expects the consumer to provide. They are not installed by default, but the consumer of the package is responsible for ensuring that they are installed.

Others Types

1. Optional Dependencies ("optionalDependencies"): These are the packages that are not essential for the application to run, but may provide additional functionality if present. If they fail to install, they will not cause the installation to fail.

2. Dependencies that are installed via Git ("gitDependencies"): These are the packages that are installed directly from a Git repository.

3. Dependencies that are installed via URL ("urlDependencies"): These are the packages that are installed directly from a URL.

---

03. CSS Border Images

border-image is a CSS property that allows you to use an image as the border of an element, rather than a solid color. It defines how the image should be sliced and repeated to create the border.

The border-image property is typically used in conjunction with the border-width property, which sets the width of the border. When border-image is applied, the border width is used as the width of the image slices.

Syntax

• source: Specifies the image to use as the border. This can be a URL, an image file, or the keyword none to indicate no image.

• slice: Specifies how to slice the image to create the border. This can be a number, a percentage, or the keyword fill.

• width: Specifies the width of the image slices. This can be a number, a percentage, or the keyword auto.

• outset: Specifies how much the border extends beyond the edge of the element. This can be a number or the keyword 0.

• repeat: Specifies how to repeat the image to fill the border. This can be the keyword stretch, repeat, or round.

---

04. What’s JSON Web Token (JWT)

JWT is a type of token that is used for authentication and authorization purposes in web applications.

It’s stateless, meaning that the server does not need to keep track of the user's session. Instead, the JWT contains all the information needed to verify the user's identity. This makes JWTs scalable and efficient for applications that have a large number of users.

Token Structure

A JWT consists of three parts: the header, the payload, and the signature.

• header contains information about the type of token and the algorithm used to sign it.

• payload contains the claims, which are statements about an entity (typically the user) and additional data.

• signature is created using the header, payload, and secret key, which can be used to verify the integrity of the token and ensure that it has not been tampered with.

Generation and Verification Process

1. When a user logs in to the application, the server generates a JWT and sends it back to the client. The JWT contains information about the user's identity and any additional data needed for authentication.

   

2. When the client makes subsequent requests to protected routes, it includes the JWT in the Authorization header of the request.

   

3. The server then verifies the JWT and grants access to the resource if the JWT is valid.

   

Security Concerns

Even though the JWT can be a very useful tool, it's also important to be aware of the security risks associated with them.

1. One of the main risks with JWTs is that if the token is stolen or intercepted by a malicious party, they can use it to impersonate the user and access protected resources.

2. JWTs is that they can be vulnerable to certain attacks, such as token replay attacks and timing attacks.

3. It's important to validate the JWT on the server side to ensure that it has not been tampered with and that it contains the correct information.