Forem: vivecodes

How Vite resolves relative and absolute paths

vivecodes — Fri, 11 Apr 2025 20:01:40 +0000

Hello everyone!

If you're working with Vite and handling static assets like fonts or images, path resolution can be tricky — especially when things work in one environment but not in others. In this article, I’ll explain you how Vite builds projects, the difference between absolute and relative paths, and share a real-life bug I encountered that illustrates why this stuff matters.

How Vite Builds Projects

When you run vite build, Vite compiles, bundles, and optimizes your app into a production-ready folder called dist/. This folder is what you deploy — everything else stays behind.

Here’s an example of a project structure before build:

project-folder/
├── public/
│   └── fonts/
│       └── icon-font.woff
│
├── src/
│   ├── main.js
│   ├── styles/
│   │   └── app.less
│   └── components/
│       └── ...
│
├── index.html
├── vite.config.js
└── package.json

After building, your dist/ folder might look like this:

dist/
├── assets/
│   ├── app-9f3a2b4d.js
│   ├── style-2c1f6a7e.css
│   └── vendor-1a2b3c4d.js
└── fonts/
    └── icon-font.woff

What’s in the `dist/` folder:

assets/: contains final, optimized JS and CSS files:

app-xxxx.js – main application bundle
style-xxxx.css – compiled styles from .less, .scss, or .css files
vendor-xxxx.js – third-party libraries

fonts/: Includes static assets (like fonts) copied from the public/ folder

Key Notes:

The src/ folder and any source files (like app.less) are not included in the build.
All filenames are hashed for cache busting, ensuring browsers load the latest version after deployments.
This build is fully static and ready to be hosted on any static server (Netlify, Vercel, GitHub Pages, etc.)

How Absolute Paths Work in Vite

In Vite, an absolute path starts with a /. For example:

@icon-font-path: "/fonts/icon-font.woff";

The leading slash tells the browser (and Vite) to look in the root of the site.

Here’s how Vite resolves it:

In development (vite dev): Vite serves files in the public/ directory at the root level. So /fonts/icon-font.woff is resolved as public/fonts/icon-font.woff.

In production (vite build): Vite maintains this path, assuming that fonts/icon-font.woff will be at the root of the deployed dist/ folder.

This means that any asset placed in the public/ folder can be accessed directly using an absolute path that starts with /.

How Relative Paths Work in Vite

A relative path points to a file based on the current file’s location. For example:

@icon-font-path: "../fonts/icon-font.woff";

Relative paths work well when you're referencing files inside the src/ folder, as long as the file structure matches and Vite can bundle those files correctly.

However, issues can arise if the relative path doesn't correctly reflect the file system, especially if you're referencing something that lives outside of src/, such as in public/.

Real-life example: Why the relative path failed

Let’s look at a bug I encountered on a new project.
Here's the structure of the project:

project-folder/
│
├── public/
│    └── fonts/
│         └── icon-font.woff
│
├── src/
│    └── styles/
│         └── app.less
│

Originally, in app.less a relative path was used:

@icon-font-path: "../fonts/icon-font.woff";

This path worked fine in production and some environments, but when I ran the project locally with vite dev, the icon fonts didn’t load.

Why it failed locally:

The font folder was in the public/ directory.
Relative paths from within src/ can’t access files in public/.
So the file was simply not found.

Why it worked in production:

Vite was bundling everything, and the compiled CSS or JS file (e.g. app-9f3a2b4d.js) ended up inside the dist/assets/ folder. Meanwhile, the font file from the public/fonts/ directory was copied into dist/fonts/.

The resulting dist/ structure looked like this:

dist/
├── assets/
│   ├── app-9f3a2b4d.js
│   ├── style-2c1f6a7e.css
│   └── vendor-1a2b3c4d.js
└── fonts/
    └── icon-font.woff

The path used in the compiled CSS or JS was relative — and since those files were in dist/assets/, a path like ../fonts/icon-font.woff would still point correctly to dist/fonts/.

In other words, from assets/style-2c1f6a7e.css, the browser goes one level up (../) and finds the fonts/ folder right there at the root of dist/.

The path technically worked in production, but it was coincidental. The structure happened to align, not because the relative path was correct in source files, but because the build output ended up that way.

This is why the path didn’t work in vite dev, where files aren't organized the same way — which leads to the next point: using absolute paths ensures consistency across all environments.

The Fix:

Switching to an absolute path did the trick:

@icon-font-path: "/fonts/icon-font.woff";

Now Vite correctly served the font from public/, and the path worked in all environments: Dev, Prod, and even when viewing the site locally.

Conclusion

Path resolution in Vite is simple — but only once you know how it works.

Here’s the takeaway:

Use absolute paths (/...) for referencing files in public/
Use relative paths only for files inside src/
Always test both vite dev and vite build to ensure consistency

This small path fix saved me hours of debugging — I hope it saves you some too! Let me know if you’ve run into similar issues or have tips of your own.

Understanding Expensive Calculations in React for Beginners

vivecodes — Tue, 19 Nov 2024 21:17:49 +0000

Hey there 👋

In React development, many factors influence the overall performance of an application. One key factor is the efficiency of calculations. But how can we determine if a calculation is expensive? And why is it so important to know?

React developers, especially beginners, often overuse such hooks like useState and useEffect. Understanding whether a calculation is expensive can help you decide if state or effects are necessary, or if it is acceptable to re-calculate something on every render.

Let's get straight to the point with key factors to consider. By the end, you’ll have a clear checklist to help you identify costly calculations in your React projects.

Theoretical analysis

Time complexity

Constant time O(1)
Operations like simple arithmetic or accessing a fixed element are considered cheap calculations.
Linear time O(n)
Iterating over a list once. The cost depends on the size of the list.
Quadratic time O(n^2)
Nested loops where each element is compared or processed multiple times. These are generally considered as expensive calculations.
Exponential time O(2^n)
Processes like deep recursion or brute-force searching. These are highly expensive calculations

Data size

For small lists (< 100) - Calculations with O(n) are usually fine and considered cheap.
For large lists (>1000) - Even calculations O(n) can become expensive.

Practical test

Browser performance monitoring

Console timing

console.time('name-of-the-process')
process code (calculation)
console.timeEnd('name-of-the-process')

If the time is less than 1-2 ms - the calculation is considered as inexpensive.

For example:

console.time("setIsAuthenticated");
setIsAuthenticated(true);
console.timeEnd("setIsAuthenticated");

Performance tab
The browser's performance tab provides a lot of useful information. While I'm not going to describe it in this article (it deserves its own article), I recommend to learn more about it.

Frequency of calculation

Even if a calculation isn't expensive, if it's being performed extremely frequently, it can still contribute to performance issue.

User experience and performance bottlenecks

The user experience is the best indicator of performance. Ask yourself: Is UI sluggish and unresponsive or smooth and responsive?
If your app has issues in these areas, it might be required to optimize expensive calculations.

Conclusions

I hope the topic became clearer for you. This article is a start to further exploration and learning about React and performance. Consider learning about React's optimization techniques like useMemo and React.memo, diving into browser performance tools, or strengthening your understanding of algorithms and data structures.

Easy Ways to Render a List of Images: HTML vs. JavaScript

vivecodes — Sun, 14 Jul 2024 12:31:09 +0000

Hi there 👋

In this guide, I'll show you two approaches to rendering a list of images - one using only HTML and the other using JavaScript. While the HTML-only method works, using JavaScript makes the process much easier!

Let's start with the HTML-only approach.

Imagine you want to display a few images on your website in a list, one by one. Your HTML structure could look as follows:

/* HTML code */
<div class="img-container">
  <img src="link-to-the-image"/>
  <img src="link-to-the-image"/>
  <img src="link-to-the-image"/>
  <img src="link-to-the-image"/>
</div>

Every time you want to add a new image to the list, you need to manually insert a new <img> element with all the attributes.

How can JS make our life easier? Let's see!
With JavaScript we can create an array with the image links and dynamically generate elements.
Here's the updated HTML:

/* HTML code */
<div class="img-container"></div>

And here's the JavaScript code to dynamically render the images:

// JavaScript code
const picturesLinksArray = [
"https://cdn.pixabay.com/photo/2020/10/29/03/22/dog-5695088_1280.png",
"https://cdn.pixabay.com/photo/2022/02/20/09/43/animal-7024108_1280.png",
"https://cdn.pixabay.com/photo/2022/02/20/09/36/animal-7024080_1280.png",
"https://cdn.pixabay.com/photo/2022/02/20/09/34/animal-7024072_1280.png"
];

// Get the container element from the HTML
const imgContainer = document.querySelector(".img-container");

// Create and append img elements for each image in the array
picturesLinksArray.forEach((link) => {
  const image = document.createElement("img");
  image.src = link;
  imgContainer.appendChild(image);
})

With this approach, next time you want to add a new image, you only need to update the array with the new image link. The JavaScript code remains unchanged, making the process much simpler and more efficient.

CodePen example

Conclusion

Using HTML alone to manage a list of images can quickly become cumbersome, especially as the list grows. JavaScript offers a more dynamic and scalable solution.
This not only saves time but also keeps your code cleaner and more maintainable.

SOLID principles in OOP for beginners

vivecodes — Wed, 29 May 2024 21:07:54 +0000

SOLID principles are sets of best practices aimed to solve the common problems that developers face in object-oriented programming.

While design patterns provide concrete solutions to common design problems, the SOLID principles are way more abstract. They are intended to help in organizing and structuring the code, making it easier to manage and extend over time.

There are five SOLID principles in total:

Single Responsibility Principle (SRP)

Each entity (like a class, function, or method) should have only one responsibility or job.

Advantages:

Easier maintenance and updates
Clear purpose for each class
Simplified testing
Enhanced reusability

class User {
  userName: string;

  constructor(username: string) {
    this.userName = username;
  }

  getUserName() {
    return this.userName;
  }

  // this method violates SRP
  authenticate(password: string) {
    // implementation logic 
  }
}

To follow SRP, a separate class should be created for authenticate user functionality.

class UserAuthentication {
  constructor(user: User) {}

  authenticate(password: string) {
    // implementation logic
  }
}

Open/Closed Principle (OCP)

Entities (like classes, methods, or functions) should be open for extension but closed for modification. This means you can add new functionality without changing existing code.

Advantages:

Lower risk of introducing bugs
Faster development of new features since existing code remains unchanged
Enhanced reusability

class Salary {
  paySalary(employeeType: "intern" | "junior"): number {
    if (employeeType === "intern") return 100;
    if (employeeType === "junior") return 200;
    return 0;
  }
}

What if we want to add another type of employee? In this case we have to change existing code, that violates OCP.

To follow OCP, the implementation could be as below. In this case, when we want to add a new type of employee, we won't change any existing code.

interface Employee {
  paySalary(): number;
}

class Intern implements Employee {
  paySalary(): number {
    return 100;
  }
}

class Senior implements Employee {
  paySalary(): number {
    return 1000;
  }
}

class SalaryOCP {
  paySalary(employee: Employee): number {
    return employee.paySalary();
  }
}

Liskov Substitution Principle (LSP)

Subtypes must be substitutable for their base types. In other words, wherever Parent is used, it could be replaced by Child without affecting the functionality of the program (without altering the existing code).

Advantages:

New classes can be added without breaking existing functionality
Enables creating substitutional parts of complex systems
Enhanced reusability

// Parent
class PaymentProcessor {
  public paymentProcess(): void {
   console.log("Payment was done");
  }
}

// Children
class CreditCard extends PaymentProcessor {
  public paymentProcess(): void {
   console.log("Paid with credit card");
  }
}

class DebitCard extends PaymentProcessor {
  public paymentProcess(): void {
   console.log("Paid with debit  card");
  }
}

class PayPal extends PaymentProcessor {
  public paymentProcess(): void {
   console.log("Paid with PayPal");
  }
}

We can use either Parent or its children in the function:

function makePayment(paymentProcessor: PaymentProcessor) {
  paymentProcessor.paymentProcess();
}

const paymentProcessor = new PaymentProcessor();
makePayment(paymentProcessor);

const creditCardProcessor = new CreditCard();
makePayment(creditCardProcessor);

Interface Segregation Principle (ISP)

No client should be forced to depend on methods it does not use. In other words, instead of adding new methods to an existing interface, create a new interface.

Advantages:

Smaller, more understandable interfaces
Changes in one interface do not impact unrelated classes
Enhanced reusability

Let's see at the example with violation of the principle.

interface Machine {
  print(): void;
  scan(): void;
  fax(): void;
}

class MultiFunctionPrinter implements Machine {
  print(): void {
    // actual implementation
  }
  scan(): void {
    // actual implementation
  }
  fax(): void {
    // actual implementation
  }

What if we want to create a printer that will only print?

class SingleFunctionPrinter implements Machine {
  print(): void {
    // actual implementation
  }

  // We have to implement methods scan and fax
  scan(): void {
    // actual implementation
  }
  fax(): void {
    // actual implementation
  }
}

The correct implementation will be as follows.

interface Printer {
  print(): void;
}

interface Scanner {
  print(): void;
}

interface FaxMachine {
  print(): void;
}

class SimplePrinter implements Printer {
  print(): void {
    // actual implementation
  }
}

class MultiFunctionMachine implements Printer, Scanner, FaxMachine {
  print(): void {
    // actual implementation
  }
  scan(): void {
    // actual implementation
  }
  fax(): void {
    // actual implementation
  }
}

Dependency inversion principle (DIP)

High-level modules should not depend on low-level modules.
Both should depend on abstractions.
Abstractions should not depend on details.
Details should depend on abstractions.

High-level modules - business logic, use cases
Low-level modules - writing to DB, handling HTTP requests

Abstractions - interfaces, abstract classes
Details - concrete classes

Advantages:

Promotes flexible and reusable code
Reduces coupling between different parts of the codebase
Enhanced reusability

Let's see at the example without DIP.

class MySQLDatabase {
  save(data: string): void {
    console.log("MySQLDatabase: ", data);
  }
}

class System {
  private database: MySQLDatabase;

  constructor() {
    this.database = new MySQLDatabase();
  }

  execute(data: string): void {
    this.database.save(data);
  }
}

And now at the example with DIP.

interface Database {
  save(data: string): void;
}

class MySQLDatabase implements Database {
  save(data: string): void {
    console.log("MySQLDatabase: ", data);
  }
}

class System {
  private database: Database;

  constructor(database: Database) {
    this.database = database;
  }

  execute(data: string): void {
    this.database.save(data);
  }
}

const mySql = new MySQLDatabase();

const system = new System(mySql);

system.execute("test this");

Adding Click Animation to a Button with CSS: A Step-by-Step Tutorial

vivecodes — Wed, 24 Jan 2024 22:14:10 +0000

If you are just starting with CSS, this guide will walk you through the basics of animation, explaining each concept in details. After looking at basics, we will use one of the approaches to add click animation to a button.

Understanding CSS Animation

In the world of web development, CSS animation serves as a powerful tool to make your interface dynamic and engaging. Let's discuss the two fundamental methods of CSS animation: transitions and keyframes.

Transitions:

What are Transitions?
Transitions offer a straightforward and intuitive approach to animating changes in CSS properties. This is a smooth effect, where an element is being changed from one state to another over a specified duration.

How Do Transitions Work?
Transitions work by defining the starting and ending states of an element. When a change occurs (like a hover or a click), the transition property steps in, smoothly interpolating between the old and new states. This is achieved by specifying the property to be transitioned, the duration of the transition, and the timing function defining the pace of the change.

/* Adding a transition to the width property */
.btn {
  width: 200px;
  transition: width 0.5s ease; 
  /* 
  width - the property that will be animated
  0.5 - duration in seconds
  ease - timing function 
  */
}

.btn:hover {
  width: 250px; /* New width on hover */
}

In this example, the button's width changes smoothly from 200px to 250px over 0.5 seconds when hovered.

Keyframes:

What are Keyframes?
Keyframes provide a more detailed control over the animation process. They allow you to define specific points (keyframes) in an animation sequence, each representing a unique state of the element.

How Do Keyframes Work?
You set up keyframes at different intervals, specifying the styles for each of them. The browser transitions between these keyframes, creating a more complex and customized animation sequence.

/* Defining keyframes for a bouncing animation */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

/* Applying the keyframe animation to an element */
.element {
  animation: bounce 2s infinite; 
  /* Bouncing animation lasting 2 seconds, repeating infinitely */
}

In this example, the element will smoothly bounce up and down in a loop.

Choosing Between Transitions and Keyframes:

When deciding between transitions and keyframes, consider which effect do you want to achieve. Transitions are perfect for simple effects, like hovering over a button, while keyframes are preferable when creating more dynamic and complex animations, when you need more control.

`transition` and `transform` properties

Now, let's take a closer look at the specific CSS properties we will be using in the tutorial – transition and transform. Understanding how these properties work will empower your control of the animations.

transition:

What is it?
The transition property is a fundamental tool for facilitating smooth changes in CSS properties over a specified duration.
How does it work?
In the example below, we use transition to set the animation's duration and easing function. The duration determines how long the transition takes, while the easing function influences the speed variations throughout the animation.

.btn {
  width: 200px;
  transition: width 3s ease; /* Duration: 3 seconds with an ease timing function */
}

.btn:hover {
  width: 250px; /* New width on hover */
}

In this example, the button smoothly transitions its width over 3 seconds with an ease timing function.

transform:

What is it?
The transform property is a great tool that enables two-dimensional and three-dimensional transformations in CSS. It provides functionalities like rotation, scaling, skewing, or translating elements, allowing for dynamic adjustments in their appearance and position.
How does it work?
In the example below, we use transform to give the checkmark icon a dynamic movement. By using translate in combination with opacity, we create a visually appealing transformation when the icon appears.

.icon {
  opacity: 0;
  transition: transform 2s ease, opacity 2s ease 3s;
}

.icon.done {
  opacity: 1;
  transform: translate(-50%, -180%);
}

In this example, the icon smoothly translates upwards and becomes visible over 2 seconds, with a delay of 3 seconds.

Let's add a click animation to a button

Breaking Down the Requirements:

We will create a button with a rounded border and some text inside.
When the user clicks on it, we want the text to disappear, making room for a checkmark icon.
As an extra touch, let's make the border gradually narrow until it forms a circle.

Let’s start with HTML structure.
We need a div wrapper, and a button and an icon inside it.

<div class="wrapper">
  <button class="btn">
    <span class="btn-text">
      Click on me!
    </span>
  </button>
  <div class="icon">✔️</div>
</div>

Add some css styles for the button and icon.
For the button, we will be animating width and border-radius properties. Initial values of these properties we set for the class name .btn, and the new values for the class name .btn.clicked, which will be applied after clicking on the button. The same is for the icon.

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 40px;
}

.btn {
  height: 40px;
  color: white;
  background: #FFB3CB;
  border: 1px solid white;
  cursor: pointer;
  width: 200px;
  border-radius: 10px;
  transition: width 2s ease, border-radius 2s ease;
}

.btn.clicked {
  color: #FFB3CB;
  width: 40px;
  border-radius: 50px;
}

.btn.clicked .btn-text {
  display: none;
}

.icon {
  position: absolute;
  top: 110%;
  left: 50%;    
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease 1s;
}

.icon.done {
  opacity: 1;
  transform: translate(-50%,-180%);
}

Now add event listener in JS, so that the animations will be working.
We will be adding the additional classes to the button and the icon, when clicking on the button.

/* choose the elements */
const button = document.querySelector(".btn");
const icon = document.querySelector(".icon");

/* add callback function, which will be executed after clicking on the button */
const callback = () => {
  button.classList.add("clicked");
  icon.classList.add("done");
};

/* add event listener */
button.addEventListener("click", callback);

That's it! The animation is ready.

I have prepared a live presentation of the transition animation for you in codepen sandbox. Use this link to find it.

Conclusions:

Mastering CSS animation with the transition and transform properties provides for developers the essential tools for creative web design.
After this tutorial, transitioning between styles should feel more intuitive, empowering developers to effortlessly enhance user experiences with dynamic and engaging web animations.

If you have any questions, don't hesitate to ask me in the comments section.

Beginner-friendly guide: How to Deploy Your Web App with Firebase Hosting

vivecodes — Wed, 25 Oct 2023 05:35:20 +0000

When it comes to learning programming, Firebase offers a range of services, including databases and hosting, that can be incredibly beneficial. In this article, we will focus on Firebase Hosting, a convenient solution for hosting your first web application and sharing it with others, whether they are friends or fellow programming enthusiasts.

Getting Started with Firebase Hosting

To begin, you need to create a project on Firebase. Head over to Firebase website and register for an account. Once registered, access the console by clicking either "Go to console" in the upper right corner or "Get started."

In the console, select "Add project" and provide a suitable name.

Under the Google Analytics option, choose not to enable it, as it's not essential for educational or personal projects. You can always integrate it later if necessary. Once the project is created, click "Continue."

On the project screen, navigate to the left menu and select "All products." From the available options, choose "Hosting" and then click "Get started."

Setting Up Firebase CLI and Project Connection

Install the Firebase Command Line Interface (CLI) on your computer, an essential tool for executing commands via the terminal. The necessary steps are detailed on the project page, but here's a quick rundown with screenshots.

Open your terminal and run the command npm install -g firebase-tools. If you are using a MacBook and encounter a permission denied error, try using sudo npm install -g firebase-tools, and enter your laptop's password. 'Sudo' grants users the ability to execute commands that require additional security privileges, as in this case, installing something globally on the laptop rather than locally in the project folder.

Connect your local project to the Firebase project by ensuring the terminal is in the directory of the project you want to deploy.

Before proceeding, ensure you update your npm version to the latest one, as Firebase has specific requirements. This is crucial to prevent any errors during the subsequent steps.

Invoke the command firebase login and log in using the same credentials used during your Firebase registration.

Then, run firebase init and respond to the prompts as they appear.

Specify settings of the Firebase project.

Choose an option to use an existing project on Firebase.

During this step, your projects from Firebase will be pulled. If you've recently signed up, you'll likely see only one project available for selection.

Specify the folder name where you will later build and deploy your project. If you already have a build folder, provide its name, such as "public," "dist," or any other relevant name. For instance, in my case, utilizing React and Vite, the build is stored in the "dist" folder, which I specify.

On this step, it's crucial to configure your application settings. If you're using a router in your application, make sure to select "y" (yes) to enable it; otherwise, your routing might not function correctly. Additionally, for the question about GitHub build and deployment, choose "N" (no) as it's not relevant to this tutorial. If prompted about overwriting files, select "N" to avoid Firebase overwriting your build files with its default ones.

Building and Deploying Your Web Application

The next step involves building your application if you haven't done so already. Run the appropriate command based on the technologies used in your project. In my case, with React and Vite, the command is npm run build.

After building the project, it's time to deploy it. Issue the command firebase deploy.

Upon successful deployment, you will receive a notification and a link to view your website. Alternatively, you can revisit the Firebase website, access your project, and find the link in the "Hosting" tab, along with additional information about your site.

Initially, you might see "0 files" and encounter errors when accessing the link. Don't worry; this is normal. Give it a few minutes, and everything should be up and running smoothly.

Conclusion and Cost Considerations

In conclusion, Firebase Hosting is an excellent choice for hosting simple websites or pet projects, especially for educational purposes, as it offers a free tier with ample limits. However, it's important to be aware of their usage thresholds, as exceeding these limits may incur charges. For more details, check the "Pricing" tab on their website. For educational projects, the free tier should more than suffice.

Start your hosting journey with Firebase today, and effortlessly showcase your projects to the world!

Forem: vivecodes

How Vite resolves relative and absolute paths

How Vite Builds Projects

What’s in the dist/ folder:

Key Notes:

How Absolute Paths Work in Vite

Here’s how Vite resolves it:

How Relative Paths Work in Vite

Real-life example: Why the relative path failed

Why it failed locally:

Why it worked in production:

The Fix:

Conclusion

Here’s the takeaway:

Understanding Expensive Calculations in React for Beginners

Theoretical analysis

Time complexity

Data size

Practical test

Browser performance monitoring

Frequency of calculation

User experience and performance bottlenecks

Conclusions

Easy Ways to Render a List of Images: HTML vs. JavaScript

Conclusion

SOLID principles in OOP for beginners

Adding Click Animation to a Button with CSS: A Step-by-Step Tutorial

Understanding CSS Animation

Transitions:

Keyframes:

Choosing Between Transitions and Keyframes:

transition and transform properties

Let's add a click animation to a button

Breaking Down the Requirements:

Beginner-friendly guide: How to Deploy Your Web App with Firebase Hosting

Getting Started with Firebase Hosting

Setting Up Firebase CLI and Project Connection

Building and Deploying Your Web Application

Conclusion and Cost Considerations

What’s in the `dist/` folder:

`transition` and `transform` properties