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!
Different Types of Dependencies in the
CSS Border Images
What’s JSON Web Token (JWT)
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:
btoa() that can be used to convert a string between plain text and Base64 easily.
atob() function is used to decode a base64 encoded string. The name
atob stands for "ASCII to binary."
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
btoa() function is used to encode a string. The name
atob stands for "ASCII to binary."
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
02. Different Types of Dependencies in the
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
"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.
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.
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.
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.
Dependencies that are installed via Git (
"gitDependencies"): These are the packages that are installed directly from a Git repository.
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.
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.
source: Specifies the image to use as the border. This can be a URL, an image file, or the keyword
noneto indicate no image.
slice: Specifies how to slice the image to create the border. This can be a number, a percentage, or the keyword
width: Specifies the width of the image slices. This can be a number, a percentage, or the keyword
outset: Specifies how much the border extends beyond the edge of the element. This can be a number or the keyword
repeat: Specifies how to repeat the image to fill the border. This can be the keyword
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.
A JWT consists of three parts: the
payload, and the
headercontains information about the type of token and the algorithm used to sign it.
payloadcontains the claims, which are statements about an entity (typically the user) and additional data.
signatureis 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
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.
When the client makes subsequent requests to protected routes, it includes the JWT in the
Authorizationheader of the request.
The server then verifies the JWT and grants access to the resource if the JWT is valid.
Even though the JWT can be a very useful tool, it's also important to be aware of the security risks associated with them.
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.
JWTs is that they can be vulnerable to certain attacks, such as token replay attacks and timing attacks.
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.
Thanks for reading TinyFrontend Newsletter! Subscribe for free to receive new posts and support my work.