Sintaxe

É notória a diferença da sintaxe entre os dois modelos, já que nas arrow function se torna possível reduzir consideravelmente o número de linhas presentes na declaração função, principalmente se já se trata de uma função simples. Veja exemplos:

Imagine uma função que recebe o nome de um usuário e o imprime no console. Na maneira tradicional, poderíamos declará-la da seguinte maneira:

function sayMyNane(name){  console.log(`My name is ${name}!`);}sayMyNane('Ernane'); // => My name is Ernane.

Já com as arrow functions presentes a partir do ES6, poderíamos fazer da seguinte maneira:

const sayMyName = (name) => {  console.log(`My name is ${name}`);}sayMyNane('Ernane'); // => My name is Ernane.

Lembrando que para o caso das arrow functions, as chaves só são necessárias se uma expressão estiver presente, valendo a mesma regra para os parêntesis, já que são necessários apenas se houver mais de um argumento a ser passado. Dessa forma, poderíamos reduzir ainda mais e escrever o exemplo acima da seguinte maneira:

const sayMyName = name => console.log(`My name is ${name}`; sayMyNane('Ernane'); // => My name is Ernane.

Simples, não é? ✨ dessa forma, podemos ver como uma arrow function pode facilitar a declaração de uma determinada função por causa de sua sintaxe e ainda devolver o mesmo resultado que uma declaração comum.

Utilização da palavra-chave this

Ao contrário da declaração tradicional, as arrow functions não possuem seu próprio this elemento, pois o valor de this dentro de uma arrow function permanece o mesmo dentro de todo o ciclo de vida da função e está sempre vinculado ao valor de this na função pai tradicional mais próxima.

Isso ficou um pouco estranho? 🤔 deixe-me tentar descomplicar com um exemplo:

Retomando o exemplo utilizado no tópico anterior, imagine que possuímos um objeto pessoa que tem seu nome definido como um dos seus atributos e possui uma função que imprime no console o nome dessa determinada pessoa. A depender do tipo de função utilizada, ela não conseguirá acessar corretamente o objeto pai que possui o atributo name procurado e, dessa forma, seu retorno será undefined.

let person = {  name: "Ernane Ferreira",  sayMyName: () => console.log(`My name is ${this.name}.`)};person.sayMyName(); // => My name is .

Já para o caso da função ser declarada no modelo tradicional, o this funcionará como o esperado e obteremos corretamente o atributo buscado. 🤗

let person = {  name: "Ernane Ferreira",  sayMyName: function() {    console.log(`My name is ${this.name}.`);  }};person.sayMyName(); // => My name is Ernane Ferreira.

Acesso aos argumentos

O objeto arguments é uma variável local disponível dentro de todas as funções e é ela que torna possível a referência dos argumentos de uma função dentro da mesma utilizando o objeto arguments. No entanto, as arrow functions não possuem vinculo com o objeto arguments: 

const showArguments = () => console.log(arguments);showArguments(1, 2, 3) // => ReferenceError: arguments is not defined.

No caso de uma função regular, podemos facilmente acessar uma listagem dos argumentos passados como parâmetro no momento da chamada da função:

function showArguments(){   console.log(arguments); }showArguments(1, 2, 3) // => Arguments(3) [1, 2, 3]

Utilizando-se do operador new

O operador new permite a criação da instância de um tipo de objeto definido pelo usuário ou de um dos tipos de objetos internos que tenham uma função construtora. As funções tradicionais são construtíveis e podem ser chamadas através do operador new. Em contrapartida, as arrow functions são chamáveis e não construtíveis, ou seja, essas funções nunca podem ser utilizadas como funções construtoras e nunca poderão ser invocadas com o operador new. 

Portanto, para esse tipo de execução em funções tradicionais, obtemos o seguinte resultado na execução:

function sayMyName(){  console.log(`My name is ${name}`); }new sayMyName('Ernane'); // => Ernane

Já para as arrow functions:

const sayMyName = () => console.log(`My name is ${name}`);new sayMyName('Ernane'); // => Uncaught TypeError: sayMyName is not a constructor

Parâmetros com nomeclatura duplicada

As arrow functions não permitem o nome de parâmetros duplicados, mas as funções tradicionais permitem dependendo da aplicação ou não aplicação do modo estrito (Strict Mode) na implementação do código. Por exemplo, o javascript abaixo é totalmente válido:

function addTwoNumbers(x, x){  console.log(x+x);}addTwoNumbers(1,1); // => 2

Entretanto, o mesmo código com o modo estrito aplicado já não é mais válido:

'use strict';function addTwoNumbers(x, x){  console.log(x+x);} // => Uncaught SyntaxError: Duplicate parameter name not allowed in this context

Na utilização de arrow functions, isso ocorre independentemente da aplicação do modo estrito. Em ambos os casos, a execução é inválida:

const addTwoNumbers = (x, x) => console.log(x+x); // => SyntaxError: Uncaught SyntaxError: Duplicate parameter name not allowed in this context.

Dessa forma, é sempre bom termos bastante atenção quanto a utilização das arrow functions no lugar das funções tradicionais. Apesar de sua sintaxe ser muito agradável, elas possuem alguns pontos, como os citados acima, que devemos tomar cuidado para não deixar passar. 

Em todo caso, é aconselhável um estudo mais aprofundado sobre o assunto. Como sempre, deixarei abaixo alguns links de recomendação para o aprofundamento da temática.

Espero que tenha gostado dessa postagem e que ela tenha te ajudado a encontrar o que você procurava! 💙

Links

• Functions Declarations;
• Arrow functions expressions;
• Javascript Arrow Functions;
• New Features in ES6;

Aqui veremos as principais (e ao meu ver, as melhores) ferramentas disponíveis para validação e criação de tags meta para o seu site. Inclusive, as ferramentas que serão citadas são as que uso sempre que posto algum novo conteúdo e não tenho total certeza de como algumas plataformas irão exibi-los. 🧐

Hey Meta

Uma das coisas mais importantes ao adicionar as tags no cabeçalho do seu site, é focar principalmente nas mais essenciais. Para compartilhamento social, as mais importantes são título e descrição. Muitos serviços que permitem o compartilhamento de links usarão essas tags para criar cartões com o objetivo de apresentar uma prévia do seu conteúdo. Mesmo que tenham tags específicas, como Facebook e Twitter, sempre que não encontrarem suas tags, os serviços irão procurar a descrição e título genéricos para saber o que exibir no compartilhamento.

Uma ferramenta que faz um ótimo trabalho com essas tags é o Hey Meta. Nela, você poderá colocar qualquer url para ser verificada e a mesma mostrará quais tags meta encontrou em sua varredura ou, se possível, tentará adivinhar qual deveria estar presente. Essa ferramenta também fornece uma maneira fácil e prática de adicionar as tags essenciais em seu site a partir de um 'template' que eles geram para você na própria plataforma com base no seu conteúdo.

Depurador do Facebook

A empresa Meta, antes conhecida como Facebook, desenvolveu o protocolo Open Graph e o Facebook se utiliza dele para exibir seus cartões de visualização em links de compartilhamento. Dessa forma, o Open Graph se tornou um padrão de compartilhamento social disponível na web e isso é afirmado em sua página inicial:

Embora existam muitas tecnologias e esquemas diferentes que possam ser combinados, não há uma única tecnologia que forneça informações suficientes para representar ricamente qualquer página da Web no gráfico social. O protocolo Open Graph baseia-se nessas tecnologias existentes e oferece aos desenvolvedores algo para implementar.

(traduzido de O protocolo Open Graph)

Como mencionado anteriormente, o Facebook e outras redes que usam suas próprias tags meta irão retornar às tags base caso não encontrem a sua própria ou as tags Open Graph (OG tags). Entretanto, como também citado, o OG se tornou um padrão de compartilhamento social e, dessa forma, se torna importante implementar ao menos as tags OG primárias em qualquer página que você disponibilizar na internet. As principais são: og:type, og: title, og:description, og:image e og:url.

Como o Facebook é o mais forte nesse ramo, ele também assumiu a responsabilidade de fornecer aos desenvolvedores uma ótima ferramenta para validar as OG tags em qualquer URL. Essa aplicação oferece uma forma de validar e visualizar como as suas páginas irão aparecer quando forem compartilhadas no Facebook.

Validador de cartão do Twitter

Assim como o Facbeook, o Twitter também possui o seu próprio protocolo à parte. As tags para construção do cartão do Twitter sobre seu conteúdo são utilizadas apenas pela rede social, pois a maioria das outras plataformas assumem as tags OG ou as tags nativas como principal foco para a obtenção de dados da url associada.

A maior vantagem e o principal foco em se utilizar dos cartões do Twitter é ter mais controle sobre a manipulação de como o cartão irá representar a sua página na plataforma e, para isso, a rede social possui uma enorme lista de opções para serem incluídas. Devido ao fato de ser algo específico da plataforma, não é um problema se ater as tags meta nativas e OG tags, pois o Twitter continuará utilizando as tags OG e/ou as nativas disponíveis. Aqui você pode verificar quais tags OG presentes em sua página são encontradas e retornadas pelo twitter.

De qualquer forma, as tags do Twitter são ótimas para se utilizar caso você queira mais controle sobre o que irá aparecer no momento do compartilhamento da sua página, pois a plataforma desenvolveu um validador de URLs do twitter para te ajudar a verificar e validar como seu conteúdo irá aparecer para os usuários ao ser compartilhado.

Essas foram as três principais ferramentas que utilizo e acho extremamente interessantes para verificar as informações presentes em minhas tags meta sempre que publico um novo conteúdo, principalmente aqui no blog! 😌 Provavelmente esse post que você está lendo agora foi validado por uma delas ou por todas. Faça um teste e compartilhe! 

Espero que você também possa usar essas ferramentas para ter um controle maior sobre as visualizações do seu conteúdo quando forem compartilhados e que essa postagem tenha te ajudado a encontrar o que você procurava! 💙

Links

• Validador dos cartões do Twitter;
• Documentação do Twitter sobre suas tags;
• Validador do Facebook;
• Plataforma Hey Meta;
• O protocolo Open Graph;
• Metatags que o Google Interpreta.

Decidi hospedar o meu site no Netlify.com, mas as configurações para outra empresa não devem ser tão diferentes. Abaixo mostrarei os passos para realizar as configurações do novo domínio adquirido com o site já hospedado.

Para ficar mais simples de compreender, as etapas foram divididas em duas: a primeira para a captura dos servidores de nomes no netlify e a outra para a aplicação deles no painel do google domains. Boa leitura! 📒

Configuração no Netlify

1.  No console do netlify, acesse seu site e vá para a sessão de Configurações de domínio;
2.  Em seguida, clique em Adicionar domínio personalizado, um provável botão verde 😝;
3. Após isso, provavelmente o seu domínio terá um banner inicializando com a opção 2 sendo Configurar seu domínio personalizado. Quando aparecer, clique nele;
4. Agora você será solicitado a fornecer o domínio que comprou (no meu caso, foi ernane.dev). Se você for o proprietário do domínio, o site solicitará que você valide que realmente é o dono, mas basta clicar em verificar. Um bom ponto a se levar em conta é que o próprio Netlify pode fornecer um domínio à você;
5. Depois de todos esses passos, você será redirecionado para as configurações do seu domínio e verá um aviso solicitando que você configure seu DNS:  Clique em Opções  ➡  Configurar DNS Netlify;
6. Adicione o domínio no campo solicitado - Provavelmente o Netlify solicitará que você verifique novamente seu domínio;
7. Adicione os registros DNS - Os registros DNS para seus sites Netlify serão configurados automaticamente. Você poderá pular essa parte, a menos que tenha um e-mail configurado com seu domínio;
8. Ative o DNS Netlify - O Nelify lhe dará nomes de seus provedores de nome. Mantenha-os abertos ou salve-os e dirija-se ao seu provedor de nome de domínio.

Prontinho! Com o Netlify já está tudo okay. 😄

Domínios do Google

Aqui será um pouco mais simples! 😁

1. No painel de configurações do seu domínio no Google Domains, vá para a seção Domain Name System - DNS.
2. Na seção  NameServers, selecione a opção Usar nameservers personalizados. Para dominios do google, antes de adicionar os meus próprios, tornou-se necessário desabilitar o DNSSEC (Domain Name System Security Extensions), um recurso do (DNS) que autentica respostas à pesquisas de nome de domínio;
3. Em seguida, adicione os servidores de nomes que foram fornecidos pelo Netlify nos passos anteriores aos campos disponíveis.

E fim! seguindo todos os passos, seu domínio já estará configurado. Você verá que os domínios do google poderão recomendar uma espera de aproximadamente 48 horas para que as alterações sejam realizadas, mas comigo foi relativamente rápido. Após cerca de 15 a 30 minutos... Tcharann! 🎉 lá estava o meu novo site com o domínio configurado corretamente.

Espero que tenha gostado dessa postagem e te ajudado, de alguma forma, a encontrar o que você procurava! 💙

Links:

• Documentação do Netlify sobre domínios personalizados (en) ; 
• Documentação do Google Domains sobre registro de novos domínios ;
• Visão geral das segurança de segurança de DNS (DNSSE) .

• Utilizar o comando do próprio git para mostrar a branch atual:

$ git statusOn branch masterYour branch is up to date with 'origin/master'.nothing to commit, working tree clean

Ou ainda:

$ git branch* master

• Podemos instalar algum outro terminal de terceiro (como, por exemplo, o Oh My ZSH), mas isso é conversa para uma outra publicação! 😎
• Outra opção é simplesmente manipular o seu terminal nativo para mostrar seu branch atual sempre que tiver um diretório versionado pelo git. Essa alternativa é o que veremos nesse post!

Alterando as configurações para exibir a branch atual

Normalmente, as configurações do terminal não mostram a branch do diretório atual se estiver versionado pelo git e, por padrão, são mostradas apenas o usuário, host (nome da máquina) e o path (caminho atual). Porém, ele possui algumas configurações que podem ser manipuladas a partir de uma variável em seu arquivo denominado PS1. Para isso, basta abrir o arquivo .bashrcou .bash_profile em seu editor de texto preferido e adicionar o seguinte comando ao final:

export PS1='\u@\h\[\033[01;34m\] \w\[\033[0;32m\]$(__git_ps1 " (%s)")\[\033[01;34m\]$\[\033[00m\] '

Para aplicar as configurações, é necessário recarregar o arquivo. Podemos fazer isso reiniciando o sistema, realizando Log Out ou simplesmente recarregando o arquivo de configurações:

source ~/.bashrc # ou source ~/.bash_profile

Pronto! 🎉 Já temos a nossa branch atual sendo mostrada em diretórios que estejam versionados pelo git. 

Configurações adicionais

Mas por que não ir além? Deixarei abaixo algumas possíveis configurações adicionais de cores, por exemplo, que podem ser realizadas para deixar as informações presentes mais pertinentes possíveis para o seu caso de uso.

Valores:

• \u: Usuário atualmente logado na máquina;
• \h: Nome da máquina (host), previamente cadastrado;
• \H: Nome da máquina completo, previamente cadastrado;
• \w: Diretório de trabalho atual completo;
• \W: Diretório de trabalho atual minificado, apenas o nome base (último segmento);
• $(__git_ps1 "%s"): Branch atual caso esteja em um repositório versionado pelo git, caso contrário senão exibirá nada.

Cores:

• Azul: \[\033[0;34m\];
• Vermelho: \[\033[0;31m\];
• Vermelho Fluorescente: \[\033[1;31m\];
• Verde: \[\033[0;32m\];
• Verde Fluorescente: \[\033[1;32m\];
• Branco Forte: \[\033[1;37m\];
• Cinza: \[\033[0;37m\];
• Padrão: \[\033[0m\].

Prontinho! Essa é a gama de configurações simples e poderosas disponíveis para utilização que poderão facilitar ainda mais a sua auto-localização no processo de desenvolvimento e, de quebra, permitir uma personalização da forma que quiser e achar válida. O meu está assim no momento em que escrevo esse post:

👾 ~/path/path(master)$

Sim, com emoji! 😬

O que foi mostrado aqui é apenas um pouco do que é possível ser feito. Por isso, como de costume, deixarei alguns links que utilizei como referência para escrever e que você poderá utilizar para ir além no assunto.

 Boa leitura!

Espero que tenha gostado dessa postagem e que ela tenha te ajudado a encontrar o que você procurava! 💙

Links:

• Prompt-Expansion - Visual-effects;
• 8 useful and interesting bash prompts;
• Customizando Prompt de Comando Bash e Zsh;
• What does your command prompt look like.

O Git também oferece excelente suporte para ramificação, mesclagem e reescrita do histórico do repositório, o que levou a muitos fluxos de trabalho e ferramentas inovadoras e poderosas. As solicitações pull é uma ferramenta popular que permite que as equipes colaborem em ramificações do Git e revisem com eficiência o código uns dos outros. Atualmente, o Git é o sistema de controle de versão mais utilizado no mundo e é considerado o padrão moderno para desenvolvimento de software.

Certo! mas por onde eu começo? 🤔

É simples: instale o Git na sua máquina! fácil, não é? atualmente o Git está disponível para as mais diversas plataformas e você pode encontrar como realizar esse download/instalação no seu próprio site.

🔗 Git para todas as plataformas 

Configure o Git em sua máquina

Configure informações de usuário para todos os repositórios. 👨‍💻

• Primeiramente, podemos configurar o nome que você quer ligado as suas transações de commit:

$ git config --global user.name "seu nome"

• De maneira análoga, o email:

$ git config --global user.email "endereco-de-email"

Com isso, você já está apto a usar o git e ter suas informações vinculadas a seus commits.

Criando Repositórios

Inicie um novo repositório ou obtenha algum já existente.

• Inicia um novo repositório local com um nome específico:

$ git init "nome-do-projeto"

• Realiza o download de um projeto existente, bem como todo o seu histórico de versão:

$ git clone "url"

Realizando e revisando alterações

Revise edições, verifique o status de arquivos e crie transação de commit 🧐

• Lista todos os arquivos novos, modificados e/ou deletados para serem commitados:

$ git status

• Mostra diferenças nos arquivos que ainda não foram adicionadas:

$ git diff

•  Adiciona o seu estado atual para ser commitado e realiza um snapshot 📸 do arquivo:

$ git add "arquivo"

• Mostra a diferença entre arquivos selecionados e a suas últimas versões já 'commitadas':

$ git diff --staged

• Desmarca o arquivo, mas preserva seu conteúdo atual:

$ git reset "arquivo"

• Salva o último snapshot realizado no arquivo permanentemente no histórico de versão:

$ git commit -m "mensagem descritiva do commit"

Mudanças agrupadas

Nomeie uma série de commits e, em seguida, combine as alterações adequadamente em uma ramificação

• Lista todas as ramificações (branches) locais no repositório atual:

$ git branch

• Cria uma nova ramificação:

$ git branch "nome-da-ramificação"

• Muda para uma ramificação específica e atualiza o diretório de trabalho atual:

$ git checkout "nome-da-ramificação"

• Combina o histórico de uma ramificação específica com a ramificação atual:

$ git merge "nome-de-uma-ramificação"

• Exclui uma ramificação específica:

$ git branch -d "nome-da-ramificação"

Alterações de nomeclatura

Mude e remova os arquivos versionados

• Remove o arquivo do diretório atual de trabalho e seleciona o mesmo para ser removido:

$ git rm "arquivo"

• Remove o arquivo do controle de versão, mas preserva seu estado localmente:

$ git rm --cached "arquivo"

• Muda o nome do arquivo e o seleciona para o commit:

$ git mv "arquivo-com-nome-atual" "arquivo-com-nome-renomeado"

Evite o rastreamento não desejados

Crie exceções para arquivos que você deseja que não sejam rastreados e adicionados ao histórico de versão do seu projeto. Para isso, se torna necessária a criação de um arquivo de texto comum na raiz do projeto de nome específico: .gitignore 🕵️

Este arquivo serve para suprimir o versionamento acidental de arquivos e diretórios correspondentes aos padrões especificados, como por exemplo:

build/.env

Essas especificações não permitem que arquivos presentes no diretório build, ou arquivos que possuem extenção .env presente em todo o projeto, sejam rastreados ou adicionados acidentalmente para o histórico de versão.

Para listar os arquivos ignorados no projeto a partir dos padrões presentes no gitignore, use o comando abaixo:

$ git ls-files --other --ignored --exclude-standard

Salve fragmentos de código

Arquive, restaure e/ou exclua estágios e alterações incompletas presentes no projeto.

• Armazena temporariamente as modificações de todos os arquivos já rastreados:

$ git stash

• Aplica as alterações presentes no último stash:

$ git stash apply

• Restaura os arquivos recentes em stash:

$ git stash pop

• Lista todos os conjuntos de alterações presentes em stash:

$ git stash list

• Descarta os conjuntos de alterações mais recentes em stash:

$ git stash drop

Revise seu histórico de versão

Navegue, valide e inspecione a evolução dos arquivos presentes no projeto.

• Lista todo o histórico de versões para o branch atual:

$ git log

• Lista o histórico de versões para um arquivo, incluindo mudanças em seu nome:

$ git log --follow "arquivo"

• Mostra a diferença de conteúdo entre duas ramificações:

$ git diff "primeira-ramificação"..."segunda-ramificação"

• Retorna mudanças de metadata e conteúdo para o commit especificado:

$ git show "commit"

Reabra seus commits

Desfaça enganos cometidos e crie um histórico substituto 

• Volta o histórico de versão ao estado do commit passado, mas mantendo as alterações no espaço de trabalho:

$ git reset "commit"

• Retorna ao estado do commit passado, mas desfazendo todas as alterações e commits realizados após ele:

$ git reset --hard "commit"

Sincronize e salve as suas alterações

Baixa todo o histórico de um marcador de repositório:

$ git fetch "marcador"

Combina o marcador da ramificação passada na ramificação local:

$ git merge "marcador"/"branch"

Envia todos os commits da ramificação local para a sua versão remota:

$ git push "alias" "branch"

Baixa o histórico presente no repositório remoto e incorpora as mudanças no repositório local:

$ git pull

Ufaa! 😅

Sem dúvidas você está com mais do que o necessário para versionar o seu código de maneira correta e segura. O bom de se utilizar do git é que, como foi citado anteriormente, ele é globalmente utilizado, o que possibilita aplicarmos esse conhecimento adquirido em qualquer plataforma que disfrute de seus serviços, como o Github, GitLab, etc.

Pode ter certeza que existem muitos outros comandos presentes no git que poderão te ajudar no dia a dia, mas essa listagem de comandos acima consegue te dar um ferramental muito forte para começar. Contudo, como de costume, deixo abaixo algumas referências que você poderá utilizar para desbravar esse mundo do versionamento de código.

Espero que tenha gostado dessa postagem e que ela tenha te ajudado de alguma forma a encontrar o que você procurava! 💙

Links

• Documentação do Git em seu site oficial;
• Folha de dicas de Git proporcionado pelo GitHub.

Dessa forma, teria duas opções: continuar como configuração principal o GitHub e me autenticar com usuário e senha a todo momento quando enviar alterações para o projeto no GitLab ou, a melhor forma, configurar minha máquina para que identificasse qual projeto e qual provedor eu queira enviar a alteração. Com isso, poderá surgir a dúvida: como fazer isso? Bom, é isso que veremos agora! 😎

Gere as chaves SSH para cada provedor

Primeiramente, precisamos gerar as nossas SSH Keys. Se você estiver se perguntando "mas o que é isso?", aí vai a explicação: uma chave SSH é uma credencial de acesso que segue protocolo SSH que tem função semelhante à de nomes de usuário e senhas, mas as chaves são usadas principalmente para processos automatizados e para implementar o login único por administradores de sistema e usuários avançados, como nós! 😌

Para realizar essa configuração independente, precisamos de uma para cada provedor que queremos configurar. No meu caso, é o GitHub e o GitLab:

$ ssh-keygen -t rsa -C " user@email.com " -b 4096 -f ~/.ssh/id_rsa_github

$ ssh-keygen -t rsa -C " user@email.com " -b 4096 -f ~/.ssh/id_rsa_gitlab

Isso irá gerar chaves utilizando com base o(s) seu(s) e-mail(s) e as armazenará no diretório .ssh. 

Adicionando as chaves nos respectivos provedores

Já com as chaves em mãos, precisamos copiá-las e adicioná-las nas configurações de SSH de cada provedor. Para visualizar as chaves, você poderá abrir os arquivos gerados anteriormente em seu editor de texto preferido (inclusive, tenho uma publicação sobre um editor ótimo bem aqui) ou se quiser apenas vê-las no próprio terminal, execute os seguintes comandos abaixo:

# Visualizar a chave pública do GitHub $ cat <  ~/.ssh/id_rsa_github.pub

Copie o conteúdo e adicione-o no painel de configurações de chaves SSH da conta no GitHub.

# Visualizar a chave pública do GitLab$ cat <  ~/.ssh/id_rsa_gitlab.pub

Copie o conteúdo e adicione-o no painel de configurações de chaves SSH da conta no GitLab. 

O processo será o mesmo independente do provedor, a única coisa que provavelmente poderá mudar será as configurações de chaves SSH no painel. Após adicionar em cada provedor, precisamos adicionar também no SSH-agent, que é um gerenciador de chaves SSH responsável por armazená-las em uma memória de processo e deixá-las disponíveis para quando precisarmos efetuar login para nos autenticar. Para adicioná-las, podemos executar os seguintes comandos:

# Para o GitHub$ ssh-add ~/.ssh/id_rsa_github# Para o GitLab$ ssh-add ~/.ssh/id_rsa_gitlab

Configurar usabilidade das chaves

Agora que temos as chaves geradas e vinculadas ao nosso gerenciador e aos respectivos provedores remotamente, precisamos apenas informar a nossa máquina qual e quando utilizar corretamente. Primeiramente, crie um arquivo de configuração no diretório principal das chaves:

$ touch ~/.ssh/config

Depois adicione as configurações respectivas aos provedores que você deseja utilizar para que ele identifique qual chave deverá utilizar para se autenticar a partir do host da solicitação:

# Conta do GitHubHost github.com  HostName github.com  PreferredAuthentications publickey  IdentityFile ~/.ssh/id_rsa_github# Conta do GitLabHost gitlab.com  HostName gitlab.com  PreferredAuthentications publickey  IdentityFile ~/.ssh/id_rsa_gitlab

Pronto! 🎉 Se estiver tudo correto, você já poderá utilizar e se conectar com diferentes chaves ssh em provedores diferentes de forma eficiente, sem precisar se autenticar com usuário/e-mail e senha toda vez que precisar realizar alguma alteração em seu servidor/provedor de repositório remoto.

Testando configurações de conexão

Para testar as conexões, você poderá utilizar os seguintes comandos:

# Teste de conexão com o GitHub$ ssh -T git@github.com
yes
# Hi UserName! You've successfully authenticated, 
# but GitHub does not provide shell access.

Agora para o GitLab:

# Teste de conexão com o GitLab$ ssh -T git@gitlab.com
yes
# Welcome to GitLab, @UserName!

Pronto! Tudo testado e configurado. 🚀

Espero que essa postagem tenha te ajudado a encontrar o que você procurava! 💙

Imagine que você terá que realizar uma manutenção, ou simples alteração, digamos, de cor nesse componente. Imagine que são 10, 100, 200.. Bom, terá que realizar essa mudança em cada componente presente em seu projeto, correto? E se ele já estiver aplicado em outros projetos? bom, a alteração deverá ser realizada também. A problemática acho que já deu para entender-mos. Mas, como resolve-la?

Quando se trata de um projeto que se utiliza da mesma tecnologia, no caso que veremos nesse post o Svelte por exemplo, você pode criar um componente e publicá-lo como um pacote no NPM e reutilizá-lo sempre que precisar. Isso é o que veremos aqui! já para os casos onde os projetos não compartilham da mesma tecnologia, esse já é um assunto para um outro momento. Mas, se você gosta de spoilers poderá ler sobre WebComponents.

O que iremos desenvolver?

Recentemente fiz um simples componente svelte - daí a ideia do post - para realizar avaliações. É simplesmente um aninhado de estrelas e nele o usuário poderá mostrar sua satisfação com tal conteúdo que o componente devolverá em sua prop de configuração a informação selecionada. Será ele que iremos desenvolver!

Para isso, é necessário que você possua uma conta no NPM, tenha o NodeJs e NPM instalados em sua máquina e paciência para se aventurar!

Inicializando o projeto

A primeira etapa, como qualquer projeto, é criarmos um diretório para ele. vamos lá!

$ mkdir svelte-star-rating$ svelte-star-rating

Agora, podemos inicializarmos de fato o nosso projeto.

$ npm init -y

Esse comando irá criar um arquivo package.json e preencherá algumas informações automaticamente sobre o pacote que estamos desenvolvendo como nome, autor, descrição, etc.. a flag -y irá realizar um breve preenchimento automático. Caso queira fazer manualmente execute sem ela. Mas, não se preocupe, Sempre poderá alterar o package.json quando necessário.

Instalando dependências necessárias

O passo seguinte é realizarmos a instalação dependências de desenvolvimento necessárias do nosso pacote. Dessa forma, perceba que o package.json irá acrescentar a seção de dev dependencies. Além disso, irei aproveitar para realizar algumas alterações como, nome, autor, keywords, etc.. Fique à vontade para preencher como achar pertinente.

Por fim, o package.json deverá se parecer com o seguinte:

{  "name": "@ernane/svelte-star-rating",  "version": "1.0.0",  "description": "Simple component to assign scores based on stars.",  "homepage": "https://github.com/ErnaneJ/svelte-star-rating",  "bugs": {    "url": "https://github.com/ErnaneJ/svelte-star-rating/issues"  },  "repository": {    "type": "git",    "url": "git+https://github.com/ErnaneJ/svelte-star-rating.git"  },  "keywords": [    "svelte",    "star",    "ratting",    "component",    "sapper"  ],  "author": "ernane <ernane.junior25@gmail.com>",  "license": "MIT",  "devDependencies": {    "rollup": "^2.39.0",    "rollup-plugin-node-resolve": "^5.2.0",    "rollup-plugin-svelte": "^7.1.0",    "svelte": "^3.32.3"  }}

Criação do componente

Como de costume, crio meus arquivos de lógica geralmente em um subdiretório nomeado src, irei seguir esse padrão aqui. Dessa forma, criaremos um arquivo index.js, ele será o ponto de partida do nosso componente.

Basicamente iremos importar o componente principal do nosso pacote e exportá-lo como default no index. Será algo dessa forma:

// src/index.jsimport SvelteStarRating from './SvelteStarRating.svelte';export default SvelteStarRating;

Como consequência teremos agora que criar o arquivo, que será o nosso componente svelte em si, SvelteStarRating.svelte. Para testarmos, vamos apenas colocar uma mensagem de teste no momento!

<!-- src/SvelteStarRating.svelte --><p>Hello World! It's my first package svelte component! ✨ SvelteStarRating ✨</p>

Nesse arquivo teremos toda a lógica e implementação do nosso pacote. Nele adicionaremos estilos, imports necessários, dentre outras coisas.. Vamos em frente, jajá voltaremos nele!

Formalizando estrutura

Agora que temos a estrutura principal do nosso componente, precisamos formalizá-la em nosso package.json. Para isso será necessário realizarmos mais algumas alterações nele.

    // ...    "main": "dist/index.js",    "module": "dist/index.mjs",    "svelte": "src/index.js",    "scripts": {        "build": "rollup -c",        "dev": "rollup -c -w"    },        // ...

Como essa parte é um pouco delicada, vamos ver o que ela está realmente fazendo:

• Em main definimos qual será a saída após a execução do script de compilação,
• em module definimos o mesmo, porém como saída um arquivo de extensão mjs para que o Node diferencie-o dentre os módulos criados com CommonJS e o ES6.
• Em svelte, estamos definindo o caminho do nosso arquivo principal, o index.js que criamos anteriormente.
• E, por fim, scripts serão os comandos utilizados para execução e compilação em desenvolvimento.

Perceba que o subdiretório dist, que especificamos nos dois primeiros comandos, não existe pois será gerado automágicamente ✨.

Após essas pequenas mudanças o nosso package.json ficará da seguinte maneira:

{  "name": "@ernane/svelte-star-rating", "version": "1.0.0",  "description": "Simple component to assign scores based on stars.",  "main": "dist/index.js",  "module": "dist/index.mjs",  "svelte": "src/index.js",  "scripts": {    "build": "rollup -c",    "dev": "rollup -c -w"  },  "homepage": "https://github.com/ErnaneJ/svelte-star-rating",  "bugs": {    "url": "https://github.com/ErnaneJ/svelte-star-rating/issues"  },  "repository": {    "type": "git",    "url": "git+https://github.com/ErnaneJ/svelte-star-rating.git"  },  "keywords": [    "svelte",    "star",    "ratting",    "component",    "sapper"  ],  "author": "ernane <ernane.junior25@gmail.com>",  "license": "MIT",  "devDependencies": {    "rollup": "^2.39.0",    "rollup-plugin-node-resolve": "^5.2.0",    "rollup-plugin-svelte": "^7.1.0",    "svelte": "^3.32.3"  }}

Criando o arquivo rollup.config.js

Bem provavelmente você já tem familiaridade com este arquivo por se tratar do Svelte. Mas basicamente realizamos a configuração básica de compilação do nosso singelo projeto.

import svelte from "rollup-plugin-svelte";import resolve from "rollup-plugin-node-resolve";const pkg = require("./package.json");export default {    input: "src/AtButton.svelte",    output: [        { file: pkg.module, format: "es" },        { file: pkg.main, format: "umd", name: "Name" },    ],    plugins: [svelte(), resolve()],};

Ufa! Pacote configurado com sucesso para utilização. 🥳

Testando componente localmente

Antes de publicarmos o nosso novo componente no NPM, é bom sempre testarmos ele para ver como está realmente e se seu resultado é satisfatório. Para isso, podemos utilizá-lo em nossa maquina mesmo antes de enviarmos para publicação. Para isso, vamos criar, em paralelo, um simples projeto em Svelte. Para esse caso, irei utilizar o próprio svelte-playground.

$ npx degit sveltejs/template svelte-playground

em seguida acessamos o projeto clonado e instalamos duas dependências iniciais.

$ cd svelte-playground$ npm install

Agora, para podermos utilizar o nosso componente como um pacote do npm e aplicarmos nesse projeto podemos executar o seguinte comando no diretório do nosso pacote svelte-star-rating

$ npm link

Com ele obteremos uma resposta semelhante a essa:

npm WARN svelte-star-rating@1.0.0 No repository field.audited 17 packages in 0.711s3 packages are looking for funding  run `npm fund` for detailsfound 0 vulnerabilities

Após isso, agora no projeto de teste svelte-playground podemos executar o mesmo comando, porém agora, passando a diretório do nosso novo pacote em nossa máquina.

$ npm link /path/svelte-star-rating

Dessa forma podemos utilizar o nosso componente como um pacote localmente, e o melhor de tudo, em tempo real!

Utilizando componente localmente

Acesse o projeto de teste que criamos, svelte-playground, e execute o projeto em desenvolvimento utilizando o comando presente em seu package.json

$ npm run dev

Em seguida acesse o navegador na porta sugerida e veja a aplicação em execução. Após isso, podemos agora aplicarmos o nosso componente a esse projeto e assim visualizarmos suas alterações em tempo de execução.

para isso, vamos ate o arquivo src/app.svelte, para realizarmos algumas alterações.

<script>  ...  import StarRating from "@ernane/svelte-star-rating";  ...</script>...<StarRating/>...

E então teremos o nosso componente sendo executado localmente. Fantástico, não!?

Agora é so desenvolvermos da maneira que quisermos o nosso novo componente e ir verificando se as alterações realizadas condiz com o que queremos. Aqui está o status atual do desenvolvimento do meu svelte-star-rating.

Publicando pacote no NPM

Ótimo, já temos o nosso componente funcionando gostaríamos. E agora? bom, agora publicamos ele! A publicação é tão simples quanto um push, olha só..

primeiramente, você deverá estar logado em sua conta do NPM, caso não esteja ou não saiba é so seguir os passos descritos aqui.

Após estar logado, e com certeza de que deseja publicar a primeira versão do seu pacote, é so executar o seguinte comando:

$ npm publish --access public

Pronto! pode acessar o seu perfil na página do NPM que você verá um novo pacote adicionado! 🎉 Simples não?!

Testando meu novo pacote NPM

Isso aqui, sem dúvidas, você já fez centenas de vezes, ou talvez menos 😅.. Acesse as informações do seu pacote que lá dirá como realizar a instalação. Mas seguindo os padrões você poderá realizar com o simples npm install passando o nome, definido no package.json, do seu projeto!

ou seja,

$ npm i @ernane/svelte-star-rating

O uso será o mesmo de antes, importar e utiliza.r Bom, isso você já sabe!

Caso tenha alguma dúvida, aqui está o repositório que utilizei para armazenar o pacote citado aqui no artigo e o link do mesmo já publicado no npm!

Espero que tenham gostado dessa postagem e que ela tenha te ajudado, de alguma forma, a encontrar ou que você procurava! 💙

links

• Documentação oficial do NPM;
• Documentação do Rollup;
• Documentação do Svelte;

Visual Studio ou Visual Studio Code? 🤔

O Visual Studio é uma IDE desenvolvida pela Microsoft, dedicada ao .NET Framework e a linguagens robustas como C, C++, C# e F#. Por ser uma solução completa, é uma ferramenta bem mais pesada do que o Visual Studio Code, que trataremos aqui, e que por sua vez trata de funcionalidades mais simples como a fácil edição de código com suporte a várias linguagens de programação, terminal integrado e controle de versão. Sendo, dessa forma, uma ferramenta mais leve. Mas não se engane, muito poderosa! 💪

Um mundo aberto de funcionalidades

O VS Code é capaz de fazer muitas coisas que nos ajudam a trabalhar melhor. Aprincípio ele é, e pode realmente parecer, uma ferramenta muito simples, mas ele possui uma loja de extensões imensa, e que continua crescendo constantemente.

Ou seja, com essa enorme coleção de extensões, podemos adicionar diversas funcionalidades e personalizações, ao VS Code de forma bem simples e prática. Dessa maneira, ele pode facilmente ser comparado a grandes IDEs pagas. Caso se interesse, facilmente qualquerusuário pode criar uma extensão e publicar na loja. Desse modo, sempre há novas ferramentas que podem ser interessantes para alguém.

Atalhos para aumentar sua produtividade

Como qualquer outra ferramenta, é de crucial importância que seus usuários aprendam a manuseá-la com destreza. Quanto mais você se aperfeiçoar nisso, mais fácil será trabalhar com ela em seu cotidiano. Este poderoso editor, assim como a maioria dos outros, possui atalhos que nos tornam mais ágeis na execução de certas atividades, principalmente as mais repetitivas.

Os atalhos são muitos, mas aqui vamos ver os principais que não podem faltar no seu dia a dia. 🚀

• CTRL+K CTRL+0 ou CTRL+K CTRL+J: Dobrar ou desdobrar todas as funções ou métodos
• CTRL+G: Ir para a linha
• CTRL+P: Ir para o arquivo
• F8: Ir para o próximo erro ou aviso
• F12: Ir para a definição da função ou método
• ALT+F12: Mostrar a definição da função ou método
• CTRL+ALT+UP ou CTRL+ALT+DOWN: Adicione um cursor acima ou abaixo da linha atual
• SHIFT+ALT+I: inserir um cursor no final de cada linha selecionada
• CTRL+F2: Selecionar todas as ocorrências da seleção
• CTRL+SHIFT+.: Ir para navegação via breadcrumbs
• CTRL+ALT+LEFT ou CTRL+ALT+RIGHT: Mover o editor em grupos
• SHIFT+ALT+0: Alternar o layout dos grupos em vertical e horizontal
• ALT+Z: Alternar entre quebra de linha
• CTRL+KM: Change a linguagem do arquivo
• CTRL+B: Mostrar/esconder a barra lateral
• SHIFT+ALT+UP ou SHIFT+ALT+DOWN: Copiar a linha pra cima ou pra baixo
• CTRL+SHIFT+K: Apagar linha selecione
• F2: Renomear simbolo ou variável
• CTRL+KC: Comparar arquivo atual com a área de download+
• CTRL+SHIFT+5: Terminal divisor
• CTRL+K CTRL+S: Mostrar atalhos
• CTRL+TAB: Alternar entre aba
• CTRL+L: Selecionar toda linha
• CTRL+SHIFT+L: Selecionar todas as ocorrências da seleção atual
• CTRL+F2: Selecionar todas as ocorrências da palavra
• CTRL+SHIFT+SPACE: Mostrar definição dos parâmetros
• CTRL+K CTRL+X: Apagar espaços em branco
• CTRL+SHIFT+H: Substituir em todos os arquivos
• SHIFT+ALT+F: Formatar todo o documento
• CTRL+K CTRL+F: Formatar seleção
• CTRL+KV: Abrir preview ao lado (ex. Markdown)
• CTRL+,: Abrir configurações do usuário
• CTRL+KZ: Entrar no modo Zen

Sem dúvida alguma, essa é apenas a ponta do iceberg, pois existem muuuitos outros atalhos disponíveis para usar e melhorar o seu fluxo de trabalho como desenvolvedor. Caso se interesse, deixo aqui abaixo desse post alguns links de onde procurar mais informações!

Espero que tenha gostado dessa postagem e que ela tenha te ajudado, de alguma forma, a encontrar o que você procurava! 💙

Links

• https://code.visualstudio.com/
• https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf
• https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf