Мастер анимаций: SVG-анимации

На курсе мы собрали три подхода в одном месте. Разберём анимацию SVG через CSS, SMIL и JavaScript, освоим библиотеки KUTE.js, Anime.js, Snap.svg и GSAP. Вы научитесь подбирать инструмент под задачу, готовить и оптимизировать SVG, понимать, когда честнее перейти на Canvas.

Внутри — 50 примеров с пошаговым разбором: кастомный курсор, морфинг форм и иконок, анимация по таймлайну, эффект закрашивания, анимация графиков и диаграмм, работа с SVG-масками, фильтрами и паттернами. Каждый можно повторить и адаптировать под свой проект. #htmlacademy #levelup

🎁 Смотреть программу

После курса вы соберёте микроанимации для состояний :hover и :focus, морфинг SVG-логотипа через анимацию атрибута d, прорисовку иллюстрации через stroke-dasharray и stroke-dashoffset, Canvas-сцены с физикой и собственными функциями плавности, шейдерные эффекты на GLSL (цветовые фильтры, маски, displacement, шум Перлина), трёхмерные сцены на Three.js с Camera Rig и шейдерной постобработкой — без сторонних анимационных библиотек.

Разберётесь в пайплайне отрисовки браузера и поймёте, почему transform и opacity не вызывают пересчёт раскладки и перерисовку, а left запускает их заново. Узнаете, как читать prefers-reduced-motion, отлаживать FPS в DevTools и применять 12 принципов анимации Disney к интерфейсам.

В WebGL увидите, что происходит между вершинным и фрагментным шейдером, как передавать данные через attributes, uniforms и varying. В Three.js научитесь изолировать движения через Group, делать сжатие и растяжение с сохранением объёма и проектировать Camera Rig под конкретную задачу.

А ещё GSAP, Snap.svg и PixiJS — чтобы наверняка. #htmlacademy #levelup

🎁 Подробнее

Добавляете фичу — и ломается то, что вчера работало. Часто причина не в багах, а в архитектуре: каждая типовая задача решается по-новому, поэтому код не складывается в систему.

На курсе «Паттерны проектирования» разбираем 25 паттернов в контексте JavaScript и фронтенда. Каждый — готовое решение для типовой ситуации: Adapter помогает работать с «кривым» API, Observer убирает ручную синхронизацию между компонентами, State приводит в порядок логику интерфейса.

После курса вы начнёте видеть код как систему — и брать готовый паттерн вместо того, чтобы каждый раз изобретать заново. #htmlacademy #levelup

⭐ Записаться на курс

Git и GitHub
➿➿➿➿➿➿➿➿➿➿➿➿
add, commit, push, pull — на этих командах держится почти вся ежедневная работа с Git. А rebase, перенос коммитов между ветками или восстановление «потерянного» так и остаются для многих белым пятном.

Отсюда и привычки. Конфликты разрешаются наугад, историю правят с опаской, а после неудачного rebase кажется, что всё сломано — хотя на деле чинится в пару команд. Сколько раз вы откладывали rebase на «потом»?

Курс «Git и GitHub» закрывает этот разрыв — между «умею коммитить» и «понимаю, что происходит в репозитории, и собираю историю такой, какой задумал».

Программа идёт по нарастающей. Сначала ставите и настраиваете Git, поднимаете локальный и удалённый репозитории, связываете их. Дальше ветки: создаёте, переключаете, сливаете, разрешаете конфликты, разбираете модели ветвления. Сравниваете версии и отдельные файлы, откладываете и отменяете изменения. А в конце — rebase и cherry-pick, восстановление коммитов через reflog (та самая команда, что отматывает почти любую операцию, включая слияние), подключение по SSH и подпись коммитов через GPG. #htmlacademy #levelup

Первый раздел открыт бесплатно, чтобы оценить подачу и формат.

🎁 Попробовать Git и GitHub

Vite 8 стартует сервер разработки за секунду, показывает правки на лету и собирает продакшен до 10–30 раз быстрее прошлой версии. На скорость повлияла смена движка: esbuild для разработки и Rollup для сборки заменил Rolldown, единый сборщик на Rust поверх парсера Oxc.

Конфиг? Для типового проекта его можно не писать. У Vite разумные значения по умолчанию. Vite — фактический стандарт сборки фронтенда: на нём работают Vue, SvelteKit, Nuxt и Astro. После отказа от Create React App его рекомендует и команда React (первый в списке сборщиков).

Курс «Vite 8» это шесть разделов от нулевой конфигурации до деплоя на GitHub Pages через GitHub Actions. Внутри настройка стилей и препроцессоров, оптимизация графики, тесты в Vitest и отдельный раздел про миграцию с Gulp и Webpack. Курс по Vite полностью на русском языке с практикой и эталонными решениями. #htmlacademy #levelup

В эти выходные, 6 и 7 июня, курс «Vite 8» можно будет взять со скидкой 60% по промокоду VITE60 — только два дня и только на этот курс.

📎 Смотреть программу

На ревью прилетел комментарий: фильтрация дубликатов на 100 000 позиций вешает интерфейс. Виноват вложенный перебор — O(n²), до 10 миллиардов сравнений. Через хеш-таблицу та же фильтрация укладывается в O(n): каждая проверка уникальности в среднем O(1).

Вот этот зазор между «работает» и «работает быстро» и закрывает курс «Алгоритмы и структуры данных». 10 подробных разделов с примерами на JavaScript: O-нотация, поиск, сортировки (пузырёк и quicksort), деревья, хеш-таблицы, жадные алгоритмы, динамическое программирование. Каждый привязан к реальной задаче фронтенда: обход DOM-дерева, подбор ревьюеров в пулреквест, парсинг данных, хранение оповещений. Внутри теория, разбор кейсов, практические задания с эталонным решением и тесты. Темп свой, начать можно сразу. #htmlacademy #levelup

Завтра выходной, и скидка 60% по промокоду ALGO60 работает все три дня — с пятницы по воскресенье, 12–14 июня. Только на этих выходных и только на этот курс.

🎤 Подробнее

TypeScript ловит ошибки типов до запуска, но только когда типы описаны точно. Достаточно одного any или приблизительной аннотации — и редактор перестаёт подсвечивать ошибку, которая всплывёт уже у пользователя.

Курс «TypeScript: Теория типов» — про то, как система типов устроена изнутри: дженерики, условные и отображаемые типы, объединения и пересечения, брендирование.

6 разделов и куча типовых задач, пошаговые эталонные решения, рядом поддержка эксперта. Доступ к материалам всегда под рукой. После курса будете уверенно типизировать и во фронтенде, и в бэкенде. Гибкие сроки — начать можно прямо сейчас. #htmlacademy #levelup

А в эти выходные, 20 и 21 июня, на курс будет большая разовая скидка 60% по промокоду TS60 — всего два дня и только на «TypeScript: Теория типов».

🔄 Смотреть программу