Crashcat: физический движок на JavaScript для игр, симуляций и креативных веб проектов
Crashcat добавляет реалистичную физику в фронтенд. Пакет написан на чистом JavaScript и хорошо подходит для интеграции с Babylon.js, Three.js и собственными движками, поддерживая tree shaking.
https://github.com/isaac-mason/crashcat
Crashcat добавляет реалистичную физику в фронтенд. Пакет написан на чистом JavaScript и хорошо подходит для интеграции с Babylon.js, Three.js и собственными движками, поддерживая tree shaking.
https://github.com/isaac-mason/crashcat
❤🔥17👍2❤1🔥1
Intl API для форматирования дат, чисел и валют без библиотек
Intl позволяет форматировать даты, время, числа, списки и текст с учетом локали пользователя прямо в браузере, без добавления килобайт в бандл и без парсинга JS. Разбираем ключевые API вроде Intl.DateTimeFormat, Intl.NumberFormat и Intl.RelativeTimeFormat и типичные ограничения, чтобы не пытаться использовать Intl для вычислений.
https://polypane.app/blog/the-intl-api-the-best-browser-api-youre-not-using/
Intl позволяет форматировать даты, время, числа, списки и текст с учетом локали пользователя прямо в браузере, без добавления килобайт в бандл и без парсинга JS. Разбираем ключевые API вроде Intl.DateTimeFormat, Intl.NumberFormat и Intl.RelativeTimeFormat и типичные ограничения, чтобы не пытаться использовать Intl для вычислений.
https://polypane.app/blog/the-intl-api-the-best-browser-api-youre-not-using/
🔥12
Новые возможности CSS multi-column в Chrome 145
Chrome 145 добавил column-height и column-wrap, которые превращают много колонок из горизонтального скролла в вертикальный 2D поток с более естественным UX. Полезно для блоков фиксированной высоты, газетных макетов и даже вертикальной пагинации с scroll-snap, но поддержка пока только в Chrome 145+.
https://css-tricks.com/css-multi-column-layout-wrapping-features/
Chrome 145 добавил column-height и column-wrap, которые превращают много колонок из горизонтального скролла в вертикальный 2D поток с более естественным UX. Полезно для блоков фиксированной высоты, газетных макетов и даже вертикальной пагинации с scroll-snap, но поддержка пока только в Chrome 145+.
https://css-tricks.com/css-multi-column-layout-wrapping-features/
👍7❤4🔥1
TypeScript врёт на границе с сервером: почему нужна рантайм валидация ответов
TypeScript проверяет типы только на этапе компиляции, а в рантайме он просто доверяет тому, что вернул API. Решение это runtime-валидация через Zod, Yup или Valibot: описываете схему и сразу ловите несоответствия структуры, типов и отсутствующие поля.
https://habr.com/ru/articles/1020268/
TypeScript проверяет типы только на этапе компиляции, а в рантайме он просто доверяет тому, что вернул API. Решение это runtime-валидация через Zod, Yup или Valibot: описываете схему и сразу ловите несоответствия структуры, типов и отсутствующие поля.
https://habr.com/ru/articles/1020268/
❤8💩5👍4🤡3🤣3
Готовим сервис к продакшену
Open-source проект в котором собраны практики уровня production на примере Node.js/NestJS API: CI/CD, rollback, миграции, observability, metrics, terraform, AWS deployment и т.д.
https://github.com/prod-forge/backend
Open-source проект в котором собраны практики уровня production на примере Node.js/NestJS API: CI/CD, rollback, миграции, observability, metrics, terraform, AWS deployment и т.д.
https://github.com/prod-forge/backend
❤10🤨1
Выбор диапазона дат в CSS с :nth-child и минимальным JS
Делаем календарь на CSS grid используя селектор :nth-child, чтобы легко подсвечивать нужные элементы. JS нужен только для логики обновления диапазона при выборе третьей даты, а не для перебора DOM.
https://css-tricks.com/selecting-a-date-range-in-css/
Делаем календарь на CSS grid используя селектор :nth-child, чтобы легко подсвечивать нужные элементы. JS нужен только для логики обновления диапазона при выборе третьей даты, а не для перебора DOM.
https://css-tricks.com/selecting-a-date-range-in-css/
👍10⚡3❤2👀1
JS Paint, пиксельный MS Paint ремейк с темами и расширениями
Пиксель-редактор в браузере с точной копией инструментов MS Paint, поддержкой прозрачности, загрузкой из URL и экспортом истории в GIF. Есть темы, тач управление, dwell clicker и speech recognition, плюс удобные расширения вроде быстрого Undo и работы с палитрами.
https://github.com/1j01/jspaint
Пиксель-редактор в браузере с точной копией инструментов MS Paint, поддержкой прозрачности, загрузкой из URL и экспортом истории в GIF. Есть темы, тач управление, dwell clicker и speech recognition, плюс удобные расширения вроде быстрого Undo и работы с палитрами.
https://github.com/1j01/jspaint
👍7🔥4
Как прервать async workflow в JavaScript без отмены промисов
В JavaScript нет универсального .cancel() для Promise, поэтому для контроля потока используют подвешивание промиса, который никогда не резолвится, и GC завершает подвешенную логику. Под капотом важно понимать, почему ошибки и try/catch могут случайно проглотить прерывание, а генераторы позволяют остановить выполнение без исключений и ловушек.
https://www.inngest.com/blog/hanging-promises-for-control-flow
В JavaScript нет универсального .cancel() для Promise, поэтому для контроля потока используют подвешивание промиса, который никогда не резолвится, и GC завершает подвешенную логику. Под капотом важно понимать, почему ошибки и try/catch могут случайно проглотить прерывание, а генераторы позволяют остановить выполнение без исключений и ловушек.
https://www.inngest.com/blog/hanging-promises-for-control-flow
🔥10👍2
Обфускация email адресов в 2026 году
Лучшие техники скрытия email для защиты от спам ботов: комбинируйте HTML сущности, комментарии, SVG и CSS подходы, а также учитывайте статистику по тому, что реально ломается у разных парсеров. Разбираются варианты для обычного текста и кликабельных ссылок, включая практические нюансы доступности и устойчивости.
https://spencermortensen.com/articles/email-obfuscation/
Лучшие техники скрытия email для защиты от спам ботов: комбинируйте HTML сущности, комментарии, SVG и CSS подходы, а также учитывайте статистику по тому, что реально ломается у разных парсеров. Разбираются варианты для обычного текста и кликабельных ссылок, включая практические нюансы доступности и устойчивости.
https://spencermortensen.com/articles/email-obfuscation/
👍8❤3🔥1
Windows 95 в виде Electron приложения
Полноценная Windows 95 в десктопном приложении на Electron поверх v86 JavaScript и WASM: монтирование папок как Z: диск, ISO как CD-ROM, общий буфер обмена и улучшенный интернет. Внутри есть готовые сценарии запуска игр и DOS приложений, а также инструкция по сборке из исходников и работе с образами диска.
https://github.com/felixrieseberg/windows95
Полноценная Windows 95 в десктопном приложении на Electron поверх v86 JavaScript и WASM: монтирование папок как Z: диск, ISO как CD-ROM, общий буфер обмена и улучшенный интернет. Внутри есть готовые сценарии запуска игр и DOS приложений, а также инструкция по сборке из исходников и работе с образами диска.
https://github.com/felixrieseberg/windows95
GitHub
GitHub - felixrieseberg/windows95: 💩🚀 Windows 95 in Electron. Runs on macOS, Linux, and Windows.
💩🚀 Windows 95 in Electron. Runs on macOS, Linux, and Windows. - felixrieseberg/windows95
🔥13🤔2👍1😭1
Палитра команд для 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