DEV Community: Lucas Melo

10 heurísticas de Nielsen aplicadas a engenharia de software

Lucas Melo — Wed, 14 May 2025 23:48:35 +0000

recentemente tenho estudado mais sobre ux porque acredito que para nós, pessoas que constroem produtos, o usuário deve ser o foco em todos os processos.

e não, isso não é só uma responsabilidade do time de design/produto. nós, principalmente desenvolvedores, devemos ser questionadores e provocadores em vez de só reproduzir uma tela ou api com funcionalidades já decididas. existem pequenos detalhes que nem sempre vão estar presentes nos requisitos/design e nós podemos adicionar para enriquecer a experiência (pop-ups, regras de negócio, textos adicionais...)

as heurísticas de Nielsen são princípios fundamentais de usabilidade que, quando aplicados ao desenvolvimento de software podem transformar melhorar experiência do usuário. estes princípios não são apenas teóricos, mas ferramentas práticas que podemos adicionar ao nosso conhecimento e dia a dia. confesso que várias coisas conhecemos inconscientemente, vou exemplificar como cada uma delas pode ser aplicada a situações reais:

1. visibilidade do status do sistema

quando um usuário interage com uma aplicação de e-commerce e adiciona um produto ao carrinho, é essencial que ele receba confirmação visual imediata. podemos adicionar uma animação no carrinho, um contador atualizado ou uma notificação de sucesso. isso não é só estético, mas funcional, pois reduz a ansiedade do usuário e evita que ele adicione o mesmo produto múltiplas vezes por incerteza.

quando eu criei meu primeiro portfólio por conta própria, criei uma seção que me enviava um e-mail mas não implementei um feedback visual de que havia sido enviado. resultado: um usuário mandou o mesmo e-mail 20 vezes. nunca mais esqueci de retornar feedbacks

2. correspondência entre o sistema e o mundo real

no desenvolvimento de um aplicativo de notas, em vez de criar uma estrutura organizacional puramente digital e abstrata, podemos implementar uma metáfora de cadernos e páginas. o Notion faz isso muito bem, permitindo que os usuários organizem seu conteúdo em páginas e subpáginas que se comportam como documentos físicos, mas com a flexibilidade adicional do meio digital.

para um aplicativo financeiro, termos como "extrato" e "saldo" são mais eficazes que "log de transações" ou "valor líquido atual".
devemos priorizar a simplicidade e familiaridade nas terminologias e fluxos, sempre focando no público-alvo.

3. controle e liberdade do usuário

em aplicações de edição colaborativa como o Figma, a implementação de histórico de ações dá aos usuários a liberdade de explorar diferentes abordagens de design sabendo que podem voltar atrás.

mais importante que só construir funcionalidades é: dar confiança para os usuários de que aquela aplicação oferece controle das próprias ações. possibilidade de reverter ações e voltar atrás. uma segurança psicológica que o controle proporciona.

4. consistência e padrões

ter padrões no produto (ou família de produtos) faz com que o usuário utilize sistemas de maneira previsível. esta consistência reduz significativamente a carga cognitiva dos usuários.

é um ótimo exemplo do quão importante é ter uma biblioteca de componentes que, além de bonito esteticamente, tem valor funcional. um botão primário deve parecer e se comportar da mesma forma em toda a aplicação, independentemente do desenvolvedor que o implementou.

5. prevenção de erros

em um sistema de reservas online, podemos evitar conflitos implementando validações em tempo real. por exemplo, ao selecionar datas para hospedagem, o sistema pode desabilitar automaticamente datas indisponíveis ou mostrar visualização de preços conforme o usuário faz sua seleção.

podemos e devemos antecipar os possíveis erros e criar sistemas que os previnam proativamente, em vez de apenas tratá-los depois que ocorrem. parece bobo, mas afeta o número de chamadas a api, performance, custos.

6. reconhecimento em vez de lembrança

esse exemplo vi num vídeo do youtube e foi sensacional. pense nessas duas frases: "Lisboa é a capital de Portugal?" e "Qual é a capital de Portugal?"

a primeira te traz um reconhecimento e você consegue validar aquele conhecimento facilmente. a segunda faz com que você precise pensar qual é a capital daquele país.

sempre devemos optar por export opções e informações contextualmente relevantes, reduzindo a carga de memória e tornando a navegação mais intuitiva.

7. flexibilidade e eficiência de uso

o VS Code oferece múltiplas formas de realizar a mesma tarefa: menus, atalhos de teclado ou comandos rápidos (Ctrl+P). isso permite que iniciantes explorem visualmente enquanto usuários experientes utilizam métodos mais eficientes, sem sacrificar funcionalidades.

ofereça opções para o usuário escolher como prefere

8. design estético e minimalista

óbvio que uma interface ser bonita importa, mas a hierarquia visual ainda precisa prevalecer. informações secundárias não devem competir com informações principais. tirando o foco do usuário do que realmente importa.

sabe aqueles sites que parece que você tá tendo uma experiência que tá numa grande feira e não sabe pra onde olhar? exatamente isso.

9. ajuda aos usuários para reconhecer, diagnosticar e recuperar-se de erros

um bom exemplo é o caso de um filtro aplicado que não tem resultados. uma tela de erro 404... as alternativas para lidar com o erro devem sempre ser pensadas.

a api respondeu 500? que tal colocar um botão de tentar de novo? não podemos previnir todos os erros, mas devemos fazer com que o usuário lide com eles da melhor maneira possível.

10. ajuda e documentação

telas de documentação, faq, chatbots, onboardings... isso tudo faz com que o usuário tenha acesso a documentação de forma mais eficaz que manuais extensos separados da interface.

o usuário precisa compreender o que estamos criando.

eu sei que é chato pensar em tantos casos de uso quando estamos desenvolvendo coisas simples, mas isso torna uma aplicação mais completa, intuitiva e profissional.

e tem um ganho quase que "invisível": reduz custos de suporte, aumenta a satisfação do usuário e, ultimamente, diferencia nossos produtos em um mercado competitivo.

crie produtos para humanos (principalmente o seu público alvo), não produtos para provar conceitos técnicos :)

Migrating from Create React App to Vite (with a bonus to Vitest)

Lucas Melo — Wed, 26 Feb 2025 03:09:35 +0000

Hey there! 👋 If you’ve been using Create React App (CRA) for your React projects, you might have heard the news: CRA is now deprecated. While it’s not disappearing overnight, it’s no longer receiving updates, which means it’s time to consider moving to a more modern tool. That’s where Vite comes in a fast and efficient build tool.

In this guide, I’ll walk you through migrating your project from CRA to Vite. Let’s get started!

Why Should You Migrate to Vite?

Before we dive into the migration steps, let’s talk about why Vite is worth considering:

1. Speed: Vite uses modern ES Modules and esbuild, which means your dev server starts up almost instantly, and hot reloads are lightning-fast.

2. Modern Tooling: Vite is built with the latest web standards, so you’re not just keeping up—you’re staying ahead.

3. Simplicity: Vite’s configuration is minimal and straightforward, making it easier to set up and maintain compared to CRA.

4. Security: since CRA is deprecated, it won’t receive security updates. Migrating to Vite ensures your project stays secure and up-to-date.

5. Better Developer Experience: from faster builds to a more intuitive setup, Vite makes development smoother and more enjoyable.

The Risks of Staying with CRA

Sticking with a deprecated tool like CRA isn’t just inconvenient, it can also pose risks:

- Security Vulnerabilities: without updates, your project could become vulnerable to security issues.
- Lack of Support: you won’t have access to new features, bug fixes, or community support.
- Compatibility Issues: over time, CRA might not work well with newer libraries or dependencies.
- Technical Debt: delaying the migration will only make it harder to switch later.

Migrating to Vite isn’t just about keeping up with trends, it’s about ensuring your project remains secure, maintainable, and future-proof.

Step-by-Step Migration Guide

Let’s walk through the process of migrating your project from CRA to Vite.

1. Back Up Your Project

Before making any changes, make sure to back up your project. It’s always better to be safe!

2. Remove CRA and Install Vite

First, let’s remove CRA and install Vite. Run these commands in your project’s root directory:

npm uninstall react-scripts # Removes CRA
npm install vite @vitejs/plugin-react --save-dev

This removes react-scripts (the core of CRA) and installs Vite along with its React plugin.

3. Create a vite.config.js File

Next, create a vite.config.js file in the root of your project. This is where you’ll configure Vite. Here’s a basic setup to get you started:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

4. Update Your package.json Scripts

Now, update the scripts in your package.json to use Vite:

"scripts": {
  "start": "vite",
  "build": "vite build",
  "serve": "vite preview"
}

5. Move and Update Your index.html

In CRA, your index.html file is located in the public folder. With Vite, it needs to be moved to the root of your project. You’ll also need to update any references to %PUBLIC_URL%. Here’s an example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.jsx"></script>
  </body>
</html>

Notice how %PUBLIC_URL% is gone? Vite handles paths differently, so you can use relative paths like /favicon.ico instead. I received a lot of errors because I forgot to change this.

6. Check Your Imports and File Extensions

Vite uses ES Modules by default, so double-check your imports to ensure they’re correct. If you’re using JSX, rename your .js files to .jsx (or .tsx for TypeScript).

7. Start the Dev Server

Once everything’s in place, start your dev server:

npm start

If all goes well, you should see your app running smoothly with Vite. 🎉

Bonus: Migrating to Vitest for Testing

If you’re using Jest for testing, you’ll appreciate Vitest. It’s built by the Vite team and is designed to work seamlessly with Vite. Plus, it’s fast and lightweight. Here’s how to make the switch.

1. Install Vitest

First, add Vitest to your project:

npm install vitest --save-dev

2. Configure Vitest

Update your vite.config.js to include Vitest’s configuration:


import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    globals: true,
    environment: 'jsdom',
  },
});

3. Update Your Test Scripts

In your package.json, replace your Jest scripts with these:

"scripts": {
  "test": "vitest",
  "coverage": "vitest run --coverage"
}

4.Migrate Your Tests

Most Jest tests will work in Vitest without any changes. If you’re using Jest-specific functions like jest.mock, Vitest has you covered—just replace jest with vi:

import { vi, expect, test } from 'vitest';

test('example test', () => {
  vi.mock('./myModule');
  expect(1 + 1).toBe(2);
});

5. Run Your Tests

Finally, run your tests to make sure everything’s working:

npm test

That's all 👋

Migrating from Create React App to Vite is a smart move for any React project. You’ll benefit from faster builds, a better development experience, and the peace of mind that comes with using a modern, actively maintained tool. Plus, with Vitest, your tests will run faster and more efficiently.

How to deploy affected NX projects to AWS S3 using Github Actions

Lucas Melo — Mon, 21 Oct 2024 18:53:31 +0000

First of all, if you don’t know what Nx Workspaces is, I recommend checking it out and learning more! It’s a great tool, especially for monorepos.

In this section of the tutorial, we have an example of how to deploy an application to Netlify.

In this tutorial, I’ve brought details on how to deploy to AWS S3 using GitHub Actions.

1. Create a bucket on S3 with all the necessary configurations for a public page.
2. Set up a role for your application to have permission to modify the bucket’s content.
3. Continue setting up your ci.yml file. I used the following configuration:

Remember to update your AWS credentials

name: CI

on:
  push:
    branches: [main]

permissions:
  id-token: write
  actions: read
  contents: read

jobs:
  main:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      # Cache node_modules
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci --legacy-peer-deps
      - uses: nrwl/nx-set-shas@v4

      - run: npx nx affected -t test build build-storybook

      - name: Install AWS CLI
        uses: unfor19/install-aws-cli-action@v1
        with:
          version: 1

      - name: Configure aws credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          role-to-assume: <ROLE>
          role-session-name: <ROLE_NAME>
          aws-region: <AWS_REGION>

      - uses: nrwl/nx-set-shas@v4
      - run: npx nx affected -t deploy

With this configured, all affected applications that have the deploy command will be running. Now, let’s create the deploy command for the applications.

Go to your application's project.json and add the new command.
You need to locate the folder where the build is generated (in my case, dist/apps/) and the bucket where the upload will be done.

"targets": {
    "deploy": {
      "executor": "nx:run-commands",
      "options": {
        "command": "aws s3 sync dist/apps/<YOUR APP> s3://<BUCKET_NAME>/ --delete"
      }
    }
  }

With this, the deployment of affected applications should work perfectly. This tutorial could have saved me a few hours of research looking for a way to do this.

Thank you for reading ;)

Boosting Performance by Removing Unused Files and Dependencies with Knip and PurgeCSS

Lucas Melo — Sat, 05 Oct 2024 15:18:00 +0000

As developers, we're constantly striving for better performance. Whether it's faster load times, more responsive UIs, or smaller bundle sizes, performance is a key metric that directly impacts user experience. One overlooked area that can significantly improve performance is cleaning up unused files and dependencies. In this article, I’ll explore how identifying and removing dead code, unused packages, and unnecessary CSS can lead to a leaner, faster project. We'll also take a look at how tools like Knip and PurgeCSS can help automate this process.

Why Cleaning Up Unused Code Matters

Over time, it's easy for projects to accumulate unnecessary files, dependencies, and CSS rules that are no longer in use. These leftovers bloat your project, making it slower to load, harder to maintain, and potentially impacting performance in ways you don’t immediately realize.

By regularly removing unused code, you not only shrink the size of your JavaScript bundles and CSS files but also improve load times, reduce memory usage, and decrease the overall footprint of your application. This practice is especially critical for front-end performance, where every kilobyte counts.

Tools for the Job: Knip and PurgeCSS

Now that we understand the importance of keeping a project tidy, let’s briefly discuss the tools we can use to automate this process. Knip is a tool designed to analyze your JavaScript project and identify unused dependencies and files, while PurgeCSS focuses on cleaning up unused CSS classes from your stylesheets. Together, these tools help ensure that only the code you're actually using makes it to production.

Improving Performance: The Workflow

Audit Your Dependencies with Knip The first step to cleaning up your project is auditing your dependencies and modules. Knip scans your project, analyzes the imports, and provides a report of what's in use and what can be safely removed.

Instalation and Setup

npm init @knip/config

Running

npm run knip

Knip generates a report highlighting unused dependencies and files. This allows you to quickly identify which parts of your project are no longer necessary, helping you reduce bundle size and improve performance.

Example output

With this summary, you can safely review your files.

2. Optimize Your CSS with PurgeCSS
CSS, just like JavaScript, can become bloated over time. PurgeCSS is a tool that removes unused CSS selectors from your stylesheets, ensuring that your project only ships the necessary styles.

Instalation

npm i -D @fullhuman/postcss-purgecss postcss

Run PurgeCSS CLI in postbuild

I prefer using it as a post-build script, but you can configure the command for any file you need. Simply specify your build folder and the path to the script.

"scripts": {
      "postbuild": "purgecss --css dist/assets/*.css --content dist/index.html dist/assets/*.js --output dist/assets"
},

With this setup, PurgeCSS will automatically strip away unused CSS classes, leaving you with a much smaller and optimized stylesheet.
Checkout PurgeCSS docs to more details.

3. Regularly Review and Refactor

While tools like Knip and PurgeCSS automate a large part of the cleanup process, regular reviews of your codebase are still essential. Make it a habit to refactor old code, remove unused components, and ensure that your project remains lightweight and easy to maintain. Automating this process with CI/CD pipelines can also help you keep your codebase lean and performant as you continue developing.

Conclusion

Improving the performance of your application isn’t just about writing efficient code; it’s also about keeping your project clean and free of unnecessary files and dependencies. Regularly removing unused code not only reduces the size of your project but also improves load times, simplifies maintenance, and enhances the user experience. Tools like Knip and PurgeCSS make it easier to automate this cleanup process, but the key takeaway is the habit of constantly auditing and optimizing your code.

By adopting this mindset and utilizing these tools, you can ensure your project remains fast, lean, and optimized for the best performance possible.

How to setup Cypress environment with Typescript

Lucas Melo — Wed, 09 Feb 2022 16:31:16 +0000

Testing is always the best way to make sure that everything in your application is working as it should (even after fixes or new features).

Unit tests are so useful, but when it comes to testing a whole flow or bigger functionalities, end-to-end tests are most suitable. In this tutorial, I will help you to setup a Cypress environment with Typescript, create custom commands and use Cypress Testing Library.

Install

First, you should add cypress to the application you want.



yarn add cypress --dev

(or with npm, if you prefer)

Now, we still need open it for the first time to config. You need to add a new script in your package.json and run in your terminal. It's very important to run, because it will generate a lot of files in your app.

root/package.json



"cy:open": "cypress open"

This will open the cypress interface and create a cypress folder and cypress.json file. As you can see, there are some example tests (in cypress/integration) and a lot of default configs. cypress/integration is the folder you can create your tests.

Config

Typescript

The first thing we need to do is creating a tsconfig.json file inside the cypress folder and paste this

cypress/tsconfig.json



{
    "compilerOptions": {
        "target": "ES5",
        "lib": ["es5", "dom"],
        "types": ["cypress"]
    },
    "include": ["**/*.ts"]
}

At this time, you should restart your Typescript server. If you're in VSCode just type:

ctrl + shift + P
restart TS server.

In cypress/support folder, you see commands.js file and index.js file. Rename to typescript extension.

cypress/support



commands.js -> commands.ts
index.js -> index.ts

Create an index.d.ts file in this same folder (cypress/support). This will be important to create custom commands - very useful!. Add this to index.d.ts file:

cypress/support/index.d.ts



/// <reference types="cypress" />

declare namespace Cypress {
    interface Chainable {

    }
}

Now, we have to update root/tsconfig.json by adding "cypress" to exclude.

root/tsconfig.json



"exclude": ["cypress", "node_modules"]

The config is almost done, now, we just have to this to the root/cypress.json

cypress.json



{
    "video": false,
    "baseUrl": "http://localhost:3000"
}

Testing Library

Once we configured Typescript, now it's time to add improve our environment. First, we need to add the Cypress Testing Library. It allows us to use commands from testing library.

Just run in your terminal



yarn add @testing-library/cypress @types/cypress jest @types/jest -D

After this, is necessary to add these commands to our environment. Add this to the commands.ts file.

cypress/support/commands.ts



import "@testing-library/cypress/add-commands";

And add this line to the cypress/tsconfig.json file, so it can identify the library.

cypress/tsconfig.json



"types": ["cypress", "@testing-library/cypress"]

Creating custom commands

This is actually the most cool thing, in my opinion, about Cypress. We can create custom commands like:

cy.google() - and then the test visit the google page
cy.login() - and then you login in your application

Literally anything you want. What we always need to do is:

Create the command in cypress/support/commands.ts
Type the command in cypress/support/index.d.ts

Sometimes, error may be generated, just restart TS server and everything is ok again.

Let's create our first command: cy.google() will visit google.

cypress/support/commands.ts



import "@testing-library/cypress/add-commands";

Cypress.Commands.add("google", () => cy.visit("https://www.google.com"));

Typing our new command
cypress/support/index.d.ts



/// <reference types="cypress" />

declare namespace Cypress {
    interface Chainable {
        /**
         * Custom command to visit google page
         * @example cy.google()
         */
        google (): Chainable<Window>
    }
}

Now you can use cy.google() in any test you want :)

Let's create an example test.

Create an example.ts file in cypress/integration folder.

Since we're using custom commands, we need to reference in every test file!

This is my example.ts file:



/// <reference path="../support/index.d.ts" />

describe('Cypress TS', () => {
    it('should visit Google', () => {
        cy.google();
    })
})

You can also add the cypress run command to your scripts, this is a way to run cypress tests without open the default item.

Conclusion

My goal was helping you to setup your cypress environment, you can search and learn about cypress and all its features later. There are a lot of things to see.

Thanks for reading :)