Веб-страница - фронтенд бэкенд девопс

Физика, стеклянные деформации и процедурный звук в одном эксперименте на WebGPU Франк Райтбергер с появлением WebGPURenderer и TSL сознательно перевёл свои эксперименты на новый стек, чтобы публиковать их уже на современной технологии. «Садовая аномалия» один из них. В сцене сходятся три вещи: физика, деформации стекла и процедурно генерируемый звук. Последнее в браузерных демках встречается редко, и именно связка звука с симуляцией отличает эксперимент от обычного шейдерного этюда. Компактный образец того, на что уже сегодня годится WebGPU в связке с TSL, без разрастания в полноценный проект.

Модель считает прямо в браузере, а где не может, уходит в облако сама У браузерных моделей всегда была одна и та же беда: в Chrome Gemini Nano есть, в остальных браузерах нет, и приложение приходится либо писать в двух вариантах, либо отказываться от локального счёта вовсе. Hybrid and On-device Web SDK от Firebase AI Logic эту развилку снимает: он сам решает, где считать. В Chrome скачивает и запускает Gemini Nano прямо на устройстве, в остальных браузерах уходит к облачной Gemini 3.5 Flash. Какой бэкенд отработал, пользователь не знает и знать не должен. Показано это на приложении для анализа картинок: пользователь загружает изображение и получает теги, альтернативный текст и рекомендации. Туториал собран на Angular 22, Tailwind и Node 24, с локальным эмулятором Firebase. #фронтенд

Ноль зависимостей и ноль сборки: что вышло из 59 утилит на голом JavaScript Автор Antigravity Tools поставил себе ограничение и выдержал его 59 раз подряд: без бэкенда на Node, без пакетов npm, без webpack, vite и parcel, без аналитики и куки. Только нативные браузерные API. Ограничение оказалось не эстетическим. Когда вы вставляете JWT в онлайновый декодер, токен уходит на чужой сервер, а когда прогоняете строку через онлайновый тестер регулярок, строку логируют. Здесь каждая операция выполняется во вкладке, потому что уходить ей просто некуда. Автор рассказывает, что из этого получилось и чего это стоило. Отдельно любопытно как аргумент в вечном споре, нужен ли тут фреймворк. #javascript

Чем заменить привычные npm-пакеты, когда сервис уезжает на Rust Тяжёлые сервисы на Node переписывают на Rust обычно ради двух вещей: предсказуемо низких задержек и счёта за инфраструктуру. Порт API с Express или Fastify на Axum, фоновый воркер, утилита для командной строки — механика везде одна. Спотыкаются не на языке, а сразу после Cargo.toml. В npm больше двух миллионов пакетов, в crates.io набор заметно меньше и устроен иначе, с упором на типобезопасность и контроль памяти. Прямого аналога часто нет, а искать замену каждому пакету по одному долго. Материал и есть та самая таблица соответствий для расхожих пакетов, плюс способ держать её под рукой прямо в VS Code.

Браузер дорос до того, чтобы конвертировать файлы без сервера Для растущего набора форматов конвертация целиком помещается во вкладку: браузер читает файл, преобразует его и отдаёт обратно, ни разу не обратившись к серверу. Ещё пару лет назад это было уделом десктопных программ. Отсюда исчезает не только загрузка. Пропадают очередь на обработку, требование завести аккаунт и серверный шаг целиком, а вместе с ними и вопрос, что стало с копией вашего файла. Автор разбирает механику и честно очерчивает границы: где локальная конвертация выигрывает, а где браузеру не хватает сил и сервер всё-таки нужен. Прочесть стоит до того, как закладывать такой инструмент в план.

ИИ-краулер видит вместо вашего сайта пустой div Откройте клиентски отрисованный сайт в браузере: всё на месте, герой отрисован, навигация работает. Теперь заберите тот же URL так, как это делает автомат, обычным GET без браузера и движка JavaScript. В ответе почти пусто: , пара тегов и никакого человеческого текста. Раньше с этим мирились. Теперь заметная доля клиентов на ваших URL это краулеры за ответами ИИ: GPTBot, ClaudeBot, PerplexityBot, Google-Extended и фетчеры, которые обслуживают режимы поиска в вебе и живые цитаты. Многие читают начальный HTML и на этом останавливаются. Если контент появляется только после бандла, для них его не существует. Разбор раскладывает начальный HTML на три состояния и помогает понять, в каком из них ваш сайт. Проверить себя можно одной командой curl прямо сейчас. #spa

Вынесли логику в кастомный хук и получили лишние перерисовки Инстинкт понятный: компонент оброс полусотней строк состояния и запросов, вы вытаскиваете это в аккуратный useDashboardFilters(), родитель худеет до десяти строк JSX. Выглядит как чистая победа. Ловушка в том, что кастомный хук это обычная функция. Компонент, который его вызывает, выполняет код хука как часть собственного рендера. Состояние вы не спрятали, а перенесли: любой useState внутри хука по-прежнему перерисовывает того, кто хук позвал. Я бы прошёлся по своим «чистым» хукам с этим текстом рядом, особенно там, где один хук зовут сразу несколько компонентов. Разбор показывает, как это выглядит в профайлере. #перформанс

У вас есть широта и долгота: что с ними делать, кроме метки на карте Пара чисел вроде 40.7128 и −74.0060 обычно заканчивается маркером на карте, и на этом всё. А достать из неё можно заметно больше: найти заведения рядом, определить город и район, посчитать расстояние до другой точки. Для новичка это удобная тренировка работы с внешним API: отправить запрос с координатами, получить JSON, разобрать его и показать результат. Заодно всплывают вещи, о которых туториалы обычно молчат: что делать, если сервис ничего не нашёл, и почему расстояние по прямой не равно расстоянию пешком. Разбор на JavaScript годится как основа для маленького проекта «что рядом со мной»: одна форма, один запрос, один список результатов. #javascript

Достаньте точный цвет пикселя из картинки прямо в браузере Задача звучит просто: есть скриншот или логотип, нужен точный HEX конкретного пикселя. Обычно за этим идут в графический редактор, хотя браузер умеет сам, и загружать картинку никуда не надо. Работает это через Canvas — элемент HTML, на котором можно рисовать и, что важнее, читать нарисованное по пикселям. Порядок такой: загрузить изображение, нарисовать его на canvas, забрать массив пикселей и достать нужный. В массиве каждый пиксель занимает четыре числа: красный, зелёный, синий и прозрачность. Упражнение хорошо тем, что за один маленький проект вы трогаете объект Image, события загрузки и типизированные массивы. Возьмите код примера и соберите пипетку, которая показывает цвет под курсором. #javascript