Как стать автором
Обновить

Компания HTML Academy временно не ведёт блог на Хабре

Сначала показывать

«Лучше бы пошла в лес погуляла!», или как поменять профессию спустя 30 лет работы

Время на прочтение 4 мин
Количество просмотров 7.3K

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

Читать далее
Всего голосов 13: ↑10 и ↓3 +7
Комментарии 9

Заменят ли верстальщиков нейросети и конструкторы для создания сайтов?

Время на прочтение 6 мин
Количество просмотров 21K

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

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

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Комментарии 11

Что можно положить в тег <head>

Время на прочтение 14 мин
Количество просмотров 30K

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

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

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

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

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

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

Элементы

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

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

Читать далее
Всего голосов 35: ↑35 и ↓0 +35
Комментарии 23

Используйте ссылки и кнопки правильно. Пожалуйста

Время на прочтение 3 мин
Количество просмотров 36K

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

Читать далее
Всего голосов 31: ↑30 и ↓1 +29
Комментарии 19

Нужно ли покупать новый компьютер для вёрстки

Время на прочтение 4 мин
Количество просмотров 13K

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

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

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

Читать далее
Всего голосов 22: ↑16 и ↓6 +10
Комментарии 50

Живые и неживые коллекции в JavaScript

Время на прочтение 4 мин
Количество просмотров 7.1K

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

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

Читать далее
Всего голосов 11: ↑6 и ↓5 +1
Комментарии 16

Не лезьте в геймдев, он вас сожрёт (но вам понравится)

Время на прочтение 6 мин
Количество просмотров 10K

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

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

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

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

Читать далее
Всего голосов 18: ↑9 и ↓9 0
Комментарии 5

Резюме, тестовые и прочие неприятности

Время на прочтение 9 мин
Количество просмотров 20K

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

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

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

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

Читать далее
Всего голосов 12: ↑10 и ↓2 +8
Комментарии 0

Нестандартные шрифты: как подключить и оптимизировать

Время на прочтение 8 мин
Количество просмотров 60K

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

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

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Комментарии 5

Забудьте про div, семантика спасёт интернет

Время на прочтение 6 мин
Количество просмотров 111K

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

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

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

Читать далее
Всего голосов 56: ↑50 и ↓6 +44
Комментарии 55

Все научились программировать. А дальше-то что?

Время на прочтение 4 мин
Количество просмотров 32K

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

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

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

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

Читать далее
Всего голосов 45: ↑29 и ↓16 +13
Комментарии 77

Что должно быть в макете сайта: шпаргалка для дизайнера

Время на прочтение 6 мин
Количество просмотров 15K

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

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

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

Читать далее
Всего голосов 9: ↑8 и ↓1 +7
Комментарии 16

«Я никогда не научусь верстать» и другие мифы о разработке

Время на прочтение 5 мин
Количество просмотров 14K

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

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

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

Читать далее
Всего голосов 4: ↑3 и ↓1 +2
Комментарии 6

Что написать в резюме, если нет опыта работы

Время на прочтение 6 мин
Количество просмотров 44K

Люди меняют профессию по разным причинам — надоело, босс не очень или платят мало. Да и мало ли ещё что. Важно, что у всех есть вероятность однажды оказаться перед пустой формой для резюме вообще без опыта работы.

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

Осторожно, мы тут вовсю советуем загружать в резюме фотографию. Если не согласны — приходите в комментарии.

Читать далее
Всего голосов 17: ↑8 и ↓9 -1
Комментарии 9

Как реализовать drag&amp;drop на чистом JavaScript

Время на прочтение 9 мин
Количество просмотров 41K

В этом туториале мы рассмотрим, как реализовать эффект drag & drop на ванильном JavaScript. Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса. Drag & drop может понадобиться при сортировке карточек в таск-трекере, переносе между списками или вообще при перетаскивании файлов в окно браузера.

Мы разберём drag & drop на примере сортировки. Для этого создадим интерактивный список задач.

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Комментарии 5

17 ошибок, которые испортят любое резюме

Время на прочтение 10 мин
Количество просмотров 9.5K

Однажды «Лига А.» искала веб-разработчика примерно с годом опыта работы — ни больше, ни меньше. Мы завели вакансию, получили много резюме и много на что насмотрелись — в том числе, на кучу ошибок, которых легко можно было бы избежать.

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

Читать далее
Всего голосов 24: ↑9 и ↓15 -6
Комментарии 20

Тестовое задание для фронтендера

Время на прочтение 6 мин
Количество просмотров 32K

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

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

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

Читать далее
Всего голосов 9: ↑8 и ↓1 +7
Комментарии 23

Адаптивная вёрстка

Время на прочтение 4 мин
Количество просмотров 50K


В чём разница между резиновой, адаптивной и отзывчивой вёрсткой? Как правильно их применять?

Давайте разберёмся в отличиях подходов и попробуем сформулировать один общий вместо трёх.

Поехали
Всего голосов 28: ↑23 и ↓5 +18
Комментарии 13

Зачем нужны алгоритмы и паттерны

Время на прочтение 3 мин
Количество просмотров 13K


Нужны ли фронтендеру алгоритмы и паттерны проектирования?

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

Давайте разберемся!
Всего голосов 27: ↑6 и ↓21 -15
Комментарии 17

Нормальный сброс

Время на прочтение 4 мин
Количество просмотров 16K


Расскажите про ресеты и нормалайзы, что лучше использовать?

Знаете, это как отвёртка и молоток — что лучше? Все хороши.

Давайте копнём глубже.
Всего голосов 20: ↑14 и ↓6 +8
Комментарии 7