HTML é a Web

Qual é a história com Frontend Engineers e HTML nos dias de hoje? Eu tenho falado com alguns recentemente que simplesmente não parecem entender isso. Quero dizer, eles entendem um pouco disso. Eles entendem o que divé e o que spané, e desde que tudo pareça bom e funcione quando clicam nele, eles estão felizes o suficiente. Tantos que eu falei para ter respondido perguntas sobre HTML com coisas como “Oh, eu faço tudo em Reagir ou Vue nos dias de hoje”. Mas realmente, não importa se tudo que você escreve é ​​o Javascript, porque se você está fazendo sites, então a coisa mais importante que você está fazendo é HTML. HTML é a Web

É tudo sobre o que é consumido pelo consumidor. É a interface do usuário e o UX. É o pacote inteiro. Em ordem decrescente de importância é o HTML, o CSS e o comportamento (que pode ser fornecido pelo Javascript – pode não ser).

Minha grande preocupação está no fundo dessa pirâmide tecnológica. O menor denominador comum da Web. A Fundação. A seção rítmica. Os ladyfingers na web são insignificantes. É o HTML. E está ficando cada vez mais claro para mim que há toda uma gama de Engenheiros Frontendque não conhecem ou entendem o frontend das tecnologias frontend.

Uma página da Web é um documento. Um componente, seja parte de um modelo de blog, um site de notícias, um painel de estatísticas de marketing ou um formulário de inscrição, faz parte de um documento. Documentos possuem estrutura. Na Web, não se trata apenas dos recursos visuais ou da arquitetura fornecida pelo framework, mas sim da escolha de elementos semanticamente corretos para garantir que sua página da Web, componente, seja qual for, esteja corretamente formatada estruturalmente. Cabeçalhos devem ser títulos, listas devem ser listas, botões devem ser botões e tabelas devem ser tabelas. Você pode estilizá-los (muito bem) como quiser – um cabeçalho não precisa ser grande e ousado com uma margem inferior. Isso é com você, mas definitivamente deve ser um título e eu vou lutar com você se você fizer isso div.

HTML não é difícil de aprender corretamente, especialmente se você já está acostumado a aprender frameworks Javascript. Eu não contei, mas tenho certeza de que há apenas cerca de 116 elementos, e a maioria daqueles que você nunca precisaria normalmente. Por que você não aprenderia isso?

Eu sou um tipo de ‘frontend do frontend’. Minha especialidade é em HTML e CSS, então é fácil para mim ser lírico sobre por que todo mundo deveria aprender o que eu já sei (para registro, eu não sei tudo – ainda temos debates acalorados no escritório sobre qual o melhor maneira de marcar um determinado componente pode ser). Isto não é sobre ‘o meu trabalho é mais importante que o seu. Se você está escrevendo um código que processa as coisas em um navegador, este é o seu trabalho.

É sobre usabilidade e acessibilidade. Se você não acha que a estrutura semântica da sua página da Web ou aplicativo é importante, então você está essencialmente dizendo: “Bem, funciona para mim no meu navegador, enviá-lo”. Eu não acho que você faria isso com o seu Javascript e você certamente não deveria estar fazendo isso com o seu CSS. Os motores de busca precisam ler o seu conteúdo, não desfrutar de suas animações swoopy ou gradientes extravagantes. O software leitor de tela precisa ler seu conteúdo. Os usuários de teclado precisam ler seu conteúdo. Quem sabe o que a tecnologia virá a seguir e como ela consumirá seu aplicativo, mas eu aposto que meu Bitcoin de baixo funcionará melhor se puder ler, analisar e analisar facilmente seu conteúdo. A maneira como essas coisas lêem o seu conteúdo é que eles sabem que são realmente conteúdos e não apenas strings de texto envoltos em tags sem sentido. Eles sabem o que é uma mesa e como apresentá-la, eles sabem o que é uma lista e como apresentá-la, eles sabem o que é um botão e o que é uma caixa de seleção. Faça tudo, desdedive eles vão ter que trabalhar muito para descobrir isso.

“Mas minha estrutura de escolha cuida de tudo isso. Acabei de escrever .jsxmodelos.

Não. Escreva o HTML adequado no seu JSX. Você consegue. Só porque você está usando o React ou o Vue ou qualquer outra coisa, você não precisa fazer tudo do divs. Você não

“Esta biblioteca adiciona atributos WAI-Aria a tudo, então eu sei que é acessível porque eles já fizeram o trabalho.”

Ótimo. Se você tivesse escrito HTML adequado, a maioria desses atributos não seria necessária. Você obtém um monte de recursos de acessibilidade gratuitamente apenas usando um real em buttonvez de um divcom um onClickouvinte. De graça. Isso é acessibilidade e desempenho e pontos de experiência do usuário, gratuitamente. LIVRE!

Essas coisas realmente importam. Não fazer isso é vagaroso (na verdade não tão devagar) quebrando a World Wide Web. No mínimo, é mais difícil de usar para as pessoas que usariam seu produto. Se você se considera um engenheiro de fachada, é sua responsabilidade aprender e usar o básico – a única coisa que é comum em todos os navegadores, plataformas, dispositivos ou eletrodomésticos que podem acessar a Web.

Por favor faça isso. Torne a Web um lugar melhor, construindo-a com responsabilidade. Há uma Web cheia de recursos que podem ajudá-lo a fazer isso, mas aqui estão alguns para começar:

• Aprenda como marcar um documento em HTML. Tente pequenos exercícios de pensamento onde você olha para um cartaz de concerto ou uma página de jornal e imagine como ele seria estruturado em HTML. Se você tiver tempo, construa-o. Use esses aprendizados no seu trabalho do dia-a-dia.
• O MDN é um ótimo recurso para postagens de blogs, tutoriais e referências.
• Estenda a mão para as pessoas da comunidade. Leia as postagens do blog (como a recente postagem de Andy Bell sobre o uso de HTML semântico, Keep it simple ) e assista a vídeos .
• Quando eu estava chegando, o View Source ainda era útil. Nós coletivamente quebramos isso para as gerações atuais e futuras, mas eu gostaria de impressionar o poder que vem com saber como usar as ferramentas de desenvolvimento de um navegador.
• Descubra como as tecnologias assistivas acessam a Web
• Veja as especificações do HTML ou até mesmo apenas uma lista de elementos HTML e seus usos.
• Se você trabalha em uma equipe de desenvolvedores, tenha discussões sobre marcação. Tenha conversas animadas sobre se algo deve ser um tableou um dl ( The Description List Element – MDN ). É muito divertido, prometo.
• Descubra quem é o especialista em HTML da sua equipe e peça que revisem seu código. Se essa pessoa é eu, estou sempre feliz por ter essa discussão.