Сегодня без набросов 🌿

Выступаю на конференции в Светлогорске – осень уже добралась и сюда 🍂
Но, как ни странно, смена обстановки реально снимает токсичность.

А ещё хотел вернуться к посту про вакансию в Островок.
Там есть приятный бонус:
— Амбассадоры компании могут бронировать отели бесплатно (в рамках командировок, конечно 😄)
— Остальные сотрудники получают корпоративные цены на отели и транспорт.

Ни на что не намекаю 😉
Всем хорошей пятницы и выходных!

Есть такое ощущение, что людей, пишущих MCP-серверы, гораздо больше, чем тех, кто их реально использует 😅

Недавно попробовал новый фреймворк для написания MCP — xmcp.

На первый взгляд всё круто: удобная структура, DX на уровне, TypeScript — всё как мы любим.

Но вот UI-ресурсы не захотели дружить с новым Apps SDK от OpenAI 🤷‍♂️

Зато официальный SDK для MCP работает чётко, без танцев.

Видимо, пока придётся остаться на нём — а за xmcp понаблюдать, потенциал у проекта явно есть.

#mcp #openai

Пост для тех, кто не стал слезать с кофеиновой иглы, а решил копнуть поглубже.

Есть такое, что определённые кофейные напитки напоминают разработку.

🧊 Капучино — фронтенд-разработка

Всегда украшен латте-артом, разнообразные архитектуры, тысячи вариаций — но по факту разное количество молока.

Главная цель — сделать вкусно пользователю.


☕️ Эспрессо — бэкенд-разработка

Кратко, мощно, концентрировано.
Как и хороший backend-код — его не видно, но он делает всю тяжёлую работу.

Без украшений, без пенки и сиропов — только суть.

Требует точности: одна секунда лишнего — и вкус испорчен. Как и запрос к базе или по API.

И всё бы ничего…
Но как будто эти дескрипторы эспрессо — выдают в себе что-то фронтендерское, правда ведь? 😏

Новый Big Thing в разработке при помощи ИИ?

Anthropic представили новый подход к тому, как помочь LLM лучше понимать, чего вы от неё хотите.
Они назвали это Skills — по сути, это обычный md-файл, описывающий, как именно действовать в конкретной области.

Например, Skill для генерации PDF содержит примеры, инструкции и рекомендации, как собирать файлы без ошибок.
LLM, видя такой файл, может выбрать нужный «скилл» и действовать по заранее описанным правилам.

🎯 Главная идея — оптимизация контекста.
Вместо огромного системного промпта «на все случаи жизни» — чёткие описания навыков, которые подгружаются по необходимости.

Что-то похожее я уже рассказывал, когда писал про memory-bank для Cursor: там IDE понимала, какие файлы ей нужны в зависимости от режима.
Теперь же — та же концепция, но уже в виде официальной реализации. Ещё один сайд-проект стал каноном.

На первый взгляд может показаться, что это калька с MCP — ведь и там есть ресурсы, помогающие LLM.
Но разница в масштабе:

* 🧩 MCP — это целый протокол, сервера и клиенты.
* 🪶 Skills — это просто файлы. Простые, лёгкие и при этом экономные по токенам.

Даже банальное переключение режимов теперь не нужно — какой-нибудь Skill Gateway сам подгрузит нужные инструкции или гайдлайны.

📎 Ссылки для погружения:

* Equipping Agents for the Real World with Agent Skills — 🌍 как Anthropic видит будущее LLM-агентов.
* Anthropic Skills overview — 🧠 подробности о формате и целях.
* Simon Willison on Claude Skills — 💬 мнение разработчика о практическом применении.
* Anthropic Skills Repo — 🛠 репозиторий с примерами «скиллов»

#ai #anthropic #claude #llm

А ты как думаешь?

💯 — согласен, новый виток в тулинге для ИИ
🗿 — не увидел ничего прорывного

Как впихнуть в LLM больше контекста? 🌐

После появления текстовых моделей логичным шагом стали мультимодальные — они могут принимать текст, изображения, голос, видео и отвечать по содержанию, которое вы им передали. Чего стоит только история, когда по рисунку на салфетке новая (на тот момент) ChatGPT сгенерировала код для приложения.

Так вот, дают ли такие модели что-то ещё кроме дополнительных каналов связи?

💸 Иногда — да. На мультимоделях можно экономить.

Слово «токен» у всех прочно связано с чисто текстовыми моделями. Но токены есть и у моделей «изображения+текст» — просто считаются они иначе. Очень-очень грубо: один токен в такой модели может соответствовать, например, патчу изображения 20×20 пикселей. Если подобрать шрифт и качество картинки, в этот «визуальный токен» можно упаковать больше текста за ту же цену, чем если бы мы кормили модель чистым текстом. Этот трюк называют оптической компрессией.

Это примерно как смотреть YouTube на скорости ×2: мозг справляется, а вы экономите время. Здесь модель «смотрит» текст как картинку и экономит токены.


Подробнее про оптическую компрессию
🧩 Should LLMs just treat text content as an image?
Короткая заметка о том, почему визуальные токены могут быть информативнее текстовых: изображение кодируется более «плотно», а значит часть задач выгоднее решать через картинку с текстом, чем через текстовые токены. Автор обсуждает компромиссы и где такой подход даёт экономию.
#multimodal #tokenization #compression

Подробно про топовые визуальные LLM
🤖 How to use frontier vision LLMs: Qwen 3 VL-2
Разбор современного Qwen 3 VL-2: как запускать, чем он хорош для OCR, анализа документов и многошагового вывода; практические примеры промптов и режимов ввода. Полезно как стартовое руководство по работе с сильной мультимодальной моделью.
#qwen

Открытые модели для OCR и пайплайны
📄 Supercharge your OCR Pipelines with Open Models
Обзор открытых OCR-стеков: как современные модели учитывают разметку страницы, когда помогает промпт-ориентированная настройка и что выбрать для документов со сложной структурой. Есть рекомендации по моделям и практические советы для продакшн-кейсов.
#ocr #opensource

🎨 CSS: функции и условные стили

5 полезных CSS-функций на новом правиле @function
Уна Кравец показывает, как писать собственные CSS-функции (начиная с Chrome 139): отрицание значений, полупрозрачные цвета, fluid-типографика, условный радиус и layout-сайдбар. Функции принимают аргументы и возвращают вычисленное значение — удобно для дизайн-систем, но кросс-браузерная поддержка пока отстает.
#css #functions

Разбираемся с CSS if(): условное цветовое оформление
Автор объясняет, как if() даёт инлайновые условия прямо в декларациях css — удобно для темизации на кастомных свойствах.
#css #if

Пользовательские функции в браузерном CSS
Мириам Сюзанн о прототипе author-defined функций, доступном в Chromium Canary с флагом Experimental Platform Features. Разбирается синтаксис (@function --name() { result: … }), параметры и условные результаты.
#css #functions


🧩 Данные и сериализация

jsonriver: быстрый потоковый парсер JSON
Инкрементально парсит JSON из стрима (сетевой запрос, LLM и т. п.), отдавая всё более полные значения по мере поступления байтов. Маленький, без зависимостей, на стандартных Web API.
#json #streaming

Сериализация и десериализация — и как не «сломать» React
Практики, чтобы JSON.parse/stringify не вызывали лишние ререндеры если ваш единый источник данных это десериализованнй стейт: write-only режим и структурное шаринг-обновление через replaceEqualDeep.
#react #serialization #performance

maml.js: парсер формата MAML для JS/TS
Крошечный парсер/сериализатор для MAML JSON: 0 зависимостей, ~2 kB gz, работает в Node/Deno/Bun/браузерах. В бенчмарках существенно быстрее YAML/TOML (до ×64).
#maml #json

🛡 Безопасность npm и загрузок

pompelmi: сканер файлов для Node.js с YARA и deep-ZIP
Быстро проверяет загружаемые файлы на вредоносный код, умеет глубокий анализ архивов и встраивается как middleware для Express/Koa/Next.js и GitHub Action для CI. Акцент на приватность и минимализм.
#nodejs #security #malwarescanning

NPM Security Best Practices: защита от атак цепочки поставок
Сводка практик для разработчиков и мейнтейнеров. База – фиксируйте версии, используйте lock-файлы, отключайте lifecycle-скрипты, вводите минимальный «возраст» релиза, включайте 2FA и provenance. Охватывает npm, bun, deno, pnpm и yarn.
#npm #supplychain #bestpractices #security

npq: проверка пакетов до установки
CLI-утилита, которая до инсталла оценивает пакет по базе уязвимостей (Snyk) и эвристикам: возраст, скачивания, наличие README/лицензии, pre-/postinstall-скрипты. Можно добавить алиас на обычный npm/yarn, чтобы проверка была всегда.
#npm #security #cli

OpenAI и MCP: как OAuth 2.1 решает главную проблему интеграций?

OpenAI объявила о полной поддержке Model Context Protocol (MCP) в режиме разработчика!

🤔 Что происходит?

OpenAI запустила Apps SDK — инструмент для создания приложений, которые работают прямо внутри ChatGPT. Представьте: вы пишете в чат "Найди мне квартиру в Москве до 50к", и ChatGPT вызывает приложение с картой, фильтрами и всей логикой — без перехода на другой сайт. Под капотом всё это работает через MCP.

К концу 2025 года OpenAI планирует открыть размещение приложений для всех желающих.

🧑‍💻 Проблема, которую все игнорировали:

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

Цепочка выглядит так:
user → ChatGPT → MCP server → external API → response back

От чьего имени делать запросы к вашему серверу? Как понять, что пользователь действительно имеет право читать финансовые данные или создавать заказы? API-ключи работают для демок, но в продакшене это дыра в безопасности — один утекший ключ даёт полный доступ навсегда.

MCP долго не имел стандартного решения для авторизации пользователей. До тех пор, пока в спецификацию не вписали OAuth 2.1.

🗝 Почему именно OAuth 2.1

OAuth 2.1 решает сразу несколько критичных задач:

1. Scoped tokens вместо master keys
Вместо одного ключа на всё — токены с ограниченными правами (read:data, write:orders). Нужны только данные? Получите токен только на чтение.

2. Время жизни токенов
Токены автоматически истекают через заданное время. Утёк токен? Ничего страшного — через час он мёртв.

3. PKCE для публичных клиентов
ChatGPT — это публичный клиент, он не может безопасно хранить секреты. PKCE (Proof Key for Code Exchange) позволяет безопасно аутентифицироваться без встроенных паролей.

4. Dynamic Client Registration
MCP-клиенты могут регистрироваться автоматически через RFC 7591. Не нужно вручную создавать OAuth-приложения для каждого сервера — всё происходит на лету.

5. Discovery через metadata
MCP-сервер публикует метаданные по адресу /.well-known/oauth-protected-resource. ChatGPT читает документ, узнаёт, какой authorization server использовать, какие scopes поддерживаются, и автоматически запускает OAuth-флоу. (То самое, "Войти через Google")

🗄 Как это работает на практике

1. Пользователь вызывает инструмент в ChatGPT
2. MCP-клиент получает 401 от сервера с указанием на metadata
3. ChatGPT динамически регистрируется на authorization server
4. Пользователь логинится через OAuth (Google, корпоративный SSO)
5. ChatGPT получает access token с нужными scopes
6. Все последующие запросы идут с заголовком Authorization: Bearer <token>
7. MCP-сервер проверяет JWT: issuer, audience, expiry, scopes.

🔗 Полезные ресурсы:

* OpenAI Apps SDK — официальная документация
* Apps SDK Authentication — про OAuth 2.1 в контексте OpenAI
* MCP Authorization Spec — полная спецификация протокола
* WorkOS MCP Auth Guide — практическое руководство с примерами кода

🎯 А вот и гайды для Next.js подъехали: как запустить фреймворк внутри ChatGPT

Next.js не был бы самим собой, если бы не надо было патчить нативные API. Очевидно, чтобы поддержать уровень безопасности на высоте, OpenAI пытается вставить палки в колёса злоумышленникам, но при этом страдают обычные разработчики. Чтобы ваше приложение работало в полной изоляции, Apps SDK подразумевает, что оно будет запускаться triple iframe способом. То есть ChatGPT → Sandbox iframe → Inner iframe → Your app

🔧 Какие с этим проблемы:

1. Triple-iframe убивает asset loading
ChatGPT рендерит приложения в трёхслойной структуре iframe'ов. Next.js думает, что его origin — web-sandbox.oaiusercontent.com, и все запросы к /_next/static/ возвращают 404.

Решение: assetPrefix в next.config.ts форсирует запросы на реальный домен.

2. Относительные URL ломаются везде
Изображения, шрифты, API calls — всё резолвится к sandbox-домену.

Решение: HTML <base href={baseUrl}> устанавливает базовый URL для всех относительных путей.

3. Browser History палит реальный домен
history.pushState сохраняет полные URL https://your-app.vercel.app/about, что ломает sandbox security.

Решение: патч, оставляющий только path + search + hash.

4. Client-side navigation делает fetch не туда
При клике на Link, Next.js делает fetch за RSC payload, но запрос идёт на sandbox-домен.

Решение: пропатчить window.fetch, переписывая same-origin запросы на правильный base URL с mode: "cors".

5. CORS блокирует React Server Components
Cross-origin запросы фейлятся без CORS headers.

Решение: Next.js middleware обрабатывает OPTIONS и добавляет CORS headers ко всем ответам.

🔗 Почитать подробнее:

* Running Next.js inside ChatGPT
* Next.js Starter Template

#nextjs #chatgpt #openai #appsdk

Тайлер Виген — человек, который превратил статистический троллинг в искусство. 🖼

С 2014 года на его сайте Spurious Correlations опубликовано более 25 тысяч переменных (мемы, профессии, google-запросы, акции), которые он сравнивает между собой абсолютно все со всем. Получается 636 миллионов комбинаций. И в этом хаосе обязательно найдутся идеальные совпадения и корреляции.

Например, потребление маргарина в США коррелирует с уровнем разводов в штате Мэн с коэффициентом 0.99 — почти функциональная зависимость. Популярность мема "distracted boyfriend" коррелирует с количеством офисных клерков в Кентукки. Расстояние между Нептуном и Меркурием — с рейтингами ТВ-шоу.

Звучит как бред? Именно в этом и смысл.

📊 Что такое data dredging

Data dredging (он же p-hacking, он же data fishing) — это когда вы прогоняете тысячи статистических тестов на одном датасете и публикуете только те, что дают "статистически значимый" результат.

Виген честно пишет на сайте: "Я швыряю данные в блендер и смотрю, какие корреляции вывалятся. Это опасный способ анализа, потому что любой достаточно большой датасет даст вам сильные корреляции полностью случайно".

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

Искать сеньера в конце 2025-го, конечно, впечатляет. Процентов 80 кандидатов на сеньорские позиции пытаются юзать ИИ прямо во время интервью. И палятся моментально. 🧠

С одной стороны, думаешь: а что если разрешить? Выкрутить сложность на максимум, типа — собери звездолёт за полтора часа, используй что угодно. Как олимпиада, где все официально на стероидах. Но в реальности с теми, кто сидит с ИИ-суфлёром, делаешь шаг в сторону — и всё, темнота. Способны только читать готовые ответы. И уже в открытую просят повторять вопросы погромче 🤡 Непонятно пока, как с этим работать.

Удивительно еще, что мидлы намного честнее. Процент жуликов ниже в разы.

Раньше на собесах спрашивали "что происходит, когда нажимаешь enter в браузере". Теперь, похоже, пора переходить на новый стандарт: "что происходит, когда сабмитишь промпт в ChatGPT".

Кстати, ByteByteGo как раз выпустили статью на эту тему — разжёвывают всю цепочку от промпта до ответа. 😉

🎭 Лебедь, рак и щука: три философии React

Осень в React-экосистеме как никогда напоминает басню Крылова. Next.js по-прежнему тянет к серверу, но теперь без экспериментальных флагов для новой модели кеширования, Турбопака, PPR и кучи других фичей, Remix 3 уходит к нативной веб-платформе, оставляя React позади, а TanStack Start цепляется за клиент с изоморфными лоадерами. Каждый считает, что именно его путь — единственно верный.

🐋 Next.js 16 продолжает гнуть server-first линию

Подробно тут не буду останавливаться, так как у меня есть такой пост, на сбор которого я потратил практически целый год 🥲


🦞 Remix 3: возвращение назад к веб-платформе

Представленный на Jam 2025, Remix решительно отказывается от React runtime в пользу Preact-подобного лёгкого ядра и нативных Web APIs.

Принципы:​​
* Web-First: события — нативные браузерные (через свою библиотеку), никакого SyntheticEvent. Все триггеры через универсальный on-проп.​
* Imperative UI: вместо декларации view = f(state) — вызов this.update() после мутаций.​
* Progressive Enhancement: формы работают без JS, фолбэки на нативные API.​
* Архитектура островов через механизм, напоминающий работу по Iframe.
* Модульный релиз: пока фреймворк состоит из отдельных пакетов, единый пакет remix выйдет в 2026.​

Remix 3 — революция, бросающая вызов идее React-фреймворка.


🦢 TanStack Start: клиент в приоритете

TanStack Start противопоставляет себя остальным как client-first решение с мощными серверными возможностями.​

* Первая навигация: SSR + SEO. Дальнейшая навигация исключительно client-side с мгновенной подгрузкой данных из кеша.
* Изоморфные лоадеры: один и тот же код для SSR и навигации на клиенте, проверяющий кеш TanStack Query.​
* Server Functions через createServerFn без API-слоя, type-safe end-to-end.​
* Selective SSR: настраивается на каждый роут - full ssr, data-only (загружает только новые данные в кеш) или spa like

Никаких компромиссов в UX: useState, useEffect, useContext работают как в классическом SPA, не нужно задумываться, что это за компонент и будет ли в нем работать хук. React Server Components появятся опционально в v1.x, но не займут место client-first модели.​

🔗 Ссылки для погружения:

* TanStack Start Introduction — введение в TanStack Start
* TanStack Start Deep Dive — глубокий анализ TanStack Start
* Thoughts on Remix 3 — обзор новой философии Remix 3

Директивы захватывают React-экосистему! 🎯

JavaScript годами жил с одной директивой — use strict. Стандартизирована, понятна, работает везде одинаково. Чёткий контракт между языком, движками и разработчиками.

Сейчас мы наблюдаем взрывной рост фреймворковых директив: use client, use server, use cache, use workflow, use step — и это только начало. Выглядят как фичи языка, находяться на месте реальных фич языка, влияют на бандлинг и выполнение. Но это не JavaScript.

🆚 Как мы уже выяснили — TanStack выбрал путь противоположный философии Next.js и вместо директив предлагает использовать явные импорты и понятный типо-безопасный API.

// Вместо директив
'use cache: remote'
const fn = () => 'value'

// Явный API
import { cache } from 'next/cache'
export const fn = cache(() => 'value', {
  strategy: 'remote',
  ttl: 60,
})

🛣 К чему это может привести?

Путь Vercel/React.js/Next.js: Директивы как DX-магия. Простота для 80% случаев, vendor-оптимизация через FdI (Framework-defined Infrastructure), максимальная интеграция. Риск — lock-in и фрагментация экосистемы.​

Путь TanStack: Явные API, чёткая граница платформа/фреймворк/язык, портируемость. Риск — больше бойлерплейта, медленнее внедрение и внесение в стандарт.

🔗 Ресурсы почитать/посмотреть:

* Tanner Linsley: Directives and the Platform Boundary
* Next.js 16 Directives
* Vercel's Workflow Directives
* React's 19 Directives
* This is good, actually. Theo - t3.gg