Всплывающие скроллеры изображений с анимацией, управляемой прокруткой CSS 🤙

.pop {
view-timeline-name: --pop;
}
img {
animation: slide both;
animation-timeline: --pop;
animation-range: entry 100% cover 50%;
}
.skateboarder {
--x: 0;
--y: -45%;
}
@ keyframes slide {
to { translate: var(--x) var(--y); }
}


https://codepen.io/jh3y/pen/abPgrGR

🔥 Claude Code теперь можно менять изнутри

Anthropic представила Mods: небольшие функции на TypeScript, которые вмешиваются в работу Claude Code. Мод может изменить промпт до отправки модели, заблокировать или повторить вызов инструмента, скрыть секрет из ответа и добавить элементы интерфейса. Работает в CLI и настольном приложении.

Моды распространяются через плагины. По сути, разработчик может настроить поведение самого агента под свой процесс, а не только давать ему инструкции. Устанавливать стоит из доверенных источников: мод выполняется с тем же доступом к компьютеру, что и Claude Code.


https://claude.com/blog/claude-code-mods

Circular Progress Bar

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

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

Это стильное и интуитивно понятное решение для визуализации информации о ходе выполнения задачи.

🌐Ссылка на видео

Neumorphic Liquid Slider

Создано без использования библиотек. В JS устанавливаются значения и запускаются анимации.

🌐Ссылка на код

Опенсорс фреймворк от CopilotKit для Intelligent UI, и он уже в топ-5 трендов GitHub 🔥

Идея в том, что агент отвечает на запрос не текстом, а живым интерфейсом: интерактивными графиками, 3D-сценами, формами, симуляциями и визуализациями алгоритмов. Всё рендерится в песочнице прямо в чате.

Под капотом Next.js 16 с React 19, бэкенд на LangChain Deep Agents, который подгружает визуализационные скиллы по требованию, и отдельный MCP-сервер. Через него дизайн-систему и сборщик HTML можно подключить к Claude Desktop, Claude Code и Cursor. Лицензия MIT, запускается командами make setup и make dev.

В анонсе пишут про работу с любым LLM и любым агентным фреймворком. В README по умолчанию стоит Claude, для OpenAI достаточно ключа, а для остальных провайдеров нужно править модель в коде. Слабые модели, по словам авторов, часто ломают вёрстку.

Авторы уверяют, что к 2027 году такой агентный слой будет в каждом приложении. Спорно, но направление понятно: интерфейс всё чаще генерируется под задачу, а не рисуется заранее.

Источник: https://github.com/CopilotKit/OpenIntelligentUI

@machinelearning_interview

#ui

От скриншота до интерфейса: GitHub-проекты для генерации UI и дальнейшей разработки.

1. screenshot-to-code
Загружаете скриншот – получаете код интерфейса. Поддерживает HTML, Tailwind, React и Vue.

https://github.com/abi/screenshot-to-code

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

https://github.com/wandb/openui

3. shadcn/ui
Готовые настраиваемые компоненты для сборки интерфейсов. В исходной подборке ошибочно назван «клоном v0»: сам репозиторий не преобразует скриншоты в код.

https://github.com/shadcn-ui/ui

4. OpenHands
Среда для работы с ИИ-агентами над проектом: полезна на этапе реализации и доработки приложения.

https://github.com/OpenHands/OpenHands

Одна из самых недооценённых возможностей JavaScript - `Symbol.iterator`

В JavaScript можно сделать практически любой объект перебираемым через for...of, оператор ... и другие механизмы итерации.

А если объединить Symbol.iterator с генераторами и yield*, получится рекурсивный обход дерева всего за несколько строк.

Например, создадим простую файловую структуру:

class Folder {
  constructor(name, children = []) {
    this.name = name;
    this.children = children;
  }

  *[Symbol.iterator]() {
    yield this;

    for (const child of this.children) {
      yield* child;
    }
  }
}

Теперь построим дерево каталогов:

const src = new Folder("src", [
  new Folder("app", [
    new Folder("pages")
  ]),
  new Folder("assets")
]);

console.log([...src].map(folder => folder.name));

// ['src', 'app', 'pages', 'assets']

Как это работает?

Symbol.iterator определяет, как объект перебирается. Звёздочка * превращает метод в генератор.

yield this возвращает текущую папку, а yield* child делегирует итерацию дочернему объекту. В результате дерево обходится рекурсивно, без отдельной функции обхода.

Такой подход полезен для AST, деревьев компонентов, вложенных структур данных и файловых иерархий.

Единственное условие: каждый дочерний объект тоже должен быть итерируемым. В примере все узлы являются экземплярами Folder.

Критическая уязвимость в React: удалённое выполнение кода без авторизации. CVSS 9.5 🚨

14 октября команда React раскрыла критическую уязвимость GHSA-xqc2-xf4c-x3h3 в React Server Components.

Она позволяет удалённому атакующему выполнить произвольный код на сервере без авторизации и взаимодействия с пользователем.

Затронутые пакеты:
- react-server-dom-webpack
- react-server-dom-parcel
- react-server-dom-turbopack

Уязвимые версии:
- 19.0.0 - 19.0.8
- 19.1.0 - 19.1.9
- 19.2.0 - 19.2.8
- 19.3.0

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

Специально сформированные запросы могут вызвать выполнение кода на сервере через React Server Components. Для эксплуатации требуется редкое сочетание нескольких типизированных массивов и контролируемого атакующим значения в одном ответе.

Исправленные версии:
- 19.0.9
- 19.1.10
- 19.2.9
- 19.3.1

Что делать разработчикам:

1. Проверить версии зависимостей, включая транзитивные.
2. Обновить затронутые пакеты до исправленных версий.
3. Проверить используемые фреймворки и сборщики с поддержкой React Server Components.

Обычные клиентские React-приложения без серверной части, а также проекты без поддержки React Server Components не затронуты.

Официальный advisory: https://github.com/react/react/security/advisories/GHSA-xqc2-xf4c-x3h3

Кто в IT платит выше рынка? И какой оффер считается хорошим?

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

Кто, на ваш взгляд, платит выше рынка?
У кого привлекательнее премии?
Насколько важны ДМС, спорт, питание и другие бонусы при выборе работы?

👉 Поделиться мнением: https://clck.ru/3Wx87C

3D Galaxy Particles

Создано на canvas и анимировано с использованием TweenMax.

https://codepen.io/foretoo/details/zYjpYad