DEV Community: Lays Hidani

👾 Games para treinar suas skills front-end

Lays Hidani — Sun, 02 Jan 2022 20:30:44 +0000

*Jogos em inglês.

HTML

Super markup world

Pixel e Pixella vivem no Super Markup World que foi criado pelo grande arquiteto Markup Polo.
Em um lindo dia de sol, quando Pixel e Pixella visitaram a região montanhosa de Divland ...
... o arquiteto malvado Mosiac destruiu todas as montanhas!
Pixella de alguma forma evitou o desastre usando uma tag de hiperlink.
Mas agora Pixel e Pixella estão separados!
Cabe a você, Pixel, encontrar Pixella e salvar Divland.

🕹 Jogar Super Markup World

CSS

CSS Diner (seletores)

É um jogo divertido para aprender e praticar seletores CSS.

🕹 Jogar CSS Diner

Flexbox Froggy (flexbox)

Um jogo onde você ajuda Froggy e seus amigos escrevendo código CSS!

🕹 Jogar Flexbox Froggy

Flexbox Defense

Seu trabalho é impedir que os inimigos que se aproximam ultrapassem suas defesas. Ao contrário de outros jogos de defesa de torre, você deve posicionar suas torres usando CSS!

🕹 Jogar Flexbox Defense

Grid Garden

Bem-vindo ao Grid Garden, onde você escreve código CSS para cultivar seu jardim de cenouras!

🕹 Jogar Grid Garden

HEX Code (RGB)

O mundo precisa da sua habilidade de conhecimento de hex code para evitar uma invasão!

🕹 Jogar Hex Invaders

Javascript

Elevator Saga

Sua tarefa é programar o movimento dos elevadores, escrevendo um programa em JavaScript.

🕹 Jogar Elevator Saga - the elevator programming game

Untrusted —or— the Continuing Adventures of Dr. Eval

O jogo apresenta um ambiente de jogo semelhante ao de um roguelike e uma janela de console com o código JavaScript gerando cada nível. Quando carregado, cada nível é imbatível e a maior parte do JavaScript não pode ser editada. O desafio é abrir um caminho para o próximo nível usando apenas as ferramentas limitadas deixadas abertas para você.

🕹 Jogar Untrusted - a user javascript adventure game

Typescript

js.CheckiO

Desafios em TypeScript e exercícios com soluções para iniciantes e avançados.

🕹 Jogar js.CheckiO

Regex

Regex Crossword é um jogo semelhante ao sudoku ou o quebra-cabeça de palavras cruzadas tradicional, onde você deve adivinhar as letras corretas nas linhas horizontais e verticais de uma grade.

🕹 Jogar Regex Crossword

Web Development

Ao longo dos cantos escuros da web, as portas estão sempre se abrindo para novos desafios que irão testar a coragem até mesmo do desenvolvedor mais robusto. Deixe que esses poços de água forneçam uma breve pausa e uma oportunidade para você e outros heróis se unirem.

🕹 Jogar Dungeons & Developers

Design

Can't Unsee
Veja se suas habilidades de design estão afiadas, escolhendo entre o mais correto

🕹 Jogar Can't Unsee

Vim

VIM Adventures

Aprenda VIM enquanto joga!

🕹 Jogar VIM Adventures

Cover Photo by Boukaih on Unsplash

🆘 Git tips - comandos úteis para sobreviver no dia a dia

Lays Hidani — Fri, 03 Sep 2021 20:38:46 +0000

O versionamento de código ajuda muito nossa vida como desenvolvedores. Porém muitas vezes nos deparamos com algumas situações difíceis com o git no dia a dia...

Eu gosto de ir tomando notas sobre minhas descobertas conforme vou aprendendo e sobrevivendo para relembrar e consultar sempre que necessário.

Separei uma lista de comandos úteis (um pouco além dos mais básicos, e aqueles que geralmente a gente esquece), espero que te ajudem também 😉

Vamos lá...

Substituir comando entre <>

# URL

Verificar qual a URL remota

git remote -v

Editar url remota

git remote set-url origin <https://github.com/USERNAME/REPOSITORY.git>

Stash

📖 Opções de Git stash (ver Atlassian)

O comando git stash é utilizado para armazenar temporariamente as alterações que você fez, para poder trabalhar em outra coisa e depois voltar e reaplicá-las posteriormente.

Fonte da imagem: Atlasian

Stash tracked files

git stash

Stash também dos untracked files

git stash -u

onde -u = --include-untracked

Stash de todos os arquivos, incluindo os ignored files

git stash -a

onde -a = --all

Stash com descrição

É possível adicionar mensagens/descrições aos stashs, assim como fazemos com os commits:

git stash save <"message">

Listar stashs

git stash list

Deletar stash específica

git stash drop stash@{<index>}

Deletar todas stash

git stash clear

Reaplicando alterações que estão em stash

Padrão, último stash

git stash apply

Escolher qual stash (como em um array, utilize o `git stash list` para visualizar a lista de stashs):

git stash pop stash@{<index>}

Visualizar Stash diff (stash show)

git stash show

# ou, para visualização completa (-p = --patch):

git stash show -p

Criar branch a partir de stash

git stash branch <branch-name> stash@{<index>}

# Cherry Pick

O cherry-pick é um comando para 'Pegar' um commit de uma branch através do hash do commit e aplicá-lo em outra.

Ex: commitei acidentalmente em outra branch, e desejo trazer o commit para minha branch certa.

Pick 1 commit

git cherry-pick <hash>

Pick vários commits

git cherry-pick <hash1> <hash2> <hash3>

Pick de um commit até outro commit

git cherry-pick <hash1...hash3>

# Branchs

Listar Branchs

git branch

Listar branchs matching

git branch --list '<termo>*'

exemplo, listar branchs, cujos nomes começam com fix/:

git branch --list 'fix/*'

Renomear branch

Local, e se você está nessa branch

git branch -m <new-name>

Local, e se você NÃO está nessa branch

git branch -m <old-name> <new-name>

Remota, seguir os passos adicionais

git push origin :<old-name> <new-name>

# ou

git push origin --delete <old-name>
git push origin <new-name>

Resetar a branch upstream para o novo nome da branch

git push origin -u <new-name>

Remover tag de uma branch

Remover tag, branch remota

git push origin :refs/tags/<tag-name>

Remover tag, branch local

git tag -d <tag-name>

Mudar para branch anterior [atalho]

git checkout -

# Commits

Alterar (Reescrever) mensagem do último commit

para renomear o commit, caso este seja seu último commit:

git commit -m '<nova mensagem de commit>' --amend

caso já tenha subido este último commit para a branch remota, será necessário fazer um push force pois estaremos sobreescrevendo a história
caso não seja o ultimo commit, será necessário renomear através de rebase interativo ou reset —soft

Refazer o último commit (add arquivos ao último commit)

Refazer o último commit utilizando a mensagem do commit anterior

Considere ter esquecido alguma alteração em um arquivo após ter commitado. Você pode utilizar o amend para commitar de novo utilizando a mesma mensagem do último commit:

# primeiro add o arquivo (git add <arquivos>) e em seguida:

git commit --amend --reuse-message HEAD

Refazer o último commit

# primeiro add o arquivo (git add <arquivos>) e em seguida:

git commit --amend --no-edit

Desfazer commits

com soft: apaga só os commits
com hard: apaga os commits e o código

Desfazer o último commit

mantendo as alterações do último commit

git reset --soft HEAD^

deletando todas as alterações do último commit

git reset --hard HEAD^

Desfazer commits por quantidade (do mais atual para o mais antigo)

Desfaz apenas os commits e mantem as alterações

git reset --soft HEAD~<quantidade de commits>

Desfaz os commits e o código

git reset --hard HEAD~<quantidade de commits>

Desfazer commits até o commit x (com soft ou hard):

Através de um git log --onelinepodemos verificar os commits, e obter a hash de referência.

git reset --soft HEAD~<hash>

o comando acima irá desfazer todos os commits posteriores à hash especificada.

# Git log (lista de commits)

Listar commits resumido

git log --oneline

Listar commits gráfico branch

git log --graph --oneline

Listar commits com referências associadas (branch, tag, etc)

git log --decorate

# ou

git log --oneline --decorate

Listar commits por quantidade

git log -<quantidade>

# ex: git log -5

Listar commits pesquisa → procurar commits com uma mensagem/palavra

git log -S <'string-to-search'>

Listar commits pesquisa → procurar commits com uma mensagem/palavra do código

git log -S '<string-to-search>'

Listar commits pesquisa → procurar commits com uma mensagem/palavra da mensagem de commit

git log --grep='<string-to-search>'

# ex: git log --grep='fix'
# ex: git log --grep='fix' --oneline

Listar commits pesquisa → procurar commits por arquivos

git log -- <file1.extension> <file2.extension> <...n>

# ex: git log -- foo.ts bar.ts

Listar commits por data

Depois de

git log --after='<date>'

# ex: 
# git log --after='2014-7-1'
# git log --after='yesterday'
# git log --after='1 week ago'

Depois de

git log --before='<date>'

# ex: 
# git log --before='2014-7-1'
# git log --before='yesterday'
# git log --before='1 week ago'

Entre datas

git log --since='<date>' --until='<date>'

# ex: git log --since='<JAN 01 2019>' --until='<DEC 25 2019>'

Listar commits por autor

1 autor

git log --author='<name>'

# ex: 
#  git log --author='Lays'

Mais de 1 autor

git log --author='<name1>\|<name2>'

# ex: 
#  git log --author='Lays\|Bruno'

Listar último commit

git log -1

# Push

Push force

Caso a gente reescreva a história de algo que já está commitado na branch remota, como por exemplo um squash, renomear commit etc, será necessário fazer um push force para forçar a atualização remota, já que ela irá recusar a atualização por push normal. Ou seja o push force, sobreescreve tudo o que está na branch remota pelo que está na branch local. Tome cuidado com esse comando, e nunca faça push force das branchs principais.

git push --force

# ou

git push -f

# ou 

git push origin +HEAD

Fazer push sem digitar o nome da branch em que você está (HEAD) [atalho]

git push origin HEAD

🆘 # Reflog - o Salva vidas

Histórico - Listar tudo o que você fez no git

Enquanto o git log exibe apenas os commits, o git reflog exibe todo o histórico, incluindo commits, checkout, merge, rebase etc.

git reflog

a partir da lista/histórico conseguimos reverter algumas alterações indesejadas.

Algumas opções com git reflog

Após executar o git reflog, serão listadas todas as modificações. Procure o hash referente ao ponto que você gostaria de voltar no tempo. Algumas opções para trabalhar com o reflog:

Reverter todas as alterações para o hash específico (deleta todas as alterações feitas):
```
git reset --hard <hash>
```
Reverter somente um arquivo específico para o estado em que estava a partir de um hash:
```
git checkout <hash> -- <filename>
```
Fazer Cherry-pick a partir do hash:
```
git cherry-pick <hash>
```

# Merge tips

sem fast-forward

git merge --no-ff <branch-name>

The --no-ff flag prevents git merge from executing a "fast-forward" if it detects that your current HEAD is an ancestor of the commit you're trying to merge. A fast-forward is when, instead of constructing a merge commit, git just moves your branch pointer to point at the incoming commit.

However, occasionally you want to prevent this behavior from happening, typically because you want to maintain a specific branch topology (e.g. you're merging in a topic branch and you want to ensure it looks that way when reading history). In order to do that, you can pass the --no-ff flag and git merge will always construct a merge instead of fast-forwarding.

_https://newbedev.com/what-is-the-difference-between-git-merge-and-git-merge-no-ff

Fonte da imagem: NewBeDev

# Arquivos

Renomear arquivo local

1ª opção: renomear pelo computador

renomeie normalmente o arquivo pela pasta.
Faça git add do arquivo
Assim ele irá passar para o estado de RENAMED quando você verificar pelo git status
Agora faça o commit do arquivo normalmente com git commit

2ª opção: pelo Git

No terminal: git mv nome_antigo.extensão novo_nome.extensão
Assim ele irá passar para o estado de RENAMED quando você verificar pelo git status
Agora faça o commit do arquivo normalmente com git commit para consolidar a mudança

Unstage Files

Se você deseja já fez git add em um arquivo e ele está em STAGE pronto para ser commitado, mas deseja reverter (sem perder as alterações):

Todos os arquivos:

git reset

Arquivo específico:

git reset -- <nome-do-arquivo>

Desfazer alterações

Supondo que você deseja desfazer alterações no arquivo (apagar alterações)… vai depender em que ponto ele está: untracked, modified, commited.

Ao invés de desfazer, o mais aconselhado é reverter, para ao invés de apenas deletar a alteração, manter documentado. Ver reverter mais abaixo.

Desfazer alterações: arquivo em :::untracked:::

git checkout --<nome_do_arquivo.extensão>

Desfazer alterações: arquivos em :::modified::: (já feito add, mas não commit)

1º tira ele de modified e leva de volta para untracked:
```
git reset <nome_do_arquivo.extensão>
```
2º já é possível fazer checkout e reverter alterações
```
git checkout --<nome_do_arquivo.extensão>
```

Desfazer alterações: arquivos já commitados

1º caso SOFT

Tirar arquivo de commit e passar de volta para staged, sem deletar o arquivo, usa-se o comando –soft + a hash do pai, ou seja, a hash do commit anterior ao que eu quero apagar. e depois é possível fazer o checkout.

git reset --soft <hash_do_pai>

ou através da quantidade de commits (voltar atrás em nº de commits):

git reset --soft HEAD~<numero de commits>

2º caso MIXED

Tirar arquivo de commit e passar para modified (fora do staged), sem deletar o arquivo, usa-se o comando –mixed + a hash do pai, ou seja, a hash do commit anterior ao que eu quero apagar e depois é possível fazer o checkout.

git reset --mixed <hash_do_pai>

através da quantidade de commits (voltar atrás em nº de commits):

git reset --mixed HEAD~<numero de commits>

3º caso DELETAR HARD

Tirar arquivo de commit e deletar o arquivo (todos os commits e arquivos que estão depois do que o commit em questão deixam de existir, são deletados e fica só do commit pai/anterior para baixo). Usa-se o comando –hard + a hash do pai, ou seja, a hash do commit anterior ao que eu quero apagar e depois é possível fazer o checkout.

git reset --hard <hash_do_pai><hash_do_commit_a_ser_revertido>

através da quantidade de commits (voltar atrás em nº de commits):

git reset --hard HEAD~<numero de commits>

Reverter alterações

Quase semelhante ao desfazer, mas nesse caso será criado um commit que indica a reversão. É o mais aconselhado.

1° caso

Com mensagem sobre a reversão, neste caso o editor de texto irá abrir para que você insira a mensagem sobre o por que da reversão, ou digite (-m “mensagem”) após o hash

git revert <hash_do_commit_a_ser_revertido>

2° caso

Sem mensagem sobre a reversão:

git revert <hash_do_commit_a_ser_revertido> --no-edit

Desfazer: arquivo deletado da máquina

git checkout -- <nome_do_arquivo.extensão>

Remover arquivo/pasta pelo Git

Remover arquivo

git rm <nome_do_arquivo.extensão>

Remover pasta

git rm -r <nome da pasta>

Desfazer alterações

Desfazer todas as alterações (untracked)

visualizar arquivos que estão fora da working tree:
```
git clean -n -d
```
deletar arquivos:
```
git clean -f -d
```

Desfazer todas as alterações (tracked)

git checkout .

Voltar para versão anterior de arquivo (checkout)

git checkout <hash> <file-name.extension>

Remover arquivo adicionado acidentalmente

Arquivo ainda não commitado:

git reset </path/file-name.extension>

Arquivo já commitado:

Desfazer merge e manter o histórico de commits

git reset --soft HEAD~1

git reset </path/file-name.extension> 

rm </path/file-name.extension>

git commit

ir para a branch principal

git checkout <master_branch>

git log para verificar a hash correta

git log --oneline

fazer a reversão utilizando a hash do merge correspondente

git revert -m 1 <merge-commit-hash>

# Squash (‘comprimir’ commits em um só)

Considerando que você deseja comprimir/transformar seus últimos 1 só.. para isso fazemos o squash.

desfazer os últimos commits por quantidade (mantendo as alterações):

git reset --soft HEAD~<commit_quantity>

ex, desfazer 5 commits: git reset --soft HEAD~5

ou você pode optar por utilizar as hashs dos commits. O comando abaixo listará os commits, assim você pode verificar até qual commit você quer desfazer.
(lembrando que os commits são listados do mais novo para o mais antigo)

git log --oneline

em sequida:

git reset --soft <hash_do_ultimo-commit_que_vc_quer_manter>

ex:

git log --oneline

# listou:
<x323x32> meu commit 6
<kj56kj5> meu commit 5
<8f7g87f> meu commit 4
<k6k356j> meu commit 3
<jk4hj34> meu commit 2
<hjh2424> meu commit 1

# supomos que você deseja desfazer os 3 primeiros commits 
# (hash_6, hash_5, hash_4) e manter a partir do hash_3, então você usará
# o código do hash 3

git reset --soft k6k356j

faz o processo de add e commit com a mensagem certa
faz push para o repositório remoto

# Configurações globais

Verificar e editar configurações globais

git config --global -e

Configurar usuário e email

git config --global user.name <name>
git config --global user.email <email>

Configurar editor padrão

git config --global core.editor '<editor_name> --wait'

exemplo com o VSCode:

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

# Remover Git no repositório

Se por algum motivo não deseja mais usar o controle de versões e deseja 'desligar/remover' o Git do repositório (esse comando irá remover/deletar o Git do repositório em questão):

rm -rf .git/

Este comando irá deletar o arquivo onde o git guarda todas as informações e configurações do repositório. Pode ser feito dessa forma, ou deletando o arquivo manualmente.

--
Foto de capa: Yancy Min on Unsplash

Git alias, crie comandos personalizados para turbinar seu git

Lays Hidani — Fri, 03 Sep 2021 19:26:36 +0000

Já pensou em customizar seus comandos do Git?

Os aliases podem turbinar e facilitar o seu dia-a-dia, transformando seus comandos de terminal do git.

Você pode criar aliases para abreviar os comandos ou personalizá-los como quiser 🤩

Vamos lá...

💡 IMPORTANTE: após configurar, é necessário reabrir o terminal para refletir as novas configurações.

Criar alias direto no arquivo de configuração

1 - Abra o arquivo .gitconfig (localizado no diretório principal), você pode abri-lo através do seu diretório ou via terminal:

open ~/.gitconfig

*este comando irá abrir o arquivo em seu editor padrão para que você possa editá-lo

2 - Adicione seus aliases da seguinte forma:

[alias]
    comando_reduzido = comando_original
    comando_reduzido = comando_original
    comando_reduzido = comando_original

Prontinho! ⚡
Agora é só reabrir seu terminal para que os comandos possam começar a funcionar.

Lista de comandos úteis

arquivo .gitconfig

[alias]
  cm = commit -m
  acm = !git add -A && git commit -m
  lg = log --oneline
  lgg = log --all --graph --decorate --oneline --abbrev-commit
  b =  branch
  co = checkout
  cb = checkout -b
  st = status
  stt = status -sb
  pl = pull origin
  pu = push origin -u
  plr = pull origin -r
  pp = push origin
  pf = push origin +HEAD
  config = config --global -e
  up = !git pull --rebase --prune $@ && git submodule update --init --recursive
  save = !git add -A && git commit -m '~SAVEPOINT :construction:'
  wip = git add -A && git commit -m '~WIP :construction:'
  undo = reset --soft HEAD~1
  amend = commit --amend
  ops = commit --amend --no-edit

Utilizando os aliases

Vamos supor que eu tenha configurado meus aliases conforme a lista acima, então toda vez que eu quiser utilizar um alias, basta rodar o comando:

git <alias>

👩🏻‍🍳 Exemplo:

git save

Seria o mesmo que digitar

git add .

git commit -m '~SAVEPOINT :construction:'

muito mais prático!

Criar alias via linha de comando

Também é possível configurar seus aliases via linha de comando:

git config --global alias.<seu-alias> <comando-original>

# exemplo
# git config --global alias.st status

No exemplo acima, depois de configurado, ao invés de ter que digitar git status, basta digitar git st.

A opção –global quer dizer que o alias será aplicado no arquivo .gitconfig dentro do seu diretório home, e por isso o alias será aplicado em todos seus repositórios. Sem esta opção, o alias será aplicado no .gitconfig do repositório atual, logo só será aplicado apenas a ele.}}

https://gist.github.com/kelvinst/331aff32508e2517afbd

📖 saiba mais

--
Foto da capa: Roman Synkevych on Unsplash

DEV Community: Lays Hidani

👾 Games para treinar suas skills front-end

HTML

CSS

Javascript

Typescript

Regex

Web Development

Design

Vim

🆘 Git tips - comandos úteis para sobreviver no dia a dia

# URL

Verificar qual a URL remota

Editar url remota

Stash

Stash tracked files

Stash também dos untracked files

Stash de todos os arquivos, incluindo os ignored files

Stash com descrição

Listar stashs

Deletar stash específica

Deletar todas stash

Reaplicando alterações que estão em stash

Padrão, último stash

Escolher qual stash (como em um array, utilize o git stash list para visualizar a lista de stashs):

Visualizar Stash diff (stash show)

# ou, para visualização completa (-p = --patch):

Criar branch a partir de stash

# Cherry Pick

Pick 1 commit

Pick vários commits

Pick de um commit até outro commit

# Branchs

Listar Branchs

Listar branchs matching

Renomear branch

Local, e se você está nessa branch

Local, e se você NÃO está nessa branch

Remota, seguir os passos adicionais

Resetar a branch upstream para o novo nome da branch

Remover tag de uma branch

Remover tag, branch remota

Remover tag, branch local

Mudar para branch anterior [atalho]

# Commits

Alterar (Reescrever) mensagem do último commit

Refazer o último commit (add arquivos ao último commit)

Refazer o último commit utilizando a mensagem do commit anterior

Refazer o último commit

Desfazer commits

Desfazer o último commit

Desfazer commits por quantidade (do mais atual para o mais antigo)

Desfazer commits até o commit x (com soft ou hard):

# Git log (lista de commits)

Listar commits resumido

Listar commits gráfico branch

Listar commits com referências associadas (branch, tag, etc)

Listar commits por quantidade

Listar commits pesquisa → procurar commits com uma mensagem/palavra

Listar commits pesquisa → procurar commits com uma mensagem/palavra do código

Listar commits pesquisa → procurar commits com uma mensagem/palavra da mensagem de commit

Listar commits pesquisa → procurar commits por arquivos

Listar commits por data

Depois de

Depois de

Entre datas

Listar commits por autor

1 autor

Mais de 1 autor

Listar último commit

# Push

Push force

Fazer push sem digitar o nome da branch em que você está (HEAD) [atalho]

🆘 # Reflog - o Salva vidas

Histórico - Listar tudo o que você fez no git

Algumas opções com git reflog

# Merge tips

sem fast-forward

# Arquivos

Renomear arquivo local

Escolher qual stash (como em um array, utilize o `git stash list` para visualizar a lista de stashs):