FrontEndDev

Как запустить GTA San Andreas на своём движке в браузере

История о том, как с нуля собрали браузерный рантайм OpenSA, который умеет читать форматы RenderWare и запускать игру через вашу легальную копию, без распространения ассетов. Ключевые фишки — in-game map debugger/редактор, адаптерная архитектура, физика и управление через Rapier, а также оптимизация загрузки чанками с CDN и VFS.

Сложно, сложно, оч сложно)

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

Граница между CSS-состояниями и событиями JavaScript сдвигается

Псевдоклассы вроде :hover, :active, :focus-visible, :focus-within, :checked, :valid/:invalid позволяют описывать реакцию интерфейса без обработчиков в JS.
Отдельный вектор — будущий event-trigger, который должен запускать анимации по событиям (например, по click) прямо в CSS, делая анимации более декларативными.

https://css-tricks.com/css-states-and-javascript-events/

Считаем скидку и показываем итоговую цену прямо в CSS

Можно хранить базовую цену и процент скидки в data-* атрибутах, а затем через attr() и CSS math вычислять итоговую стоимость и сразу рисовать зачеркнутую цену плюс новую. Для прода в крупных компаниях так себе вариант, но для своего магазина можно попробовать 😊

https://css-tricks.com/computing-and-displaying-discounted-prices-in-css/

Навыки для AI кодинг агентов: как вернуть спецификации, тесты и review в процесс

AI coding agents часто идут по кратчайшему пути к готовому коду и пропускают спецификации, тесты и проверку, из за чего качество падает на масштабе. Проект предлагает оформлять best practices не как эссе, а как пошаговые skills с чекпоинтами и критериями выхода, чтобы агент следовал жизненному циклу разработки как у зрелой инженерной команды.

https://addyosmani.com/blog/agent-skills/

Архитектура local-first для веб разработки

Разбираем, как строить приложения с приоритетом локальных данных в 2026 году: синхронизация, конфликтные сценарии и практичные решения для надежной работы офлайн и онлайн. Подойдет тем, кто уже пробовал local-first и хочет понять, где реальные риски и как их закрывать.

https://smashingmagazine.com/2026/05/architecture-local-first-web-development/

Отладка WASM в Chrome DevTools

Chrome DevTools умеет полноценно дебажить скомпилированный WASM: ставьте брейкпоинты в Sources, смотрите локальные значения и стек вызовов, а для ref.cast и похожих ошибок включайте Pause on exceptions чтобы сразу ловить источник проблемы.

https://eli.thegreenplace.net/2026/debugging-wasm-in-chrome-devtools/

Geometric.js — библиотека для геометрии в JavaScript.

Работайте с точками, отрезками, полигонами, углами и пересечениями, выполняя измерения и преобразования. Удобно использовать для задач визуализации, расчётов и логики в веб‑приложениях, где нужна геометрия на лету.

https://www.harryjstevens.com/geometric/

Out Loud — open-source ИИ для озвучивания текста

Out Loud делает AI text-to-speech полностью офлайн. Поддерживается 50+ естественных голосов на 8 языках, а также есть расширение для Chrome, чтобы озвучивать страницы в один клик. Код под MIT-лицензией — репозиторий можно форкать, проверять и улучшать под свои задачи.

https://www.out-loud.io/

Как я написал «Обратную змейку» на чистом Canvas

Игрок управляет не змеёй, а яблоком, цель — выживать как можно дольше, пока три типа змей преследуют и меняют поведение. Логика разбита на модули (Snake/Renderer/Game) без фреймворков: от обновления движения и коллизий до отрисовки сетки и пиксельных спрайтов через fillRect()

https://habr.com/ru/companies/ruvds/articles/1047434/

React useOptimistic для мгновенных обновлений интерфейса в продакшене

Разбираем useOptimistic в React и практические паттерны, чтобы UI реагировал сразу, а затем корректно синхронизировался с реальными данными после подтверждения или ошибки. Подходит для быстрых форм, лент и сценариев с оптимистичными апдейтами.

https://www.sitepoint.com/react-useoptimistic-production-patterns-for-instant-ui-updates/

ShadowRealm в JavaScript

Новый API ShadowRealm предлагает изоляцию исполнения кода в отдельной среде, чтобы безопаснее отделять контекст и глобальные объекты. Разбираемся, как это соотносится с realms в браузере и почему это шаг к более надежным приложениям.

https://css-tricks.com/soon-we-can-finally-banish-javascript-to-the-shadowrealm/

Разбираем Bulletproof React: как навести порядок в кодовой базе

Bulletproof React помогает уйти от хаоса в React проектах за счет feature based структуры, четких границ между частями и встроенных практик по тестированию и безопасности, чтобы код оставался поддерживаемым и масштабируемым.

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

Карточки фиксированной высоты: хрупкость, о которой легко забыть

Выравнивание карточек в сетке по высоте кажется простым, но фиксированная высота быстро ломается из-за контента, переносов и разных размеров элементов. Разбираем, почему такие решения становятся нестабильными и как подходить к верстке, чтобы макет оставался предсказуемым.

https://css-tricks.com/fixed-height-cards-more-fragile-than-they-look/

Ежедневные flexbox головоломки

Прокачивайте CSS Flexbox через ежедневные задачи: нужно собрать целевой layout, подбирая свойства flexbox, чтобы добиться нужного выравнивания и поведения элементов.

https://flexboxle.com

Десктоп приложения с Zig и WebView: маленькие бинарники и быстрые сборки

Zero-native позволяет собирать нативные десктоп приложения с веб интерфейсом через системный WebView или встроенный Chromium, сохраняя общий API и гибко выбирая движок под задачу.

https://zero-native.dev/

Mobile View

Удобное и простое расширение, для предпросмотра ваших веб приложений на мобильных устройствах. Оборачивает контент в рамку, позволяя выбрать девайс, ориентацию и много других настроек.

https://mobileview.app/

Профессиональные скилы для AI coding agents

Собирайте пайплайны для AI агентов с workflow, quality gates и best practices уровня senior инженеров, чтобы код выходил предсказуемым и поддерживаемым.

https://github.com/addyosmani/agent-skills

Вопросы на собеседование по TypeScript: рефакторинг без риска

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

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

Почему стоит мигрировать на Valibot

Valibot это модульная schema библиотека для TypeScript с быстрым стартом, точной типобезопасностью и понятной моделью данных. Валидация, трансформации и метаданные собираются в едином pipeline, поэтому код расширяется без лишнего веса и ошибок.

https://valibot.dev/blog/why-migrate-to-valibot/

Animata - анимированные React компоненты для вставки в проект

Готовая библиотека из 158+ анимированных React компонентов, которые можно просто скопировать в репозиторий без установки и обновлений, чтобы быстрее делать интерфейсы и сразу получать доступность и поддержку reduced motion.

https://animata.design/