DEV Community: RENATO ADORNO

Dicas essenciais de performance para o Front-End

RENATO ADORNO — Mon, 10 Feb 2025 17:05:26 +0000

A performance em uma aplicação web é crucial para a experiência do usuário. Um site lento pode resultar em menor engajamento, pior SEO e até perda de receita. Por isso, performance e eficiência são temas recorrentes no dia a dia de um desenvolvedor. No entanto, ao tentar resolver esses problemas, muitas das vezes esquecemos o essencial. Se tem algo que aprendi, é que, na maioria das vezes, as otimizações mais simples são as que causam o maior impacto.Com isso em mente, neste artigo elaborei algumas dicas para tornar sua aplicação web mais rápida e eficiente.

Evite iframes

Evite ao máximo a utilização de iframes, utilize apenas quando não houver outra solução viável. Além de impactar negativamente o desempenho, eles podem prejudicar a acessibilidade e a usabilidade da aplicação. Além disso, conteúdos dentro de iframes não são indexados por mecanismos de busca, o que pode afetar o SEO. Sempre que possível, busque outras alternativas técnicas como o uso de APIs ou a incorporação direta do conteúdo na página.

Arquivos CSS

Minifique o CSS

Sempre escolha arquivos CSS minificados para um melhor desempenho do site. Um arquivo CSS menor e otimizado reduzirá o tempo de carregamento da página, o que melhorará a experiência do usuário. Além disso, a minificação economizará largura de banda, reduzindo custos operacionais para empresas, diminuindo e otimizando o uso de recursos.

Evite Bloqueios no Carregamento

Alguns arquivos CSS podem atrasar a renderização da página, pois o navegador precisa processá-los antes de exibir o conteúdo. Para evitar esse bloqueio, utilize técnicas como preload, que permite que o navegador carregue os estilos antecipadamente, sem interromper a exibição da página.

Exemplo de como implementar o preload:

<link rel="preload" href="styles.css" as="style">

Utilize CSS Crítico Inline para o inicio do carregamento.

O CSS crítico, também conhecido como "above the fold", é o conjunto de estilos necessários para renderizar a parte visível da página no primeiro carregamento. Incorporá-lo diretamente no HTML antes da chamada principal do CSS pode acelerar a exibição do conteúdo e melhorar a experiência do usuário.
Para obter os melhores resultados, minifique o CSS crítico e insira-o dentro de uma tag <style></style> no cabeçalho da página. Isso reduz o tempo de renderização ao evitar requisições adicionais ao servidor.

Abuse do CSS

Evite utilizar imagens desnecessárias para efeitos em sua pagina. O CSS hoje já possui recursos de sobra para adicionar efeitos como, sombras, gradientes e bordas. Utilizar o css ao invés de imagens estáticas vai ser muito mais leve e benéfico para o desempenho de sua aplicação.

Arquivos JavaScript

Minifique o JavaScript

Assim como o CSS é importante minificar os arquivos *.js, assim os espaços, comentários e quebras de linha desnecessárias serão removidos, reduzindo o tamanho desses arquivos e melhora o tempo de carregamento.

Evite bloqueios causados por JavaScript

O JavaScript bloqueia a análise sintática normal do documento HTML, então quando o analisador alcança uma tag <script> (particularmente dentro do <head>), ele para e executa o script antes de continuar. Para evitar esse tipo de situação utilize atributos como o async ou defer para evitar os bloqueios desnecessários. Caso seu script não seja necessário dentro do <head>, carregue os scripts no final do body, sendo assim outra precaução para evitar os bloqueios. Mas é uma boa prática sempre usar esses atributos para evitar qualquer problema de desempenho.

Exemplos:

<script async src="script.js"></script>
<script defer src="script.js"></script>

Dicas:

Use async quando o script não depender de outros.
Use defer quando houver dependências entre scripts.

Otimização de Imagens

Imagens podem ser uma das coisas que mais afetam negativamente o desempenho se não forem otimizadas corretamente.

Utilize o formato adequado

Evite utilizar imagens JPEG, PNG e principalmente formatos como Base64, priorize o formato WebP, que é moderno e oferece compressão superior ao JPEG e PNG sem perder qualidade. Imagens vetoriais (SVG) também é um excelente formato, perfeito para ícones, logos e gráficos vetoriais.
Ferramentas como o Lighthouse ajudam a identificar imagens que podem ser convertidas para formatos mais eficientes.

Comprima suas Imagens

Como nem sempre imagem WebP vão ser opções viáveis para sua aplicação você pode optar por comprimir suas imagens ao invés de alterar o formato.
Imagens comprimidas carregam mais rápido e consomem menos dados.

Dicas:

Valide o tamanho e formato da imagem para o usuário não fazer upload de imagens muito grandes ou de formatos incompatíveis, (“Acredite se quiser, mas sempre vai ter um usuário desavisado tentando fazer o upload de um PSD”).
Utilize uma ferramenta de compressão, antes de enviar a imagem para o servidor ao qual ela vai ficar armazenada.
Defina um nível de compressão abaixo de 85% para manter um equilíbrio entre qualidade e tamanho.
Para comprimir imagens utilize ferramentas como TinyPNG ou ImageOptim.

Utilize CDN

Atualmente uma página web minimamente otimizada já faz a utilização de uma CDN (Content Delivery Network), sendo utilizada para armazenar arquivos estáticos, como imagens, CSS, JavaScript e vídeos.

O objetivo ao utilizar uma CDN é reduzir a distância física entre o servidor e o usuário final, permitindo um carregamento mais rápido do conteúdo. Caso queira saber um pouco mais, a Cloudflare possui um excelente artigo sobre CDN.

Reflexões

Na rotina de um desenvolvedor é muito comum precisar tomar decisões envolvidas por trade-offs, sabendo que ganhar em um aspecto pode significar perder em outro, ou seja, não existe uma solução perfeita para todos os problemas, nem sempre ter uma aplicação 100% otimizada vai ser o melhor; sempre há um custo envolvido, seja em termos de desempenho, escalabilidade, tempo de desenvolvimento ou facilidade de manutenção.
Em resumo, ser um bom desenvolvedor vai além de apenas escrever um código eficiente, mas também incluem entender esses trade-offs e saber tomar melhores decisões, além de várias outras habilidades.

Conclusão

Otimização e performance vai muito além das dicas deste artigo, no entanto, pequenas mudanças como compressão de imagens, minificação de código junto com a uso de CDN podem fazer uma grande diferença na velocidade e eficiência do seu site.
Caso queira avaliar o desempenho do seu site, existem excelentes ferramentas como PageSpeed Insights e WebPageTest

Referencias

Como as metodologias de desenvolvimento web SPA e SSR impactam o SEO

RENATO ADORNO — Wed, 25 Jan 2023 00:03:27 +0000

O que é SEO?

SEO (Search Engine Optimization) é o processo de otimizar um site para que ele seja melhor classificado nos mecanismos de busca, como o Google. Isso é feito através de uma série de técnicas, incluindo otimização de conteúdo, técnica e backlinks.

Porque SEO é Importante?

É importante porque a maioria das pessoas usa mecanismos de busca para encontrar informações na internet, e sites que aparecem nas primeiras páginas dos resultados de busca tendem a receber mais tráfego e, consequentemente, mais clientes potenciais. Além disso, sites bem ranqueados no Google tendem a ter mais confiança e autoridade em relação aos seus concorrentes. Portanto, o SEO é crucial para o sucesso de um site, pois ajuda a garantir que ele seja visto por um público maior e tenha mais chances de converter visitantes em clientes.

Como o SEO funciona?

O Google usa uma combinação de algoritmos e tecnologias para rastrear, indexar e classificar sites na internet. A primeira etapa do processo é o rastreamento, onde o Google usa robôs chamados "spiders" para percorrer a web e encontrar novos sites e atualizações de sites existentes.

Uma vez que o Google encontra um site, ele o indexa, ou adiciona à sua base de dados. A indexação é o processo pelo qual o Google analisa o conteúdo do site e o armazena em sua base de dados para que possa ser recuperado mais tarde quando alguém faz uma pesquisa.

A classificação é a etapa final do processo, onde o Google usa seus algoritmos para determinar a relevância e importância de um site em relação a uma consulta de pesquisa específica. O algoritmo do Google leva em conta uma série de fatores, incluindo o conteúdo do site, a qualidade dos backlinks apontando para o site e a estrutura técnica do site.

É importante notar que o algoritmo do Google é constantemente atualizado e aprimorado, e as técnicas e estratégias recomendadas para SEO também mudam ao longo do tempo. Portanto, é importante estar sempre atento às atualizações do algoritmo e fazer o possível para manter o seu site otimizado de acordo com as melhores práticas de SEO atuais.

O SEO funciona em uma aplicação SPA utilizando React ou outras tecnologias semelhantes?

Durante muito tempo, o Google enfrentou dificuldades para acessar o conteúdo renderizado com Javascript e aconselhava que o conteúdo não pudesse ser visualizado sem habilitar o Javascript, já que muitos sites fornecem um documento vazio no HTML e deixam o Javascript cuidar do resto. Isso causou problemas para os desenvolvedores, uma vez que muitos sites estavam começando a utilizar cada vez mais Javascript para construir suas páginas e era necessario que os rastreadores tivessem a capacidade executar Javascript para rastrear e indexar o conteúdo.. Entretanto, essa situação mudou! Há alguns anos atrás, o Google anunciou que seu robô de rastreamento agora pode renderizar e indexar páginas com Javascript.

O desenvolvimento da Web tem evoluído muito nos ultimos anos e os rastreadores precisam se manter atualizados para indexar todas as páginas existentes. Um artigo da Moz de 2017 mostrou como os diferentes rastreadores de mecanismos de pesquisa lidavam com o javascript naquela época. No entanto, em 2020, é seguro assumir que todos eles estão melhorando nisso e que a maioria dos Single Page Applications (SPA's) estão sendo indexados corretamente.

Na teoria significa que os desenvolvedores podem usar todas as vantagens do Javascript de bibliotecas como o React para construir suas páginas sem se preocupar com a indexação do Google, já que agora o Google pode rastreá-las e indexá-las corretamente. Isso também significa que os desenvolvedores podem criar conteúdo mais rico e interativo sem se preocupar com a indexação.

Comparando o desesempenho no SEO de aplicações SPA e SSR

A principal desvantagem da Single-page application (SPA) é que ela serve inicialmente um documento HTML vazio, o que força um rastreador a executar o Javascript antes de ver qualquer conteúdo. Já o Server-side Rendering (SSR) tem uma vantagem inicial, pois todo o conteúdo importante está disponível no primeiro HTML.

A questão é: o quão grande é a vantagem inicial?

Para tirar essas conclusoes e necesario a realização de testes já que não temos como saber como os diferentes crawlers realmente funcionam sob o capô, a única maneira de descobrir qual das duas metodologias para sites da Web é melhor é criar um experimento, e foi justamente o que esse blog fez em 2020.

De acordo com a experiencia retratada no blog foi criado e publicado dois sites identicos, um SPA e outro SSR, resumindo o resultado depois de um mes foi o seguinte:

SSR

Total de impressões: 89

Total de cliques:: 12

SPA

Total de impressões: 1

Total de cliques: 0

Além disso, o site SSR está na primeira página (número 5) no Google . Enquanto isso, a versão do SPA não foi encontrada nas primeiras paginas no Google.

A o resultado desse experimento é que ambas as aplicações foram indexados como o google promete porém em questoes de desempenho a aplicação SSR teve um desempenho muito melhor em relação a SPA. Ou seja se ao desenvolver uma aplicação que tenha uma de suas prioridades o SEO é recomendo que utulize a metodologia SSR.

Há alguns anos atrás o SSR era uma opção mais cara e mais difícil de escalar, por exigir muito do servidor, porem hoje conseguimos utilizar o Next.js para mitigar os problemas uma aplicação SSR e ter todo o conteúdo disponível no primeiro HTML e garantir um bom desempenho no SEO, e sem precisar deixar de lado o react já que o Nextjs é um *Framework React.*

Aqui voce pode conferir a experiencia completa, ao qual foi minha principal fonte de referencia para este artigo.

Conclusão

O Google cumpre o que promete porem as as aplicações SSR continuam desempenhando muito melhor sendo muito mais eficientes em relação a SPAs, pode ser que daqui alguns anos isso mude ou hoje em 2023 já tenha mudado, mas não consegui encontrar uma fonte segura que pudesse trazer um resultado diferente.

Neste artigo abordei como essas duas diferentes metodologias de desenvolvimento e como impactam no desempenho do SEO, mas é claro que o SEO vai muito alem disso, pois é necessario a criação de conteúdo de qualidade, utilização de títulos e subtítulos, adição de imagens e vídeos, atualização regular do conteúdo, utilização de URLs amigáveis, otimização da estrutura e velocidade do site e obtenção de links de qualidade. Todas essas tecnicas também podem ajudar o muito o SEO do seu site.

Padrões de Commits (Commit Patterns)

RENATO ADORNO — Sun, 06 Mar 2022 01:24:50 +0000

A utilização do git no dia a dia dos Devs é essencial, seja para desenvolver projetos pessoais ou empresariais, todo código que será desenvolvido ou consumido por mais de uma pessoa, eventualmente será utilizado o git.

Portanto, é de muita importância que todos os envolvidos no projeto entendam as mudanças ocorridas e quais foram os contextos de alteração do código. Para isso o git commit precisa ser utilizado apropriadamente.

Commits mal comentados podem ser muito danosos ao projeto, uma vez que não conseguimos entender a natureza das mudanças ocorridas e o contexto que se aplica, diante disso existe o Conventional Commits.

O que é o Conventional Commits ?

O Conventional Commits é uma convenção simples de mensagens de commit, que segue um conjunto de regras e que ajuda os projetos a terem um histórico de commit explícito e bem estruturado.

O Conventional Commits deixara a linha do tempo de um projeto mais estruturada e fácil de entender. Quando documentados utilizando o Conventional Commits nos mostram quem alterou, quando, em qual contexto e qual tipo de alteração foi feita.

Como utilizar ?

A mensagem do commit deve ser estruturada da seguinte forma:



:emoji: <tipo>(escopo): <descrição>

Os commits terão um emoji para dar uma identificação visual a mensagem, um tipo, um escopo para dar contexto, e uma descrição onde poderá colocar os detalhes do commit.

OBS: O emoji e o escopo são opcionais, porém é recomendado que siga o escopo a cima.

Tipos de Commits

O commit possui os elementos estruturais abaixo (tipos), que informam a intenção do seu commit ao utilizador(a) de seu código.

fix - Commits do tipo fix indicam que seu trecho de código commitado está solucionando um problema (bug fix), (se relaciona com o PATCH do versionamento semântico).
feat- Commits do tipo feat indicam que seu trecho de código está incluindo um novo recurso (se relaciona com o MINOR do versionamento semântico).
docs - Commits do tipo docs indicam que houveram mudanças na documentação, como por exemplo no Readme do seu repositório. (Não inclui alterações em código).
style - Commits do tipo style indicam que houveram alterações referentes a formatações de código, semicolons, trailing spaces, lint... (Não inclui alterações em código).
refactor - Commits do tipo refactor referem-se a mudanças devido a refatorações que não alterem sua funcionalidade, como por exemplo, uma alteração no formato como é processada determinada parte da tela, mas que manteve a mesma funcionalidade, ou melhorias de performance devido a um code review.
build - Commits do tipo build são utilizados quando são realizadas modificações em arquivos de build e dependências.
test - Commits do tipo test são utilizados quando são realizadas alterações em testes, seja criando, alterando ou excluindo testes unitários. (Não inclui alterações em código)
chore - Commits do tipo chore indicam atualizações de tarefas de build, configurações de administrador, pacotes... como por exemplo adicionar um pacote no gitignore. (Não inclui alterações em código)

Emojis

Tipo de commit	Emojis
Commit inicial	🎉 `:tada:`
Tag de versão	🔖 `:bookmark:`
Novo recurso	✨ `:sparkles:`
Lista de ideias (tasks)	🔜 `:soon:`
Bugfix	🐛 `:bug:`
Documentação	📚 `:books:`
Testes	🧪 `:test_tube:`
Adicionando um teste	✅ `:white_check_mark:`
Teste de aprovação	✔️ `:heavy_check_mark:`
Acessibilidade	♿ `:wheelchair:`
Texto	📝 `:pencil:`
Package.json em JS	📦 `:package:`
Em progresso	🚧 `:construction:`
Arquivos de configuração	🔧 `:wrench:`
Removendo uma dependência	➖ `:heavy_minus_sign:`
Adicionando uma dependência	➕ `:heavy_plus_sign:`
Revertendo mudanças	💥 `:boom:`
Alterações de revisão de código	👌 `:ok_hand:`
Refatoração	♻️ `:recycle:`
Mover/Renomear	🚚 `:truck:`

Exemplos de utilização

Com os 4 commits a cima teremos o seguinte histórico:

Atenção

Algumas partes deste artigo como por exemplo o uso de emojis é uma particularidade minha não necessariamente é o mais certo a se fazer, muitas empresas usam padrões de commits diferentes. O importante é se atentar ao escrever a mensagem de um commit, para que outros entendam e fique bem claro oque foi alterado ou criado.

Conclusão

Escrevi este artigo no intuito de ajudar os Devs iniciantes como eu, e também registrar mais um dos meus aprendizados nesta longa caminhada de estudos.

Obrigado a todos que leram até aqui!

Referencias

O uso dos emojis foi uma ideia que tirei deste repositório aqui.

Manipulando containers Docker

RENATO ADORNO — Tue, 15 Feb 2022 15:51:22 +0000

Neste artigo vou abordar o que eu aprendi sobre Containers Docker, de uma forma pratica.
Para utilização do Docker é necessário conhecer alguns comandos e entender de forma clara e direta para que servem, assim como alguns exemplos de uso.

Como executar um container

Para iniciar um container é necessário saber a partir de qual imagem será executado. Para listar as imagens que seu Docker host tem localmente, execute o comando abaixo:

Atenção: se a imagem não estiver em sua maquina local, o Docker irá baixar automaticamente.

docker container run <parâmetros> <imagem:tag> <CMD> <argumentos>
#ou
docker run <parâmetros> <imagem> <CMD> <argumentos>

Os parâmetros mais utilizados na execução de containers são:

Parâmetro	Explicação
-d	Execução do container em background
-i	Modo interativo. Mantém o STDIN aberto mesmo sem console anexado
-t	Aloca uma pseudo TTY
--rm	Remove automaticamente o container após finalização, pode ser chamado de modo cleanup (Não funciona com -d)
--name	Nomear o container
-v	Mapeamento de volume
-p	Mapeamento de porta
-m	Limitar o uso de memória RAM
-c	Balancear o uso de CPU

Segue um exemplo simples do seguinte comando:

docker run -it --rm --name meu_python python bash

De acordo com o comando acima, será iniciado um container com o nome meu_python, criado a partir da imagem python e o processo executado nesse container será o bash.

Vale lembrar que, caso o CMD não seja especificado no comando docker container run, é utilizado o valor padrão definido no Dockerfile da imagem utilizada. No nosso caso é python e seu comando padrão executa o binário python, ou seja, se não fosse especificado o bash, no final do comando de exemplo acima, ao invés de um shell bash do GNU/Linux, seria exibido um shell do python.

Como renomear um container

docker rename CONTAINER NEW_NAME

Como listar containers

Esse comando é responsável por mostrar todos os containers, mesmo aqueles não mais em execução.

docker container ls <parâmetros>
#ou 
docker ps

Parâmetro	Explicação
-a	Lista todos os containers, inclusive os desligados
-l	Lista os últimos containers, inclusive os desligados
-n	Lista os últimos N containers, inclusive os desligados
-q	Lista apenas os ids dos containers, ótimo para utilização em scripts

Gerenciar containers

Para iniciar, reiniciar, pausar, resumir e parar um container execute o comando abaixo

docker container <COMANDO> <CONTAINER ID || NAME>
#ou  
docker <COMANDO> <CONTAINER ID || NAME>

Comandos	Explicação
restart	Reinicia um container
pause	Pausa a execução do container
unpause	Tira o container do modo pausa
stop	Encerra a execução do container
rm	Apaga um container
rm -f	Apaga um container ativo

Como retomar o acesso a um container interativo rodando em segundo plano

Entrar no modo interativo com container ativo

docker container attach <CONTAINER ID || NAMES>
#ou  
docker attach <CONTAINER ID || NAMES>

Para sair do modo interativo, digite exit

Para sair do container mas mante-lo em execução tecle ctrl + pq

Como apagar containers que não estão sendo utilizados

Remove todos os containers inativos do seu computador

docker container prune

Vale ressaltar que a ideia dos containers é a de serem descartáveis. Caso você use o mesmo container por muito tempo sem descartá-lo, provavelmente está usando o Docker incorretamente. O Docker não é uma máquina, é um processo em execução. E, como todo processo, deve ser descartado para que outro possa tomar seu lugar na reinicialização do mesmo.

Como motirar os processos dentro de um container

O comando top, assim como nos terminais linux, traz as informações sobre os processos que estão sendo rodados, mas dentro do container, o que não inclui, por exemplo, serviços que são compartilhados com o sistema hospedeiro. Ele é útil para quando estamos rodando containers em segundo plano

docker container top <CONTAINER ID || NAMES>

Dica para monitorar containers

Instale o ctop para monitorar e manipular todos os containers em sua maquina

Para utilizar basta digitar ctop em seu terminal.

Introdução ao Docker

RENATO ADORNO — Mon, 14 Feb 2022 15:46:28 +0000

O que é o Docker

Docker é uma empresa de conteinerização que permite a criação e uso de containers Linux.

Com o Docker, você pode tratar containers como máquinas virtuais modulares extremamente leves. Além de obter flexibilidade com esses containers, você pode criar, implantar, copiar e movê-los de um ambiente para outro, o que ajuda a otimizar seus aplicativos para a nuvem.

Em poucas palavras, o Docker é um programa de computador, uma ferramenta de linha de comando, uma plataforma de conteinerização, um produto e uma empresa.

O que são Containers

Containers são uma forma de virtualização a nível de sistema operacional que permite rodar múltiplos sistema isolados em um único sistema operacional

Uma virtualização comum, como por exemplo o VMware, é muito pesada e não performática.

Container não é como uma virtualização comum, a diferença principal, é que os containers conseguem compartilhar o mesmo kernel do sistema operacional, sendo assim muito mais performático.

Outra diferença de uma virtualização comum, é que, um container não deve ser utilizado para abrigar várias aplicações, e é justamente por isso que ele ocupa muito menos espaço que uma VM. Sua tendência é de manter somente o essencial no seu conteúdo.

O que são Imagens Docker

A imagem do Docker é aquela que vem com o código e pode ser executada em qualquer plataforma onde o Docker Engine esteja instalado.
Vamos dar um exemplo: Pense que um desenvolvedor escreve código e então ele empacota todo o código, dependências, instaláveis etc em um arquivo chamado Dockerfile e cria uma imagem a partir dele. Agora esta imagem se for dada a qualquer desenvolvedor em qualquer plataforma será executada no Docker Engine como um container. As imagens do Docker são o núcleo de todo o Docker como plataforma. O Docker Image segue uma arquitetura em camadas que ajuda a imagem ser construída mais rapidamente.

Imagens podem se referir a praticamente qualquer tipo de container. Um exemplo disso é pensar o próprio sistema operacional Ubuntu, que possui uma imagem oficial no Docker Hub .

O Docker Hub é o principal repositório de imagens Docker atualmente. Nele, possuímos o que é chamado de Registro (Registry) *, onde requisitamos essas imagens.

O Registry é um sistema de armazenamento e entrega, no qual podemos ter um usuário com nossas próprias imagens. Algo que lembra muito o GitHub, já que podemos dar pull nessas imagens para uso posterior.

Fluxo entre Containers e Imagens

Para explicar melhor a dinâmica entre containers e imagens, falaremos um pouco de como funciona o fluxo padrão do Docker :

Fluxo padrão do Docker

Tudo começa em um arquivo chamado Dockerfile . Este arquivo possui as instruções* necessárias para que possamos gerar uma imagem;

Aqui vão instruções de qual sistema operacional usar, tal como quais comandos devem ser executados quando a imagem for rodada em um container .

Após isso, podemos dar push ou pull (como em um repositório do GitHub) em uma imagem no Registry *;

Você pode dar pull na sua própria imagem (caso tenha dado push nela) ou em outra a sua escolha.

O Registro mais comum é o Docker Hub , mas temos outros exemplos, como mostrado na imagem.

Por último, rodamos a imagem em um container , utilizando o comando run .

Após isso, temos que dizer pro container o que deve acontecer, se ele deve se manter ativo ou não, caso o contrário, o container é encerrado. O que faz parte de seu ciclo de vida.

Como instalar o Docker

Siga os links do tutorial direto da documentação oficial do Docker.

Ubuntu
Debian
Fedora
MacOS
Windows

Como configurar e instalar o GitHub CLI.

RENATO ADORNO — Wed, 22 Sep 2021 21:44:49 +0000

Siga os passos a seguir:

Passo 1:

Primeiro iremos instalar o gh de acordo com seu sistema operacional.

Distribuições Linux

Debian, Ubuntu Linux, Raspberry Pi OS (apt)

Instalar:

curl -fsSL https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo gpg --dearmor -o /usr/share/keyrings/githubcli-archive-keyring.gpg
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/githubcli-archive-keyring.gpg] https://cli.github.com/packages stable main" | sudo tee /etc/apt/sources.list.d/github-cli.list > /dev/null
sudo apt update
sudo apt install gh

Atualizar:

sudo apt update
sudo apt install gh

Fedora, CentOS, Red Hat Enterprise Linux (dnf)

Instalar:

sudo dnf config-manager --add-repo https://cli.github.com/packages/rpm/gh-cli.repo
sudo dnf install gh

Atualizar:

sudo dnf update gh

openSUSE/SUSE Linux (zypper)

Install:

sudo zypper addrepo https://cli.github.com/packages/rpm/gh-cli.repo
sudo zypper ref
sudo zypper install gh

Atualizar:

sudo zypper ref
sudo zypper update gh

Mac OS

GitHub CLI está disponível via Homebrew , MacPorts e Conda

Homebrew

Instalar:

brew install gh

Atualizar:

brew upgrade gh

MacPorts

Instalar:

sudo port install gh

Atualizar:

sudo port selfupdate && sudo port upgrade gh

Conda

Instalar:

conda install gh --channel conda-forge

Atualizar:

conda update gh --channel conda-forge

Windows

GitHub CLI está disponível via WinGet , scoop e Chocolatey.

Chocolatey

Instalar:

choco install gh

Atualizar:

choco upgrade gh

scoop

Instalar:

scoop install gh

Atualizar:

scoop update gh

WinGet

Instalar:

winget install GitHub.cli

Atualizar:

winget upgrade GitHub.cli

Passo 2:

Depois de ter instalado o gh corretamente, agora iremos configurar para começar a utilização.

Autenticação

Primeiro execute gh auth login para autenticar com sua conta GitHub.

Logo depois de um ENTER e você será solicitado a autenticar usando seu navegador ou colar um token.

Configurando um editor para o `gh`

Para definir seu editor preferido, você pode usar em seu terminal gh config set editor nome_do_editor.

Se você não definir o editor, para macOS e Linux, o ghrespeitará as variáveis de ambiente do editor com base em seu sistema operacional e configuração de shell .

No macOS e no Linux, o editor padrão é o Nano. No Windows, o editor padrão é o Bloco de notas.

Referencias

https://github.com/cli/cli/blob/trunk/docs/install_linux.md

https://github.com/cli/cli#installation

https://cli.github.com/manual/gh_gist_create

DEV Community: RENATO ADORNO

Dicas essenciais de performance para o Front-End

Evite iframes

Arquivos CSS

Minifique o CSS

Evite Bloqueios no Carregamento

Utilize CSS Crítico Inline para o inicio do carregamento.

Abuse do CSS

Arquivos JavaScript

Minifique o JavaScript

Evite bloqueios causados por JavaScript

Otimização de Imagens

Utilize o formato adequado

Comprima suas Imagens

Utilize CDN

Reflexões

Conclusão

Referencias

Como as metodologias de desenvolvimento web SPA e SSR impactam o SEO

O que é SEO?

Porque SEO é Importante?

Como o SEO funciona?

O SEO funciona em uma aplicação SPA utilizando React ou outras tecnologias semelhantes?

Comparando o desesempenho no SEO de aplicações SPA e SSR

SSR

SPA

Conclusão

Padrões de Commits (Commit Patterns)

O que é o Conventional Commits ?

Como utilizar ?

Tipos de Commits

Emojis

Exemplos de utilização

Atenção

Conclusão

Referencias

Manipulando containers Docker

Como executar um container

Como renomear um container

Como listar containers

Gerenciar containers

Como retomar o acesso a um container interativo rodando em segundo plano

Como apagar containers que não estão sendo utilizados

Como motirar os processos dentro de um container

Dica para monitorar containers

Introdução ao Docker

O que é o Docker

O que são Containers

O que são Imagens Docker

Fluxo entre Containers e Imagens

Fluxo padrão do Docker

Como instalar o Docker

Como configurar e instalar o GitHub CLI.

Siga os passos a seguir:

Passo 1:

Distribuições Linux

Debian, Ubuntu Linux, Raspberry Pi OS (apt)

Fedora, CentOS, Red Hat Enterprise Linux (dnf)

openSUSE/SUSE Linux (zypper)

Mac OS

Homebrew

MacPorts

Conda

Windows

Chocolatey

scoop

WinGet

Passo 2:

Autenticação

Configurando um editor para o gh

Referencias

Configurando um editor para o `gh`