Web Page - Frontend Backend DevOps

Делаем из плоского фото 3D-сцену со светом и тенями В новом туториале Codrops Dominik Fojcik показывает, как обычное 2D-изображение начинает отбрасывать настоящие тени: без 3D-модели, одной текстурой. Берёте картинку, генерируете карту глубины и пропускаете свет через WebGPU-шейдер в Three.js. Фишка в том, что готовые карты глубины обычно 8-битные, всего 256 градаций, и на гладких поверхностях свет ловит ступеньки. Автор же разбирает, как конвертировать карту в float, слегка размыть и сохранить в half-float, чтобы шум исчез. Работает пока только где есть WebGPU. Пошаговый туториал на Codrops.

Он не был в отпуске с того самого релиза, который «вот-вот стабилизируется». Пришло время отправить Типичного Программиста в отпуск! В новой мини-игре нужно откопать разработчика, найти билет, сложить чемодан и подобрать гардероб, в котором не три одинаковые чёрные футболки. Спойлер: он всё равно попытается запихнуть ноутбук в чемодан. Ваша задача — чтобы шорты тоже влезли. Найдите все пасхалки от партнёров и помогите разрабу уйти в отпуск со спокойной душой! Играть → Ссылка скрыта

JWT-аутентификация: лучшие практики LogRocket разобрал, как не уронить безопасность аутентификации одним неверным решением. Их вывод простой: access короткоживущий и живёт в оперативной памяти, а refresh длинноживущий — прячется в httpOnly-куках, куда JavaScript не достаёт. Даже при XSS атакующий получит только короткий токен, а не ключ к бесконечному входу. В статье есть и менее очевидные моменты. Если сейчас проектируете аутентификацию или проверяете текущую схему, рекомендую разбор по ссылке.

React не следит за фокусом — useFocus из @reactuses/core делает это за него В React нет состояния, которое говорит, активно ли сейчас поле ввода. document.activeElement показывает ответ, но не перерендеривает компонент при смене фокуса, а autoFocus стреляет один раз и не даёт вернуть фокус программно. Приходится вешать onFocus и onBlur вручную. Хук useFocus из @reactuses/core сворачивает это в [isFocused, setFocused]: первая часть отражает реальное состояние элемента, вторая вызывает focus() или blur() по вашей логике. Например, при программном фокусе на поиске. Для подсветки рамки хватит CSS :focus, но как только фокус начинает управлять JSX через подсказки, плавающие лейблы или паузу тикера, хук убирает шаблонный код. Я бы сохранил его для форм и модалок, где фокус важен для UX, а не только для стилей. Разобрали в статье.

Какой побеждает в тебе?

Выбираем менеджер пакетов При десятке JS/TS-проектов вопрос — не «кто быстрее ставит», а «кто не раздует node_modules и не даст импортнуть левое». Автор сравнения оценил npm, Yarn, pnpm и Bun по этому критерию. Разбор по ссылке.

Утечки памяти в JS: почему фронтенд тормозит со временем Долгоживущие вкладки часто тормозят из-за мелких ссылок, которые не дают сборщику мусора освободить память. В JavaScript объект живёт, пока на него остаётся ссылка, и удаление последней ссылки отправляет его в следующий проход сборщика мусора. Чаще всего утечки дают забытые таймеры и обработчики событий, отсоединённые DOM-узлы, оставшиеся в массивах, и глобальные переменные без let, const или var. Замыкания тоже держат ссылки дольше, чем нужно. Проверить проще, чем кажется: в Chrome DevTools вкладка Memory покажет снимок кучи и найдёт объекты, которые висят дольше положенного. А для метаданных объектов посмотрите на WeakMap: при удалении основной ссылки данные уйдут вместе с ней. Подробнее в азборе от Sharique Siddiqui.

uBlock Origin больше не фильтрует рекламу в *Facebook Разработчик проекта объявил, что команда прекращает поддержку сайта: соцсеть меняет разметку быстрее, чем волонтёры успевают чинить фильтры. Правки со стороны примут пул-реквестом, но сами тянуть это больше не будут. Интереснее механика, из-за которой гонка проиграна. Слово Sponsored на карточке рекламы разбито на отдельные буквы, каждая живёт в своём элементе, и приёму этому около пяти лет. Порядок букв иногда перемешивают, а между ними подставляют фиктивные символы, так что фильтр, ловящий объявление по тексту, получает мусор. *Компания Meta и её продукты признаны экстремистскими, их деятельность запрещена на территории РФ.

Откройте свой логотип в Chrome и Firefox рядом: в одном он будет толще Растровая иконка размером пикселей в пятнадцать в двух браузерах выглядит по-разному: в Chrome штрихи полнее, в Firefox ближе к оригиналу. Оказалось, что некоторые изображения Chrome целиком даже не распаковывает. Разработчик разобрал, почему так: сколько мегабайт памяти браузер на этом экономит, при чём тут блоки 8 на 8 и почему тот же приём годится не только для уменьшения. Проверить у себя можно за минуту: откройте страницу в двух браузерах и приблизьте иконку. Если разница видна, читайте разбор целиком, он короткий и с примерами до и после. Заодно узнаете, чем это лечится.