Веб-страница 🕘 история названий (1)

Диаграмму Mermaid можно положить прямо в HTML Для схемы запросов или графа зависимостей часто хватает нескольких строк Mermaid. Компонент `<mermaid-element>` позволяет поместить этот текст в HTML: подключаете модуль, добавляете тег и записываете внутри описание диаграммы. По умолчанию компонент загружает Mermaid через jsDelivr по требованию и рисует схему в Shadow DOM. Несколько диаграмм на странице используют одну загрузку библиотеки. Через атрибут mermaid можно закрепить версию или указать собственный адрес. Если Mermaid уже входит в сборку приложения, свою копию можно передать через MermaidElement.defaultMermaid. Тогда дополнительный запрос к CDN не понадобится. В статье есть песочница, где можно собрать пример и сразу скопировать получившийся HTML.

Как добавить в поиск фильтры вида author: и year: В поиске GitHub обычный текст соседствует с фильтрами ключ:значение. Веб-компонент `<rich-input>` переносит этот шаблон на свой сайт: подсказывает названия фильтров и допустимые значения, подсвечивает структуру запроса и отмечает неверный ввод. Настройки задаются через вложенные <datalist>. Компонент участвует в обычной отправке формы и работает с FormData, поэтому поле можно встроить в существующий интерфейс без привязки к конкретному фреймворку. В Chromium 152+ подсветка и расположение подсказок используют OpaqueRange внутри нативного input. Для других браузеров автор предусмотрел вариант с contenteditable. Заявленная поддержка начинается с Chromium 105, Safari 17.2 и Firefox 140; ввод, выделение и отправку формы стоит проверить в целевых браузерах.

От чатбота к агентам: опыт Митчелла Хашимото Для работы с кодом Хашимото перешёл от отдельного чата к агенту, который читает файлы проекта и запускает программы. После этого начал повторять собственную работу: сначала решал задачу сам, затем давал её агенту без готового решения. Так он выяснял, какие задачи можно поручать ИИ. Дальше добавлял инструкции в AGENTS.md, файл с правилами проекта, и способы проверить изменения, включая запуск тестов. В истории освоения ИИ в разработке Хашимото связывает выбор задач с настройкой рабочего окружения. Отдельные чаты при этом остались в его повседневной работе. #ии #инструменты

Как убрать dist из опубликованного npm-пакета Папка dist удобна для сборки, но её название может попасть в публичные пути, особенно при загрузке файлов через CDN. Команда npm publish ./dist позволяет опубликовать содержимое этой папки как корень пакета. Перед этим в dist нужно положить package.json, README и лицензию. Пути в копии package.json тоже меняются: ./dist/index.js становится ./index.js. Иначе пакет будет искать файлы в несуществующей вложенной папке. В разборе публикации из подпапки автор автоматизирует подготовку после сборки и отдельно защищается от привычной команды npm publish, которая опубликует корень проекта. Перед первым релизом состав пакета можно проверить через npm publish ./dist --dry-run и npm pack ./dist.

Давайте сыграем в айтишную каламбурю! Правила простые: берём любой термин, название компании или имя известного айтишника и делаем из него каламбур. Я начинаю — вы подхватываете: Ада Лавпринглс

Мы тут балуемся немножко. Присоединяйтесь

iframe научился подстраивать высоту под встроенную страницу Форма внутри iframe переходит на следующий шаг, становится выше и получает собственную полосу прокрутки. В Chrome 154 для этого появился `frame-sizing`: например, content-height позволяет подбирать высоту по содержимому встроенного документа. Одного CSS у родителя недостаточно. Страница внутри iframe должна разрешить передачу размера через <meta name="responsive-embedded-sizing" content="allow-origins=*">. Вместо звёздочки можно ограничить список разрешённых источников. После изменения содержимого новый размер передают вызовом window.requestResize(). В Firefox и Safari поддержки пока нет. Приём подойдёт как улучшение для встраиваемых форм и виджетов, где вы контролируете обе стороны и можете сохранить запасной вариант изменения высоты.

В React 19.3 можно анимировать смену содержимого через ViewTransition Компонент <ViewTransition> связывает обновления React с браузерными переходами. Оберните меняющийся участок интерфейса и обновите состояние внутри startTransition: по умолчанию старое содержимое плавно сменится новым. Анимации можно настроить через CSS или Web Animations API. Обычные срочные обновления состояния переход не запускают. Анимация срабатывает для startTransition, раскрытия Suspense и обновлений через useDeferredValue. Сейчас компонент работает с DOM. Для загрузки данных в разборе React 19.3 есть полезная настройка: <ViewTransition update="auto" default="none">. Она позволяет анимировать смену заглушки на готовое содержимое, сохраняя мгновенное появление самой заглушки и уже закешированного интерфейса.

В веб-продукте AI можно использовать для разработки, работы с интерфейсом и автоматизации пользовательских сценариев. Но для каждого варианта нужны свои проверки: где оставить привычный UI, как оценивать дизайн и на чём запускать агента? На AI Native Conf разберём: • «Мы открыли продукт для prompt injection, и это круто». Артем Самойлов, Сбер. Замена GUI действующего сервиса агентным чатом и риски prompt injection. • «Дизайн в агентном SDLC: разработку ускорили — упёрлись в дизайн». Артур Арсёнов, Looi agent. Работа дизайна с разработкой, проверки качества и выбор между Figma и HTML-first. • «Карта AI-инструментов разработки: от GPU до агентики, без слепых зон». Константин Волков, Veai. Выбор моделей для кода, квантование, стоимость железа и эксплуатационные метрики. Приходите, если выбираете, какие части веб-продукта и разработки готовы передать агентам. Москва и онлайн, подробности на сайте #реклама О рекламодателе

Как измерить медленный переход внутри SPA в Chrome DevTools Первый экран может загружаться быстро, а переход в каталог зависать на секунды. При клиентской навигации документ не перезагружается, поэтому запись одного холодного старта не покажет весь сценарий. В сентябрьском обновлении Chrome анализ soft navigation появился в Insights панели Performance. Теперь такие переходы можно разбирать вместе с уже доступными метриками и временной шкалой. Запишите переход от клика до нового экрана и посмотрите, какие задачи и загрузки приходятся на этот участок. Для повторяемых замеров через Chrome DevTools Protocol добавили калиброванные уровни производительности CPU. Это пригодится при автоматизации: один и тот же сценарий можно сравнивать с одинаковыми настройками процессора, не ограничиваясь результатом на рабочем ноутбуке.