FrontEndDev

Микрофронтенды: стабильная интеграция нескольких SPA-приложений, часть 1 Разбираемся, как собрать платформу и подключать независимые SPA-модули в единый UI без потери скорости релизов, но с контролем совместимости. Рассматриваются варианты оркестрации и загрузки: от SystemJS-«разрезанного монолита» и single-spa до модульной федерации и айфреймов, с ключевым выводом про риск синхронных релизов и несовпадение версий библиотек https://habr.com/ru/companies/infowatch/articles/1053506/

Компиляция Zod-схем в оптимизированные валидаторы на этапе сборки Сохраняете обычные Zod-схемы и получаете ускорение валидации без правок в коде: parse/safeParse/parseAsync остаются теми же, плюс появляется быстрый guard .is(). Поддерживаются разные режимы подключения: автоматическая компиляция всех экспортов или явная, а также CLI-генерация файлов и режим compact https://github.com/gajus/zod-compiler

Минимальная одностраничная фотогалерея для Astro Адаптивная сетка собирается чистым CSS без JS-логики позиционирования и перерасчётов. Для просмотра предусмотрен lightbox на Fancybox: полноэкранный режим с свайпом, перетаскиванием, pinch-to-zoom и настраиваемой панелью. Картинки оптимизируются через Astro <Image />, а элементы за пределами первого экрана подгружаются лениво. https://github.com/kydecker/astro-photo-grid

Как запустить 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/

Идём на AI Hardcore Day в офис Авито на Лесной 11 июля! 🤩 Будем слушать доклады о Spec-Driven Development, разработке и тестировании MCP, атаках на GenAI-агентов. А после — нетворкать на террасе. ⚡ Регистрация и подробности — по ссылке. Кстати, доклады будут не под запись — советуем не пропускать!

Считаем скидку и показываем итоговую цену прямо в 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/

🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг 25 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Виталию Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

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/

Как тимлиду победить синдром самозванца. Бесплатный урок курса «Руководитель команд в ИТ» Переход в роль тимлида редко проходит спокойно. Вчера вы отвечали за свои задачи и качество собственного кода, а сегодня от вас ждут решений, обратной связи, делегирования, работы с конфликтами, общения с бизнесом и результата всей команды. В этот момент легко начать сомневаться: достаточно ли у меня опыта, правильно ли я поступаю, не разочарую ли я команду и действительно ли я заслуживаю эту роль. На открытом уроке 23 июня в 20:00 разберём, почему у начинающих и действующих руководителей возникает синдром самозванца. Поговорим о том, как отличать реальные зоны роста от необоснованной неуверенности, какие ожидания от тимлида действительно реалистичны, а какие только создают лишнее давление. Отдельно обсудим, как управленческие ошибки отличаются от нормальной адаптации к новой роли и почему сложная ситуация не всегда доказывает вашу некомпетентность. Также разберём, как использовать обратную связь, делегирование и работу с ожиданиями, чтобы укреплять уверенность в управленческой роли. Участники поймут, какие практики помогают принимать решения без постоянного сомнения в себе и как постепенно выстроить опору на свои навыки, опыт и понятные управленческие инструменты. Урок не для тех, кто ждёт универсальный способ «стать уверенным за один вечер». Он будет полезен начинающим тимлидам, действующим руководителям команд, опытным разработчикам перед переходом в лидерскую роль и специалистам, которые хотят систематизировать управленческие навыки без лишней тревоги и самокопания. 👉 Записаться: https://otus.pw/uFHK/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

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