HTML — это сеть ~ Пит Ламберт

Что за история с Frontend Engineers и HTML в наши дни? В последнее время я разговаривал с несколькими людьми, которые просто не понимают этого. Я имею в виду, они кое-что понимают. Они понимают, что такое div и что такое span и пока все выглядит хорошо и работает, когда они нажимают на него, они достаточно счастливы. Так много людей, о которых я говорил, отвечали на вопросы о HTML такими вещами, как «О, я делаю все в React или Vue в эти дни». Но на самом деле, не имеет значения, что все, что вы пишете — это Javascript, потому что, если вы создаете веб-сайты, то самое важное, что вы делаете, — это HTML. HTML — это Интернет

.

Это все о том, что потребляет потребитель. Это пользовательский интерфейс и UX. Это весь пакет. В порядке убывания важности это HTML, CSS и поведение (которое может быть предоставлено Javascript, а может и не быть).

Моя большая проблема — основание этой технологической пирамиды. Самый низкий общий знаменатель Интернета. Основа. Ритм-секция. Дамочки в паутине мелочи. Это HTML. И мне становится все более очевидным, что существует целый ряд инженеров внешнего интерфейса которые не знают и не понимают передний край технологий внешнего интерфейса.

Веб-страница — это документ. Компонент, будь то часть шаблона блога, новостной сайт, панель маркетинговой статистики или форма регистрации, является частью документа. Документы имеют структуру. В Интернете речь идет не только о визуальных элементах или архитектуре, предоставляемой вашей платформой, но и о выборе семантически правильных элементов, которые обеспечивают правильную структурную отформатированность вашей веб-страницы, компонента или чего-либо еще. Заголовки должны быть заголовками, списки должны быть списками, кнопки должны быть кнопками, а таблицы должны быть таблицами. Вы можете стилизовать их (в значительной степени) так, как вам нравится — заголовок не обязательно должен быть большим и жирным с нижним полем. Это зависит от вас, но это определенно должен быть заголовок, и я буду бороться с вами, если вы сделаете это div .

HTML нетрудно освоить должным образом, особенно если вы уже привыкли изучать Javascript-фреймворки. Я не посчитал, но я уверен, что там всего около 116 элементов, и большинство из них вам обычно не нужны. Почему бы тебе не изучить это?

Я — парень типа фронтэнда. Мой опыт в HTML и CSS, поэтому мне легко лирично понять, почему все должны изучать то, что я уже знаю (для протокола, я не знаю всего этого — у нас все еще идут горячие споры о том, что лучше способ разметки определенного компонента может быть). Это не значит, что моя работа важнее вашей. Если вы пишете код, который отображает вещи в браузере, эта будет вашей работой.

Речь идет о удобстве использования и доступности. Если вы не думаете, что семантическая структура вашей веб-страницы или приложения важна, вы, по сути, говорите: «Ну, это работает для меня в моем браузере, отправьте его». Я не думаю, что вы сделали бы это с вашим Javascript, и вам определенно не следует делать это с вашим CSS. Поисковым системам нужно читать ваш контент, а не наслаждаться навороченными анимациями или модными градиентами. Программа для чтения с экрана должна читать ваш контент. Пользователи клавиатуры должны читать ваш контент. Кто знает, какая технология последует дальше и как она будет использовать ваше приложение, но я готов поспорить, что мой нижний биткойн будет работать лучше, если он сможет легко читать, анализировать и просматривать ваш контент. То, как эти вещи читают ваш контент, заключается в том, что они знают, что это действительно контент, а не просто строки текста, завернутые в бессмысленные теги. Они знают, что такое таблица и как ее представить, знают, что такое список и как его представить, знают, что такое кнопка и что такое флажок. Сделайте все из div и им придется чертовски усердно работать, чтобы понять это.

«Но мой выбор позаботится обо всем этом. Я просто пишу шаблоны .jsx . »

Нет. Напишите правильный HTML в вашем JSX. Ты можешь это сделать. Просто потому, что вы используете React или Vue или что-то еще, вам не нужно делать все из div s. Вы не.

«Эта библиотека добавляет атрибуты WAI-Aria ко всему, поэтому я знаю, что она доступна, потому что они уже сделали свою работу».

Великий. Если вы написали правильный HTML, большинство этих атрибутов вообще не понадобились бы. Вы получаете целую кучу специальных возможностей бесплатно, просто используя реальную кнопку вместо div со слушателем onClick . Бесплатно. Это доступность, производительность и пользовательский опыт, бесплатно. БЕСПЛАТНО!

Это действительно важно. Отказ от этих вещей медленно (на самом деле не так медленно) разрушает Всемирную паутину. По крайней мере, это усложняет использование для людей, которые будут использовать ваш продукт. Если вы называете себя инженером внешнего интерфейса, вы обязаны изучать и использовать основы — единственное, что характерно для всех браузеров, платформ, устройств или бытовых устройств, имеющих доступ к Интернету.

Пожалуйста, сделайте это. Сделайте Интернет лучше, создав его ответственно. В сети полно ресурсов, которые могут помочь вам в этом, но вот несколько для начала:

• Узнайте, как разметить документ в HTML. Попробуйте небольшие упражнения для мышления, где вы смотрите на концертный плакат или газетную страницу и представляете, как это будет структурировано в HTML. Если у вас есть время, постройте его. Используйте эти знания в своей повседневной работе.
• MDN — отличный ресурс для публикаций в блогах, учебных пособий и ссылок.
• Протяни людям в общине. Читайте посты в блоге (например, недавний пост Энди Белла об использовании семантического HTML, сделайте его проще) и смотрите видео.
• Когда я подходил, View Source был еще полезен. Мы коллективно справились с этим для нынешнего и будущих поколений, но я бы поразил вас силой, которую дает знание того, как использовать инструменты разработки браузера
• Узнайте, как вспомогательные технологии имеют доступ к Интернету
• Посмотрите на спецификации HTML, или даже просто на список элементов HTML и их использования.
• Если вы работаете в команде разработчиков, обсудите разметку. Ведите живые разговоры о том, должно ли что-то быть таблицей или дл
  (Элемент списка описания — MDN). Обещаю, это очень весело.
• Узнайте, кто является экспертом по HTML в вашей команде, и попросите их просмотреть ваш код. Если этот человек — я, я всегда рад этому обсуждению.

Если вы хотите обсудить что-либо из этого, я рад этому чату. Смотрите мою контактную страницу, чтобы узнать, как связаться с нами.