Pull to refresh
26
0

Обучаем веб-разработке и меняем жизни

Send message

Всё о веб-анимациях в 2022

Reading time 7 min
Views 38K

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

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

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

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

Читать далее
Total votes 20: ↑19 and ↓1 +18
Comments 8

Удалёнка: инструкция по выживанию

Reading time 13 min
Views 7.7K

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

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

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

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

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

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

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

А что ещё?
Total votes 15: ↑13 and ↓2 +11
Comments 13

Как разработчику переехать из России в Германию и ни о чём не жалеть

Reading time 12 min
Views 10K

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

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

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

Читать подкаст
Total votes 20: ↑15 and ↓5 +10
Comments 44

Почему мы иногда пишем студентам первыми

Reading time 7 min
Views 4.3K

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

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

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

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

Читать далее
Total votes 19: ↑15 and ↓4 +11
Comments 4

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

Reading time 4 min
Views 50K


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

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

Поехали
Total votes 28: ↑23 and ↓5 +18
Comments 13

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

Reading time 3 min
Views 13K


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

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

Давайте разберемся!
Total votes 27: ↑6 and ↓21 -15
Comments 17

Как прятать

Reading time 3 min
Views 30K


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

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

Давайте разберёмся.
Total votes 24: ↑15 and ↓9 +6
Comments 14

Как фокус помогает

Reading time 2 min
Views 15K


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

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

Почему так не нужно делать.
Total votes 31: ↑26 and ↓5 +21
Comments 28

Кому нужны флексы

Reading time 3 min
Views 21K


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

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

Давайте разберёмся.
Total votes 23: ↑19 and ↓4 +15
Comments 12
1

Information

Rating
Does not participate
Registered
Activity