#статья дня

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

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

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

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

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

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

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

#tool #syntax #highlight

#релиз дня

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

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

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

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

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

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

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

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

#ai #agents #sourcecraft

#статья дня

Ахмад Шадид придумал, как на 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

#фишка дня

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

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

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

Автор

#css #textarea #lh

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

Poimandres снова на коне: заваншотили (на самом деле нет) математическую библиотеку для веба. Шутку про Opus авторы уже успели пошутить сами.

Пакет ставится как npm i math. Имя math на npm им отдал Kaleb Hornsby.

Репозиторий при этом старый и несколько лет толком не обновлялся. Теперь проект заметно переделали и выпустили math v0.1.0.

Возможностей навалили с верхом: векторы, матрицы и кватернионы, 2D/3D-геометрия, raycast и frustum, triangulation и quickhull, easing и springs, seeded random, несколько видов noise, цвета и inverse kinematics.

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

Плюс всё разбито на отдельные точки входа и нормально тришейкится.

Поэтому использовать math можно хоть с WebGL, хоть с WebGPU, Wasm или собственным рендерером — библиотека сама не тащит за собой ещё один объектный мир.

Ну и без AI-обвязки релиз теперь, видимо, считается незаконченным: вместе с библиотекой положили /math skill.

https://github.com/pmndrs/math

#math #library

#релиз дня

Яндекс выложил в открытый доступ новую базовую модель Alice AI — AliceAI-Foundation-80B-A3B-Base. Веса доступны под Apache 2.0. И это не доработка чужих весов: модель полностью обучили с нуля.

Turing Post включил её в подборку ключевых моделей недели, а техрук из Google DeepMind выделил Alice AI как запуск, доказывающий тренд на то, что небольшие и эффективные модели уже сейчас меняют всю экономику AI.

По сравнению с предыдущей Alice AI LLM она стала заметно компактнее: 80 млрд параметров вместо 235 млрд, а при генерации благодаря Mixture of Experts активируется только 3 млрд. Основной претрейн — 17,5 трлн токенов, рабочий контекст — 128K, максимальный — 256K+.

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

Параллельно в сам претрейн добавили больше математики, программирования и STEM-задач, чтобы заготовить основу для reasoning ещё до последующего дообучения. На опубликованных компанией тестах это дало особенно сильные результаты в русскоязычных задачах: модель заняла первое место на 8 из 10 бенчмарков на факты, образование и экспертные знания среди сравниваемых открытых претрейнов.

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

#заметка дня

Позабытый формат

В комментариях к свежему Subversion спор про Git и централизованные VCS.

На моей первой работе — 2009 год — мы использовали svn. И стыдно не было.

У Git довольно специфическое происхождение: его делали не как универсальный инструмент для всех разработчиков, а под конкретное устройство Linux. Специфику и размер.

CVS и SVN предполагали/предполагают одну главную историю на сервере. Для обычной команды это вполне логично. У Linux была и есть другая структура: тысячи разработчиков, мейнтейнеры подсистем, несколько уровней доверия. Изменения идут от автора к мейнтейнеру, от него выше и в конце концов к Линусу.

С одним центральным репозиторием сразу возникает вопрос: кому разрешено туда писать? Всем нельзя, одному Линусу — бессмысленно. Поэтому Linux сначала перешёл на BitKeeper, где у каждого мейнтейнера мог быть свой полноценный репозиторий, а изменения передавались дальше по цепочке.

В 2005 году бесплатный BitKeeper для Linux закончился, и Линус написал Git. Требования были вполне приземлённые: быстро работать с огромным проектом, нормально переживать множество параллельных веток и не требовать единого сервера для каждого коммита. Человек ведёт свою историю сам, а другой человек решает, забирать её к себе или нет.

Git при этом сначала был скорее механизмом работы с историей, чем аккуратно спроектированным пользовательским инструментом. Интерфейс достраивали уже потом. Этим хорошо объясняются index, HEAD, несколько видов reset, reflog и прочие вещи, которые приходится отдельно учить даже после многих лет работы.

Потом появился GitHub. Git уже был, но совместная работа вокруг него требовала заметно больше ручной возни. GitHub собрал в одном месте репозитории, форки, просмотр кода, обсуждения и pull requests. Именно после этого Git стал удобен не только как VCS, но и как основа всей работы вокруг кода.

А дальше Git просто стало трудно не выбрать. На нём жил open source, его знали разработчики, его поддерживали IDE, CI и хостинги.

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

Кто-то из вас, котаны, застал или сидит до сих пор на svn?

Иллюстрация: GitKraken.

#svn #git

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

Забайтил твиттер этим скриншотом с успехом аж на 55 тысяч просмотров. На скриншоте изображён стрим экрана моего iPhone в приложении Device Hub.

И чо?

А в то, что в Евросоюзе приложение iPhone Mirroring для управления телефоном с ноутбука отключено уже второй год.

И нюанс тут вот в чём: причина отсутствия Mirroring — не техническая. Apple упирается в DMA, а конкретно в требования к interoperability. Если Apple даёт своему Mac особый доступ к возможностям iOS, сторонние производители тоже могут потребовать сопоставимый доступ. Сама Apple прямо пишет, что пока не нашла безопасного способа открыть iPhone Mirroring для non-Apple devices, не подвергая риску данные на телефоне. Поэтому в ЕС функцию просто не выпускают.

А Device Hub — пожалуйста.

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

Для отладки это, кстати, более чем круто. Симулятор симулятором, но возможность держать реальный девайс прямо рядом с Xcode сильно приятнее.

Обычный iPhone Mirroring он, конечно, не заменяет. Нет всей системной интеграции, уведомлений и сценария «телефон валяется где-то в квартире, а я пользуюсь им с Mac».

Короче, стримить айфон нельзя, но если очень хочется — то можно.

#ios #iphone #apple #eu

#фишка дня

На macOS пункт меню после клика не исчезает сразу. Сначала выбранный пункт коротко моргает: подсветка пропадает, возвращается — и только потом меню закрывается.

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

На CSS сам эффект делается просто:

.menu-item:target {
  animation: blink 150ms linear;
}

.menu:has(.menu-item:target) {
  animation: close 150ms step-end forwards;
}

То есть выбранный пункт моргает, а меню ждёт те же 150 мс перед скрытием.

Вот даже собрал кодпен с примером: https://codepen.io/editor/alinaki/pen/01a0f12b-8d69-7192-90d7-b8b7562ef482

Без JavaScript это можно собрать через :target и :has(): выбранный пункт хранится в URL fragment. Для демки подходит отлично, для обычного компонента я бы всё-таки оставил состояние и закрытие на JS, а blink — в CSS.

Apple отдельно описывает такую обратную связь в HIG:
https://developer.apple.com/design/human-interface-guidelines/feedback

Такая-то мелочь, а насколько сильно меняется восприятие!

#css #macos #hig

Если хочется немного обновить свою Telegram-ленту, собрали папку RIA — Recommended Iconic Authors.

Внутри в основном авторские IT-каналы: разработка, инструменты, библиотеки, релизы, заметки из реальной работы и всё то, что обычно интереснее очередного пересказа документации.

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

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

В общем, вот папка. Подписываться на всё подряд не обязательно — можно спокойно выбрать то, что действительно хочется читать.

Котаны, вам ещё и скидка по промокоду htmlshit, налетайте!