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

Чаще всего дизайнер отрисовывает анимацию в специальной программе, например, After Effects, и присылает верстальщику видео, по которому нужно повторить анимацию. А вот как реализовать эту идею — решать разработчику. Он может использовать три вида анимаций: CSS-анимации, SVG-анимации или JavaScript-анимации.

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

Анимация на КПДВ: Дилан Баунманн, codepen.

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 5—11 апреля.

Спецификации

Опубликован первый рабочий черновик (First Public Working Draft) Region capture.

Последний призыв к рассмотрению предлагаемых изменений в Media Queries Level 3.

W3C приглашает к реализации WebXR Device API.

Спецификации preload становится отключенным черновиком (Discontinued Draft), чтобы продолжить развитие в HTML living standard.

Письмо генерального директора W3С к 33-й годовщине интернета.

Больше новостей о HTML, CSS, JavaScript и инструментах разработчика — под катом.

Рассмотрим простой пример, чтобы понять, зачем нужны регулярные выражения. Допустим, перед нами стоит задача — найти и заменить местоимение 'ее' на 'его' в строке 'Быстрее всего мы догоним ее на машине'. 

Самое очевидное решение — использовать прямую замену, применив встроенную в JavaScript функцию replace():

'Быстрее всего мы догоним ее на машине'.replace('ее', 'его');

Однако 'ее' также является окончанием слова 'Быстрее', а .replace() заменит первое вхождение подстроки. В итоге мы получим ожидаемо неверный результат: 'Быстрего всего мы догоним ее на машине'. Поэтому необходимо проверить строку на наличие символа, стоящего перед 'ее': если это пробел, можно делать замену.

Больше примеров и неочевидные выводы о том, нужны ли фронтендерам регулярки — внутри статьи.

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

Мы продолжаем цикл статей об инструментах разработчика — Chrome DevTools. В первых двух частях мы уже познакомились с вкладками Elements, Console, Sources и Network и разобрались с их основными функциями.

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

Давайте разберёмся, какие задачи разработчика можно решить с помощью Chrome DevTools.

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

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

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

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

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

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

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

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