Eu nunca trabalhei como desenvolvedor profissional de front-end e, embora tenha escrito HTML / CSS / JS para pequenos projetos paralelos por 15 anos, todos os projetos eram bem pequenos. Acontece que eu não escrevo em Javascript há anos entre esses projetos, e muitas vezes não tenho certeza se estou fazendo tudo certo.



É em parte por isso que eu costumava usar bibliotecas! Há dez anos, usei o jQuery e, desde 2017, uso muito o vue.js em meus pequenos projetos (você pode conferir o joguinho de sapadores que fiz como introdução ao Vue).



Mas na semana passada, pela primeira vez em muito tempo, eu escrevi Javascript simples sem biblioteca, e foi divertido, então eu queria falar um pouco sobre isso!

Experimentando Javascript Simples

Eu realmente gosto de Vue. Mas, na semana passada, quando comecei a desenvolver https://questions.wizardzines.com, eu tinha limitações um pouco diferentes do normal - eu queria usar o mesmo HTML para gerar o PDF (com Prince ) e criar uma versão interativa questões.



Eu realmente não vi como isso é possível com o Vue (porque o Vue quer criar todo o HTML em si) e, como era um projeto pequeno, decidi tentar escrevê-lo em Javascript simples sem bibliotecas - basta escrever um pouco de HTML / CSS e adicionar um <script src="js/script.js"> </script>.



Não faço isso há algum tempo e, ao longo do caminho, aprendi algumas coisas que tornariam o processo mais fácil do que eu pensava quando comecei.

Fazemos quase tudo adicionando e removendo classes CSS

Decidi implementar quase toda a interface do usuário simplesmente adicionando e removendo classes CSS e usando transições CSS, se eu quiser animar a transição.



Aqui está um pequeno exemplo em que clicar em um botão nextpara uma pergunta adiciona uma classe doneà div pai.

div.querySelector('.next-question').onclick = function () {
    show_next_row();
    this.parentElement.parentElement.classList.add('done');
}

Funcionou muito bem. Meu CSS, como sempre, é um pouco caótico, mas parece gerenciável.

Adicionando / removendo classes CSS usando .classList

Comecei com aulas de edição como segue: x.className = 'new list of classes'. É um pouco confuso e eu me perguntei se existe uma maneira melhor. E ele estava!



As classes CSS podem ser adicionadas assim:

let x = document.querySelector('div');
x.classList.add('hi');
x.classList.remove('hi');

element.classList.remove('hi') - Isso é muito mais limpo que o meu método anterior.

Encontre itens usando document.querySelectorAll

Quando comecei a aprender jQuery, lembrei-me de que, se você precisar encontrar facilmente algo no DOM, precisará usar o jQuery (por exemplo $('.class')). Acabei de aprender esta semana que você pode escrever document.querySelectorAll('.some-class')e não precisa depender de nenhuma biblioteca!



Fiquei curioso quando foi apresentado querySelectorAll. Pesquisei um pouco no Google e parece que a API Selectors foi criada em algum momento entre 2008 e 2013 - encontrei uma postagem de um autor do jQuery discutindo uma implementação proposta em 2008 e uma postagem de blog de 2011 que dizia que estava em todos os principais navegadores de uma só vez, por isso pode não existir quando eu comecei a usar o jQuery, mas definitivamente existe há algum tempo :)

Instalando .innerHTML

Em um lugar, eu queria alterar o conteúdo HTML de um botão. Criar elementos DOM usando é document.createElementbastante entediante, então tentei minimizar o trabalho e, em vez disso, defina a .innerHTMLstring HTML para a correta:

  button.innerHTML = `<i class="icon-lightbulb"></i>I learned something!
    <object data="/confetti.svg" width="30" height = "30"> </object>
    `;

Rolando a página com .scrollIntoView

A última coisa engraçada que descobri é essa .scrollIntoView. Eu queria rolar automaticamente para a próxima pergunta quando alguém clicar no botão "Próxima pergunta". Acontece que esta é apenas uma linha de código:

row.classList.add('revealed');
row.scrollIntoView({behavior: 'smooth', block: 'center'});

Outro exemplo de vanilla JS: peekobot

Outro pequeno exemplo de uma biblioteca JS simples que achei boa é o peekobot , que é uma pequena interface de chatbot com 100 linhas de JS / CSS.



Como você pode ver no seu Javascript , ele usa vários padrões semelhantes - muitos .classList.add, alguns adicionando elementos ao DOM, outros .querySelectorAll.



Na fonte peekobot, aprendi sobre o elemento .closest , que encontra o ancestral mais próximo que corresponde a um determinado seletor. Parece que seria uma boa maneira de me livrar de alguns .parentElement.parentElementque escrevi no meu Javascript que pareciam um pouco frágeis.

Javascript simples pode fazer muito!

Fiquei muito surpreso com o quanto eu fiz com JS simples. No final, escrevi cerca de 50 linhas de JS que fizeram tudo o que eu queria fazer e um pouco mais para coletar alguns indicadores anônimos sobre o treinamento do usuário.



Como de costume nas minhas postagens de front-end, isso não precisa ser um conselho sério de desenvolvimento de front-end. Meu objetivo é escrever pequenos sites com menos de 200 linhas de Javascript que funcionem principalmente. Se você também está no mundo frontend, espero que isso ajude um pouco!