Будни разработчика

#фишка дня

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

𝚝𝚎𝚡𝚝𝚊𝚛𝚎𝚊 {
  𝚏𝚒𝚎𝚕𝚍-𝚜𝚒𝚣𝚒𝚗𝚐: 𝚌𝚘𝚗𝚝𝚎𝚗𝚝;
  𝚖𝚊𝚡-𝚑𝚎𝚒𝚐𝚑𝚝: 𝟻𝚕𝚑;
}

Современные единицы измерения, конечно, крутая штука :)

Автор

#css #textarea #lh

#статья дня

Ахмад Шадид придумал, как на CSS определить, что два элемента начинают пересекаться.

Задача вроде простая: есть декоративный элемент, его позиция и размер плавают, рядом контент. Нужно скрыть декор не по @media, а именно когда между ними заканчивается место.

Решение довольно извращённое: через Anchor Positioning он создаёт невидимый .measure между элементами, добавляет туда псевдоэлемент фиксированной ширины и ждёт, когда контейнер начнёт overflow'иться. Дальше Scroll-driven Animations используются вообще не для анимации, а как детектор этого overflow: timeline переключает CSS-переменную, а style query уже скрывает нужный элемент.

То есть CSS всё ещё не умеет спросить «эти два элемента пересеклись?», но если достаточно долго смотреть на Anchor Positioning, timeline-scope, overflow и container queries — оказывается, можно заставить его ответить.

Поддержка, разумеется, пока не универсальная, поэтому сам Шадид рассматривает это как progressive enhancement.

Ссылка: https://ishadeed.com/article/css-detect-overlap/

#css #scroll #overlap

#релиз дня

Похоже, следующим коллегой разработчика станет не один ИИ-агент, а целая команда роботов.

В SourceCraft от Яндекса появилась возможность подключать автономных ИИ-агентов, которым можно поручать задачи прямо в обсуждениях GitLab. Причём это не очередной чат, в который нужно вручную копировать код и контекст. Агент работает под собственной учёткой, получает задачу, самостоятельно её выполняет и возвращает результат на ревью.

Самое интересное — что происходит, если в процессе что-то пошло не так. Не хватает данных или нужно согласовать решение? Агент сам обращается к команде. То есть разработчик распределяет работу между ИИ-исполнителями, подключается к сложным решениям и проверяет результат.

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

Агенты могут заниматься разработкой, проверкой безопасности кода и другими задачами. Работать с ними можно не только через GitLab, но и из VS Code, командной строки, мессенджеров и веб-интерфейса SourceCraft.

При этом компании смогут подключать собственных агентов, в том числе созданных в Yandex AI Studio, и настраивать их под конкретные процессы разработки.

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

То есть агенту теперь мало уметь писать код. Нужно ещё научиться нормально работать с коллегами.

#ai #agents #sourcecraft

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

Кто-нибудь, остановите это безумие!

Очередная библиотека подсветки синтаксиса — twinkleplop. Очередные рекорды скорости и размера побиты! Очередное API улучшено.

Можно конечно попробовать разобрать архитектуру, например: в основе твинклплопа — конечный автомат. Но кому это интересно? Не, если кому-то интересно, вот: https://twinkleplop.pngwn.at/docs/architecture

Но лично меня распёрло от их мини-игры на главной странице :)

Я вот в 50 секунд уложился.

#tool #syntax #highlight

#статья дня

Polypane выпустили прекрасную статью о том, что вы все делаете скролл на страницах неверно. А точнее, как делать верно.

Суть — сплошь и рядом ломаете прокрутку на body.

У страницы в браузере есть специальный root scroller — тот самый скролл всего документа.

И браузер умеет для него заметно больше, чем для обычного div с overflow: auto: восстанавливает позицию после перехода назад, прокручивает страницу с клавиатуры, обслуживает window.scrollY / scrollTo, нормально делает печать и полностраничные скриншоты.

На мобильных от него ещё зависят схлопывание адресной строки, tap-to-top на iOS и pull-to-refresh.

Проблема в том, что отказаться от всего этого очень легко. Классический app shell:

html, body { height: 100%; overflow: hidden }

и потом height: 100vh; overflow: auto на wrapper — визуально страница продолжает совершенно нормально скроллиться, только теперь скроллится не документ, а вложенный контейнер. Ещё более неприятный вариант — сочетание height: 100% и overflow-x: hidden: из-за правил overflow body тоже может незаметно превратиться в scroll container.

Проверяется смешно просто: прокрутить страницу и посмотреть window.scrollY. Если там всё ещё 0, скроллится что-то другое. Автор дальше разбирает типичные случаи — full-height layout, fixed header/sidebar, горизонтальный overflow, блокировку скролла под modal — и показывает, как оставить основной скролл браузеру. Например, использовать min-height: 100svh вместо фиксированного 100vh, position: sticky вместо app shell с отдельным скроллом, а для обрезки горизонтального overflow — clip вместо hidden.


Ссылка ещё раз: The root scroller and how not to lose it

#css #scroll #root #appshell

Одно из модных слов этого года в ИИ — харнесс. Если совсем грубо, это вся обвязка вокруг самой модели: память, контекст, поиск, файлы, инструменты и логика того, как модель всем этим пользуется.

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

Свежий пример — GPT-6 Astra от OpenAI. На ARC-AGI-3 её прогнали в двух вариантах. В универсальном харнессе авторов теста, одинаковом для моделей разных компаний, при максимальном уровне рассуждений модель набрала 62,7%. С собственной обвязкой OpenAI — уже 98,6% при том же уровне рассуждений.

Разница в том числе в работе с контекстом: универсальная обвязка позволяет модели переносить между ходами только заметки, которые она сама решила сохранить. А обвязка OpenAI умеет сохранять внутреннее состояние рассуждений между запросами и сжимать длинный контекст.

То есть одну и ту же современную модель уже не всегда имеет смысл оценивать в отрыве от её «родной» обвязки. Если хочется выжать из неё максимум, харнесс может оказаться не менее важен, чем сама модель.

Похожую логику теперь можно увидеть и в Алисе AI. Она сама выбирает, какую модель использовать под конкретный запрос. Простому вопросу можно дать быстрый и дешёвый ответ. Если нужно проанализировать несколько документов, что-то посчитать или учесть много условий — Алиса может сама подключить режим «Эксперт».

В интервью Forbes Валерий Стромов рассказывает, что система строится вокруг 3–5 моделей-экспертов, автоматического распределения запросов и собственного харнесса.

Сейчас около 80% запросов обрабатывает собственная модель Alice AI. В «Эксперте» при этом могут использоваться как модели семейства Alice AI, так и общедоступные модели с открытыми весами, запущенные на серверах Яндекса.

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

Поэтому вопрос «какая модель самая умная?» постепенно становится менее интересным, чем вопрос «насколько хорошо вокруг неё собран продукт».

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

Jev от TypeSafe — модель для задач, где не нужно генерировать ответ, а нужно выбрать один вариант из известного набора. Например, получить состояние интерфейса и решить, что делать дальше: CLICK, TYPE_TEXT, SCROLL, WAIT. Вместо текста она возвращает вероятности для возможных действий. TypeSafe называет такие модели System One Models.

Browser Use взяли Jev и сделали Jev Ultrafast — браузерного агента, в котором обычная LLM почти не участвует в навигации по странице. Jev решает, что нажать, куда ввести текст или когда проскроллить, а небольшую языковую модель вызывают только тогда, когда сам текст действительно надо сгенерировать. Как именно устроен цикл, проще посмотреть на картинке.

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

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

https://github.com/browser-use/jev-ultrafast/

Про сам Jev:
https://typesafe.ai/blog/introducing-system-one-models-and-jev

Думаю, про Jev-подход мы услышим ещё много. Это быстро, дёшево и удобно.

#jev #ai

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

Браузер умеет рисовать текст уже лет тридцать. Но стоит вам открыть WebGL/WebGPU — и внезапно переносы строк, bidi, fallback шрифтов и лигатуры снова становятся вашей проблемой.

У Poimandres вышел Glyph v0.1.0 — движок типографики для веб-графики, который всё это забирает на себя: https://github.com/pmndrs/glyph

Poimandres (pmndrs) — это open-source коллектив вокруг React и веб-графики. Из их проектов вы, скорее всего, знаете React Three Fiber, Drei, Zustand, Jotai, Valtio, React Spring и use-gesture. То есть Glyph появился не из ниоткуда: это та же экосистема, которая уже много лет методично обрастает инструментами вокруг React, Three.js и интерактивной графики.

GPU-first рендеринг, batching, incremental updates, bitmap/MTSDF/Slug, Unicode shaping, CJK, font fallback, переносы, justification.

Есть и нормальный layout: абзацы, колонки, ограничения по форме, обтекание контуров и 3D-объектов.

Работает с Three.js, R3F и TypeGPU, можно подключить свой рендерер.

Пока pre-release: CJK частичный, TypeGPU experimental, emoji и vertical writing ещё в roadmap.

В общем, теперь для текста в WebGPU можно хотя бы не собирать HarfBuzz, layout и рендеринг по кускам самому.

Ну и ещё раз ссылка: https://github.com/pmndrs/glyph

#webgpu #typography #font #render

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

GitHub вытащил stacked pull requests в открытое тестирование.

Сам подход стеков многим уже знаком: большую фичу режут на цепочку зависимых PR вместо одного огромного diff.

Например:

main ← schema ← API ← UI ← tests

Так делали руками много лет. Один PR строится поверх другого, ревьюить их проще, а работу над следующим куском можно продолжать до merge предыдущего.

Проблема всегда была в обслуживании этой цепочки. Поправил что-то внизу — перебазируй всё сверху, делай force push, проверяй ветки и следи, чтобы GitHub не начал показывать лишние изменения.

Stacks автоматизирует именно это: GitHub понимает всю цепочку, показывает её целиком и умеет каскадно обновлять верхние PR после изменений и merge нижних. Есть и gh stack, при этом под капотом остаются обычные ветки и pull requests.

Меньше диффы, проще ревью, меньше ожидания между зависимыми кусками. С агентами это особенно полезно — сгенерировать огромный PR теперь легко, а читать его всё равно человеку.

Правда, пока не без проблем. При включённом dismiss stale approvals rebase может сбросить аппрувы, при этом UI способен ещё какое-то время показывать статус так, будто всё одобрено. Merge queue тоже добавляет сюрпризов: в некоторых сценариях после её работы stack может оказаться разбитым.

В общем, делаем всё то же самое, только теперь со сравнительно нормальным UI.

#github #stack

Проект от подписчика!

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

Презентация? Выступили на митапе? Хотите поделиться интересной статьёй — добро пожаловать!

Привет, я Ксюша. Много лет фронтендер, в прошлом дизайнер. Люблю упрощать себе жизнь, создавая удобные и уютные приложения под свои потребности.

Увидела, что автор канала выкладывает приложения подписчиков, и решила поделиться своим последним творением. Оно уже работает, им можно пользоваться.

Сначала приложение задумывалось для ребёнка: домашние дела как маленькая зарплата. Больше не нужно по сто раз напоминать про посуду, а спорить «я же всё сделал!» бессмысленно, всё видно в истории. Потом я его расширила, и теперь им могут пользоваться заказчик с фрилансером, друзья, муж с женой - назначать друг другу дела ) Какой бы вариант вы ни выбрали при входе, приложение остаётся таким же простым и милым.

Для семьи настройка занимает три шага: добавить ребёнка, завести список ежедневных дел, назначить цену дня. У нас это 100 тасккоинов в день (сын меняет их на робуксы для Роблокса или на рубли). Но валюта может быть любой, как договоритесь: хоть доллары, хоть поцелуи )

Дальше ребёнок открывает свою версию приложения и вычёркивает: помыть посуду, Duolingo, прочитать 40 страниц. Всё сделано - плюс сто. Что-то забыто - минус пятьдесят.

В любой день месяца можно нажать кнопку «Чек». Чек настоящий, лентой: дни, суммы, штрафы отдельной строкой, итого к выплате и штрихкод для реалистичности. Чек можно предъявить родителям, заказчику или жене.

В графе «Работник» стоит не имя, а Пингвин. Или Котик. Или Лисёнок. Имён приложение не спрашивает вообще, вместо имени выбирается мордашка. Это не только ради красоты: так не возникает вопросов к хранению персональных данных. Приложение не хранит ни имён, ни почты, ни телефона, войти можно анонимно.

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

TaskCoin — https://taskcoin.app/ru

Стек: React 19, Express 5, Prisma + PostgreSQL (Neon), хостинг на Vercel, ставится на телефон как PWA. Cron нет: зарплата и штрафы считаются в момент запроса, а день закрывается по часовому поясу ребёнка.

Участвуй во всероссийском ИТ-чемпионате МТС True Tech Champ 2026 c призовой фондом 10 250 000 рублей.

Если тебе нравятся алгоритмы, структуры данных и задачи на чистую логику — участвуй в алгоритмическом треке с индивидуальным зачетом.

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

В финале лучшие 120 участников алгоритмического трека сразятся в лайв-кодинге за шесть призовых мест и 2 750 000 рублей. Всех финалистов ждут:
— Лимитированный мерч;
— Сертификаты об участии;
— Масштабное мероприятие с выступлениями хэдлайнеров и фестивальными активностями.

Успей зарегистрироваться и пройти отборочный этап до 27 сентября.

Erid: 2VSb5xn8e7k

#заметка дня

Купили в комиссионке *Cut the Rope: Connect Four*. Дочь любит мультики про Ам Няма, так что игру, конечно, взяли.

Коробка практически полная. Детали даже не сняты с литников, все наклейки не наклеены и монетки на месте. Не хватало только подставки. То есть, буквально, самого главного.

Я решил сделать её на 3D-принтере. Но у меня опыта проектирования нет прям вообще — последний раз я что-то чертил в 2004 в университете, а вылетел из него я до того, как начался AutoCAD.

Таким образом, оставался только один вариант сделать это быстро: вайбкодить предмет.

Я фотографировал детали, измерял их штангенциркулем и объяснял Codex-у, что нужно построить. Потом открывал модель во Fusion, смотрел, что выдаёт слайсер, печатал пробник и возвращался с замечаниями: тут полка нулевой толщины, тут дырка отверстие, тут контур не замкнут и деталь развалилась.

Почему так вообще можно? Потому что CAD-модель — это геометрия, а геометрию можно задать кодом. Ассистент писал Python-скрипт, менял в нём размеры и форму, а результат загружал во Fusion MCP. Слайсер затем показывал, как эту форму принтер разложит на слои. Получился почти привычный цикл разработки: описал задачу, собрал, нашёл баг, исправил. Только каждый «запуск» может занять час и потратить пластик.

Естественно, компьютерное проектирование — вовсе не новая идея. Первые CAD-системы появились ещё в 1960-х (Sketchpad), коммерческие — в 1970-х, а к концу 1980-х пришло привычное параметрическое 3D-моделирование с размерами и историей операций.

Мы же пришли к редактируемой модели через текстовый разговор и скрипт.

Правда, «ИИ построил модель» не значит «её можно печатать». Несколько раз всё выглядело убедительно на экране, но в слайсере обнаруживались дыры, а у напечатанного пробника — слишком тонкие места. Модель буквально рассыпалась у меня в руках.

Но когда всё получилось — чувство какое-то дикое. Научился ли я CAD-у? Нет. Сделал ли я модель сложной формы? Да. Работает ли она — тоже да!

Так что обучение никто не отменял, но страх чистого листа уже преодолён.

Короче, это было круто.

#cad #model #3d