front_end_dev | Technologies

Telegram-канал front_end_dev - FrontEndDev

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

Subscribe to a channel

FrontEndDev

TypeScript перегрузки стали понятнее

Перегрузки в TypeScript позволяют одной функции поддерживать несколько сценариев вызова и точнее выводить типы аргументов и результата. Для старого API можно добавить новую сигнатуру, не ломая существующие вызовы, если реализация принимает объединённые типы.

https://habr.com/ru/articles/1096858/

Читать полностью…

FrontEndDev

Сниппет для иконок через CSS-переменные

Проблема в том, что иконки в HTML быстро превращаются в шум: svg в разметке, обёртки, отдельные компоненты, а менять их по состоянию или теме неудобно. Здесь предлагается держать иконку как токен и подставлять её через CSS, чтобы переопределение было таким же простым, как смена переменной.

button.delete {
--icon: var(--icon-trash-outlined);

@media (prefers-color-scheme: dark) {
--icon: var(--icon-trash-filled);
}

&:hover {
background: var(--color-danger);
color: var(--color-danger-text);
}
}


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

https://lea.verou.me/blog/2026/icons/

Читать полностью…

FrontEndDev

Interop 2026 показал будущее CSS

Проект Interop, в котором браузерные вендоры согласуют новые HTML, CSS и JS-возможности, собрал список CSS-фич, которые скоро могут стать общими для браузеров. Среди них есть изменения, которые упростят верстку и снизят расхождения между движками.
Interop не гарантирует мгновенный выпуск, поэтому часть возможностей сначала появится в отдельных браузерах и только потом доедет до всех.

https://www.joshwcomeau.com/css/interop-2027/

Читать полностью…

FrontEndDev

Rsbuild снизил память сборки Vue-приложения на 52%

На сервере с 4 ГБ памяти Vite-сборка Vue-приложения упиралась в OOM, а переход на Rsbuild снизил пик RSS с 1681 до 802 MiB и ускорил сборку с 41 до 11,7 секунды. Лимит --max-old-space-size=1280 помог, но при 1248 MiB сборка уже стала в три раза медленнее, а отключение gzip-отчёта и перестановка этапов проблему не сняли.

https://habr.com/ru/articles/1095642/

Читать полностью…

FrontEndDev

Прогулка внутри «Золотой осени» Левитана на three.js

Возможность погрузиться в картину Левитана — кадр из исходной точки выверен по картине из Третьяковки, управление от первого лица (WASD + touch-джойстик на мобильных), автопилот («режим фильма»), звук шагов и окружения через Web Audio API. Работает быстро даже на средних смартфонах.

https://neurasystems.pro/zolotaya-osen/

Читать полностью…

FrontEndDev

Вышел Bun 1.4.3 с встроенной проверкой TypeScript

Вышел Bun 1.4.3, и в нём появился bun check — встроенная проверка типов TypeScript, которая читает tsconfig.json и выдаёт ошибки как tsc. bun check подключается к bun run, bun test и bun build, а в простое серверные процессы теперь расходуют заметно меньше CPU.

https://bun.com/blog/bun-v1.4.3

Читать полностью…

FrontEndDev

MSW 3.0: ESM-only, плагин для Vite и перехват навигаций и отправки форм

MSW 3.0 перевёл библиотеку на ESM-only, добавил плагин для Vite, поддержку GraphQL subscriptions и перехват переходов по страницам и отправки форм. Это делает мокинг API удобнее в современных фронтенд-проектах: проще встраивать в Vite, покрывать более сложные сценарии и тестировать не только запросы, но и пользовательские действия, которые приводят к навигации или сабмиту формы.

https://github.com/mswjs/msw/releases/tag/v3.0.0

Читать полностью…

FrontEndDev

GitHub добавил API для истории звёзд без приватных данных

GitHub выпустил REST API endpoint для истории звёзд репозитория с временными метками, который показывает рост star count без раскрытия списка stargazer. Это даёт возможность снова строить графики и метрики популярности репозитория после того, как выдачу списка пользователей ограничили ради приватности. Endpoint подходит для обновления аналитики и интеграций, которые раньше отслеживали динамику звёзд.

https://github.blog/changelog/2026-09-04-new-api-endpoint-provides-privacy-safe-star-history-data/

Читать полностью…

FrontEndDev

Как безопасно тестировать обработчик postMessage у iframe

iframe с postMessage удобно использовать для виджетов, но без проверок любой соседний или внешний window может подменить сообщение. Для resize это особенно заметно: один фальшивый payload может свернуть или раздувать встраиваемый блок, а при неосторожной обработке данных дойти и до XSS.

https://blog.master.dev/testing-an-iframes-postmessage-handler/

Читать полностью…

FrontEndDev

Projecting React: как собрать более узкую и быструю версию React под свои нужды

AI-сгенерированная проекция public API React, заточенная под требования TanStack Start, может уменьшить клиентский бандл примерно до 9 KB и ускорить работу в 2–3 раза на целевых сценариях. Это не замена React и не продукт для массового использования, а эксперимент, который уже работает на реальных сайтах и показывает, что часть API можно вырезать или упростить без потери нужного функционала.

https://tannerlinsley.com/posts/projecting-react

Читать полностью…

FrontEndDev

Connection allowlists в Chrome 152: жесткий контроль сетевых запросов в веб-приложении

Connection allowlists позволяют браузеру разрешать сетевые запросы только к заранее заданным endpoint'ам и блокировать все остальное на уровне сети. Это полезно, когда нужно защитить приложение от утечек данных через вредоносный или сгенерированный код и закрыть дыры, которые не покрывает CSP.

https://developer.chrome.com/blog/connection-allowlist-announcement

Читать полностью…

FrontEndDev

WebXR с Three.js без игрового движка: как запустить VR и AR прямо в браузере

WebXR с Three.js позволяет делать VR и AR как обычную веб-страницу: пользователь открывает URL в браузере шлема и сразу попадает в сцену, без установки приложения и стор-ревью. Для старта нужен Three.js, HTTPS и устройство с WebXR-браузером, а для разработки без железа подходит WebXR Emulator.

https://newsnix.com/articles/webxr-threejs-tutorial-getting-started-no-engine/

Читать полностью…

FrontEndDev

Почему null-prototype объекты тормозят в V8

Объекты с __proto__: null в V8 почти всегда остаются в dictionary mode, поэтому их создание и чтение заметно медленнее обычных объектов. Если такой объект попадает на горячий путь, это может съедать пропускную способность, как это случилось в WebStreams в Node core. Для горячих структур лучше использовать обычный literal и потом сбрасывать prototype, либо класс с null-prototype у prototype, а не создавать объект сразу с __proto__: null.

https://adventures.nodeland.dev/archive/optimizing-objects-with-null-prototypes/

Читать полностью…

FrontEndDev

JPEG XL наконец появился в Chrome

Chrome 155 добавил поддержку JPEG XL, и это даёт более эффективное сжатие изображений, HDR и более гибкий формат для веба без дополнительных обходных путей.

https://frontendfoc.us/issues/761

Читать полностью…

FrontEndDev

Transitions.dev: готовые UI-анимации для AI-агентов

Коллекция из 43+ готовых UI-переходов для веб-приложений, которые можно вставить в проект вручную или использовать через coding agent. Инструмент помогает быстро улучшать motion в интерфейсе, а также умеет оценивать кодовую базу по motion score и вносить правки через pull request.

https://transitions.dev/

Читать полностью…

FrontEndDev

Deno уходит в Cloudflare ради новой платформы

Команда Deno переходит в Cloudflare, потому что хочет развивать не отдельный runtime, а общую платформу для серверов, где compute, storage и communication работают вместе. Авторы прямо говорят, что Deno Deploy показал: удобный DX есть, но под ним всё ещё слишком много инфраструктурной сложности.

Сильный аргумент за этот шаг — celld и Durable Objects обещают распределённые приложения с масштабированием, встроенным в модель программирования, а не собранным вручную. Сильный аргумент против — Deno как runtime получит только год поддержки, Deno Deploy закроется через шесть месяцев, а тем, кто строил на экосистеме, придётся мигрировать.

А вы бы поставили на такую платформу вместо отдельного runtime?

https://deno.com/blog/cloudflare

Читать полностью…

FrontEndDev

Что можно собрать из ::before и ::after

Псевдоэлементы ::before и ::after можно превратить в полноценные декоративные слои и фигуры без лишних узлов в HTML. box-shadow, несколько background и clip-path позволяют собрать из одного псевдоэлемента повторяющиеся объекты, сложные фоны и нестандартные формы.

https://habr.com/ru/companies/gnivc/articles/1096800/?utm_campaign=1096800&utm_source=habrahabr&utm_medium=rss

Читать полностью…

FrontEndDev

Scheduler.yield() разгрузил главный поток

Современный Web API scheduler.yield() помогает дробить тяжёлые вычисления и возвращать управление браузеру без долгих блокировок интерфейса. В тесте на 500 тыс. записей задержка ввода упала с 45,4 до 0,3 мс по сравнению с синхронным запуском.

Порция в 8192 записи укладывается примерно в 1,7 мс CPU, а setTimeout(0) в такой схеме проигрывает из-за 4 мс минимальной задержки и потери приоритета продолжения.

https://habr.com/ru/companies/domclick/articles/1090250/

Читать полностью…

FrontEndDev

Полный справочник по CSS-единицам

Интерактивный справочник по CSS-единицам собрал в одном месте все основные и новые единицы измерения, от px и rem до svh, dvh и cqw. В браузере можно сразу увидеть, как меняются размеры, плюс есть PDF-верси, которую можно скачать.

https://cssunits.com/

Читать полностью…

FrontEndDev

HTML научился собирать потоковые ответы без рекурсии

В Chromium тестируют Declarative Partial Updates, где новый элемент <?marker> позволяет вставлять HTML не по порядку и собирать страницу прямо на клиенте. Для длинных веток комментариев и чат-ответов это убирает необходимость сначала строить дерево на сервере и потом рендерить его целиком.

<?marker> работает один раз в конкретной точке, а для очень больших веток вроде 10K постов браузер всё равно можно перегрузить.

https://daverupert.com/2026/10/html-recursion/

Читать полностью…

FrontEndDev

Расширение MD-This-Page превращает страницы в Markdown

MD-This-Page — расширение для браузера, которое в один клик превращает любую страницу в чистый Markdown и убирает лишний шум. В Firefox и Chromium-браузерах оно работает локально, а для Safari сборку нужно делать вручную на macOS с Xcode.

https://github.com/Ademking/MD-This-Page

Читать полностью…

FrontEndDev

Как передать sibling-count() родительскому элементу в CSS

CSS-трюк на Scroll-Driven Animations позволяет получить количество дочерних элементов и передать это значение родителю без JavaScript. Это полезно, когда нужно строить стили и поведение интерфейса от числа элементов, а native children-count() пока еще не готов.

https://blog.master.dev/transferring-sibling-count-to-a-parent-element/

Читать полностью…

FrontEndDev

Markuplint: линтер для HTML и разметки в разных фреймворках

Линтер для разметки, который проверяет HTML по стандартам, правилам доступности и вашим проектным соглашениям, а также умеет работать не только с HTML, но и с JSX, Vue, Svelte, Astro и другими форматами.

https://markuplint.dev/

Читать полностью…

FrontEndDev

EmDash 1.0: открытая CMS для Astro

Стабильная open source CMS на Astro, которая упрощает публикацию контента, работает на современном хостинге и поддерживает AI-агентов через встроенные API, CLI и MCP server. Для проектов на Astro это альтернатива классическим CMS с более безопасной моделью плагинов и без жёсткой привязки к платформе.

https://emdashcms.com/blog/emdash-1-0

Читать полностью…

FrontEndDev

Компонентное тестирование: практическое руководство для фронтенда

Компонентное тестирование помогает проверять UI-компоненты в реальном браузере отдельно от всего приложения и быстро ловить проблемы в состояниях, которые сложно воспроизвести end-to-end тестами.

https://storybook.js.org/blog/component-testing-a-practical-guide-for-frontend-developers/

Читать полностью…

FrontEndDev

Полифилл для Custom Attributes в DOM

Custom Attributes позволяют вешать поведение не только на элементы, но и на атрибуты: атрибут становится экземпляром класса Attr, получает lifecycle callbacks и может работать на HTML, SVG и MathML. Это дает способ вынести поведение в атрибут и переиспользовать его без конфликта с API элемента.

https://www.keithcirkel.co.uk/custom-attributes-polyfill/

Читать полностью…

FrontEndDev

Как извлечь координаты из CSS Grid без JavaScript

CSS уже умеет не только раскладывать элементы по сетке, но и вычислять их положение внутри нее. Это полезно, когда нужно знать, где именно стоит карточка в responsive grid, даже если она занимает несколько строк и колонок. Подход работает без JavaScript, но требует фиксированной высоты строк, поддержки container queries и Scroll-Driven Animations, а также доступен полноценно только в Chrome и Edge.

https://blog.master.dev/extracting-grid-information-using-css/

Читать полностью…

FrontEndDev

Почему container queries не стоит путать с media queries

Container queries решают другую задачу, чем media queries: они заставляют компонент подстраиваться под доступное место внутри своего контейнера, а не под ширину всего окна. Это особенно полезно для переиспользуемых карточек, виджетов, форм и навигации, которые могут жить в разных частях интерфейса и должны вести себя по-разному без привязки к viewport.

https://www.smashingmagazine.com/2026/09/stop-treating-css-container-queries-traditional-media-queries/

Читать полностью…

FrontEndDev

Как убрать зум при двойном тапе по кнопке на мобильных

Если на мобильном при быстром тапе по кнопке страница начинает зумиться, это часто не проблема viewport, а реакция браузера на double tap. Для кнопок достаточно добавить touch-action: manipulation; это отключает двойной тап для зума, но сохраняет обычный pinch zoom и не ломает доступность.

https://piccalil.li/blog/stop-buttons-triggering-zoom-when-theyre-double-tapped/

Читать полностью…

FrontEndDev

DOCX 9.8: генерация Word .docx файлов из JavaScript

Библиотека для создания .docx документов прямо из JavaScript. В версии 9.8 добавили поддержку диаграмм, фигур, водяных знаков и расширили работу с математическими формулами. Это полезно, когда нужно собирать Word-файлы на лету без ручной верстки в редакторе.

https://github.com/dolanmiu/docx/releases/tag/9.8.0

Читать полностью…
Subscribe to a channel