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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Когда display: none, а когда visibility: hidden?

Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут.

Что такое кроссбраузерная вёрстка? Какие есть браузеры и нужен ли пиксель-пёрфект?

Есть две спецификации HTML: W3C и WHATWG, какой из них верить?

Верьте той, которая больше нравится, но не забывайте сверяться с браузерами.

Менеджер и дизайнер заставляют везде убирать аутлайн. Расскажите им, что это плохая идея!

Вы совершенно правы, с удовольствием расскажем.

Как правильно понимать принцип прогрессивного улучшения?

Давайте заодно разберёмся и с постепенной деградацией.

Кому нужны флексы, если на них не делают сайты?

Делают, 12% сайтов уже используют флексы. А нужны они всем нам, чтобы было удобнее верстать.

Зачем нужны заголовки и какие теги для них использовать?

Этот вопрос нам задают чаще всего.

В чём разница между нейтив JavaScript и TypeScript?

Зачем нужны кастомные свойства и как они работают?

Следуете ли вы БЭМу, и насколько он востребован вне Яндекса?

Как правильно вставлять SVG?

Нужна ли математика программисту?

Можно ли вкладывать элемент <section> в <footer>?