Фавиконка — это иконка, которая отображается во вкладке браузера перед названием страницы, в закладках и на рабочем столе для веб-приложений.

Фавиконки — ответственность верстальщика. Под катом рассказ о том, как подключить обязательную фавиконку и каким должен быть набор иконок, как использовать иконки в SVG, что нужно дополнительно сделать для устройств от Apple, и почему хорошо использовать webmanifest для подключения всех фавиконок к вашему сайту.

Среди разработчиков курсов ходит легенда об авторе, который смог перед стартом курса полностью реализовать учебный проект и подобрать материалы, опираясь на код этого проекта. Годом позже этот автор собрал все яйца в «Ну, погоди» и посмотрел финальный мультик, а ещё через год полностью прошёл тетрис.

Пытались ли вы посадить рядом трёх взрослых мужиков и сделать так, чтобы они договорились о том, каким должен быть код? Ведь самое сложное не написать код, а договориться о конечном варианте. И тогда происходит жара, шантаж, и торги разработческими фетишами: «Ладно, давай обернём эти поля формы в тег <p>, а за это ты сможешь ставить точки в конце альтов»

Пытались ли вы это сделать на десяти проектах подряд? Вот, то-то же. А теперь немного хронологии.

Вот она, лежит у меня на столе. Прямиком из 2008 года, ждала, чтобы я её прочитал и научился делать сайты. Самостоятельно. Самоучитель же. Триумф!

А если тут ещё и предлагают самый быстрый способ, то точно успех, смогу всему научиться, пока пишу эту статью. Смогу ведь, да?

В общем, давайте вместе полистаем старую книжку.

CSS-стили можно встроить прямо в HTML, импортировать, создать с помощью JavaScript или подключить из отдельного файла. Среди разработчиков хорошим тоном считается использовать последний способ, то есть писать стили в отдельном файле и затем подключать их с помощью тега link. А вот внутренних стилей стараются избегать, хотя их применение тоже бывает оправдано.

Но в очень редких случаях. И лучше ими не вообще не пользоваться, если нет необходимости. В статье разберём, почему так, и что с этим вообще теперь делать.

6 лет назад мы обсуждали с сообществом критерии качества вёрстки, которые мы используем в обучении, чтобы наши выпускники радовали рынок своими умениями и подходом к работе.

С тех пор в разработке интерфейсов произошло море изменений: сначала в продакшн пришли флексы, потом подтянулись гриды, умер IE, все переехали из Фотошопа в Фигму, и много чего ещё. Каждое это изменение влияло на наши критерии, и мы постоянно их дорабатывали.

Сейчас пришло время обсудить с сообществом обновлённые критерии.

В посте — система, которую мы планируем внедрить на осенних запусках курсов. Мы публикуем её сейчас, чтобы собрать обратную связь от сообщества и внести изменения в критерии. Приглашаем к обсуждению всех, кто занимается веб-разработкой.

Новичкам может быть сложно создать сайт, доступный лицам с ограниченными возможностями. Мы решили собрать в один материал обширный ассортимент инструментов, проверяющих доступность страниц — от одноразовых букмарклетов до полноценных приложений. Надеемся, он поможет вам погрузиться в мир создания доступных сайтов.

Это перевод статьи Nic Chan «A Complete Guide To Accessibility Tooling» из журнала Smashing Magazine.

Что делает разработчик, если ему нужно раскрасить кнопку в красный цвет? Ищет в npm пакет, окрашивающий кнопки в красный цвет

В реестре npm — более миллиона пакетов почти для чего угодно. Например, с их помощью можно минифицировать код, удалять и переименовывать файлы, создавать спрайты, отправлять сообщения в центр уведомлений операционных систем, работать с препроцессорами Less и Sass и выполнять многие другие действия, упрощающие и автоматизирующие работу над проектом. 

Конечно, бездумно использовать менеджер пакетов не стоит: некоторые задачи можно решить и без него. Но всё же npm-пакеты полезны и постоянно применяются в веб-разработке. Поэтому важно знать, как их правильно выбрать, где искать и на что обратить внимание перед установкой.

Ирина Мозес застала появление Arpanet и победу СССР над США в баскетбольном олимпийском турнире. Уже больше 30 лет она занимается программированием, но веб-разработку начала изучать только 5 лет назад. Сегодня Ирина работает ревьюером в крупной компании, а её упорству и интересу к жизни можно только позавидовать.

Разговоры о том, останутся ли верстальщики без работы, длятся годами. Как только появляется новая программа или плагин для автоматизации вёрстки, специалистам начинают тут же пророчить бессрочный отпуск. Но стоит ли всерьёз относиться к таким разговорам?

Уже сейчас есть множество конструкторов, которые позволяют создавать сайты без знания HTML и CSS. Существуют плагины и программы, которые сами создают код на основе макета. Есть даже нейросети, почти полностью автоматизирующие процесс вёрстки. Но ни одна из этих программ всё еще не смогла полностью заменить человеческий труд и лишить верстальщиков работы.

Рекомендуемый минимум

Ниже приведены основные элементы для любого веб-документа (веб-сайта/приложения):

meta charset — определяет кодировку веб-сайта, стандартом является utf-8.

meta name="viewport" — настройки viewport, связанные с мобильной отзывчивостью

width=device-width — физическая ширина устройства (отлично подходит для мобильных устройств!)

initial-scale=1 — начальный масштаб, 1 означает отсутствие масштабирования

Элементы

Допустимые элементы <head> включают meta, link, title, style, script, noscript и base.

Эти элементы предоставляют информацию о том, как документ должен восприниматься и отображаться веб-технологиями, например, браузерами, поисковыми системами, ботами и так далее.

При вёрстке макета не всегда понятно, что перед нами — кнопка или ссылка. Внешне эти элементы могут быть очень похожи, но их функции различаются и браузер реагирует на них по-разному. Поэтому неправильный выбор может привести к ошибкам в работе сайта. Рассказываю, как больше никогда не ошибаться в выборе.

В начале какого-нибудь фитнес-курса обычно объясняют, какой понадобится реквизит: специальная палка, мячи разных размеров, резинка, пенный ролл. На курсе по вёрстке сложнее. Понятно, что нужен компьютер, там нужны программы. Чего тут ещё рассказывать? Поэтому как филолог, который раньше никогда не писал код, я даже подумать не могла, что собственный ноутбук будет мешать мне учиться верстать.

Ноутбук мне подарили ещё в 10 классе за хорошую учёбу. Я закончила школу, два университета, а он всё это время был со мной. Многое вытерпел: бесконечные загрузки всяких файлов из интернета, установки программ и расширений, сутки работы над документами, многочасовые просмотры фильмов и сериалов. Конечно, иногда его чистили, проверяли на вирусы, удаляли лишнее, но время берёт своё. И вот потихоньку он начал притормаживать. То включается долго, то ничего не грузится. Но в сложных (или, скорее, нестандартных) программах я не работала, поэтому в целом меня всё устраивало. Пока я не начала изучать вёрстку.

Мне дали ссылку на макет и инструкции. Но почти сразу что-то пошло не так.

Найти несколько DOM-элементов и получить к ним доступ из JavaScript можно разными способами: querySelectorAll, getElementsByTagName, children и так далее. В итоге в каждом случае будет возвращена коллекция — сущность, которая похожа на массив объектов, но при этом им не является, на самом деле это набор DOM-элементов.

Но во время работы с коллекциями можно столкнуться с поведением, которое покажется странным, если не знать один нюанс — они бывают живыми (динамическими) и неживыми (статическими). То есть либо реагируют на любое изменение DOM, либо нет. Вид коллекции зависит от способа, с помощью которого она получена. Рассмотрим на примере.

Не зря говорят, что геймдев безжалостен (и особенно к новичкам).

Rovio сделали Angry Birds с какой-там-сорок-с-лишним попытки, всякие новички регулярно проваливают ответственную задачу по доделыванию своих инди пиксельных платформеров на юнити, Башурова вон вообще забанил Эпл, хотя казалось бы — целый Башуров. Короче, жуть и ужас.

Тем страннее, что онлайн-школа по веб-разработке, в которой я работаю, решила ввязаться в геймдев и сделать свою игру. Да, в маркетинговых целях, но игру. Онлайн, настоящую. С игроками и призами. С основной валютой, побочной валютой, рейдами, боссами и пвп. До сих пор поверить не могу, как мы на это согласились.

Но пути назад нет. Я был на передовой этого безумия, видел всё и спешу рассказать, как наступить на все возможные грабли, когда, вообще-то, занимаешься обучением веб-разработке, но пытаешься сделать игру.

Резюме и ответ на тестовое задание — первое, что работодатель получает от кандидата. Если на этом этапе что-то пошло не так, до собеседования дело не доходит. Только кандидату не всегда сообщают, в чём конкретно проблема.

Мы попросили наших студентов, выпускников и подписчиков поделиться воспоминаниями о том, как они искали работу. Спустя месяцы кто-то так и не понял, почему его или её не пригласили на собеседование, — остались догадки и вопросы. Мы показали эти истории тем, кто нанимает разработчиков, и получился целый диалог — теперь на все неприятности с приёмом на рабоут можно посмотреть с обеих сторон. Каждый пункт прокомментировали технический директор HTML Academy Алексей Малейков и HR фронтенд-аутсорса «Лига А.» София Петлякова.

В итоге получился список советов и для соискателей, и для работодателей.

Дисклеймер: эта статья может оскорбить людей, которые считают, что в резюме можно обойтись и без фотографии.

Самый простой вариант — вообще не подключать сторонние шрифты. Можно пользоваться стандартными, которые предустановлены в большинстве операционных систем. Это хорошо знакомые Arial, Times New Roman и так далее — эти шрифты называются веб-безопасными, достаточно просто указать название одного из таких шрифтов в коде, и всё будет работать. 

Но тогда и статья была бы не нужна. Да и чаще всего дизайн макета не позволяет обойтись веб-безопасным шрифтом и требует использовать какой-то нестандартный. Поэтому рассказываю, что с этим делать.

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном <div> и <span>) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

Семантическая вёрстка — подход к разметке, который опирается не на внешний вид сайта, а на то, какой смысл у каждого блока на конкретной странице. Например, в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.

Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но <div> — не приговор, и мы не призываем от него целиком отказываться. Ну и всегда можно договориться.

Где-то в мире живёт Серёжа — тридцатилетний продавец обуви и отец троих детей. 

Представим, что Серёже в какой-то момент надоело продавать одинаковые туфли и захотелось делать одинаковые лендинги. Он почитал статьи в интернете, посмотрел 70-часовые разборы разборов по вёрстке на Ютубе, прошёл курсы. Даже купил «Алгоритмы» Скиены, но пока не открывал. В общем, любым способом научился программировать. 

Как ему теперь поступить, чтобы мечта «максимально хорошо начать карьеру» стала реальностью (если это вообще выполнимо)? Как и в любой профессии, есть несколько вариантов. Сколько из них хороших — непонятно, будем разбираться.

Дисклеймер: осторожно, этот пост может задеть чувства Java и 1С-разработчиков, менеджеров проектов и владельцев парикмахерских.

Иногда дизайнер присылает заказчику макет, в котором есть всё, что просили, но каких-то элементов не хватает. Верстальщики, бэкендеры и любые другие технические специалисты, конечно, могут сделать недостающий элемент на своё усмотрение, но вряд ли перед релизом их будет волновать внешний вид. Вместо тщательно подобранных оттенков, правильной сетки и фирменных шрифтов, они добавят свои цвета, используют стандартные шрифты, и все усилия дизайнера пойдут насмарку. 

Ну или вообще всё отправят на доработку и уже дизайнеру придётся потеть заново. Поэтому лучше иметь под рукой список необходимых элементов и заглядывать в него до того, как макет передадут в вёрстку. Это позволит сделать всё сразу, не возвращаться к проекту несколько раз и не переживать, что при сборке страницы что-то пойдёт не так. Хотя что-то, скорее всего, пойдёт.

Осторожно, в статье очень много иллюстраций.

Могу честно сказать — я побаиваюсь CSS. За последние годы он неслабо разросся, но вместе с этим пришла и монструозность (ну то есть чего вы всерьёз не можете сделать на CSS? Машину времени?). Мне сложно смотреть даже на селекторы, а из-за угла уже манят флексы с гридами и говорят — «псс, не хочешь немного сеток и бессоных ночей?». Больно думать о позиционировании текста на бесконечном холсте, когда всю жизнь расставлял кнопки мышкой на форме. 

Хотя мне должно быть проще, ведь я смотрю на фронтенд с сишарповой стороны баррикад, и хоть что-то в разработке понимаю. А тем, кто только-только приходит в IT, не представляю вообще как быть. Это уже изнутри становится понятно, что какие-то темы не такие страшные, а вот снаружи далеко не всегда так.

Программирование — большой мир, который, как и любая профессия, давно оброс мифами и легендами. Мой рассказ сегодня о них, чтобы другим людям стало немного проще.