Media is too big
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9🔥6❤🔥4👍2
Технологическая рулетка: вызов на сегодня
Бросьте кубик в комментариях и займитесь тем, что выпадет. Шесть тем — React, Vue.js, CSS Grid, алгоритмы, Git, DevTools. Задания на картинках.
Напишите, что выпало и что сделали.
Бросьте кубик в комментариях и займитесь тем, что выпадет. Шесть тем — React, Vue.js, CSS Grid, алгоритмы, Git, DevTools. Задания на картинках.
Напишите, что выпало и что сделали.
❤5🔥4❤🔥3
Методы
А ещё в статье — Navigation API, псевдоклассы для View Transitions API и новые CSS-единицы
🎁 Читать статью
toSorted() и toReversed() уже работают во всех браузерах. Теперь можно сортировать массивы без мутаций — оригинал остаётся нетронутым, а вы получаете новый. Туда же — свойство animation-composition для управления наложением анимаций. Это то, что можно использовать в продакшене прямо сейчас.А ещё в статье — Navigation API, псевдоклассы для View Transitions API и новые CSS-единицы
rcap, rch, rex, ric для точной типографики в многоязычных интерфейсах. Эти фичи только появились в браузерах, так что пока просто держим в голове на будущее. #css #jsPlease open Telegram to view this post
VIEW IN TELEGRAM
❤🔥7❤3🔥3
В эти выходные вы сами выбираете условия покупки курса.
С 30 января по 1 февраля запускаем «Акцию-конструктор». Хотите скидку на мидловый курс? Две профессии по цене одной? Консультацию с наставником в подарок к профессии? Напишите нам — обсудим.
Как участвовать: пишете, какой курс хотите и на каких условиях. Мы рассмотрим предложение и ответим в течение пары часов. Если условия нам подходят — фиксируем. Если нет — предложим встречный вариант.
Акция только до 1 февраля включительно.
Обсудить условия →
С 30 января по 1 февраля запускаем «Акцию-конструктор». Хотите скидку на мидловый курс? Две профессии по цене одной? Консультацию с наставником в подарок к профессии? Напишите нам — обсудим.
Как участвовать: пишете, какой курс хотите и на каких условиях. Мы рассмотрим предложение и ответим в течение пары часов. Если условия нам подходят — фиксируем. Если нет — предложим встречный вариант.
Обсудить условия →
❤7❤🔥2🔥2
После анонса Liquid Glass от Apple фронтендеры бросились реализовывать эффект — и у кого-то получился полупрозрачный бублик на Three.js. А ещё в этом месяце: 3D-сапёр с
В подборке — демки, которые можно сразу открыть и разобрать по шагам. А для тех, кого замучили «отрицательные углы» (negative border radius), есть решение — библиотека nebo.css. #css #js
🎁 Читать статью
backdrop-filter: blur, электрическая рамка и неоморфизм.В подборке — демки, которые можно сразу открыть и разобрать по шагам. А для тех, кого замучили «отрицательные углы» (negative border radius), есть решение — библиотека nebo.css. #css #js
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍5❤🔥1
Forwarded from Как стать мидлом
Мастер анимаций: SVG-анимации
На курсе вы научитесь оживлять векторные изображения — от простых иконок до сложных диаграмм и главных экранов. Разберём три подхода к SVG-анимации: CSS, SMIL и JavaScript, и освоим библиотеки GSAP, Anime.js, Snap.svg и KUTE.js.
Вас ждут 50 пошаговых примеров: кастомные курсоры, морфинг форм, эффект обводки и закрашивания, анимация текста, масок и паттернов. Каждый пример можно повторить и адаптировать под свои задачи.
После курса вы будете готовить и оптимизировать SVG, выбирать подходящий инструмент для каждой задачи и понимать, когда стоит перейти к Canvas. #htmlacademy #levelup
🎁 Смотреть программу
На курсе вы научитесь оживлять векторные изображения — от простых иконок до сложных диаграмм и главных экранов. Разберём три подхода к SVG-анимации: CSS, SMIL и JavaScript, и освоим библиотеки GSAP, Anime.js, Snap.svg и KUTE.js.
Вас ждут 50 пошаговых примеров: кастомные курсоры, морфинг форм, эффект обводки и закрашивания, анимация текста, масок и паттернов. Каждый пример можно повторить и адаптировать под свои задачи.
После курса вы будете готовить и оптимизировать SVG, выбирать подходящий инструмент для каждой задачи и понимать, когда стоит перейти к Canvas. #htmlacademy #levelup
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥5🔥5👍3
Media is too big
VIEW IN TELEGRAM
Почему одни джуны уходят через полгода, а другие вырастают в сильных разработчиков?
Василий Вишняков из Bquadro рассказывает, как в студии выстроена адаптация новичков и почему компания сознательно нанимает людей без опыта.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
🎖 Программа обучения
Василий Вишняков из Bquadro рассказывает, как в студии выстроена адаптация новичков и почему компания сознательно нанимает людей без опыта.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5👍4🔥3
Сегодня — последний день «Акции-конструктор».
За выходные мы узнали много нового о ваших переговорных навыках. Курс за 500 ₽? Видели. Три профессии по цене половины? Тоже было. Но мы не сдаёмся.
🎁 Скидка на курсы, две профессии вместе, бонус к обучению — напишите свои условия. Обсуждаем до полуночи.
Обсудить условия →
За выходные мы узнали много нового о ваших переговорных навыках. Курс за 500 ₽? Видели. Три профессии по цене половины? Тоже было. Но мы не сдаёмся.
Обсудить условия →
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥4👍3❤🔥2🤣1
Видеофон на главной, всплывающий баннер с летающими курицами, кнопка, которая трясётся без причины — всё это раздражает пользователей и ломает UX.
Собрали топ примеров плохой анимации: что тормозит загрузку, что отвлекает от контента, что вызывает дискомфорт и мешает доступности. И да, пришлось отключить адблок ради исследования. #css #a11y
🎁 Читать статью
Собрали топ примеров плохой анимации: что тормозит загрузку, что отвлекает от контента, что вызывает дискомфорт и мешает доступности. И да, пришлось отключить адблок ради исследования. #css #a11y
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥7❤5🔥5
Forwarded from CSS Боль
Вывести значение CSS-переменной прямо на страницу — без JavaScript. Звучит как фантастика, но CSS это умеет: две строчки, работает во всех браузерах.
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
Связка
В новом выпуске «CSS Боли» — путь от простого счётчика до анимированного кругового прогресс-бара. Попробуйте в демке самостоятельно и смотрите разбор целиком.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
Связка
counter-reset + counter() + content превращает CSS-переменную в текст на экране. Для целых чисел — элементарно. Для дробных — обход через calc(), чтобы подсказать счётчику тип данных. А если в переменной хранятся градусы или пиксели? Тут помогает tan(atan2()) — трюк, который убирает единицу измерения из значения.В новом выпуске «CSS Боли» — путь от простого счётчика до анимированного кругового прогресс-бара. Попробуйте в демке самостоятельно и смотрите разбор целиком.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7👍6❤🔥3
Стандартные
Функция
Разбираем, как работают координаты управляющих точек и где это применяется: в модалках, карточках, галереях. #css #animation
🎁 Читать статью
ease и ease-in не всегда дают нужный эффект — движение получается слишком механическим или предсказуемым.Функция
cubic-bezier() позволяет задать собственную кривую ускорения через четыре числа. С ней можно сделать анимацию с эффектом инерции, лёгкого залипания при наведении или упругого отскока.Разбираем, как работают координаты управляющих точек и где это применяется: в модалках, карточках, галереях. #css #animation
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
Qwen Code — AI-агент для VS Code, который генерирует готовый код прямо в терминале.
Создание даже простой портфолио-страницы обычно занимает часы: разметка, стили, адаптивность, тёмный режим.
В статье показываем, как за три запроса к Qwen Code получить готовую страницу с семантическим HTML, CSS-переменными и поддержкой тёмного режима. Разбираем установку расширения Qwen Code Companion в VS Code, запуск через команду
🎁 Читать статью
Создание даже простой портфолио-страницы обычно занимает часы: разметка, стили, адаптивность, тёмный режим.
В статье показываем, как за три запроса к Qwen Code получить готовую страницу с семантическим HTML, CSS-переменными и поддержкой тёмного режима. Разбираем установку расширения Qwen Code Companion в VS Code, запуск через команду
qwen и пошаговое взаимодействие: от структуры проекта до финальной стилизации. #ai #toolsPlease open Telegram to view this post
VIEW IN TELEGRAM
👍11
Forwarded from CSS Боль
Круглый вырез в карточке — пять обёрток, 20 строчек CSS и сломанный фон на стыках блоков. Знакомо?
Классический подход заставляет «нарезать» карточку на кусочки: колонка для контента, колонка для выреза, внутри — три блока с
Одно свойство
Демонстрация: https://htmlacademy.ru/demos/235
Читать статью → https://habr.com/ru/articles/993310/
Классический подход заставляет «нарезать» карточку на кусочки: колонка для контента, колонка для выреза, внутри — три блока с
flex-grow и radial-gradient. И всё ломается, если карточке задать градиентный фон — состыковать части принципиально невозможно.Одно свойство
mask-image с тем же radial-gradient решает задачу без единой обёртки. Карточка остаётся цельной — и корректно тянется, и принимает любой фон. В статье собираем оба варианта пошагово и сравниваем.Демонстрация: https://htmlacademy.ru/demos/235
Читать статью → https://habr.com/ru/articles/993310/
🔥9❤🔥3
Мы учим писать код, а не полагаться на удачу. Но сегодня — исключение.
С 6 по 8 февраля ко Дню науки разыгрываем скидки с помощью удачи.
Как участвовать:
1️⃣ Отправьте в комментарии эмодзи 🎰 — Телеграм сам прокрутит барабан.
2️⃣ Скопируйте ссылку на сообщение с результатом.
3️⃣ Отправьте ссылку нашему менеджеру.
Что выпадет:
🎁 Три семёрки (777) — скидка 40% на любую профессию или курс и второй курс в подарок.
🎁 Два одинаковых символа — скидка 30% на любую профессию или курс.
🎁 Все разные — скидка 20% на любую профессию или курс.
Да, проигравших нет. Да, мы в курсе, что это не совсем научный подход. Но давайте попробуем.
С 6 по 8 февраля ко Дню науки разыгрываем скидки с помощью удачи.
Как участвовать:
Что выпадет:
Да, проигравших нет. Да, мы в курсе, что это не совсем научный подход. Но давайте попробуем.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👏4🤣4