Pular para o conteúdo
murad.guide

Introdução Completa à Web

Capítulo 23

Bibliotecas, Git e próximos passos

8 min de leitura 1.375 palavras 2 gravuras

Você chegou à capítulo 23 de 23. O blog, o checkout, a calculadora e Palavras da Restinga já existem na pasta do volume. Falta o hábito de reusar código de outras pessoas, guardar histórico local e escolher o que estudar depois. Sem conta paga. Sem publicar exercício com dado real.

O exemplo está em exemplos/23-git-proximos-passos/. Abra index.html. Um arquivo biblioteca.js local anima o selo da Casa da Restinga. O README da pasta lembra o Git só nesta máquina.

Trabalhe na cópia inicio da etapa. Leia e digite o código; mude uma coisa. Antes de recarregar, anote sua previsão. Depois confira com a referência completa. Se nada mudar, confira o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo podem ser digitados no console; o exemplo completo mostra a aplicação daquela etapa.

O que você vai aprender

Biblioteca é um acordo de uso

Uma biblioteca é um pacote de funções que outra pessoa (ou você, noutro arquivo) já testou. Você não lê o miolo no primeiro dia. Você lê o combinado: “chame selar() e o selo pulsa”.

Sites grandes juntam dezenas desses pacotes. Neste volume o primeiro contato é conceitual e local. Não é obrigatório instalar Node, npm nem ferramenta de empacotar. Não é obrigatório puxar script da internet.

O exemplo traz biblioteca.js escrito para o material. Licença e origem ficam no README do volume, não neste capítulo.

function selar(elemento) {
  elemento.classList.add("pulso");
}

O CSS que acompanha não se edita “dentro da biblioteca”: mora em styles.css, o arquivo de personalização da página.

.selo {
  font-size: 2rem;
  text-align: center;
}
.selo.pulso {
  animation: pulso 1.4s ease-in-out infinite;
}
@keyframes pulso {
  50% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .selo.pulso { animation: none; }
}

Seu script.js só chama selar(document.querySelector(".selo")). A magia aparente é uma classe CSS e um arquivo a mais. Quem prefere menos movimento, o sistema já pede: a animação some.

Pare e experimente. Abra o exemplo. Preveja o selo da Restinga pulsando. Recarregue. Confira. Depois comente a chamada a selar. Preveja parado. Recarregue. Restaure.

Erro comum: achar que biblioteca só existe se vier de um site famoso. Um .js na pasta já é o mesmo tipo de reúso.

A ordem dos scripts importa

Dois arquivos. O da biblioteca primeiro. O seu depois. Se inverter, selar ainda não existe.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Selo — Casa da Restinga</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main>
    <h1>Casa da Restinga</h1>
    <p class="selo">Natal</p>
  </main>
  <script src="biblioteca.js"></script>
  <script src="script.js"></script>
</body>
</html>

Há outro caminho, mais à frente: instalar pacotes com ferramentas de linha de comando e juntar tudo num arquivo só. Isso não é exigência deste capítulo. Se um dia aparecer import e require, o fundo é o mesmo: alguém exportou funções, você as chama.

CDN (carregar de outro servidor) também existe. Aqui preferimos cópia local, como o resto do volume. Sem depender de rede para o selo pulsar.

Pare e experimente. Inverta as duas tags script. Preveja erro no console (selar is not defined). Recarregue. Restaure a ordem. Confira o pulso.

Erro comum: um único script com o caminho da biblioteca e o seu código misturados no HTML. Separe arquivos. A ordem no HTML é o combinado.

Biblioteca local primeiro; Git grava o histórico nesta máquina

Git local: init, preparar, gravar

Git guarda versões do código. Pense num caderno com datas: você volta atrás sem copiar a pasta inteira no e-mail.

Fluxo mínimo nesta máquina:

  1. Na pasta do projeto, git init cria o repositório.
  2. Você altera arquivos.
  3. Preparar (stage): escolhe o que entra no próximo registro.
  4. Gravar (commit): fecha um pacote com uma frase curta (“selo pulsa no título”).

No editor, a aba de controle de versão mostra o mesmo fluxo com botões. A ideia é idêntica. Se preferir o terminal, na pasta do exemplo:

git init
git add index.html styles.css biblioteca.js script.js
git status
git commit -m "Selo da Restinga com biblioteca local"

git status lista o que está preparado e o que ainda é só rascunho. A mensagem do commit é para você, daqui a um mês.

Não grave pasta node_modules, arquivo de senha nem dado pessoal. Não grave .DS_Store se aparecer no macOS. Um arquivo .gitignore com essas linhas evita o erro na próxima vez.

Pare e experimente. Se o Git estiver instalado, na pasta do exemplo rode git status depois de git init. Preveja index.html como arquivo novo. Não precisa enviar a ninguém.

Erro comum: achar que Git só funciona depois de criar conta numa nuvem. O histórico local já vale.

GitHub é opcional

GitHub é um site para hospedar cópias de repositório. Conta gratuita cobre estudo público. Não é obrigatória neste volume. Não pague plano para “terminar” o capítulo.

Se um dia quiser: crie o repositório vazio no site, ligue o remoto (origin é o nome comum) e envie o ramo principal. Empregadores às vezes olham isso; não é nota da Casa da Restinga.

Conflito (duas edições no mesmo trecho) existe. Para agora, evite dois sítios editando o mesmo arquivo ao mesmo tempo. Continue local.

Nunca publique os exercícios com nome real, cartão ou senha. Formulários deste volume não enviam dado.

Pare e experimente. Leia o README da pasta do volume. Preveja a frase de que o servidor é 127.0.0.1. Confira. Não crie conta se não quiser.

Erro comum: tratar “subir para a nuvem” como único jeito de salvar. Commit local já salvou o histórico.

O que fazer depois

Você não precisa de curso pago para continuar. Caminhos neste workspace e na web aberta:

Três hábitos que cabem hoje, sem conta nova:

  1. Abrir o exemplo, mudar uma cor, prever, recarregar.
  2. Ler uma página do MDN ligada ao que quebrou.
  3. Gravar um commit local quando o exemplo voltar a abrir.

CLI, Linux, frameworks (React e afins) e ciência da computação vêm depois de você alterar estes arquivos com segurança. Pratique primeiro. Servidor de estudo continua em 127.0.0.1. Publicar é decisão à parte, não o fim deste capítulo.

Pare e experimente. No exemplo 22, acrescente uma palavra válida no JSON. Preveja o Enter aceitar. Recarregue em 127.0.0.1. Confira.

Erro comum: pular para framework sem conseguir explicar o addEventListener do capítulo 19. Volte ao balcão.

Início da referência desta etapa no navegador local

A Casa da Restinga fecha aqui, a web não

Percurso deste material, em Natal fictícia:

  1. Ambiente e HTML até o blog.
  2. CSS até o checkout do café.
  3. JavaScript até objetos e arrays.
  4. DOM, calculadora, JSON local, Palavras da Restinga.

Você escreveu, recarregou, errou caminho, corrigiu. Esse ciclo é o ofício. Consultar o MDN faz parte. Copiar texto longo de terceiros sem reescrever não faz.

Obrigado por chegar ao fim das 23 capítulos. O selo da Restinga pode pulsar no exemplo 23. O que pulsa de verdade é a pasta no seu disco: abra, mude, preveja, recarregue, confira.

Pare e experimente. Escolha o exemplo 06, 13, 20 ou 22. Mude uma cor no CSS. Preveja o visual. Recarregue. Confira.

Erro comum: apagar a pasta .trabalho achando que é o volume. A entrega para estudo é curso/ e o README. .trabalho é bastidor.

Atividades

  1. Por que biblioteca.js carrega antes de script.js?
  2. Git local exige conta no GitHub?
  3. Qual o primeiro fetch obrigatório deste volume: JSON da pasta ou API pública?
  4. PHP entra nestes exemplos da Restinga?

Respostas comentadas

  1. Para selar já existir quando o seu script chama. Ordem das tags é o combinado.
  2. Não. git init, preparar e commit bastam nesta máquina. GitHub é opcional e sem plano pago.
  3. JSON da pasta (capítulos 21 e 22), servido em 127.0.0.1.
  4. Não. Formulário daqui não grava. PHP é outro curso.

MDN

O arquivo completo

Referência do exemplo 23-git-proximos-passos, reproduzida aqui para que você possa conferir sem sair da página.

index.html

<!DOCTYPE html>

<html lang="pt-BR">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Próximos passos — Casa da Restinga</title>
<link href="assets/stylesheets/main.css" rel="stylesheet"/>
<style>body{overflow-wrap:anywhere}img,input,textarea,select{max-width:100%}img{height:auto}fieldset,main{min-width:0}pre{max-width:100%;overflow:auto}:focus-visible{outline:3px solid #005fcc;outline-offset:3px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}</style></head>
<body>
<a class="skip" href="#conteudo">Pular para o conteúdo</a>
<header>
<div class="wrap">
<a class="brand" href="index.html">Casa da Restinga</a>
<nav aria-label="Principal">
<ul>
<li><a aria-current="page" href="index.html">Início</a></li>
<li><a href="sobre.html">Sobre</a></li>
</ul>
</nav>
</div>
</header>
<main class="wrap" id="conteudo" tabindex="-1">
<h1>Depois deste curso</h1>
<p>Git nesta máquina. GitHub é opcional. Bibliotecas de terceiros: leia a licença antes de copiar.</p>
</main>
<footer>
<div class="wrap">
<p>Casa da Restinga — Natal. Conteúdo fictício. Nada é enviado a um servidor.</p>
</div>
</footer>
</body>
</html>

assets/stylesheets/main.css

*,
*::before,
*::after { box-sizing: border-box; }
html, body, h1, h2, h3, p, ul { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }
body {
  font-family: "Segoe UI", Tahoma, sans-serif;
  line-height: 1.5;
  color: #1a2a2c;
  background: #f7f3ea;
}
a { color: #0d5c63; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid #c45c26;
  outline-offset: 3px;
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 0.5rem; top: 0.5rem; background: #fff; padding: 0.4rem 0.7rem; z-index: 2; }
.wrap { width: min(44rem, calc(100% - 2rem)); margin-inline: auto; }
header { background: #0d5c63; color: #fff; padding: 1rem 0; }
header a { color: #fff; }
.brand { font-weight: 700; text-decoration: none; }
nav ul { list-style: none; display: flex; gap: 1rem; margin-top: 0.5rem; }
nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.2em; }
main { padding: 1.5rem 0 3rem; }
footer { border-top: 1px solid #ddd4c4; padding: 1rem 0; font-size: 0.95rem; }
article { margin: 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid #ddd4c4; }