28143
🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Читать на парковке: https://max.ru/front_end_dev Реклама: http://bit.ly/2NxmVDu РКН: https://clck.ru/3GLw7G
Я 💛 Фронтенд 2026
Прямая трансляция конференции которая начнется сегодня в 11:00 МСК
Программу можно глянуть тут.
https://www.youtube.com/live/Da3cJi7RDPg
CSS @scope: Альтернатива соглашениям об именовании и тяжелым абстракциям
Упрощаем поддержку стилей с новым правилом @scope, которое позволяет точно ограничивать область действия стилей в DOM.
https://www.smashingmagazine.com/2026/02/css-scope-alternative-naming-conventions/
Компилируем TypeScript в натив: хардкор и мясо.
TSNative — это AOT-компилятор, который позволяет преобразовывать TypeScript-код в нативные бинарные файлы, используя LLVM IR. Это решение подходит для создания десктопных приложений, обеспечивая прямое взаимодействие с C++ без браузера или JavaScript-движка.
https://habr.com/ru/companies/ncloudtech/articles/990666
Claude Code Agent teams.
Claude Code теперь поддерживает команды агентов, позволяя нескольким ИИ-помощникам работать над сложными задачами параллельно. Такая многоагентная координация значительно ускоряет исследование, отладку и разработку, делегируя задачи специализированным агентам для более эффективного выполнения.
https://addyosmani.com/blog/claude-code-agent-teams/
Как frontend-разработчику получить оффер в Big Tech?
Платят как джуну, а спрашивают как с лида 🙄 Зарплата не растёт, задачи скучные.
Пробуешь откликаться, но на резюме клюют только ноунейм компании, а на собесах валят на алгоритмах? При этом вокруг кто-то постоянно получает офферы в Яндекс или VK...
Стабильность с маленькой зп, или дестрой рынка и выход на максимальную? Синяя или красная таблетка, Нео?! 👾
Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор.
Помогаю устроиться на хорошие позиции в Big Tech и сопровождаю на испытательном сроке.
Я усвоил первое правило ARIA сложным путем
Семантический HTML по умолчанию выполняет много работы по доступности и ARIA легко использовать неправильно. Его следует применять только для передачи недостающего состояния или для по-настоящему кастомных виджетов, не переопределяя встроенные роли HTML-элементов.
https://css-tricks.com/i-learned-the-first-rule-of-aria-the-hard-way/
Анимация переходов адаптивного макета сетки с помощью GSAP Flip
Туториал, показывающий, как плавно анимировать изменения размера и перестановку элементов сетки при динамических изменениях макета. Этот подход с использованием плагина GSAP Flip идеально подходит для создания интерактивных галерей и портфолио с бесшовными переходами.
https://tympanus.net/codrops/2026/01/20/animating-responsive-grid-layout-transitions-with-gsap-flip/
Веб-стандарты: выпуск 509
Антивебные API для веба, LLM помогает и убивает Tailwind, нездоровая зависимость от бандлеров
https://web-standards.ru/podcast/509/
Отладка с помощью сил древнего зла.
Этот устаревший HTML-элемент <plaintext> полностью останавливает парсинг страницы, отображая весь последующий контент как простой текст. Хотя его не стоит использовать в продакшене, он может помочь в быстрой отладке серверного вывода, но стоит быть внимательным к его взаимодействию с различными HTML-санитайзерами.
https://habr.com/ru/companies/ruvds/articles/981920/
Аутентификация с React Router v7: полное руководство
React Router v7 предлагает унифицированный подход к роутингу, позволяя создавать защищенные маршруты и реализовывать двухфакторную аутентификацию. Он также поддерживает новый "data mode" для эффективной загрузки данных вне компонентов.
https://blog.logrocket.com/authentication-react-router-v7/
Состояние HTML 2025
Результаты ежегодного опроса о возможностях веб-платформы. Результаты охватывают формы, графику, производительность, API и доступность.
https://2025.stateofhtml.com/en-US/
!important и CSS-переменные.
Неочивидное поведение !important, которое применяется к самой декларации CSS-переменной, а не к ее значению. Такое поведение влияет на каскад, игнорируя специфичность и порядок.
https://frontendmasters.com/blog/important-and-css-custom-properties/
JavaScript: практическое руководство по Blob, File API и оптимизации памяти.
В современных фронтенд-приложениях часто приходится работать с файлами, и это руководство предлагает практические подходы для эффективной обработки больших объемов данных. Посмотрим, как создавать Blob-объекты, разбивать файлы на части, сжимать изображения, реализовывать универсальные превью и экспортировать данные, а также управлять памятью, чтобы избежать утечек.
https://habr.com/ru/companies/timeweb/articles/976774
AI убил бизнес Tailwind CSS, приведя к сокращению 75% разработчиков в компании.
Популярный фреймворк столкнулся с обвалом доходов, так как разработчики используют ИИ для генерации кода, минуя документацию и платные продукты. Это стало серьёзным вызовом для бизнес-моделей опенсорс-проектов, которые монетизируются через премиум-компоненты и обучение.
https://habr.com/ru/articles/983602/
Создаем адаптивную SVG Favicon используя prefers-color-scheme Media Query
Favicon автоматически переключается в светлую/темную тему в зависимости от системных настроек пользователя
https://youtu.be/5ByMihLrNrI?utm_campaign=Issue-630
Полифилл для switch
В Safari 17.4 появился новый нативный HTML элемент switch, который превращает обычный checkbox с атрибутом switch в переключатель. Для остальных браузеров есть полифилл. Подробее о нем — в статье
https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/
Браузер ненавидит сюрпризы
Непредвиденные изменения макета, например, из-за долгой загрузки изображений, вынуждают браузер пересчитывать геометрию страницы, вызывая скачки интерфейса. Подробно о том, как избежать этого и заранее резервировать пространство для контента в статье frontendmasters.
https://frontendmasters.com/blog/the-browser-hates-surprises/
Отладка перфоманса с использованием Chrome DevTools MCP
Пошаговый туториал автоматизированного анализа производительности веб приложений с помощью AI и Chrome DevTools MCP.
https://www.debugbear.com/blog/chrome-devtools-mcp-performance-debugging
Тихая революция в CSS в создании вырезов в блоках
Пока мы делаем вид, что не прошляпили посты за ВСЮ прошлую неделю, предлагаем вам почитать как делать вырезы с использованием CSS-масок одной строчкой.
https://habr.com/ru/articles/993310
Как легко определить версии Safari и iOS
Почему стоит отдавать предпочтение проверке фич вместо ненадежного User-Agent
https://evilmartians.com/chronicles/how-to-detect-safari-and-ios-versions-with-ease
CSS в 2026 году: новые возможности, меняющие фронтенд-разработку
Современный CSS становится достаточно мощным для обработки сложных анимаций и пользовательских взаимодействий, которые ранее требовали JavaScript. Использование таких функций, как appearance: base-select, sibling-index() и улучшенного attr(), позволяет создавать интерактивные элементы с меньшим количеством кода, сохраняя при этом нативную доступность.
https://blog.logrocket.com/css-in-2026/
JavaScript: прощай, Date, здравствуй, Temporal.
Встроенный объект Date давно доставлял неудобства разработчикам из-за своей нелогичности и изменяемости, что приводило к ошибкам и сложностям в работе со временем. Новый API Temporal призван решить эти проблемы, предлагая современный, более последовательный и функциональный подход к манипуляциям с датами и временем.
https://habr.com/ru/articles/984884/
Детектируем тряску мобильного устройства
Реализуем обнаружение встряхивания смартфона без использования сторонних библиотек, опираясь на нативный API devicemotion
https://slicker.me/javascript/shake/shake.htm
Набор инструментов для тестирования, отладки и анализа вебхуков.
Он позволяет захватывать, проверять и повторять запросы в реальном времени, не требуя использования локальных туннелей. Инструмент поддерживает мокинг API, валидацию JSON-схем и идеально подходит для отладки рабочих процессов со Stripe, GitHub и Shopify.
https://github.com/ar27111994/webhook-debugger-logger
Стилизация с учетом направления прокрутки с помощью scroll-state
Новая CSS-функция позволяет применять стили в зависимости от последнего направления прокрутки пользователя. Она открывает возможности для создания адаптивных элементов интерфейса, таких как автоматическое скрытие/появление навигации, и реализации направленных анимаций.
https://una.im/scroll-state-scrolled
4 функции CSS, которые должен знать каждый фронтенд-разработчик в 2026 году.
Под кликбейтным заголовком спрятаны фичи управления анимацией на основе состояния соседних элементов, инструменты для точного выравнивания текста и безопасной передачи данных из HTML-атрибутов в CSS.
https://nerdy.dev/4-css-features-every-front-end-developer-should-know-in-2026
Создаем свой первый MCP сервер
Что такое MCP Server и как создать свой простой сервер прогноза погоды, который может взаимодействовать с Claude.
https://www.youtube.com/watch?v=Y4bpWRLdRoA
За пределами мыши: анимация с использованием мобильных акселерометров
Оживиляем интерфейс мобильных веб-приложений, используя встроенные акселерометры и датчики движения смартфонов.
https://frontendmasters.com/blog/beyond-the-mouse-animating-with-mobile-accelerometers/
За пределами RxJS: гайд по TanStack Pacer
TanStack Pacer — это легковесная библиотека для фронтенда, которая упрощает управление асинхронными событиями и решает распространенные проблемы производительности UI. Она предоставляет готовые утилиты для дебаунса, троттлинга и батчинга.
https://blog.logrocket.com/beyond-rxjs-guide-tanstack-pacer/
JavaScript: заметка об Anchor Positioning API
Этот новый Web API значительно упрощает позиционирование элементов, позволяя привязывать их к другим "якорным" элементам с помощью CSS. С его помощью можно легко создавать адаптивные выпадающие меню, тултипы и другие компоненты, которые автоматически меняют свою позицию, например, при выходе за пределы экрана.
https://habr.com/ru/companies/timeweb/articles/979180