FrontEndDev
26.8K subscribers
2.48K photos
23 videos
7.7K links
🚀 Статьи, новости, туториалы по frontend разработке.

http://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m
AI и вайбкод @vibe_and_ai

Читать на парковке: https://max.ru/front_end_dev

Реклама: http://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
ESLint v10.0.3: патч-апдейт для точнее проверок кода

Вышла ESLint v10.0.3 — релиз, который исправляет баги предыдущей версии и обновляет зависимость minimatch до ^10.2.4, чтобы ESLint корректно распознавал файлы. Также добавлены точечные фиксы в сообщениях правил и обновлена документация/гайд по миграции.

https://eslint.org/blog/2026/03/eslint-v10.0.3-released/
👍113🥱2
This media is not supported in your browser
VIEW IN TELEGRAM
NoJS 3 — рассвет Flappy Bird

Клон Flappy Bird без JavaScript: только HTML и CSS. Разбираем, как организовать игровую логику (движение, препятствия, столкновения) средствами современного CSS

https://blog.scottlogic.com/2026/03/09/noJS-3-flappy-bird.html
🤯76🔥3
Тестируйте доступность в реальном времени прямо во время написания кода

На ходу подсвечиваются нарушения WCAG и выпадают предупреждения в IDE/CLI с AI-подсказкам для исправлений

https://www.browserstack.com/accessibility-testing/accessibility-devtools
6😍3🔥1
Вышел Vite 8: Rolldown как единый бандлер

Vite 8 переводит сборку на Rolldown, один Rust бандлер вместо связки esbuild и Rollup, что ускоряет сборки в 10–30 раз и сохраняет совместимость с плагинами. Появляются новые возможности вроде bundle mode, гибкого chunk splitting, persistent caching на уровне модулей и поддержки Module Federation.

https://vite.dev/blog/announcing-vite8
👍187🔥6❤‍🔥1
Одно CSS-свойство, которое мгновенно улучшает вид цифр

font-variant-numeric: tabular-nums делает все цифры одинаковой ширины, убирая прыжки и перекосы в таймерах, счетчиках и дашбордах. Идеально для таблиц и анимированных чисел: меньше layout shift — приятнее UX.

https://frontendfoc.us/link/181899/web
🔥13🍌32👌2
Делегирование фокуса в Shadow DOM с delegatesFocus

delegatesFocus: true убирает ручную логику focus() в обёртках, автоматически прокидывает фокус на первый фокусируемый элемент и корректно включает :focus и :focus-within для стилизации без классов. Это закрывает проблемы с мёртвым фокусом при кликах по padding и декоративным зонам.

https://frontendmasters.com/blog/shadow-dom-focus-delegation-getting-delegatesfocus-right/
7🔥3👌2
Модульная система Sass с use и forward: как уйти от устаревшего import

Переход на use решает глобальное загрязнение, конфликты имён и дублирование кода, давая изолированные пространства имён для переменных, миксинов и функций. Разбираемся с подключением модулей, встроенными sass::math и организацией SCSS, чтобы код оставался масштабируемым и удобным для IDE.

https://habr.com/ru/articles/1013818
10💩5👎2🤔2😁1🤡1
Руководство для новичков по ручному тестированию доступности с клавиатурой

Проверьте доступность интерфейса для пользователей скринридеров с помощью пяти базовых команд Tab, Shift+Tab, Enter, Space и стрелок, чтобы быстро найти проблемы навигации и взаимодействия.

https://www.sitepoint.com/accessibility-testing-with-keyboard-navigation/
👍43🔥3
Утечки памяти во фронтенде: что нашли в 500 репозиториях и как это быстро исправить

Статический анализ 500 публичных React, Vue и Angular репозиториев показал, что 86% проектов содержат паттерны без cleanup, а бенчмарки дают около 8 KB удерживаемой памяти на цикл навигации при пропущенной очистке

https://stackinsight.dev/blog/memory-leak-empirical-study/
👍104🤮3😢1
Страница новостей на 49 МБ: как адтех и тяжёлый фронтенд превращают чтение в ожидание

49 МБ данных, сотни запросов и десятки конкурентных ставок в браузере блокируют главный поток и превращают чтение в ожидание. Разберём, как программная реклама и трекинг раздувают payload и что можно сделать, чтобы ускорить рендер и снизить нагрузку на CPU.

https://thatshubham.com/blog/news-audit
7🔥3🤯2
Temporal: как JavaScript за 9 лет починил работу с датами и временем

Temporal приходит на смену проблемному Date: неизменяемые типы, поддержка часовых поясов и календарей, а также высокая точность до наносекунд. Путь стандарта показывает, как TC39 доводит сложную задачу до Stage 4 и реального внедрения.

https://bloomberg.github.io/js-blog/post/temporal/
👍14🔥41
Как перенести консольную утилиту в Rust и запустить в браузере через WASM

Консольную логику переписывают на Rust, собирают в WebAssembly и подключают из JS, а терминальный интерфейс делают обычным HTML/CSS без фреймворков. Демо удобно публиковать через GitLab Pages с линейной сборкой в CI и встраиванием wasm в base64 для работы даже при file://.

https://habr.com/ru/articles/1014026/
1🔥103👍2
Превратите ваш сайт в MCP сервер для управления агентами

Webpage MCP позволяет агентам в MCP-клиентах управлять уже открытым Chrome браузером: навигация, скриншоты, клики, чтение контента, анализ сети и запуск JavaScript. Проект работает полностью локально через Native Messaging и stdio, добавляя к этому кросс вкладки, сохранение workflow и удобный UX прямо в браузере.

https://github.com/mcpland/webpage-mcp
7🔥6👏1
Два якоря и одна стрелка: позиционирование в CSS

Собираем интерактивную геометрию на чистом CSS: закрепляем один элемент сразу за двумя якорями, вычисляем расстояния и меняем форму стрелки при сближении. Отличный пример, как современные anchor positioning и функции min/inset позволяют делать сложные UI без JS.

https://frontendmasters.com/blog/two-circles-one-arrow-and-anchor-positioning/
👍102🔥2
Цифровая доступность без визуальных интерфейсов

Как тестировать и улучшать веб интерфейсы для людей, которые работают со скринридерами: от навигации по ссылкам и структуре контента до типичных проблем, которые ломают сценарии в реальном использовании.

https://habr.com/ru/companies/ispsystem/articles/1013824/
👍71
Capacitor OTA - обновления без ревью магазинов: архитектура, стратегии и GitHub Releases

В Capacitor обновляйте только JavaScript бандл через OTA, чтобы правки не требовали пересборки и ожидания в Google Play и App Store. Разбираем, как собрать dist в ZIP, скачать его через capacitor-updater, безопасно откатываться при сбое и выстроить FSD архитектуру с двумя стратегиями обновления.

https://habr.com/ru/articles/1013754/
4🔥3
Signal Forms в Angular: быстрый старт

Сигнальные формы в Angular заменяют ручную синхронизацию состояния формы и данных на декларативную модель через FieldTree и FieldState, где изменения напрямую обновляют связанный сигнал. В материале показан минимальный пример и как это упрощает код, но функционал помечен как экспериментальный и требует осторожности в production.

https://habr.com/ru/articles/1013664/
👍72
Вредная веб графика: как разработчики раздувают вес страниц

Оптимизация изображений часто упирается в неправильный формат и отсутствие конвертации: PNG там, где достаточно JPEG, и игнорирование WebP и AVIF. Разберем, как выбрать формат под задачу и получить кратное снижение веса без заметной потери качества, чтобы ускорить загрузку и улучшить UX.

https://habr.com/ru/companies/alfa/articles/1012848
🔥8👍42
Astro и HTML minification с HMN за пару шагов

Ускорьте сборку и уменьшите размер страниц в Astro, подключив html-minifier-next и прогоняя минификацию для всех HTML в папке dist через хуки сборки. Настройте preset comprehensive или conservative, чтобы подобрать баланс между размером и совместимостью.

https://meiert.com/blog/astro-html-minification/
3🤔2🔥1
Ограничители сетевой эффективности для ускорения загрузки веб приложений

Microsoft Edge 146 умеет мониторить загрузку ресурсов и автоматически помечать неэффективные паттерны вроде слишком больших изображений, не сжатых текстовых файлов и больших data URL, отправляя отчеты через Reporting API. Включите фичу через Document-Policy и используйте нарушения, чтобы точечно оптимизировать то, что реально тормозит ваш фронтенд.

https://blogs.windows.com/msedgedev/2026/03/17/monitor-and-improve-your-web-apps-load-performance/
👍5🤔21