Forem: Augusto Klecz

As 7 ferramentas mais úteis para desenvolvedores web

Augusto Klecz — Mon, 21 Oct 2024 06:46:33 +0000

Que o desenvolvimento web está em constante evolução não é segredo nem mesmo para os usuários mais comuns da tecnologia. A cada dia, novas ferramentas, novos frameworks e novas soluções surgem para resolver os novos problemas em que a evolução consequentemente é responsável.

Recentemente, eu estava desenvolvendo uma aplicação para um cliente no trabalho e utilizei várias das minhas extensões para gerar um relatório que me faça melhorar a qualidade da aplicação em um modo geral.

Neste artigo, vou compartilhar algumas das ferramentas mais eficazes para otimizar seu fluxo de trabalho como desenvolvedor, com base na minha experiência na criação de aplicações web. Além disso, considerei também as necessidades mais comuns que eu enfrentei quando precisei de algum dado que me fosse útil para elevar a qualidade das encomendas. As ferramentas não estão em ordem do mais útil para menos útil, apresentei-as sem ordenação lógica.

Lembrando que, você encontrará o download de todas essas extensões neste próprio artigo nos dois principais navegadores da internet, vamos nessa! 😎

1 - Lighthouse

O Lighthouse é uma ferramente poderosa para desenvolvedores web extremamente necessária para o desenvolvedor que busca evoluir o nível das aplicações que ele trabalha, utilizando frameworks para o desenvolvimento ou não.

Sim, ele gera relatórios, e esses relatórios são separados por diferentes categorias. As principais coisas nas quais o Lighthouse leva em consideração ao testar uma aplicação são: Perfomance, Acessibilidade, Boas práticas, e o SEO.

Além dos relatórios separados por categorias, dentro dessa categoria específica, ele mostra o que pode ser aprimorado para melhorar a nota da sua aplicação no teste, e a forma com que o Lighthouse calcula isso, foi documentada e você pode se aprofundar mais lendo a documentação oficial da extensão. Você também pode acessar o Lighthouse pelo próprio console do navegador, mas eu particularmente prefiro a extensão instalada.

Você terá uma chance de aprender sobre uma aplicação de forma mais avançada, a medida que estuda como as seguintes propriedades funcionam:

First Contentful Paint(FCP)
Large Contentfull Paint(LCP)
SI (Speed Index)
TBT (Total Blocking Time)
CLS (Cumulative Layout Shift)

Os mais importantes, para você que está iniciando neste mundo, recomendo que como indrodução aprenda o FCP e o LCP, após isso, siga a ordem natural no aprendizado da lista de cima para baixo.

Aprenda também pela calculadora oficial da extensão: Lighthouse Calculator

Introdução ao Lighthouse: Visão geral, o que é o Lighthouse?

Como o cálculo funciona: Introdução

Baixe a extensão Lighthouse

Chrome: Lighthouse para Chrome
Firefox: Lighthouse para Firefox

2 - Wapplyzer

O Wapplyzer é uma extensão multiplataforma que tem como objetivo mostrar ao desenvolvedor quais são as tecnologias que a aplicação web que está sendo visualizada que a compõe.

Isso se torna útil, principalmente, quando há um projeto no qual você gostou muito do resultado final, e pretende descobrir a tecnologia que foi utilizada para criar aquele site. Não é segredo que eu, particularmente utilizo Nuxt.Js 3.0 para criar as minhas aplicações hoje, desta forma, caso você encontre um website que eu desenvolvi recentemente, encontrará tudo que eu utilizei na criação do site.

Como é possível visualizar na imagem, você por conseguinte concluí que as categorias organizam as tecnologias em que o site contém, e essas categorias são:

Frameworks Javascript utilizados
Linguagem de Programação
Scripts utilizados
UI Framework (Front-end)
Diversos (Outros que não necessariamente se enquadram nas categorias anteriores)

Para você que é mais radical e -zoa todo mundo que usa o tema light~ não gosta de utilizar o tema claro para visualizar elementos na web, você também pode optar por trocar o tema.

Encontre mais informações sobre a extensão: Site do Wapplyzer

Baixe a extensão Wappalyzer

Chrome: Wappalyzer para Chrome
Firefox: Wappalyzer para Firefox

3 - Landmarks

Você já ouviu falar nas Landmarks? As Landmarks são simplesmente as linhas de divisão de conteúdo que indicam ao navegador como o conteúdo está distribuído na página.

Geralmente, aqueles websites que possuem uma distribuição correta das Landmarks, indicam uma estruturação correta da aplicação, do mesmo modo um HTML semântico e organizado.

Ao analisar a imagem acima, perceba como a extensão analisa o layout com precisão. No menu expandido à direita, ao marcar a caixinha “Show all landmarks”, você poderá ver todas as linhas de uma vez, mas também pode optar por visualizar uma por vez.

Veja mais sobre esta extensão: Site do Landmarks

Baixe a extensão Landmarks

Chrome: Landmarks para Chrome
Firefox: Landmarks para Firefox

4 - WhatFont

Whatfont é uma importante ferramenta que nos permite a encontrar qualquer fonte presente na web. É uma espécie de “pesquisador interativo”.

Lembra daquela fonte que você viu em um site e queria descobrir o nome dela sem perder um bom tempo buscando no código fonte? Sim, essa extensão resolve este problema.

Ele identifica, o nome da fonte, o peso, estilo, tamanho, cor, estilo da fonte o line-height e também disponibiliza uma pré visualização abaixo das propriedades.

Baixe a extensão WhatFont:

Chrome: WhatFont Chrome
Firefox: WhatFont Firefox

5 - Colorzilla

Seguindo a mesma linha do WhatFont, nós como desenvolvedores web Front-end, muitas vezes necessitamos de alguma ferramenta que seja capaz de capturar as cores de algum elemento na página. Para fins práticos, o Colorzilla é uma excelente opção, e possui a maior nota na loja do Chrome para aplicativos deste segmento.

Ele possui várias opções disponíveis para a captura de cores. A principal opção, seria a captura de cores com precisão, clicando em “Escolher cor da página”, você libera uma espécie de “lupa” que é capaz de capturar a cor até mesmo dos pixels que compõem algum elemento.

Eu particularmente não tive uma boa experiência com outras extensões de captura de cor, esta, por mais que antiga, funcionou para o que eu precisei naquele momento. A minha recomendação neste caso, vem mais pela praticidade, não necessariamente por algo a mais que a extensão poderia proporcionar.

Baixe a extensão Colorzilla:

Chrome: Colorzilla para Chrome
Firefox: Colorzilla para Firefox

6 - Ah, Foque-se (pegou mal?)

Alguém mais tem problemas com foco na hora de trabalhar em casa com desenvolvimento de aplicações? Eu sou uma dessas pessoas, por isso utilizei esta extensão que me proporcionou uma melhora significativa no que diz respeito ao foco no meu trabalho.

O principal objetivo do Stayfocusd é bloquear sites que podem te distrair durante o seu trabalho. As principais funções dele são:

Geração de relatórios dos sites que você utiliza (para descobrir quanto tempo você passou nele)
Bloqueador de sites (bloqueia os sites que você não gostaria de mais acessar)
Modo de foco (Para você que quer criar uma lista de sites bloqueados e ativar em uma hora específica)
Require Challange (Desafio requerido para você não desativar a extensão facilmente)
Import/Export config (Faça a importação e exportação de uma configuração pré estabelecida, configure apenas uma vez em todos os dispositivos)

O que eu particularmente mais gosto nessa extensão, é o fato dela gerar os relatórios mensais de consumo dos sites que eu visito. Com eles, eu posso definir se estou “gastando tempo” em sites que não são produtivos ao meu trabalho para depois ter o poder de bloquea-los após a descoberta com os próprios relatórios gerados pela extensão.

Baixe a extensão StayFocusd:

Chrome: StayFocusd para Chrome
Firefox: Incompatível, infelizmente sem grandes alternativas.

7 - Picture in Picture

Picture in Picture, é uma extensão de navegador que é capaz de capturar um vídeo de uma página a sua escolha e transforma-lo em uma versão “móvel”, participando de toda a tela e sobrepondo qualquer aplicativo da área de trabalho.

Ao realizar uma aula da faculdade, de algum curso de programação, ou até mesmo acompanhar um vídeo enquanto trabalha em algum projeto na sua IDE, a extensão se torna bem prática para a exibição de vídeos em segundo plano.

Utilizando esta extensão, você pode redimensionar o tamanho do vídeo, para se ajustar na sua tela, adiantar um vídeo em uma playlist, pausar, silenciar, adiantar ou retroceder em um tempo específico, volume, ou voltar para a página inicial onde o vídeo foi primeiramente localizado.

Para iniciar a extensão, basta clicar no ícone da extensão na mesma página em que o seu vídeo está localizado, e a extensão será ativada automaticamente.

Baixe a extensão Picture in Picture:

Chrome: Picture in Picture para Chrome
Firefox: Incompatível, mas encontrei uma alternativa: para o Firefox

Conclusão

Neste artigo, vimos sobre diversas ferramentas úteis que podemos utilizar para o nosso trabalho como desenvolvedores. Espero que alguma dessas dicas possam ter servido para você.

Novos artigos estão por vir! conto com a sua presença. Se você gostou, me siga e deixe o seu coração para me incentivar a trazer mais informação para vocês.

Grato, Victor Augusto Klecz.

Conheça a Cherry Code -> https://cherrycode.com.br

Como resolver o erro "Execução de scripts desabilitada neste sistema" (Execution scripts is disabled on this system error)

Augusto Klecz — Sun, 09 Jun 2024 18:14:42 +0000

Nós, como desenvolvedores, não podemos nos restringir apenas aos conhecimentos das nossas respectivas áreas na programação, precisamos também entender como o sistema operacional que você está utilizando funciona e como resolver erros com eficácia, sem tomar muito tempo.

O erro “Execution scripts is disabled on this system”, ou “A Execução de scripts desabilitada neste sistema” é um erro que é apresentado devida a falta de permissão para executar um script no Windows, que geralmente acontece após uma formatação do sistema ou alteração das políticas de execução da máquina.

Solução

Para iniciar o processo de solução do erro, você precisará abrir o Windows Powershell como administrador e identificar a política de execução que está habilitada na sua máquina utilizando:

Get-ExecutionPolicy

O seu dispositivo deve oferecer a opção padrão do Sistema: Default ou Restricted . Independente de qual opção aparecer, você precisará alterar para a politica de execução RemoteSigned ou até mesmo Unrestricted.

A política de execução RemoteSigned permite a execução de scripts locais sem necessariamente precisar de uma assinatura digital, mas exige assinatura digital para scripts que são baixados da internet.

E a política de execução Unrestricted por sua vez, permite a execução de todos os scripts sem qualquer restrição. Em regra, é menos seguro e não é tão recomendado a menos que seja absolutamente necessária a utilização.

Em resumo, prefira utilizar a política de execução RemoteSigned na maioria dos casos, então aplique a linha de comando:

Set-ExecutionPolicy RemoteSigned

Após isso, você pode aceitar os termos de troca de política de execução e o problema será resolvido.

Mas… pera aí!

Em alguns outros casos mais específicos, pode acontecer desta troca de execução de scripts retornar um erro parecido com este:

O Windows PowerShell atualizou sua política de execução com êxito, mas a configuração foi substituída por uma política definida em um escopo mais específico. Devido à substituição, o shell manterá sua política de execução efetiva atual de Restricted.

Isso ocorre por diversos motivos, no meu caso, utilizando o comando Get-ExecutionPolicy -List , pude perceber que no meu escopo atual, a política de execução em “CurrentUser” ainda estava em Restricted .

Então, precisei alterar a execução de scripts dentro do escopo “CurrentUser”.

Apliquei esta linha de comando para mudar a política no meu escopo atual (CurrentUser) em que o modo ainda estava em Restricted .

Observe como funciona a “anatomia” do comando:

Syntax: “Set-ExecutionPolicy (Parâmetro -Scope para escolher o escopo) (Nome do Escopo que está restrito) (Política de Execução que você escolheu).”

O meu resultado foi este:

Set-ExecutionPolicy -Scope CurrentUser RemoteSigned

⚠️ Lembrando que todas as operações feitas neste artigo, foram utilizando o Powershell em execução no modo de Administrador, que necessariamente precisa ser executado para a troca de política funcionar.

Pronto! ✅ eu, de forma sincera, espero que tenha conseguido solucionar esta questão utilizando esse artigo. Obrigado pela sua leitura até aqui.

Conheça a Cherry Code -> https://cherrycode.com.br

Erro "The engine node is incompatible with this module." "O nó do mecanismo é incompatível com este módulo" como resolver

Augusto Klecz — Sat, 11 May 2024 17:58:57 +0000

Caso você esteja enfrentando o erro "The engine node is incompatible with this module." e não saiba o que pode ter ocorrido, entenda que não é tão incomum quanto pode parecer.

Qual é a explicação do erro apresentado?

O erro geralmente acontece após a tentativa de instalação de uma versão recente de um pacote que você tentou incluir na sua aplicação. Quando você instala um pacote, a última versão disponível do pacote é baixada e colocada na pasta node_modules, e uma entrada correspondente é adicionada nos arquivos package.json e package-lock.json presentes na pasta atual.

O npm calcula as dependências e também instala a última versão delas.

E quando se enfrenta este erro de incompatibilidade, geralmente, como foi o meu caso, foi feita uma formatação do sistema, troca de sistema operacional no meio do desenvolvimento (caso você utilize um dual-boot) /ou uma grande atualização do Node.Js. Felizmente, podemos resolver este problema atualizando todos os pacotes e dependências globalmente.

Um exemplo real que aconteceu comigo, foi quando eu precisei iniciar uma aplicação que desenvolvi anteriormente em outro sistema operacional e o console me retornava um erro "The engine node is incompatible with this module. Expected version ^14.16.0 || ^16.10.0 || ^17.0.0 || ^18.0.0 || ^19.0.0. Got 20.9.0"

Solução

Para resolver este problema atualizando para uma versão major desses pacotes, instale o pacote npm-check-updates globalmente.

npm install -g npm-check-updates

E depois, entrando na pasta da sua aplicação que possuiria a node_modules, aplique o seguinte comando:

ncu -u

Este comando atualizará a sua package.json, as dependencies e devDependencies.

Após isso, faça a atualização utilizando o comando npm update e faça a reinstalação das dependências da aplicação. No meu caso, utilizei o gerenciador de pacotes yarn, então eu apliquei o comando de instalação.

yarn install // ou npm install

Assim sendo, você resolve o erro com eficácia. Ah! e uma dica, para descobrir novas atualizações dos pacotes, você pode aplicar o comando npm outdated, este comando é responsável por verificar novas atualizações dos pacotes.

✅ Prontinho! espero que tenha conseguido solucionar esta questão utilizando esse artigo. Obrigado pela sua leitura até aqui.

Conheça a Cherry Code -> https://cherrycode.com.br

Como utilizar o PM2 para gerenciar aplicações

Augusto Klecz — Thu, 21 Sep 2023 16:51:14 +0000

É muito comum que nós desenvolvedores precisemos de ferramentas que visam facilitar o desenvolvimento e organização na hora de desenvolver uma aplicação mais complexa.

O PM2 (Process-manager-2) é um gerenciador de pacotes bem popular de código aberto que visa melhorar a administração geral das suas aplicações Node.Js. Ele oferece ao desenvolvedor uma interface inteligente própria para ser exibida em CLI (Command-line-interface).

Interface:

Algumas das funções que a utilização da ferramenta pode te proporcionar é a facilidade de gerenciamento através de comandos simples e automatizações que são realmente úteis.

Algumas das vantagens que você terá em utilizar o PM2:

Auto-start: O PM2 pode iniciar uma aplicação e mante-la online dioturnamente através do comando de inicialização atrelado a um comando da ferramenta.
Health checks: O PM2 pode realizar verificações de saúde em um aplicativo Node.js para garantir que ele esteja funcionando corretamente.
Log monitoring: O PM2 pode monitorar os logs de um aplicativo Node.js para identificar problemas.
Safe reloading: O PM2 oferece a capacidade de recarregar seus aplicativos Node.js sem interrupções de serviço. Isso é feito para garantir que os novos processos estejam em execução antes de desligar os antigos.

Algumas da desvantagens que você possivelmente encontrará no PM2:

Consumo de Recursos: Em alguns casos, utilizar um gerenciador de pacotes como a ferramenta apresentada, significará em um consumo de recursos excessivo em uma máquina mais simples.
Complexidade: Caso você nunca tenha utilizado um gerenciador de pacotes antes, é possível que você se sinta perdido a realizar os procedimentos pelas primeiras vezes, esta documentação é apenas um guia simples, temos muito mais conteúdos pela internet.

Instalação do PM2

sudo npm install -g pm2
pm2 startup (Para iniciar o processo)

Caso você esteja utilizando uma VPS é possível que seja necessária a adição do processo no Firefwall.

sudo systemctl enable pm2-root (Ativa o processo)
sudo systemctl status pm2-root (Verificar status de funcionamento)

Após a instalação, você receberá certamente receberá uma tela parecida com essa se o procedimento for feito de maneira correta:

Utlização do PM2

Após a instalação, você pode adicionar o seu pacote atribuindo um nome a ele.

pm2 start your_project
pm2 status (Verifica se foi iniciado)
pm2 stop your_project (Desligar caso necessário)

Como deixar o projeto online automaticamente?

É necessário para não termos na necessidade de ligar o projeto a todo momento.

Linha de comando:

sudo pm2 start "yarn dev" --name="your_project"

O comando de inicialização manual do projeto deve ser o mesmo que for declarado entre as aspas após escrever start. Esta linha de comando evita que o processo da sua aplicação seja encerrado, mantendo-o sempre online.

Alguns comandos que podem ser úteis para o gerenciamento geral do seu projeto ou pacote:

sudo pm2 start Nome_do_Projeto (Ligar o projeto)
sudo pm2 stop Nome_do_Projeto (Desligar o projeto)
sudo pm2 logs Nome_do_Projeto (Visitar as logs)

Você pode buscar outros comandos importantes relacionados ao PM2
na documentação oficial ou em outros conteúdos pela internet.

Prontinho! ✅ agora você sabe o básico sobre PM2, e já consegue geremciar uma aplicação utilizando esta ferramenta. Obrigado pela sua leitura até aqui.

Conheça a Cherry Code -> https://cherrycode.com.br