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

#статья дня Вы когда-нибудь пытались анимировать смену цвета и сталкивались с тем, что в какой-то момент всё превращается в уныло-серое? Джош Комо как раз разбирает эту проблему.Дело в том, что даже если мы задаём разные цвета через разные цветовые модели, браузер всё равно интерполирует их в RGB-пространстве. А оно ограниченное, и на кривой перехода иногда выпадает серый — как с градиентами (https://t.me/htmlshit/806), только теперь в анимации.Казалось бы, решение простое: крутим hue в HSL, и серого не будет. Но на практике CSS-анимации всё равно сводятся к RGB, и мы снова получаем неожиданный результат. И более того, анимация от 0 до 360 (полный оборот) вообще не будет анимирована. Оптимизация! Есть два способа это обойти:1. Использовать filter: hue-rotate(), чтобы прокручивать оттенки напрямую.2. Хранить угол оттенка в CSS-переменной и анимировать именно её, а не цвет в целом.В итоге получается ровная и предсказуемая смена цвета без серых провалов.Статья: https://www.joshwcomeau.com/animation/color-shifting/#css #color #animation #бородач

#заметка дняИтак, на работе выдали новые ноутбуки тем, чьи машины в лизинге уже три года и более.Вот только есть нюанс. Мой побитый M2 Pro нём на борту 32 Гб оперативной памяти, а новенький M5 Pro — только 24. Как-то нехорошо.У компании, конечно, свои интересы в ограничении максимальной конфигурации, но получили что получили. Людям, работающим с тяжёлыми задачами выдали модели на 48 Гб, то есть, возможность что-то доказать имеется.Но я сюда не ныть пришёл, хотя очень хочется. Любые ограничения это повод пересмотреть работу. И одним из таких пересмотров, конечно же, стала сборка Webpack, которая в пике сжирает 11 гигабайт. Планирую заменить на Rspack, хоть там есть и свои нюансы.Самый главный нюанс — продать это стафф-инженеру.Но поговорить я даже не об этом хотел. У коллеги новый такой же ноутбук резко начал выть кулерами, и причина была не очень ясна. Потребление памяти в пике всё ещё не упирается в лимит, свопится не очень сильно. А воет.А воет, потому что процесс rg — знаменитый инструмент поиска ripgrep — забивал 8 ядер процессора под завязку и останавливаться не собирался. Попросил коллегу показать мне её расширения для Cursor (VS Code). И там, конечно, было очень красиво. 34 расширения с её учебных дней, от разных иконок и сниппетов до подсветки классов.Запустили Extensions Bisect — я писал об этой встроенной в VS Code утилите не так давно, она позволяет найти расширение, которое вызывает глюки редактора или прочие странные эффекты — вот вроде пожирания ресурсов ripgrep-ом. И такое расширение нашлось! Им оказалось популярное IntelliSense for CSS class names in HTML.Что заставило его сожрать все ресурсы и почему это не проявлялось на предыдущей машине — вопрос остаётся открытым. Да и не нужно оно в большинстве случаев. В общем, я рад тишине в офисе, наконец.#rg #vscode

«Давай голосом на 5 минут» — и встреча идёт уже часЭту боль давно ощущают продуктовые команды: до 10 часов в неделю уходит на встречи, которых могло бы не быть. Асинхронный формат даёт возможность обсудить задачу, показать фичу, объяснить правки или быстрее изучить документацию. Хотите научиться выстраивать асинхронные коммуникации в команде? Тогда присоединяйтесь к вебинару с Антоном Гуриным, CPO MWS TeamStream. В эфире обсудим:⚫️Что поможет сократить количество ненужных встреч и избежать хаоса⚫️Как обсуждать задачи, правки и фичи асинхронно⚫️Где и как фиксировать все договорённости и решения⚫️Какие процессы можно уже сегодня перенести в асинхронный форматКому будет полезно: тимлидам, продакт-менеджерам, системным аналитикам, дизайнерам и архитекторам.📅 17 июня в 16:00👉 Регистрируйтесь по ссылке

#такое дняGDPR помните? В РФ его аналог 152-ФЗ, правда, реализация чуть другая.Ну, короче, это та штука, которая заставляет бедных-несчастных бизнесменов просить у вас разрешение на сбор ваших данных путём демонстрации убогих куки-банеров.Мы сейчас опустим тот факт, что это даже не всегда нужно, что простые куки авторизации и даже анонимной аналитики и мониторинга не всегда означают слежение и, стало быть, баннеры не нужны. Но мало кто хочет разбираться в нюансах, а штрафы большие.А вот следить за вами — хотят.Вот такой вот метод (на иллюстрации) отложенного принятия решения по сбору преддложила некая девушка, пост которой попался мне в ленте линкедина.Классический JS-шаблон: указываем тип скрипта как text/template или text/plain и он не выполняется браузером, но текстовое содержимое ноды доступно и легко можно запустить в нужный момент.Красиво? Не то слово, вот только...Вот только Google Tag Manager это буквально оркестратор! С его помощью и можно было бы показать баннер, принять решение по включению аналитики и так далее и тому подобное. И вся эта обвязка вокруг шаблона с кастомным кодом была бы не нужна.Но некоторые люди почему-то не любят искать простые решения.Штош.#gdpr #cookie #gtm

#статья дняЯндекс подвёл итоги грантовой программы Yandex Open Source — и там неожиданно много не просто «полезных тулз», а вполне серьёзной AI- и developer-инфраструктуры.Например, среди победителей есть AI Router — прокси для маршрутизации запросов между OpenAI, Gemini, Anthropic и другими LLM. С балансировкой нагрузки, rate limiting и даже встроенным аналогом Fail2Ban для защиты от подозрительных запросов. По сути, единая точка входа для работы с разными моделями.Ещё из интересного — RAGU. Это GraphRAG-движок, который строит графы знаний по документам: вытаскивает сущности, связи, дедуплицирует узлы и позволяет комбинировать локальный, глобальный и векторный поиск. То есть уже не просто «чатик поверх PDF», а полноценная retrieval-инфраструктура.Ну и отдельно понравился langchain-localai — пакет для тех, кто гоняет LLM локально или в закрытом контуре. Авторы переписали коннекторы на новый OpenAI SDK, добавили нормальную асинхронность и ускорили batch-обработку эмбеддингов.Вообще, по статье хорошо видно, как open source вокруг AI постепенно смещается от «очередной модели» к инфраструктуре: routing, observability, retrieval, orchestration и tooling.Короче, AI-native DevOps уже наступает.#opensource #ai #llm #rag #devtools

#видео дняНаверное, это слишком жёстко для утра, но всё же: вышла документалка про C++!Думаю, C++ в рекламе не нуждается и, скорее, интересно, почему так долго. Ведь про тайпскрипт, питон, да даже кложу мы получили документалки очень давно.Что уж говорить, документалка про реакт вышла аж три года назад! Хотя казалось бы. Интересный у авторов порядок выпуска, не то слово.Я плохо знаю современный C++, мои умения остановились курсе на третьем университета. Но посмотреть историю создания и пути к стандартизации было очень интересно, горячая рекомендация.Ссылка: https://www.youtube.com/watch?v=lI7tMxzSJ7w#cpp #documentary

#заметка дняКогда-то очень давно я сильно упарывался по кастомизации всего и вся.И речь сейчас даже не о WindowBlinds. Да, я настолько старый.Речь о хоткеях, файлах конфигурации, кастомных раскладках клавиатуры, бесконечных утилитах для управления окнами (вплоть до тайловых менеджеров), менюбарных приложениях и прочем. В одном только моём конфиге Vim было несколько тысяч строк.Настраиваешь всё, что настраивается, — и на своей машине ты король. Всё интуитивно, быстро, удобно. Никто, кроме тебя, за неё работать уже не сможет.Вот только и ты не сможешь нормально работать на других.Парное программирование становится менее удобным, развёртывание новой системы — отдельной болью.В какой-то момент я понял, что кастомные конфигурации больше ограничивают меня, чем окрыляют. Я не могу просто сесть за компьютер коллеги или студента и что-то показать. Не могу на воркшопе или презентации комфортно пользоваться предоставленной машиной. Все компьютеры вокруг кажутся медленными, неудобными и какими-то неправильными.Тогда я принял довольно жёсткое решение: отказаться от большинства утилит и кастомных конфигов. Вместо этого — выучить стандартные возможности редакторов, системы и системных утилит. Времени это занимает не больше, чем изучение собственных наворотов.В итоге я приобрёл свободу.Ладно, немного слукавил. На рабочем ноутбуке у меня установлен Swish, который позволяет раскладывать окна свайпами по тачпаду. На личном его нет. Но пальцы всё равно время от времени пытаются отправить окно в сторону привычным жестом.И вот сегодня я получил новый ноутбук. На чистую систему с нуля поставил наши рабочие скрипты — и через пару часов уже работал как обычно. Тем временем коллега весь день пытался восстановить свой бэкап с бесконечными конфигурациями и так и не закончил.А как поступаете вы, котаны? До сих пор настраиваете всё и вся или тоже пришли к минимализму?

Собственно, к слову о вчерашнем моём лёгком ранте на тему того, что 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 everywhereFrontend 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: disposabilityFor 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 runSo my value as a frontend developer was even lower than my valu

#фишка дняАккордионы и прочие схлопывающиеся сценарии. Скажи, как ты их анимируешь, и я скажу, кто ты.Если ты их до сих пор анимируешь через 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

#статья дняВыпускник Школы анализа данных рассказал, как попасть на научную стажировку в ML.Степан Платинский работает в международном поиске Яндекса, а параллельно занимается экстремальной статистикой — разрабатывает нейросетевые модели для предсказания редких событий вроде наводнений и обвалов рынка. Исследования вывели его на стажировку в университет KAUST в Саудовской Аравии — один из топ-100 университетов мира. «Стажировка помогла понять, что наука существует не только на Физтехе. Важно выбираться из привычной среды, видеть другие университеты и другие подходы. У меня была возможность поработать с большой исследовательской группой, Ну и наконец, это сильная строчка в резюме: с таким опытом шансы поступить на PhD за границей заметно выше», — отмечает Степан.Сейчас его цель — создать универсальную статистическую модель для предсказания экстремальных событий.Тоже хотите получить международный опыт? Читайте советы Степана.

#статья дня Кармен Ансио написал отличный материал про 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

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

#баг дняВ 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

Да, кстати! Я же совсем забыл написать обновление по пульту и магазину 🙂 Как вы видите из сообщения, следующего за этим — модерацию я победил. И даже выпустил первую версию сразу же! Но в чат сразу не скидывал, ибо занялся не менее важной вещью — названием!…Так, не прошло и месяца (на самом деле, конечно, прошло), а я выкатил небольшое будущее обновление к пульту!Итак, теперь я поддерживаю Android/Google TV. К сожалению, оттестировано только на паре телевизоров Sony, так что я буду благодарен любым инсайтам.Пришлось попотеть, потому что вместо протокола SSDP телевизоры ищутся по mDNS. А это значит никакого широковещания, только мультикаст. А это значит, письмо в Apple с разъяснениями, получение разрешения, обновление конфига сборки...Общение с телевизором тоже происходит оригинально — через бинарный формат protobuf, всё как у взрослых. В общем, у кого есть айфоны и телевизоры на Android TV — ссылка на TestFlight: https://testflight.apple.com/join/XXPPYAHNУ кого Android-телефоны, могу скинуть APK 🙂Просьба всё та же — включить логи, попробовать, прислать мне. Никаких данных автоматически не собирается.Спасибо, котаны!

#инструмент дняВ прошлом году я уже показывал, как удаление фона с изображений постепенно переезжает прямо в браузер: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.htmlGitHub:https://github.com/microsoft/onnxruntime#ai #opensource #webgpu #ml

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

#фишка дняЕсть пропозал, который предлагает добавить в 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

#фишка дняЯ не думал, что доживу, но, похоже, скоро можно будет вписывать текст в контейнер без хаков с 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

#заметка дняА помните (конечно же помните!) как мы с вами обсуждали CSS Custom Highlight API для реализации подсветки кода?Ну вот же, положила: https://t.me/htmlshit/2715Так вот, а почему бы не объединить подсветку CSS с поиском по тексту? Ну в самом деле, интересно же, как это реализовано, например, в текстовых редакторах или браузерах при поиске по странице. Хотя бы на минимальном уровне.А реализовано это через, простите, обход дерева!АлгориииииитмыЛадно, нам не придётся самим писать обходчик, он уже имеется! Вот: https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalkerГлавное — это понять, какой параметр фильтрации узлов передать. Ведь объектная модель документа она не только из тегов состоит, там как минимум параллельно идут атрибуты, текст, комментарии... Нам незачем искать вообще по всему.Ну в нашем случае всё просто: NodeFilter.SHOW_TEXT — ищем по текстовым нодам, словам.Ну а дальше всё просто: проверяем регуляркой на совпадения и запускаем подсветку. Уж это за нас теперь может и браузер делать: https://codepen.io/alinaki/pen/zxvPbRJДа, теперь можно и ваших камтомных селектах красиво подсветить результат фильтрации.Пользуемся, котаны.#css #highlight #бородач