Forem: Devhat

Dicas e configurações para seu sistema linux

Paulo Victor — Fri, 10 May 2024 13:55:52 +0000

Fala meu consagrado, quando eu comecei a minha jornada no linux não tinha ninguém para me ajudar e dar dicas de ferramentas para usar no meu terminal e melhorar minha usabilidade, por isso esse guia extra existe, ele ainda faz parte da jornada de configuração do linux, mas é algo bem extra espero que essas dicas possam te ajudar

Comandos de Terminal

Se você não tem muita experiencia com terminal ou nunca usou um linux na vida, vale a pena ver esse artigo e dar um confere em alguns dos comandos que vão te acompanhar pelo dia a dia no linux

Terminal mais bonito

Powerlevel10k é um plugin para o shell zsh que te da uma liberdade de personalizar o seu terminal e deixar ele a sua cara

Antes de começar esse processo recomendo fortemente instalar e configurar alguma fonte de sua preferencia do nerdfonts, para suportar os ícones do github

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Substitua o tema que está no .zshrc pelo powerlevel10k/powerlevel10k e deve ficar assim:

Restarte o seu terminal e ele aparecerá assim, conclua os passos de acordo com seu gosto

Caso queira saber mais sobre o powerlevel10k clique aqui

Alias git

Alguns comando do git pode ser repetitivos e "grandes" caso queira "otimizar" seu digitar de comandos existem esses alias a seguir, é importante que você customize eles ao seu gosto e necessidade

alias g=git
alias ga='git add'
alias gb='git branch'
alias gc='git commit --verbose'
alias gd='git diff'
alias gf='git fetch'
alias gg='git gui citool'
alias gl='git pull'
alias gm='git merge'
alias gp='git push'
alias gr='git remote'

Alias parar execução de um contêiner

Esse comando para os contêineres em execução automaticamente sem destruir, a fim de preservar recursos do seu pc, é só adicionar ele no .zshrc e bau bau

alias docker-down='docker stop $(docker ps -a -q)'

Transferir wsl para outro disco

As vezes temos um ambiente de dev todo configurado e queremos transferir ele para outro pc, esse guia abaixo vai te ajudar com isso.

Lazygit

Uma interface gráfica para o git no terminal que pode te ajudar a identificar branchs, fazer cherrypick e até rebase

O passo a passo a seguir será para a instalação no UBUNTU, caso queria instalar de outra forma, ou em outro ambiente linux, clique aqui

Rode o seguinte comando no terminal:

LAZYGIT_VERSION=$(curl -s "https://api.github.com/repos/jesseduffield/lazygit/releases/latest" | grep -Po '"tag_name": "v\K[^"]*')
curl -Lo lazygit.tar.gz "https://github.com/jesseduffield/lazygit/releases/latest/download/lazygit_${LAZYGIT_VERSION}_Linux_x86_64.tar.gz"
tar xf lazygit.tar.gz lazygit
sudo install lazygit /usr/local/bin

Após a instalação resete se terminal e use o comando lazygit no seu terminal quando tiver dentro de um repositório q tem git e ele ficará assim:

Para saber mais sobre os comandos do lazygit, clique aqui

Lazydocker

Dos mesmos criadores de lazygit temos o lazydocker, que tem o intuito de ser uma interface gráfica para o docker no seu terminal, muito útil para ver algum log ou se existe algum container que persistiu, deletar volumes facilmente e outras funcionalidades

Podemos instalar o programa usando o asdf que deixa tudo bem mais fácil, rode os seguintes comandos no terminal caso tenha o asdf instalado:

asdf plugin add lazydocker https://github.com/comdotlinux/asdf-lazydocker.git
asdf list all lazydocker
asdf install lazydocker latest
asdf global lazydocker latest
echo "alias lzd='lazydocker'" >> ~/.zshrc

Após instalar no terminal rode o comando lazydocker e ele ficará assim:

Para saber mais sobre os comandos do lazydocker, clique aqui

Melhor visualização do git log

Esse é um alias de uma visualização de git log, para o git, com ela será possível se orientar de maneira mais fácil, clique aqui, cole o comando da 1 opção no linux e quando você digitar git lg a sua visualização de commits vai ficar mais limpa e direta.

Definição automática de remote push git

O seguinte comando faz uma magica para setar automaticamente o caminho certo do seu push no git, é uma mão na roda, um oferecimento do Andre

git config --global push.default current
git config --global push.autoSetupRemote true

Definição automática da versão pelo nvm

O @alvarofg conseguiu um script que ativa a versão automatica do node a partir de um nvm assim que se entra em um projeto

# place this after nvm initialization!
autoload -U add-zsh-hook
load-nvmrc() {
  local node_version="$(nvm version)"
  local nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$node_version" ]; then
      nvm use
    fi
  elif [ "$node_version" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}
add-zsh-hook chpwd load-nvmrc
load-nvmrc

E essa foram algumas das dicas e configurações para seu sistema linux, espero que tenha sido útil, bom código e não se esqueça de seguir nossas redes sociais.

Instalando de maneira rápida e eficiente suas ferramentas no WSL. Pt-3

Paulo Victor — Wed, 08 May 2024 13:30:00 +0000

Opa meu chegado, pronto para a ultima parte desses serie?
Spawnou do nada aqui e não sabe do que se trata ? Clica aqui e vai para o 1 guia dessa serie incrível

Agora vamos configurar algumas das ferramentas mais utilizadas pela minha pessoa, caso não se interesse por alguma ignore e continue o tutorial

NVM

Node version manager é hoje a melhor e mais rápida opção para se instalar o node na sua maquina

Rode o seguinte comando no seu terminal para

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

Após rodar o comando de instalação e a mesma tiver acabado, rode o comando reset para aplicar as novas mudanças no seu terminal e conseguir usar o nvm corretamente

Instale a versão lst mais recente

Vamos rodar um comando no terminal para poder instalar a versão mais recente do node LTS

nvm install --lts

Caso queira saber mais sobre o nvm e seus comando, clique aqui

PNPM

O node por padrão vem com o npm como seu gerenciador de pacotesm, mas o pnpm veio para ser mais rápido e otimizado que o npm.

Instalar mais recente

Rodamos o seguinte comando:

npm i -g pnpm

Instalar uma versão especifica

Informe a versão base especifica:

npm i -g pnpm@8

Alias Pn

Esse é um alias que pode ser inserido no .zshrc para 'facilitar' o seu uso.

alias pn=pnpm

Rode o comando reset e já pode usar o pnpm

Caso queira saber mais clique aqui

CLI GITHUB

Uma grande parte das pessoas usam o github como local para armazenas seus códigos, sejam no trabalho ou estudo, se você é estudante e não coloca seus codigos no github, é interessante que tu bote.
A cli do github foi criada para conseguirmos fazer o que fazemos na web com alguns comando no terminal, como criar um repositório, clonar a branch de um PR e assim por diante

Instalar o CLI

Para instalar rode o seguinte comando no terminal:

(type -p wget >/dev/null || (sudo apt update && sudo apt-get install wget -y)) \
&& sudo mkdir -p -m 755 /etc/apt/keyrings \
&& wget -qO- https://cli.github.com/packages/githubcli-archive-keyring.gpg | sudo tee /etc/apt/keyrings/githubcli-archive-keyring.gpg > /dev/null \
&& sudo chmod go+r /etc/apt/keyrings/githubcli-archive-keyring.gpg \
&& echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/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 -y

Logar no GitHub

É necessário logar com usa conta do github, necesse processo de login, o github cli nos ajuda cadastrando uma chave ssh, que ja vai ficar integrada no nosso wsl, para começar o processo rode o comando a seguir no terminal:

gh auth login

Na segunda etapa da configuração é importante que você selecione a opção SSH, pois ela é a responsavel por conseguimos cadastrar uma chave ssh de maneira facilitada

Na quarta etapa de configuração você pode escolher ter uma senha para sua chave SSH ou não, eu particularmente recomendo não ter, pois toda vez que voce realizar um commit ela vai pedir confirmação:

Por fim basta selecionar o tipo de autenticação que deseja usar para validar sua conta:

Caso seu google do linux abra pode se logar por ele e inserir o código que foi exibido no terminal, ao final da autorização feche o navegador e ele validará normalmente

Finalizando essa etapa, recomendo fortemente que defina seu nome e email(de preferencia o mesmo do github) nas configuraçoes do git:

git config --global user.name "Seu Nome"

git config --global user.email "seuemail@exemplo.com"

Caso você use o vscode como seu editor de código principal, recomendo fortemente definir ele como seu editor padrão do git:

git config --global core.editor "code --wait"

Manual | GitHub CLI

Complete command

Se você quiser ter uma lista facilitada dos comandos da github cli, rode o comando sudo su para entrar no super terminal do linux e digite o seguinte comando:

gh completion -s zsh > /usr/local/share/zsh/site-functions/_gh

Rode o comando exit para sair desse terminal, agora vá até o nosso arquivo de configuração do bash(.zshrc) e insira o comando a seguir nele:

autoload -U compinit
compinit -i

No final ele vai ficar assim no .zshrc:

Resete o seu terminal com o comando previamente configurado ou reinicie o terminal e digite gh, ela vai aparecer assim:

Docker

Essa é uma das principais ferramentas para o gerenciamento de container no mercado.

Instalação

Os passos que iremos fazer será para a configuração do docker em um ambiente ubuntu, caso queira fazer em outro SOLinux de sua preferência acesse aqui.

Limpar de package

Esse comando é necessário para remover algum package que vai conflitar com a instalação do seu docker cli

for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done

Definição do repo do docker

Algumas intalações do linux são feitas com base em suas versões encontradas nos repositórios de cada projeto, agora iremos configurar o do docker:

# Add Docker's official GPG key:
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Add the repository to Apt sources:
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update

Instalar ultima versão

sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

Instalar versão especifica

Aqui você vai precisar listar as versões disponiveis

# List the available versions:
apt-cache madison docker-ce | awk '{ print $3 }'

Depois de escolher uma versão, copie o nome dela e jogue na variavel e rode o comando

# Variavel
VERSION_STRING=5:24.0.0-1~ubuntu.22.04~jammy

# Comando
sudo apt-get install docker-ce=$VERSION_STRING docker-ce-cli=$VERSION_STRING containerd.io docker-buildx-plugin docker-compose-plugin

Verificando

Para verificar se a instalação foi um sucesso rode o comando sudo docker run hello-world, seu terminal vai ficar assim:

Eu recomendo fortemente que você rode o comando docker run -it ubuntu bash, para tentar usar o terminal dentro de uma imagem ubuntu, se surgir algum erro como esse:

Rode sudo usermod -aG docker $USER no terminal linux e reinicie o wsl pelo powershell admin com o comando wsl --shutdown e tente rodar novamente o comando do docker.

Em alguns casos é preciso ficar ativando o docker toda vez que entrar no wsl, não necessito fazer isso, mas caso o seu linux exiba:

Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?

Você precisará rodar sudo service docker start toda vez que for usar o mesmo

É MUITO IMPORTANTE TOMAR CUIDADO PARA NÃO DEIXAR MUITOS CONTAINERS ATIVOS NO SEU PC

ASDF

Asdf é um gerenciador de versões de linguagens direto na sua cli, você consegue instalar go, ruby e node com ele.

Instalação

git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.14.0

Após rodar esse comando, adicione a seguinte linha de codigo no .zshrc

. "$HOME/.asdf/asdf.sh"

No deve ficar assim no seu .zshrc:

Caso queira saber mais sobre o asdf clique aqui

Go

Golang, linguagem criada pelo Google em 2009, destaca-se por sua simplicidade, velocidade, confiabilidade e suporte à concorrência. Ideal para diversos tipos de aplicações, desde servidores web até sistemas embarcados. Curva de aprendizado e menor quantidade de bibliotecas são pontos a serem considerados. Comunidade ativa e diversos recursos facilitam o aprendizado.

Instalação

Pra instalar o GO vamos usar o asdf previamente instalado

asdf plugin-add golang
asdf install golang 1.21.5
asdf global golang 1.21.5
asdf shell golang 1.21.5

Pra ver se está tudo ok e rode um go version se o retorno for parecido com o da imagem está tudo ok

Parabêns

Agora você tem um WSL, configurado e pronto para contibuir com a comunidade opensource ou fazer seus projetos pessoais, saiba que a jornada no linux é cheia de altos e baixo, qualquer duvida pergunte para alguem em um forum/comunidade que participa e com certeza alguem vai te ajudar, caso queira adaptar esse guia para seu caso especifico é só clonar ele com o comando `` e ser feliz.

Muito obrigado por ficar até aqui, não deixe de ver a sessão abaixo.

Me siga e siga a devhatt nas redes sociais, fique alerta para mais conteúdos, quem sabe não tem algum extra 🤠

Melhorando e configurando seu novo Shell linux. Pt-2

Paulo Victor — Thu, 02 May 2024 20:30:00 +0000

E ai meu patrão, bom saber que você se interessa em configurar ainda mais o seu ambiente de desenvolvimento, essa é o guia 2 da nossa configuração completa de ambiente de desenvolvimento no WSL, caso vc tenha vindo direto para esse artigo e não sabe o que é WSL ou como configurar o seu, clica aqui e vai ver o 1 artigo.

O que é um Shell?

O Shell é uma camada que faz a intermediação de comandos e/ou serviços entre o sistema operacional e o usuário.

O Ubuntu por padrão vem com o Shell base mais famoso e usado pelas distro linux ao redor do mundo o Bash, mas nesse guia vamos ensinar a você instalar o ZSH.

Caso queira saber mais sobre a escolha do ZSH ao inves do Bash e até aprender mais sobre Shell voce pode conferir os links a baixo:

Zsh X Bash

O que é um Shell?

Vamos instalar o zsh com o seguinte comando:

sudo apt install zsh

Agora vamos fechar o terminal e abrir novamente e provavelmente paraecerá a seguinte tela para você:

Se por algum acaso não aparecer, sem problemas, vamos resolver isso no prox passo

Oh My ZSH

Agora vamos intalar um dos grandes motivos de usar zsh, oh my zsh é plugin que facilita muito a nossa vida com possibilidades de autocomplete, lista de comandos e personalização para deixar o terminal do seu jeito, rode o comando abaixo e ele vai baixar o OhMyZsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Apos inserir o comando vai aparecer a seguinte tela para você:

É só apertar a tecla Y para definir o zsh como shell padrão e seu terminal deverá ficar assim:

Plugins para o Oh My ZSH

Com o shell configurado poderemos adicionar plugins para facilitar e auxiliar no nosso dia a dia de desenvolvimento.

Execute o seguinte comando no terminal para baixar os plugins na sua maquina

Caso queira mais pugins, acesse esse link e instale o de sua preferência

git clone https://github.com/zsh-users/zsh-autosuggestions.git $ZSH_CUSTOM/plugins/zsh-autosuggestions && git clone https://github.com/zsh-users/zsh-syntax-highlighting.git $ZSH_CUSTOM/plugins/zsh-syntax-highlighting && git clone https://github.com/zdharma-continuum/fast-syntax-highlighting.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/plugins/fast-syntax-highlighting && git clone --depth 1 -- https://github.com/marlonrichert/zsh-autocomplete.git $ZSH_CUSTOM/plugins/zsh-autocomplete

Agora precisamos adicionar no seu .zshrc os plugins, no linux podemos abrir qualquer arquivo com editores que temos na nossa maquina, por padrão o Ubuntu vem com o nano, mas podemos usar o VsCode(Se estiver instalado).

Todas as suas configuraçoes de shell vão ficar centralizadas no arquivo .zshrc que fica localizado na raiz do seu linux, por padrão você sempre inicia na raiz do seu linux, mas caso esteja dentro de uma pasta e queira voltar rápidamente ou só garantir que está na raiz do linux insira o comando cd no seu terminal e aperte a tecla Enter, se o seu terminal estiver como a imagem abaixo, vc está na raiz:

A partir dela vamos inserir o seguinte comando:

nano ~/.zshrc

# caso tenha o vsCode instalado no seu windows use: 
code .zshrc

O seu terminal deve ficar assim agora:

Seja bem vindo ao nano um editor de texto padrão do linux, não é segredo como usar ele, apenas olhe para a parte inferior no terminal e verá os comando do nano:

No nano a o caractere ^ representa a tecla Ctrl

Digite Ctrl + W e digite plugin, você deve se atentar a seguinte parte do arquivo:

Subistitua onde tem plugins=(git) pelo código abaixo:

plugins=(git zsh-autosuggestions zsh-syntax-highlighting fast-syntax-highlighting zsh-autocomplete)

Vai ficar da seguinte maneira:

É recomendado reiniciar o terminal toda vez que você altera esse arqivo ou instala alguma coisa importante no seu linux, usando o seguinte comando:

source /home/seuUser/.zshrc

Se você quiser definir um alias com o nome reset é só inserir no arquivo .zshrc o seguinte trecho alias reset="source /home/seuUser/.zshrc", salvar o arquivo e reiniciar o terminal.

E pronto, agora você tem um shell incrível e potente configurado para te auxiliar e dar mais produtividade quando estiver usando o WSL.

Muito obrigado por ler até aqui, na nossa próxima parte iremos configurar as ferramentas de desenvolvimento git, docker, go, node para você conseguir botar a mão na massa e fazer altos projetinhos.

Te aguardo na próxima postagem 🤠

Instalação e configuração inicial do seu WSL. Pt-1

Paulo Victor — Mon, 29 Apr 2024 20:30:00 +0000

Opa meu consagrado, essa é a 1 postagem de 3 onde vamos abordar a configuração completa do seu ambiente de desenvolvimento, esse guia tem o foco em desenvolvedores que utilizam o Windows como sistema de desenvolvimento, vamos iniciar com a instalação do seu WSL:

O que é o WSL ?

De maneira mais genérica e sucinta WSL é um subsistema linux no seu pc windows. Isso significa que vamos instalar um linux que vai rodar em conjunto com o windows, permitindo que você desenvolva sem abrir mão do seu sistema principal.

Preparação

Para começar vamos garantir que você está no ambiente certo para usar todo poder do wsl

Você precisará estar no Windows 10 Build 19044+ ou Windows 11

Para ver qual é sua versão de build do windows, acesse:
Configurações -> Sistema -> Sobre > Especificações do Windows

Driver instalado para vGPU
Ative a virtualização no seu processador na sua bios

Caso queira saber se sua virtualização está ativada sem ir na bios do seu pc:
Aperte as teclas CTRL + ALT + DEL, escolha a opção gerenciador de tarefas, clique na guia Desempenho, clique em CPU e procure na parte inferior o status Virtualização, se ele estiver habilitado avance no guia, se não estiver procure como ativar na sua bios
Pesquise por 'Ativar ou desativar recurso do windows' como mostra a imagem abaixo
PT-BR
EN
Acesse essa opção e ative os seguintes recursos
PT-BR & EN
PT-BR
EN
PT-BR
EN

Instalação

Agora estamos prontos para intalar o wsl, abra o seu powershell em modo ADMIN e digite o seguinte comando:

wsl --install

REINICIE O PC DEPOIS DESSA INSTALAÇÃO

Defina suas credênciais

Inicie o seu Ubuntu:

Ele vai pedir para você definir as suas credenciais:

Insira seu nome de usuario e uma senha simples e rápida, você vai usar ela para executar comandos recorrentes, então não pode ser muito complexa e grande

ATENÇÃOOO: A SENHA NÃO APARECE A MEDIDA QUE VOCÊ DIGITA, essa é uma medida de segurança que o ubuntu tem, fique atento na hora de digitar a sua senha.

Após definir as suas credenciais você vai estar em uma tela parecida com essa:

Atualize suas dependências

A partir de agora você está dentro do seu wsl, a primeira coisa que devemos fazer ao entrar nesse sistema é rodar os seguintes comandos:

sudo apt update && sudo apt upgrade

Esses comandos vão atualizar a sua maquina e deixar ela pronta para uso, se lembra daquela senha que definimos na sessão acima? É ela que vamos usar para confirmar os comandos com o inicio sudo.

Caso queira se aprofundar mais sobre a instalação inicial do linux acesse o link abaixo:

Instalar o WSL | Microsoft Learn

Conferindo tudo

Agora vamos conferir se tudo está certo o WSL 2 permite que os aplicativos de GUI do Linux pareçam nativos e naturais para uso no Windows fazendo com que possamos:

Iniciar aplicativos Linux no menu Iniciar do Windows
Fixar aplicativos Linux na barra de tarefas do Windows
Usar alt-tab para alternar entre aplicativos Linux e Windows
Recortar + Colar entre aplicativos Windows e Linux

Por isso, vamos instalar os aplicativos X11 rodando o seguinte comando no terminal:

sudo apt install x11-apps -y

Após completa a instalação, reinicie o seu terminal e digite xeyes se o resultado for igual ao seguinte:

Parabéns, o seu WSL está devidamente configurado.

Extra

Se você vai usar o Electron pelo WSL é altamente recomendado que você instale alguma versão do Chrome no seu WSL, para fazer isso, você pode usar o seguintes comandos:

# Primeiro vá até a pasta temp do seu linux:
cd /tmp 

# Quando estiver na temp baixe o instalador do chrome:
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb 

# Assim que acabar o passo anterior instale o mesmo:
sudo apt install --fix-missing ./google-chrome-stable_current_amd64.deb

Quando acabar a instalação digite cd para voltar ao seu diretório raiz e por fim tente executar o comando google-chrome, se o resultado for parecido com esse:

Parabéns o seu linux está configurado corretamente 🫡

Essa foi a 1 parte do nosso guia não se esqueça de ver as próximas duas partes.

Muito obrigado por ler até aqui 🤠, não se esqueça de seguir a gente nas redes sociais:

Unidades CSS — Um Guia Completo

Alecell — Mon, 11 Mar 2024 15:06:41 +0000

Vejo com muita frequência o pessoal não saber quais unidades CSS usar e em quais situações. Esse é um assunto quase abstrato pois não é claro cada caso meticulosamente explicado de quando usar cada unidade.

Sou frontend a um tempo e ao longo dos anos construí um padrão que funciona pra mim e que aplico em todo projeto que trabalho hoje. Vale reforçar que essa é a minha visão sobre o assunto, mas não é a única, existem vários meios de fazer um bom site.
Aqui vou falar de quase todas as unidades, seus usos e peculiaridades.

Unidades abordadas

Vou usar o w3schools como referencia para as unidades, mas antes vamos separar as unidades em 2 categorias:
absolutas com cm, mm, in, px, pt e pc;
relativas com em, rem, ex, ch e %;

Absolutas

Unidades absolutas são independentes de qualquer outra coisa, além da definição da própria unidade. Valendo apenas lembrar que algumas unidades aqui podem variar dependendo da precisão do seu hardware.

Características

Prós:

Criar elementos puramente visuais
Criar experiencias personalizadas para mídias especificas

Contras:

CSS não é escalável
Responsividade mais verbosa
Páginas não são dinâmicas, mas sim adaptativas

px

Com certeza a unidade mais utilizada na web, não que seja a melhor opção, mas é com certeza a mais fácil de se aplicar em telas no geral.

px é uma unidade péssima pra trabalhar com responsividade de containers, exigindo usar muito mais media-queries do que de fato seria necessário se usasse uma unidade mais adequada.

Até pode usar px se responsividade de containers não for algo necessário na sua aplicação, porém é muito raro criar algo específico por dispositivo, logo é bem pouco comum esse ser o caso.

Use px quando trabalhar com

Detalhes visuais como border-radius, border, box-shadow e etc
Tamanhos (width/height) de elementos puramente visuais não-relativos. Esse tipo de elemento segue o mesmo princípio dos detalhes visuais, eles dependem apenas de si mesmos e não variam em tamanho de acordo com nada, mudam pouco entre resoluções e são muito usados quando trabalhamos com layouts que possuem detalhes nas páginas apenas para finalidade de preenchimento, veja a baixo

Não use px quando trabalhar com

media-query , é basicamente a pior unidade pra se usar, traduzi esse artigo sobre esse assunto
Containers responsivos pois usar pixels nesses containeres acaba exigindo muito mais media-querydo que de fato você iria precisar. Isso também deixa mais difícil de dar manutenção pois as coisas não fluem, são todas estáticas, exigindo mudanças manuais em cada nível dos elementos. Usar px nesse caso também torna seu site adaptativo e não responsivo o que não é um grande problema, mas pela minha vivencia acabo não concordando com a abordagem.
Qualquer propriedade que afete fonte como font-size, letter-spacing, line-height e etc por razões de acessibilidade e respeito com o usuário. Quando você usa fontes em px você acaba ignorando completamente as preferencias de tamanho de fonte do usuário e força ele a ver as coisas da forma que você fixou, isso é péssimo pois penaliza pessoas com problemas ou até mesmo deficiências visuais. Para fontes prefiro rem, mas vamos discutir ela melhor na sessão de unidades relativas.
Espaçamentos como padding e margin pois esses espaçamentos vão variar de acordo com outros elementos relativos na sua página, px nesse caso seria um elemento fixo num mar de relatividade o que acabaria variando muito a experiencia do site com variações principalmente de fonte, por isso não devemos usar px nesse caso, a unidade correta vamos abordar na sessão de unidades relativas.

cm, mm, in

Essas unidades não são tão usadas por serem muito mais úteis em impressão do que na tela de fato, mas é importante falarmos sobre elas.

Como já dito acima são unidades que não devem ser usadas para web, mas sim para gerar documentos impressos, quando for imprimir a tela em questão ou quando na impressão formos usar elementos estáticos na tela.

Antigamente essas unidades eram mais usadas, na época inicial do CSS, para criar documentos impressos, nessa época era MUITO mais frequente.

Nota: A pesar de que faz sim sentido usar essas unidades para impressão e eu ainda vejo valor nelas, hoje em dia não é algo tão usual assim e você poderia usar px normalmente.

Use cm, mm e in quando trabalhar com

Elementos puramente visuais em impressão de papel por serem unidades físicas que vão ser traduzidas para coisas igualmente físicas.

Não use cm, mm e in quando trabalhar com

Telas digitais, munitores ou qualquer coisa que for ser vista no âmbito digital.
Fontes de impressão em papel, a pesar de que sim, essas são unidades boas para impressão física, existem unidades melhores pra esse fim que vamos discutir no próximo tópico.
qualquer outro caso que não sejam os citados no tópico “use”

pt e pc

Quando falamos de unidades em impressões de texto precisamos falar, basicamente, a língua da impressora e essa língua é pt e pc.

Essas unidades nasceram pra trabalhar texto impresso especificamente, ou seja, elas devem ser usadas apenas para esse tipo de trabalho.

Use pt e pc quando trabalhar com

Fontes em impressão em papel pois essas unidades nasceram exatamente para isso e as impressoras em geral não tem problemas de precisão para trabalhar com essas unidades.

Não use pt e pc quando trabalhar com quaisquer outra coisa que não seja impressão no papel.

Relativas

Unidades relativas são aquelas que os desenvolvedores front-end mais vão usar, são unidades dependentes de outros valores como tamanho da tela, configurações do usuário e etc.

Características

Prós:

Responsividade mais manutenível
Se adapta de acordo com a necessidade de usuário
Maior escalabilidade para componentes

Contras:

Exige devs mais experientes

em e rem

As unidades clássicas pra se trabalhar com fontes na web, diferente do pt e pc, em e rem são unidades feitas pra usar fora de impressão e é a unidade que vamos usar majoritariamente para fontes em nossas aplicações e sites.

A pesar disso existem peculiaridades dentro de cada unidade que me força a tratar cada uma em um tópico diferente!

em

Essa unidade deriva seu valor da font size do elemento pai, ou seja, se o pai possui 16px de font-size, 1rem vai ser 16px, 2rem vão ser 32px e assim sucessivamente.

Essa unidade é bastante útil quando não trabalhamos com layouts criados por designers decorrente de que em geral eles não pensam nessa propagação do font-size com em, tornando mais trabalhoso do que útil usar em como unidade nesses casos, para usar fontes na web rem acaba sendo melhor na minha opinião, mas vamos discutir melhor sobre isso no próximo tópico.

Além disso existe uma coisa muito importante sobre o uso de em, essa é com certeza a melhor unidade pra se usar com responsividade, fazendo com que troquemos o @media screen and (max-width: 1200px) por @media screen and (max-width: 120em) (considerando uma font-size base de 10px).

Existem os que defendam que é melhor utilizar os espaçamentos (como padding e margin) com em, mas eu discordo porque isso gera mais problemas do que soluções. Posso até, quando precisar alterar o tamanho de uma fonte, ter que me atentar a reajustar o espaçamento também uma vez que o espaçamento vai mudar com a fonte e isso quase nunca é o desejado.

Use em quando trabalhar com

media-query, traduzi um artigo excelente sobre o assunto e você pode ler ele aqui
Quando for trabalhar com fontes em aplicações web que não tenham sido idealizadas por designers. Na maioria dos casos os designers não fazem os layouts de uma forma que as fontes são relativas umas as outas de forma pensada, fazendo com que qualquer alteração simples de font-size em vire uma necessidade de alteração em cascata ao invés de ser uma simples alteração como deveria ser. Essa unidade é melhor quando não temos um layout pronto ou temos apenas um wireframe base, nesses casos faz sentido.

Não use em quando trabalhar com quaisquer outra situação que não sejam os casos citados a cima.

rem

Talvez a unidade mais negligenciada na minha visão, o rem tem o mesmo poder do em, mas não deriva da fonte pai e sim da fonte base da página, isso faz com que ela seja muito mais consistente pra se trabalhar com fontes na web!

Essa unidade é excelente para fontes por ser uma unidade acessível e não exigir quase nenhum esforço dos devs para fazer sua acessibilidade funcionar, o rem deriva da fonte root e faz com que, se ela for 16px, logo 1rem vai ser 16px e assim sucessivamente tal como o em e é dai que vem sua acessibilidade!

Existem pessoas com dificuldades visuais ou mesmo apenas pessoas com grau mais alto no óculos cujas, em geral, aumentam a fonte do celular ou dão zoom na página pra que seja mais fácil de enxergar.

Esses aumentos na web são traduzidos como o font root que por sua vez vão afetar diretamente tudo que tiver usando rem, fazendo no fim a fonte realmente aumentar e se adaptar a necessidade do usuário sem que ele precise dar zoom na tela apenas porque sua aplicação não suporta a necessidade dele.

Assim, para tudo que for derivado de fontes como font-size, letter-spacing e qualquer outro valor que em geral usaríamos px, use rem.

Mas não só isso, também é interessante usar rem para delimitadores. Um layout nem sempre deve esticar até o infinito e esse valor de limite, que pode ser na prática 1920px, pode ser traduzido em 192rem por exemplo.

Nota: Vale do adendo de que line-height acaba sendo melhor sem nenhuma unidade.

rem também é bastante útil pra criar espaçamentos de padding e margin pela sua consistência e fluidez com a fonte root, sendo essa na minha visão a melhor unidade pra isso também.

Nota: Prefiro usar rem alterando a fonte do html e do body para font-size: 62.5%; fazendo essa alteração fica mais fácil de trabalhar com rem já que ela é múltipla de 10, e não de 16. Os exemplos dados inclusive foram baseados nesse hack.

Use rem quando trabalhar com

Para todas as propriedades derivadas de fonte na web pela sua consistência de manter o valor da unidade e acessibilidade escalando o valor de acordo com a necessidade do usuário.
Espaçamentos gerais como padding e margin pois eles vão mudar de acordo com a fonte root da página, se adaptando de acordo com a alteração de fonte base o que deixa a página mais consistente em sua fluidez e evita que ela quebre quando usarmos fontes baseadas em rem.
Delimitadores de tamanho de página já que como os espaçamentos e as fontes estão sendo derivadas da root font do usuário é interessante que os delimitadores sejam usados com rem também. Assim o tamanho máximo da página irá fluir de acordo com a root font, permitindo mais espaço para acomodar os demais elementos que cresceram junto com a alteração da root font do site.

Não use rem quando trabalhar com quaisquer outras situações que não sejam as citadas a cima.

Disclaimer

Usamos o rem para espaçamentos de não em pela natureza derivada do root do rem. O problema do em é que ele varia de acordo com a fonte do pai e isso gera side-effects geralmente indesejados. Em contra partida o rem deriva do root, o que não atrapalha enquanto trabalhamos, mas altera de acordo com a necessidade do usuário. Então usando rem para espaçamentos ganhamos a fluidez dos espaçamentos variarem com a fonte.

ex e ch

Essas unidades são meio novas e são relativas a caracteres na font-size atual, boas pra fazer coisas derivadas dos tamanhos dos textos.

ex: é a altura do caractere x na font-size atual
ch: é a largura do caractere 0 na font-size atual

Use ex quando trabalhar com

Contêineres com altura relativa a quantidade de linhas, por exemplo quando você quer limitar uma quantidade de linhas visíveis no container sem precisar fazer algum hack

Não use ex quando trabalhar com qualquer outra situação que não seja ao menos semelhante a citada a cima.

Use ch quando trabalhar com

Contêineres com largura relativa a quantidade de caracteres, por exemplo quando você quer limitar o tamanho de um texto no container sem precisar fazer algum hack

Não use ch quando trabalhar com qualquer outra situação que não seja ao menos semelhante a citada a cima.

Para ambos os casos pode ter alguma situação além dessas que o uso faz sentido e eu desconheça, mas via de regra é isso.

%

Essa é a unidade que deveria ser a mais utilizada na esmagadora maioria dos casos, mas infelizmente não é tão utilizada assim…

Essa unidade nos permite evitar um uso excessivo de media-query pela sua característica dinâmica com relação ao tamanho da página. Com isso você pode deixar seus contêineres fluidos e dinâmicos de acordo com a necessidade.

Existem também outros casos que podemos usar % a pesar de que sua principal função é determinar tamanhos de contêineres.

Use % quando trabalhar com

Contêineres que fluem com o tamanho da página/container pai, quase todos os elementos de uma página devem ser construídos com % por ser uma unidade flexível. Essa unidade reduz consideravelmente a quantidade de media-query que sua página precisa sendo mais fácil de dar manutenção e manter no geral.
- Adendo: Porcentagem deve ser usada em todos os contêineres, pai/filho não importa. Existe exceções já abordadas neste artigo, mas fora elas, via de regra, o resto TUDO é porcentagem.
Posicionamento relativo pois quando você tem algo em algum posicionamento left/right/bottom/top que varia de acordo com o tamanho do container é interessante usar, por exemplo, um <code></code>right: 3%.
Border Radius para atingir resultados ovalados quanto trabalhar com border-radius.

Não use % quando trabalhar com

Fontes/Textos pois quase nunca você vai querer usar font-size relativa ao container pai, em geral a fonte varia em outra proporção oque faria fontes em porcentagem gerarem mais manutenção do que soluções.

Conclusão

Eu espero que não tenha esquecido nenhum caso de uso ou não-uso de algum unidade, aqui tentei compilar todas as regras que uso no meu processo de desenvolvimento e que veem funcionando pra mim a bastante tempo. Vale lembrar que esse não é o único jeito de usar as unidades, é apenas, o meu jeito de usar elas.

PS: Eu sei que ficou faltando falar de vh, vw, vmin, vmax e etc, mas essas unidades vou deixar para uma parte dois desse artigo pra manter esse aqui mais conciso no objetivo. Na minha visão também não tem tanto que essas unidades façam que as apresentadas aqui não, logo essas unidades seriam mais um adendo no conteúdo do que realmente algo diferente a ser trazido.

Como Configurar o Expo no WSL

Victor Hugo — Mon, 04 Mar 2024 20:30:00 +0000

pré-requisitos:

Windows 11/10, Direitos de administrador no WSL2, dotenv

O Expo é uma ferramenta open source para facilitar a sua vida na hora de criar aplicativos em React Native. É possível usa-lo em qualquer sistema operacional que você quiser: Windows, Linux e MacOs mas e se eu quiser usa-lo no meu WSL (Windows Subsystem of Linux)? Bem... até a data de criação desse artigo isso seria uma tarefa que beiraria o impossível, mas nós da Devhat nos juntamos para te ajudar nessa missão!

observação

Esse artigo será separado em duas partes: a primeira parte ensinará a configurar e conectar o Expo ao seu celular pelo QR code, a segunda parte ensinará a conectar o Expo a um Virtual Device.

1: ABRIR AS PORTAS DE IP DO SEU COMPUTADOR

Dentro deste GIST tem um arquivo Powershell, você precisará baixar ou copiar esse arquivo (garanta que é um arquivo .ps1 e não um arquivo .txt) .
- Caso você precise trocar a porta, edite a variável na 6ª linha, entre parênteses. ```bash

$ports = @(8081, 8082);

- Pegue esse arquivo e jogue ele na Root da pasta C  `C:\`.

![foto mostrando o script powershell na root da pasta C](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mkhbk3bfc9hf43mf41b.png)
- Agora abra o `PowerShell` como administrador (precisa ser como administrador).

![mostrando como abrir o powershell como adminstrador](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/obiejwpxsxwv5ysou2rv.png)

- Agora com o seu `PowerShell` como `administrador` aberto, você irá fazer algumas coisas:
    - feche todas as abas do `WSL` abertas no seu computador e execute o seguinte comando.
```bash


wsl --shutdown

essa mensagem de erro aparecerá caso você pule essa etapa.
Execute o seguinte comando. ```bash

powershell.exe -ExecutionPolicy Bypass -f C:\forward_wsl2_ports.ps1


- se tudo der certo, esse será o resultado no seu `terminal`.

![sucesso executando o script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6z8wklpl8xi3r061s7rx.png)

Se tudo deu certo até aqui significa que você conseguiu configurar o `WSL` para rodar o `Expo`! Agora precisamos configurar o `Expo` para rodar o `WSL`.

## 2. CRIANDO E CONFIGURANDO UM PROJETO EXPO

- Abra o seu terminal com `WSL` e rode o seguinte comando para criar um projeto `Expo`.
```bash


npx create-expo-app

Após criar o projeto você irá criar um script node chamado get_network_local_ip.js na Root do seu projeto.
Dentro desse arquivo,
Nesse script nós usamos duas variáveis de ambiente chamadas: LOCAL_CONNECTION_INTERFACE_NAME e LOCAL_CONNECTION_IPV4_SEARCH.

Nós precisamos dessas duas envs para poder rodar o projeto no WSL, vamos aprender a achar os valores necessários pras essas envs, para isso vamos rodar o seguinte comando

</li>
</ul>

<p>netsh.exe interface ip show address</p>

<p></p>
<div class="highlight"><pre class="highlight plaintext"><code>- Procure pela `Ethernet` que tenha o `DHCP habilitado` como sim, no meu caso é apenas `Ethernet`, mas no seu caso pode ser `Ethernet 1` ou `Ethernet 2` ou `WiFi`, etc. 

![imagem mostrando os dados que precisamos pro tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8aqkv2ttx2hyul8ed7q.png)

- Dessas informações nós queremos o `Ethernet` e o `endereço IP` pro nosso `script` e esses serão os valores das nossas `envs`!
- Agora vamos criar o arquivo de `envs` e preenche-las para o nosso script
- Na Root do seu projeto crie um arquivo chamado `.env.local` e coloque as seguintes `envs` lá:
```bash


LOCAL_CONNECTION_INTERFACE_NAME="Ethernet"
LOCAL_CONNECTION_IPV4_SEARCH="Endere"


</code></pre></div><h3>
  <a name="observa%C3%A7%C3%B5es-importantes" href="#observa%C3%A7%C3%B5es-importantes">
  </a>
  OBSERVAÇÕES IMPORTANTES!!!!!
</h3>

<ul>
<li>Por que a segunda <code>env</code> <code>LOCAL_CONNECTION_IPV4_SEARCH</code> tem como valor <code>Endere</code> e não <code>Endereço IP</code>?

<ul>
<li> Alguns terminais podem ter um erro de <code>utf-8</code> e podem não reconhecer a letra <code>ç</code>, nesse caso ele não vai achar o valor correto na hora de executar o script e irá dar <strong><code>erro</code></strong>! Por isso colocaremos apenas <code>Endere</code> na <code>env</code></li>
</ul>
</li>
<li>Se a linguagem do seu sistema estiver em inglês, o <code>windows</code> retornará o IP em <code>IP Adress</code> em vez de <code>Endereço IP</code>, caso essa seja a sua situação, troque no <code>.env.local</code> <code>Endere</code> por <code>IP Adress</code> senão, você não conseguirá rodar o projeto.</li>
</ul>
<h2>
  <a name="3-comando-para-rodar-o-expo-no-wsl" href="#3-comando-para-rodar-o-expo-no-wsl">
  </a>
  3. COMANDO PARA RODAR O EXPO NO WSL
</h2>

<ul>
<li>
<p>Após essas configurações nós precisaremos apenas criar o comando no <code>package.json</code> para rodar o projeto. Faremos da seguinte forma:</p>

<ul>
<li> Abriremos o arquivo <code>package.json</code> do nosso projeto</li>
<li>Colocaremos o seguinte comando na parte de <code>script</code> 
```bash
</li>
</ul>

<p>"start:wsl": "REACT_NATIVE_PACKAGER_HOSTNAME=$(node get_network_local_ip.js) expo start",</p>
</li>
</ul>

<p></p>
<div class="highlight"><pre class="highlight plaintext"><code>
- Ficando dessa forma

![scripts no package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6kcdpr1dqn1gl05zs7g.png)

- Agora rode o comando que acabamos de criar no terminal com `npm run start:wsl`
- Se tudo der certo, ele irá mostrar um `QR code` na tela, baixe o aplicativo `Expo GO` e escaneie esse `QR code` e pronto, você tá rodando o Expo pelo `WSL`!

Caso você goste dessa opção de rodar o seu projeto no seu celular você pode parar por aqui, mas caso você queira rodar o seu projeto no seu computador e  o melhor de tudo, **SEM PRECISAR DE ANDROID STUDIO PARA ISSO**, [acesse a parte 2 desse artigo e entenda como.](https://dev.to/devhat/como-rodar-um-projeto-expo-por-um-virtual-device-no-wsl-2i16)

Caso esse artigo tenha sido útil para você, de uma olhada na nossa comunidade, a [devhat](https://discord.gg/3gsMAEumEd). É aqui, que encontramos apoio, compartilhamos ideias e nos inspiramos mutuamente. A comunidade DevHatt não é apenas um conjunto de desenvolvedores, mas uma família unida pela paixão pela tecnologia e inovação.

Se você ainda não faz parte desta comunidade, convidamos você a se juntar a nós no [Discord DevHatt](https://discord.gg/3gsMAEumEd).
</code></pre></div>

Como rodar um projeto Expo por um Virtual Device no WSL

Victor Hugo — Mon, 04 Mar 2024 20:30:00 +0000

Para seguir com esse artigo, você precisará concluir o ultimo artigo ensinando a configurar o WSL para o Expo

1. INSTALANDO O WSA

Agora para rodar o Expo em um Virtual Device no WSL (Window Subsystem for Linux) nós precisamos instalar o WSA (Windows Subsystem for Android)
Abra este link e procure por essa tabela no README, feito isso baixe a ultima versão estável do WSA.

Mova o arquivo ZIP que você acabou de baixar para a Root da pasta C:\ igual você fez com o script de PowerShell no artigo 1.
Agora com o ZIP no lugar certo extraia o arquivo com winRAR ou 7z e exclua o arquivo .ZIP, entre na pasta que acabou de ser extraída e veja se tem uma pasta dentro, se houver, recorte ela e cole-a no root do seu C: novamente.
Abra a pasta, clique com o botão direito no Install.ps1 e clique em Executar com o PowerShell.
- Caso você encontre esse erro
- Clique no arquivo Run.bat e execute ele.
Depois que o comando rodar, vão aparecer algumas popups e umas caixas de dialogo clique em continue e deixe os processos carregarem. Não feche inicialmente nenhuma aba, apenas minimize.
Procure a aba que se chame Windows Subsystem for Android com o titulo System
Vá no canto superior esquerdo e selecione advanced settings e ative o developer mode e permita as coisas que precisarem permitir em nível de admin.

2. INSTALANDO O SDK DO ANDROID

Nós precisamos desse sdk para termos acesso as API's Nativas do android pelo javascript, sem isso nós não conseguiremos criar os nossos aplicativos de forma adequada. Além disso precisamos do sdk para prosseguir pro próximo passo
Siga o passo de instalação desse GIST
- Rode os comandos um por um pra evitar qualquer problema.
- Lembre-se de trocar o path de Sdk para sdk pois o padrão do expo é sdk.
  - NÃO rode o ultimo comando do gradle. ## 3. INSTALANDO O ADB
O ADB (Android Debug Bridge) é uma ferramenta de linha de comando que faz parte do SDK do Android. Ele cria a conexão do nosso WSL ao WSA, sem ele nós não conseguiremos fazer essa conexão e por consequência não conseguiremos usar o WSA para rodar o nosso projeto em um Virtual Device.
Acesse esse link e baixe a versão mais recente encontrada nesse repositório.
Pegue o ZIP que você acabou de baixar e coloque na HOME do seu WSL

Depois de jogar o seu ZIP lá, extraia ele pelo terminal usando o seguinte comando:

</li>
</ul>

<p>unzip </p>

<p></p>
<div class="highlight"><pre class="highlight plaintext"><code>- Se tudo der certo, você terá a pasta `platform-tools` na home do seu terminal

![mostrando a pasta na home do terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecvf6gciwr6dthpdqbmw.png)
- Acesse essa pasta e rode o seguinte comando:
```bash


./adb connect &lt;ip-do-wsl&gt;:&lt;porta-do-WSA&gt;


</code></pre></div><h3>
  <a name="como-descobrir-o-ip-do-wsl" href="#como-descobrir-o-ip-do-wsl">
  </a>
  COMO DESCOBRIR O IP DO WSL
</h3>

<ul>
<li>No seu terminal do WSL, execute o mesmo comando:
```bash
</li>
</ul>

<p>netsh.exe interface ip show address</p>

<p></p>
<div class="highlight"><pre class="highlight plaintext"><code>- Procure pelo `vEthernet (WSL)`

![mostrando o resultado do comando no terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32j40187atghmdy2hn12.png)

- No `Endereço IP`terá o IP do WSL que precisamos usar no comando acima.
### COMO DESCOBRIR A PORTA DO WSA
- Abra o WSA (clique na barra de pesquisa do `windows` e escreva `android` nele)

![WSA na barra de pesquisa do windows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ho32xejy91me2tynpss.png)

- Acesse a aba de Advanced settings

![mostrando a aba advanced settings no wsa](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afmclgf4m0o0qecoz1hl.png)

- Esses números depois do `:` são a porta do `WSA`.

![porta do WSA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztnyo4n46u1fsk6vtv2z.png)

- caso você não encontre a porta do `WSA` aqui, você terá que baixar a versão de `pre release` do WSA.
- O padrão é `58526`, mas no seu caso pode mudar, é bom verificar.
- Pronto, agora você sabe  o IP do seu WSL e a porta do WSA, agora você pode rodar  o comando.
- Depois de fazer isso, você pode rodar o projeto `Expo` de novo e aperte  o botão `a` para abrir o projeto com o `WSA`.

![mostrando o expo rodando corretamente com o virtual device](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqq3pyy5uqlgy8lqtnd3.png)

Finalizamos, caso esse artigo tenha sido útil para você, de uma olhada na nossa comunidade, a [devhat](https://discord.gg/3gsMAEumEd). É aqui, que encontramos apoio, compartilhamos ideias e nos inspiramos mutuamente. A comunidade DevHatt não é apenas um conjunto de desenvolvedores, mas uma família unida pela paixão pela tecnologia e inovação.

Se você ainda não faz parte desta comunidade dinâmica, convidamos você a se juntar a nós no [Discord DevHatt](https://discord.gg/3gsMAEumEd).
</code></pre></div>

Vue Primeiras Impressões

Alecell — Tue, 20 Feb 2024 15:56:56 +0000

Tem muitos anos que tenho um amor platônico pelo VueJS, ele tinha tudo que eu sempre quis num framework, possuía em seu ecossistema coisas legais tanto do React quanto do Angular ~~(eca)~~, mas eu nunca tinha pegado pra estudar Vue de fato, tampouco trabalhei em lugares que usavam Vue, então sempre que me perguntavam o que eu achava de Vue eu dizia que era maravilhoso apesar de nunca ter usado 😅

Como parte da minha retomada recente aos estudos em TI resolvi fazer algo em Vue de fato e, somado a isso, eu sempre quis fazer um masonry grid, aí, unindo o útil ao agradável, resolvi fazer um projeto de masonry grid em Vue!

O Projeto

A ideia era ser algo simples em termos de layout e lógica no geral, nada super complexo que demoraria pra fazer, tanto que acabei levando coisa de uma semana pra terminar tudo, o importante era:

Fazer um masonry grid
Aprender o básico de Vue

só isso

E devo dizer que estou bem satisfeito com meu foco! 😋

Inicialmente ia fazer algo que batia na API do LOL (League of Legends) pra pegar minhas últimas partidas e listar elas em masonry, mas rapidamente vi que não sabia bem qual dado usar pra ser o dado que definiria a altura do elemento, quando percebi isso mudei pra uma listagem de contribuição em projetos Open Source do Github!

Muito simples, o usuário coloca um projeto no formato user/repo, por exemplo facebook/react e eu listo os contribuidores desse projeto. A variação na altura dos cards do grid seria de acordo com quanto mais a pessoa contribuiu no projeto, mais contribuição, maior o card!

Masonry Grid

Layout

Eu sempre quis fazer uma masonry grid desde quando em 2020 eu trabalhei numa empresa que precisou fazer um, mas acabei não podendo pegar a tarefa pra deixar ela pra um dos meus juniores ;-;

Pra quem não sabe, um masonry grid é basicamente o layout do Pinterest, um grid onde as células que o compõem não possuem um tamanho fixo, assim fica um, bom, um masonry grid 😄

Fazer o masonry grid foi até que simples, inicialmente fiz pegando como referência esse vídeo do Kevin Powell, mas acabei descobrindo que a forma que ele usa nesse vídeo, mesmo sendo um vídeo de 3 anos atrás, ainda não é bem suportada entre os navegadores, na verdade, de acordo com o Can I Use ele só é suportado pelo Safari Technology Preview (nem sei o que é isso)

Decepcionante!

Felizmente eu conhecia outro método de fazer masonry grid que é usando Multi-column Layout!

Pra quem não conhece, o Multi-column Layout é um formato de layout baseado em colunas (quem diria, não é mesmo 🤣), você já viu muito disso, só talvez não conheça pelo nome, por exemplo uma página de jornal (sim, o de papel) onde cada coluna é a continuação do texto

A questão é que a gente não popula as colunas com texto, mas sim com divs!

E pra fazer isso é bem simples já que esse formato de layout não se importa com qual o conteúdo que está lá dentro, ele apenas aplica o conteúdo dentro do que ele tem de espaço disponível, no fim o código que de fato faz o masonry grid acontecer no meu projeto são essas 3 linhas

.container {
  column-count: auto;
  column-gap: var(--masonry-spacing);
  column-width: 210px;
}

column-count diz que eu não qu

ero limitar a quantidade de colunas, vai quantas couberem.

column-gap diz o espaçamento entre uma coluna e outra, no caso eu usei uma variável pra que o espaçamento entre as colunas e o espaçamento entre os itens fosse o mesmo, pra ficar algo mais uniforme mesmo evitando que eu alterasse em um lugar e tivesse que lembrar de alterar no outro lugar também.

column-width é um valor fixo pois é justamente o tamanho que eu quero pra as colunas, como a quantidade de colunas é definida dinamicamente, isso aqui diz "coloca o tanto de colunas de 210px de largura que couber na tela."

O interessante do Multi-column Layout é que ele já organiza a distribuição dos itens automaticamente pra você, então não preciso me preocupar, coisa que pode até soar estranho porque geralmente coisas que crescem pra baixo podem dar trabalho, mas nesse caso não dá, ele só sai andando e maravilha!

Cards

Como era um masonry grid precisava ainda criar os itens do grid, esses fiz de uma forma bem simples, cada item teria um gradiente de baixo pra cima de tamanho fixo, ou seja, se o container fosse pequeno o gradiente não iria da cor X pra a cor Y, ele iria da cor X até o tamanho do container, podendo não chegar na cor Y, ou seja, teria uma referência visual de barra do quanto alguém contribuiu

Coloquei além do fundo um efeitinho de hover, a foto do contribuidor, o nome e a quantidade de commits, inclusive a quantidade de commits é justamente o que define o tamanho do card!

Acabei decidindo que quem teve menos que 250 contribuições iria ficar cinza porque tinha muita gente com pouca contribuição o que acabava fazendo tudo ficar vermelho o que era ruim visualmente. Pra os que contribuíram pouco também coloquei um mínimo pra a altura pra não quebrar quando fosse bem pouquinha contribuição e foi isso, bem simples a parte dos cards.

Vue

O setup inicial do projeto em Vue foi simples pra iniciar a codar logo, fui no Quick Start do site do Vue copiei o comando pnpm create vue@latest e alegria, respondi se queria TypeScript, Vuex e coisas assim, depois tudo configurado e preparado pra codar!

Na parte de codar em Vue pra mim foi um pouco complicado, eu geralmente antes de fazer um projeto, faço diversas configurações pra deixar o ambiente do jeito que eu gosto de codar, por exemplo, eu prefiro separar os arquivos de html, css e script, também costumo criar arquivos separados pra tipagem e coisas assim, mas me desafiei a fazer as coisas da forma como a comunidade em geral prefere fazer!

Assim eu codei com tudo dentro de um arquivo .vue, interfaces e afins colocava tudo dentro da tag script também e alguns outros detalhes que comento a seguir!

Extensão do Vue para VSCode

Achei inicialmente estranho que tinha uma extensão específica para Vue, mas logo entendi que é pra interpretar os arquivos .vue que não eram entendidos pelo VSCode, inclusive nessa descobri que o ChatGPT também não reconhece o formato .vue, todos os code snippets que ele me ofereceu nas perguntas que fiz eram sem cores, tudo branco no preto.

A extensão do Vue parecia funcionar direitinho, mas teve o seguinte caso que não funcionou muito bem, a colorização das coisas ficou bugada, esse código funciona, mas considera que a const é uma função porque ele não entendeu o fechamento do template string

Fora isso não tive outros problemas, mas fico me perguntando se não existem outros problemas nessa parada além do que eu experienciei.

Sintaxe e Estrutura

A sintaxe do Vue (falando de Vue3) é bastante interessante, o modo como gerar loops e condicionais pra renderização de tags é bem semelhante a como o Angular faz

, tudo dentro das tags, o que facilita a leitura das tags em si, sem .map no meio de tags coisa que eu odeio porque pra mim isso prejudica a leitura.

O modo como o Vue funciona foi estranho pra mim de início, não é uma classe, não é uma função, ele apenas é, existe, você usa métodos pra definir interface de props e outros métodos que à primeira vista não parecem se comunicar diretamente, mas se comunicam, parece até um pouco de bruxaria!

Por exemplo, em Vue3 você não precisa exportar nem fazer nada com as variáveis que você declara e recebem valores. Declarou? Já dá pra usar no <template> do componente

<script setup>
  // declaro a propriedade
  const name = 'Alecell'
</script>

<template>
  <!-- uso a propriedade -->
  <span>{{ name }}</span>
</template>

Isso pra mim é MUITA bruxaria, não é pouca não! 🤣

Inclusive se a variável em questão for um state, que nos scripts é usado como state.value, no template não precisamos colocar o .value

<script setup>
  // declaro a propriedade
  const name = 'Alecell'

  const clearName = function() {
    name.value = ''
  }
</script>

<template>
  <!-- uso a propriedade -->
  <span>{{ name }}</span>
  <button @click="clearName">Set name</button>
</template>

No caso acima, perceba que pra alterar o nome no script usamos name.value, mas no template podemos usar apenas name.

Nomeando Componentes e Seus Arquivos

Aqui teve uma coisa que achei bastante chata do Vue que ele me obriga a chamar um componente Card de Card[Alguma coisa] tipo CardComponent, eu não posso chamar um componente de apenas uma palavra, não entendi o motivo disso, tampouco entendi o porquê isso não poderia ser feito nos internos do Vue evitando que tenhamos que fazer isso nós mesmos, achei estranho e não achei nenhuma resposta.

Isso pode até ser necessário, mas o motivo do porquê não é feito automaticamente, é um mistério pra mim

Vue3 API

O tanto que eu fiquei em dúvida de como fazer as coisas no Vue é sacanagem, demorou, sei que não existe certo nessas coisas, mas senhor da glória, o tanto que eu fiquei em dúvida se eu deveria usar defineProps ou defineComponent é sacanagem! Não teve nenhum jeito claro através da doc sobre isso, aliás, esse problema me mostrou outro problema, que era a diferença entre Vue Composition e Vue Options

Vue Composition API VS Vue Options API

Aparentemente o Vue3 veio ano passado e com isso trazendo a Composition API, uma API que não obriga a gente a usar aquele clássico objetão do Vue

<script>
export default {
  data() {
    return { nome: 'Alecell' }
  },
  methods: {
    return {
      changeName: function(newName) {
        this.name = newName
      }
    }
  }
}
</script>

Mas algo mais comum de se ver quando codamos, lembra até um pouco mais o React nesse caso

<script setup>
  // ref é como o useState do React
  let name = ref('Alecell')

  const changeName = function(newName) {
    name.value = newName
  }
</script>

Ambos os códigos fazem a mesma coisa, mas usam API's diferentes do mesmo framework.

É como escrever um componente é _function components e class components em React, ambos fazem a mesma coisa, só muda o como escreve_

No fim das contas o defineComponent é uma coisa do Options API enquanto o defineProps é do Composition API. Na verdade eles sequer são "concorrentes", eles fazem coisas diferentes.

`<script setup>` VS `defineComponent`

O defineComponent é o setup inicial do componente, mas um jeito mais verboso de escrever, hoje é possível usar <script setup> que remove a necessidade de escrever esse pedaço de código. No fim o modo mais simples de escrever é usando o setup option do script então acabei usando esse formato ao invés do `define

Component` por questão de comodidade, mas meio que dá pra fazer a mesma coisa com os dois modos.

Aí no caso, você usa defineProps quando estiver em um <script setup> e usa defineComponent quando não estiver num <script setup>, esse método ainda tem a opção de você expor as props através dele.

Eu segui escrevendo tudo usando a Composition API por ser o método mais moderno, ainda no futuro pretendo fazer algo usando a Options API.

Criando um composable

Devo dizer que escrever essa seção faz eu me sentir meio burro, mas faz parte, eu apanhei horrores pra escrever meu primeiro Composable, vale dizer aqui que um composable é basicamente um hook, sério, usa a mesma lógica que vai ser sucesso.

Meu projeto precisava bater em uma API e queria criar um composable que batia na API do github, dava um shuffle dos dados e aí retornava os dados pra o componente.

aqui acabou

Mano o tanto que eu sofri pra fazer isso é sacanagem, mas isso aconteceu porque eu fui, como disse antes, burro!

Primeiro eu tentei dar um await no composable o que, não surpreendentemente, não funcionou, um amigo que conhece Vue disse que o que eu fiz funciona no Vuxt, mas não no Vue normal, mas eu achei um tutorial na internet que poderia salvar minha vida: https://www.vuemastery.com/blog/coding-better-composables-5-of-5/

Poxa, eu vi isso, achei bizarro de funcionar, mas o cara não ia fazer um artigo trolando né? Bom, SE EU TIVESSE LIDO ao invés de ficar tentando copiar os snippets teria sido MUITO BOM, mas eu não li, então eu fiquei coisa de uns 3 dias tentando entender porque quando eu chamava o composable no corpo do componente funcionava, mas quando eu colocava na chamada do método de request ele não ia nem ferrando, bom, isso é porque esse método é apenas pra o setup, não é algo pra eventos ou coisas mais dinâmicas.

Foram dias, até que fiz uma pergunta decente pro GPT e ele mostrou como fazer o composable que, pasmem, era igualzinho um hook do React 😶

Bastava eu retornar os estados e o método de requisição pra o componente que ia funcionar, nada de mais, simples, mas eu fiquei viajando nas minhas próprias ideias de que uma request assíncrona sem await seria resolvida em tempo de execução só porque Deus quer.

Finalmente com uma versão decente do composable eu finalmente tinha ele funcionando conforme eu esperava, já tava tudo praticamente pronto, só faltava isso e o input de texto.

Fiz rapidinho um input de texto e um botão e BOOM, tava funcionando certinho como eu queria 🥹

Considerações finais

Achei bem interessante essa experiência de codar em Vue, quero em breve poder criar algo mais robusto com esse framework que, depois de codar nele, eu ainda amo!

Uma coisa que gostei muito nele é que, mesmo ele tendo mais boilerplate, é muito mais simples de fazer as coisas no Vue e você consegue fazer mais codando menos, isso é bem interessante e algo que eu já imaginava com relação a esse framework maravilhoso!

Tudo em termos de setup foi zero estresse, muito decorrente do boilerplate que escolhi, mas também porque o Vue é um framework simples, algo que ele pega do React de forma incrível, permitindo que reutilizemos esse conhecimento, mas em outro framework!

Pra quem quiser conferir o projeto ele ta aqui e o código ta aqui

Valeu pra quem leu e até a próxima!

TIL - Today I Learn 12-11 18-11

Victor Hugo — Fri, 08 Dec 2023 20:30:00 +0000

@piluvitu

ㅤ

.env

Para quem não sabe o seu sistema por padrão tem variáveis de ambiente, que servem para armazenar alguma informação e padronizar o acesso dela pela mesma.
- É possível inserir váriáveis no próprio sistema sem precisar de nem uma abstração, mas ela não são inserções persistentes, por isso a fim de facilitar a definição dessas variáveis, existe o módulo do NPM .env, que foi criado a fim de facilitar isso.
Para usa-lo tudo que é necessário fazer é criar um arquivo .env na raiz do projeto e inserir as variáveis com a seguinte sintaxe:
O modelo é chave - valor, com a chave sendo por padrão MAIUSCULA

OPENIA_KEY = informação sensivel URL = localhost PORT = 3000

Muito se é discutido em upar ou não o .env então devemos explicar o comportamento dele no sistema:
.env.development - serve para um ambiente de desenvolvimento
.env.example - serve como um arquivo de exemplo
.env - é o arquivo padrão, que em teoria seria usado para inserir as variáveis de produção.
Muitos dos provedores onde podemos subir nossas aplicações de maneira facilitada, disponibilizam uma parte para inserirmos as variáveis de ambiente que serão utilizadas na nossa aplicação e por ordem de importância essas variáveis inseridas antes do deploy, são as que vão realmente sobrepor as que ficam no .env.

ㅤ

GIT

Pensando nisso o GitHub fez um artigo que sugere usar uma ferramenta do próprio git ou uma ferramenta open-source
- Falando em git, descobri que tem como renomear arquivos usando o próprio git usando o comando git mv: git mv <nome do arquivo atual> <novo nome do arquivo>

ㅤ

Absolute PATH

Eu nunca tinha parado para pensar que, quando queremos acessar algum arquivo que está fora da pasta atual: 1 - Navegamos para fora da pasta atual 2 - Entramos na pasta do arquivo 3 - Por fim referenciamos o mesmo.
O nome disso é relative PATH e percebemos que priemeiro voltamos para depois seguir em frente, que em um projeto com muitos arquivos gera um PATH longo e nada didático
- Já o absolute PATH é o caminho absoluto, que toma como padrão sempre sair da raiz do projeto e ir para o arquivo desejado, encurtando o PATH e deixando didático
Fica a dúvida de como eles fazem para referenciar o diretório raiz do projeto ?
Existem várias soluções no mercado, mas a microsoft desenvolveu os arquivos jsconfig.json e tsconfig.json que servem para indicar ao editor que ali é a raiz do projeto.

ㅤ

TypeScript

Por fim o typescript, meu primeiro contato sem auxilio de curso tem sido aqui na devhat, no projeto octopost, mal conheço e já considero pacas esse TS, estou fazendo minha introdução pelo curso da origamid.

Estudei conceitos básicos de annotation, inferface e inferência.

// Annotation
const produt0: string = 'Livro'

let prec0: number = 856

No TypeScript podemos tipar, e isso é interessante pois evitamos erros na hora de lidar com os dados

Interface

// Interface
const carr0: {
  marca: string
  portas: number
  motor: number
} = {
  marca: 'audi',
  portas: 2,
  motor: 3.0
}

carro.marca = 245
carro.portas = '2'
carro.motor = ['aspirado', 'alumínio']

Inferência

/* Mesmo sem declarar a tipagem, alguns tipos de variáveis o TS, 
já identifica a tipagem correta */

// Annotation
const produtos = 'Livro'

let preco = 856

preco = 'jajaja'

// Interface
const carro = {
  marca: 'audi',
  portas: 2,
  motor: 3.0
}

carro.marca = 245
carro.portas = '2'
carro.motor = ['aspirado', 'alumínio']

Como pode-se ver no exemplo acima, podemos deixar de declarar a tipagem de alguns dados que o proprio TypeScript já reconhece.

function somar(a: number, b: number){
    return a + b;
}
soma(4, 10)
soma(4, "10")

No exemplo acima é possivel ver um otimo motivo para tipar, pois saberemos o que é para chegar no parâmetro e o que será retornado

FunFact

O vsCode tem intelisense de JS graças ao TS nativamente no editor, caso queira ter um pouco da experiência de usar TS no JS é só adicionar //@ts-check na primeira linha do seu arquivo JS e o editor vai passar a indicar alguns erros que o TS pegaria no seu código

@hxsggsz

ㅤ

Typescript

Essa semana eu estudei bastante Typescript pra tentar resolver um problema. Durante esse estudo eu descobri alguns Utilities Types criados pelo próprio time do Typescript pra facilitar a nossa vida difícil de bugs.

Como esses "Utilities Types" funcionam

Todos eles se beneficiam dos "Generics", algo muito útil na hora de tipagem e que é presente em diversas linguagens estaticamente tipadas.

Partial

O que ele faz? Ele transforma tudo em um objeto opcional. Olha esse exemplo:

interface User {
    id: string
    name: string
    role: "admin" | "user"
}

Agora se a gente taca essa interface no Partial assim:

type OptionalUser = Partial<User>

É como se a gente fizesse isso

interface User {
    id?: string
    name?: string
    role?: "admin" | "user"
}

Required

Existe o oposto do Partial que é o Required, e como o nome já diz, ele transforma todos os tipos que ele receber para necessário fornecer, até os que originalmente são opicionais

type OptionalUser = Partial<User>

type RequiredUser = Required<OptionalUser>

E agora o tipo RequiredUser fica assim

interface User {
    id: string
    name: string
    role: "admin" | "user"
}

Omit

Agora imagina que a gente quer omitir o nome da interface User sem alterar a interface original, essa é a função do Omit.

type UserWithouName = Omit<User, "name">

Pick

E tem o contrario também, imagina que a gente quer pegar apenas a propriedade nome da interface mas sem alterar a interface original, o Pick serve pra isso.

type UserName = Pick<User, "name">

Se você quiser pegar ou excluir mais de uma propriedade, basta usar o pipeline

type UserName = Pick<User, "id" | "name">

// ou 

type UserName = Omit<User, "id" | "name">

É possível combinar todos esses Utilities Types também

type UserNameOptional = Partial<Pick<User, "name">>

ReturnType

Agora imagina que a gente tem esse tipagem de função aqui:

type HandleSomething = () => string

E você precisa ter a tipagem do retorno dessa função, pra isso existe o ReturnType

type ReturnOfHandleSomething = ReturnType<HandleSomething>

Awaited

Imagina que você tem uma tipagem que é uma promise

type AwaitSomething = Promise<string>

E você quer a tipagem que essa promise vai retornar, pra isso serve o Awaited

type Result = Awaited<AwaitSomething>

Agora um caso um pouco mais real, você tipou uma função que retorna uma promise e você quer separar um type diferente o retorno dessa função, simples:

type UserNameOptional = () => Promise<string>;



type Result = Awaited<ReturnType<UserNameOptional>>;

Um exemplo com uma função real

async function awaitSomething() {
  await new Promise(() => setTimeout(() => "demorei mas cheguei", 1000));
}

// string
type Result = Awaited<ReturnType<typeof awaitSomething>>;

TIL - Today I Learn 12-11 18-11

Victor Hugo — Fri, 01 Dec 2023 20:30:00 +0000

@alvarogfn

Make System Under Test

O nome vem de Make System Under Test (fazer sistema sob teste).
Isso é usado em Testes Unitários para criar uma função que retorna uma Instância da Classe ou Componente que está sendo testado.
Vocês devem encontrar exemplos disso com Classes e Testes em Java, eles preparam um setup/Factory para fazer testes unitários.
A função MakeSut recebe parâmetros que podem ser usados para personalizar o comportamento ou a aparência do componente, e dentro dessa função você cria a lógica de renderização do componente no contexto dos testes, reutilizando a função entre vários testes para não precisar reescrever o código de setup em cada teste.

// Uma função que vai retornar a renderização do seu teste toda vez que for chamada
const makeSut = ({
  prop = false, // Aqui você seta algum parametro padrão para todos os testes. É útil quando alguma prop é obrigatória
  ...props
}:  Partial<TProps>)  =>  {
// Aqui fica a lógica de renderização do componente. Pode ser qualquer uma.
  return render(<Component prop={prop} {...props} />);
};

describe('Component',  ()  =>  {
  describe('when',  ()  =>  {
    it('do',  ()  =>  {
      // Você pode modificar os parâmetros para adaptar a renderização do componente
      makeSut({ prop:  false  });
    });
});

@nicolettifps

ThreeJs

Primeiramente essa semana dei uma pegada no ThreeJs. A parte interessante aqui é que ele também está sendo muito usado no Electron Aqui tem um Get Started que eu tava dando uma lida.

Git

Também dei uma avançada no de Git Essa semana dei uma olhada pra alguns Rewriting history que são bem uteis, principalmente pra mim que envio commit errado toda hora.
Changing the Last Commit: git commit --amend O amend pode ser usado para "Editar" seu último commit enviado sem precisar enviar um novo. Ele também serve caso queira apenas trocar o comentário do commit. Mas vale uma atenção especial já que o --amend não apenas "editará" o commit antigo, e sim substituirá o antigo por um novo, trocando assim suas hashs já que o git tem a ideia de ser imutável. git commit --amend -m "an updated commit message" Aqui deixo um dos materiais de referencia ) caso queiram entender mais afundo.

@aalmeida00

variaveis scss

Se importar o arquivo que possui as variáveis scss dessa forma @use '../../styles/global' as *; Voce nao precisa usar o prefixo global.$varname, é só chamar $varname evitando a repetição desnecessária.

@zoldyzdk

Error Boundary

Error boundary é um componente especial, utilizado na captura de erros gerados durante a renderização da sua aplicação.

Com ele você consegue por exemplo renderizar uma UI específica para quando houver um erro na aplicação, também pode capturar esses erros para um sistema de log.

Uma curiosidade sobre o componente é que apesar do React atualmente usar Function Component por padrão ele só pode ser escrito como um Class Component.

Exemplo de um Error Boundary Component:

class ErrorBoundary extends React.Component {  
  constructor(props) {  
    super(props);  
    this.state = { hasError: false };  
  }  
  static getDerivedStateFromError(error) {  
    return { hasError: true };  
  }  
  componentDidCatch(error, info) {  
    logErrorToMyService(error, info.componentStack);  
  }  
  render() {  
    if (this.state.hasError) {  
    return this.props.fallback;  
    }  
    return this.props.children;  
  }  
}

Forem: Devhat

Dicas e configurações para seu sistema linux

Comandos de Terminal

Terminal mais bonito

Alias git

Alias parar execução de um contêiner

Transferir wsl para outro disco

Lazygit

Lazydocker

Melhor visualização do git log

Definição automática de remote push git

Definição automática da versão pelo nvm

Instalando de maneira rápida e eficiente suas ferramentas no WSL. Pt-3

NVM

Instale a versão lst mais recente

PNPM

Instalar mais recente

Instalar uma versão especifica

Alias Pn

CLI GITHUB

Instalar o CLI

Logar no GitHub

Complete command

Docker

Instalação

Limpar de package

Definição do repo do docker

Instalar ultima versão

Instalar versão especifica

Verificando

ASDF

Instalação

Go

Instalação

Parabêns

Melhorando e configurando seu novo Shell linux. Pt-2

O que é um Shell?

Oh My ZSH

Plugins para o Oh My ZSH

Instalação e configuração inicial do seu WSL. Pt-1

O que é o WSL ?

Preparação

Instalação

Defina suas credênciais

Atualize suas dependências

Conferindo tudo

Extra

Unidades CSS — Um Guia Completo

Unidades abordadas

Absolutas

px

cm, mm, in

pt e pc

Relativas

em e rem

em

rem

ex e ch

%

Conclusão

Como Configurar o Expo no WSL

pré-requisitos:

observação

1: ABRIR AS PORTAS DE IP DO SEU COMPUTADOR

Como rodar um projeto Expo por um Virtual Device no WSL

1. INSTALANDO O WSA

2. INSTALANDO O SDK DO ANDROID

Vue Primeiras Impressões

O Projeto

Masonry Grid

Layout

Cards

Vue

Extensão do Vue para VSCode

Sintaxe e Estrutura

Nomeando Componentes e Seus Arquivos

Vue3 API

Vue Composition API VS Vue Options API

<script setup> VS defineComponent

Criando um composable

`<script setup>` VS `defineComponent`