Палитра команд для UI: как победить хаос в много модульных интерфейсах
Показываем, как единая строка поиска команд по примеру VSCode резко упрощает навигацию в интерфейсах с десятками модулей и скрытыми действиями. Идея помогает уйти от инструкций вида открой слева категорию и найти нужную кнопку в бесконечных меню.
https://habr.com/ru/articles/1021812/
Показываем, как единая строка поиска команд по примеру VSCode резко упрощает навигацию в интерфейсах с десятками модулей и скрытыми действиями. Идея помогает уйти от инструкций вида открой слева категорию и найти нужную кнопку в бесконечных меню.
https://habr.com/ru/articles/1021812/
👍9❤1🔥1
Dither Image Online: генератор ретро пиксельного и точечного арта в реальном времени
Быстро превращаем фото в эффект stippling и pixel art прямо в браузере, настраивая алгоритмы Bayer, Crosshatch, Halftone и Contour, а также силу, цветовые уровни и bloom. Подходит для креаторов, веб дизайнеров и тех, кому нужны легкие текстуры и точечные ассеты без долгого пайплайна.
https://ditherimage.online/
Быстро превращаем фото в эффект stippling и pixel art прямо в браузере, настраивая алгоритмы Bayer, Crosshatch, Halftone и Contour, а также силу, цветовые уровни и bloom. Подходит для креаторов, веб дизайнеров и тех, кому нужны легкие текстуры и точечные ассеты без долгого пайплайна.
https://ditherimage.online/
🔥7❤3👍3
Как правильно организовать передачу файлов через WebRTC DataChannel
Передача файлов в WebRTC зависит от многих факторов: буфер SCTP, готовность получателя, переподключения, жизненный цикл файлов. Разбираем 6 реальных проблем и практические решения для P2P с TURN fallback, чтобы прогресс и статус отправки совпадали.
https://habr.com/ru/articles/1022522/
Передача файлов в WebRTC зависит от многих факторов: буфер SCTP, готовность получателя, переподключения, жизненный цикл файлов. Разбираем 6 реальных проблем и практические решения для P2P с TURN fallback, чтобы прогресс и статус отправки совпадали.
https://habr.com/ru/articles/1022522/
❤6👍2😁2🤔1
Нормализация состояния в React через Entity Registry на Zustand
Разбор паттерна Entity Registry с рекурсивным парсингом и мягкими удалениями для аккуратного UI и точечных перерендеров.
https://habr.com/ru/articles/1019110/
Разбор паттерна Entity Registry с рекурсивным парсингом и мягкими удалениями для аккуратного UI и точечных перерендеров.
https://habr.com/ru/articles/1019110/
👍8💩6❤2🥱1
Как правильно реализовать кнопку Назад во Vue
Кнопка «Назад» должна возвращать по истории браузера, а не делать router.push, иначе получим дубли страниц и ловушку навигации. Разбераемся, когда использовать router.back или router.go(-1), и как добавить fallback и beforeNavigate для сложных сценариев.
https://habr.com/ru/articles/1023578
Кнопка «Назад» должна возвращать по истории браузера, а не делать router.push, иначе получим дубли страниц и ловушку навигации. Разбераемся, когда использовать router.back или router.go(-1), и как добавить fallback и beforeNavigate для сложных сценариев.
https://habr.com/ru/articles/1023578
👍11❤1
View Transitions toolkit для удобной работы с продвинутыми переходами
Набор утилит для View Transitions: детект поддержки, shim для activeViewTransition, оптимизация keyframes, управление воспроизведением и автоматическая подстановка transition типов при навигации. Устанавливайте npm пакет и используйте готовые хелперы, чтобы не изобретать велосипед каждый раз при сложных анимациях.
https://www.bram.us/2026/04/02/view-transitions-toolkit/
Набор утилит для View Transitions: детект поддержки, shim для activeViewTransition, оптимизация keyframes, управление воспроизведением и автоматическая подстановка transition типов при навигации. Устанавливайте npm пакет и используйте готовые хелперы, чтобы не изобретать велосипед каждый раз при сложных анимациях.
https://www.bram.us/2026/04/02/view-transitions-toolkit/
👍8❤1
Pretext — библиотека, которая считает текстовую вёрстку в 500 раз быстрее браузера. Зачем это нужно и как работает
28 марта 2026 инженер Midjourney Cheng Lou выложил в открытый доступ движок текстовой верстки Pretext на чистом TypeScript, который обходит DOM и layout reflow. Это ускоряет сценарии с постоянными пересчётами высоты текста — от AI-стриминга до виртуализации списков.
https://habr.com/ru/articles/1020058/
28 марта 2026 инженер Midjourney Cheng Lou выложил в открытый доступ движок текстовой верстки Pretext на чистом TypeScript, который обходит DOM и layout reflow. Это ускоряет сценарии с постоянными пересчётами высоты текста — от AI-стриминга до виртуализации списков.
https://habr.com/ru/articles/1020058/
👍16💩2❤1🔥1🤔1🤡1🥴1
Name-only контейнеры в CSS для безопасного scoped стиля
Name-only контейнеры позволяют ограничивать область действия стилей по имени без условий, решая конфликт классов в больших дизайн системах и многолетних проектах. Это ближе к тому, что дают CSS modules и scoped styles в компонентах, но с поддержкой на уровне веб платформы.
https://frontendmasters.com/blog/name-only-containers-the-scoping-we-needed/
Name-only контейнеры позволяют ограничивать область действия стилей по имени без условий, решая конфликт классов в больших дизайн системах и многолетних проектах. Это ближе к тому, что дают CSS modules и scoped styles в компонентах, но с поддержкой на уровне веб платформы.
https://frontendmasters.com/blog/name-only-containers-the-scoping-we-needed/
👍7❤1
Syncpack для монорепозитория: единые версии зависимостей без рассинхрона
Syncpack помогает находить и фиксить расхождения версий в больших JavaScript монорепах, а также задавать правила для точных и loose semver диапазонов. Можно принудительно держать одну версию, банить нежелательные пакеты и автоматически обновлять зависимости, сохраняя консистентность package.json.
https://syncpack.dev/
Syncpack помогает находить и фиксить расхождения версий в больших JavaScript монорепах, а также задавать правила для точных и loose semver диапазонов. Можно принудительно держать одну версию, банить нежелательные пакеты и автоматически обновлять зависимости, сохраняя консистентность package.json.
https://syncpack.dev/
👍9🔥2❤1
Поддержка Solid 2.0 beta в TanStack Router, Start и Query
Solid 2.0 beta: асинхронный рендер, derived state и SSR получили новые паттерны, а TanStack Router, Start и Query остаются совместимыми. Достаточно обновить зависимости и, при необходимости, добавить solid-query, чтобы сразу получить роутинг, загрузочные состояния и data fetching в одном стеке.
https://tanstack.com/blog/tanstack-start-solid-v2
Solid 2.0 beta: асинхронный рендер, derived state и SSR получили новые паттерны, а TanStack Router, Start и Query остаются совместимыми. Достаточно обновить зависимости и, при необходимости, добавить solid-query, чтобы сразу получить роутинг, загрузочные состояния и data fetching в одном стеке.
https://tanstack.com/blog/tanstack-start-solid-v2
👍7🔥1
SVGInject: внедряйте SVG inline в DOM без сборки
Небольшая библиотека заменяет img на inline svg, чтобы стилизовать любые path, circle и group через CSS, включая анимации и темную тему. Поддерживает кэширование, предотвращает конфликты ID и автоматически улучшает доступность через ARIA.
https://github.com/iconfu/svg-inject
Небольшая библиотека заменяет img на inline svg, чтобы стилизовать любые path, circle и group через CSS, включая анимации и темную тему. Поддерживает кэширование, предотвращает конфликты ID и автоматически улучшает доступность через ARIA.
https://github.com/iconfu/svg-inject
GitHub
GitHub - iconfu/svg-inject: A tiny, intuitive, robust, caching solution for injecting SVG files inline into the DOM.
A tiny, intuitive, robust, caching solution for injecting SVG files inline into the DOM. - iconfu/svg-inject
👍9❤2🤡2🔥1
7 рецептов для View Transitions в CSS
Собрали готовые шаблоны анимаций для плавных переходов между страницами: от простого dissolve до более выразительных эффектов. Подходит как для практики, так и для быстрого внедрения в веб приложения с учетом prefers-reduced-motion.
https://css-tricks.com/7-view-transitions-recipes-to-try/
Собрали готовые шаблоны анимаций для плавных переходов между страницами: от простого dissolve до более выразительных эффектов. Подходит как для практики, так и для быстрого внедрения в веб приложения с учетом prefers-reduced-motion.
https://css-tricks.com/7-view-transitions-recipes-to-try/
🔥12❤3👍1
Что знать в JavaScript к 2026 году
Обновления ECMAScript 2025, ленивые Iterator Helpers для экономии памяти, методы для Set и RegExp.escape для безопасной сборки регулярных выражений из пользовательского ввода. В фокусе не только язык, но и то, как это применять в рантаймах, фреймворках, библиотеках и туллинге.
https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/
Обновления ECMAScript 2025, ленивые Iterator Helpers для экономии памяти, методы для Set и RegExp.escape для безопасной сборки регулярных выражений из пользовательского ввода. В фокусе не только язык, но и то, как это применять в рантаймах, фреймворках, библиотеках и туллинге.
https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/
👍8❤3
Делаем эмодзи и иконки доступными для скринридеров
Эмодзи и иконки в коде часто не являются настоящими изображениями, поэтому скринридер читает их буквальные названия или не находит текста. Добавляйте текстовые альтернативы, подписывайте icon-only элементы и контролируйте, чтобы смысл не терялся без визуального контекста.
https://blog.pope.tech/2026/04/01/making-emojis-and-icons-screen-reader-accessible/
Эмодзи и иконки в коде часто не являются настоящими изображениями, поэтому скринридер читает их буквальные названия или не находит текста. Добавляйте текстовые альтернативы, подписывайте icon-only элементы и контролируйте, чтобы смысл не терялся без визуального контекста.
https://blog.pope.tech/2026/04/01/making-emojis-and-icons-screen-reader-accessible/
❤5👍3🔥1
Безопасная загрузка файлов в Node.js
Решение для защиты загрузки файлов в бэкенде: валидация, ограничения и снижение рисков вроде вредоносного контента и переполнений. Подходит для веб приложений, где важны надежность и контроль входящих данных.
github.com/pompelmi/pompelmi
Решение для защиты загрузки файлов в бэкенде: валидация, ограничения и снижение рисков вроде вредоносного контента и переполнений. Подходит для веб приложений, где важны надежность и контроль входящих данных.
github.com/pompelmi/pompelmi
GitHub
GitHub - pompelmi/pompelmi: ClamAV antivirus scanning for Node.js — scan file uploads with a single function call. Zero dependencies.…
ClamAV antivirus scanning for Node.js — scan file uploads with a single function call. Zero dependencies. Typed Symbol verdicts. Local or Docker/clamd. - pompelmi/pompelmi
👍11❤2
Формы в Angular: от Reactive Forms к Signal Forms
Signal Forms в Angular v21 дают новый способ управления состоянием формы через сигналы, уменьшая шаблонную и компонентную разрозненность. Разберем, как мигрировать подход от FormGroup и FormArray к более предсказуемой модели и что это меняет в валидации и работе с динамическими полями.
https://habr.com/ru/companies/domclick/articles/1018180
Signal Forms в Angular v21 дают новый способ управления состоянием формы через сигналы, уменьшая шаблонную и компонентную разрозненность. Разберем, как мигрировать подход от FormGroup и FormArray к более предсказуемой модели и что это меняет в валидации и работе с динамическими полями.
https://habr.com/ru/companies/domclick/articles/1018180
👍8❤2⚡1
Чем заменить !important в CSS
Каскадные слои, грамотный порядок подключений, трюки с селекторами и работа с специфичностью помогают убрать !important и вернуть предсказуемость стилей в больших проектах.
https://css-tricks.com/alternatives-to-the-important-keyword/
Каскадные слои, грамотный порядок подключений, трюки с селекторами и работа с специфичностью помогают убрать !important и вернуть предсказуемость стилей в больших проектах.
https://css-tricks.com/alternatives-to-the-important-keyword/
👍6❤3🔥1
CSS subgrid для выравнивания контента из CMS без костылей
Subgrid позволяет наследовать сетку родителя и легко расширять фон и блоки на всю ширину или возвращать их обратно в основной столбец, сохраняя точное выравнивание текста. Это упрощает сложные макеты с вложенными блоками и делает верстку предсказуемой.
https://dbushell.com/2026/04/02/css-subgrid-is-super-good/
Subgrid позволяет наследовать сетку родителя и легко расширять фон и блоки на всю ширину или возвращать их обратно в основной столбец, сохраняя точное выравнивание текста. Это упрощает сложные макеты с вложенными блоками и делает верстку предсказуемой.
https://dbushell.com/2026/04/02/css-subgrid-is-super-good/
👍6⚡1
SSGOI: нативные переходы между страницами
SSGOI добавляет плавные переходы с поддержкой React, Next, Vue, Nuxt, Svelte и Angular, работая с любым роутингом. Есть готовые типы переходов и быстрая настройка через обёртки вокруг layout и страниц.
https://github.com/meursyphus/ssgoi
SSGOI добавляет плавные переходы с поддержкой React, Next, Vue, Nuxt, Svelte и Angular, работая с любым роутингом. Есть готовые типы переходов и быстрая настройка через обёртки вокруг layout и страниц.
https://github.com/meursyphus/ssgoi
1😁8👍7🥴1😐1
HTML в canvas: рисуем и компонуем DOM с доступностью
Предложение к использованию <canvas>, которое добавляет примитивы для layoutsubtree, drawElementImage и paint event, чтобы корректно рендерить дочерние HTML элементы в 2D и 3D canvas с согласованным fallback и hit testing. Идея закрывает боль с качеством, доступностью и экспортом контента, а также открывает путь к эффектам через WebGL/WebGPU.
https://github.com/WICG/html-in-canvas
Предложение к использованию <canvas>, которое добавляет примитивы для layoutsubtree, drawElementImage и paint event, чтобы корректно рендерить дочерние HTML элементы в 2D и 3D canvas с согласованным fallback и hit testing. Идея закрывает боль с качеством, доступностью и экспортом контента, а также открывает путь к эффектам через WebGL/WebGPU.
https://github.com/WICG/html-in-canvas
GitHub
GitHub - WICG/html-in-canvas
Contribute to WICG/html-in-canvas development by creating an account on GitHub.
👍9❤2👎2⚡1🤔1🤨1