Уже который год во всех слаках, дискордах, телеграмах и форумах главный вопрос о любом языке программирования звучит так — стоит его учить В ЭТОМ ГОДУ, или лучше уже не надо? Взять какой-нибудь PHP — его же вечно хоронят, и всё никак.

Есть и много других вопросов. Например:
— Что выбрать — PHP, Python, Go или Node.js? Или Visual Basic? Или С? Может, Brainfuck?
— Почему все говорят про Python? Он крутой? Круче, чем всё?
— Бэкенд — это про логику и алгоритмы? Матан нужен? А чувство прекрасного?
— У фронтендеров React, Vue и миллионы других фреймворков, о которых все слышали, а что у бэкендеров? Терпение?
— Придётся ли устанавливать Linux, чтобы работать с бэкендом?
— Почему о фронтендерах все говорят, а о бэкендерах нет? Это потому что у них зарплата 20 тысяч?

Как хорошо, что спрашивать не стыдно, а отвечать — бесплатно. Поэтому мы попробуем ответить, а вы присоединяйтесь к обсуждению, потому что в таком деле у всех свои ответы.

Самое важное — отказ от поддержки старых браузеров в 2021. Майки окончательно убили IE, поэтому разработчикам станет проще использовать классные технологии. Гриды (83%) и флексбоксы (99%) захватили всё. TypeScript есть в 70% вакансий для мидлов. 2022 будет годом TypeScript. 

Container Queries — переосмысление подхода к медиавыражениям. Если медиавыражение зависит от размера экрана, то Container Queries опирается на размер блока. С Cascade Layers мы можем лучше управлять всеми слоями отрисовки на сайте. Это самое большое изменение в CSS на уровне флексов и гридов.

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

Эти и другие прогнозы о технологиях, зарплатах, вакансиях и навыках в 2022 ждут под катом.

Есть много способов сэкономить время и упростить жизнь разработчика. Но они кажутся такими сложными и непонятными, что знакомство с ними постоянно откладывается. И зря: сегодня мы расскажем, как автоматизировать работу, используя вспомогательные инструменты.

Шаблонизаторы для HTML — инструмент, который позволяет проще писать разметку, делить её на компоненты и связывать с данными. Их главное преимущество — больше не нужно писать повторяющийся код несколько раз. Это кажется не такой большой проблемой, но всё же разработчикам часто приходится тратить на это время.

Мы в HTML Academy занимаемся обучением фронтенд-разработке. За последние 8 лет мы выпустили на рынок большое количество начинающих специалистов, которые устроились на работу и начали приносить пользу рынку.

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

Чтобы понять, чему стоит учить будущего мидла в первую очередь, мы провели большое исследование. В нём мы проанализировали больше тысячи вакансий и опросили больше 500 мидлов. В итоге узнали много нового.

Так, например, оказалось, что средняя зарплата мидлов с 1-3 годами опыта в продуктовых компаниях — 219 тыс ₽, TypeScript — на коне, а алгоритмы и структуры данных чаще нужны фронтендерам после 6 лет опыта.

Всё остальное — в нашем большом исследовании под катом.

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

В подкаст «Да как так-то» пришёл Евгений Кот, директор по развитию пражского отделения Wrike, активный спикер и Google Developer Expert. Мы поговорили с ним про удалённую работу: как организовать команду, какие есть плюсы и минусы у удаленки, почему люди комитят в три часа утра, и как организовать рабочее пространство дома.

Ведущие: Женя — Шкляр, редактор из Академии. Лёша — Симоненко, директор по развитию в Академии. Приводим полный текст разговора для тех, кто больше любит читать, а не слушать.

Отношение к выключенным камерам на созвонах

Лёша: У меня плохое отношение к выключенным камерам. Мы же в офисе не ставим перед собой чёрное полотно, чтобы закрыть лицо. Это нормальный рабочий момент. Я считаю, что камеру на митинге надо включать.

Женя: Я согласен. Могут быть исключения, когда включать не надо, но я даже не смогу их сейчас придумать.

Евгений: Я спрашиваю всех, кто выключает, почему они это делают. Потому что я тоже согласен, что это не очень. Но многие программисты говорят, что не включают камеру, чтобы менее вовлекаться. «Если митинг не очень нужен, то включу камеру, когда скажут, а так я могу сделать что-то полезное за это время» — такая позиция.

Второй сезон подкаста «Да как так-то» уже почти полностью вышел, а значит, мы начинаем делиться историями наших гостей и в текстовом формате. Сегодня говорим о переезде в Германию. Наш гость Евгений Казаков работает фронтенд-разработчиком в Берлине, куда переехал три года назад из Петербурга. 

Евгений ответил на все наши хитрые вопросы, рассказал про программу Blue Card и поездку на собеседование, помог пересчитать евро в рубли и объяснил, почему 48 000 евро в год — не такая уж большая зарплата.

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

Перед началом чтения пройдите простой тест — каким будет значение свойства background-color в первом и во втором варианте, и почему именно так?

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

p.s. Если у вас отключены картинки в ленте на Хабре, то сразу заходите под кат — тест дублируется и там.

Быстрые сайты любят и пользователи, и поисковики.

С первыми всё просто: если страница долго грузится, пользователь её закроет и перейдёт на другой сайт. С поисковиками похожая история: скорость загрузки, скорее всего, влияет на ранжирование сайта в поисковой выдаче.

Lighthouse — один из известных инструментов для проверки производительности сайтов. Он тестирует сайт, показывает оценку производительности и даёт конкретные рекомендации: что можно улучшить, чтобы сделать сайт быстрее.

Lighthouse можно запустить тремя способами:

С помощью Node CLI. Для этого установите в свой проект пакет Lighthouse с помощью команды npm install -g lighthouse.

Через расширение для браузера Chrome или Firefox. Установите расширение, затем откройте свой сайт и запустите проверку с помощью кнопки Generate report.

С помощью инструментов разработчика — Chrome DevTools. Чтобы запустить проверку, откройте инструменты разработчика, переключитесь на вкладку Lighthouse и нажмите на кнопку Generate report.

Серёжа решил заняться собой и записался в спортзал — тщательно всё взвесил (no pun intended), понял, зачем ему это надо, приценился и купил абонемент. А потом что-то пошло не так и Серёжа приуныл.

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

Вот бы в параллельную реальность, где и напишут, и выслушают, и совет добрый дадут, если попросишь. Она, к счастью, есть, но не в спортзале (сорян).

В HTML Academy есть адвайзеры — они подбадривают студентов, которые забросили курс или застряли на полпути, помогают разобраться, что пошло не так, и вообще готовы помочь в любой момент. Давайте познакомимся с ними — встречайте Карину и Яну.

Олег — фронтенд-разработчик в крупном видеосервисе (и попутно выпускник Академии). Он только недавно начал работать, но уже согласился ответить на некоторые вопросы от подписчиков нашего комьюнити-чата в Телеграме, которым интересно, как всё устроено в реальной работе.

Что нужно делать? Дают ли коммитить в мастер? Чего больше — вёрстки или JavaScript? Действительно ли на практике нужны все глупые вопросы из интервью?

Давайте разберёмся вместе.

Ретиной называют дисплеи Apple с повышенной плотностью пикселей на квадратный дюйм. Впервые о них заговорили в 2010 году, когда Стив Джобс презентовал iPhone 4. Новый на тот момент смартфон получил экран с плотностью 326 PPI — в два раза выше, чем у его предшественника iPhone 3GS.

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

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

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

Давайте без лишних слов разберёмся, какие бывают типы значений у CSS-свойств, и определим, чем отличаются абсолютные и относительные значения (все эти em, rem, vh, vw), как задать красный цвет шестью способами, и зачем нужны CSS-директивы.

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

Краткое содержание: проверка кода по стандартам, проверка вёрстки и стилей, работа с кодом, работа с графикой (SVG, фавиконки, конвертеры и сжималки), работа с текстом (типографы и конвертеры всего во всё).

Дисклеймер: подборка не претендует на полноту, но в комментариях собираем другие полезные инструменты.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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