FrontEndDev

Построение скролл-зависимой 3D-галереи по пути камеры из Blender с Three.js и GSAP Рисуем кривую в Blender, экспортируем точки в JSON с учётом различий координат, а затем в Three.js восстанавливаем путь через THREE.CatmullRomCurve3 и раскладываем вдоль него сотни plane-картинок с рандомными смещениями. Демо | Github https://tympanus.net/codrops/2026/07/07/building-a-scroll-driven-3d-gallery-using-a-blender-camera-path-with-three-js-and-gsap/

Нужен ли здесь `useEffect`? 12 сценариев из React-код-ревью — от производного состояния до React 19.2 На code review я регулярно встречаю один и тот же вопрос, только записанный разным кодом: «Как правильно синхронизировать эти значения через useEffect?» Со временем я понял, что чаще полезнее спросить иначе: а эффект здесь вообще нужен? В статье разбираю 12 типичных сценариев из React-код-ревью. https://habr.com/ru/articles/1055486/

Декорирование gap в CSS: играем линиями между элементами Gap Decorations позволяет украшать промежутки между элементами в grid, flex и multi-column, используя gap + rule. Псевдоэлементы внутри контейнера превращают gap в полотно для подчеркиваний, горизонтальных/вертикальных разделителей и даже паттернов с разной толщиной/цветом через rule-width, rule-color и repeat(). https://master.dev/blog/lets-play-with-gap-decorations/

Редактор дизайна для Claude Code и Cursor: «Figma Comments» прямо в браузере Drawbridge — это Chrome-расширение, которое позволяет кликать по интерфейсу в запущенном приложении, оставлять Figma-style комментарии и заметки с прямоугольниками, а затем превращать их в локальные task-файлы для AI-инструментов. https://github.com/breschio/drawbridge

Как протестировать более 40 UI-компонентов за минуту: ускоряем скриншот-тесты Как вместо сапёра с визуальными багами внедрили визуальные регрессионные тесты на связке Storybook + Playwright + Jest, которые прогоняют десятки сценариев и сравнивают скриншоты пиксель-в-пиксель. Чтобы стабилизировать диффы, в тестах отключают загрузку реальных картинок в галереях, делают снимок строго элемента [data-test="product-snippet"], и задают допуски к микро-шуму рендеринга (threshold/blur/failureThreshold). https://habr.com/ru/companies/domclick/articles/1050424

Проверка вакансий и рекрутеров на мошенничество с помощью OSINT для Claude. JobVerify помогает за секунды отличать реальные предложения от скама: вы вставляете сообщение рекрутера, название компании, ссылку на вакансию или email, а инструмент собирает публичные сигналы и выдает понятный вердикт. Он сверяет регистрацию компании, домены и возраст сайтов, подозрительные паттерны (предоплата, “задачи”, крипта, перевод в Telegram/WhatsApp), проверяет ссылки, почту/телефон и даже историю через Internet Archive — без API-ключей и без хранения ваших данных. https://github.com/yessGlory17/job-verify

HTTP получил метод QUERY: зачем понадобился безопасный запрос с телом В HTTP стандартизировали QUERY — безопасный и идемпотентный метод чтения, где сложные параметры передаются в теле запроса, а не в URI. https://habr.com/ru/articles/1055310/?utm_campaign=1055310&utm_source=habrahabr&utm_medium=rss

ИИ поможет написать за тебя код, и в то же время помешает найти тебе работу? Ирония судьбы. Мы уже доверили нейросетям генерацию компонентов, написание целых функций и даже тестов. Но когда дело доходит до твоего резюме — тот же самый ИИ безжалостно отправляет его в корзину. До 90% откликов отсеиваются алгоритмами ещё до того, как их увидит человек. В 2026 году ты соревнуешься не только с другими разработчиками, но и с машиной, которая оценивает твоё резюме по десяткам критериев за доли секунды. Время играть по новым правилам. 📅 8 июля в 19:00 МСК на бесплатном вебинаре «Как пробить AI-фильтры и получать приглашения на интервью» мы расскажем, как обойти эту систему. На эфире разберем: 🔹 Как AI и ATS отбирают кандидатов прямо сейчас 🔹 Как найти работу в США и Европе 🔹 Что такое «теневой рынок» труда и как использовать его возможности Спикер — Ангелина Волкова, карьерный эксперт AgileFluent. Ангелина знает, как обмануть AI-фильтры: ✔️ Сама придумывает стратегии, которые ведут к офферу ✔️ Обладает большой экспертизой по рынку Северной Америки ✔️ За плечами — более 200 кейсов с международными офферами За время работы AgileFluent уже помогли 800+ специалистам из IT и Digital найти работу в России и за рубежом. Оставляй заявку на вебинар и бронируй место 👉 [ссылка] 👈 Реклама. ООО «Эджайл», ИНН 7810964334, erid: 2Vtzqwp1D3F

Путеводитель по grid-lanes: как строить сложные раскладки на чистом CSS. display: grid-lanes позволяет делать masonry с произвольной шириной колонок и при этом сохранять корректный порядок табуляции — без JS. Это подходит для progressive enhancement: начинайте с базовой разметки и улучшайте визуальную и навигационную часть средствами HTML/CSS. https://master.dev/blog/the-field-guide-to-grid-lanes/

Rattribute.js — генерация адаптивных атрибутов для любых HTML-элементов. Лёгкая библиотека без зависимостей, которая на основе брейкпоинтов автоматически проставляет нужные атрибуты (по умолчанию размеры как у Bootstrap: xs–xxl и доп. xxxl, плюс можно задавать свои). Поддерживаются переключение адаптивности, авто-подхват элементов при добавлении в DOM сторонними библиотеками и исключение элементов через data-rattribute-js-ignore https://github.com/williamtroup/Rattribute.js

FM-синтез звука в браузере. Часть 1 Рассмотрим возможности браузеров по синтезу звука. Разберём основы и в качестве практического применения сделаем эмулятор синтезатора Yamaha DX7. https://habr.com/ru/articles/1052640

Микрофронтенды: стабильная интеграция нескольких 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/