#фишка дня

Я не думал, что доживу, но, похоже, скоро можно будет вписывать текст в контейнер без хаков с vw/vh и даже без скриптов.

Сразу пример (нужны флаги! ниже): https://codepen.io/cssgrid/pen/emBZzPL

Фича называется text-fit. Это часть экспериментального CSS (обсуждается в рамках CSS Text / Sizing), и идея тут очевидна: вписать текст в контейнер.

Вот спека в процессе: https://drafts.csswg.org/css-text-4/#text-fit-property

Пока это всё работает только за флагом chrome://flags → Experimental Web Platform features.

Но уже хорошо же!

#css #text #fit

#фишка дня

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

Вот: https://wicg.github.io/html-in-canvas/

Он вводит метод drawElementImage(): ты передаёшь HTML-элемент, браузер сам делает для него layout, применяет стили и рассчитывает текст, а затем этот уже готовый результат можно рисовать в canvas.

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

В Chrome это уже можно попробовать через флаг:
chrome://flags/#canvas-draw-element

Собственно, это уже вполне себе рабочая реализация!

А в качестве примера сегодня — библиотека Liquid DOM. Ага, очередной Liquid Glass! Только очень красивый и рабочий:
https://github.com/AndrewPrifer/liquid-dom

Демо: https://liquid-dom-showcase.vercel.app/

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

#canvas #webgl

Не удержался.

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

В прошлом году я уже показывал, как удаление фона с изображений постепенно переезжает прямо в браузер:
https://t.me/htmlshit/3797

Тогда речь шла про Transformers.js и WebGPU — мол, многие ML-задачи уже спокойно работают локально, без серверов и сервисов.

Теперь вот наткнулся на removerized:
https://github.com/yossTheDev/removerized

Это открытый AI image toolkit, который целиком работает в браузере.

Под капотом — ONNX Runtime Web, WebGPU и client-side inference. То есть модели запускаются прямо у вас на устройстве, без отправки изображений на сервер.

Из того, что есть сейчас:
— удаление фона
— апскейл изображений
— пакетная обработка
— офлайн-режим
— кэширование моделей
— расширенные настройки

А главное, работает.

Демо:
https://getremoverized.yoss.pro/removerized

Да, кстати. ONNX Runtime Web — это браузерный рантайм для запуска ML-моделей через ONNX.

Если очень грубо: штука, которая позволяет запускать нейронки прямо в браузере через WebGPU/WebAssembly, без Python, CUDA и отдельного бэкенда.

Сайт:
https://onnxruntime.ai/docs/get-started/with-javascript/web.html

GitHub:
https://github.com/microsoft/onnxruntime

#ai #opensource #webgpu #ml

Так, не прошло и месяца (на самом деле, конечно, прошло), а я выкатил небольшое будущее обновление к пульту!

Итак, теперь я поддерживаю Android/Google TV. К сожалению, оттестировано только на паре телевизоров Sony, так что я буду благодарен любым инсайтам.

Пришлось попотеть, потому что вместо протокола SSDP телевизоры ищутся по mDNS. А это значит никакого широковещания, только мультикаст. А это значит, письмо в Apple с разъяснениями, получение разрешения, обновление конфига сборки...

Общение с телевизором тоже происходит оригинально — через бинарный формат protobuf, всё как у взрослых.

В общем, у кого есть айфоны и телевизоры на Android TV —
ссылка на TestFlight: https://testflight.apple.com/join/XXPPYAHN

У кого Android-телефоны, могу скинуть APK 🙂

Просьба всё та же — включить логи, попробовать, прислать мне. Никаких данных автоматически не собирается.

Спасибо, котаны!

#баг дня

В Chrome 147 случилась регрессия.

Всем известно, что input type="number" реагирует на колесо мыши, это никогда не было проблемой, потому что браузер прекрасно понимал, когда случится прокрутка страницы и отменял событие.

Но вот, случилось что случилось. Если оставить курсор на инпуте и крутануть колесом — и страница прокрутится, и число поменяется: https://issues.chromium.org/issues/508306805
Демо: https://jsfiddle.net/7389xv1z

Исправление приземлится только в Chrome 150, так что если вас заденет... работаем по-старинке:

input.addEventListener('wheel', e => e.preventDefault(), { passive: false });

#chrome #bug

#такое дня

Знаменитое внимание компании Apple к деталям. И это в 2026 году, когда у нас даже The CSS anchor positioning API имеется...

#apple #anchor

#статья дня

Кармен Ансио написал отличный материал про CSS-функцию linear(). Она появилась уже довольно давно, но в реальных проектах встречается редко — большинство по привычке ограничивается ease, ease-in-out и разными вариантами cubic-bezier().

Причина понятна: обычно linear() воспринимают как способ вручную задать несколько точек на кривой анимации. Не самый удобный инструмент и не очень понятно, зачем он вообще нужен.

Ансио показывает гораздо более интересный сценарий. Если заранее рассчитать движение какой-нибудь физической системы — например, пружины — то результат можно представить как последовательность значений и скормить её linear(). Браузер потом просто воспроизведёт эту траекторию.

.card {
  transition:
    transform 647ms
    linear(
      0, 0.04, 0.15, 0.30,
      0.46, 0.59, 0.69,
      0.75, 0.79, 0.80
      /* ... */
    );
}

Автор начинает с модели затухающей пружины, показывает уравнение, объясняет параметры системы и сопровождает всё это интерактивными примерами. Можно менять коэффициенты и сразу видеть, как меняется движение.

В общем, если у вас есть модель движения и набор точек, CSS уже умеет её воспроизводить.

Короче, linear() — это вам не это.

Ссылка ещё раз: https://www.carmenansio.com/articles/spring-physics-css

#css #easing #spring #linear

#статья дня

Выпускник Школы анализа данных рассказал, как попасть на научную стажировку в ML.

Степан Платинский работает в международном поиске Яндекса, а параллельно занимается экстремальной статистикой — разрабатывает нейросетевые модели для предсказания редких событий вроде наводнений и обвалов рынка. Исследования вывели его на стажировку в университет KAUST в Саудовской Аравии — один из топ-100 университетов мира.

«Стажировка помогла понять, что наука существует не только на Физтехе. Важно выбираться из привычной среды, видеть другие университеты и другие подходы. У меня была возможность поработать с большой исследовательской группой, Ну и наконец, это сильная строчка в резюме: с таким опытом шансы поступить на PhD за границей заметно выше», — отмечает Степан.

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

Тоже хотите получить международный опыт? Читайте советы Степана.

#фишка дня

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

Если ты их до сих пор анимируешь через max-height, скорее всего, ты — LLM-ка, которая застряла где-то там.

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

Согласен, height ещё плохо анимируется в auto, хоть и появился interpolate-size. Но ведь гриды никто у нас не отбирал!

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

Все же в курсе, что классика — одна строка грида и 0fr ↔ 1fr?

.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.accordion-panel[data-open="true"] {
  grid-template-rows: 1fr;
}
.panel-inner {
  overflow: hidden;
  min-height: 0;
}

Внутренний блок клипится — высота анимируется без max-height: 9999px.

А вот дополнение: в grid-template-rows можно и пиксели, и minmax(). Например, свёрнуто, но кусочек текста виден:

grid-template-rows: minmax(48px, 0fr); /* закрыто */
grid-template-rows: minmax(48px, 1fr); /* открыто */

Демонстрация: https://codepen.io/alinaki/pen/QwGryqN

Первый аргумент в minmax — минимум, не максимум: 48px снизу, а не «не больше 48». Полное скрытие — по-прежнему 0fr.

И да: padding на clip-слой не вешайте — только внутрь контента, иначе и под 0fr торчит, и при открытии прыгает.

#css #grid #accordion

Собственно, к слову о вчерашнем моём лёгком ранте на тему того, что LLM-ки любят подсовывать древние и неэффективные способы работы.

Что, котаны, будем Алекса разносить, или мнение валидно?

Мне кажется, тут скорее умирает не фронтенд, а часть рутины, которую мы привыкли называть фронтендом.

Да, disposable UI уже реальность, и многие интерфейсы будут генерироваться агентами под задачу. Но от этого требования к UX, доступности, консистентности и дизайн-системам никуда не исчезают. Скорее наоборот.

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

The frontend is dead, long live the frontend! Evolve or die. What? Let's figure it out.

I've been in this business for a long time: I saw the era of BBS's and the sunset of perl-based sites, I saw the rise of php3 and jQuery, and how React killed everything else. And remember the profession of "HTML/CSS coder" or "Markup developer" (aka "verstalshik")? Well, it looks like classic frontend developers will soon follow them.

And it's not just that Claude can finally vertically align an element and you no longer need a senior dev with 15 years of experience for that - it's about the value of frontend as a whole.

🍄 Point 1: damn chats everywhere

Frontend is the UI for customers, which gives them the UX they pay for. Frontend devs make the frontend.

But what happens if all UIs get replaced by chats with a couple of buttons? - We'll get unification.

Literally, right now you can build a fairly complex startup where there's nothing but a landing page and a button to connect an MCP/skill to your Claude Desktop and ChatGPT. Moreover, sometimes a landing page isn't even needed, because everything is already inside agents ecosystems.

Somewhat reminds of the Telegram bots story, but at x1000 scale.

Why do we need frontend devs if there's no frontend?

🍄 Point 2: disposability

For the past week I've been working on a project, running 1-3 hour AI loops in Claude Code and Codex multiple times per day, and of course the resulting code was complete crap.
More precisely, overall it was more like the miracle of the creation of the world, but if you zoom it in places it was total garbage.

But that doesn't matter, for two reasons:
- I could point the agent at any place in the project, show it the browser (mcp devtools is love), write "this s**t doesn't work here, fix it", and it would fix everything
- despite extensive ideation, I missed the proper data flow, but even big logical misses were eliminated in half an hour with another loop run

So my value as a frontend developer was even lower than my value as a manual tester. And the entire frontend was literally disposable, and whole chunks were redone at my command in literally half an hour per case.

Now imagine an agent that watches how user clicks on a site, analyzes it, and then adjusts the UI itself to make the UX better for users. Almost live. Sounds crazy? Let's discuss it in 5 years.

🍄 The survivors

Meanwhile, the value of backend and cloud engineers is still much higher, due to questions of security and resources.

Although, I saw with my own eyes how Claude Code clicked around in my browser in the Google Cloud Console - it was really scary, though in the end everything went off successfully.

So what to do? At least N years from now.
- developers - accept fate and develop soft skills, primarily around product management and agent orchestration
- companies - look for these soft skills, look deeply into ways of working, not just at whether a person knows something about AI and Claude Code (which will be obsolete again in half a year), plus traditional non-coding skills
- another option - go work in chop-shops, where frontend wizards with long beards and 30 years of experience hand-carve Fabergé frontends, while others slather it on with a thick brush of agents, earning millions - there will always be demand for high art and its own clientele

Or am I being too gloomy? What do you think about the future of frontend developers as a standalone profession?

#Frontend #AI #Coding #SoftwareDevelopment #FrontendDevelopment #WebDevelopment #ClaudeAI #AIAgents #FutureOfWork #DeveloperTools

Original post: https://www.linkedin.com/posts/alexander-remi_frontend-ai-coding-activity-7453310522881359872-EHZZ