FrontEndDev
25.6K subscribers
2.72K photos
30 videos
7.95K 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
Как убрать зум при двойном тапе по кнопке на мобильных

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

https://piccalil.li/blog/stop-buttons-triggering-zoom-when-theyre-double-tapped/
❤5👍4🔥1
JPEG XL наконец появился в Chrome

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

https://developer.chrome.com/blog/jpeg-xl-in-chrome
👍6💩4❤2👎1🤮1
Почему container queries не стоит путать с media queries

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

https://www.smashingmagazine.com/2026/09/stop-treating-css-container-queries-traditional-media-queries/
❤4👍4🤔1
Почему 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/
🤔5👍3❤1
Как извлечь координаты из CSS Grid без JavaScript

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

https://blog.master.dev/extracting-grid-information-using-css/
❤5👍2
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/
❤3👍1
Полифилл для Custom Attributes в DOM

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

https://www.keithcirkel.co.uk/custom-attributes-polyfill/
🔥4❤1
Connection allowlists в Chrome 152: жесткий контроль сетевых запросов в веб-приложении

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

https://developer.chrome.com/blog/connection-allowlist-announcement
👍5
Компонентное тестирование: практическое руководство для фронтенда

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

https://storybook.js.org/blog/component-testing-a-practical-guide-for-frontend-developers/
👍6
Projecting React: как собрать более узкую и быструю версию React под свои нужды

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

https://tannerlinsley.com/posts/projecting-react
🔥3🤮3
EmDash 1.0: открытая CMS для Astro

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

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