Forwarded from CSS Боль
CSS-анимации можно описывать не только через десятки
В свежем выпуске «CSS Боль» разбираем функцию
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
В выпуске:
✓ Как работает
✓ Что такое точки прогресса и как они выходят за диапазон 0–1
✓ Как делать паузы, отскоки и overshoot без сложных
✓ Почему отрицательные значения — это часть спецификации, а не баг
✓ Как одной тайминг-функцией синхронизировать несколько анимаций
✓ Разбор спецификации CSS Easing Functions Level 2 и практические примеры
Меньше кода, больше контроля над движением — и анимации, которые наконец перестают быть болью.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
@keyframes. В CSS есть функция, которая позволяет задать всю форму движения одной строкой — с ускорениями, паузами, рывками и перелётами.В свежем выпуске «CSS Боль» разбираем функцию
linear() в animation-timing-function и показываем, как с её помощью управлять прогрессом анимации точнее, чем привычными ease и cubic-bezier().В выпуске:
✓ Как работает
linear() и почему это не просто «линейная» анимация✓ Что такое точки прогресса и как они выходят за диапазон 0–1
✓ Как делать паузы, отскоки и overshoot без сложных
@keyframes✓ Почему отрицательные значения — это часть спецификации, а не баг
✓ Как одной тайминг-функцией синхронизировать несколько анимаций
✓ Разбор спецификации CSS Easing Functions Level 2 и практические примеры
Меньше кода, больше контроля над движением — и анимации, которые наконец перестают быть болью.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4
CSS 2025: Baseline Widely Available
Завтра в 20:00 (17 декабря) проведём стрим и соберём CSS-тирлист: что в S-тир, а что пока «ну, прикольно». Container queries.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
Завтра в 20:00 (17 декабря) проведём стрим и соберём CSS-тирлист: что в S-тир, а что пока «ну, прикольно». Container queries.
oklch(). Тригонометрия в calc(). Анимация гридов. Range syntax в медиазапросах. И ещё куча возможностей, которые стали доступны в 2025 году.Please open Telegram to view this post
VIEW IN TELEGRAM
❤6❤🔥4
Продолжаем знакомиться с партнёрами второго сезона чемпионата по вёрстке. #чпв2
👍 enKod — партнёр-работодатель
enKod — российская CDP-платформа для автоматизации маркетинга и CRM-маркетинга. В продукте собраны инструменты для работы с базой и коммуникациями: единый профиль клиента, сегментация, рассылки и сценарии в разных каналах — от email до мессенджеров, push и SMS.
👍 F5 — партнёр-работодатель
Digital-агентство F5 больше 13 лет проектирует, разрабатывает и развивает веб-проекты: промо и корпоративные сайты, лендинги, интернет-магазины, порталы и сервисы. Команда закрывает полный цикл работ, включая интеграции с внешними сервисами, автоматизацию процессов и внедрение CRM на Битрикс24.
👍 Уралмедиас — партнёр-работодатель
Уралмедиас — аккредитованная IT-компания и digital-агентство с фокусом на промышленный B2B. Команда делает комплексные цифровые решения для роста бизнеса и продвижения брендов, объединяя аналитику, брендинг, 3D/AI-инструменты и SEO. Компания входит в ТОП-100 агентств России по версии Рейтинга Рунета.
https://htmlacademy.ru/contest/2
enKod — российская CDP-платформа для автоматизации маркетинга и CRM-маркетинга. В продукте собраны инструменты для работы с базой и коммуникациями: единый профиль клиента, сегментация, рассылки и сценарии в разных каналах — от email до мессенджеров, push и SMS.
Digital-агентство F5 больше 13 лет проектирует, разрабатывает и развивает веб-проекты: промо и корпоративные сайты, лендинги, интернет-магазины, порталы и сервисы. Команда закрывает полный цикл работ, включая интеграции с внешними сервисами, автоматизацию процессов и внедрение CRM на Битрикс24.
Уралмедиас — аккредитованная IT-компания и digital-агентство с фокусом на промышленный B2B. Команда делает комплексные цифровые решения для роста бизнеса и продвижения брендов, объединяя аналитику, брендинг, 3D/AI-инструменты и SEO. Компания входит в ТОП-100 агентств России по версии Рейтинга Рунета.
https://htmlacademy.ru/contest/2
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5❤4❤🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Пульсирующая градиентная заливка текста
В свежем выпуске «CSS Боль» разбираем функцию
🐭 Смотреть на YouTube
🐹 Смотреть в VK
В свежем выпуске «CSS Боль» разбираем функцию
linear() в animation-timing-function.
Смотрите полный выпуск:Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15❤🔥6👍3
В CSS есть константа infinity — короткая запись для «максимально возможного значения» в конкретном контексте. В какое число она превращается, зависит от браузера, операционной системы и того, к какому CSS-свойству вы её применяете. Поддержка в порядке, и иногда такая запись делает стили чуть понятнее — без магических чисел. Но использовать её вовсе не обязательно.В статье показываем на примерах с
z-index, размерами и border-radius, почему infinity внутри calc() — это не «абстрактная бесконечность», а значение, которое упирается в пределы конкретного свойства. Отдельно смотрим на анимации: «до infinity» элемент прыгает в финальное состояние сразу, а с бесконечной задержкой анимация так и не стартует. #css #webdevPlease open Telegram to view this post
VIEW IN TELEGRAM
❤5🔥4❤🔥2
Стартуем уже через час — CSS 2025: Baseline Widely Available
Через 60 минут в прямом эфире Александр Першин, Николай Шабалин, Никита Дубко и Алексей Симоненко разберут все CSS фичи, которые стали доступными в 2025. Подключайтесь, задавайте вопросы и вместе раскидаем их по важности.
🐭 Подключиться на YouTube
🐹 Подключиться в VK
Через 60 минут в прямом эфире Александр Першин, Николай Шабалин, Никита Дубко и Алексей Симоненко разберут все CSS фичи, которые стали доступными в 2025. Подключайтесь, задавайте вопросы и вместе раскидаем их по важности.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5
Продолжаем знакомиться с партнёрами второго сезона чемпионата по вёрстке. #чпв2
👍 Zionec — партнёр-работодатель
Zionec — ИТ-интегратор из Москвы: команда автоматизирует и «приземляет» бизнес-процессы на Битрикс24, 1С-Битрикс и продуктах 1С. Берутся за внедрения, поддержку и сложные доработки с интеграциями под реальные процессы — от CRM и корпоративных порталов до кастомных решений и разработки.
👍 No Logo Studio — партнёр-работодатель
No Logo Studio — digital-агентство современной веб-разработки с сильной продуктовой и дизайн-экспертизой. Студия делает веб-решения разного уровня сложности: корпоративные сайты, промо, интернет-магазины, порталы и сервисы, а также интерфейсы и мобильные приложения — с прицелом на понятный UX и стабильную работу продукта.
👍 SOK — партнёр-работодатель
SOK — команда профессиональных веб-разработчиков. Мы оказываем полный спектр услуг по разработке интернет-магазинов, B2B-платформ и корпоративных порталов.
https://htmlacademy.ru/contest/2
Zionec — ИТ-интегратор из Москвы: команда автоматизирует и «приземляет» бизнес-процессы на Битрикс24, 1С-Битрикс и продуктах 1С. Берутся за внедрения, поддержку и сложные доработки с интеграциями под реальные процессы — от CRM и корпоративных порталов до кастомных решений и разработки.
No Logo Studio — digital-агентство современной веб-разработки с сильной продуктовой и дизайн-экспертизой. Студия делает веб-решения разного уровня сложности: корпоративные сайты, промо, интернет-магазины, порталы и сервисы, а также интерфейсы и мобильные приложения — с прицелом на понятный UX и стабильную работу продукта.
SOK — команда профессиональных веб-разработчиков. Мы оказываем полный спектр услуг по разработке интернет-магазинов, B2B-платформ и корпоративных порталов.
https://htmlacademy.ru/contest/2
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Подводим итоги!
Второй сезон Чемпионата по вёрстке подошёл к концу. 19 декабря в 12:00 (MSK) вместе с экспертами из компаний подведём итоги чемпионата, раздадим оценки и выберем победителя.
🐭 Подключиться в YT
🐹 Подключиться в VK Video
Второй сезон Чемпионата по вёрстке подошёл к концу. 19 декабря в 12:00 (MSK) вместе с экспертами из компаний подведём итоги чемпионата, раздадим оценки и выберем победителя.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤3
Flexbox — инструмент для раскладки крупных блоков и микросеток. Чтобы превратить блок во флекс-контейнер, ему задают display: flex. Непосредственные потомки такого контейнера становятся флекс-элементами: их можно выравнивать по главной и поперечной осям и распределять свободное пространство внутри контейнера.
В статье разбираем базовые термины (главная и поперечная оси) и ключевые свойства:
flex-direction, justify-content, align-items/align-self, align-content и flex-wrap. После этого проще понимать, как собирать меню, карточки или пагинацию так, чтобы блок аккуратно переживал переполнение контентом и разные размеры экрана. #css #flexboxPlease open Telegram to view this post
VIEW IN TELEGRAM
❤2
Уже через час начинаем прямой эфир с экспертами из компаний второго сезона Чемпионата по вёрстке.
🐭 Подключиться в YT
🐹 Подключиться в VK Video
Please open Telegram to view this post
VIEW IN TELEGRAM
Продолжаем Новогоднее колесо в HTML Academy
С 19 по 21 декабря запускаем новогоднюю акцию для тех, кто планирует войти в IT или прокачать текущие навыки. В «Новогоднем колесе» участвуют лайт-профы, программа «Войти в IT», формат профа Классик и обучение под компанию — можно получить приятные условия именно на то обучение, которое подходит под ваш уровень и цели.
Это хороший момент начать обучение без долгих раздумий: выбрать направление, зафиксировать выгодные условия и войти в новый год с понятным планом развития. Крутите колесо, забирайте бонус и делайте следующий шаг в IT вместе с HTML Academy.
❄️ Новогоднее колесо уже запущено — ищите на сайте подарочную коробку, крутите колесо, забирайте бонус и делайте следующий шаг в IT вместе с HTML Academy.
С 19 по 21 декабря запускаем новогоднюю акцию для тех, кто планирует войти в IT или прокачать текущие навыки. В «Новогоднем колесе» участвуют лайт-профы, программа «Войти в IT», формат профа Классик и обучение под компанию — можно получить приятные условия именно на то обучение, которое подходит под ваш уровень и цели.
Это хороший момент начать обучение без долгих раздумий: выбрать направление, зафиксировать выгодные условия и войти в новый год с понятным планом развития. Крутите колесо, забирайте бонус и делайте следующий шаг в IT вместе с HTML Academy.
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Как стать мидлом
Webpack без боли: от конфигурации до оптимизации
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
На курсе вы разберёте Webpack на практике: базовую конфигурацию (entry/output), перенос проекта на webpack, сборку многостраничных приложений, работу с плагинами и обработчиками, asset-modules, code splitting и оптимизации под production.
Каждый модуль — прикладные задачи: настройка npm-скриптов, подключение Babel, ESLint и Prettier, конфигурация плагинов и обработчиков, разделение dev и prod с source maps, уменьшение бандла (минимизация, выделение вендоров). После курса вы сможете добавлять сборщик в проект, создавать и поддерживать конфиги на рабочих проектах, собирать MPA и оптимизировать артефакты перед деплоем. #htmlacademy #levelup
🟢 Смотреть программу
На курсе вы разберёте Webpack на практике: базовую конфигурацию (entry/output), перенос проекта на webpack, сборку многостраничных приложений, работу с плагинами и обработчиками, asset-modules, code splitting и оптимизации под production.
Каждый модуль — прикладные задачи: настройка npm-скриптов, подключение Babel, ESLint и Prettier, конфигурация плагинов и обработчиков, разделение dev и prod с source maps, уменьшение бандла (минимизация, выделение вендоров). После курса вы сможете добавлять сборщик в проект, создавать и поддерживать конфиги на рабочих проектах, собирать MPA и оптимизировать артефакты перед деплоем. #htmlacademy #levelup
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯2
Media is too big
VIEW IN TELEGRAM
Формирование ИПР после испытательного срока
Илья Лебедкин — основатель Addamant, рассказал про путь после обучения.
Полный эфир с Addamant — по ссылке:
🐭 Смотреть на YouTube
🐹 Смотреть в VK
🪫 Программа обучения
Илья Лебедкин — основатель Addamant, рассказал про путь после обучения.
Полный эфир с Addamant — по ссылке:
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👏3❤🔥2
Forwarded from CSS Боль
Как упростить React в 2 раза с помощью программирования на CSS
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
В новом выпуске «CSS Боль» показываем, как современный CSS убивает React. На реальном примере слайдера разбираемся, почему компонент разрастается до сотни строк — и как сделать его вдвое проще, ничего не потеряв.
Внутри — живой пример, где два компонента выглядят одинаково, но один написан «по привычке», а второй — с использованием возможностей современного CSS. После этого выпуска React перестаёт быть калькулятором для стилей, а CSS — «просто оформлением».
В выпуске:
✓ Классическая реализация слайдера на React: состояние, вычисления и условия
✓ Как перенести расчёты положения и состояний элементов в CSS
✓ Использование CSS-переменных и
✓ Что такое «реактивный CSS» и как он работает вместе с React
✓ Когда можно начать использовать этот подход
🐭 Смотреть на YouTube
🐹 Смотреть в VK
В новом выпуске «CSS Боль» показываем, как современный CSS убивает React. На реальном примере слайдера разбираемся, почему компонент разрастается до сотни строк — и как сделать его вдвое проще, ничего не потеряв.
Внутри — живой пример, где два компонента выглядят одинаково, но один написан «по привычке», а второй — с использованием возможностей современного CSS. После этого выпуска React перестаёт быть калькулятором для стилей, а CSS — «просто оформлением».
В выпуске:
✓ Классическая реализация слайдера на React: состояние, вычисления и условия
✓ Как перенести расчёты положения и состояний элементов в CSS
✓ Использование CSS-переменных и
calc() вместо JavaScript✓ Что такое «реактивный CSS» и как он работает вместе с React
✓ Когда можно начать использовать этот подход
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤🔥3
Конец 2025 года. Добро пожаловать в интернет
Впереди Новый год, но с подарками беда. Видеокарты дорожают, оперативку не купить, а из каждого баннера и открытой статьи на нас смотрит ИИ. Еще и «человеком года» стали создатели ИИ.В итоге разработчики снова становятся не нужны, а ИИ выходит из-под контроля и просачивается в нашу реальность.
Вот мы, например, получили тут открытку с со странным кодом. Расшифруйте его и напишите ответ в комментариях, чтобы помочь нам подготовиться. Потому что, судя по всему, грядёт что-то нехорошее. Теперь вся надежда только на вас!
Впереди Новый год, но с подарками беда. Видеокарты дорожают, оперативку не купить, а из каждого баннера и открытой статьи на нас смотрит ИИ. Еще и «человеком года» стали создатели ИИ.В итоге разработчики снова становятся не нужны, а ИИ выходит из-под контроля и просачивается в нашу реальность.
Вот мы, например, получили тут открытку с со странным кодом. Расшифруйте его и напишите ответ в комментариях, чтобы помочь нам подготовиться. Потому что, судя по всему, грядёт что-то нехорошее. Теперь вся надежда только на вас!
❤8