#инструмент дня

Во вчерашнем посте про переписывание веб-клиента Twitter я мельком упомянул их собственный линтер для AI-мусора — anti-slop.

Разработчики активно использовали AI-агентов (ещё бы), но одних инструкций в промптах оказалось недостаточно. Поэтому в репозитории появился AGENTS.md с общими правилами и больше 25 skills для типовых задач: от работы с Relay и роутером до ревью и сопровождения PR.

А правила, которые агенты регулярно нарушали, превратили в плагины для Oxlint.

Один из них — anti-slop. Он ловит характерные для AI-генерации конструкции:

- Цепочки приведений типов вроде value as unknown as User, которыми обходят проверку TypeScript.
- Параметры с типом unknown вместо конкретного контракта.
- Условные spread-операторы вроде ...(condition ? { value } : {}), которыми агенты любят усложнять код.

Есть и другие плагины, проверяющие использование Relay, Tailwind, тестов и переводов. Всё это запускается автоматически вместе с форматированием и проверкой типов.

Кстати, существует и независимый открытый anti-slop от Диллона Малроя. Тоже набор правил для Oxlint, но уже доступный всем. Там около 20 проверок: от небезопасных приведений типов и ненужных async до моков модулей и копирования аккумулятора на каждой итерации reduce.

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

#ai #slop #tool

#библиотека дня

Skullet — библиотека, которая сама генерирует скелетоны для загрузки контента. Больше не нужно рисовать серые прямоугольники руками и поддерживать отдельную вёрстку для каждого состояния.

Работает довольно просто: передаём компонент и пример данных, библиотека невидимо рендерит его, измеряет размеры элементов и строит по ним скелетон. В результате заглушка повторяет геометрию настоящего интерфейса, а при загрузке данных ничего не прыгает.

import { Skeleton } from "skullet/react";

const SAMPLE_USER = {
  name: "John Doe",
  bio: "Frontend developer",
};

<Skeleton data={user} sample={SAMPLE_USER}>
  {(user) => <UserCard user={user} />}
</Skeleton>

Есть разные стили скелетонов, анимации появления контента, поддержка SSR и даже плавная загрузка изображений. Никакого дополнительного этапа сборки.

Работает с React, Vue, Svelte и обычным JavaScript.

На сайте отличные интерактивные примеры, обязательно потыкайте.

GitHub: https://github.com/lochie/skullet

#skeleton #loading

#статья дня

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

В Next.js 16.4 появился специальный скилл next-bundle-optimizer. Он даёт агенту доступ к графу зависимостей Turbopack, чтобы тот мог искать модули, которые случайно попали в первоначальную загрузку, неработающий lazy loading, дублирующиеся зависимости и прочие радости современной фронтенд-разработки.

Устанавливается одной командой:

npx skills add vercel/next.js --skill next-bundle-optimizer

Дальше запускаем /next-bundle-optimizer, изучаем предложения и при желании просим агента применить исправления.

В Vercel таким способом уже убрали почти 2 МБ сжатого JavaScript суммарно с разных страниц v0 и vercel.com. Например, обнаружили, что редактор кода грузился даже для пользователей, которым он вообще не был доступен. Минус 150 КБ почти на каждой странице.

Кстати, о том, что ещё можно поручить ИИ. Поделюсь папкой Telegram-каналов, где авторы экспериментируют с нейросетями, автоматизируют рутину, занимаются вайб-кодингом и запускают собственные проекты. Есть что подсмотреть и попробовать у себя.

А на канале Veai из этой папки прямо сейчас лежит рабочий способ обойти блокировки Claude.

Добавить папку в один клик

#инструмент дня

Я в универе постоянно делал презентации для своих работ и семинаров. Ну просто как минимум потому, что старание — это всегда плюс балл не только к оценке, но и к репутации.

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

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

И если для схем я ещё готов подключить мышь, напрячься и так далее, то презентации я писал на HTML, используя https://revealjs.com/.

Но инструмент, который хочу показать сегодня — это https://sli.dev/

Что он делает? Из видео, в общем, понятно — преобразует Markdown-файлы во всё те же презентации! Это очень круто, почти один уровень с Mermaid по удобству.

Горячая рекомендация.

P. S. Впрочем, можно взять ллм-ку и ffmpeg и устроить фурор с видео: https://t.me/htmlshit/4309

Но вдруг вам текст надо.

#markdown #tool #presentation #бородач

👾 Открытое собеседование для Frontend-разработчиков: интервьюер из R-Vision, ex-Сбер

12 ноября в 19:00 мск приходи посмотреть, как проходит реальное техническое интервью на позицию Frontend-разработчика

Интервьюер: Даниил Дмитриев, Frontend-разработчик в R-Vision, ex-Сбер. Работает с React и TypeScript, совмещает разработку с ролью тимлида, менторит коллег и проводит код-ревью

Без сценария и заранее известных вопросов ↓

В роли кандидата – действующий разработчик, который впервые увидит задания прямо на эфире

Обычно ты видишь собеседование только со стороны кандидата. Здесь сможешь посмотреть на процесс глазами интервьюера:

— какие темы и задачи проверяют на Frontend-собеседованиях
— как кандидат отвечает и где возникают сложности
— на что Даниил обращает внимание при оценке ответов

В конце Даниил ответит на вопросы зрителей

Эфир проходит в рамках менторской программы ШОРТКАТ. Мы помогаем разработчикам расти в грейде и зарплате. В нашем сообществе более 150 менторов из бигтеха, а наши менти уже получили более 500 офферов

Участие бесплатное 🔥

Зарегистрироваться на эфир можно в боте → @shortcut_front_bot

Реклама.
О рекламодателе.

#релиз дня

Последние несколько месяцев активно развивается тема HTML-in-Canvas. Особенно на фоне агентской разработки, когда собрать какой-нибудь безумный эксперимент с WebGL, шейдерами и интерактивным интерфейсом стало гораздо проще. Ещё до официального релиза API появилась целая подборка экспериментов, и посмотреть там есть на что.

А теперь в Chrome 157 HTML-in-Canvas наконец добрался до стабильной версии и работает без флагов.

Суть в том, что обычный HTML теперь можно рисовать внутри <canvas>, в том числе использовать как текстуру в WebGL и WebGPU. Причём это не просто картинка из DOM: кнопки нажимаются, поля ввода работают, текст можно выделять, копировать, переводить и находить через Ctrl+F. Даже доступность для скринридеров сохраняется.

Можно буквально натянуть HTML-форму на вращающийся куб, пропустить через шейдер или отобразить на изогнутой поверхности — и всё продолжит работать. Раньше для такого приходилось синхронизировать HTML-оверлеи с 3D-сценой или самостоятельно реализовывать привычные возможности браузера.

Правда, за время разработки API уже успели несколько раз поменять, как это обычно и бывает. Например, <canvas layoutsubtree> превратился в <canvas content="drawable">, а WebGL-метод texElementImage2D() переименовали в texElementSubImage2D(). В результате часть старых экспериментов из той самой подборки в Chrome 157 уже не работает. Даже реализации в Three.js, PixiJS и PlayCanvas не успели сразу адаптироваться к изменениям.

Зато вот несколько примеров из актуального репозитория спецификации:

— Официальные демки Chrome
— Интерактивная HTML-карточка в WebGL
— Желейный слайдер на WebGPU
— Сложная типографика внутри Canvas

А здесь ещё одна галерея экспериментов с учётом изменений API.

Пока это преимущественно территория Chromium: Firefox и Safari API ещё не поддерживают.

Чо, котаны, кто сделает свою крутую демку? :)

#html #3d #webgl #webgpu #canvas

#инструмент дня

Пару дней назад я писал про Skullet — библиотеку, которая автоматически генерирует скелетоны для загрузки контента. А теперь прилетел nano-skeleton, который решает ту же задачу, но совершенно другим способом.

Помните спор про то, что модели не могут в CSS? Вот оттуда ноги растут.

Напомню, Skullet невидимо рендерит компонент с примером данных, измеряет геометрию элементов и по ней строит скелетон. Причём умеет запоминать полученную геометрию для следующих загрузок.

nano-skeleton ничего не измеряет и не создаёт отдельную копию интерфейса. Мы просто оборачиваем существующие элементы в <nano-skeleton>, а библиотека превращает их в заглушки с помощью CSS. Исходная разметка остаётся в DOM и продолжает участвовать в раскладке.

Забавно реализована работа с текстом. Его скрывают через -webkit-text-fill-color: transparent, а вместо букв рисуют градиентный фон. box-decoration-break: clone позволяет превратить каждую перенесённую строку в отдельную закруглённую полоску.

Для более сложных вариантов автор даже сделал два собственных вариативных WOFF2-шрифта, в которых вместо букв нарисованы прямоугольники. У шрифтов есть оси для настройки ширины символов, высоты полосок и скругления углов. Так можно получить заглушки не только для целых строк, но и для отдельных слов.

В JavaScript остаются управление состоянием загрузки, MutationObserver для отслеживания изменений текста и Context Protocol для передачи состояния вложенным компонентам. Обёртки используют display: contents, чтобы не ломать flex/grid-раскладку. Есть поддержка Shadow DOM и SSR: стили могут отрисовать скелетон ещё до регистрации Web Components.

Но есть нюанс с обещанным отсутствием layout shift. Если настоящий текст окажется длиннее заглушки, интерфейс всё равно прыгнет. А режимы с подменой шрифта могут давать другие переносы из-за усреднённой ширины символов.

Впрочем, Skullet тоже не умеет предсказывать размеры ещё не полученных данных. Его точность зависит от того, насколько удачно подобраны образцы.

Получаются два разных подхода: Skullet измеряет интерфейс и воспроизводит его геометрию, nano-skeleton использует сам интерфейс в качестве заглушки. Никакого вычисления.

И решения CSS там на грани фантастики, в том числе.

Автор проекта: Владислав Шкодин.

GitHub: https://github.com/smashercosmo/nano-skeleton

#css #skeleton #placeholder

#такое дня

Недостаточно нам было RCE по всему интернету за последний месяц, так ещё и Telegram решил выкатить никому не нужные HTML-виджеты прямо в сообщениях. И практически сразу получил RCE в подарок.

В Telegram появилась возможность отправлять интерактивные сообщения с HTML, CSS и JavaScript. То есть боты теперь могут присылать небольшие приложения, которые выполняются прямо в мессенджере.

Для безопасности всё это запускается в отдельной песочнице на движке QuickJS. Без доступа к системным функциям, сети и прочим радостям.

Вот только в QuickJS обнаружилась ошибка работы с памятью, позволившая эту песочницу обойти. В результате исследователи продемонстрировали запуск калькулятора на Android, а затем появился и эксплойт для Telegram Desktop 7.4.2 под Windows. Там специально подготовленный виджет добирается до системной функции WinExec и запускает calc.exe.

Причём Telegram продолжает работать как ни в чём не бывало.

Уязвимость в QuickJS уже исправили, но в опубликованную версию Telegram Desktop 7.4.2 исправление ещё не попало.

У Telegram уже есть Mini Apps, теперь понадобилось ещё и выполнение чужого JavaScript внутри обычных сообщений. Зато теперь вместо скучной кнопочки бот может прислать вам всякого в нагрузку.

#telegram

#ссылка дня

Google вместе с командами Edge, Firefox и MDN выложили Modern Web Guidance — набор скиллов для AI-агентов, которые помогают использовать современные браузерные API вместо привычных JS-костылей.

Причём речь не об абстрактных рекомендациях, а о вполне конкретных задачах. Например:

— Нужно выпадающее меню, которое не вылезает за границы экрана? Агенту подскажут использовать CSS Anchor Positioning и position-try-fallbacks вместо ручного вычисления координат.

— Нужно мобильное боковое меню со свайпами? Есть реализация на <dialog>, CSS Scroll Snap и scroll-driven animations. Без самостоятельной обработки перетаскивания пальцем.

— Нужно открывать модалки и поповеры? Можно обойтись HTML-атрибутами commandfor и command, без JS-обработчиков для открытия и закрытия.

— Нужно отслеживать активный элемент карусели? Вместо постоянного прослушивания scroll можно использовать scrollsnapchange.

Всего в базе 250 возможностей веб-платформы и готовые рецепты для UI-компонентов, анимаций, форм, производительности и доступности.

При этом агент получает не всю документацию сразу, а ищет нужный рецепт локально и подгружает его в контекст. Рекомендации учитывают Baseline, содержат фолбэки для старых браузеров, а экспериментальные API по умолчанию не предлагаются к использованию.

Есть даже команда legacy-scan, которая ищет в существующем проекте устаревшие решения, потенциально заменяемые нативными API.

Установка:

npx modern-web-guidance@latest install

И отдельно понравилось, что авторы проверяют скиллы на реальных задачах с Playwright. В их тестах успешность Codex выросла с 54% до 82%, а Claude Code — с 57% до 88%.

Ставьте давайте, а то ваши агенты застряли в 2019.

#ai #skill #agent