Летом 2022 года мы провели исследование и узнали, какие навыки нужны фронтендерам для повышения грейда.

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

При этом если от джунов работодатели ждут понимания методологии БЭМ, Атомик, фреймворков и Bootstrap, то от мидлов требуют ещё и опыт построения дизайн-систем.

В статье разбираемся, зачем фронтендеру учиться работать с дизайн-системами и какую пользу они приносят компаниям

Курс «Дизайн-системы для фронтендеров» состоит из 6 разделов, вот что они из себя представляют:

Введение
Общие сведения о дизайн-системах. Рассмотрим разные типы и свойства дизайн-систем, разберём примеры

Декомпозиция
Разберём выделение компонентов и научимся работать с токенами — свойствами, которые вынесены в переменные.

Техническая реализация
Перейдём к практике и начнём работать с кодом. Реализуем компоненты.

Расширение дизайн-системы
Научимся работать с изменениями в макетах.

Дизайн-система и командная работа
Разберёмся, с кем и как взаимодействует команда дизайн-системы, что нужно учесть в документации и коммуникации.

Заключение
Подведём итоги и закрепим полученные знания

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

Если интересно получить новый навык, переходите по ссылке

Выпустили новый курс — «SVG-анимации»

По результатам нашего исследования стало понятно, что работодатели ждут уверенной работы с SVG-анимациями от разработчиков с опытом от 1-го до 3-х лет. Это логично, ведь сейчас анимацию используют и как помощника, чтобы помогать юзерам взаимодействовать с интерфейсом, и для декора, чтобы привлечь внимание, вызвать эмоции и сделать проект интереснее.

В общем, веб-анимация — это бодро, весело, почти всегда удобно и вот прямо сейчас модно.

На курсе вы научитесь работать с векторной графикой и применять JavaScript-библиотеки для её анимирования.

Задача курса — раскрыть весь потенциал векторной графики и её гибкость. От простой CSS-анимации с transform до анимирования контуров, кривых, масок, графиков и обводки.

Типовые задачи, которые вы научитесь решать на курсе
☞ Подготовка SVG к подключению в страницу.
☞ Анимация частей SVG-иконки.
☞ Оптимизация анимации векторной графики.
☞ Создание бургер-меню.
☞ Создание прелоадеров.
☞ Морфинг форм.
☞ Анимация с применением SVG-масок.
☞ Создание анимированных диаграмм.
☞ Применение библиотек для создания анимаций.

Записаться на курс можно по ссылке. А для тех, кто хочет стать гуру анимаций теперь доступен пакет «Мастер анимаций».

На обложке svg анимация от Yasio

Время практики — повторяем анимацию котов
Переходите по ссылке и по инструкции сделайте анимацию контуров.

В статье сначала разберём свойства SVG-анимации и синтаксис библиотеки Anime.js, а затем анимируем отрисовку котов.

Если вы уже знакомы с теорией, можете сразу перейти к практике.

Мы получили уже 25 ответов и там такая ценная обратная связь, не терпится с вами поделиться. Результаты покажем через неделю, а пока, если кто-то ещё готов поучаствовать, будем очень благодарны 🫰

Берём небольшую паузу, чтобы внимательно изучить ваши ответы и подготовить новый контент.

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

Доступ открывается к первому разделу курса. Можно изучить теорию, выполнить домашнее задание и пройти тест.

Например, можно научиться писать валидацию для поля <input> с помощью регулярных выражений или создать прототип учётной книги сотрудников вуза с помощью паттерна «Фабричный метод».

Доступ открывается на 7 дней, можно получить к нескольким курсам.

Как получить пробный доступ?
Зайти на лендинг одного из одиннадцати курсов, для которых доступен пробный доступ. Нажать на кнопку «Начать бесплатно» и заполнить форму.

К каким курсам можно получить доступ:
Паттерны проектирования

CSS-анимации

SVG-анимации

Алгоритмы и структуры данных

Регулярные выражения

TypeScript

Дизайн для фронтендеров

CSS-in-JS

Дизайн-системы*
У этого курса в первом разделе нет домашнего задания

Шаблонизаторы HTML

Git и GitHub