Компания HTML Academy временно не ведёт блог на Хабре
Ирина Мозес застала появление 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 классе за хорошую учёбу. Я закончила школу, два университета, а он всё это время был со мной. Многое вытерпел: бесконечные загрузки всяких файлов из интернета, установки программ и расширений, сутки работы над документами, многочасовые просмотры фильмов и сериалов. Конечно, иногда его чистили, проверяли на вирусы, удаляли лишнее, но время берёт своё. И вот потихоньку он начал притормаживать. То включается долго, то ничего не грузится. Но в сложных (или, скорее, нестандартных) программах я не работала, поэтому в целом меня всё устраивало. Пока я не начала изучать вёрстку.
Мне дали ссылку на макет и инструкции. Но почти сразу что-то пошло не так.
Не зря говорят, что геймдев безжалостен (и особенно к новичкам).
Rovio сделали Angry Birds с какой-там-сорок-с-лишним попытки, всякие новички регулярно проваливают ответственную задачу по доделыванию своих инди пиксельных платформеров на юнити, Башурова вон вообще забанил Эпл, хотя казалось бы — целый Башуров. Короче, жуть и ужас.
Тем страннее, что онлайн-школа по веб-разработке, в которой я работаю, решила ввязаться в геймдев и сделать свою игру. Да, в маркетинговых целях, но игру. Онлайн, настоящую. С игроками и призами. С основной валютой, побочной валютой, рейдами, боссами и пвп. До сих пор поверить не могу, как мы на это согласились.
Но пути назад нет. Я был на передовой этого безумия, видел всё и спешу рассказать, как наступить на все возможные грабли, когда, вообще-то, занимаешься обучением веб-разработке, но пытаешься сделать игру.
Резюме и ответ на тестовое задание — первое, что работодатель получает от кандидата. Если на этом этапе что-то пошло не так, до собеседования дело не доходит. Только кандидату не всегда сообщают, в чём конкретно проблема.
Мы попросили наших студентов, выпускников и подписчиков поделиться воспоминаниями о том, как они искали работу. Спустя месяцы кто-то так и не понял, почему его или её не пригласили на собеседование, — остались догадки и вопросы. Мы показали эти истории тем, кто нанимает разработчиков, и получился целый диалог — теперь на все неприятности с приёмом на рабоут можно посмотреть с обеих сторон. Каждый пункт прокомментировали технический директор HTML Academy Алексей Малейков и HR фронтенд-аутсорса «Лига А.» София Петлякова.
В итоге получился список советов и для соискателей, и для работодателей.
Дисклеймер: эта статья может оскорбить людей, которые считают, что в резюме можно обойтись и без фотографии.
Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном <div> и <span>) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.
Семантическая вёрстка — подход к разметке, который опирается не на внешний вид сайта, а на то, какой смысл у каждого блока на конкретной странице. Например, в этой статье есть заголовки разных уровней — это помогает читателю выстроить в голове структуру документа. Так и на странице сайта — только читатели будут немного другими.
Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но <div> — не приговор, и мы не призываем от него целиком отказываться. Ну и всегда можно договориться.
Где-то в мире живёт Серёжа — тридцатилетний продавец обуви и отец троих детей.
Представим, что Серёже в какой-то момент надоело продавать одинаковые туфли и захотелось делать одинаковые лендинги. Он почитал статьи в интернете, посмотрел 70-часовые разборы разборов по вёрстке на Ютубе, прошёл курсы. Даже купил «Алгоритмы» Скиены, но пока не открывал. В общем, любым способом научился программировать.
Как ему теперь поступить, чтобы мечта «максимально хорошо начать карьеру» стала реальностью (если это вообще выполнимо)? Как и в любой профессии, есть несколько вариантов. Сколько из них хороших — непонятно, будем разбираться.
Дисклеймер: осторожно, этот пост может задеть чувства Java и 1С-разработчиков, менеджеров проектов и владельцев парикмахерских.
Иногда дизайнер присылает заказчику макет, в котором есть всё, что просили, но каких-то элементов не хватает. Верстальщики, бэкендеры и любые другие технические специалисты, конечно, могут сделать недостающий элемент на своё усмотрение, но вряд ли перед релизом их будет волновать внешний вид. Вместо тщательно подобранных оттенков, правильной сетки и фирменных шрифтов, они добавят свои цвета, используют стандартные шрифты, и все усилия дизайнера пойдут насмарку.
Ну или вообще всё отправят на доработку и уже дизайнеру придётся потеть заново. Поэтому лучше иметь под рукой список необходимых элементов и заглядывать в него до того, как макет передадут в вёрстку. Это позволит сделать всё сразу, не возвращаться к проекту несколько раз и не переживать, что при сборке страницы что-то пойдёт не так. Хотя что-то, скорее всего, пойдёт.
Осторожно, в статье очень много иллюстраций.
Могу честно сказать — я побаиваюсь CSS. За последние годы он неслабо разросся, но вместе с этим пришла и монструозность (ну то есть чего вы всерьёз не можете сделать на CSS? Машину времени?). Мне сложно смотреть даже на селекторы, а из-за угла уже манят флексы с гридами и говорят — «псс, не хочешь немного сеток и бессоных ночей?». Больно думать о позиционировании текста на бесконечном холсте, когда всю жизнь расставлял кнопки мышкой на форме.
Хотя мне должно быть проще, ведь я смотрю на фронтенд с сишарповой стороны баррикад, и хоть что-то в разработке понимаю. А тем, кто только-только приходит в IT, не представляю вообще как быть. Это уже изнутри становится понятно, что какие-то темы не такие страшные, а вот снаружи далеко не всегда так.
Программирование — большой мир, который, как и любая профессия, давно оброс мифами и легендами. Мой рассказ сегодня о них, чтобы другим людям стало немного проще.
Люди меняют профессию по разным причинам — надоело, босс не очень или платят мало. Да и мало ли ещё что. Важно, что у всех есть вероятность однажды оказаться перед пустой формой для резюме вообще без опыта работы.
Не утверждаю, что все советы из этой статьи подходят всем без исключения, но что-то наверняка пригодится. В конце концов, даже самые опытные из нас когда-то впервые искали работу, а любой синьор однажды проваливал двоичный переворот сине-чёрного дерева пузырьком.
Осторожно, мы тут вовсю советуем загружать в резюме фотографию. Если не согласны — приходите в комментарии.
В этом туториале мы рассмотрим, как реализовать эффект drag & drop на ванильном JavaScript. Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса. Drag & drop может понадобиться при сортировке карточек в таск-трекере, переносе между списками или вообще при перетаскивании файлов в окно браузера.
Мы разберём drag & drop на примере сортировки. Для этого создадим интерактивный список задач.
Однажды «Лига А.» искала веб-разработчика примерно с годом опыта работы — ни больше, ни меньше. Мы завели вакансию, получили много резюме и много на что насмотрелись — в том числе, на кучу ошибок, которых легко можно было бы избежать.
Этот пост — попытка структурировать наш опыт в поиске разработчиков и поделиться полезными советами для всех, кто ищет работу.
На Хабре уже было 244 статьи о карьере, тысячи комментариев о плохих собеседованиях разработчиков и множество недовольных программистов всех сортов и расцветок. Не то что бы это был необходимый минимум для успешного найма, но когда начал давать тестовые задания, становится сложно остановиться.
Верстальщик — такой человек, который хорошо разбирается в HTML и CSS и немного знает JavaScript. Ну то есть понимает, как в целом всё работает, но сильно не погружается. При этом бывает непросто выбрать хорошего верстальщика, потому что всех учат по-разному.
Чтобы решить эту проблему, собираем в одном месте опыт десятков собеседований с верстальщиками. Вместе с Дашей Владыко из фронтенд-аутсорса «Лига А.» рассказываем, на что смотреть в тестовом задании джунов и мидлов, и как отличить хороший результат от плохого. Плюс несколько практических советов — например, как выбирать плагины и составить тестовое задание.
В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? Как правильно их применять?
Давайте разберёмся в отличиях подходов и попробуем сформулировать один общий вместо трёх.
Нужны ли фронтендеру алгоритмы и паттерны проектирования?
На самом деле, наверняка вы уже их используете, но можете ещё лучше.
Расскажите про ресеты и нормалайзы, что лучше использовать?
Знаете, это как отвёртка и молоток — что лучше? Все хороши.
Когда display: none, а когда visibility: hidden?
Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут.
Что такое кроссбраузерная вёрстка? Какие есть браузеры и нужен ли пиксель-пёрфект?
