Forem: Letícia Vieira

The Future of Frontend with AI

Letícia Vieira — Mon, 17 Mar 2025 14:05:44 +0000

Frontend development in 2025 is more demanding than ever. The need for high performance, scalability, and a flawless user experience is constantly growing, and artificial intelligence has fully entered the game—generating code, refining interfaces, and speeding up processes. Some companies even consider replacing developers with AI, but this perspective may be misguided. The real path forward is to use AI as an ally, enhancing our productivity and improving the quality of our deliverables.

AI Won’t Take Your Job (Relax!)

Advanced tools like AI-powered code assistants and interface generators may give the impression that frontend developers' days are numbered. However, reality tells a different story:

Silent Technical Debt: Automated solutions may work well in the short term but often fail in terms of scalability and maintenance.
Context is King: AI can generate efficient code, but it doesn’t fully understand product nuances, user needs, or business rules.
Creativity and Intuition: Frontend development is more than just coding. It requires understanding user experience, ensuring accessibility, and creating responsive designs—areas where human intuition makes all the difference.

The right question isn’t whether AI will replace us, but rather how we can use it to become even more valuable in what we do.

AI on My Team? Yes, Please!

Instead of seeing AI as a threat, the best approach is to embrace it and take full advantage of what it offers:

More Time for What Matters

AI can handle repetitive tasks, such as generating basic components or automating code reviews, freeing up developers to focus on more strategic and creative solutions.

Optimized Performance

With AI’s help, we can analyze file sizes, optimize loading times, and identify performance issues before they impact users.

Perfect Accessibility & SEO

AI tools can detect accessibility issues like poor contrast or confusing structures and help optimize search engine rankings.

The Secret? Master the Basics

No matter how advanced AI becomes, nothing replaces a developer who has mastered frontend fundamentals:

Fluency in HTML, CSS, and JavaScript, the building blocks of the web.
Knowledge of scalable application architecture.
Skills in WebAssembly and performance optimization techniques.
Practical application of Core Web Vitals and user experience principles.

Without a strong foundation, we risk over-relying on AI and losing control over what we create.

The rise of AI is a unique opportunity for frontend developers to stand out, delivering faster and higher-quality projects. AI isn’t here to replace us—it’s here to empower us. The key is to integrate it into our workflow while maintaining the critical thinking and creativity that set us apart in the industry.

In the end, developers who combine solid technical skills with smart AI usage won’t just survive in 2025—they’ll become indispensable in any team.

O Futuro do Frontend com IA

Letícia Vieira — Fri, 14 Mar 2025 13:30:54 +0000

O desenvolvimento frontend em 2025 está mais exigente do que nunca. A necessidade de alto desempenho, escalabilidade e uma experiência impecável só cresce, e a inteligência artificial entrou de vez no jogo, gerando códigos, refinando interfaces e acelerando processos. Algumas empresas chegam a cogitar substituir desenvolvedores por IA, mas essa visão pode ser equivocada. O verdadeiro caminho é usar a IA como aliada, ampliando nossa produtividade e elevando a qualidade das entregas.

A IA Não Vai Roubar Seu Lugar (Relaxa!)

Ferramentas avançadas, como geradores de interfaces e assistentes de código baseados em IA, podem dar a impressão de que o papel do desenvolvedor frontend está com os dias contados. Mas a realidade é bem diferente:

Dívida Técnica Silenciosa: Soluções automatizadas podem funcionar bem no curto prazo, mas costumam falhar em escalabilidade e manutenção.
Contexto é Rei: A IA pode gerar códigos eficientes, mas ainda não entende as nuances do produto, as necessidades dos usuários ou as regras do negócio.
Criatividade e Feeling: Desenvolver frontend vai muito além de programar. É preciso compreender a experiência do usuário, garantir acessibilidade e criar designs responsivos — áreas onde a intuição humana faz toda a diferença.

A pergunta certa não é se a IA vai nos substituir, mas sim como podemos utilizá-la para nos tornarmos ainda mais valiosos no que fazemos.

IA no Meu Time, Sim Senhor!

Em vez de encarar a IA como uma ameaça, o ideal é aproveitá-la a nosso favor e tirar o melhor proveito do que ela oferece:

Mais Tempo para o que Importa

A IA pode assumir tarefas repetitivas, como gerar componentes básicos ou automatizar revisões de código, liberando espaço para nos concentrarmos em soluções mais estratégicas e criativas.
Desempenho Otimizado

Com a ajuda da IA, é possível analisar o tamanho de arquivos, otimizar o carregamento e identificar problemas de performance antes que afetem os usuários.
Acessibilidade e SEO na Medida Certa

Ferramentas de IA podem detectar falhas de acessibilidade, como contrastes inadequados ou estruturas confusas, além de ajudar a otimizar o ranqueamento nos motores de busca.

O Segredo? Dominar o Básico

Por mais avançada que a IA seja, nada substitui um desenvolvedor que domina os fundamentos do frontend:

Fluência em HTML, CSS e JavaScript, a base de tudo.
Conhecimento em arquitetura de aplicações escaláveis.
Habilidade com WebAssembly e técnicas de otimização de desempenho.
Aplicação prática de Core Web Vitals e princípios de experiência do usuário.

Sem essa base sólida, corremos o risco de depender excessivamente da IA e perder o controle do que estamos criando.

A chegada da IA é uma oportunidade única para os desenvolvedores frontend se destacarem, entregando projetos mais rápidos e de qualidade superior. A IA não veio para substituir ninguém, mas para nos fortalecer. O segredo é integrá-la ao nosso fluxo de trabalho sem perder o olhar crítico e a criatividade que fazem a diferença no mercado.

No fim das contas, o desenvolvedor que alia uma base técnica sólida ao uso inteligente da IA não apenas sobrevive em 2025, mas se torna uma peça essencial em qualquer equipe.

What is React.cloneElement() function?

Letícia Vieira — Mon, 16 Jan 2023 23:47:42 +0000

When building web applications with React, one of the most important goals is to create reusable, modular components. This allows developers to easily reuse components in different parts of their application, making the development process faster and more efficient. One of the tools that developers can use to achieve this goal is the React.cloneElement method.

According to the official React documentation, React.cloneElement is used to clone a React element and pass new props to it. This means that you can reuse a component multiple times in your application, but with different properties, styles or behaviors. For example, imagine you have a Card component that is used in multiple pages of your application, but in some situations, you want it to have a different background color or image. With React.cloneElement, you can easily clone the card component and pass new props to it, without having to create a new implementation of the component.

With React.cloneElement, you can clone the card component and pass new props to it without having to create a new implementation of the component.

Let’s walk through an example to see when it’s useful.

import React from 'react';

function Card(props) {
  const cardStyle = {
    backgroundColor: 'white',
    padding: '10px',
    border: '1px solid #ccc'
  };

  // Clone and modify the child element
  const clonedChild = React.cloneElement(props.children, 
    { style: { fontWeight: 'bold' } 
  });

  return (
    <div style={cardStyle}>
      {clonedChild}
    </div>
  );
}

function App() {
  return (
    <Card>
      <h2>Welcome to my website</h2>
    </Card>
  );
}

The Card component used in example above, accepts child components and renders them inside a container using a specific style. We're using React.cloneElement to clone the child element that is passed to the Card component and then adding a new style prop fontWeight: 'bold' to it.

In conclusion, the React.cloneElement function duplicates the existing component and permits changes to some of its properties rather than creating a new component. As a result, it's a fantastic option if you want to modify an existing component without having to completely rewrite it. This helps to keep the codebase clean, organized, and optimized for performance, which is a key goal when building web applications with React.

SWR vs React-Query

Letícia Vieira — Thu, 22 Dec 2022 14:36:10 +0000

Data fetching is an essential part of any modern web application. It allows us to retrieve data from APIs and other sources to display it to the user. In a React application, many different libraries and techniques can be used to manage data fetching.

What is?

SWR (stale-while-revalidate) and React-Query are the two most popular libraries that can be used to manage data fetching in a React application. Both libraries can help you make HTTP requests, cache the results of those requests, and automatically update your UI when the data changes.

The main difference between both

One of the main differences between the two libraries is the level of features and functionality they provide. SWR is a smaller library that focuses on providing a simple way to fetch and cache data, while React-Query is a larger library that provides many more features, including pagination, polling, refetching, and error handling.

Another difference is the way the libraries handle caching and data refreshing. In SWR, you can use the staleTime option to specify how long the data should be considered fresh before it is considered stale and eligible for revalidation. In React-Query, you can use the cacheTime option to specify the length of time that data should be kept in the cache before it is considered stale and eligible for refetching.

Overall, the main difference between SWR and React-Query is the level of features and functionality they provide. SWR is a good choice for simple data fetching needs, while React-Query is a good choice for more advanced or complex data fetching requirements.

How to use it?

To use SWR in a React application, you will need to install the library

// Inside your React project directory, run the following:
yarn add swr

// Or with npm:
npm install swr

then wrap your HTTP request in a useSWR hook. The hook will return the data from the request. Here is a code snippet of how you might use the useSWR hook to fetch data from an API:

import useSWR from 'swr';

function fetcher(url) {
  return fetch(url).then(res => res.json());
}

function Users() {
  const { data, error } = useSWR('/api/users', fetcher);

  if (error) return <div>Failed to load data</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{data.name}</div>;
}

To use React-Query, you will need to install the library and then wrap your component with QueryClient. Once the library is installed, you can use the useQuery hook in your React component to fetch and manage data from an API. The useQuery hook accepts a queryKey and a queryFn as arguments, and returns an object with the data, loading state, and error state of the query.
Import useQuery and start using it in any functional component:

import { useQuery } from '@tanstack/react-query';

function Users() {
  const { data, error, isLoading } = useQuery(
    '/api/users',
    async () => {
      const res = await fetch('/api/users');
      return res.json();
    }
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return <div>{data.name}</div>;
}

Both SWR and React-Query provide many more options and configuration settings that you can use to customize the behavior of your data fetching. You can refer to the documentation for each library for more information.

Which one to choose?

The choice between using SWR or React-Query for data fetching in React app will depend on your specific needs and the complexity of your data dependencies.

SWR is a small library that was created by Vercel (formerly known as Zeit). It works by wrapping your HTTP request in a useSWR hook, which returns the data from the request and some helper functions. When the data is stale, the hook will automatically re-fetch the data in the background while continuing to return the stale data to the UI. This allows the UI to stay responsive while the data is being updated.

React-Query is a larger library that provides many more features than SWR. In addition to caching and automatic data refreshing, it also has features for pagination, polling, refetching, and handling errors. It also provides tools for optimizing the performance of your data fetching, such as the ability to batch and deduplicate requests.

In general, SWR is a good choice if you just need a simple way to fetch and cache data in your application. React-Query is a good choice if you need more advanced features or if you are working on a larger application with a lot of data dependencies.

Both libraries can be useful for improving the performance of your application by making it easier to fetch, cache, and update data in a performant way.

5 Best Gnome Shell Extensions

Letícia Vieira — Mon, 24 Oct 2022 20:24:23 +0000

My preferred desktop environment is Gnome, which I've been using since 2018.
I admit that extensions greatly improve the experience and were what initially drew me to GNOME.

I've brought my necessary extensions with me. I'm hoping you like it.

I'm currently using ubuntu 20.04 LTS and GNOME 3.36.8

1. Use Theme

It's a fantastic addition for customization. Use Themes enabling us to modify the GNOME Shell theme, giving us the opportunity to fully customize our experience.

https://extensions.gnome.org/extension/19/user-themes

2. Dash to Dock

This plugin takes the dash out of the overview and converts it into a dock so that apps can be launched more easily and windows and desktops can be switched between more quickly. There are placement possibilities on the side and bottom.

https://extensions.gnome.org/extension/307/dash-to-dock

3. Clipboard Indicator

This useful application creates a little clipboard icon in the tray and, as a result, saves a history of the contents of the clipboard so you may quickly re-copy them in the future. You can instantly turn on/off a private mode as needed and define the memory cache size (for example, last 10 items or last 100 things).

https://extensions.gnome.org/extension/779/clipboard-indicator

4. ArcMenu

Similar to the Start menu in Windows, Arc Menu is a more "conventional" app menu for GNOME Shell that can be accessed from the desktop. But this item is much more flexible than Windows' Start Menu.

https://extensions.gnome.org/extension/3628/arcmenu

5. Sound Input & Output Device Chooser

Displays a list of sound input and output devices in the status menu below the volume slider (similar to the gnome sound settings).

https://extensions.gnome.org/extension/906/sound-output-device-chooser