Frontender's notes [ru]
30.7K subscribers
952 photos
70 videos
3.84K links
Ведущий канал о современном фронтенде: статьи, новости, практики, вайбкодинг и автоматизация фронта ИИ-агентами.

Личный блог автора - @just_genych
MAX - https://max.ru/frontendnoteschannel_ru
По вопросам рекламы или разработки - @g_abashkin
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Claude поселился прямо в Google Docs, Sheets и Slides

Anthropic прикрутила ассистента к гугловым докам. Сидит в боковой панели рядом с открытым файлом: читает содержимое и правит. Любую правку ты подтверждаешь до применения — самодеятельности нет.

Работает и в обратную сторону: гуглодок открывается прямо в Claude. Кинул ссылку на файл — готово. Или попросил сделать документ, таблицу, презентацию — они всплывут рядом с чатом, чтобы редактировать вместе. Кто что видит, решают настройки шаринга в Google. Пока бета и только на платных тарифах Claude.

Подробности — в статье Anthropic.

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
JPEG XL всё-таки доехал до Chrome

Вчерашний Chrome 155 прикрутил поддержку картинок в формате JPEG XL (.jxl). Народ из Chrome for Developers (Versari, Firsching, Jägenstedt) пишет, что он жмёт на 30–50% бодрее, чем JPEG, умеет HDR и не только это.

Детали — в свежем выпуске Frontend Focus #761

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Как перетащить сайт с Webflow на Next.js — по одной странице за раз

Корпоративка на пяти языках: страниц под сотню, блог, новости, 100–150 тысяч юзеров в месяц. Два года вся эта махина жила на Webflow. А сейчас она переезжает на Next.js 15 и Payload CMS — и уже на финишной прямой. Безо всякого дня Х: тащили постранично, на том же домене, рядом со старым сайтом.

В разборе: построчная разбивка счёта от Webflow, Next.js под /app на Webflow Cloud, 301-редиректы с пятью локалями, переезд CMS-коллекций в Lexical, next-intl и проверки в CI, которые вылавливают то, что раньше замечал лишь дизайнер — и то спустя месяц.

Как это устроено — на Habr

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
Google запилила SynthID Detector — это отдельная веб-морда, где контент пробивают на ИИ. Кидаешь туда картинку, видос или звук — и сервис шерстит файл в поисках спрятанного водяного знака SynthID. Причём чует он метки не только свои: OpenAI, NVIDIA и Kakao в списке тоже, а чуть позже подтянется и Apple.

Google заявляет, что такой меткой уже проштамповали 180 млрд картинок и роликов. Прогнать контент можно на synthid.com.

Но есть нюанс: энтузиасты уже вовсю пытаются смывать эти метки с ИИ-контента и клепают под это отдельные тулзы — взять хотя бы remove-ai-watermarks. Короче, на ИИ-фейки не ведёмся.

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
«Ухожу из ВЕБА в GameDEV. Сделал игру с ИИ на UE5 за 72 ЧАСА» — с таким заголовком ролик выложили на YouTube 8 октября 2026 года.

Внутри — история про то, как человек свалил из веба в геймдев и за 72 часа собрал игрушку на Unreal Engine 5.

Смотреть видео

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
👎30😁12❤3🐳3
Next.js 16.4: Cache Components теперь советуют как дефолтный путь

В 16.4 Cache Components официально переехали в разряд основного подхода, который тебе предлагают взять. А если поднимаешь проект через create-next-app — они вообще приезжают включёнными из коробки. Заодно подкрутили агентные тулзы и накидали мелких улучшений, которые касаются вообще всех приложений.

Вторая тема выпуска — визуальная нотация для React-деревьев, пока что в виде предложения. На диаграмме сразу два дерева: parent tree (куда в итоге попадает каждый элемент) и owner tree (какой компонент его породил). Плюс пометки под context, Suspense, memo, error boundaries и RSC. Автор — Jules Blom, и к нотации прикручен playground: вставляешь код — получаешь нарисованные деревья.

Источник: React Status #493

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
👀3👎1😁1
Markdown, которого ты в упор не замечал: от пары пробелов до статьи, которую можно тыкать

Чувак садился накатать текст про Markdown — а по ходу пьесы в самом документе завелся Doom. В материале копают, с какой стати два пробела командуют переносом строки, почему обратные кавычки не всегда вытаскивают таблицу и отчего один и тот же .md на Хабре и GitHub смотрится по-разному.

Внутри — песочница: крути разметку, щёлкай задания, сверяй результат. Плюс гифки, спойлеры в спойлерах, мини-квест и расклад, как засунуть ресурсы Doom в Markdown — и что вообще заставляет игру стартовать.

Забирай и экспериментируй

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Лишь 0,2% человечества реально выжимает что-то из ИИ в работе

Так заявляет Андрей Карпаты. И раскидывает всех нас на четыре категории — по тому, кто в курсе про ИИ, а кто ещё и умеет им пользоваться.

75%, это около 6 млрд душ — с языковыми моделями вообще не пересекались и не в теме;
20% — иногда дёргают бесплатные чат-боты, но смотрят на них как на Google, только прокачанный;
0,2%, то есть примерно 20 млн — гоняют передовые модели в коде и математике и уже воочию видят, как агенты за один запрос закрывают работу, на которую уходили недели и месяцы;
0,00006%, или где-то 5000 человек — имеют доступ к самым мощным внутренним ИИ-системам: запускают тысячи агентов поверх сложных проектов, копают уязвимости и помогают делать научные открытия.

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Субагенты на Haiku в Claude Code — пусть только копают код, не лезут руками

Продолжаем разговор про настройку Claude Code: Sonnet тащит основную работу, Opus подсказывает, а Haiku достаются субагенты. Так вот, субагентов на Haiku лучше держать строго на исследовании кодовой базы. Логика простая: загоняешь их в режим «только смотри», а весь код правит основной агент.

Чтобы это устроить, есть два хука. Subagents Explore Only дёргает SubagentStart и разрешает субагентам лишь читать файлы, гонять поиск и отчитываться о найденном — без правок. Subagent Read Only Guard цепляется к PreToolUse и режет запись в файлы вместе с запрещёнными командами: субагент сунется что-то менять — хук ему прикроет лавочку.

Ставится всё одной командой:

npx claude-code-templates@latest --setting hooks/subagents-explore-only --hook security/subagent-read-only-guard


Основной агент при этом ни в чём не урезан — свои обычные права остаются при нём. А субагенты занимаются ровно одним: разведкой по кодовой базе.

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4👀2
«Грет британ блть»: тренажёр английского со своими PDF, карточками и ИИ

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

Внутри набора — карточки, мемы, озвучка, болталка с ботом и стрик, который, по словам автора, «больно бьёт по самолюбию».

Отдельным пунктом идут свои PDF и использование ИИ.

Источник: Habr

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
👎3
Deno сдаётся под опеку Cloudflare. И точно не ради себя самого

Команда проекта идёт к Cloudflare вовсе не затем, чтобы дальше ковырять рантайм. Смысл в другом: влить celld в workerd и тем самым дать возможность поднимать Durable Objects на своём железе. Ну а сам Deno? Ему отсыпали последний год официальных фиксов — и хватит. Deno Deploy сворачивают через полгода, JSR съезжает на инфраструктуру Cloudflare.

На Hacker News Райан Даль заметил, что Deno «затянуло в гравитационный колодец совместимости с Node», и спросил: «Зачем переписывать Node? Она работает». А ещё в выпуске висит без ответа вопрос: что будет с разбирательством по торговой марке JavaScript™.

Источник: JavaScript Weekly #806

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
👀3🔥1😁1
HTML и CSS из прошлого, которые до сих пор актуальны

Автор статьи на Хабре говорит, что ковыряет вёрстку ещё с тех времён, когда Google Chrome только-только вылез в люди. По его словам, нынешнему фронтендеру уже не прочувствовать, что было у них с коллегами — у разработчиков, державших в голове вагон рецептов под каждый баг в каждом конкретном браузере.

Но не одним мраком жили: в этом легаси осталась прорва годных возможностей, которые со временем куда-то подевались. Вот автор и раскладывает по полочкам старые фишки HTML и CSS, которые выручают до сих пор.

Читать далее

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
😁1
Один человек — и целая студия. На нём висел бэкенд двух уже опубликованных приложений плюс сайт с детективом-ARG, и вся эта радость жила на serverless в Яндекс Облаке: Cloud Functions, YDB, Object Storage. За инфраструктуру выходило ноль рублей в месяц — и он этим прямо гордился.

А дальше понеслось. В ночь на 8 октября дроны прилетели в дата-центр Яндекса в Сасово, 9-го — в Калугу, в ночь на 11-е — во Владимир. После этого Yandex Cloud ушёл в аварийный режим: две зоны доступности просто недоступны. Люди не пострадали — и вот это самое важное.

12 октября он устроил себе эвакуацию вручную: за один день перетащил 40 роутов и 39 таблиц на единственный VPS. Утром 13-го в телеграме уже пиликали алерты, крутилась своя метрика посещаемости — без сторонних скриптов, — плюс появился античит, которого до этого не было вообще никогда. А приложения в проде не заметили ровным счётом ничего.

Читать далее

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
😁5❤2
От AJAX до React: как полностью изменили архитектуру разработки фронтенда ВКонтакте

Егор Смирнов, который рулит командой Backend for Frontend в VK, на Хабре разложил, как за три года фронтенд ВКонтакте перекроили целиком. Веб-версии соцсети в 2026-м стукнуло 20 лет — и за это время фронт прошёл путь от AJAX до нормального современного веб-приложения.

Раньше, если верить автору, народ руками дёргал DOM, сборка иконок была отдельным квестом, а деплой с откатом отжирали по полчаса. К середине 2026-го команда собрала масштабируемую архитектуру, где компоненты, сборка и деплой живут как одна система.

Читать далее на Хабре

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
👎11❤2👀2
LandTS: свежий взгляд на избитые вопросы фронтенд-разработки

Автор разбирает три штуки, на которые обязана давать ответ вменяемая организация работы над фронтом: компоненты, ререндеринг и стили. И, судя по его выводам, LandTS закрывает их без проблем.

Просветиться

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
👎8😁3
Собираем иконки на чистом CSS — и HTML не трогаем ни разу

Ли Веру (Lea Verou) показала, как втыкать и настраивать иконки, вообще не залезая в HTML. Вся движуха крутится вокруг кастомных свойств --icon, @property, style queries и mask.

На выходе — иконочная система, целиком на CSS, которая, по словам автора, «гибче и проще в поддержке, чем то, что вы используете сейчас».

Всё это вышло в Frontend Focus #762 от 14 октября 2026 года.

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
❤5
Дельты, Jinja и HTML в сводных таблицах SuperSet

В SuperSet шестой версии подвезли HTML прямо в метриках и измерениях сводных таблиц. Для BI-разработчиков это заметно развязало руки в плане форматирования таблиц.

В статье разбирают, как собрать сводную таблицу, которая переключает периоды и показывает аккуратную дельту.

Читать далее

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
Попап расширения Chrome грузился 89 секунд. Серьёзно, почти полторы минуты

Бывает так, что расширение Chrome само себя загоняет в бесконечные циклы и начинает тормозить. В статье автор разбирается, почему pop-up внутреннего расширения вёл себя максимально странно.

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

Читать далее

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
Блоки, Шопен и WebAudio: как автор скрестил головоломку с музыкой

Человек пилит Blocturne — блок-головоломку под Telegram. Механика до боли знакомая, как в Block Blast: сетка 8×8, в лотке лежат три фигуры, складываешь ряды и столбцы. Сверху накручен подсчёт в духе Balatro: фишки перемножаются на множитель, а между раундами подкидывают лавку с предметами.

Но самое интересное в статье — звук. Автор возился с ним дольше, чем со всей остальной требухой. Отсюда в заголовке и Шопен, и WebAudio.

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
React 19: логика отдельно, разметка отдельно — тесты с Shallowly и Vitest

Материал разбирает профильную панель: логика и подготовка данных переезжают в useSetup[Component], а в компоненте остаётся лишь разметка. Проверки потом разводят по разным углам: setup-хук сам по себе, компонент через Shallowly, взаимодействие через React Testing Library.

Под конец — цельный пример на Vitest: забирай и запускай.

Читать далее

👉 Frontender's notes
Please open Telegram to view this post
VIEW IN TELEGRAM