FrontEndDev
26.5K subscribers
2.54K photos
24 videos
7.76K 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
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👍43
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
Expo для React разработчиков

Expo позволяет перенести ваши React навыки в React Native и собрать нативные iOS и Android приложения без переписывания с нуля, при этом часть логики можно переиспользовать и для web. Фокус на удобной маршрутизации, нативных API и автоматизации сборок через EAS, чтобы быстрее дойти до релиза.

https://expo.dev/solutions/expo-for-react-web-devs
9👍4🔥2
Динамические toggletip с anchored container queries

Anchored container queries в Chrome 143+ позволяют определять активную fallback позицию и автоматически переключать caret у подсказки в зависимости от доступного места, сохраняя прогрессивное улучшение для остальных браузеров через popovers и anchor positioning.

https://piccalil.li/blog/building-dynamic-toggletips-using-anchored-container-queries/
👍53🤔2
Astro 6 с обновленным dev сервером и API для шрифтов

Astro 6 ускоряет разработку за счет запуска точного production runtime в dev, улучшает поддержку Cloudflare и добавляет встроенный Fonts API, CSP и Live Content Collections. Также доступны экспериментальные фичи вроде Rust компилятора, queued rendering и route caching.

https://astro.build/blog/astro-6/
🔥54👍3
Поддержка системного масштабирования текста в Chrome Canary

Chrome Canary начинает уважать системные настройки масштабирования только текста (как в iOS/Android accessibility) — это помогает делать типографику на сайте предсказуемой и доступной.

https://frontendmasters.com/blog/text-scaling-support-in-chrome-canary/
❤‍🔥5🔥1
Как чинить Dropdown-меню внутри скролл-контейнеров

Когда dropdown оказывается в блоке с overflow, он может обрезаться, “уезжать” при прокрутке или прятаться под соседними слоями. Разбираем причины по шагам и показываем стабильные решения.

https://www.smashingmagazine.com/2026/03/dropdowns-scrollable-containers-why-break-how-fix/
1👎7👍42
Forwarded from Web Stack
Тихие блокеры в robots.txt: как ошибки могут незаметно убрать сайт из Google

Неправильный .robots.txt может остановить обход страниц или скрыть важные директории, из-за чего контент не попадает в поиск. Разбираем типовые ошибки вроде Disallow: /, блокировок ресурсов и синтаксических опечаток, и проверяем конфиг через инструменты Google.

https://dev.to/freedevkit/the-silent-blockers-how-robotstxt-mistakes-can-ghost-your-site-from-google-12h0
8👍2😐1
Codemod в JavaScript: меняйте сотни файлов без боли с jscodeshift

Когда в проекте постоянно меняются API, синтаксис и UI-kit, спасает подход “меняем код машиной”: jscodeshift строит AST и позволяет делать предсказуемые трансформации сразу по всем файлам — вместо опасного поиска-замены и regex.

https://habr.com/ru/companies/banki/articles/1011580
🔥62
Masonry на Flexbox: раскладываем элементы по строкам с точной математикой

Разбираем, как Flexbox распределяет свободное место между flex-элементами (grow/shrink), чтобы собрать “мозаичный” layout из карточек разной высоты при известном aspect ratio. Освоим логику расчёта для каждой строки и сможем воспроизвести masonry-эффект без тяжёлых фреймворков.

https://frontendmasters.com/blog/flexbox-masonry-layout-explained-with-math/
11👍3🔥1
Event Loop для начинающих — разбор без страха

JavaScript выполняется в одном потоке, но браузер/окружение берут на себя асинхронщину: таймеры, клики, сети и Promise. Разберём, как Event Loop управляет очередями задач и микрозадачами, почему стек вызовов работает по принципу LIFO и как микрозадачи могут блокировать рендер.

https://habr.com/ru/articles/1011258
🔥6👍32
Собрали open-source SVG-библиотеку брендов с 4 700+ иконками

Единый источник SVG-логотипов и облачных диаграмм: поиск, версии, CDN/CLI/API и типизированные пакеты для React/Vue/Svelte. Импортируйте только нужные иконки, используйте варианты (color/mono/light/dark/wordmark) и интегрируйте в приложения без боли.

https://github.com/glincker/thesvg
17👍4🔥3🥴1
Гибридный поиск: объединяем semantic и lexical, чтобы находить точные вещи и смысл одновременно

Использование одной семантики ведет к промахам по точным названиям, API и ключевым терминам . Решение: параллельный запуск lexical и semantic поиска.

https://kentcdodds.com/blog/implementing-hybrid-semantic-lexical-search
👍53
!important #7: random(), folded corners, anchored container queries

CSS-дайджест с практичными фишками: генерация значений через random()/random-item(), «сложенные» углы через clip-path, фоновые эффекты backdrop-filter, стабильные числа font-variant-numeric: tabular-nums

https://css-tricks.com/whats-important-7/
👍622
Прекратите войну с валидацией форм: JSON Schema как единый источник правды

Дублирование проверок между фронтендом и бэкендом ломает UX и порождает регрессии. Подход schema-driven переносит правила, сообщения и условия показа полей в одну JSON-схему: форма рендерится, валидирует и согласованно проверяется на сервере.

https://blog.logrocket.com/stop-fighting-schema-driven-form-validation/
👍102👌2😁1🤯1🤮1
ESLint пора на пенсию: миграция на Oxlint для скорости и удобства

ESLint в больших репозиториях превращается в узкое горлышко: медленно прогоняет проверки и требует сложной настройки. Oxlint — быстрый линтер на Rust с большим числом правил по умолчанию и поддержкой type-aware linting, так что CI и локальная разработка ускоряются, а порог входа заметно снижается.

https://blog.logrocket.com/retire-eslint-migrate-oxlint/
👍13🔥2👎1
Нативные JSON-модули наконец-то заработали по-настоящему

Теперь JSON можно импортировать как полноценные ES-модули:
import config from "./config.json" with { type: "json" }.

Разбор происходит в runtime, включается стандартный кэш ESM и исчезают лишние трансформации/loader’ы — а сборщики становятся опциональными.

https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/
🔥92
focusgroup в HTML: декларативная навигация стрелками без роувинг-tabindex

focusgroup — атрибут, который добавляет arrow-key навигацию для составных виджетов (toolbar, tablist, menu и т.д.) без ручной настройки tabindex. В браузере остаются только ваши прикладные состояния, а направление, и восстановление фокуса берёт на себя платформа.

https://developer.chrome.com/blog/focusgroup-rfc
🔥73👍1