DEV Community: Thiago Marinho

Commit Message Patterns: Write Better Git History

Thiago Marinho — Fri, 21 Feb 2025 13:51:14 +0000

Type: What kind of change (see below).
Scope (optional): What’s affected (e.g., auth, ui, docs).
Description: Short, present-tense summary (50-72 chars).
Body (optional): More details, why it’s done.
Footer (optional): Metadata like "Fixes #123" or "BREAKING CHANGE"

Common Types of Commit Messages

Here’s a quick reference table for the most frequently used commit types in Conventional Commits:

Type	Use Case	Example
`feat`	New feature	`feat(ui): add dark mode toggle`
`fix`	Bug fix	`fix(auth): resolve token expiry`
`docs`	Documentation updates	`docs(readme): update install steps`
`style`	Formatting, no logic change	`style(css): adjust padding`
`refactor`	Code cleanup, no behavior change	`refactor(api): simplify fetch`
`test`	Add or update tests	`test(unit): cover login edge cases`
`chore`	Maintenance (deps, tools)	`chore(deps): update lodash`
`perf`	Performance improvement	`perf(db): optimize query`
`ci`	CI/CD changes	`ci(pipeline): add lint step`
`build`	Build system changes	`build(webpack): minify output`
`revert`	Revert a previous commit	`revert: undo feat(ui)`

How to Use This Table

Type: Start your commit with one of these keywords.
Scope (optional): Add in parentheses (e.g., ui, auth) to specify the area of change.
Description: Keep it short, present tense, and descriptive.

Cheat Sheet Examples

Simple Feature

feat(api): add user profile endpoint

Fix with Details

fix(cart): prevent duplicate items
- Added check for existing item ID
- Fixes #45

Breaking Change

feat(auth): switch to JWT tokens
- Replaced session cookies with JWT
BREAKING CHANGE: Old tokens invalid

Chore

chore(deps): bump react to 18.3.0

Refactor

refactor(utils): extract logger to module

Improves reusability across files

Tips

Scope: Keep it lowercase, short (e.g., ui, server).
Breaking Changes: Flag with ! after type (e.g., feat(ui)!: redo layout) or note in footer.
Tools: Use with semantic versioning or changelog generators (e.g., standard-version).

How to Add Blurred Text in React Native

Thiago Marinho — Thu, 15 Feb 2024 20:19:21 +0000

If you're looking for a stylish way to hide certain information in your React Native app, adding blurred text can be a visually appealing solution. In this tutorial, I'll show you how to integrate blurred text into your components using React Native easily.

Step 1: Installation

Depending on your development environment, you may need to install the expo-blur package if you're using Expo or react-native-blur for standard React Native projects. You can do this by running the following command:



yarn add expo-blur



yarn add react-native-blur
cd ios && pod-install

Step 2: Creating the Component

Let's start by creating a component called Blurred. This component will accept two optional parameters: intensity and tint. You can use the following code:



import { ReactNode } from 'react'
import { BlurView } from 'expo-blur' // or 'react-native-blur' for React Native projects
import { View } from 'native-base'

type BlurredProps = {
  intensity?: number
  tint?: 'light' | 'dark'
  children: ReactNode
}

export const Blurred = ({ intensity = 8, tint = 'light', children }: BlurredProps) => {
  return (
    <View>
      {children}
      <BlurView
        intensity={intensity}
        tint={tint}
        style={{
          position: 'absolute',
          width: '100%',
          height: '100%',
        }}
      />
    </View>
  )
}

Step 3: Adding it to Your Logic

Now, you can use the Blurred component in your logic as follows:



 const Promotion = () => {
  if (!userCanSeePromo) {
    return (
      <Blurred>
        <Typography variant='body1' color='gray.500'>
          {item.promo}
        </Typography>
      </Blurred>
    )
  }

  return (
    <Typography variant='body1' color='gray.500'>
      {item.full_price}
    </Typography>
  )
}

Feel free to adjust the intensity and tint as needed. This will give you a visually appealing effect like the one shown in the image provided.

You will have something like this:

I used it three times in this card to hide some pieces of information.

You can use it with react-native or even with native-base ui. In my project, I'm using native-base and it works perfectly.

Conclusion

Adding blurred text to your React Native app can enhance its visual appeal and provide a modern touch to your UI. You can just experiment with different intensities and tints to achieve the desired effect in your application.

Organizing Your Backend: Choosing Between Services and Helpers

Thiago Marinho — Mon, 15 Jan 2024 20:03:01 +0000

Introduction

When it comes to developing a robust backend, code organization plays a crucial role in the maintainability and scalability of the project. In this article, we'll delve into the difference between two key components: "services" and "helpers," and how to effectively organize them within your folder structure.

Service: The Backbone of Business Logic

Services are the heart of your backend, responsible for encapsulating application-specific business logic. They handle complex operations, interact with the database, and play a vital role in enforcing domain rules. Let's explore why services are essential:

Abstraction of Business Logic: Services abstract complex operations, providing a clean interface for the rest of the application. This promotes cohesion and makes the code more understandable.

Database Interaction: Often, services are directly tied to data persistence. They manage queries, updates, and ensure data integrity.

Reusability and Scalability: By encapsulating business logic into services, you create reusable components that can scale as needed.

Helper: Versatile Utilities for Generic Functionality

While services are application-specific, helpers are like Swiss army knives that offer generic and utility functionalities. Let's explore why helpers are crucial in code organization:

Generic Functionality: Helpers contain functions not directly tied to business logic but essential for common tasks. This includes string manipulation, date formatting, and generic validations.

Reuse Across Different Contexts: Since helpers are independent of business logic, their functions can be reused in various parts of the code. This promotes consistency and reduces code duplication.

Simplified Maintenance: Isolating utility functionalities in helpers makes maintenance easier. If a generic function needs an update, you can do so in a single location.

Structuring Your Folders: Best Practices

/src/services: Store your services in this folder, organized by entities or specific functionalities. For example, userService.js or orderService.js.

/src/helpers: Keep your helpers here, grouping them based on functionalities. Examples include stringHelper.js or dateHelper.js.

Conclusion: Deciding When to Use Services or Helpers

When building a backend architecture, the key is to strike a balance between services and helpers. Use services for application-specific business logic and helpers for generic and utility functionalities. This approach not only keeps your code organized but also facilitates maintenance and the sustainable growth of your project. Choose wisely and build a solid, scalable backend.

PS. Although I'm explaining the difference between service and helper, mainly in the MVC pattern. I advocate using folder by feature instead of by type, but there is a lot of legacy codebase using by type. So this is a post to explain when to use services or helpers.

Read:
folder by feature

Using for await...of to Iterate Over Synchronous and Asynchronous Arrays in JavaScript

Thiago Marinho — Mon, 31 Jul 2023 15:35:19 +0000

👋🏻 Asynchronous programming is essential in JavaScript when dealing with time-consuming operations like fetching data from APIs, reading files, or handling delays. ES6 introduced Promises to handle asynchronous tasks more elegantly.

Subsequently, ES2018 introduced the for await...of loop, which further simplified handling asynchronous data when working with async iterable like Promises or Generators.

In this blog post, we will explore how to use for await...of to iterate over both synchronous and asynchronous arrays.

Example: Asynchronous Array

Consider an example where we have an array of delays, and we want to execute asynchronous tasks for each delay in the array.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const createDelays = [1000, 2000, 500, 3000, 5000, 10000, 100].map(ms => delay(ms));

const asyncIterable = createDelays;

(async () => {
  for await (const delayTime of asyncIterable) {
    console.log(`Waited for ${delayTime} milliseconds.`);
  }
  console.log("All delays processed.");
})();

In this example, we define the delay function that returns a Promise, simulating an asynchronous delay. We then create an asynchronous array createDelays, containing Promises that resolve after different delays. Using for await...of, we can iterate over the asyncIterable and await each Promise's resolution before moving to the next item. This ensures that each delay is processed sequentially.

Example: Synchronous Array

Now let's consider an example where we have an array of delays and want to execute synchronous tasks for each delay in the array.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function processDelays(delays) {
  for await (const delayTime of delays) {
    await delay(delayTime);
    console.log(`Waited for ${delayTime} milliseconds.`);
  }
  console.log("All delays processed.");
}

const delaysArray = [1000, 2000, 500, 3000, 5000, 10000, 100];
processDelays(delaysArray);

In this example, we define the delay function similarly to the previous example. The function processDelays takes an array of delays and iterates over them using for await...of. Although the array is synchronous, the loop becomes asynchronous due to the await inside it. This allows us to handle each delay asynchronously, one after the other.

Example: Mixed Array with Asynchronous Operations

function fetchData(data) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(`Data: ${data}`);
    }, Math.random() * 5000); // Simulate a random delay up to 5000 ms (5 seconds).
  });
}

async function processArrayWithAsyncOperations(dataArray) {
  for (const data of dataArray) {
    const result = await fetchData(data);
    console.log(result);
  }
  console.log("All operations processed.");
}

const dataArray = [1, 2, 3, 4, 5];
processArrayWithAsyncOperations(dataArray);

In this example, we define the fetchData function, which simulates fetching data asynchronously with a random delay. The function processArrayWithAsyncOperations iterates over the dataArray using for await...of. Even though the data fetching itself is asynchronous, the loop processes each item sequentially due to the await statement.

Conclusion

We covered the usage of for await...of to iterate over both synchronous and asynchronous arrays. This loop allows us to handle asynchronous data elegantly, ensuring sequential processing of each item. Whether you're working with pure asynchronous data, pure synchronous data, or a mix of both, for await...of provides a powerful tool for handling asynchronous tasks with ease in modern JavaScript.

You can see the code in action the replit.com

👨🏻‍💻 🚀

Mastering Conventional Commits: A Hands-On Guide

Thiago Marinho — Tue, 30 May 2023 01:55:33 +0000

When you're working with a team, it's great to use meaningful messages for your commits.

We have something called Conventional Commits, a guidelines for writing commit messages in software development projects.

Which includes 11 words and their meanings that you can use. It helps everyone understand your changes better!

Words and definition:

feat: Signifies a new feature or enhancement added to the codebase.
fix: Indicates a bug fix or resolving an issue in the code.
docs: Refers to changes or additions to documentation.
style: Denotes changes in code formatting, such as indentation, whitespace, etc., which do not affect the code's functionality.
refactor: Represents code changes that neither fix a bug nor add a feature but improve the code's structure or readability.
test: Indicates additions, modifications, or improvements to tests or testing-related code.
chore: Refers to changes in build scripts, package management, or other project-related tasks.
build: Denotes changes related to the build system or external dependencies.
ci: Represents changes to the Continuous Integration (CI) configuration or pipeline.
perf: Indicates code changes that improve performance.
revert: Signifies reverting a previous commit or changeset.

An actual example of using Conventional Commits for a TODO app:

feat: Add ability to set due dates for tasks
fix: Resolve the issue with task deletion not working properly
docs: Update user guide with instructions on organizing tasks into categories
style: Adjust font size and color for task titles
refactor: Reorganize code structure for improved task filtering
test: Add test cases for task prioritization functionality
chore: Update dependencies for better performance
build: Fix build configuration for smoother deployment
ci: Integrate automated testing into the continuous integration pipeline
perf: Optimize loading speed for large task lists
revert: Revert the previous commit that introduced a bug in task sorting.

Now, you can apply these concepts in your codebase 🚀

AbortController manage memory efficiently to ensure optimal performance

Thiago Marinho — Sat, 06 May 2023 22:00:10 +0000

In modern React applications, it's essential to manage memory efficiently to ensure optimal performance. One common issue developers face is memory leaks that can occur during asynchronous fetch operations.

The AbortController is a powerful utility that can help mitigate memory leaks in these scenarios.

The AbortController allows developers to cancel ongoing fetch requests, which is particularly useful when dealing with components that might unmount before the fetch request has completed. By canceling fetch requests when a component is no longer needed, developers can prevent memory leaks and enhance overall application stability.

Here's a simple example of how to implement the AbortController in a React project:

import React, { useState, useEffect } from 'react';

const FetchDataComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data', { signal });
        const data = await response.json();

        if (!signal.aborted) {
          setData(data);
        }
      } catch (error) {
        if (error.name !== 'AbortError') {
          console.error('Fetch error:', error);
        }
      }
    };

    fetchData();

    return () => {
      controller.abort();
    };
  }, []);

  return (
    <div>
      {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}
    </div>
  );
};

In this example, we create an instance of AbortController and use its signal property to link it to the fetch request. If the component is unmounted before the fetch request is complete, the cleanup function in the useEffect hook will be invoked, aborting the ongoing request and preventing potential memory leaks.

By incorporating the AbortController into your React project, you can efficiently manage asynchronous fetch operations, mitigate memory leaks, and ensure a smoother user experience.

learn more: https://developer.mozilla.org/en-US/docs/Web/API/AbortController

How to validate ship address in the USA using ReactJS

Thiago Marinho — Thu, 04 May 2023 21:13:44 +0000

To validate a shipping address in the USA using React and the Google Maps Geocoding API, follow these steps:

Install the @googlemaps/google-maps-services-js package:

yarn add @googlemaps/google-maps-services-js

Create a new React component for your address validation form:

// AddressValidationForm.js
import React, { useState } from 'react';
import { Client } from '@googlemaps/google-maps-services-js';

const AddressValidationForm = () => {
  const [address, setAddress] = useState('');
  const [validationMessage, setValidationMessage] = useState('');

  const validateAddress = async () => {
    const client = new Client();
    try {
      const response = await client.geocode({
        params: {
          address: address,
          components: 'country:US',
          key: 'YOUR_API_KEY',
        },
      });

      if (response.data.status === 'OK') {
        const formattedAddress = response.data.results[0].formatted_address;
        setValidationMessage(`Valid address: ${formattedAddress}`);
      } else {
        setValidationMessage('Invalid address');
      }
    } catch (error) {
      console.error(error);
      setValidationMessage('Error occurred while validating the address');
    }
  };

  return (
    <div>
      <input
        type="text"
        placeholder="Enter address"
        value={address}
        onChange={(e) => setAddress(e.target.value)}
      />
      <button onClick={validateAddress}>Validate Address</button>
      <p>{validationMessage}</p>
    </div>
  );
};

export default AddressValidationForm;

Replace 'YOUR_API_KEY' with the API key you got from Google Cloud Platform.

Import the AddressValidationForm component in your main React component and include it in your JSX:

import React from 'react';
import AddressValidationForm from './AddressValidationForm';

const App = () => {
  return (
    <div>
      <h1>Address Validation</h1>
      <AddressValidationForm />
    </div>
  );
};

export default App;

Now, your React application has a simple form that validates a shipping address in the USA using the Google Maps Geocoding API.

If you want to use React + React Hook Form + Zod:

Install the required packages:

yarn add zod react-hook-form

Create a new Zod schema for the address validation:

// validation.js
import { z } from 'zod';

const AddressValidationSchema = z.object({
  street: z.string().nonempty('Street is required'),
  city: z.string().nonempty('City is required'),
  state: z.string().nonempty('State is required'),
  zip: z
    .string()
    .nonempty('Zip code is required')
    .regex(/^\d{5}(-\d{4})?$/, 'Zip code is invalid'),
});

export default AddressValidationSchema;

Create a new React component for your address validation form:

// AddressValidationForm.js
import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import AddressValidationSchema from './validation';

const AddressValidationForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(AddressValidationSchema),
  });

  const onSubmit = (data) => {
    // Perform address validation or submit data
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label htmlFor="street">Street:</label>
        <input id="street" type="text" {...register('street')} />
        {errors.street && <p>{errors.street.message}</p>}
      </div>

      <div>
        <label htmlFor="city">City:</label>
        <input id="city" type="text" {...register('city')} />
        {errors.city && <p>{errors.city.message}</p>}
      </div>

      <div>
        <label htmlFor="state">State:</label>
        <input id="state" type="text" {...register('state')} />
        {errors.state && <p>{errors.state.message}</p>}
      </div>

      <div>
        <label htmlFor="zip">Zip:</label>
        <input id="zip" type="text" {...register('zip')} />
        {errors.zip && <p>{errors.zip.message}</p>}
      </div>

      <button type="submit">Validate Address</button>
    </form>
  );
};

export default AddressValidationForm;

Import the AddressValidationForm component in your main React component and include it in your JSX:

import React from 'react';
import AddressValidationForm from './AddressValidationForm';

const App = () => {
  return (
    <div>
      <h1>Address Validation</h1>
      <AddressValidationForm />
    </div>
  );
};

export default App;

Now, your React application has a form that validates the user's input for the shipping address using Zod schema and react-hook-form.

Keep in mind that using the Google Maps API might incur costs depending on your usage. There are also other APIs available that you can use to validate shipping addresses, such as the USPS Web Tools API, SmartyStreets, or EasyPost. Make sure to review their respective documentation and pricing to find the best fit for your needs.

Think about GDPL too ;)

Article generated by ChatGPT(OpenAI) reviewed by me ;)

how to validate ship address in the USA using JavaScript

Thiago Marinho — Thu, 04 May 2023 21:05:14 +0000

To validate a shipping address in the USA using JavaScript, you can use the Google Maps Geocoding API or other similar APIs. Here's an example using the Google Maps Geocoding API:

First, you'll need to sign up for a Google Maps API key: https://developers.google.com/maps/gmp-get-started#create-project
Include the Google Maps API script in your HTML file:

<!DOCTYPE html>
<html>
  <head>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
  </head>
  <body>
    <!-- Add your HTML content here -->
  </body>
</html>

Replace YOUR_API_KEY with the key you got from Google Cloud Platform.

Write a function to validate the shipping address:

function validateShippingAddress(address, callback) {
  const geocoder = new google.maps.Geocoder();

  geocoder.geocode({ address: address, componentRestrictions: { country: 'US' } }, function (results, status) {
    if (status === google.maps.GeocoderStatus.OK) {
      const formattedAddress = results[0].formatted_address;
      const location = results[0].geometry.location;
      callback(true, formattedAddress, location);
    } else {
      callback(false);
    }
  });
}

Use the validateShippingAddress function to validate user input:

const userAddress = '1600 Amphitheatre Parkway, Mountain View, CA';

validateShippingAddress(userAddress, function (isValid, formattedAddress, location) {
  if (isValid) {
    console.log('Valid address:', formattedAddress);
    console.log('Latitude:', location.lat());
    console.log('Longitude:', location.lng());
  } else {
    console.log('Invalid address');
  }
});

Article created by ChatGPT4 (OpenAI).

How to share envs in a monorepo with vite and nextjs apps

Thiago Marinho — Thu, 04 May 2023 19:11:09 +0000

To share environment variables between two projects in a monorepo, with specific prefixes for each project, you can create a .env.shared file with common environment variables and then use scripts to create specific .env files for each project. Here's how to do that:

Create a .env.shared file at the root of the monorepo with the common environment variables:

SECRET_KEY=your_secret_key
API_URL=your_api_url

Create a script to generate specific .env files for each project. In the example below, we will create a generate-env.js file at the root of the monorepo:

// generate-env.js
const fs = require('fs');
const path = require('path');

const envShared = path.join(__dirname, '.env.shared');
const envVite = path.join(__dirname, 'vite-project', '.env');
const envNext = path.join(__dirname, 'next-project', '.env');

const sharedVars = fs.readFileSync(envShared, 'utf-8').split('\n');

const viteVars = sharedVars.map((line) => {
  if (line.startsWith('SECRET_KEY') || line.startsWith('API_URL')) {
    return `VITE_PUBLIC_${line}`;
  }
  return line;
});

const nextVars = sharedVars.map((line) => {
  if (line.startsWith('SECRET_KEY') || line.startsWith('API_URL')) {
    return `NEXT_PUBLIC_${line}`;
  }
  return line;
});

fs.writeFileSync(envVite, viteVars.join('\n'), 'utf-8');
fs.writeFileSync(envNext, nextVars.join('\n'), 'utf-8');

Run the generate-env.js script to generate the specific .env files for each project:

node generate-env.js

This will create an .env file in the vite-project folder with environment variables prefixed with VITE_PUBLIC_ and an .env file in the next-project folder with environment variables prefixed with NEXT_PUBLIC_.

Now, each project will have its own .env file with the correctly prefixed environment variables. Be sure to add the generated .env files to your .gitignore rules to prevent committing sensitive information to the repository.

Remember to run the generate-env.js script whenever you make changes to the .env.shared file to update the specific project .env files. You can also add this script as a step in your build or deployment process.

How to learn quick

Thiago Marinho — Sat, 18 Mar 2023 12:30:00 +0000

Learning quickly requires effective use of time and efficient study techniques. Here are some tips that can help you learn quickly:

Set clear goals: Before starting to learn something, define specific and achievable goals that can be measured and monitored.
Learn actively: Instead of simply reading and highlighting, actively engage with the material by taking notes, summarizing, and teaching the concepts to others.
Focus on what's important: Identify the most important information to learn and focus your time and energy on that. Avoid getting distracted by irrelevant details.
Use visual aids: Use diagrams, mind maps, and other visual aids to help you remember information better.
Take breaks: Taking short breaks can help you recharge and maintain your focus during your learning sessions.
Get enough sleep: Lack of sleep can affect your ability to learn and retain information, so make sure you get enough rest to improve your learning capacity.
Practice regularly: Regular practice is essential to consolidate information and develop skills. Dedicate time every day to practice what you're learning.
Exercise regularly: Regular exercise can improve your cognitive function and help you learn faster and better.
Get enough sleep: Lack of sleep can affect your ability to learn and retain information, so make sure you get enough rest to improve your learning capacity.
Eliminate distractions: Turn off notifications on your phone and avoid multitasking to avoid distractions that can slow down your learning.
Extra: Use the Chat GPT-3/4 🤫

Keep in mind, learning quickly doesn't mean you will learn everything in a short period of time. It's important to use effective techniques and set realistic goals to optimize your learning process.

Never stop learning 🚀

How to publish React App (CRA) on Github Pages using Github Actions with Turborepo

Thiago Marinho — Thu, 16 Mar 2023 13:37:00 +0000

Create a .yml file inside of the .github/workflows/
give any semantic name, like publish-app.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:    
      - name: Check out code
        uses: actions/checkout@v3
        with:
          fetch-depth: 2

      - uses: pnpm/action-setup@v2.0.1
        with:
          version: 6.32.2

      - name: Setup Node.js environment
        uses: actions/setup-node@v3
        with:
          node-version: 16
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install

      - name: Build
        run: pnpm build

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@4.1.0
        with:
          branch: gh-pages
          folder: apps/web/build

Steps:

Every push on branch main, will run the job on ubuntu virtual machine, install the pnpm as node package manager, and setup the node.js with the version 16.

Then will install the dependencies of the project, do the build.

Finally, will do the deploy on github pages using the scripts from JamesIves/github-pages-deploy-action, and create a branch gh-pages with the code from apps/web/build.

So, you need to go to the GitHub repository settings page:

https://github.com/<username|org>/<repository>/settings/pages

And do this settings:

Source: Deploy from a branch
Branch: gh-pages

Done, your site is live at https://username|org.github.io/your-repository

🚀

What is Technical debt

Thiago Marinho — Thu, 09 Mar 2023 14:47:00 +0000

Technical debt is a term used in the software industry to describe the long-term cost of making decisions that speed up software delivery in the short term, but may lead to technical problems in the future. Technical debt refers to the need to do additional work in the future to correct problems that are created by taking shortcuts or not following good engineering practices.

For example, there may be a tight deadline to deliver a new feature in software and to meet the deadline, the development team may decide not to invest in extensive testing or refactoring the code to make it more readable and maintainable. While this may allow the team to deliver the new feature on time, it may also create technical problems and make the software more difficult to maintain and evolve in the future, increasing the technical burden.

Technical debit is not something inherently bad, as it can be a conscious and justified decision in some cases. However, it is important that development teams are aware of the costs and risks involved in taking shortcuts and ensure that technical debt is managed to minimize its long-term impact.