#зомби дня

Sanity написали про текущее состояние styled-components.

Библиотека официально с марта, если помните, в maintenance-режиме: новых фич ждать не стоит, и главная проблема — производительность. В React 18 она не использует useInsertionEffect, из-за чего вставка стилей тормозит рендер. И это ощутимо.

В Sanity сделали форк и оптимизировали вставку стилей, убрали лишние костыли и адаптировали всё под React 19. У Linear, после замены пакета на этот форк, рендер ускорился до 40% без переписывания компонентов.

Для React 18 они предлагают @sanity/styled-components, для React 19 — @sanity/css-in-js.

При этом авторы подчёркивают, что форк — временное решение. В ближайшей перспективе они советуют перестать писать новые компоненты на styled-components и выбрать альтернативу вроде vanilla-extract, Tailwind или Panda CSS, постепенно перенося стили.

Учитывая, что у нас в компании ещё огромное количество зависимостей от Styled Components (ведь все в целом ждали несколько иного развития событий), переход на форк, чтобы сгладить ситуацию во время апгрейда на React 18 и 19, кажется разумным. Тем более, что текущее состояние старых компонентов давно заморожено.

#css #react #sc

#новость дня

TikTok Sans — теперь не только фирменный шрифт соцсети, но и полноценный опенсорс.

Его изначально делали в Grilli Type: нужен был вариативный гротеск с хорошей читабельностью и поддержкой 460 языков. Потом в работу подключились Contrast Foundry и Type Network. В итоге получился масштабный проект: шрифт оптимизировали под интерфейсы, а также под особенности рендеринга на разных платформах и языках.

Да, кириллица поддерживается!

В TikTok захотели, чтобы фирменный шрифт стал ресурсом для сообщества. Вместо того чтобы держать его закрытым, они оформили публичную OFL-лицензию и передали в Google Fonts и GitHub.

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

Google Fonts
GitHub

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

#font #tiktok

#фишка дня

Сделали вы такие флекс-контейнер, потомки в колонку, по центру, красота.

Но тут что-то пошло не так и контейнер стал слишком узким. Появился скролл. Казалось бы, невелика потеря: пользователь поскроллит.

А вот фиг!

Контейнер просто обрежет самого широкого потомка и не даст посмотреть его содержимого.

Что же делать?

Очень просто, Стефан Юдис напоминает нам о существовании ключевого слова safe, которое можно передать аргументом в align-правило:

.container {
display: flex;
flex-direction: column;
align-items: safe center;
width: 50%;
}

Смотрим видео. Теперь можно будет спокойно доскроллить до края самого широкого элемента.

Подробнее: https://www.stefanjudis.com/today-i-learned/safe-unsafe-alignment-in-css-flexbox/

По поводу поддержки браузерами: Chrome со 115 и Firefox с 63. И — ура — Safari с 17.6. В прошлый раз когда я эту статью упоминал — поддержка в Safari была только в TP.

А еще там Safari 26 вышла с поддержкой анимаций по скроллу, будем скоро вспоминать. Слава богу, macOS 26 для этого ставить не нужно.

#flex #css #scroll #бородач

#фишка дня

Вот как вы думаете, что может преследовать разработчика веб-браузера во сне? Может, это разбор дерева DOM? А может, реализация всех новых атрибутов элементов?

Нет! Это поддержка легаси! Например, как вам такое сообщение в PR браузера Ladybird:

Atlassian login gets the base URL for its module scripts by throwing an error and pulling out the current script's URL from error.stack with regex.

Вы всё правильно поняли. Получение базового URL-адреса сборки ведётся путём выбрасывания исключения и поиска адреса в нём. Я такое делал на AppsScript чтобы получить стек, но прям в продакшене да чтобы для реального использования...

Пруф: https://github.com/LadybirdBrowser/ladybird/pull/5678

Дальше — больше. Не только разработчики Atlassian (Jira, Trello) используют подобное, тем же самым славится и любимый многими Parcel: https://github.com/parcel-bundler/parcel/pull/2534/files#diff-39112519f42223a8e331d0dac27d01f8a70db6fe3d515ad8016856931a6ccbda

Стало быть, фишкой дня объявляется:

function getBundleURL() {
  // Attempt to find the URL of the current script and use that as the base URL
  try {
    throw new Error();
  } catch (err) {
    var matches = ('' + err.stack).match(/(https?|file|ftp):\/\/[^)\n]+/g);
    if (matches) {
      return getBaseURL(matches[0]);
    }
  }

И, получается, ничего лучше же у нас так-то и нет. Если нет двери — используем окно.

А подробнее о браузере Ladybird я рассказывал в нескольких постах. Например, тут: https://www.tgoop.com/htmlshit/2935

#js #hack

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

Не устану повторять, что лучшая вёрстка — это та, которую делать не надо.

Поэтому я очень люблю конструкторы. Но мы тут не тильду делать собрались, потому речь о конструкторах раскладок.

И сегодня мне принесло очередной! FlexBox Labs: https://flexboxlabs.netlify.app/

Из названия понятно, что речь о флексбоксе, не о гридах. Но — повторю — одно другого не отменяет ни разу. Флекс и грид решают разные задачи, потому — стоит внимания.

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

Да и короткое объяснение, что и когда применять, на канале уже было: https://www.tgoop.com/htmlshit/607

А что ещё круто, проект — открытый, можно держать у себя локально: https://github.com/prazzon/flexbox-labs

Генерирует как CSS, так и классы Tailwind.

Впрочем, гриды конструктор тоже может, в экспериментальном режиме: https://flexboxlabs.netlify.app/grid

#css #flex #layout #бородач

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

Разработчики Google Chrome вот буквально вчера представили MCP для Chrome DevTools! Вот тут: https://developer.chrome.com/blog/chrome-devtools-mcp

MCP расшифровывается как Model Context Protocol — это протокол, который задаёт единый способ подключения внешних инструментов и источников данных к ИИ-моделям.

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

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

Берёшь такой и спрашиваешь: «У меня там валидация не срабатывает когда я ввожу неверный емейл, разберись». И ведь разберётся!

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

Не, кроме шуток, это очень круто. Теперь можно подсоединиться к Jira, Figma, натравить это всё на браузер и отдохнуть наблюдать :)

#chrome #mcp

#статья дня

Вы когда-нибудь пытались анимировать смену цвета и сталкивались с тем, что в какой-то момент всё превращается в уныло-серое? Джош Комо как раз разбирает эту проблему.

Дело в том, что даже если мы задаём разные цвета через разные цветовые модели, браузер всё равно интерполирует их в RGB-пространстве. А оно ограниченное, и на кривой перехода иногда выпадает серый — как с градиентами (https://www.tgoop.com/htmlshit/806), только теперь в анимации.

Казалось бы, решение простое: крутим hue в HSL, и серого не будет. Но на практике CSS-анимации всё равно сводятся к RGB, и мы снова получаем неожиданный результат. И более того, анимация от 0 до 360 (полный оборот) вообще не будет анимирована. Оптимизация!

Есть два способа это обойти:

1. Использовать filter: hue-rotate(), чтобы прокручивать оттенки напрямую.
2. Хранить угол оттенка в CSS-переменной и анимировать именно её, а не цвет в целом.

В итоге получается ровная и предсказуемая смена цвета без серых провалов.

Статья: https://www.joshwcomeau.com/animation/color-shifting/

#css #color #animation

🚀 Стажировка для начинающих аналитиков в Яндексе

Яндекс открыл новый набор стажёров-аналитиков в Москву и Санкт-Петербург. Компания обновила тестовые задания: если вы уже пробовали свои силы раньше, можно пройти ещё раз.

Стажировка — это возможность работать над реальными продуктами с миллионной аудиторией: запускать A/B-тесты, анализировать поведение пользователей, строить дашборды и предлагать решения, которые напрямую влияют на развитие сервисов. Для стажёров предусмотрены гибкий график, зарплата, поддержка наставника, Айтиобщага для участников из других городов.
И даже отложенный оффер — если вы ещё учитесь и хотите вернуться в Яндекс позже.

📍 Что важно знать про отбор

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

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

#заметка дня

Тут в нашем чатике aka @htmlshitchat человек задал вопрос: «Как заставить событие произойти только после долгого нажатия на кнопку?»

И, вроде, очевидный ответ: ставь таймаут да отменяй его:

Осторожно, псевдокод jQuery

let r = null;

$button.on("mousedown", function(e) {
  e.preventDefault();
  e.stopPropagation();
  r = window.setTimeout(function() {
    $button.html('Clicked');
  }, 3000);
});

$button.on("mouseup", function() {
  $button.html('Hold me');
  window.clearTimeout(r);
});

Но это было бы скучно и недостаточно для поста, не правда ли?

И тут я вспомнил, что в 2017 году уже делал нечто подобное. Тогда не обошлось без погружения в Three.js и математику шестиугольников. Я об этом уже рассказывал: https://www.tgoop.com/htmlshit/2639

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

А вот на видео видно.

Анимация была оформлена на Tween.js, который всё ещё очень и очень популярен. Правда, название их последнего релиза ну прям удручает. End of the end — серьёзно?

С 2017 года API их, конечно же, поменялся. Мне хотелось одновременно и последний вариант API вам показать, и сетку заставить работать... как хорошо, что мы в вебе, где можно вообще всё!

Итак, кодпен: https://codepen.io/alinaki/pen/KwPwVPr?editors=1100

Весь современный код упихан в секцию с HTML, в script type="module", где импортированы нужные модули и константы из ESM-версии Tween.js, он же является нашим скоупом.

Это вообще очень удобный паттерн чтобы быстро накидать пример без бандлинга.

По зажатию кнопки мыши запускаем анимацию forward, по отпусканию кнопки — запускаем reverse. Из breaking changes — раньше можно было просто вызвать start(), а теперь нужно вызывать startFromCurrentValues(), иначе красоты не получится.

  function forward() {
    tween.stop().to({
      value: 2000
    }, 3000).startFromCurrentValues();
  }

  function reverse() {
    tween.stop().to({
      value: 1000
    }, 3000).startFromCurrentValues();
  }

Достаточно просто и эффектно.

#js #animation #tween #бородач

#ии дня

Когда тебе говорят «ИИ встроен во весь цикл разработки», обычно хочется дважды переспросить. Но тут реально интересно.

В SourceCraft Code Assistant появился ИИ-агент — его фишка в том, что он работает с полным контекстом твоего проекта прямо в веб-интерфейсе. Теперь агент может:
— поднять репозиторий,
— сгенерить автотесты,
— проверить, не оставил ли ты ключ API в коде (а ты оставил),
— и даже запустить деплой в Yandex Cloud, потому что платформа с ним теперь намертво интегрирована.

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

У SourceCraft Code Assistant есть и базовый режим: теперь он умеет не только подсказывать, что писать, но и отслеживает связи в коде. Поменял функцию в одном месте — он автоматически покажет повторяющиеся места и предложит правки.

Плюс, появился крутой паблик API для автоматизации задач и CI/CD.

В общем, достойно.

#sourcecraft #ai #devtools

#фишка дня

Вот вы знали, что в слушатель события можно передать AbortSignal и не выкаблучиваться с именованными функциями и вообще перестать слушать много событий разом, если надо?

А вот можно! Как в этом примере от Мэтта Покока.

И больше таких приятных современных вещей описано в статье Марка Грабански. Крайне рекомендую к ознакомлению.

#js #event #abortsignal #бородач

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

Писать тесты утомительно. Писать тесты компонентов — утомительно вдвойне. Писать тесты по доступности — втройне.

А проверять тесты и дописывать их — вчетверо.

Почему не вчетверне, кто знает?

На самом деле я, конечно, утрирую. Писать тесты, основываясь на доступных ролях элементов и их значениях — это весьма полезная практика для всех. Вот, обсуждали: https://www.tgoop.com/htmlshit/3717

Но что делать, если надо посмотреть, а что происходит-то? Иногда изолированно запустить компонент довольно сложно, добираться до компонента внутри приложения — тоже.

Один из правильных ответов на самом деле — использовать Storybook, но об этом я в следующий раз. И одно другого всё равно не отменяет.

А сегодня у нас прекрасная тулза: Jest Preview.

Нетрудно догадаться, что она делает: визуализирует ваши тесты! Смотрим видео на иллюстрации.

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

Прекрасно? Не то слово!

#test #jest #preview #storybook

#статья дня

Белиберда на экране — вовсе не белиберда. Именно таким образом Slack тестирует свою систему интернационализации. Переводов.

i18n, если ещё короче.

Если говорить строго, правильная локализация — это жопа.

1. Какие-то языки по своей природе длиннее, какие-то короче. Какие-то вообще иероглифы.
2. Нужно не только перевести слова, но и учесть формат дат.
3. Убедиться, что какой-то кастомный символ не крашит приложение (да, такое бывает).
4. И всё это надо как-то поддерживать и обновлять.

Так что статья из блога инженеров Slack — самое то: https://slack.engineering/localizing-slack/

TL;DR они используют синтаксис ICU MessageFormat для хранения кроссплатформенных переводов, а белиберда на экране нужна для тестирования, чтобы быстро находить непереведённые строки. Они будут выглядеть нормально.

#slack #i18n #бородач

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

Модульные шрифты всегда строились на простой идее: буква рождается из сетки. Ещё в 1920-е годы баухаузовцы экспериментировали с кругами, квадратами и треугольниками, чтобы создать универсальный алфавит, который можно воспроизвести где угодно — от печатного станка до архитектуры. Позднее Вим Кроуэл и другие дизайнеры показали, что строгая сетка может быть источником бесконечного разнообразия форм.

Сегодня к этим традициям обращается новый онлайн-редактор GRID TYPE. В нём можно выбирать разные сетки, настраивать их параметры, собирать буквы как из конструктора, экспериментировать с модульностью, сегментацией или пиксельностью.

Получившийся результат легко превратить в шрифтовой файл и использовать в реальных проектах.

Советую заглянуть в примеры — шрифтами дело не ограничивается! Орнаменты тоже тут. Можно использовать как часть CTF-игры…

Для тех, кто работает с кириллицей, доступна отдельная бета-версия: beta.grid-type.com А основной сервис здесь: grid-type.com

#fonts #tool

Must-watch с недавней big tech night: доклад Дмитрия Иванова (руководитель SourceCraft в Yandex B2B Tech) о трансформации профессии разработчика под влиянием ИИ. Посмотреть доклад можно здесь.

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

Отдельный акцент был сделан на том, куда уходит время разработчиков. По данным исследования, почти половина рабочего дня уходит на работу с кодом. Около 20% занимают встречи и рутинные процессы, ещё столько же — поиск информации. Ревью кода и поддержка распределяются между остальным временем. Эта картина показывает, что прирост продуктивности возможен не за счёт абстрактных «ускорений», а через конкретные улучшения: ускорить работу с кодом хотя бы на треть и сократить время на поиск информации минимум вдвое — и эффект будет ощутим. Именно эти направления в Яндексе сейчас называют приоритетными.

Часть решений уже работает. Около трети разработчиков внутри компании пользуются генерацией кода, примерно четверть ревью проводится при поддержке моделей. В тестировании применяются генераторы чеклистов и автотестов, а в области поддержки и эксплуатации AI помогает анализировать логи, инциденты и даже core dump’ы.

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

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

#ссылка дня

Вы ждали этого. Вы хотели этого. Вы жаждали этого!

Вы рисовали мемы, вы унижали бакендеров, вы унижались сами. Но теперь все проблемы решены!

Итак, 100 способов отцентировать div: https://css-generators.com/center/

Красненькое не надо использовать.

#css #div #center

#фишка дня от Jhey

Не только лишь все знают, что в content у псевдоэлементов можно использовать переменные. Это позволяет удобно помечать, например, уведомления. Или те же бейджики на карточках.

Но ведь, как мы уже. недавно выяснили, анимировать можно вообще что угодно!

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

button:hover span:after {
  animation: flip 0.2s calc(var(--i) * 0.05s);
}
@​keyframes flip {
  20% { content: '_'; }
  40% { content: var(--c1); }
  60% { content: var(--c2); }
}

Вуаля, вы великолепны!

Естественно, символы надо определить заранее:

  <span
    style="--i: 0; --c1: 'x'; --c2: '$'; --c3: '≈';"
  >C</span>

The Matrix has you.

А, ну и ссылочка на кодпен: https://codepen.io/jh3y/pen/GRLKMPY

#css #var #flip #бородач

#статья дня

Я уже откровенно боюсь иной раз выкладывать статьи с какой-то теорией или генераторами, потому что обязательно в комментариях будет «есть же ИИ». Таким темпом проще рассказывать о продакт-инициативах (я вот про Story Map недавно узнал, надо?). Но вдруг продактов тоже заменит ИИ? Я бы с удовольствием.

Ладно, к чему это я. Конечно же к очередной статье про Big O aka сложность алгоритмов!

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

Итак, что же тут у нас? А тут у нас и сама статья:
https://samwho.dev/big-o/

И её перевод: https://habr.com/ru/companies/timeweb/articles/942956/

Но честное слово, лучше идите смотреть статью. Там наш с вами любимый интерактив!

#bigo #algorithm #cs