State of CSS 2025

Опросник об использовании новых возможностей и инструментов CSS — ваша возможность повлиять на развитие CSS и web. Опрос займёт около 15–20 минут.
Цель — понять, насколько быстро внедряются новые функции (например, scroll‑driven animations, :has(), subgrid и другие) и помочь сообществу и браузерным вендорам приоритизировать дальнейшее развитие.

https://survey.devographics.com/ru-RU/survey/state-of-css/2025

Подробный гайд по CSS Custom Properties

Синтаксис, возможности и лучшие практики по работе с CSS переменными.В руководстве рассказывается как использовать кастомные свойства для соблюдения принципов DRY, динамической темизации и взаимодействия с JavaScript.

https://css-tricks.com/a-complete-guide-to-custom-properties/

Тем, кто учит и учится новому

20 июня в рамках фестиваля «Т-Двор» от Т-Банка пройдет День образования и науки.

В программе — дискуссии, кейсы и воркшопы от экспертов:

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

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

Приходите на фестиваль в Санкт-Петербурге или подключайтесь онлайн. Участие бесплатное.

Успейте зарегистрироваться до 19 июня

Partial Keyframes

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

https://www.joshwcomeau.com/animation/partial-keyframes/

Исследуем функцию contrast-color()...снова

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

https://css-tricks.com/exploring-the-css-contrast-color-function-a-second-time/

Самый простой способ задеплоить сайт-портфолио

Используем связку github + netlify для бесплатного деплоя простых и небольших проектов.

https://frontendmasters.com/blog/the-simplest-way-to-deploy/

Интеграция React Server Components с бандлером

RSC нужно не только передавать данные, но и код компонентов от сервера к клиенту. Дэн Абрамов рассказывает почему без интеграции с бандлером это будет работать неоптимально.

https://overreacted.io/why-does-rsc-integrate-with-a-bundler/

Упрощаем работу с ResizeObserver

Небольшая обёртка для ResizeObserver, которая делает работу с ним понятнее и удобнее.

https://css-tricks.com/a-better-api-for-the-resize-observer/

Использование await на верхнем уровне

Вызов асинхронных функций без дополнительного обертывания в ES2022. Кейсы (например загрузка конфигураций, динамический импорт модулей и инициализация WebAssembly в модулях) и ограничения (блокировка выполнения импортирующих модулей, сложности при циклических зависимостях и несовместимость с CommonJS).

https://allthingssmitty.com/2025/06/16/using-await-at-the-top-level-in-es-modules/

Tunnel Run длиной 170 строк на чистом JS

Реализация игры в которой нужно бегать и прыгать через туннель. Отображение двумерной сетки как трёхмерного туннеля с помощью функций sin и cos вместе с перспективным масштабированием. Простое объяснение реализации без углубления в тригонометрию.

https://slicker.me/javascript/tunnel/tunnel_run.htm

WelsonJS — cоздание Windows приложений на JavaScript

WelsonJS — фреймворк для создания Windows‑приложений на встроенном в систему JavaScript‑движке, позволяющий писать полноценные десктоп‑программы (GUI, консоль, автоматизация Office) с HTML/CSS и JS/TS без Node.js
Проект предоставляет для сборки и установки собственный HTA/скриптовый лаунчер и Inno Setup инсталлятор.

https://github.com/gnh1201/welsonjs

Цветовые функции в CSS

О новых возможностях работы с цветами в CSS с помощью функции color(), позволяющей использовать разные цветовые пространства — от sRGB до CIELAB и Oklab.

https://css-tricks.com/css-color-functions/

Новая возможность CSS — gap decorations

Стилизация промежутков между элементами в макетах flex, grid и колонках с использованием свойств наподобие column-rule и row-rule, избавляя от костылей с псевдоэлементами и лишней вёрстки. Поддерживается в Chrome начиная с 139 версии.

https://developer.chrome.com/blog/gap-decorations

Создаем приложение с использованием Refine

Пошаговый тутораил по разработке фуллстек приложения с CRUD операциями и аутентификацией на фреймворке Refine.

https://www.youtube.com/watch?v=k4lHXIzCEkM&ab_channel=JavaScriptMastery

Эти CSS техники устарели

О привычных CSS решениях, которые работают и используются, но которые можно смело заменить более простыми, удобными и современными.

https://habr.com/ru/companies/ruvds/articles/917204/

Создаем Танграм пазл на CSS

Как при помощи SCSS создать интерактивный танграм‑пазл — набор геометрических фигур, которые можно свободно перемещать и поворачивать. Реализация логики «перетаскивания» и поворота блоков с помощью CSS‑трансформаций и переменных + организация адаптивной верстки и плавных анимаций с минимальным использованием JavaScript.

https://css-tricks.com/breaking-boundaries-building-a-tangram-puzzle-with-scss/

🚴‍♂️Не надо изобретать велосипед

Главная ошибка стартаперов — пытаться сделать идеальный продукт, годами его дорабатывать, но так и не выпустить.

В своём канале я запустил челлендж: 12 проектов за 12 месяцев.

1️⃣ Ищем идею под существующий спрос (не из головы!)
2️⃣ Разрабатываем продукт
3️⃣ Занимаемся бесплатным продвижением
4️⃣ Оптимизируем и масштабируем

Формула проста:
1 запуск = 1 функция = решение 1 проблемы

Три главных правила:
✔️ Только проверенный спрос — через поисковые запросы, а не догадки.
✔️ Быстрый запуск — никакого перфекционизма.
✔️ Только США и ЕС — там платят за удобство.

Также в канале разбираю:
— Кто и зачем будет платить за микро-продукт?
— Главная ошибка начинающих стартаперов
— Микро-продукт vs стартап
— Как бесплатно продвигать продукт

Короче, рассказываю в канале без купюр: что работает, а что нет, сколько приносит и как продвигаем. Всё, что обычно скрывают.

Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2VtzqxL27QA

Облегчаем использование регулярных выражений в JS

Несколько советов, которые сделают вашу работу с регулярками проще и удобнее.

https://2ality.com/2025/06/javascript-regexp-tips.html