DEV Community: Roberto Costa

Core Web Vitals: UX além da interface

Roberto Costa — Thu, 04 Apr 2024 01:22:47 +0000

Na web a experiência do usuário vai além da interface: tempo de carregamento, interatividade e estabilidade são alguns dos pilares que podem definir seu sucesso ou ruína!

Entenda nesse artigo como utilizar uma das melhores ferramentas para análise da experiência de usuários do mundo real: Core Web Vitals!

Introdução
Entendendo Core Web Vitals
- Largest Contentful Paint (LCP) - Maior exibição de conteúdo
- Interaction to Next Paint (INP) - Interação com a próxima exibição
- Cumulative Layout Shift (CLS) - Mudança de layout cumulativa
Usando o Lighthouse no seu projeto
O Core Web Vitals está em constante evolução
Conclusão
Referências

Introdução

Fazer um site bonito é bem legal, mas esse esforço pode ser jogado no lixo se a tela demorar muito para carregar ou ficar travando.

Pode parecer óbvio mas conforme temos a necessidade de adicionar mais funcionalidades na nossa aplicação/site, começamos a conviver com o pensamento de "trade offs":

Vale a pena meu site demorar 800 milissegundos a mais para carregar para que eu disponibilize um chatbot?
Vale a pena que a aplicação fique congelada por 1 segundo para que eu possa sincronizar um montão de dados sem que o usuário interaja com ela?

E mesmo assim isso são casos onde você tem uma necessidade específica e precisa ponderar sobre essas trocas, mas o cenário mais comum é outro:

As pessoas simplesmente saem desenvolvendo e se deparam com o monstro que criaram:

Um projeto carregando muito JavaScript;
Alguma rotina causando vazamento de memória;
Código não utilizado sendo carregado e atrasando o carregamento da página;
Imagens enormes não otimizadas demorando para carregar.

É muito fácil criar esses monstros no dia a dia, mas antes de entender como podemos evitar, vamos entender como fazemos para detectar esses problemas.

Entendendo Core Web Vitals

De acordo com o artigo Web Vitals:

As métricas Web Vitals são uma iniciativa do Google para fornecer orientações unificadas para indicadores de qualidade da página da Web que são essenciais para oferecer uma ótima experiência do usuário na Web.

Contudo existe um subconjunto muito mais crítico para a experiência do usuário que se resume em 3 métricas:

Largest Contentful Paint (LCP) - Maior exibição de conteúdo

A LCP informa o tempo de renderização da maior imagem ou bloco de texto visível na janela de visualização em relação ao momento em que o usuário navegou pela primeira vez à página. Para oferecer uma boa experiência ao usuário, a LCP precisa ocorrer em até 2,5 segundos após o início do carregamento da página.

Interaction to Next Paint (INP) - Interação com a próxima exibição

A INP observa a latência de todas as interações de clique, toque e teclado com uma página durante toda a vida útil e informa a duração mais longa, ignorando as exceções. Um INP baixo significa que a página é capaz de responder rapidamente à grande maioria das interações do usuário de maneira consistente. Para oferecer uma boa experiência do usuário, as páginas precisam ter um INP de 200 milissegundos ou menos.

Cumulative Layout Shift (CLS) - Mudança de layout cumulativa

A CLS é uma medida do maior valor de pontuações de troca de layout para cada mudança inesperada que ocorre durante a vida útil de uma página. Uma mudança de layout ocorre sempre que um elemento visível muda de posição de um frame renderizado para o próximo. Para oferecer uma boa experiência do usuário, é necessário manter um CLS de 0.1. ou menos.

É muito fácil testar o desempenho de um site nestas métricas, podemos tanto utilizar o PageSpeed Insights quanto a ferramenta Lighthouse que já vem embutida no navegador Google Chrome.

Pegue qualquer site, até este mesmo onde você está lendo e use uma destas ferramentas.

Seja pelo PageSpeed Insights ou pelo Lighthouse, ao analizar a página você terá um relatório parecido com estes:

Relatório do PageSpeed Insights

Relatório do Lighthouse

Usando o Lighthouse no seu projeto

Particularmente gosto mais de utilizar o Lighthouse pois é possível usá-lo no seu projeto como uma dependencia e integrar com a sua sua esteira de entrega de software.

Dessa forma podemos criar alertas automatizados para nos avisar caso alguma das métricas venha a ser violada ou passe dos valores que você estipular.

Lighthouse no NPM: https://www.npmjs.com/package/lighthouse

Por padrão ele analiza apenas a página que você apontou no seu site, mas é possível realizar automações, com o Puppeteer por exemplo, para simular a navegação de um usuário e extrair um relatório deste fluxo.

Ainda nesta utilidade, você pode usar uma ferramenta de dentro do DevTools, o Recorder que grava o fluxo do usuário na sua tela para que você possa reproduzir com ferramentas como o Puppeteer.

Assim fica simples demais testar seu frontend para estar sempre respeitando as métricas que você definiu, ou pelo menos que você possa notar quando algo de errado estiver acontecendo.

Ainda de acordo com Web Vitals em web.dev:

Para cada uma dessas métricas, para garantir que você atinja a meta recomendada para a maioria dos usuários, um bom limite a ser medido é o 75o percentil de carregamentos de página, segmentado em dispositivos móveis e computadores.

As ferramentas que avaliam a conformidade com as Core Web Vitals precisam considerar uma página em conformidade se ela atender aos destinos recomendados no 75o percentil para cada uma dessas três métricas.

O Core Web Vitals está em constante evolução

Cada fase é projetada para sinalizar aos desenvolvedores como eles devem pensar sobre cada métrica:

As métricas experimentais são potenciais Core Web Vitals que ainda podem estar passando por mudanças significativas dependendo dos testes e do feedback da comunidade.

As métricas pendentes são as Core Web Vitals futuras que passaram no estágio de teste e feedback e têm um cronograma bem definido para se tornarem estáveis.

As métricas estáveis são o conjunto atual de Core Web Vitals que o Chrome considera essenciais para oferecer ótimas experiências do usuário.

Recentemente houve a substituição da métrica FID (First Input Delay) pela INP, como descrito neste artigo, logo, é interessante ficar atendo às mudanças e tendencias da comunidade.

Conclusão

Core Web Vitals são uma ótima forma de analizar e mitigar os problemas do seu site, use e abuse desta ferramenta que com toda certeza vai contribuir para a qualidade geral do seu software.

Contudo analisar é apenas a primeira parte, acompanhe nos meus próximos conteúdos as técnicas e boas práticas mais interessantes para fazer um frontend incrível independente de framework.

Referências

Google Developers. Vitals - web.dev. Disponível em: https://web.dev/articles/vitals. Acesso em: 03 abr. 2024.

Google Developers. Novas métricas de campo para a experiência de página: Primeiras impressões. Disponível em: https://web.dev/blog/inp-cwv-march-12?hl=pt-br. Acesso em: 03 abr. 2024.

Google Developers. Google Chrome Developer Tools: Gravador. Disponível em: https://developer.chrome.com/docs/devtools/recorder. Acesso em: 03 abr. 2024.

npm. Lighthouse. Disponível em: https://www.npmjs.com/package/lighthouse. Acesso em: 03 abr. 2024.

Google Developers. Insights sobre velocidade da Web. Disponível em: https://developers.google.com/speed/docs/insights/v5/about. Acesso em: 03 abr. 2024.

Google Developers. PageSpeed Insights. Disponível em: https://pagespeed.web.dev/. Acesso em: 03 abr. 2024.

Google Chrome Web Store. Lighthouse. Disponível em: https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk. Acesso em: 03 abr. 2024.

Desenvolvendo Soft Skills

Roberto Costa — Sat, 09 Mar 2024 19:13:44 +0000

Habilidades técnicas todo mundo aprende, mas o que te destaca são as habilidades não técnicas.

Aprenda como sair na frente e se virar nas mais diversas situações com soft skills que o tornam um profissional completo.

O que são Soft Skills

A definição mais simplista é: habilidades não técnicas.

Normalmente soft skills são definidas como habilidades interpessoais, ou seja, suas capacidades de comunicação, sociais, fala e hábitos.

Contudo, gosto de conferir outro sentido à Soft Skills:

Toda habilidade essencial para a boa execução do seu trabalho é considerada uma habilidade técnica (Hard Skills);
Toda habilidade não essencial para o seu trabalho pode ser considerada uma soft skill.

Logo, existem habilidades que não são exatamente sobre interações sociais mas que me ajudam muito no dia a dia do trabalho, por exemplo: leitura dinâmica e técnicas de memorização.

Gosto deste tipo de visão pois te habilita a olhar além das capacidades sociais e pensar em tudo que pode compor seu cinto de utilidades de soft skills.

Tipos de Soft Skills

Comunicação assertiva

Articule ideias e seja compreendido de forma clara e simples.
Comunicação assertiva é fazer mais com menos, compreender e ser compreendido, o que é essencial em ambientes de trabalho em equipe, quase todo trabalho.

Trabalho em equipe

Falando em trabalho em equipe, de nada adianta saber comunicar suas ideias se não conseguir colaborar em equipe.
Trabalho em equipe envolve saber dividir para conquistar, confiar nos seus pares e principalmente entender que todos estão ali para um objetivo em comum.

Pensamento crítico

Pense e entenda o que está fazendo e como isso tem valor para o objetivo, só assim você consegue sair da caixinha e agregar valor de verdade.

Um bom exemplo é tarefas que as pessoas querem automatizar, mas o trabalho para fazer isso vai gastar mais tempo e ter menos retorno do que apenas fazer manualmente de forma ocasional.

É o tipo de coisa que nem todo mundo pára pra pensar antes de fazer.

Resolução de problemas

Muitas das vezes as pessoas não estão esperando os problemas aparecerem, mas eles chegam mesmo assim.

Essa habilidade é sobre você ter a calma e controle para pegar o controle da situação e fazer o melhor que puder com o que você tem.

Nem sempre poderá fazer muito sobre isso, mas é importante que não desista antes de tentar.

Inteligência emocional

Nem sempre o caminho que as coisas tomam é aquele que você gostaria, e por isso mesmo é super importante que você se conheça e treine esta habilidade.

Lidar bem com situações atípicas e frustrações é algo bem complicado e isso daqui costuma ser uma jornada pessoal para cada pessoa.

Empatia

Sim, eu sei que tem momentos onde você quer simplesmente detonar uma bomba em cima de uma pessoa, mas é importante lembrar que ela é tão humana quanto você e amanhã pode ser o dia onde você precisaria de empatia dela.

Gestão de tempo

Ahh essa daqui é boa!!
Já sentiu que você está sempre no olho de um furacão com tudo rodando ao seu redor onde você só pode se concentrar nas emergências, sempre tem muita coisa com prazos críticos e etc??

Nossa é muito ruim isso, qual foi a última vez que você estava relativamente tranquilo, com bastante folga nos prazos e tempo de sobra?

Pois é, toda vez que você ver alguém que tá sempre na correria lembre-se desta habilidade.

Adaptabilidade

Eu que trabalhei bastante de startups sempre convivi bastante com ambientes onde tudo está mudando constantemente, mudanças de prioridade, tudo é emergência, tudo é importante, etc.

Bem isso não é nem de longe agradável mas assim como outros calos da profissão, te preparam para se adaptar aos mais diversos cenários.

Uma das coisas mais importantes dessa habilidade é saber analisar suas prioridades e se organizar de acordo com elas.

Tudo mudar muito rápido não é uma desculpa para ser desorganizado.

Liderança

Todas habilidades anteriores bem desenvolvidas podem te levar naturalmente para o caminho da liderança.

Faça as contas:

Se comunica bem;
Sabe lidar com problemas;
Sabe lidar com pessoas;
Sabe usar seu tempo;
Se mantém firme diante dos problemas;
Faz o que tem que fazer para chegar no objetivo.

Olhando pra isso tudo parece quase natural colocar uma pessoa com essas habilidades em uma posição de liderança onde pode ajudar outras pessoas a colaborar para um objetivo maior.

Onde as Soft Skills te Levam?

Gosto de dizer essas habilidades te levam além e desbloqueiam novos caminhos.

Cargos de liderança e gestão

Uma pessoa que desenvolveu bem suas soft skills naturalmente é mais cogitada para cargos de liderança e gestão.

Oportunidades

Se conectar com pessoas e desenvolver relações genuínas é uma forma muito eficaz de acessar ótimas oportunidades de trabalho e negócios.

Sucesso e crescimento profissional

Pessoas com melhor domínio de soft skills aumentam significativamente as chances de sucesso dos projetos que participam bem como sua velocidade e destaque no meio profissional.

Como treinar

Como muitas das habilidades não técnicas são relacionadas a situações sociais, se expor socialmente é um caminho natural:

Apresentar trabalhos/palestras;
Ir em eventos;
Socializar com pessoas;
Falar com pessoas que pensam diferente;
Ter discussões construtivas;
Ensinar;

Assim como mencionei no início deste artigo, toda e qualquer habilidade que possa te ajudar nas suas tarefas é bem vinda.

Então preste bastante atenção nas atividades que você desempenha rotineiramente para entender se é possível melhorar seu desempenho e resultados.

Leituras recomendadas

O que não falta por aí é conteúdo falando sobre soft skills, mas gostaria de recomendar pessoalmente estes 2 livros que me ajudaram bastante alcançar outro nível nessas habilidades:

Soft skills: competências essenciais para os novos tempos por Lucedile Antunes
Como fazer amigos e influenciar pessoas por Dale Carnegie

Referências

Gupy Blog. "Soft Skills: o que são, sua importância e 10 principais soft skills para o mercado de trabalho." Disponível em: https://www.gupy.io/blog/soft-skills.

Solides Blog. "Conheça soft skills para desenvolver." Disponível em: https://blog.solides.com.br/conheca-soft-skills-para-desenvolver/.

Na Prática. "Como desenvolver soft skills." Disponível em: https://www.napratica.org.br/como-desenvolver-soft-skills/.

Simplificando IndexedDB

Roberto Costa — Wed, 06 Mar 2024 16:01:57 +0000

Mais espaço, mais rápido e menos amigável.

A partir daqui é menos ódio e mais amor pela forma de armazenamento mais poderosa do seu navegador.

O IndexedDB pode ser um pouco complicado a princípio, mas ao final deste artigo você vai entender o essencial para usar o melhor desta ferramenta ao seu favor!

Tabela de Conteúdos

Pontos fortes
Pontos de atenção
Teoria e conceitos do IndexedDB
- Database
- Object Store
- Índices
- Transações
- Versionamento
IndexedDB na prática
- Criando o banco e a store
- Operações de armazenamento
- Trabalhando com Índices
- Transações
Conclusão
Referências

De acordo com Developer Mozilla:

IndexedDB é uma API de baixo nível para armazenamento no lado do cliente de quantidades significativas de dados estruturados, incluindo arquivos/blobs.

O IndexedDB é um sistema de banco de dados transacional, semelhante a bancos que utilizam SQL, contudo, sua semelhança com SQL acaba por ai.

Nele trabalhamos com o armazenamento de objetos indexados com chaves, logo, podemos sim considerá-lo um banco de dados NoSQL, e nesse aspecto lembra um pouco bancos como o Redis que trabalham no esquema Chave-Valor.

Pontos fortes

Alta performance em consultas: Seu funcionamento baseado em índices permite realizar consultas de forma mais performática em comparação aos mecanismos de WebStorage.
Altas cotas de armazenamento: Ainda em comparação com o WebStorage, que pode armazenar cotas de até 5 MiB, o IndexedDB oferece até 10% do tamanho total do disco onde o perfil do usuário está armazenado.

Por exemplo, se o dispositivo tiver um disco rígido de 500 GiB, o navegador permitirá que uma origem armazene até:

No modo de melhor esforço: 10 GiB de dados, que é o limite do grupo eTLD+1.
No modo persistente: 250 GiB, que representa 50% do tamanho total do disco.

Navegadores diferentes tratam os limites e o despejo de dados de forma diferente, entenda mais em: https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria#other_web_technologies

Armazenamento de dados estruturados: Aqui podemos armazenar diretamente objetos complexos da nossa aplicação sem a necessidade de conversões mirabolantes, ou transformar em string como é o caso do localStorage.

Sim, diferente do localStorage que armazena apenas texto aqui você pode armazenar diretamente qualquer tipo objeto suportado pelo algoritmo de clone estruturado.

Pontos de atenção

Complexidade: IndexedDB é uma API de baixo nível, o que significa que pode ser complexa para iniciantes. Requer uma compreensão sólida de conceitos como transações, índices e manipulação de eventos.
Não é adequado para todos os casos de uso: IndexedDB é mais adequado para armazenar grandes volumes de dados, como em aplicativos da web que precisam de armazenamento offline robusto. Para casos de uso mais simples, como armazenamento temporário de dados, pode ser excessivo.
Desempenho em alguns cenários: Embora seja geralmente eficiente para grandes conjuntos de dados, IndexedDB pode ter desempenho inferior em cenários onde há muitas operações de leitura e escrita frequentes em pequenos conjuntos de dados.
API Verbosa: As operações em IndexedDB muitas vezes exigem muito código para realizar tarefas simples. Isso pode tornar o desenvolvimento mais demorado e propenso a erros.

Teoria e conceitos do IndexedDB

Database

A estrutura de mais alto nível do IndexedDB.
Nele iremos conter as Object Stores, onde de fato iremos armazenar os dados.
É possível criar múltiplos Databases, que por sua vez podem conter múltiplas Object Stores.

Object Store

Cada Object Store é um compartimento individual onde seus dados serão armazenados.
Traçando um paralelo com bancos de dados relacionais, as Object Stores normalmente são criadas para um fim específico, como armazenar apenas produtos, ou apenas posts de um blog.
É comum criar uma Object Store para cada finalidade dentro da aplicação, como: armazenar uma lista de produtos, publicações de um blog, etc.

Diferentemente das tabelas em bancos de dados tradicionais, os tipos de dados no armazenamento não precisam ser consistentes.

Assim, podemos por exemplo, armazenar um objeto com propriedades que podem ser String ou undefined sem problemas.

Neste exemplo temos uma Store de métodos de pagamento por usuário, onde cada objeto tem as propriedades: name e payment.

Contudo é perceptível que nem todos os objetos desta Store possuem um valor válido para payment.

Índices

No IndexedDB os índices funcionam como se fosse uma nova Object Store, contudo a chave para consulta é definida por um campo específico do objeto armazenado.

Levando em consideração o exemplo anterior com a Store de métodos de pagamento por usuário, vamos criar um índice baseado nas formas de pagamento:

Neste novo índice podemos observar as seguintes mudanças:

A chave agora é o método de pagamento;
Os objetos armazenados continuam os mesmos;
Registros que não possuem a propriedade payment não são retornados;

A Object Store anterior que se baseava em um ID incremental ainda existe, contudo, no ato da consulta da Object Store é crucial informar o índice de consulta desejado, caso contrário a consulta será realizada no índice padrão.

Transações

Uma transação é um procedimento que envolve uma operação ou grupo de operações que garante a integridade do banco de dados.

Se uma das ações de uma transação falhar, nenhuma delas será aplicada e o banco de dados retornará ao estado em que estava antes do início da transação.

Todas as operações de leitura ou gravação no IndexedDB precisam fazer parte de uma transação. Isso permite operações atômicas de leitura-modificação-gravação sem precisar se preocupar com outras linhas de execução agindo no banco de dados ao mesmo tempo.

Versionamento

No IndexedDB existe o conceito de versão do banco de dados, onde cada versão é numerada, normalmente de forma sequencial.

Quando o banco é executado pela primeira vez, a sua versão começa em 0.

Esta funcionalidade é realmente útil quando se precisa por algum motivo modificar a estrutura do banco, assim criamos uma nova versão com uma estrutura diferente.

IndexedDB na prática

Na prática a verbosidade da API do IndexedDB é algo que pode realmente complicar o seu trabalho e levá-lo a reconsiderar o uso da ferramenta. Inclusive sua complexidade é algo que leva muitas pessoas a desistirem mesmo de entender como se usa a ferramenta, assim perdendo uma ferramenta que é boa para diversos trabalhos.

Eu particularmente tenho certo apreço pelo uso de bibliotecas que tornam a usabilidade do IndexedDB muito melhor como o IDB:

IndexedDB com usabilidade.
Esta é uma biblioteca pequena (~ 1,19kB brotli'd) que reflete principalmente a API IndexedDB, mas com pequenas melhorias que fazem uma grande diferença na usabilidade.

Uma vez que o IndexedDB tem uma documentação muito boa, vou me ater a exemplos já existentes das documentações e lhes encorajo a notar como sua implementação com a biblioteca npm IDB se torna muito mais simples em comparação com a API padrão.

Verificando a compatibilidade com IndexedDB

A compatibilidade do IndexedDB é quase absoluta, contudo existem cenários onde é importante checar sua compatibilidade, por exemplo se você estiver trabalhando com navegadores mais antigos, por precaução, não é uma má ideia detectar o suporte de recursos.

A maneira mais fácil é verificar o objeto window:

if (!window.indexedDB) {
  window.alert(
    "Seu navegador não suporta uma versão estável do IndexedDB. Alguns recursos não estarão disponíveis.",
  );
}

Este e outros exemplos de código em: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB

Criando o banco e a store

Para abrir um banco é preciso realizar um pedido (request) que será atendido em algum momento, assim várias operações do IndexedDB.

Para criar o banco de dados temos que realizar os seguintes passos:

Informar o nome do banco
Informar a versão do banco
Criar a Object Store

No seguinte exemplo vamos criar dar vida ao nosso exemplo anterior de métodos de pagamento por usuário utilizando a biblioteca IDB para realizar a abertura do banco e a criação da primeira store.

import { openDB } from 'idb';

const dbPromise = openDB('MeuBancoIDB', 1, {
  upgrade(db) {
// aqui é onde realizamos a definição do nosso banco
// podemos criar quantas stores quisermos
    db.createObjectStore('usuariosPagamento');
  },
});

O método upgrade é chamado se essa versão do banco de dados nunca tiver sido aberta antes.

Nele especificamos o esquema (estrutura) do banco de dados.

Veja em profundidade o funcionamento do método openDB e seu ciclo de vida: https://www.npmjs.com/package/idb#opendb

Operações de armazenamento

Com o nosso banco de dados criado com sucesso, é hora de realizarmos as operações de leitura e escrita.

Uma vez que a dbPromise será nossa interface assíncrona com o banco, os métodos para acessar o banco precisam resolver as promises para que só então possam interagir com o banco.

Veja a seguir o exemplo da documentação:

import { openDB } from 'idb';

const dbPromise = openDB('MeuBancoIDB', 1, {
  upgrade(db) {
    db.createObjectStore('usuariosPagamento');
  },
});


// espere a promise do banco resolver com async/await
// resolvendo a promise, realize a operação

export async function get(key) {
  return (await dbPromise).get('usuariosPagamento', key);
}
export async function set(key, val) {
  return (await dbPromise).put('usuariosPagamento', val, key);
}

Trabalhando com Índices

Gosto de dizer que os índices são a parte legal do IndexedDB (também o nome dele é Indexed, se os índices não fossem legais não faria sentido).

O uso dos índices pode conferir velocidade e praticidade na recuperação de dados da sua aplicação.

Com o IDB sua criação e utilização é muito simples, vamos recriar o índice payment do exemplo passado:

const dbPromise = openDB('MeuBancoIDB', 2, {
  upgrade(db) {
    const store = db.createObjectStore('usuariosPagamento', {
      // ID é a chave padrão
      keyPath: 'id',
      // ID é um valor de auto incremento
      autoIncrement: true,
    });

   //store.createIndex('nomeDoÍndice', 'propriedadeDoObjeto')
    store.createIndex('payment', 'payment');
  },
});

Como o método upgrade é onde definimos as alterações estruturais do banco, nele mesmo iremos declarar nosso novo índice.

Além de criar um novo índice, definimos também que a chave padrão da nossa store é um ID incremental.

// buscar um registro pela chave em um índice
await dbPromise.getFromIndex('usuariosPagamento', 'payment', key)

// retornar todos registros de um índice
await dbPromise.getAllFromIndex('usuariosPagamento', 'payment')

A biblioteca IDB dispões de métodos específicos para interagir com índices, o que facilita bastante o trabalho que teríamos usando a API padrão do IndexedDB.

Transações

Trabalhar com transações é um diferencial para realizar diversas operações de uma só vez.

Caso haja algum tipo de intercorrência durante a transação, todas as operações são canceladas e o banco volta a seu estado anterior à transação.

// instância da transação
const tx = dbPromise.transaction('usuariosPagamento', 'readwrite');

// operações assíncronas a serem resolvidas
await Promise.all([
 tx.store.add({
  name: 'Anna',
  payment: 'credit'
 }),
 tx.store.add({
  name: 'Steve',
  payment: 'cash'
 }),
// a última operação é o fechamento da transação
 tx.done,
]);

Mais detalhes sobre a operação de transações em: https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction

Conclusão

IndexedDB é uma ferramenta incrivelmente poderosa nos seus casos de uso adequados, entender seu funcionamento e como posso tirar o melhor dele me ajudou não só a expandir meus horizontes para aplicações frontend, como também para trazer soluções cada vez mais especializadas para projetos onde era necessário.

Assim como qualquer tecnologia, o IDB tem seus pontos fortes e fracos, dessa forma, utilize-o com sabedoria e ceticismo.

Espero que tenham gostado <3.

Referências

npmjs.com - "IDB: IndexedDB is a low-level API for client-side storage of significant amounts of structured data." [Online]. Available: https://www.npmjs.com/package/idb.

Mozilla Developer Network (MDN) - "Storage quotas and eviction criteria". [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria.

web.dev - "Storage for the web". [Online]. Available: https://web.dev/articles/storage-for-the-web.

Medium - Julien Etienne, "The power of IndexedDB and the birth of DB64: A practical alternative." [Online]. Available: https://medium.com/@julienetienne/the-power-of-indexeddb-and-the-birth-of-db64-a-practical-alternative-4a5aa2a94794.

web.dev - "IndexedDB". [Online]. Available: https://web.dev/articles/indexeddb?hl=pt-br.

Mozilla Developer Network (MDN) - "IDBTransaction". [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/API/IDBTransaction.

Mozilla Developer Network (MDN) - "Using IndexedDB". [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB.

Sistemas Numéricos na Computação: Introdução e Binário

Roberto Costa — Thu, 11 Jan 2024 12:39:49 +0000

Há 10 tipos de pessoas no mundo: aquelas que entendem binário e aquelas que não entendem.

Vamos juntos em uma jornada para compreender as bases da computação e desbravar o mundo da tecnologia: sistemas numéricos em computação!

Tabela de conteúdos

Breve introdução à sistemas de numeração
- Decimal no detalhe
Sistemas numéricos na computação
- Binário
- Convertendo binário para decimal
- Decimal pra binário
- Contando em binário
Conclusão
Referências

Breve introdução à sistemas de numeração

Antes de falar como este sistems se aplicam na computação, vamos fazer uma breve introdução que vai nos assistir com conceitos super importantes para entender o restante.

Sistemas de numeração consistem em um conjunto de regras e símbolos utilizados para representar quantidade de forma organizada.

Historicamente já passamos por diversos sistemas de numeração que evoluíram de acordo com a cultura e necessidade das civilizações.

Alguns exemplos:

Sistema de numeração Sumério

Sistema de numeração Romano

Sistema vigesimal Maia

E ao longo do tempo foi-se desenvolvendo o sistema de numeração que utilizamos no nosso dia a dia:

Sistema decimal

O sistema decimal está presente em diversas áreas de conhecimento modernas, contudo, há áreas com necessidades específicas que desenvolveram diferentes sistemas para solucionar problemas, e uma delas é a computação.

Decimal no detalhe

É muito provável que você seja bem familiar com o sistema decimal, mas vamos passar aqui um conceito que vai ajudar a entender o binário mais à frente.

Cada casa (ou ordem) de um número decimal tem um peso diferente.

Avançar ou retroceder uma casa, significa multiplicar ou dividir este número por 10.

Cada casa de um número decimal possui 10 possíveis dígitos:
1 2 3 4 5 6 7 8 9 0

Com um número com 1 dígito, temos apenas 10 possíveis variações numéricas.

Agora, com 2 dígitos temos 100 possibilidades diferentes:



00, 01, 02, 03, 04, 05, 06, 07, 08, 09,
10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
20, 21, 22, 23, 24, 25, 26, 27, 28, 29,
30, 31, 32, 33, 34, 35, 36, 37, 38, 39,
40, 41, 42, 43, 44, 45, 46, 47, 48, 49,
50, 51, 52, 53, 54, 55, 56, 57, 58, 59,
60, 61, 62, 63, 64, 65, 66, 67, 68, 69,
70, 71, 72, 73, 74, 75, 76, 77, 78, 79,
80, 81, 82, 83, 84, 85, 86, 87, 88, 89,
90, 91, 92, 93, 94, 95, 96, 97, 98, 99

E o padrão segue: a cada dígito a mais em um número decimal temos a quantidade de combinações anterior vezes 10!

1 dígito decimal: 10 opções (0 à 9)
2 dígitos decimais: 10 × 10 = 100 opções (00 à 99)
3 dígitos decimais: 10 × 10 × 10 = 1000 opções (000 à 999)

Este conceito é importante pois cada sistema de numeração irá apenas implementar sua própria base, como será com o binário.

Sistemas numéricos na computação

A história da computação é marcada por uma necessidade crescente de representar e manipular informações de forma eficiente, dessa forma, sistemas como binário, hexadecimal e octal foram largamente empregados para diversas necessidades específicas.

Um dos fins mais comuns que estes sistemas nos permitem é a entrada de dados e sua representação em texto, ou seja, digitar no teclado:

Conversão Decimal, Binário, Octal, Hexadecimal para ASCII

Baseando-se nesta tabela que muitos computadores compreendem a informação enviada por teclados e outros dispositivos de entrada.

Binário

Vamos entender agora o básico de binário para que você possa compreender o meme abaixo e não estar mais no lugar da segunda pessoa.

Como mencionamos antes, binário é um sistema de base 2, logo, para representar informações temos 2 símbolos: 1 (ligado) e 0 (desligado).

É realmente como se fosse uma lâmpada, ou um circuito (o que geralmente é):

Seguindo a lógica da quantidade de dígitos:

1 dígito binário: 2 opções (0 ou 1)
2 dígitos binários: 2 × 2 = 4 opções (00, 01, 10, 11)
3 dígitos binários: 2 × 2 × 2 = 8 opções (000, 001, 010, 011, 100, 101, 110, 111)

Como convenção, utilizamos potências de 2 para representar a progressão em binário, logo:

4 dígitos binários: 2^4 = 16 opções (0000 a 1111)

Convertendo binário para decimal

Agora vamos ver na prática como se realiza esta conversão.

Regras da conversão:

Em binário contamos da direita para esquerda;
Dígitos 0 em uma posição específica contribuem para o valor total, mas seu valor é zero;
Cada casa (ordem) tem um peso diferente.

Exemplo prático:



Converter para decimal 🤔

 0   1   0   1   1   0   0   1

Respectivamente, cada casa deste número tem seu peso (ordem) começando da direita:



 0   1   0   1   1   0   0   1 - número
 7   6   5   4   3   2   1   0 - ordem

Assim como no sistema decimal, o número de uma ordem específica tem seu valor absoluto:

No número: 1920, o dígito 9 representa 900, pois está na ordem das centenas, ou seja: 9 (ele mesmo) x 10 (dezena) x 10 (centena) = 900.

No binário vamos fazer a potência da ordem para chegar no valor de cada dígito



 0    1    0    1    1    0    0    1
2^7  2^6  2^5  2^4  2^3  2^2  2^1  2^0
128  64   32   16    8    4    2    1

Contudo, devemos lembrar que o dígito 0 (zero) significa desligado, dessa forma vamos cumprir uma das regras citadas anteriormente: o dígito 0 não possui valor.

Assim obtemos o seguinte resultado:



 0   1   0   1   1   0   0   1
2^7 2^6 2^5 2^4 2^3 2^2 2^1 2^0
 0  64   0  16   8   0   0   1  = 89

Por fim basta somar os números resultantes para obter o número decimal convertido com sucesso.

Este método é um pouco trabalhoso se feito à mão, mas é garantidamente uma das melhores formas de compreender sistemas de numeração e compreender de fato o binário para aplicações futuras em tecnologia.

Para converter um número decimal em binário é bem mais simples.

Decimal pra binário

O processo de conversão aqui é bem mais tranquilo, só precisamos de uma divisão simples do número por 2:

Note que nem sempre a divisão irá terminar com resto zero, o que é comum para este tipo de conversão.

Contando em binário

A habilidade de contar em binário é uma aptidão fundamental em diversos domínios, sendo especialmente crucial no universo da programação e lógica digital.

Compreender como os números binários se desdobram é uma peça-chave para programadores, engenheiros e entusiastas da tecnologia.

Contar em binário é razoavelmente simples depois que já notamos como funciona a ordem dos dígitos.

Para entender a lógica por trás disso no binário, vamos revisitar o sistema decimal:

Quando uma ordem alcança seu último dígito e ainda sim precisamos incrementar 1 unidade, como seria para passar de 09 para 10, o que ocorre é a famosa "adição com reserva" ou "reagrupamento", popularmente chamado de "vai um".

Assim nós zeramos a casa das unidades e incrementamos a casa das dezenas, resultando em: 10.

Em binário temos apenas 2 dígitos de possibilidade, então é muito fácil atingir o limite e precisar fazer o "vai um".

Observe o padrão:



Binario  Decimal
 0000       0
 0001       1
 0010       2
 0011       3
 0100       4
 0101       5
 0110       6
 0111       7
 1000       8
 1001       9
 1010       10

Sim, você chegou na parte onde finalmente entendeu o meme lá de cima. 🎉

Veja também como acontecem nas bases hexadecimal e octal

Conclusão

Pronto, agora você já sabe o básico de sistemas numéricos e binário, mas isso não é tudo!

Olha só o que você desbloqueia com o conhecimento deste post:

Redes de computadores: vários aspectos das redes, desde transporte de dados, organização e configuração de redes envolve conhecimento em binário e hexadecimal;
Robótica e Automação: plataformas como Arduino e Raspberry Pi se utilizam amplamente de sistemas binários e hexadecimal para compor sua lógica de funcionamento;
Segurança: usa-se binário em tópicos como criptografia, algoritmos de hashing, assinaturas digitais, protocolos de segurança, engenharia reversa e outros.

Então não deixe seu conhecimento pegar poeira, desbloqueie mais possibilidades e vá além ⚡️.

Referências

Toda Matéria. Sistema de Numeração Decimal. Disponível em: https://www.todamateria.com.br/sistema-de-numeracao-decimal/. Acesso em: 10 jan. 2024.

IFSC - Instituto Federal de Educação, Ciência e Tecnologia de Santa Catarina. AULA 2 - Eletrônica Digital 1 - Graduação. Disponível em: https://wiki.ifsc.edu.br/mediawiki/index.php/AULA_2_-_Eletr%C3%B4nica_Digital_1_-_Gradua%C3%A7%C3%A3o. Acesso em: 10 jan. 2024.

Ciência de Garagem. Como os Sistemas Numéricos Evoluíram ao Longo do Tempo? Disponível em: https://cienciadegaragem.blogspot.com/2014/12/como-os-sistemas-numericos-evoluiram-ao.html. Acesso em: 10 jan. 2024.

Vivah, Linda. Learn How to Read Binary in 5 Minutes. Disponível em: https://medium.com/@LindaVivah/learn-how-to-read-binary-in-5-minutes-dac1feb991e. Acesso em: 10 jan. 2024.

CadCobol. Mecaweb - Conversão Bin/Dec, Dec/Bin. Disponível em: https://www.cadcobol.com.br/mecaweb_conversao_bin_dec_dec_bin.htm. Acesso em: 10 jan. 2024.

Redux 101: gerenciadores de estados simplificados

Roberto Costa — Wed, 03 Jan 2024 14:41:51 +0000

Estados complexos são um desafio, então você decide usar Redux, mas encontra outro desafio: entender o Redux. Mas hoje vamos ver tudo que você precisa saber para começar bem com essa ferramenta!

O que é o Redux
Quando devo utilizar
Quando não devo utilizar
Como funciona o Redux
- Arquitetura Flux
- Mergulhando no Redux
  - Slices
  - Os Reducers
Mão na massa!
- Funcionalidades
- Implementação
  - 1 Preparação
  - 2 Criando a Store
  - 3 Configurando o Provider
  - 4 Slices
  - 5 Reducers
- Ligado os dados aos componentes!
Persistindo dados
- Seletores personalizados
Redux com NextJs
Referências

O que é o Redux

Basicamente, Redux é uma solução para gerenciar estados, ele brilha de verdade quando temos que lidar com casos mais complexos como estados distribuídos e Prop Drilling.

De acordo com a sua documentação:

O Redux é um contêiner de estado previsível para aplicativos JavaScript.
Ele ajuda a escrever aplicativos que se comportam de forma consistente, são executados em diferentes ambientes (cliente, servidor e nativo) e são fáceis de testar.
Além disso, ele fornece uma ótima experiência de desenvolvedor, como a edição de código ao vivo combinada com um depurador que viaja no tempo.

E realmente, essa biblioteca é bem versátil em trabalhar com outras bibliotecas e frameworks de visualização, tornando uma ótima escolha para trabalhar com gerenciamento de estados.

Contudo, é muito fácil fazer um uso equivocado desta ferramenta, devido a sua popularidade e praticidade, muitos projetos adicionam o Redux automaticamente sem refletir se realmente precisam disso.

Quando devo utilizar

Como muitas coisas no mundo da tecnologia, o melhor uso do Redux vem quando você percebe sua necessidade na aplicação, e alguns sinais disso são:

Complexidade do Estado:
Se sua aplicação tem um estado complexo, com múltiplos componentes que precisam acessar e modificar esse estado, o Redux pode fornecer uma maneira mais organizada de gerenciar o estado global.
Compartilhamento de Estado:
Quando há a necessidade de compartilhar estado entre componentes que não têm uma relação pai-filho direta, o Redux oferece uma solução centralizada para acessar e modificar o estado.

Prop Drilling: Quando existe uma relação pai-filho, mas para passar o estado para o filho desejado você precisa passar por vários componentes filhos até chegar nele.

Quando não devo utilizar

Aplicação pequena ou simples:
Se sua aplicação é pequena e possui requisitos de gerenciamento de estado simples, a introdução do Redux pode ser excessiva.
Curva de Aprendizado da Equipe:
Se sua equipe não tem familiaridade com o Redux e a curva de aprendizado é um fator crítico, pode ser mais sensato evitar a introdução desta ferramenta, especialmente se os benefícios esperados não justificarem o tempo de aprendizado.
Ferramentas Alternativas:
Existem várias alternativas no que se diz respeito a gerenciar estados no ReactJS, dentre elas podemos citar:
- Zustand
- Recoil
- MobX

Mas existe algo melhor ainda: React Context e useReducer hook

Nada melhor do que usar as ferramentas nativas do próprio ReactJS para resolver as questões que temos, assim podemos depender de menos bibliotecas externas e tornando nosso projeto mais simples.

Apesar desta abordagem ser algo que eu destaco como ideal, ou pelo menos mais interassante, é assunto para outro artigo, já que hoje vamos falar de Redux.

Como funciona o Redux

Arquitetura Flux

A arquitetura do Flux foi proposta pelo Facebook para construção de SPAs que divide a aplicação nas seguintes partes:

View: um componente React, ou Angular, etc;
Action: um evento que descreve a mudança que está ocorrendo e carrega os dados necessários;
Dispatcher: responsável por levar os eventos das actions até a store responsável;
Store: recebe os eventos e lida com as mudanças de estado.

Importante ressaltar que:

O estado é imutável, logo não pode ser modificado diretamente;
A única forma de atualizar o estado é através das actions e dispatchers

Criei um exemplo visual para entendermos como isso funciona:

Neste exemplo, temos uma store de carrinho de compras chamada carrinho e algumas actions que representam operações no carrinho.

Logo depois vamos usar nos nossos componentes React:

O componente Carrinho está observando a store, que contém a lista de produtos do carrinho;
O componente Produto , bem distante do carrinho, vai acionar a action chamada adicionar ao carrinho;
A action vai ser recebida pelo dispatcher que vai interagir com a store;
A store recebe a action e atualiza seu estado com o novo produto;
O carrinho recebe o novo estado e se atualiza.

Se você entendeu este fluxo, praticamente entendeu toda a lógica maior do Redux, pois ele segue fielmente esta arquitetura!

Mergulhando no Redux

Agora que já falamos sobre a arquitetura por trás de tudo, vamos ver como que o Redux funciona de fato. Vamos ver alguns termos e conceitos a se familiarizar na prática desta ferramenta.

Slices

É importante notar que a store é um estado "global" que contém outros estados, frequentemente chamados de "fatias" ou slices, então o nosso estado de carrinho é um slice.

Os Reducers

Temos um novo jogador no campo, os reducers são funções super simples que são utilizadas para atualizar o estado da aplicação.
Eles tem responsabilidades e escopos muito bem definidos, assim como as actions:

function addToCart(state, action) {  
  return {
     cart: [...state.cart, action.product]
  }
}

Mão na massa!

Nada melhor do que um exemplo de código para entendermos como ligar nossa aplicação ReactJS com o Redux.

Para este propósito fiz o seguinte projeto didático: React State Management 101

Essa demo é uma loja fictícia onde temos duas funcionalidades básicas para atender: gerenciar favoritos e carrinho de compras.

Como nosso intuito aqui é a implementação do Redux, não vamos focar em detalhes como estilização..

Funcionalidades

Antes mesmo de colocar a mão no código, precisamos entender as funcionalidades pretendidas nesta aplicação:

Favoritar Adiciona o item à lista de favoritos. Caso este item já seja um favorito, ele será removido da lista.
Adicionar ao carrinho Adiciona este item ao carrinho. Caso este item já esteja no carrinho, sua quantidade deve ser incrementada.
Remover do carrinho Decrementa a quantidade do item no carrinho. Caso o item tenha apenas 1 de quantidade, é removido do carrinho.
Deletar do carrinho Remove completamente o item do carrinho.

Implementação

Entraremos agora em detalhes de implementação do projeto, contudo não vou demonstrar todas as funcionalidades, apenas a de favoritar para simplificar este exemplo.

1 Preparação

Começando do zero em um projeto ReactJS recém criado, execute:

yarn add @reduxjs/toolkit
ou
npm install @reduxjs/toolkit

Tendo em vista a atual implementação recomendada na documentação do Redux, temos uma maneira mais interessante de seguir usando ReactJS: vamos utilizar o React-Redux, uma forma de interagir melhor com os componentes React usando todo o poder da biblioteca original.

yarn add react-redux
ou
npm install react-redux

Agora estamos prontos para o primeiro passo: criar a nossa Store!

2 Criando a Store

A Store é o centro de tudo, a partir dela teremos nossos Slices e usaremos em toda a aplicação, é o coração do gerenciamento de estado.

A partir da documentação oficial do React-Redux, temos o seguinte exemplo de código:

src/store/index.ts

import { configureStore } from '@reduxjs/toolkit'
// ...

const store = configureStore({
  reducer: {
    posts: postsReducer,
    comments: commentsReducer,
    users: usersReducer,
  },
})

// Infer the RootState and AppDispatch types from the store itself
export type RootState = ReturnType<typeof store.getState>
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch

Como ainda não temos nenhum Slice, vamos criar assim por enquanto:
src/store/index.ts

import { configureStore } from '@reduxjs/toolkit'

const store = configureStore({
  reducer: {},
})


export type RootState = ReturnType<typeof store.getState>

export type AppDispatch = typeof store.dispatch

Com a Store criada, agora vamos para o próximo passo: configurar o Provider, assim toda aplicação poderá utilizar o Redux.

3 Configurando o Provider

Este passo é o mais simples, nunca realmente vai mudar, apenas não esqueça pois é crucial.

Seguindo a documentação oficial, envolva o seu App com o Provider do React-Redux e passe para ele a sua Store recém criada.
src/index.ts

...
import { Provider } from 'react-redux'
import store from './store'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

Agora chegou a hora de criarmos nossos Slices, através deles teremos nossos estados e reducers que vão fazer a mágica acontecer.

4 Slices

Dentro da pasta store vamos criar nosso primeiro e mais simples Slice: favoritesSlice.ts

Antes de mais nada, gostaria de demonstrar a anatomia geral de um Slice, o que deve se repetir para todos os próximos:
src/store/favoritesSlice.ts

import { createSlice } from '@reduxjs/toolkit';
import { RootState } from '.';
import { Movie } from '../interfaces';  

// declarei aqui o estado inicial para que assim pudesse inferir um tipo
// desta forma o slice irá aceitar apenas filmes em seu estado 
const initialState: Movie[] = [];  

export const favorites = createSlice({
    // nome identificador do slice
    name: 'favorites',
    // estado inicial
    initialState,
    reducers: {
        // funções reducers
    },
});

export const { 
    // reducers
} = favorites.actions;

// seletores (é uma forma de buscar dados dentro dos componentes react usando estas funções que podemos criar)
export const getFavorites = () => (state: RootState) => state.favorites;  
// RootState vai dar erro pois este slice ainda não está registrado na store, vamos ver a seguir...

export default favorites.reducer;

Como o Slice é apenas uma fatia do estado global, precisamos que ele se integre com a nossa Store criada anteriormente, e para isso faremos o seguinte:

src/store/index.ts

import { configureStore } from '@reduxjs/toolkit'
import favorites from './favoritesSlice';

const store = configureStore({
  reducer: {
      favorites // registrar o novo slice na Store
  },
})

// agora o RootState conhece o seu novo slice e deve corrigir o erro anterior
export type RootState = ReturnType<typeof store.getState>

export type AppDispatch = typeof store.dispatch

Agora que vimos como é a estrutura geral de uma Store, vamos à criação dos seus Reducers!

5 Reducers

Vamos criar o reducer de favoritar, e como descrito anteriormente, ele deve funcionar como um botão de liga/desliga, então chamaremos de toggleFavorite:
src/store/favoritesSlice.ts

export const favorites = createSlice({
name: 'favorites',
initialState,
reducers: {
    // state: o estado de favoritos
    // action: a ação que está sendo realizada no slice, que por sua vez contém dados na em action.payload
    toggleFavorite: (state, action: { payload: Movie }) => {
    // a payload é onde podemos passar dados para o nosso reducer
    // neste caso fiz obrigatório o envio de um dado do tipo Movie na payload
        const index = state.findIndex((movie) => movie.id === action.payload.id);  

        if (index === -1) {
                state.push(action.payload);
            } else {
                state.splice(index, 1);
            }
        },
    },
});

Desta forma nosso primeiro reducer ganha vida, mas ainda não podemos usar ainda, temos que exportá-lo nas nossas actions:
src/store/favoritesSlice.ts

export const { toggleFavorite } = favorites.actions;

E agora sim, nosso slice de favoritos está pronto para ser utilizado!

Ligado os dados aos componentes!

A página de favoritos é super simples, apenas iremos listar todos eles:
src/pages/favorites/index.tsx

import { useSelector } from 'react-redux';
import Layout from '../../components/Layout';
import MovieCard from '../../components/MovieCard';
import { getFavorites } from '../../store/favoritesSlice';

const Favorites = () => {

    // a função useSelector do react-redux é responsável por interpretar a função getFavorites e retornar os dados
    const favorites = useSelector(getFavorites());

    return (
        <Layout>
            <h1>Favorites</h1>
            <div>   
                {favorites.length === 0 ? (
                    <p>You don't have any favorite movies</p>
                ) : (
                    favorites.map((movie) => <MovieCard key={movie.id} movie={movie} />)
                )}
            </div>
        </Layout>
    );
};

export default Favorites;

Logo vamos seguir para onde acontece toda ação: no componente MovieCard.tsx

src/components/MovieCard.tsx

import { FiHeart, FiShoppingCart } from 'react-icons/fi';
import { useDispatch, useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { Movie } from '../interfaces';
import { getFavorites, toggleFavorite } from '../store/favoritesSlice';

type MovieCardProps = {
    movie: Movie;
};  

const MovieCard = ({ movie }: MovieCardProps) => {
    const navigate = useNavigate();

    // aqui utilizamos o useDispatch para que o Dispatcher do Redux possa executar os reducers que passarmos
    const dispatch = useDispatch();

    // novamente buscamos todos os favoritos com o seletor
    const favorites = useSelector(getFavorites());

    const isFavorite = !!favorites.find((fav) => fav.id === movie.id);  

    const handleAddToFavorites = () => {
        // aqui despachamos o reducer toggleFavorite passando os dados do filme em questão
        dispatch(toggleFavorite(movie));
    };  

    const price = new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency: 'USD',
    }).format(movie.price);

    return (

    <div>   
        <h2>    
            {movie.title}
        </h2>
        <img src={movie.cover} alt={movie.title}/>

        <div>   
            <span className='text-lg font-bold mr-auto'>Price: {price}</span>

            <button>    
                <FiShoppingCart size={24} />
            </button>

            <button
            onClick={handleAddToFavorites}
            className={isFavorite && 'bg-red-500'}> 
                <FiHeart
                    size={24}
                    className={isFavorite && 'text-red-500'}
                />
            </button>
        </div>

        <button
        onClick={() => navigate(`/movie/${movie.id}`)}> 
        More
        </button>

    </div>
    );
};

export default MovieCard;

Agora o componente MovieCard é capaz e favoritar os filmes e nossa página de favoritos irá exibi-los, aparentemente está tudo funcionando, mas existe um pequeno problema: Estados React são reiniciados quando a tela atualiza.

Persistindo dados

Uma vez que os dados da nossa Store naturalmente serão jogados fora ao recarregar a página, precisamos que estes dados sejam armazenados localmente no navegador do usuário.

Desta forma mesmo que feche o navegador ou desligue o computador, quando voltar para a aplicação seus favoritos estarão no mesmo lugar onde deixou.

Em alguns casos esta questão é trivial, nem sempre existe a necessidade de armazenar estes dados, mas nesta aqui é super importante que eu persista estes favoritos.

Mas a solução é simples: dentro do reducer, depois que atualizar o estado, utilize o localStore ou sessionStorage para armazenar estes dados no navegador do usuário, e no initialState é só buscar os dados no navegador!

Em teoria sim, isso funciona, mas vai dar um trabalho enorme para implementar isso na mão, fora outras questões que existem.

Mas não tem problema, temos o Redux-Persist, uma solução completa e simplista para persistir os dados do seu Redux.

Vamos à implementação:

Primeiro instale o pacote:
yarn add redux-persist
ou
npm i redux-persist

O passo essencial agora é adaptar nossa Store para usar o Redux Persist:
src/store/index.ts

import { combineReducers, configureStore } from '@reduxjs/toolkit';
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import cart from './cartSlice';
import favorites from './favoritesSlice';

// configuração básica do redux-persist
const persistConfig = {
    key: 'root',
    // podemos utilizar outras formas de armazenamento, mas a padrão utiliza a localStorage do navegador
    storage,
};

// vamos mudar a forma como recebemos os reducers
// agora combinamos todos os reducers em um único
const rootReducer = combineReducers({
    favorites
});

// o persistedReducer vai comportar dos nossos reducers e com as configurações apropriadas que definimos
const persistedReducer = persistReducer(persistConfig, rootReducer);

// a store é finalmente criada com nosso reducer especial
export const store = configureStore({
    reducer: persistedReducer,
});

// responsável por persistir os dados da store
export const persistor = persistStore(store);

export type RootState = ReturnType<typeof store.getState>;

export type AppDispatch = typeof store.dispatch;

E por último, vamos configurar o provider do Redux-Persist:
src/index.ts

import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { persistor, store } from '../store';

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
// o mesmo provider que utilizamos antes
  <Provider store={store}>
    // agora temos que passar o PersistGate em volta da aplicação
    <PersistGate loading={null} persistor={persistor}>
        <App />
    </PersistGate>
  </Provider>
)

Simples assim, agora os dados irão naturalmente persistir no localStorage.

Ainda sim vale a pena que você se familiarize com temas comuns do Redux-Persist como:

Blacklist: uma lista dos slices que não devem ser permitidos persistir
Whitelist: uma lista dos únicos slices que devem persistir
stateReconciler: Os reconciliadores de estado definem como o estado de entrada é mesclado com o estado inicial

Todos estes temas você encontra na
documentação oficial do Redux-Persist.

Seletores personalizados

Este ponto é bem simples mas ainda sim gostaria de trazer atenção para ele pois seu bom uso é extremamente benéfico no React.

Esta pequena função a seguir faz parte do exemplo dado acima na criação do slice.

app/store/favoritesSlice.ts

export const getFavorites = () => (state: RootState) => state.favorites;

Neste exemplo apenas retornamos todos os favoritos disponíveis no slice, mas podemos realizar diversas modificação de acordo com a necessidade, como por exemplo:

app/store/favoritesSlice.ts

// passando algum parâmetro
export const getSortedFavorites = (sorting:'asc'|'desc') => (state: RootState) => state.favorites.sort(.../* função para ordenar */);
                                                                        // Editando o retorno                                                   
export const getFormattedFavorites = () => (state: RootState) => state.favorites.map(.../* função para formatar os dados */);

Redux com NextJS

Existe um pequeno problema ao utilizar Redux com NextJS:

NextJS é executado no lado do cliente e no lado do servidor, e no lado do servidor NÃO EXISTE WEB STORAGE!

Contudo ainda tem solução:

Quando a aplicação for executada no lado do cliente utilizaremos o storage padrão;
Quando a aplicação for executada no lado do servidor utilizaremos o storage fake.

Nossas funções do Redux estão sendo utilizadas apenas no lado do cliente, mas mesmo assim, encontraremos erros em tempo de execução devido a natureza de Server Side Rendering do NextJS.

Logo, vamos criar nosso novo storage:

src/store/storage.ts

import createWebStorage from 'redux-persist/lib/storage/createWebStorage';

const createNoopStorage = () => {
    return {
        getItem(_key: any) {
            return Promise.resolve(null);
        },
        setItem(_key: any, value: any) {
            return Promise.resolve(value);
        },
        removeItem(_key: any) {
            return Promise.resolve();
        },
    };
};

const storage =
    typeof window !== 'undefined'
        ? createWebStorage('local')
        : createNoopStorage();

export default storage;

E assim atualizamos a nossa Store:
src/store/index.ts

...
// importação atualizada
import storage from './storage';

const persistConfig = {
    key: 'root',
    storage,
};

Gerenciamento avançado de estados é um tema crucial quando se fala de desenvolvimento web, compreender e utilizar a ferramenta Redux e outros semelhantes me ajudou bastante para desenvolver softwares mais sofisticados e complexos.

Espero que tenham gostado desta super introdução ao tema e à ferramenta.
Se quiser deixar alguma nota, complementar em algo ou se houver alguma ideia interessante, não deixe de compartilhar comigo.

Referências

Dias, D. L. (2022, 20 de fevereiro). Flux: A arquitetura JavaScript que funciona. Medium. https://dayvsonlima.medium.com/flux-a-arquitetura-javascript-que-funciona-1197857464b8

FreeCodeCamp.org. (2022, 2 de agosto). Evite prop drilling em React. FreeCodeCamp.org. https://www.freecodecamp.org/news/avoid-prop-drilling-in-react/

Redux.js.org. (s.d.). Redux. Redux.js.org. https://redux.js.org/

React-redux.js.org. (s.d.). React-redux. React-redux.js.org. https://react-redux.js.org/

FreeCodeCamp.org. (2022, 12 de março). O que é Redux store, ações e redutores explicados. FreeCodeCamp.org. https://www.freecodecamp.org/news/what-is-redux-store-actions-reducers-explained/

GitHub. (s.d.). redux-persist. GitHub. https://github.com/rt2zz/redux-persist

SOLID no Frontend: Design de Software no ReactJS

Roberto Costa — Sat, 18 Nov 2023 10:37:40 +0000

Começar um novo projeto é o caminho fácil, o desafio vem em manter este projeto saudável ao longo do tempo.

Aqui trarei exemplos de conceito e código, demonstrando como aplicar os tão famosos princípios SOLID no frontend para uma aplicação sustentável e resistente ao tempo.

O Problema do ReactJS...

Na verdade o que vou falar aqui não em si um problema, mas uma característica que pode ser problemática:

Flexibilidade

A flexibilidade do React é algo notável, uma vez que essa biblioteca permite realizar escolhas para cada peça do quebra-cabeça que é o nosso frontend.

Essa flexibilidade é um ponto chave para o React, ela te permite realizar os mais diversos casos de uso e usar a sua criatividade de forma abundante no código.

No entanto isso não é apenas um ponto positivo...

Frequentemente aplicações ReactJS chegam em um ponto onde a manutenção é dificultosa, repetindo-se muito código e tendo bastante retrabalho, e se você ainda não viu isso ocorrendo, temos 3 possibilidades para considerar:

Seu projeto é muito novo;
Seu projeto é pequeno;
Existe alguém cuidando da arquitetura e design de código do seu frontend.

Quando falamos de design de código e arquitetura de software estamos indo muito além de estrutura de pastas.

No frontend, mais especificamente no ReactJS, esses conceitos têm um lugar especial, uma vez que essa biblioteca não oferece uma estrutura opinada pensada para escalar e ser de fácil manutenção, ela deixa tudo para você decidir, o que para muitas pessoas não é realmente recomendado.

Resolvendo alguns problemas

A componentização é uma mão na roda na hora de programar interfaces, mas criar componentes cegamente não ajuda em nada.

Uma coisa que você já deve ter percebido é que a forma como seus componentes se relacionam está diretamente ligada a qualidade do seu frontend.

Algumas más práticas que existem:

Prop Drilling

Quando um componente pai passa um estado para o filho, que passa para seu filho, que passa para seu filho, que passa para seu filho, etc.

Context APIs desnecessárias

Já criou um contexto e depois percebeu que está sendo sub utilizado, ou que não faz sentido usar na aplicação inteira?
A melhor forma aqui é ver aplicações maiores e sua utilização de seus próprios contextos, pode ser esclarecedor.

Pacotes desnecessários

Calma ai, quer dizer que você precisa baixar um pacote para validar um CPF que poderia utilizar uma RegExp?
Tem alguma vantagem em usar o Axios ao invés da Fetch API?
Pergunte-se, entenda o uso de cada coisa e saiba suas alternativas.

Hooks usados de forma errada ou sub utilizados

Por vezes um hook mal implementado pode fazer com que algumas requisições seja feitas a mais ou que algum regra da sua aplicação não seja devidamente validada, obviamente podemos chegar a problemas de segurança e de desempenho aqui.

Requisitos para mandar bem no design de código no ReactJS:

Dominar a base: JavaScript ou TypeScript;
React Hooks;
Context API;
Conheça o terreno: saiba as opções de pacotes que tem para fazer cada função.

1. Dominar a base

Essa não é difícil de explicar: seja JS ou TS, se você não estiver seguro do que está fazendo e se não tiver algum conhecimento prévio de estruturas de dados e do funcionamento dessas tecnologias isso torna-se um fator limitante muito grande.
Conforme você verá aqui, alguns conceitos são mais abstratos que outros, e certas abstrações ficam mais simples de se entender depois de um certo tempo batendo a cabeça no código ou sentindo a necessidade natural de resolver um problema no código.

2. React Hooks

Sim, todo dia lança um React Hook novo e você vai ter mesmo que ficar se atualizando nisso???
Infelizemente você está na área de tecnologia, se atulizar é algo intrínseco da sua carreira.
Mas olhe por esse lado:
Os Hooks são seus aliados, eles resolvem problemas muito importantes do ciclo de vida do React, se existe um novo Hook provavelmente ele vai resolver um problema interessante e pode te ajudar em algo, então pelo menos saiba o que eles fazem, isso já é de grande ajuda.

3. Context API

A amada Context API é uma ferramenta sensacional que temos no ReactJS para criar nossos próprios contextos e disponibilizá-los por toda aplicação ou onde acharmos necessário.
Qual a importância dela?
Criando nossos próprios contextos podemos atingir várias metas:

Diminuir repetição de código;
Concentrar o controle de uma funcionlidade em um só lugar;
Criar abstrações de alto nível;
Gerenciar melhor o ciclo de vida da aplicação.

4. Conheça o terreno

Conhecer onde está pisando te dá maior segurança para seguir em frente.
Entender melhor do ecossistema do ReactJS e do JavaScript é essencial para que você encontre as peças certas para seu quebra-cabeça.
Como temos muitas opções, é muito importante que você pelo menos esteja ciente dos prós e contras das principais para tomar decisões conscientes..
Algumas das decições que temos:

CSS: CSS, CSS Modules, SASS, Styled-Components, TailwindCSS;
Gerenciamento de estado: Redux, Recoil, nenhuma hahaha
Router: React Router Dom, Appwrite
Testes: Jest, Cypress, Playwright, Selenium
Formulários: React Hook Form, Formik, Redux-form
HTTP requests: Fetch API, Axios

Nossa, são muitas opções mesmo!
Não listei todas, apenas algumas mais conhecidas, mas deu para entender que, pela variedade, temos muitas coisas no nosso cinto de utilidades.

SOLID no ReactJS

Agora chegou a hora, chega de enrolação, vamos falar de como aplicar os princípios SOLID para deixar seu frontend mais sênior!

Os conceitos SOLID estão diretamente ligados à Programação Orientada a Objetos, logo é interessante que você seja familiar com esses conceitos para tirar melhor proveito deste conteúdo.

Todos os exemplos de código são parte do repositório que criei para este artigo: https://github.com/robertheory/solid-react-js

Os exemplos são inspirados em situações reais e também nas referências ao final do artigo.

S — Single Responsibility

Seus componentes deve ter responsabilidades bem definidas e isoladas.

Se o seu componente faz muita coisa, pode ser uma boa oportunidade de componentizar.

*All illustrations in this article are by Ugonna Thelma

Exemplo:
Neste exemplo, apresento um componente consulta em API e ordenação de resultados que concetra toda a lógica da funcionalidade em si próprio:

const SearchAndSort = () => {
  const [sorting, setSorting] = useState<'asc' | 'desc'>('asc');

  const [search, setSearch] = useState<string>('');

  const [data, setData] = useState<any[]>([]);

  const [loading, setLoading] = useState<boolean>(false);

  const [error, setError] = useState<string>('');

  const handleSort = () => {
    setSorting(sorting === 'asc' ? 'desc' : 'asc');
  };

  const handleSearch = async () => {
    try {
      setLoading(true);
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/todos?title=${search}`
      );

      const data = await response.json();

      if (!response.ok) {
        throw new Error('Something went wrong');
      }

      setData(data);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return (
      <div>
        {error}

        <button onClick={() => setError('')}>Retry</button>
      </div>
    );
  }

  return (
    <div>
      <div>
        <input
          type='text'
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
        <button onClick={handleSearch} disabled={loading}>
          Search
        </button>
      </div>
      <div>
        <button onClick={handleSort}>Sort</button>
      </div>
      <div>
        {data.map((item, index) => (
          <div key={index}>{item.title}</div>
        ))}
      </div>
    </div>
  );
};

Ele é candidato a ser dividido em várias partes, podemos citar:

Acesso à API e retorno de dados;
Interação com a busca e feedback visual;
Apresentação do resultado;
Ordenação do resultado.

Cada um destes itens é passível de se tornar um novo componente, onde podemos isolar completamente a sua lógica dentro de si para que os datalhes de implementação sejam abstraídos.

O caso de Acesso à API e retorno de dados é até mais interessante pois ele nem mesmo tem a ncessidade de ser um componente, pode ser uma função separada que recebe o input de busca e retorna os resultados, dessa forma, o componente que utilizar essa função, nem mesmo precisa saber como que os dados estão sendo buscados, criando uma abstração maior ainda e um menor acoplamento a métodos de busca de dados (RestAPI, GraphQL, FileSystem, etc).

Segue o exemplo após a refatoração:

const seachToDos = async (search: string) => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos?title=${search}`
  );

  const data = (await response.json()) as Todo[];

  if (!response.ok) {
    throw new Error('Something went wrong');
  }

  return data;
};

const SearchComponent = ({
  onSearch,
}: {
  onSearch: (todos: Todo[]) => void;
}) => {
  const [search, setSearch] = useState<string>('');
  const [loading, setLoading] = useState<boolean>(false);
  const [error, setError] = useState<string>('');

  const handleSearch = async () => {
    try {
      setLoading(true);

      const data = await seachToDos(search);

      onSearch(data);
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return (
      <div>
        {error}

        <button onClick={() => setError('')}>Retry</button>
      </div>
    );
  }

  return (
    <div>
      <input
        type='text'
        value={search}
        onChange={(e) => setSearch(e.target.value)}
      />
      <button onClick={handleSearch} disabled={loading}>
        Search
      </button>
    </div>
  );
};

const ListTodoComponent = ({ todos }: { todos: Todo[] }) => (
  <div>
    {todos.map((item, index) => (
      <div key={index}>
        <h1>{item.title}</h1>
        <p>{item.completed ? 'Completed' : 'Not completed'}</p>
      </div>
    ))}
  </div>
);

const SearchAndSort = () => {
  const [sorting, setSorting] = useState<'asc' | 'desc'>('asc');

  const [data, setData] = useState<Todo[]>([]);

  const handleSort = () => {
    setSorting(sorting === 'asc' ? 'desc' : 'asc');
  };

  return (
    <div>
      <SearchComponent onSearch={setData} />

      <button onClick={handleSort}>Sort</button>

      <ListTodoComponent todos={data} />
    </div>
  );
};

O — Open-Closed

Componentes devem ser abertos para extensão e fechados para modificação.

Neste exemplo, trago um simples botão com ícone que deve variar entre os tipos add e remove.

A depender do tipo do botão, o ícone e a cor devem mudar, contudo essa implementação se torna bem problemática ao passo de que você precisa adicionar mais variantes para este botão.

type ButtonProps = {
  type: 'add' | 'remove';
  text: string;
};


const ButtonWithIcon = ({ type, text }: ButtonProps) => {
  const buttonStyles = {
    backgroundColor: type === 'add' ? 'green' : 'red',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
  };

  return (
    <>
      <button style={buttonStyles}>{text}</button>
      {type === 'add' && <i className='material-icons'>add</i>}
      {type === 'remove' && <i className='material-icons'>remove</i>}
    </>
  );
};

Em um cenário onde há a necessidade de se criar mais variantes para este mesmo botão, acabaria ficando inviável e extremamente verboso adicionar cada vez mais condicionais dentro dele.

A solução é simples: vamos tornar o componente extensível!

Tornar o componente extensível significa que os detalhes sobre a variante do botão ficarão totalmente a encargo de quem o implementar, vejamos melhor no exemplo a seguir:

type ButtonProps = {
  text: string;
  icon: string;
  color: string;
};

const ButtonWithIconExtended = ({ color, icon, text }: ButtonProps) => {
  const buttonStyles = {
    backgroundColor: color,
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
  };

  return (
    <>
      <button style={buttonStyles}>{text}</button>
      <i className='material-icons'>{icon}</i>
    </>
  );
};

export const App = () => {
  return (
    <div>
      <ButtonWithIconExtended color='green' icon='add' text='Add' />
      <ButtonWithIconExtended color='red' icon='delete' text='Delete' />
      <ButtonWithIconExtended color='blue' icon='edit' text='Edit' />
    </div>
  );
};

Após refatorar o código do botão, teremos um componente que será não só menor e mais legível, como também permitirá maior flexibilidade na sua implementação.

L — Liskov Substitution

Essa explicação pode ser um pouco confusa, mas já te explico como que funciona.

Se um componente do tipo S é uma representação do componente T, então componentes do tipo T devem poder ser substituidos pelo componente S sem alterar o funcionamento desejado da aplicação.

Basicamente, se você está criando a sua própria versão de um elemento, por exemplo, um input então o seu novo componente deve ser capaz de substituir um input comum e continuar funcionando.

Vamos ver na prática com este exemplo errado antes de refatorar:

type PrettyInputProps = {
  isLarge: boolean;
};

const PrettyInput = ({ isLarge }: PrettyInputProps) => (
  <div
    style={{
      backgroundColor: 'white',
      border: '1px solid #ccc',
      borderRadius: '5px',
      padding: '10px',
      width: isLarge ? '300px' : '100px',
    }}
  >
    <input type='text' style={{ width: '100%' }} />
  </div>
);

Este componente JAMAIS poderia substituir verdadeiramente um input, pois se você tentar fazer isso daqui:
<PrettyInput type="button" onChange={someFunction}/>

Isso nunca funcionaria pois seu componente desconhece tais propriedades que são intrísecas ao HTMLInput comum.

Para resolver isto é bem simples, basta extender seu componente para herdar as propriedades de um HTMLInput e repassar essas props para o devido input:

interface PrettyInputProps extends React.HTMLAttributes<HTMLInputElement> {
  isLarge: boolean;
}

const PrettyInput = ({ isLarge, ...rest }: PrettyInputProps) => (
  <div
    style={{
      backgroundColor: 'white',
      border: '1px solid #ccc',
      borderRadius: '5px',
      padding: '10px',
      width: isLarge ? '300px' : '100px',
    }}
  >
    <input type='text' style={{ width: '100%' }} {...rest} />
  </div>
);

export const App = () => (
  <div>
    <PrettyInput isLarge={true} placeholder='Type something...' />
    <PrettyInput isLarge={false} onChange={console.log} />
    <PrettyInput isLarge={false} onLoad={console.log} />
  </div>
);

I — Interface Segregation

Componentes não deveriam depender de props que eles não utilizam

Veja o seguinte exemplo:

type SimpleCardProps = {
  user: {
    fullName: string;
    firstName: string;
    lastName: string;
    state: string;
    country: string;
    cellphone: string;
    email: string;
    avatar: string;
    description: string;
  };
};

const Avatar = ({ user }: SimpleCardProps) => (
  <div
    style={{
      backgroundColor: 'white',
      border: '1px solid #ccc',
      borderRadius: '50%',
      padding: '10px',
      width: '100px',
    }}
  >
    <img src={user.avatar} alt='description' />
  </div>
);

const SimpleCard = ({ user }: SimpleCardProps) => {
  return (
    <div>
      <h2>{user.fullName}</h2>
      <Avatar user={user} />
      <p>{user.description}</p>
    </div>
  );
};

Este exemplo é mais ingênuo, contudo esta necessidade se torna mais evidente em componentes maiores e que se utilizam de muitos dados.

Basicamente, o componente de Avatar não tem nenhuma necessidade de entender outros detalhes do usuário, desde que ele utiliza apenas a URL da imagem, ele nem mesmo deveria conhecer o tipo do usuário.

Segue o exemplo refatorado:

type SimpleCardProps = {
  user: {
    fullName: string;
    firstName: string;
    lastName: string;
    state: string;
    country: string;
    cellphone: string;
    email: string;
    avatarUrl: string;
    description: string;
  };
};

const Avatar = ({ avatarUrl }: { avatarUrl: string }) => (
  <div
    style={{
      backgroundColor: 'white',
      border: '1px solid #ccc',
      borderRadius: '50%',
      padding: '10px',
      width: '100px',
    }}
  >
    <img src={avatarUrl} alt='description' />
  </div>
);

const SimpleCard = ({ user }: SimpleCardProps) => {
  return (
    <div>
      <h2>{user.fullName}</h2>
      <Avatar avatarUrl={user.avatarUrl} />
      <p>{user.description}</p>
    </div>
  );
};

Após uma simples refatoração, podemos ver que o componente de Avatar agora não depende do tipo do usuário, apenas necessita de receber uma URL, podendo ser utilizado em outros contextos, diminuindo o acomplamento com o Card de usuário.

D — Dependency Inversion

Componetes genéricos devem depender de abstrações e não de implementações.

Os detalhes de implementação devem ser de responsabilidade do componente pai.

Para este exemplo vamos começar com um componente de formulário simples:

const SimpleSimpleForm = () => {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    fetch('https://reqres.in/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email: username, password }),
    })
      .then((res) => res.json())
      .then((res) => {
        setLoading(false);
        if (res.error) {
          setError(res.error);
          return;
        }
        console.log(res);
      })
      .catch((err) => {
        setLoading(false);
        setError(err.message);
      });
  };

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return (
      <div>
        {error}
        <button onClick={() => setError('')}>Reset</button>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor='username'>Username</label>
        <input
          type='text'
          id='username'
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>

      <div>
        <label htmlFor='password'>Password</label>
        <input
          type='password'
          id='password'
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>

      <button type='submit'>Login</button>
    </form>
  );
};

Num cenário onde temos que reutilizar este componente em diversos locais da aplicação, mas a depender do local, a função de submit vai precisar ser alterada.

O objetivo agora é tornar esse componente se tornar mais genérico, fazendo com que o componente pai seja responsável por lidar com a requisição e seu retorno.

Agora veja o componente após a refatoração:

type SimpleSimpleFormProps = {
  onSubmit: (username: string, password: string) => void;
};

const SimpleSimpleForm = ({ onSubmit }: SimpleSimpleFormProps) => {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    onSubmit(username, password);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor='username'>Username</label>
        <input
          type='text'
          id='username'
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>

      <div>
        <label htmlFor='password'>Password</label>
        <input
          type='password'
          id='password'
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>

      <button type='submit'>Login</button>
    </form>
  );
};

export const App = () => {
  const [user, setUser] = React.useState<null | unknown>(null);

  const handleLoginWithRestAPI = async (username: string, password: string) => {
// details
  };

  const handleLoginWithGraphQL = async (username: string, password: string) => {
// details
  };

  return (
    <>
      <h1>Login With Provider 1</h1>
      <SimpleSimpleForm onSubmit={handleLoginWithRestAPI} />

      <h1>Login With Provider 2</h1>
      <SimpleSimpleForm onSubmit={handleLoginWithGraphQL} />

      <h1>User</h1>
      <pre>{JSON.stringify(user, null, 4)}</pre>
    </>
  );
};

Após essa refatoração é notavel como podemos delegar para o componente pai os detalhes de implementação sobre como o método de login é realizado.

Bônus: OCP + DIP

O verdadeiro potencial dos princípios SOLID mora não só na sua adoção e compreensão, mas também na capacidade de interligar um princípio com outro quando temos a oportunidade.

Neste exemplo bônus eu vou juntar 2 deles: Open-Close Principle com Dependency Inversion Principle.

O objetivo é:

Tornar o componente de formulário extensível para que seus campos sejam customizáveis;
Tornar este componente genérico para que seu componente pai lide com os detalhes de implementação do submit.

Como resultado, teremos o seguinte código:

type SimpleSimpleFormProps = {
  onSubmit: (event) => void;
  children: React.ReactNode;
};

const SimpleSimpleForm = ({ onSubmit, children }: SimpleSimpleFormProps) => {
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSubmit(event);
  };

  return (
    <form onSubmit={handleSubmit}>
      {children}

      <button type='submit'>Login</button>
    </form>
  );
};

export const App = () => {
  const handleLogin = async (event: React.FormEvent<HTMLFormElement>) => {
    const username = event.currentTarget.username.value;
    const password = event.currentTarget.password.value;


    // details
  };

  const handleRegister = async (event: React.FormEvent<HTMLFormElement>) => {
    const username = event.currentTarget.username.value;
    const password = event.currentTarget.password.value;
    const passwordConfirmation = event.currentTarget.passwordConfirmation.value;
    const email = event.currentTarget.email.value;

    // details
  };

  return (
    <>
      <h1>Login With Provider 1</h1>
      <SimpleSimpleForm onSubmit={handleLogin}>
        <input type='text' placeholder='Username' name='username' />
        <input type='password' placeholder='Password' name='password' />
      </SimpleSimpleForm>

      <h1>Register Form</h1>
      <SimpleSimpleForm onSubmit={handleRegister}>
        <input type='text' placeholder='Username' name='username' />
        <input type='password' placeholder='Password' name='password' />
        <input
          type='passwordConfirmation'
          placeholder='Confirm Password'
          name='confirm'
        />
        <input type='text' placeholder='Email' name='email' />
      </SimpleSimpleForm>
    </>
  );
};

Note que o ponto onde parei ainda está longe do ideal:

O componente pai recebe seus campos a partir do evento de submit e não temos compo inferir tipos nisso ainda;
Não temos tratamento de erros;

Apesar da implementação estar longe de ser ideal e poder evoluir bastante ainda, o principal é cultivar a ideia de fundir 2 princípios SOLID para tornar o componente o mais genérico e extensível possível.

Conclusão

Design de software pode ser algo bem abstrato e complexo de entender a princípio, mas é que naturalmente iremos enxergar a necessidade de utilizar.

Tenho certeza que esses princípios são de grande utilidade no desenvolvimento Frontend, especialmente nas aplicações ReactJS onde nós somos responsáveis por todas as decisões na aplicação, desde de pacotes e funcionamento, até arquitetura e estrutura de pastas que não são a mesma coisa 😂.

Referências

Titulo: The S.O.L.I.D Principles in Pictures
Autor: Ugonna Thelma
May 18, 2020
https://medium.com/backticks-tildes/the-s-o-l-i-d-principles-in-pictures-b34ce2f1e898

Titulo: 10 Best Practices for Writing Clean React Code
Autor: Dhawal Pandya
https://www.turing.com/kb/writing-clean-react-code

Titulo: 7 React Clean Code Tips You Should Know
Autor: Juntao Qiu
https://itnext.io/7-react-clean-code-tips-you-should-know-846b8108fc46

Titulo: How to Write Cleaner React Code
Autor: Reed Barger
https://www.freecodecamp.org/news/how-to-write-cleaner-react-code/

Titulo: 10 Must-Know Patterns for Writing Clean Code with React and TypeScript✨🛀
Autor: Alex Omeyer
https://dev.to/alexomeyer/10-must-know-patterns-for-writing-clean-code-with-react-and-typescript-1m0g

Titulo: Four Tips for Writing Clean React Code
Autor: Julien Delange
https://www.codiga.io/blog/clean-react-code/

Titulo: This is the Only Right Way to Write React clean-code - SOLID
Autor: Islem Maboud
https://www.youtube.com/watch?v=MSq_DCRxOxw

Hackeando a entrevista

Roberto Costa — Tue, 20 Jun 2023 04:07:47 +0000

Entrevistas de emprego podem ser assustadoras e desafiadoras, mas quando nos preparamos adequadamente, essa impressão fica cada vez mais fraca.

Atenção: Entreviste a empresa!
O processo seletivo não é apenas a empresa te entrevistando, você deve ativamente entrevistar a empresa e entender se esse lugar realmente é um ambiente que esteja alinhado com as suas expectativas.

Aviso: cada caso é um caso!

No começo da carreira é complicado sustentar esse discurso de ser mais seletivo nos trabalhos pois nem todos temos as mesmas oportunidades, assim é muito mais fácil você aceitar qualquer oportunidade no começo pois você precisa de experiência ou precisa do dinheiro, então não existe regra geral sobre o que fazer nesse momento, apenas esteja ciente que empresas vão querer te explorar sim, ainda mais no começo. Se elas puderem vão te pagar tão pouco quanto conseguirem e te exigirão 2x de trabalho. Fique atento a esse tipo de situação, existe muito por ai, pode ser que você nunca caia nisso na vida, mas é importante saber que existe, e talvez mesmo assim faça sentido para você entrar nesse tipo de situação, no fim do dia é você que paga suas contas.

Pesquise sobre a empresa

Primeiro passo fundamental para se preparar para a vaga é fazer seu trabalho de casa! Pesquise sobre a cultura da empresa, casos de sucesso e sobre seu negócio.
Buscar saber mais sobre a empresa demonstra seu interesse genuino de entrar para a equipe, além de te dar ferramentas para entender se faz sentido para você entrar em uma nova jornada fazendo parte deste ambiente.

Principais pontos de interesse

Qual o ramo de negócio da empresa;
Quem são os clientes desta empresa;
Quanto tempo de mercado ela tem;
Como a empresa se define;
Clientes desta empresa;
Cultura da empresa;
Iniciativas e atividades de impacto;
Onde se encaixa a sua área de trabalho na empresa.

Fale sobre você

Falar muito, falar pouco, deixar de falar algo - estes são alguns dos problemas que podem te atingir aqui. Mas não se preocupe: a ideia geral deste momento da entrevista é dar ao recrutador o contexto sobre você, de forma que seja relevante para a vaga.
Para isto, você deve fazer um trabalho prévio. Eu recomendo o seguinte método:

Leia bem a vaga;
Identifique os pontos da sua jornada que são importantes no contexto da vaga;
Após anotar todos os pontos, crie uma história breve; e
Faça com que a história seja breve e sucinta, tente contar em menos de 2 minutos.

Com o método acima, você pode conseguir uma apresentação muito boa que será simples e que seus ouvintes irão lembrar melhor.

Toques especiais

É interessante que sua apresentação não seja robótica e reflita um pouco do seu ânimo, então modele o texto de forma a transmitir sentimentos, como o de que entrou animado na faculdade ou que concluiu um projeto que te deixou extremamente satisfeito, mas cuidado para não enrolar demais.
Coloque elementos pessoais no começo, antes de falar de carreira e trabalhos, tudo bem dizer se prefere gatos ou cachorros, ou que adora tocar violão, esse tipo de nota traz um sentimento de humanidade e proximidade com as pessoas que te escutam.

Experiências relevantes

Durante a sua apresentação, se houver alguma intersecção entre o negócio da empresa e as suas vivências, pode ser muito positivo que você levante este tópico, isto pode fazer com que a sua candidatura ganhe uma força a mais dentre as outras, ou que mesmo que você não cumpra totalmente os requisitos técnicos, sua experiência anterior é capaz de ser sua forte aliada para sair na frente.

No geral depende muito do perfil da empresa

Cada empresa vai ter um processo de recrutamento específico, onde umas podem buscar um maior alinhamento com a cultura da empresa ou de repente podem estar apenas querendo alguém que seja altamente qualificado independente do alinhamento cultural. Nesse quesito é muito importante fazer bem a sua pesquisa sobre a empresa e seus valores, bem como entender junto aos recrutadores qual é a necessidade que esta vaga irá suprir.

O que fazer e o que não fazer...

Não detone sua empresa atual!

Sim, você pode dizer que está saindo por falta de oportunidades ou que quer ampliar seus horizontes, mas é muito importante que seja sincero nessa etapa, caso contrário vai parecer que você só está saindo por sair, e não pega nada bem a imagem de um funcionário que está saindo sem motivos ou que quer escondê-los.

Leia bem a descrição da vaga

É essencial se atentar ao que é requisitado na vaga, e não tem problema se você não souber uma ou duas coisas, geralmente isso podemos compensar com boas soft skills ou habilidades diferenciais. Jamais deixe para descobrir os requisitos da vaga na hora da entrevista, veja bem o que é pedido e de preferência tenha um projeto de estudos ou de teste para comprovar proficiência.

Não tenha medo de falar que não sabe!

Sinceridade é um fator importante em uma entrevista e na maioria dos casos, não saber ou ter pouca vivência em um dos requisitos não é o que vai te desclassificar. Por outro lado, mentir sobre a sua proficiência é algo que com toda certeza vai te levar para uma experiência desagradável durante seus processos seletivos.

Estude para a entrevista

Estudar para entrevista envolve 2 aspéctos: a empresa e o técnico. Estudar a empresa já foi comentado aqui antes e é super importante até para você saber se quer estar lá. Já o aspécto técnico tem sua importância no que se diz ao preparo para um eventual teste técnico de acordo com os requisitos da vaga.

Estudo para teste técnico

Aqui eu vou assumir que você cumpre boa parte dos requisitos da vaga pois é o recomendável para uma aplicação de sucesso.
Existem vários tipos de testes técnicos:

Teste ao vivo

O objetivo aqui é entender a linha de raciocínio do candidato e pode ser que você nem perca pontos por não terminar, mas só de demonstrar a sua forma de pensar, já é o suficiente para os recrutadores.

Projeto com data de entrega

Aqui você terá de realizar um projeto relativamente trabalhoso e entregar em uma data limite. Normalmente o objetivo desse tipo teste é entender a velocidade e as técnicas empregadas pelo candidato, de forma que mesmo se não finalizar tudo no prazo, dependendo da vaga, você pode passar se tiver uma boa execução.

Arguição

Nesse tipo de teste normalmente se testa o conhecimento básico da pessoa, pois para determinadas atividades existem conhecimentos específicos que não podem ser memorizados a esse ponto, mas a parte do conhecimento profundo do trabalho é colocado à prova em uma série de perguntas.

Prova

Nesse tipo de teste a empresa deve criar questões discursivas ou de múltipla escolha que testarão no geral o conhecimento teórico da pessoa sobre determinados assuntos, de forma que é comum que existam perguntas ambíguas ou que induzam o candidato ao erro, de forma que apenas o conhecimento prévio ou experiência poderiam ajudar.
Ainda sim existem modalidades diferentes de provas:

Online

Faz a prova em uma página na web, e provavelmente será um tipo de prova que vai ser trabalhosa mesmo se você colar ou utilizar ferramentas terceiras pois os recrutadores já esperam que você o faça.

Online ao vivo

Aqui a coisa complica um pouco pois na prova ao vivo, pode ser que não seja permitido consultar a internet, mas se for, menos mal. Novamente, se for permitido consultar a internet o problema vai ser complexo mesmo assim e agora no ao vivo você ainda vai estar sendo observado, então tentativas fúteis de resolver algo que você não tem ideia podem ser percebidas.

Escrita

Cada dia mais em desuso, a prova escrita nos testes técnicos costumam ser tranquilas caso você realmente tenha certo conhecimento sobre o que se propõe, contudo o que a faz diferente de todas as outras formas é justamente a ausência do computador como facilitador. Sem consultas, sem ajudinha da internet, sem dicas e sem corretor.

Estudo Go Horse - Cuidado ⚠️ prática nada saudável

Existem pessoas que não dominam quase nada do que a vaga pede, mas para se preparar fazem uma rotina super intensa de estudos baseada nos requisitos. Tal rotina pode envolver:

Cursos ultra rápidos;
Criação de projetos do zero;
Estudo de código de terceiros;
Mentoria de código intesiva;
Bootcamps.

Mas o detalhe é que esse método de estudo não foca nada em qualidade e proficiência, você vai estar fazendo um processo que vai passar de forma muito superficial sobre os requisitos e no caso de ter alguma situação mais específica é bem possível que você passe um aperto.

Perguntas comuns

Não dá para saber 100% do que vai ser perguntado durante uma entrevista, mas existem algumas perguntas clássicas os recrutadores costumam trazer para entender mais sobre a pessoa entrevistada. Responder essas perguntas antecipadamente vai te dar uma vantagem de não tem que pensar tanto para responder durante a entrevista.

Aqui vão algumas das perguntas mais comuns:

Perguntas sobre seu contexto

Por que você está deixando seu emprego atual?
Quais são os seus pontos fortes e fracos?
Em algum momento você discordou de uma decisão de trabalho? Como foi isso?
Como você trabalha em equipe?
Como você lida com pressão ou situações estressantes?

Perguntas sobre sua carreira

Fale sobre algum desafio que você teve sucesso;
Fale sobre algum desafio que você não teve sucesso;
Maior desafio que já enfrentou;
Qual é a sua maior conquista profissional?
Onde você se vê em cinco anos?
Como você lida com conflitos no ambiente de trabalho?

Perguntas sobre a empresa

O que você sabe sobre a empresa?
Por que você quer este trabalho?
O que você sabe sobre nossos valores/missão?
O que você entende sobre essa área/projeto X e como você se vê colaborando?
Como você acha que se encaixa na cultura da empresa?
Por que devemos contratá-lo?
O que você daria de ideia nova para melhorar projeto X?
Você tem alguma pergunta?

Perguntas a se fazer

Fazer perguntas para os entrevistadores é importantíssimo! Você também está avaliando a vaga, precisa saber se é algo que você quer realmente entrar, então se empenhe em descobrir o que tem de mais importante para você sobre o trabalho.

Aqui vão algumas perguntas interessantes e suas motivações:

Essa vaga é novo ou já existia?
Nessa pergunta você pode entender se está substituindo alguém que saiu ou está sendo alocado para um trabalho que não existia antes na empresa. Saber disso pode ser importante para você se não gosta de assumir o trabalho de outras pessoas e se prefere começar projetos do zero.
Como é o perfil de colaborador que vocês procuram?
Nessa pergunta você vai conseguir entender um pouco sobre as expectativas comportamentais e pode dar alguma dica do que você terá que enfrentar no seu dia a dia, por exemplo: fique de olho quando uma empresa diz que precisa de colaboradores resilientes, pois isso demonstra que ela tem um ambiente que pode não ser tão amigável.
Como os times interagem entre si
Nessa pergunta você consegue entender melhor como será a dinâmica de trabalho do seu dia a dia: sua equipe tem quantas pessoas? Você vai entrar em contato diretamente com outras equipes? Tem que falar primeiro com o líder ou gestor? Você vai ter mais autonomia ou menos?
Qual o principal desafio que este cargo precisa resolver?
É muito importante entender o motivo pelo qual você está sendo contratado: seria um projeto temporário? Seria um novo protudo a ser testado? Dependendo do que for seu trabalho pode ter os dias contados desde o momento da contratação. Entenda também os desafios que você terá pois nem tudo que você vai enfrentar vai estar na descrição da vaga.
Qual a parte que vocês mais gostam sobre trabalhar nesta empresa?
Nada melhor do que a opinião das pessoas que já trabalham lá para te dizer algo sobre ela. Provavelmente ninguém vai te falar nada negativo sobre a empresa, mas procure perguntar sobre sua satisfação com a interação entre colegas e o que eles mais gostam sobre o ambiente de trabalho.
Como são os próximos passos ou plano de carreira para esta posição?
Fazer esta pergunta é muito importante quando você tem planos a longo prazo e está buscando construir uma carreira nesta empresa, logo, é preciso saber de antemão se a empresa pode te oferecer isso.

Planejamento de carreira inteligente

Roberto Costa — Fri, 12 May 2023 16:08:46 +0000

Construir uma carreira sólida ou mesmo começar do zero pode parecer desafiador, e realmente é, não espere que seja fácil ou que ocorra da noite para o dia. Assim como muita coisa na vida, para tal é necessário planejamento, além de outros fatores, mas principalmente planejamento.

Não ter seu objetivo ou metas bem definidos é como vagar sem rumo, você pode até conseguir algo, mas vai ser por pura sorte. Ter sorte é parte do caminho, mas não dá para criar uma carreira baseado nisso, a não ser que você trabalhe com apostas.

Aviso

Cuidado com fórmulas do sucesso ou caminhos pré-definidos por outras pessoas, a carreira que ela planejou pode ser algo que não vá funcionar para você, apenas você sabe da sua realidade e quais são suas prioridades no momento.

Definição de objetivos

No quadro geral, tem dois objetivos importantes de se ter em mente, e muito embora pareça ser bobo, tem muita gente que não pensa ativamente sobre isso:

Objetivo de carreira

Aqui você tem total liberdade para pensar no que quiser, pode ser um cargo que almeja, um trabalho dos sonhos ou mesmo ter o seu próprio negócio. O mais importante sobre esse passo é pensar em uma meta de longo prazo, mas atenção, entenda bem as responsabilidades e exigências do seu objetivo, por exemplo, se você quer ter seu próprio negócio mas odeia lidar com tarefas administrativas e financeiras, provavelmente vai se frustrar no meio do caminho e quando descobrir será tarde demais. Por isso é importante entender as responsabilidades que vêm com seu objetivo, e uma boa estratégia para isso é conversar com pessoas que já chegaram lá, coletar opiniões e experiência de múltiplas pessoas para ajudar construção da sua perspectiva.

Objetivos de vida

Há mais na vida do que apenas trabalho, tem lazer, hobbies, família, amigos, viagens, relacionamentos e cada um desses pontos tem uma importância diferente para cada pessoa, e por isso mesmo que não existe fórmula certa ou jeito errado, apenas os resultados da sua jornada. Para seus objetivos de vida, você deve buscar se compreender e entender o que quer a longo prazo, como mudar de cidade, de trabalho, trabalhar menos, estar mais com a família, viajar o mundo, ter a sua casa, se casar e ter filhos, contribuir para uma causa ou para educação, melhorar o mundo, morar em uma cidade, morar no interior, etc.

Aqui o escopo é enorme, não temos como fazer tudo pois temos um limite de tempo de vida, mas conseguimos pelo menos definir alguns princípios essenciais que podemos viver por eles, por exemplo:

Eu gostaria de ter mais tempo com a minha família e amigos, quero conhecer o mundo e as diferentes culturas e aprender um instrumento musical.

É importante notar que objetivos de vida quase sempre entram em conflito com objetivos de carreira, visto que carreira demanda tempo de dedicação, assim como várias coisas na sua vida pessoal, então é normal se sentir dividido por alguma decisão, mas saiba que desde que tenha objetivos claros, você ainda vai poder tomar essas decisões difíceis, o que nem sempre é possível quando você está à deriva sem saber onde ir e como chegar.

Planejamento de carreira

Depois de decidir qual seu objetivo profissional, é preciso entender como chegar até lá. Existem várias formas de fazer um plano de carreira, uma das mais simples é seguir estes passos:

Levantamento de requisitos

Procure requisitos comuns que são exigidos para seu objetivo, seja em sites de vagas ou mesmo conversando com pessoas da área. Cuidado com lugares que pedem requisitos em proporções irreais, nisso uma pessoa mais experiente pode te ajudar melhor.

Planejamento de estudos

Após ter os requisitos é hora de planejar como que você vai fazer para chegar até lá. Procure cursos, aulas, conteúdo gratuito, especializações. Mas principalmente organize!
Pode parecer difícil mas faça um planejamento para que possa ter uma estimativa de quando irá conseguir atingir os objetivos, distribua no seu calendário os marcos onde você espera terminar um determinado estudo. Crie um cronograma de estudos, se desafie!

Acompanhamento

Não espere se sentir sem rumo, torne a autoavaliação algo rotineiro. Sempre que terminar um determinado estudo ou ciclo, volte pare ver o que realmente aprendeu, e até mesmo se está alinhado com suas expectativas.

Exemplo

Entendendo que seu objetivo é começar como Desenvolvedor de Bolinhos Júnior, podemos fazer uma pesquisa nas principais plataformas de recrutamento para entender o que é frequentemente requisito para essa vaga.
Após esta pesquisa você descobriu que este trabalho possui algumas especialidades básicas: criação de massas, preparação de recheio, confecção de caldas e arte para bolos.
A partir destes requisitos mínimos você pode procurar materiais ou mesmo cursos que te ofereçam esse tipo de conhecimento, e o mais importante aqui é você manter seu objetivo em foco, tendo em mente sua meta final que é se qualificar para ser um Desenvolvedor de Bolinhos Júnior.
É extremamente importante que durante seu aprendizado você faça pausas regulares para validar o que está aprendendo e se de fato você está aprendendo ou se está sendo algo que é útil para seu objetivo.

Planejamento de vida

Bem, aqui eu realmente não posso fazer nada por você 😁, é contigo, confio que você sabe melhor do que eu as suas aspirações e metas.

Conclusão

Planejar uma carreira muito se assemelha em planejar seus estudos, mas não se engane, carreira não é só sobre habilidades ou conhecimento, tem muito mais!

Soft Skills

Existem habilidade essenciais no nosso trabalho, as quais devemos desenvolver ativamente para nos capacitar para o trabalho, contudo o conceito de soft skill diz respeito a habilidades secundárias, muitas vezes qualidades pessoais que ajudam as pessoas a prosperar no ambiente de trabalho.
Muitas pessoas associam essas habilidades apenas ao conceito interpessoal, onde a ideia é desenvolver boas relações, mas não se limita a isso, sendo qualquer habilidade que possa contribuir para seu sucesso, como por exemplo: leitura dinâmica é uma habilidade que te ajuda a ler de forma mais rápida e absorver mais conteúdo e pode ser considerada uma soft skill pois pode auxiliar diversos tipos de trabalhos.

Networking

Sem sombra de dúvidas as relações que criamos ao longo da nossa jornada de carreira são muito importantes, mas cuidado, networking não é só trabalho, networking é confiança e até amizade!
Um bom networking é aquele que você realmente se conecta com as pessoas e estabelece uma relação amistosa.
Existirão alguns casos onde determinada pessoa terá apenas uma boa relação de negócios contigo, contudo, é importante saber diferenciar as pessoas que você realmente pode contar como um bom networking de quem apenas estará do seu lado enquanto houver benefícios.

Visibilidade

Quem não é visto não é lembrado!! Marque sua presença nas redes sociais e profissionais, compartilhe conhecimento, ajude pessoas, tudo isso são formas de você ganhar visibilidade e por consequência ser alvo de oportunidades que pessoas mais anônimas não tem. A existência de caçadores de talentos ou mesmo pessoas procurando boas parcerias é algo que vai aparecer com mais facilidade para pessoas que investem na sua visibilidade, e se quiser ir mais além ainda, invista na sua marca pessoal!

Obs.: Eu não sei nada sobre confeitaria, exemplo dos bolinhos é meramente ilustrativo.

Estudando certo - Guia do autodidata

Roberto Costa — Thu, 20 Apr 2023 12:24:09 +0000

Você já pensou em se tornar autodidata? Aprender por conta própria pode ser desafiador no começo, mas é igualmente libertador e gratificante, pois você não está limitado a um conteúdo pré-determinado.

De certa forma, todos nós somos autodidatas em algum nível: procuramos referências por conta própria quando queremos aprender mais sobre algum assunto, não nos contentamos com explicações superficiais e nos aprofundamos, ou tentamos aprender algo novo sem ajuda.

Ser autodidata não significa que não precisamos de ajuda ou que não utilizamos materiais prontos, mas sim que não dependemos de um ambiente dedicado ao ensino, como escolas, para desenvolver nossas habilidades.

Assim, uma pessoa autodidata utiliza todas as ferramentas disponíveis que se alinham com seus objetivos ou que podem ajudar de alguma forma, incluindo materiais didáticos livres ou vídeos explicativos.

Realizar cursos ou frequentar ambientes de ensino não invalida a posição de uma pessoa como autodidata. Esses são ótimos recursos para acelerar o aprendizado em um determinado assunto. No entanto, uma pessoa que busca se desenvolver por conta própria não se limita ao que foi planejado para ela, busca materiais por si mesma, sabe distinguir o que é útil e o que não é, e, acima de tudo, otimiza seu tempo.

Marcas registradas de uma pessoa autodidata

Curiosidade

Você não se contenta com conhecer algo superficialmente, faz perguntas, vai mais fundo, procura outros materiais, pessoas que pensam diferente, prós e contras. A curiosidade é um dos pilares mais fortes pois é uma das melhores ferramentas nesse leque.

Disciplina

Você sabe que precisa se organizar, algumas tarefas precisam ser diluídas em vários dias, um pouco cada dia, outras precisam ser feitas de uma vez só!
Para dar seu melhor precisa respeitar seu tempo de descanso e reservar o melhor momento possível para suas atividades.

Autonomia

Você definitivamente não precisa de alguém ditando os próximos passos, com as ferramentas certas não haverá dificuldade em se planejar. Material, apostila, grade curricular? Não, você faz o seu próprio curso de ação, sem perdas de tempo e direto ao ponto.

Persistência

Movido pela sua curiosidade e disciplina, a persistência se torna bem simples, uma vez que já faz parte da sua rotina e que está motivado a atingir seus objetivos.

Autoconhecimento

Esse tópico é bem importante, pois nada acima é conquistável se você não souber como se aplica à você.
Estuda melhor à noite, ou em grupo? Grava tudo na cabeça ou precisa escrever? Revisitar o conteúdo é importante para você? Usa algum método de memorização?

Não tem fórmula perfeita ⚠️

Não há uma fórmula universal para aprender, cada um deve encontrar sua própria forma. Há diferentes formatos de aprendizado, como ler livros, ouvir podcasts, assistir a videoaulas, criar algo sozinho ou em grupo, visitar fóruns e até mesmo ensinar. O importante é experimentar e descobrir qual método funciona melhor para cada pessoa.

Mesmo com essas características que podem ser adquiridas e melhoradas, ainda assim há algumas ferramentas que serão de grande ajuda na sua jornada de autodidata:

Objetivos

Ter clareza sobre o objetivo dos seus estudos é fundamental para traçar um plano eficiente e alcançar o sucesso. É importante definir se você está se preparando para uma prova, se quer aprender uma nova ferramenta, otimizar sua performance ou alcançar uma promoção no trabalho, por exemplo. É necessário ter em mente onde quer chegar e traçar um plano com metas e objetivos claros para alcançar esse fim. Sem essa definição, é fácil se perder e não saber se está progredindo ou não. Portanto, defina sua meta e trabalhe para alcançá-la.

Planejamento

O processo de aprendizagem e progresso é uma jornada que exige frequência e comprometimento. Não adianta tentar fazer o trabalho de três meses em um único dia, é preciso ter foco e criar um cronograma realista para alcançar seus objetivos.

Um dos segredos para atingir suas metas é desmembrá-las em pequenos passos que você possa cumprir com menos esforço. Cada passo deve ser cuidadosamente pensado e planejado, estimando o tempo médio necessário para completá-lo.

Se, por exemplo, um passo levar mais de duas semanas para ser concluído, é hora de desmembrá-lo ainda mais em pequenas etapas. Isso permitirá que você meça seu progresso de forma mais eficaz e tenha uma sensação de realização à medida que atinge cada pequena meta.

Ao criar um cronograma e desmembrar seu objetivo em pequenos passos, você pode manter-se comprometido e focado em sua jornada de aprendizado. Com o tempo, você verá seu progresso e conquistas aumentando, o que o motivará ainda mais a continuar em direção ao seu objetivo final.

Foco Foco Foco

Lembre-se sempre do seu objetivo maior e mantenha-o em mente todos os dias. Se possível, crie algo visualmente perceptível para lembrá-lo diariamente do que você está trabalhando para alcançar. Essa prática pode ajudá-lo a manter o foco e a disciplina necessários para alcançar seu objetivo, além de ajudar a evitar distrações desnecessárias.

Acompanhamento da evolução

Criar o hábito de estudar é importante, mas é igualmente importante avaliar se estamos realmente progredindo em direção aos resultados desejados. Analise os passos já cumpridos, verifique se estão de acordo com suas expectativas e se houve algum atraso ou salto de etapa. Ajuste o planejamento, se necessário, e lembre-se de que todo aprendizado é valioso e não existe um caminho certo ou errado, apenas oportunidades para melhorar.

Documente!

Ter um local centralizado para suas notas, ideias e reflexões pode ser uma ferramenta valiosa para continuar a expandir seus conhecimentos e habilidades. Algumas coisas você aprendeu de uma maneira que faz mais sentido para você, e ter um lugar para voltar e revisar esses aprendizados pode ajudar a reforçar seu conhecimento.

Troca de experiências

Encontrar canais, grupos, mentores ou mesmo ser mentor de alguém pode ser uma forma super interessante de realizar troca de experiência e se permitir aprender mais do que apenas a teoria sobre o assunto que está estudando. Ensinar é comprovadamente a melhor forma de você conseguir dominar um assunto, e buscar oportunidades para compartilhar seus conhecimentos com outras pessoas pode ajudar a aprimorar sua compreensão e habilidades. Além disso, também é uma oportunidade de se conectar com outras pessoas e aprender com as suas respectivas experiências. A troca de experiências pode ser uma maneira valiosa de obter novas perspectivas e informações sobre um determinado tópico.

Levante a barra

Colocar desafios para si mesmo é uma maneira eficaz de evitar a acomodação e garantir que você esteja sempre progredindo. Quando as coisas estão fáceis demais, é importante se desafiar a dar um passo adiante, levantar a barra e ir além do que é confortável. Isso não apenas ajuda a desenvolver novas habilidades e aprimorar as existentes, mas também pode trazer uma sensação de realização e satisfação pessoal. Portanto, não tenha medo de se desafiar e definir metas ambiciosas para si mesmo.

Compromisso com o resultado

Para realizar um trabalho bem feito, é necessário ter capricho e compromisso com a qualidade. Além disso, é importante ter cuidado com a sua saúde e bem-estar, pois só assim é possível estar no seu melhor desempenho. Aceitar fazer um trabalho medíocre é um sinal de que não estamos dando o nosso melhor e de que não estamos valorizando a nossa própria capacidade. Por isso, é fundamental ter em mente que não devemos nos acomodar e sempre buscar fazer mais e melhor, com foco no resultado e na excelência.

Por fim, é importante entender que a jornada de uma pessoa autodidata não tem um fim específico, mas é uma trajetória de melhoria contínua, onde você sempre irá descobrir formas de otimizar seu processo de aprendizado.

Hackeando sua memória

Roberto Costa — Fri, 07 Apr 2023 19:15:24 +0000

Chega de dar branco sobre um assunto ou ficar esquecendo sempre a mesma coisa.

Memorizar é uma habilidade fundamental em diversas áreas da nossa vida, mesmo assim há quem não saiba exercitá-la. Assim como há exercícios para trabalhar músculos específicos do nosso corpo, também há alguns que trabalham a nossa capacidade de aprender, lembrar e processar mais informações.

Aqui pretendo abordar desde as técnicas clássicas até as mais modernas, que podem ajudar a melhorar a sua capacidade de reter informações.

Releitura

Uma das técnicas mais comuns, provavelmente você já faz isso quando não lembra de uma parte do conteúdo ou não entendeu direito.

Quando estamos lendo algo pela primeira vez, é comum reter parcialmente o conteúdo, processando as ideias chave ou alguma parte que chamou mais a atenção.

No entanto, quando você relê o mesmo texto, pode começar a notar mais profundidade na sua compreensão, pois além do que você já entendeu anteriormente, agora está dedicando um olhar mais minucioso e detalhista sobre o mesmo assunto.

Transformar conceitos abstratos em histórias

Essa parece um pouco boba, mas é bem poderosa para memorizar informações abstratas ou muito complexas: a ideia é tornar os conceitos mais tangíveis através de imagens mentais criadas por uma história interessante. Assim, seu cérebro consegue processar de forma mais eficiente.

Repetição espaçada

Esta técnica consiste em revisar a informação em intervalos de tempo específicos, antes que você esqueça totalmente - por exemplo, revisar depois de algumas horas, dias ou semanas.
Esse método é bem popular e existem diversos aplicativos que podem te ajudar a revisar tópicos no momento certo para aplicar a técnica de repetição espaçada, como o Anki e Memrise: eles fazem uso de algoritmos para entender quando o conteúdo deve ser revisto e otimizar o processo.

Ensinar

O ato de ensinar envolve revisar bem o assunto e modelar de forma a facilitar a compreensão de outras pessoas e, melhor ainda, podem aparecer dúvidas e tópicos não cobertos antes. Justamente por isso, essa é uma das atividades que mais ajuda na memorização.

Um estudo publicado na revista Memory & Cognition por John Nestojko e colaboradores (2014) mostrou que os participantes que ensinaram um conteúdo a outra pessoa lembraram significativamente mais informações em comparação com aqueles que apenas leram o conteúdo diversas vezes.

Outra pesquisa publicada na revista Learning and Instruction por Ariel Lindorff e colaboradores (2016) mostrou que os estudantes que participaram do ensino colaborativo, no qual tiveram a oportunidade de ensinar uns aos outros, tiveram um desempenho significativamente melhor em testes de retenção de informações em comparação com aqueles que não participaram dessa atividade.

Mnemônicos

Esse nome difícil consiste em criar associações entre o que você deseja lembrar e alguma outra coisa que facilite a recuperação da informação.

No entanto, há diversos tipos de mnemônicos:

Acrônimos

Formar palavras a partir de iniciais de outras palavras, como na palavra BRICS, que significa em inglês Brazil, Russia, India, China, e South Africa, sendo usado para se referir à um grupo de países, mas você pode usar sua imaginação para fazer os mais diversos acrônimos.

Acrósticos

Caracterizada pela formação de frases onde cada palavra representa outra palavra ou conceito.
Há um acróstico muito famoso para lembrar a ordem dos planetas do Sistema Solar, que é: "Minha Vó Tem Muitas Jóias, Saturno Usa Nenhuma”, que associamos à seguinte ordem: Mercúrio, Vênus, Terra, Marte, Júpiter, Saturno, Urano, Netuno.

Rimas

Muito usado em escolas e extremamente útil, o uso de rimas para lembrar de informações é bem efetivo para relembrar, como a rima que ajuda a lembrar quantos dias têm cada mês do ano: “30 dias tem setembro, abril, junho e novembro”.

Imagens mentais

Essa técnica consiste em criar imagens vívidas e detalhadas de algo para facilitar a recuperação da memória, partindo da ideia de que o cérebro humano é mais propenso a lembrar imagens do que palavras ou números.

Um exemplo muito forte são os memes que buscam associar conceitos importantes com humor.

As imagens mentais podem ser ainda mais eficazes quando usadas em conjunto com outras técnicas de memorização, como a repetição espaçada ou a associação de ideias. Por exemplo, se você precisa memorizar uma lista de palavras, pode criar imagens mentais para cada palavra e depois associá-las de alguma forma lógica.

Palavras-chave

Por vezes nos deparamos com conceitos complexos ou palavras difíceis, e nesses cenários o uso de palavras-chave pode ser bem útil para simplificar a compreensão geral. Um exemplo é a área da medicina, que possuimuitos termos técnicos difíceis de se lembrar, logo nos seus estudos pode ser muito benéfico o uso desta técnica.

Um bom exemplo

Um estudo publicado na revista Applied Cognitive Psychology por Smith e Rothkopf (1984) descobriu que os participantes que usaram palavras-chave para memorizar informações tiveram um desempenho significativamente melhor em testes de retenção do que aqueles que não usaram essa técnica.

Método de Loci / Palácio da Memória

Também conhecido por Palácio da Memória, este método foi inventando Simónides de Ceos na Grécia Antiga, e consiste em fazer associações de objetos em locais específicos, criando um tipo de imagem mental para memorizá-los.
De acordo com a história, Simónides teve de abandonar um jantar e após isso, o teto do lugar desabou, de forma deixar todos os corpos irreconhecíveis. Contudo, ele sabia onde cada um estava sentado e, baseado em sua imagem mental, conseguiu identificar cada um.

Active recall

Nessa técnica, o objetivo é desafiar a sua memória! Sim, ao invés de simplesmente revisitar o conteúdo que está estudando, tente lembrar ativamente da informação sem consultar, seja tentando explicar ou escrevendo um resumo.

Para utilizar o active recall, é possível utilizar diversas estratégias, como:

Flashcards: criar cartões com perguntas e respostas para lembrar da informação. Por exemplo, criar um cartão com a pergunta "Qual é a capital do Brasil?" e a resposta "Brasília".
Testes práticos: fazer testes que desafiam a lembrança da informação. Por exemplo, fazer um teste sobre um capítulo de um livro sem consultá-lo.
Perguntas e respostas: criar uma lista de perguntas e respostas para lembrar da informação. Por exemplo, criar uma lista de perguntas sobre a história de um país e tentar responder a elas sem olhar para o livro.

O active recall tem se mostrado uma técnica eficaz de memorização, pois ajuda a fixar a informação na memória de longo prazo. Além disso, também pode ser aplicado em diferentes contextos, como no aprendizado de idiomas, na preparação para exames e na memorização de informações profissionais.

Curva de esquecimento

Este conceito vem do psicólogo alemão Hermann Ebbinghaus no final do século XIX, que realiza uma representação gráfica do processo de esquecimento natural após a apresentação de uma informação nova.

Depois de aprender algo novo, a retenção deste conhecimento diminui rapidamente nos primeiros minutos, horas e dias. Logo, se você não praticar ou revisitar a informação, terá um aproveitamento bem baixo.

O método de repetição espaçada é uma medida bem importante para amenizar a curva de esquecimento, e por isso é importante levar a memorização não como algo que você faz uma vez e está bom, mas como um processo contínuo que vai permitir que você retenha mais informações por mais tempo com mais facilidade, assim achatando a curva de esquecimento.

Referências

Asana. Aumente a sua capacidade de memória: as 10 principais técnicas de memorização. [online] Disponível em: https://blog.asana.com/pt-br/education-pt-br/aumente-sua-capacidade-de-memoria/ [Acessado em 7 de abril de 2023].

Neves, Tiago Ribeiro. "15 melhores técnicas de memorização para estudos, provas e concursos". Estudaqui Blog. 03/01/2022. Disponível em: https://www.estudaqui.com/blog/concursos/tecnicas-memorizacao-estudos/ [Acessado em 7 de abril de 2023].

Equipe Estácio. "CONHEÇA AS 7 MELHORES TÉCNICAS DE MEMORIZAÇÃO QUE EXISTEM". Blog Estácio. 10 de junho de 2021. Disponível em: https://blog.estacio.br/aluno-estacio/tecnicas-de-memorizacao/ [Acessado em 7 de abril de 2023].

Image by wayhomestudio on Freepik

Código limpo de milhões!

Roberto Costa — Fri, 07 Apr 2023 18:51:10 +0000

Seu código é limpo, tudo bem! Mas ele é de milhões?

O que é um código limpo?

Gosto de dizer que um código limpo não impõe dificuldades desnecessárias para sua compreensão e busca utilizar a maneira mais eficaz de resolver os problemas propostos.

Logo, o oposto também é possível, um código incompreensível, que resolve tudo da forma mais complexa, e ainda sim funciona.

Mesmo um código ruim pode funcionar. Mas se ele não for limpo, pode acabar com uma empresa de desenvolvimento. — Robert C. Martin

Mas se um código ruim funciona, pra que eu devo me preocupar em fazer do jeito certo?

Devo me preocupar em aprender isso?

Escrever um código melhor, significa menos esforço (e tempo) para qualquer atividade, seja criativa, manutenção, refatoração, ou até mesmo a admissão de um novo colaborador que ainda não conhece seu código, mas saiba que daqui a 6 meses, você pode não lembrar tudo sobre o que programou, então as outras pessoas não são as únicas que se beneficiam disso.

Quem está começando deveria aprender também?

Se você está aprendendo a programar ou mesmo programando há 10 anos, não importa muito, pois o quanto antes aprendermos boas práticas, melhor, mas nunca é tarde para começar.

Escrever código limpo é um processo de aprendizado e devemos assumir, que para escrever um código muito bom, é necessário começar escrevendo código ruim, este é um passo que não dá para pular, e mesmo depois que você aprender a escrever um código melhor, ainda existirão ocasiões onde você não vai conseguir seguir as boas práticas de um código limpo, por isso, o último tópico deste assunto se chama “Bom Senso”.

Aqui vão alguns temas clássicos e comuns que prezam pela qualidade do código escrito

Nomes

Funções, classes, métodos, argumentos, variáveis, tudo que pode ser nomeado deve possuir um nome explicativo para que a pessoa que esteja lendo não tenha que investigar o que este código faz, mas entender pelo nome.

KISS — Keep It Simple Stupid

É comum adicionar complexidade em algo poderia ser bem mais simples, e faz parte de aprender, porém, uma abordagem simples ajuda muito para outras pessoas compreenderem e também para você, depois que passar um bom tempo sem olhar para a sua criação.

DRY — Don’t Repeat Yourself

Este conceito incentiva o reuso de código que seria repetido em diversas partes do seu programa, realizando sempre as mesmas tarefas, onde qualquer modificação que fosse necessária, teria de ser feita em todos os locais que todas essas tarefas ocorrem.

Utilizando este princípio, a pessoa iria reusar o mesmo pedaço de código e sempre que precisasse modificá-lo, esta modificação seria feita em um lugar apenas, tendo efeito em todas as localidades que o utilizam.

Regra do escoteiro

Há um princípio do escotismo que diz que, uma vez que você sai da área em que está acampando, você deve deixá-la mais limpa do que quando a encontrou.

Na programação, este conceito é bem importante pois nem sempre estaremos lidando com um código amigável, mas temos que ter o compromisso de primar pela qualidade do código e das boas práticas.

Padrões / Convenções

Um dos pontos mais importantes de um código limpo é a sua padronização, onde devemos definir certas regras que são importantes para a compreensão dos envolvidos, como por exemplo:

Usar camel case ou pascal case nos nomes
Constantes com nomes em maiúsculo
Classes com a primeira letra maiúscula

Estes são alguns exemplos que são abordados em projetos reais e costumam ser definidos e seguidos pelos seus colaboradores.

Comentários

Comentários no código é um assunto certamente polêmico, alguns acham essencial, outros um pecado, mas a verdade é que depende!

Depende do projeto que você está, das práticas incentivadas na sua equipe e acima disso tudo, depende de quem escreve o código.

Um código bem escrito é a sua própria documentação, todas as variáveis e funções tem nomes muito explicativos e só de ler você entende o que está acontecendo, mas nem sempre lidamos com código bem escrito.

Comentários são um bom recurso para lidar com um código bagunçado pois precisamos deixar claro o que aqueles números mágicos e funções com nomes engraçados fazem.

Os comentários são seus amigos, eles existem para te ajudar e você deve usar se achar que faz sentido.

Tratamento de erros

É inevitável se deparar com erros e comportamentos inesperados na programação, e é uma boa prática realizar tratamentos para eliminar ou minimizar estes problemas, pois se aconteceu uma vez, irá acontecer novamente e é melhor estar preparado para tal.

Muitas vezes temos erros causados pelo comportamento do usuário, digitando letras onde deveria ter apenas números, por exemplo, e este é outro ponto importante no tratamento de erros, cobrir os erros causados pelo usuário.

Devemos enxergar o usuário como uma criança:

A maior parte do tempo não sabe o que está fazendo
Nunca vai saber ou se importar com a consequência dos seus atos e por isso você deve se preocupar por ele
Deve ser protegido de coisas que não devem ser de sua preocupação (como códigos de erros gigantes)

Bom senso

Mais importante que um milhão de regras é ter bom senso para compreender que as regras são um guia e nem sempre poderemos seguí-las mas devemos buscar reforçá-las, contudo, o objetivo destas regras é ajudar a melhorar a qualidade de código e facilidade de manutenção, mas se achar que estão atrapalhando você e a sua equipe mais do que ajudando, bem, está aí mais uma oportunidade de exercitar seu bom senso!

Referências

Clean Code - Guia e Exemplos - André Baltieri

Livro Clean Code de Robert C. Martin

Imagem de capa: Freepik

DEV Community: Roberto Costa

Core Web Vitals: UX além da interface

Introdução

Entendendo Core Web Vitals

Largest Contentful Paint (LCP) - Maior exibição de conteúdo

Interaction to Next Paint (INP) - Interação com a próxima exibição

Cumulative Layout Shift (CLS) - Mudança de layout cumulativa

Relatório do PageSpeed Insights

Relatório do Lighthouse

Usando o Lighthouse no seu projeto

O Core Web Vitals está em constante evolução

Conclusão

Referências

Desenvolvendo Soft Skills

O que são Soft Skills

Tipos de Soft Skills

Onde as Soft Skills te Levam?

Cargos de liderança e gestão

Oportunidades

Sucesso e crescimento profissional

Como treinar

Leituras recomendadas

Referências

Simplificando IndexedDB

Tabela de Conteúdos

Pontos fortes

Pontos de atenção

Teoria e conceitos do IndexedDB

Database

Object Store

Índices

Transações

Versionamento

IndexedDB na prática

Verificando a compatibilidade com IndexedDB

Criando o banco e a store

Operações de armazenamento

Trabalhando com Índices

Transações

Conclusão

Referências

Sistemas Numéricos na Computação: Introdução e Binário

Tabela de conteúdos

Breve introdução à sistemas de numeração

Decimal no detalhe

Sistemas numéricos na computação

Binário

Convertendo binário para decimal

Decimal pra binário

Contando em binário

Conclusão

Referências

Redux 101: gerenciadores de estados simplificados

Table of contents

O que é o Redux

Quando devo utilizar

Quando não devo utilizar

Como funciona o Redux

Arquitetura Flux

Mergulhando no Redux

Slices

Os Reducers

Mão na massa!

Funcionalidades

Implementação

1 Preparação

2 Criando a Store

3 Configurando o Provider

4 Slices

5 Reducers

Ligado os dados aos componentes!

Persistindo dados

Seletores personalizados

Redux com NextJS

Referências

SOLID no Frontend: Design de Software no ReactJS

Table Of Contents

O Problema do ReactJS...

Flexibilidade

Resolvendo alguns problemas