День 4️⃣, сообщение от Кекса

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

И это ещё не всё! Вы научитесь создавать анимированные иконки, которые реагируют на действия пользователей. С таким багажом знаний ваши проекты станут неотразимыми

В программе:
152 задания и 28 испытаний, а также 292 балла.

Подробнее | Правила

День 5️⃣, сообщение от Кекса

Эй, код-мастера! Сегодня будем превращаться в настоящих повелителей JavaScript. Вас ждут переменные, циклы, функции и ещё тонна интересного! Мы напишем фитнес-калькулятор, драйвер принтера и даже симулятор дартс-машины — да-да, чтобы можно было виртуально метать дротики прямо из консоли.

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

В программе:
183 задания и 15 испытаний, а также 258 баллов.

Подробнее | Правила

✨ Серебряный уровень открыт! ✨

Участники новогодней недели сделали это! Благодаря общей активности вы выполнили 22 469 заданий и заработали 162 853 балла — и это только начало! Теперь открыты призы серебряного уровня, которые разыграют не только топ-10, но и топ-100 участников.

Но это ещё не конец! Впереди золотой уровень с ещё более крутыми наградами! Чтобы приблизить общий успех, присоединяйтесь к акции, выполняйте задания, участвуйте в викторинах и зовите друзей — каждый ваш балл приближает всех к финальной цели!

Подробнее об акции | Telegram-бот

День 6️⃣, сообщение от Кекса

Мурр! Сегодня ваш JavaScript-багаж пополнится практическими суперспособностями. Мы будем разрабатывать фотоприложение с фильтрами — создадим интерфейс, настроим стили и оживим его при помощи кода.

А для самых смелых — настоящее испытание: 51 задача по программированию, чтобы проверить свои навыки и узнать, на что вы способны. Готовы доказать, что вы настоящие мастера кода?

В программе:
37 заданий и 53 испытания, а также 302 балла.

Подробнее | Правила

День 7️⃣, сообщение от Кекса

Кодерята, готовы вдохнуть жизнь в ваши интерфейсы? Сегодня вы освоите магию трансформаций и микроанимаций! Мы будем не только создавать стильные декоративные элементы, но и добавлять движения, которые делают интерфейсы по-настоящему живыми.

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

В программе:
89 заданий и 3 испытания, а также 104 балла.

Подробнее | Правила

День 8️⃣, сообщение от Кекса

Котики, финальный рывок! Сегодня мы вооружимся инструментами автоматизации и сделаем ваш код быстрее и элегантнее. Препроцессоры помогут вам ускорить вёрстку и работать над библиотекой компонентов, а PHP откроет двери к серверной магии!

На десерт — создание интернет-магазина. Да-да, своими лапками! Это финальная возможность прокачать навыки и завершить акцию на высокой ноте. Вы — просто звёзды фронтенда!

В программе:
112 заданий и 6 испытаний, а также 142 балла.

Подробнее | Правила

https://usehooks.com – коллекция кастомных React хуков

Рекомендации по использованию от Николая Громова, ведущего разработчика интерфейсов компании Наука:

«Коллекция хорошая, но есть несколько "но":

1. Видимо, разумнее всего просто копипастить нужный хук (отсюда: https://github.com/uidotdev/usehooks/blob/main/index.js) в свой проект (обновления редки, а все хуки в исходнике - в одном файле, который весь будет взят в сборку).

2. Часть хуков требуют экспериментальных версий react и react-dom (видно по команде установки на странице хука).»

---

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

#полезноеотработодателей #полезноеотnauka

Учебник по Git и GitHub

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

📖 Читать учебник

Новый макет и новый компонент! Верстаем промо-блок из олимпиады по фронтенду от HTML Academy и Яндекса.

htmlacademy.ru/demos/173

В пятой части курса мы делаем разметку и базовую стилизацию десктопной версии промо-блока. Ссылка на макет компонента — внутри курса.

#туториалотhtmlacademy #frontend #макет

https://angularexperts.io/blog/typescript-decorators – cтатья с разбором полезных декораторов, написанных на TуpeScript, содержит примеры кода и объяснения, что и зачем было написано. Статья поможет лучше понять TуpeScript и разобраться, что такое декораторы и зачем они могут понадобиться.

Статьёй поделились разработчики компании «Открытые решения».

---

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

#полезноеотработодателей #полезноеотosinit

Этот генератор box-shadow позволяет быстро и легко создавать стильные тени на вашем веб-сайте. Генератор позволяет добавлять до 10 теней с различными настройками, такими как горизонтальное и вертикальное смещение, размытие, прозрачность и цвет тени.

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

Используйте этот генератор box-shadow, чтобы быстро и легко настроить тени на вашей странице и улучшить ее визуальный стиль — https://tml.io/yd6fm

#htmlacademy_статьи

Читайте новые инструкции по CSS в блоге Академии:

Как передвинуть элемент на странице. CSS-свойство position

Как изменить цвет на странице. CSS-свойство color

Как изменить ширину элемента. свойство width

Как сделать фон на странице. css-свойство background

Как размыть картинку. css-свойство filter

#htmlacademy_статьи

https://css-tip.com/width-scrollbar/ – приём, который позволяет получить ширину скроллбара на чистом CSS

Николай Громов, ведущий разработчика интерфейсов компании Наука, о пользе этого приёма:

«Встречал несколько раз: при открытии модалки нужно блокировать скролл страницы, но если лифт есть и он не 0 пикселей, это вызовет "дергание" контента. Приходится добавлять padding справа, но как вычислять его размер? А вот и ответ»

---

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

#полезноеотработодателей #полезноеотnauka

Почему Vite выбирают разработчики?

Vite — это скорость, простота и возможность сосредоточиться на коде, а не на настройках. Он мгновенно обновляет изменения, поддерживает множество фреймворков и идеально подходит для современных проектов.

Что нового появилось в Vite 6? Спойлер: разработчики точно оценят новые шаблоны и поддержку последних версий Node.js.

Подробности — в статье: https://htmlacademy.ru/blog/js/vite-6

Завершаем вёрстку десктопной версии промо-блока из олимпиады по фронтенду от HTML Academy и Яндекса.

https://htmlacademy.ru/demos/175

В шестой части курса мы завершаем десктопную версию компонента и проверяем её на переполнение. Ссылка на макет компонента — внутри курса.

#туториалотhtmlacademy #frontend #макет

Мы советуем изучить, как работает атрибут fetchpriority:
https://web.dev/articles/fetch-priority?hl=ru#fetchpriority-attribute

А Николай Громов, ведущий разработчик интерфейсов компании Наука, рассказывает, почему надо использовать fetchpriority:

«И создал он атрибут loading и дал его эльфам.
И Создал он preload у <video> и дал его людям.
Но потом создал ОН один атрибут, чтобы править всеми!
(приоритетами загрузки)
и имя ему – fetchpriority

И возрыдали разработчики,
ибо ОН прекрасен и готов к продакшену.»

Полностью согласны. Ни убавить, ни прибавить.

---

Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka