12 coisas legais que você pode fazer com o GitHub

Não posso por minha vida pensar em uma introdução, então …

# 1 Edite o código em GitHub.com

Eu vou começar com um que eu acho que a maioria das pessoas conhece (apesar de não saber até uma semana atrás).

Quando você está no GitHub, olhando para um arquivo (qualquer arquivo de texto, qualquer repositório), há um pequeno lápis no canto superior direito. Se você clicar nele, você pode editar o arquivo. Quando tiver terminado, acesse Propor mudança de arquivo e o GitHub garante o repo para você e crie uma solicitação de puxar.

Isso não é selvagem? Isso cria o garfo para você!

Não há necessidade de garfo e puxar e mudar localmente e empurre e crie um PR.

Não é um PR real

Isso é ótimo para corrigir erros de digitação e uma ideia um tanto horrível para edição de código.

# 2 Colando imagens

Você não está apenas limitado ao texto em comentários e descrições de problemas. Você sabia que você pode colar uma imagem diretamente da área de transferência? Quando você cola, você verá que é carregado (para a "nuvem", sem dúvida) e se torna o markdown para mostrar uma imagem.

Arrumado.

Código de formatação # 3

Se você quiser escrever um bloco de código, você pode começar com três backticks – assim como você aprendeu quando você lê a página Mastering Markdown – e o GitHub tentará adivinhar o idioma que você está escrevendo.

Mas se você estiver postando um fragmento de algo como Vue, Tipografia ou JSX, você pode especificar isso explicitamente para obter o realce correto.

Observe o ```jsx na primeira linha aqui:

… o que significa que o snippet é processado corretamente:

(Isso se estende a gists, por sinal. Se você der uma essência a extensão de .jsx você obterá o destaque da sintaxe JSX.)

Aqui está uma lista de todas as sintaxes suportadas .

# 4 Problemas de fechamento com palavras mágicas em PRs

Digamos que você está criando uma solicitação de puxar que corrige o problema # 234. Você pode colocar o texto "repara # 234" na descrição de seu PR (ou mesmo em qualquer lugar em qualquer comentário no PR).

Então, a fusão do PR fechou automaticamente esse problema. Não é legal?

mais para aprender com a ajuda .

# 5 Ligação a comentários

Você ainda quis ligar para um comentário específico, mas não conseguiu descobrir como? Isso porque você não sabe como fazê-lo. Mas esses dias estão atrás de você, meu amigo, porque estou aqui para lhe dizer que clicar na data / hora ao lado do nome é como você liga um comentário.

Ei, gaearon conseguiu uma foto!

# 6 Ligação ao código

Então, você deseja vincular a uma linha específica de código. Entendi.

Tente isso: enquanto olha o arquivo, clique no número da linha ao lado do referido código.

Whoa, você viu isso? O URL foi atualizado com o número da linha! Se você pressionar shift e clicar em outro número de linha, SHAZAAM, o URL será atualizado novamente e agora você destacou um intervalo de linhas.

Compartilhar esse URL irá vincular a este arquivo e essas linhas. Mas aguarde, isso está apontando para o ramo atual. E se o arquivo mudar? Talvez seja um permalink para o arquivo em seu estado atual o que você está procurando.

Eu sou preguiçoso, então eu fiz todo o item acima em uma captura de tela:

Falando em URLs …

# 7 Usando o URL do GitHub como a linha de comando

Navegar em torno do GitHub usando a interface do usuário está tudo bem e bem. Mas, às vezes, a maneira mais rápida de chegar onde quer ser é apenas digitá-lo no URL. Por exemplo, se eu quiser saltar para um ramo em que estou trabalhando e ver a diferença com o mestre, posso digitar /compare/branch-name depois do meu nome de reimportação.

Isso me aterrará na página do diff para esse ramo:

No entanto, essa é uma diferença com o mestre, se eu estivesse trabalhando com um ramo de integração, eu escrevi /compare/ integration-branch... my-branch

Para você, os curtos de teclado lá fora, ctrl + L ou cmd + L irão pular o cursor para cima no URL (pelo menos no Chrome). Isto – combinado com o fato de que seu navegador vai fazer auto-completar – pode torná-lo uma maneira prática de saltar entre os ramos.

Pro-tip: use as teclas de seta para percorrer as sugestões de auto-completo do Chrome e pressione shift + delete para remover um item do histórico (por exemplo, uma vez que um ramo é mesclado).

(Eu realmente me pergunto se esses atalhos seriam mais fáceis de ler se os fizesse como shift + delete . Mas, tecnicamente, o '+' não faz parte disso, então não me sinto à vontade com isso. Isso é o que me mantém errado de noite, Rhonda.)

# 8 Criar listas, em problemas

Deseja ver uma lista de caixas de seleção em seu problema?

E você gostaria que apareça como uma barra de "2 de 5" nítida ao analisar o problema em uma lista?

Isso é ótimo! Você pode criar caixas de seleção interativas com esta sintaxe:

 - [] Largura da tela (inteiro) 
- [x] Assistente do serviço técnico
- [x] Fetch support
- [] suporte CSS flexbox
- [] Elementos personalizados

Esse é um espaço e um traço e um espaço e um suporte esquerdo e um espaço (ou um x) e um suporte próximo e um espaço e depois algumas palavras.

Então você pode verificar / desmarcar essas caixas! Por algum motivo, isso me parece uma magia técnica. Você pode verificar as caixas! E atualiza o texto subjacente!

O que eles vão pensar em seguida.

Ah, e se você tiver esse problema em uma placa de projeto, isso também mostrará o progresso:

Se você não sabe do que estou falando quando digo "em uma placa de projeto", então você está dentro de um tratamento mais abaixo na página.

Como, 2cm mais abaixo na página.

Placas de projeto # 9 em GitHub

Sempre usei Jira para grandes projetos. E para projetos individuais sempre usei o Trello. Eu gosto muito de ambos.

Quando eu aprendi algumas semanas atrás, o GitHub tem sua própria oferta, ali mesmo na guia Projetos do meu retomado, pensei que eu replicaria um conjunto de tarefas que eu já tinha em fervura em Trello.

Nenhum deles é divertido

E aqui é o mesmo em um projeto GitHub:

Seus olhos se ajustam à falta de contraste eventualmente

Por uma questão de velocidade, adicionei todos os itens acima como "notas" – o que significa que eles não são problemas reais do GitHub.

Mas o poder de gerenciar suas tarefas no GitHub é que ele está integrado com o resto do repositório – então você provavelmente deseja adicionar problemas existentes do repo ao quadro.

Você pode clicar em Adicionar cartões no canto superior direito e encontrar as coisas que deseja adicionar. Aqui, a sintaxe de pesquisa especial é útil, por exemplo, o tipo is:pr is:open e agora você pode arrastar todos os PRs abertos para a placa, ou label:bug se você quiser esmagar alguns erros.

Ou você pode converter notas existentes em problemas.

Ou, finalmente, da tela de uma questão existente, adicione-a a um projeto no painel direito.

Ele entrará em uma lista de triagem nesse painel do projeto para que você possa decidir qual coluna colocá-lo.

Há um grande benefício (huuuuge) em ter sua definição de "tarefa" no mesmo retomado que o código que implementa essa tarefa. Isso significa que, a partir de agora, você pode fazer uma culpa em uma linha de código e encontrar seu caminho de volta ao raciocínio original por trás da tarefa que resultou nesse código, sem precisar ir e rastreá-lo em Jira / Trello / em outro lugar.

As desvantagens

Eu tentei fazer todas as tarefas no GitHub em vez de Jira nas últimas três semanas (em um projeto menor que é um tipo de estilo Kanban) e estou gostando até agora.

Mas não consigo imaginar usá-lo no projeto Scrum, onde eu quero fazer uma estimativa apropriada e calcular a velocidade e todas essas coisas boas.

A boa notícia é que há tão poucos "recursos" dos Projetos GitHub que não levará muito tempo para avaliar se é algo que você poderia mudar. Então, dê uma chance, veja o que você pensa.

FWIW, ouvi falar do ZenHub e abri-o há 10 minutos pela primeira vez. Ele efetivamente amplia o GitHub para que você possa estimar seus problemas e criar épicos e dependências. Há gráficos de velocidade e queima também; Parece que pode ser apenas o melhor da Terra.

Leitura adicional: GitHub ajuda em Projetos .

# 10 GitHub wiki

Para uma coleção não estruturada de páginas – assim como a Wikipédia – a oferta do GitHub Wiki (que agora chamarei de Gwiki) é ótima.

Para uma coleção estruturada de páginas – por exemplo, sua documentação – não tanto. Não há como dizer "esta página é uma criança dessa página", ou tem coisas boas como os botões 'Próxima seção' e 'Seção anterior'. E Hansel e Gretel seriam ferrados, porque não há pão ralado.

(Nota lateral, você leu essa história? É brutal. Os dois idiotas assassinam a velha e pobre fome, queimando a morte em seu próprio forno . Sem dúvida, deixando ela para limpar a bagunça. Eu acho que é por isso que os jovens são esses Os dias são tão sensíveis – as histórias de dormir hoje em dia não contêm violência suficiente.)

Movendo-se – para levar Gwiki para uma rotação, entrei algumas páginas dos documentos do NodeJS como páginas do wiki, e criei uma barra lateral personalizada para que eu pudesse imitar a estrutura real. A barra lateral está a qualquer momento, embora não destaque a página em que você está atualmente.

Os links precisam ser mantidos manualmente, mas, sobretudo, acho que funcionaria bem. Dê uma olhada se sentir a necessidade.

Não vai competir com algo como o GitBook (é o que os docs do Redux usam) ou um site personalizado. Mas é um sólido 80% e está tudo bem no seu repo.

Eu sou um fã.

Minha sugestão: se você superou um único arquivo README.md e deseja algumas páginas diferentes para guias de usuário ou uma documentação mais detalhada, sua próxima parada deve ser um Gwiki.

Se você começar a sentir a falta de estrutura / navegação o reter, vá para outra coisa.

# 11 GitHub Pages (com Jekyll)

Você já pode saber que você pode usar o GitHub Pages para hospedar um site estático. E se você não fez agora, você não. No entanto, esta seção é especificamente sobre como usar o Jekyll para criar um site.

Na sua maioria mais simples, o GitHub Pages + Jekyll renderizará seu README.md em um tema bonito. Por exemplo, dê uma olhada na minha página do readme de about-github :

Se eu clicar na guia 'configurações' do meu site no GitHub, ative o GitHub Pages e escolha um tema do Jekyll …

Receberá uma página com tema Jekyll :

A partir deste ponto, posso construir um site estático inteiro baseado basicamente em arquivos redundantes que são facilmente editáveis, basicamente transformando o GitHub em um CMS.

Na verdade, não usei isso, mas é assim que os sites Reagir e Bootstrap são feitos, por isso não pode ser terrível.

Note-se que ele exige que o Ruby seja executado localmente (os usuários do Windows trocarão olhares conhecidos e caminharão na outra direção. Os usuários do MacOS serão como "Qual é o problema, onde você está indo? Ruby é uma plataforma universal! GEMS!")

(Também vale a pena acrescentar que "conteúdo ou atividade violenta ou ameaçadora" não é permitido no GitHub Pages, então você não pode hospedar sua reinicialização Hansel e Gretel).

Minha opinião

Quanto mais eu olhei para o GitHub Pages + Jekyll (para esta postagem), mais parecia que havia algo estranho em relação a tudo.

A idéia de "tirar toda a complexidade de ter seu próprio site" é excelente. Mas você ainda precisa de uma configuração de compilação para trabalhar localmente. E há uma grande quantidade de comandos da CLI para algo tão "simples".

Acabei de descrever as sete páginas na seção Introdução e sinto que sou a única coisa simples por aqui. E nem aprendi a simples sintaxe "Front Matter" ou os prós e contras do simples "Motor de modelos de líquido" ainda.

Prefiro simplesmente escrever um site.

Para ser honesto, estou um pouco surpreso com o Facebook usar isso para os Documentos de Reação quando eles provavelmente poderiam construir seus documentos de ajuda com Reagir e pré-renderizar para arquivos HTML estáticos em menos de um dia.

Tudo o que eles precisariam é alguma maneira de consumir seus arquivos de markdown existentes como se eles estivessem vindo de um CMS.

Eu me pergunto se …

# 12 Usando o GitHub como um CMS

Digamos que você tenha um site com algum texto, mas você não deseja armazenar esse texto na marcação HTML atual.

Em vez disso, você deseja armazenar pedaços de texto em algum lugar para que eles possam ser facilmente editados por não desenvolvedores. Talvez com alguma forma de controle de versão. Talvez até um processo de revisão.

Aqui está a minha sugestão: use arquivos de redução armazenados em seu repositório para manter o texto. Em seguida, tenha um componente na sua frente que obtenha os fragmentos de texto e os processe na página.

Eu sou um cara Reagente, então aqui está um exemplo de um componente <Markdown> que, dado o caminho para algum markdown, irá buscá-lo, analisá-lo e renderizá-lo como HTML.

(Estou usando o pacote npm marcado para analisar o markdown em HTML.)

Isso está apontando para o meu exemplo de repo que possui alguns arquivos de markdown em /text-snippets .

(Você também pode usar a API GiHub para obter os conteúdos – mas não tenho certeza por que você faria.)

Você usaria tal componente assim:

Então, agora, o GitHub é o seu CMS, tipo de, para quaisquer partes do texto que você deseja que ele hospede.

O exemplo acima apenas obtém o markdown após o componente ter montado no navegador. Se você quer um site estático, então você deseja que o servidor seja executado.

Boas notícias! Não há nada que o impede de buscar todos os arquivos de markdown no servidor (juntamente com qualquer estratégia de cache que funcione para você). Se você for naquela estrada, você pode querer olhar para a API do GitHub para obter uma lista de todos os arquivos de redução em um diretório.

Bônus redondo – Ferramentas GitHub!

Eu usei a extensão Octotree Chrome por um tempo agora e eu recomendo. Não de todo o coração, mas eu o recomendo, no entanto.

Isso lhe dá um painel à esquerda com uma vista em árvore de qualquer repo que você está olhando.

A partir deste vídeo, eu aprendi sobre o octobox , que até agora parece muito bom. É uma caixa de entrada para seus problemas do GitHub. Isso é tudo o que tenho a dizer sobre isso.

Falando em cores, tirei todas as minhas capturas de tela acima no tema da luz para não assustar você. Mas na verdade, tudo o que eu olho é tema escuro, por que eu devo suportar um GitHub pálido?

Essa é uma combinação da extensão Stylish Chrome (que pode aplicar temas a qualquer site) e o estilo GitHub Dark . E para completar o visual, o tema escuro do Chrome DevTools (que é incorporado, ligue-o nas configurações) e o Atom One Dark Theme para o Chrome.

Bitbucket

Isso não se encaixa estritamente em qualquer lugar nesta postagem, mas não seria correto se eu não tivesse grito para o Bitbucket.

Dois anos atrás, eu estava iniciando um projeto e passando meio dia avaliando qual o melhor host, e o Bitbucket ganhou uma margem considerável. Seu fluxo de revisão de código estava tão à frente (isso já era longo antes do GitHub ter o conceito de atribuir um revisor).

O GitHub já entrou no jogo de revisão, o que é ótimo. Mas, infelizmente, não tive a chance de usar o Bitbucket no ano passado – talvez tenham avançado de alguma outra forma. Então, eu exorto alguém na posição de escolher um host git para verificar Bitbucket também.

Outro

Então é isso! Espero que houvesse pelo menos três coisas aqui que você não sabia, e também espero que você tenha um bom dia.

Editar: há mais dicas nos comentários; sinta-se à vontade para deixar seu próprio favorito. E, sério, eu realmente espero que você tenha um bom dia.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *