14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#заметка дня
Всего три месяца назад Microsoft выпустила TypeScript 7 на Go, который должен был решить проблемы с производительностью. А за последние недели появилось сразу несколько альтернативных реализаций компилятора. Только ленивый не переписал компилятор TypeScript на Rust или на что-то ещё.
Отчасти виноват сам переход на Go: новый компилятор стал нативным бинарником, а инструменты, использовавшие JavaScript API, теперь вынуждены общаться с ним через отдельный протокол. И ещё когда стало известно об этом — кругом сразу поднялся визг: «Почему не на Rust?!».
А теперь следите за руками:
• ts-rust — экспериментальный Rust-порт от команды Theo Browne. Проверяет типы в VS Code за 4,8 секунды против 9,6 у Go-версии.
• bun check — реализация от Bun, по их тестам в 3–6,4 раза быстрее Go-компилятора.
• tsc-ts — Vercel решила вернуть компилятор на TypeScript, но собирать его в нативный бинарник.
• tsrs — Rust-порт от Cloudflare и VoidZero, обещающий до 8 раз больше скорости и на 70% меньше потребления памяти.
Причём Cloudflare собирается объединить tsrs с проектом Theo Browne и развивать их как единую реализацию.
Сам Тео — персонаж офигеть какой неоднозначный. Его категоричность, бесконечные споры и провокации это нечто. А теперь его эксперимент с AI-портированием компилятора становится частью проекта Cloudflare.
У Cloudflare, впрочем, есть практический интерес: запуск TypeScript через WebAssembly внутри браузеров и Workers, в том числе для облачных IDE и AI-агентов.
Ещё недавно переписывание компилятора было многолетней инженерной задачей. Теперь портов столько, что разработчикам приходится договариваться, какие из них объединять.
Позиция Microsoft при этом, скорее, благодарная: какие-то оптимизации прекрасно бэкпортятся, и TypeScript 7.1 на Go уже стал в два раза быстрее.
#typescript #rust #cloudflare
Пора лететь в отпуск, а денег на билеты и отель нет?✈️
Можно дальше смотреть красивые видео с Бали и мечтать об отпуске, а можно найти новые возможности для заработка.
Если ты работаешь в IT или только ищешь первую работу, попробуй наш сервис на базе ИИ. Он помогает искать вакансии и находить новые карьерные возможности.
Пусть следующим летом ты не просто смотришь на чужой отпуск, а сам собираешь чемодан 🌴
#заметка дня
Когда Гарри Каспаров проиграл DeepBlue в шахматы, всем, в целом, стало понятно, что шахматисты не победят ботов.
Помешало ли это шахматам с переменным успехом быть самой популярной игрой? Нет. Помешало ли это шахматистам снова достигать уровня практически рок-звёзд? Тоже нет. Признание, процесс, обучение, скандалы — всё на месте.
Это я к чему. Ну, собственно, что меня зацепило — оно на иллюстрации. «Ни одна модель». Ссылка на X. Вызов принят!
Задача предельно ясна: закрыть картинку и видео-файл "скелетоном", все только через css, видео-элементу нельзя добавлять никакие атрибуты и доп. css-классы, разметку менять нельзя, можно только менять css root элемента, работать должно везде.
И, собственно, GPT 6.1 Sol Max прекрасно справился, по пути выдав весьма интересное решение: через filter.
Вот оно: https://codepen.io/editor/alinaki/pen/01a13fa3-609c-71ea-b6ae-8fc97433cae8
Лучше ли оно предложенного? Хороший вопрос! Я пока предложенное не видел, но оно, как минимум, использует сильно более новые возможности, которые гораздо менее доступны в браузерах.
Одну проблему своего решения я уже знаю — маска анимации заставляет фон просвечиваться. Но я уверен, что это можно решить, и проблемой стать не должно.
Но целая ночь против 10 минут. Никогда не говори никогда, короче.
#css #skeleton
#такое дня
Сидим, разрабатываем дизайн систему, следуем WCAG, вычитываем эксплейнеры с https://open-ui.org/, следуем всем законам о доступности...
Но мы все лишь грязь под ногтями дизайнеров Apple, потому что спроектировать убегающий из под курсора компонент в их понимании абсолютно нормально.
Что дозволено Юпитеру, не дозволено быку, да?
#apple #ui
#инструмент дня
Когда надоело, что ссылки из рабочего Slack открываются в личном профиле Chrome, а мемчики из Telegram — в рабочем.
Встречайте — ContextRoute! Создано мной с любовью для вас, котаны. Пока только для macOS.
Работает просто: выбираете, в каком браузере или профиле открывать ссылки из конкретных приложений.
Например, всё из Slack отправляется в рабочий профиль Chrome, из Telegram — в личный, а из остальных приложений — как принятно в macOS aka в последнее окно. Чуть меньше раздражения.
Альтернативы, конечно, существуют. Но мне они как-то не зашли.
Такие утилиты, во-первых, очень opinionated, а во-вторых, любят обрастать настройками. А я люблю минимум.
Вот, например, Yojam. У него только тёмная тема. И не просто тёмная, а чёрная! В сочетании с обилием, несомненно, прекрасных настроек пользоваться этим мне показалось невозможным. Skill issue.
Finicky — прекрасный инструмент, но зачем мне писать конфиг на TypeScript, чтобы открывать ссылки в браузере? Я вот не понял.
Поэтому и сделал свою утилиту. Пока она умеет только маршрутизировать ссылки по приложениям, из которых их открывают. Никаких правил по доменам, сложных условий и прочих радостей автоматизации. Всё это появится позже, но сейчас мне хотелось решить одну конкретную проблему.
Надеюсь, что смогу вовремя остановиться. Хотя, наверное, разработчик Yojam тоже так считал.
#swift #macos
#дичь дня
Лукас Бономи сделал GSS (GPU Style Sheets) — язык, на котором можно создавать полноценную 3D-графику, используя практически обычный CSS. И чем дальше читаешь документацию, тем больше вопросов к автору.
Объекты объявляются через @scene. Хотите куб? Пишите cube. Сферу? sphere. Трёхмерный бублик? torus. Можно назначить им классы и идентификаторы, расположить в пространстве и стилизовать привычными селекторами.
@scene {
sphere#ball;
}
#ball {
translate: 0 1 0;
color: #ff5a36;
material: glass(1.5, frosted 0.3);
animation: float 2s ease-in-out alternate;
}
@keyframes float {
from {
translate: 0 1 0;
}
to {
translate: 0 1.5 0;
}
}
metal(), glass(), jelly(), iridescent(). Есть градиенты, текстуры, освещение, тени, туман и фильтры. Анимации задаются через @keyframes, работают переходы и управление сценой через прокрутку страницы.!important.
#ссылка дня
Недавно в нашем чате был жаркий спор на тему доступности. Мол, нормально делай — нормально будет и вообще морочить себе голову не надо, таких людей единицы.
Оно как бы и да и нет. Например, давайте представим себе на минуту средних дизайнеров сайтов и приложений.
Чаще всего они сидят в условиях, близких к идеальным. На стуле, перед большим монитором. И рисуют, не знаю, приложение для оплаты парковки. Он или она молоды и здоровы, мышка твёрдо лежит в руке. Идиллия.
Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил?
Да хрен там плавал. На бегу к офису, с документами в свободной руке. В этот момент здоровый человек превращается в инвалида, который в кнопку-то с трудом попадает. Телефон скользит, экран бликует. Это уж точно не идеальные условия.
И так с любым проектом. Думать надо.
Собственно, вот и ссылка на сегодня: https://a11ymyths.com/ru/
Мифы о доступности на разных языках. Всем читать, котаны.
#a11y #бородач
О господи, да неужели я при жизни увижу стилизацию title?!!
Читать полностью…
#ссылка дня
В комментариях к посту про моргающее меню а-ля macOS HIG всплыл вопрос: а есть ли вообще ресурсы, где можно подсмотреть, как одни и те же интерфейсные штуки сделаны в разных продуктах?
Есть как минимум два.
На самом деле их сотни были и есть, но почти все достаточно банальны. Я решил отобрать два из разных миров.
Refero Styles собирает стили реальных продуктов. Сейчас там уже больше 2000 примеров: цвета, типографика, отступы, компоненты и прочие детали. Причём всё это ещё и упаковывается в DESIGN.md, который можно скормить Cursor, Claude Code, Codex или чему-нибудь ещё и попросить делать «примерно вот так».
А The Component Gallery заходит с другой стороны: выбираешь конкретный компонент — tabs, accordion, popover, pagination — и смотришь, как он устроен в разных дизайн-системах. Сейчас там 60 типов компонентов, 95 дизайн-систем и больше 2600 примеров.
По сути, это та самая витрина компонентов, которая когда-то была одной из самых полезных частей Storybook Component Encyclopedia. Сам Storybook с тех пор ушёл гораздо дальше в сторону полноценной инфраструктуры для разработки, тестирования и документации, а простое «покажи мне двадцать разных tabs рядом» стало искать заметно сложнее.
Так что Refero — скорее про стиль целиком, Component Gallery — про конкретный паттерн. Для вопроса «а как вообще принято делать вот эту штуку?» оба отлично подходят.
#design #skill
#фишка дня
Давайте нормализуем выкладывание кода вместе с обучающим видео!
Немного раздражает, когда показывают красивый эффект, но оставляют только видео. Посмотреть можно, а понять, как повторить и что именно менять, — уже сложнее. Давайте исправлять: к ролику добавлять рабочий пример и короткий разбор.
Например, эффект с надписью PRO собран из нескольких простых приёмов SVG:
1. Буквы сведены к одному силуэту, поэтому фильтр обрабатывает их как цельную форму.
2. Размытие альфа-канала и композиция создают внутреннюю тень.
3. По буквам движется повторяющийся градиент — он задаёт светлые и тёмные участки.
4. feComponentTransfer переводит оттенки в цвет по таблицам RGB.
5. На финальном шаге контур возвращает буквам чёткость, а зерно добавляет фактуру. Цвет контура зависит от градиента и меняется вместе с ним.
Хороший пример показывает результат по этапам: включил шаг — увидел, что он добавил. Ещё полезно приложить минимальный запускаемый код, дать менять параметры и отметить, если часть значений пришлось восстановить приблизительно.
Собственно, вот вам хороший пример от меня: https://codepen.io/editor/alinaki/pen/01a0f735-901e-7978-a733-f7e89bd82597
Видео хорошо передаёт движение. Демо и код помогают разобраться, повторить и поэкспериментировать.
Хотелось бы, чтобы и публиковали их вместе.
#css #svg #effect #animation
Котаны, вам ещё и скидка по промокоду htmlshit, налетайте!
Читать полностью…
Если хочется немного обновить свою Telegram-ленту, собрали папку RIA — Recommended Iconic Authors.
Внутри в основном авторские IT-каналы: разработка, инструменты, библиотеки, релизы, заметки из реальной работы и всё то, что обычно интереснее очередного пересказа документации.
Разумеется, без AI тоже никуда: чат-боты, агенты, вайбкодинг и прочие способы заставить компьютер работать вместо себя хотя бы несколько минут.
Есть QA, информационная безопасность и просто хорошие технические каналы, где авторы не только пишут посты, но и отвечают в комментариях и обсуждениях.
В общем, вот папка. Подписываться на всё подряд не обязательно — можно спокойно выбрать то, что действительно хочется читать.
#инструмент дня
Забайтил твиттер этим скриншотом с успехом аж на 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
#релиз дня
Яндекс выложил в открытый доступ новую базовую модель 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 и агентных возможностей.
#фишка дня
Вот такой короткий набор CSS правил позволит текстовому полю расти вместе со вводом пользователя, но не выше определённого значения:
𝚝𝚎𝚡𝚝𝚊𝚛𝚎𝚊 {
𝚏𝚒𝚎𝚕𝚍-𝚜𝚒𝚣𝚒𝚗𝚐: 𝚌𝚘𝚗𝚝𝚎𝚗𝚝;
𝚖𝚊𝚡-𝚑𝚎𝚒𝚐𝚑𝚝: 𝟻𝚕𝚑;
}
#статья дня
В Base UI написали целую статью о том, как добавить поиск в выпадающее меню. Не о том, как фильтровать массив по строке — с этим как раз никаких проблем.
Допустим, есть меню с командами Rename, Duplicate и Delete. Добавляем поле поиска, начинаем печатать, стрелками выбираем нужный пункт, Enter выполняет действие.
А теперь вопрос: что это за компонент с точки зрения доступности?
Первым напрашивается combobox. Но комбобокс предполагает выбор значения для поля ввода, а здесь мы выполняем команду. aria-autocomplete тоже не подходит: он предполагает определённое поведение списка подсказок, которого наше меню не обеспечивает.
В Base UI в итоге выбрали dialog, внутри которого находятся поле поиска и настоящее menu.
Но с семантикой разобрались — осталась клавиатура. Например, Home и End в текстовом поле перемещают курсор, а в меню — выделение. Стрелками нужно перемещаться между пунктами, сохраняя возможность продолжать печатать. Причём DOM-фокус остаётся в поле ввода, а активный пункт определяется через aria-activedescendant.
Отдельная история с подменю: если оно открылось при наведении мыши, нельзя сразу переводить фокус на его поле поиска. Пользователь мог просто провести указателем мимо.
И всё это ещё нужно проверить с VoiceOver, NVDA и TalkBack. Кстати, по ходу работы команда обнаружила несколько багов доступности даже в обычном компоненте Menu.
Ну что же, давайте снова поговорим о том, что AI избавит нас от необходимости писать код. Допустим, агент за минуту напишет весь JSX, фильтрацию и обработчики клавиатуры. Но кто-то всё равно должен определить, какое поведение мы вообще хотим получить, почему именно такое и соответствует ли оно ожиданиям пользователей.
Особенно тех, кто взаимодействует с интерфейсом не так, как его разработчик.
Отдельный вопрос, конечно, нельзя ли просто заменить все меню на одно обращение в чат.
В общем, очень рекомендую почитать разбор Base UI. Там много интересных деталей, о которых легко не задуматься, даже если весь код пишешь собственноручно.
А ещё обратите внимание, у них видеоиллюстрации отдельные для тёмной и светлой темы 🫠
#ui #a11y #aria
#статья дня, даже две
Помните, я недавно рассказывал, почему появился Git и чем он отличается от SVN? Кажется, пора снова вспомнить о централизованных системах контроля версий.
Anthropic отказалась от Git и написала собственную VCS — Scion. Причём архитектурно она ближе к старому доброму SVN.
В мае компания вливала в свой монорепозиторий около 2500 изменений в день, а к сентябрю — уже больше 30 тысяч. История главной ветки приблизилась к 100 ГБ, CI выполнял 25 миллионов checkout в сутки. Git перестал справляться, несмотря на сотни зеркал и прочие оптимизации.
В Scion коммиты, слияния и ребейзы выполняются на сервере, а клиенты загружают файлы по необходимости. По данным Anthropic, это сократило потребление CPU и памяти инфраструктурой в 200 раз.
На разработку ушло пять месяцев и работа семи инженеров. Разумеется, при участии Claude, из-за которого вся эта проблема и возникла.
Но объёмы генерируемого агентами кода создают проблемы не только для Git, но и для платформ вокруг него.
Разработчик Йови де Крок представил экспериментальный проект gittifacts, в котором предлагает пересмотреть привычный процесс Pull Request. Вместо чтения каждого диффа человек согласовывает план и критерии приёмки, агент пишет код, а система собирает результаты тестов, покрытие, изменения API и зависимостей. На их основании изменение отправляется на ревью или автоматически сливается, если это разрешено настройками.
В отличие от Scion, gittifacts не заменяет Git, а пытается решить проблему человеческого ревью, которое тоже плохо масштабируется вместе с количеством сгенерированного кода.
В общем, за каких-то двадцать лет мы прошли путь от централизованного SVN к распределённому Git, а теперь снова выясняем, что централизованная архитектура может быть удобнее. И заодно думаем, зачем заставлять людей читать весь код, который генерируют машины.
Scion — статья Anthropic
gittifacts — статья автора
#git #svn #ai
Атмосфера HolyJS: ради чего стоит приехать на площадку
23–24 октября в Санкт Петербурге и онлайне пройдет HolyJS 2026 Autumn — масштабная JS-конференция, которая объединит фронтенд, бэкенд, графику и веб-платформу.
Интересные доклады — это база. Но Холи — это еще и то, что происходит между ними: живые разговоры, крутой нетворкинг, возможность самому выйти к микрофону и форматы, в которых можно посмотреть на привычные вещи под другим углом.
Для удобства собрали в карточках активности, ради которых точно стоит посетить конференцию.
Выбирайте, в чем хотите поучаствовать, и забирайте персональный билет со скидкой по промокоду htmlshit
→ Программа HolyJS
→ Купить билет
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446
🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер
15 октября в 19:00 (МСК) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика!
Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью.
На эфире нет сценария ↓
Кандидат – случайный разработчик, который не знает вопросов заранее.
На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух:
— какие вопросы и задачи даёт кандидатам на Frontend-собесах;
— что в каждом ответе засчитал бы, а что нет — и почему.
#статья дня
У vlt.io есть собственный коммерческий реестр npm-пакетов. Казалось бы, зачем кому-то альтернатива бесплатному npmjs.org? Но разработчики vlt решили покопаться в том, как npm передаёт метаданные пакетов, и нашли довольно много лишнего.
Например, полный документ с метаданными 759 версий Vite занимает 4,41 МБ даже после gzip. У npm есть сокращённый формат, но в нём не хватает некоторых полей, поэтому пакетным менеджерам иногда приходится запрашивать полную версию со всей накопившейся за годы историей.
В vlt переработали формат, убрали ненужные данные и сократили тот же документ Vite до 104 КБ. В среднем объём передаваемых метаданных уменьшился на 70%, а холодная установка зависимостей в их тестах ускорилась на 20–70%.
Причём менять пакетный менеджер не требуется: обычные npm, pnpm и Bun могут работать с альтернативным реестром. То есть значительную часть оптимизаций удалось сделать исключительно на стороне сервера.
Конечно, тесты проводились без lockfile, а в проектах с кешированием выигрыш будет скромнее. Но сама история показательна: спустя столько лет развития npm в его протоколе всё ещё остаются неэффективности, которые можно устранить, даже не меняя клиентский код.
https://www.vlt.io/blog/registry-metadata-70-percent-smaller
#npm #pnpm
#инструмент дня
TanStack Charts 1.0 — Таннер Линсли довёл до стабильного релиза свою библиотеку графиков.
Вот это, конечно, эффективность у человека.
Анонс: https://tanstack.com/blog/tanstack-charts-1-0
Каталог: https://tanstack.com/charts/catalog
Charts устроен не как коллекция <LineChart>, <BarChart> и <PieChart>. График собирается из меток (marks), шкал (scales), осей (axes) и взаимодействий (interactions): можно начать с линии, добавить поверх точки, снизу столбцы, свои аннотации или вообще собственную метку (mark) — без поиска нового компонента под каждую комбинацию.
По умолчанию используется SVG, но тяжёлый слой можно отдельно перевести на Canvas, оставив оси, подписи и интерактивность в SVG. Canvas, анимации и более тяжёлые части не попадают в bundle, пока они действительно не понадобились.
Линсли пришёл к этой архитектуре после D3, работы над Chart.js 2.0 и собственного react-charts. Последний тоже со временем упёрся в ограничения заранее заданных видов графиков. Поэтому Charts построен ближе к Grammar of Graphics: визуализация складывается из отдельных частей, а не выбирается целиком из списка готовых типов.
Линсли пишет, что идеи для API копил около десяти лет, архитектуру и поведение проектировал сам, а почти всю реализацию отдал coding agents. Для Charts уже есть отдельный гайд по AI authoring — как агенту выбирать примитивы, проверять результат и не выдумывать несуществующие API. Собственный Skill через TanStack Intent тоже запланирован, но пока не выпущен.
В результате Charts рассчитан даже не столько на графики, это весьма решённая проблема, сколько на все придури вашего дизайнера :)
#charts #tanstack
Стилизация тултипов
Два года назад я писал о проблеме с title и о принятом рабочей группой CSS предложении добавить псевдо-элемент ::tooltip от Лии Веру. Похоже, команда Edge займётся тултипами, о чём можно судить по статье Патрика Броссета.
Дисклеймер: это обзор раннего предложения новых функций. Синтаксис может измениться в будущем или от функций могут отказаться
title из-за ряда проблем. Патрик описывает эти проблемы в статье. Текущее решение команды Edge — добавить опциональный «сброс», как это сделано в стилизуемом <select>:<style>
/*
Новый псевдо-элемент,
выбирает все тултипы
*/
::tooltip {
/* Включение стилизации */
appearance: base;
/* Стили тултипа */
}
</style>
<button title="Это тултип">
Наведи на меня
</button>
appearance: base включает стилизацию. Системный тултип заменяется на псевдо-элемент с базовыми стилями. Он привязан к элементу с помощью Anchor Positioning и работает под капотом на основе Popover API и Interest Invokers.title:interest-delay;Esc;title непоследовательно. Кроме того, в сообществе есть стойкое убеждение, что title это плохо и его не стоит использовать.tooltip. Он работает как title, но без отображения системного тултипа, с определённой семантикой и связями и ограничен <button>, <a>, <input>, <textarea>, <select>:<style>
::tooltip {
/* Стили тултипа */
}
</style>
<button tooltip="Это тултип">
Наведи на меня
</button>
tooltip;aria-describedby.<!--
interestfor связывает кнопку
с тултипом и отображает
при наведении и фокусе
-->
<button
interestfor="my-tooltip"
aria-describedby="my-tooltip"
>
Наведи на меня, у меня есть тултип с HTML
</TMLbutton>
<!--
popover делает элемент
всплывающим и позволяет
добавить любой контент
-->
<div
id="my-tooltip"
popover
role="tooltip"
>
Это тултип с <span>HTML</span>
</div>
title/tooltip и псевдо-элемент ::tooltip как раз для простых задач, где нужно вывести короткий текст или подпись к элементу. Браузер сам сделает магию связывания и доступности.popover, id и role;interestfor и aria-describedby;
#инструмент дня
Промо-видео на Rust. Что? Да!
Давно знал об FFrames — фреймворке, в котором видео описывается кодом: Rust отвечает за логику и анимации, SVG — за графику, GPU — за рендер. Но всё никак не доводилось попробовать.
Ну как, не доводилось... я не особо понимал, а что там делать и как. Но решился.
Попробовал на промо для своего пульта. Озадачил Codex нарезать скриншоты с эмулятора, дав полную свободу действий, и попросил собрать 15-секундный ролик.
Самое интересное — как он это делает. Интерфейс разбирается на кусочки: кнопки пульта, круг навигации, плитки приложений, диалог ввода, клавиатуру. Каждый элемент становится отдельным слоем со своим временем появления, масштабом, прозрачностью и движением.
На каждом кадре Rust пересчитывает эти параметры. FFrames рисует результат и собирает MP4. На Mac используется Metal.
Например, вот так заголовок плавно поднимается на место за полсекунды:
let y = frame.animate(&fframes::timeline!(
at 0.0 => 0.5, animate 200.0_f32 => 120.0,
fframes::animation::Easing::EaseOut,
));
fframes::svgr!(
<text x="80" y={y} font-size="64" fill="#fff">
"Всё есть код."
</text>
)
⚡️ JavaScript, архитектура и ИИ: о чем будут говорить на юбилейной HolyJS 2026 Autumn
📆 23-24 октября в Санкт-Петербурге и онлайн пройдет юбилейная HolyJS 2026 Autumn — IT-конференция для всех, кто использует JavaScript-технологии для фронтенда и бэкенда.
В этом году в программе остается все, за что любят HolyJS: JavaScript, браузер, React, архитектура, производительность и инструменты. Но все это теперь существует в мире, где ИИ становится частью разработки — от написания кода до проектирования и работы с production.
Поэтому в программе есть и фундаментальный JS-инжиниринг, и практические кейсы с ИИ, и доклады, после которых можно сразу что-то попробовать в работе. А еще — воркшопы, где про новые подходы можно не только послушать, но и «потрогать» их руками.
Полное расписание и подробности смотрите в карточках и на сайте.
🌟По промокоду htmlshit персональные билеты дешевле
Купить билет
Реклама. ООО «Джуг Ру Груп». ИНН 7801341446
#фишка дня
Каждому смотрящему сериалы известно, что один из самых лучших способов сделать текст субтитров видимым на практически любом фоне — это добавить инверсную обводку.
Белый контур для чёрного текста, чёрный — для белого (внезапно).
Есть ли что-то подобное в CSS? Ну, конечно, есть! Как минимум, можно бросить тень aka text-shadow. Правда, синтаксис не очень интуитивный да и выглядит иногда странненько.
Какие ещё варианты? SVG text, очевидно, но там свои нюансы с доступностью и стилями.
И есть ещё! -webkit-text-stroke-color
Несмотря на префикс, Firefox тоже его поддерживает (спорное решение, но уж как есть).
Вот только как всегда есть нюанс. По-умолчанию, обводка будет нарисована перед слоем с текстом. Это очевидно, если понимать разницу между штрихом (stroke) и обводкой (outline), но всё же.
Поэтому paint-order: stroke нам в помощь! Таким образом, штрих будет отрисован первым, натуральным образом превратившись в обводку (при достаточной толщине, конечно же):
-webkit-text-stroke-color: white;
-webkit-text-stroke-width: var(--stroke);
paint-order: stroke;
👨💻 Фронтенд с AI: что можно делегировать агентам
5 октября, стартует конференция Podlodka Frontend Crew — сезон о том, как применять AI во фронтенд-разработке на практике.
Участники конференции узнают:
• Как находить prompt injection и противостоять таким атакам;
• Какие подходы помогают повысить доверие к результатам агентской разработки;
• Как проводить ревью кода, созданного AI-агентами;
• Как AI помогает упростить починку багов.
В программе ещё много практических кейсов. Также нужно отметить, что у конференции очень удобный формат. Это пять дней Zoom-сессий по утрам и вечерам и закрытое Telegram-комьюнити, где можно обсудить новый опыт и узнать от единомышленников то, что не догадаешься спросить у своей LLM.
Приходите, чтобы разобраться, какие задачи уже можно делегировать AI, где важно сохранять контроль и как выстроить системную работу с AI в команде или проекте.
🔗 Программа и билеты: https://podlodka.io/fecrew
#фишка дня
На macOS пункт меню после клика не исчезает сразу. Сначала выбранный пункт коротко моргает: подсветка пропадает, возвращается — и только потом меню закрывается.
Так система успевает показать, какой именно пункт сработал. В вебе меню обычно закрывается в момент клика, поэтому этого подтверждения нет.
На CSS сам эффект делается просто:
.menu-item:target {
animation: blink 150ms linear;
}
.menu:has(.menu-item:target) {
animation: close 150ms step-end forwards;
}
:target и :has(): выбранный пункт хранится в URL fragment. Для демки подходит отлично, для обычного компонента я бы всё-таки оставил состояние и закрытие на JS, а blink — в CSS.
#заметка дня
Позабытый формат
В комментариях к свежему 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
#библиотека дня
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
#статья дня
Ахмад Шадид придумал, как на 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