#статья дня

Страница грузится 7 секунд.
Причина — один эмодзи ❤️

Иногда проблемы с производительностью оказываются совсем не там, где их ищешь. В статье Аллена Пайка «A Broken Heart» он разбирает случай, когда страница внезапно начала грузиться по 7 секунд, хотя сервер, сеть и JavaScript работали нормально. В профайлере оказалось, что почти всё время Safari тратит на layout — причём один проход занимал больше секунды.

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

Причина оказалась в том, как Safari работает со шрифтами. Если указать Noto Color Emoji как основной шрифт, он используется даже для обычного текста, хотя покрывает только эмодзи. Для всех остальных символов браузер каждый раз ищет подходящий fallback-шрифт. В процессе layout он пересчитывает размеры текста, переносы строк и позиции элементов, и делает это много раз подряд.

В норме такие пересчёты почти ничего не стоят, но в Safari здесь есть просадка, из-за которой всё резко замедляется. В итоге одна строка с emoji-шрифтом может увеличить время layout в десятки или даже сотни раз.

Минимальный пример:

<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji" rel="stylesheet">

<style>
  body {
    font-family: "Noto Color Emoji";
  }
</style>

<button>Click ❤️</button>

Если не ставить emoji-шрифт основным, а оставить его только в конце списка как fallback, проблема исчезает. В оригинальной статье есть ещё детали про поиск причины и минимизацию примера — стоит почитать: https://allenpike.com/2026/a-broken-heart/

Ну и официальный issue: https://bugs.webkit.org/show_bug.cgi?id=305636

Потрясающая хрень, конечно. На пустом месте.

#css #emoji #svg #performance

#фишка дня

Я всегда считал карту кода достаточно бестолковой фишкой. С другой стороны, TODO-комментарии и ошибки достаточно легко распознаваемы и перемещаться по ним удобно.

А сегодня я узнал, что блоки кода можно ещё и помечать комментарием // MARK: Something, и этот самый Something будет виден на карте.

В идеале, конечно, не стоит развозить свой код на несколько экранов, но прежде чем разбивать — надо ж распознать, верно? :)

#vscode #minimap #бородач

#такое дня

Развлекаюсь тем, что извлекаю из ТВ-пульта на Flutter разные общие штуки в библиотеки. Первым на выход пошла реализация DLNA, ну а теперь — D-Pad, крестовина.

Понятное дело, сама по себе крестовина мало интересна. А вот как концепт радиального меню — очень даже!

Ну и потренироваться выкладывать пакеты в общий репозиторий тоже надо.

#flutter

#статья дня

А ну, сходу ответьте, чем отличается :has(:not()) от :not(:has())?

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

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

📌 :has(:not())

Выбирает элементы, которые содержат определённые дочерние элементы, но не содержащие другие.

.card:has(:not(img)) {
  background: lightblue;
}

🔹 Выберет .card, если внутри есть любой элемент, кроме <img>.

📌 :not(:has())

Выбирает элементы, не содержащие определённый дочерний элемент.

.card:not(:has(img)) {
  background: lightcoral;
}

🔹 Выберет .card, если внутри вообще нет <img>.

🏁 Итого:

:has(:not(img)) проверяет, есть ли что-то, кроме <img>.
:not(:has(img)) проверяет, что <img> вообще нет.

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

Не ошибайтесь, котаны.

#css #has #not #бородач

Стань стажером-разработчиком Frontend/Fullstack в Яндексе

Реализуйте новые фичи и интерфейсы в приложении Умного Дома, пишите веб‑приложения для роботов‑доставщиков и автономных машин, участвуйте в развитии международных финтех‑стартапов Yango Pay и Buy&Sell, создавайте геймификацию на трекинге заказа в Яндекс Лавке и Яндекс Карты нового поколения.

Фронтенд-разработчику необходимо:
— уверенно владеть HTML, CSS и основами JavaScript
— иметь опыт взаимодействия с TypeScript, React и SSR. Как преимущество: понимать основы Git, Docker, написания тестов
— обладать базовыми техническими навыками.

Фулстек-разработчику необходимо:
— иметь опыт с Node.js
— понимать основы CI/CD, баз данных, WebSocket, REST API или GraphQL
— знать основы Python или Go.

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

Станьте частью одной из команд фронтенд или фулстек разработчиков в Яндексе — оставляйте заявку.

#красивое дня

Угадайте, что красиво летит по небу и укладывается в 249 символов?

Правильно, SpaceX Starship!

Не, ну правда:

vec2 p=(FC.xy-r*.5)/r.y*mat2(8,-6,6,8),v;for(float i,f=3.+snoise2D(p+vec2(t*7.,0));i++<50.;o+=(cos(sin(i)*vec4(1,2,3,1))+1.)*exp(sin(i*i+t))/length(max(v,vec2(v.x*f*.02,v.y))))v=p+cos(i*i+(t+p.x*.1)*.03+i*vec2(11,9))*5.;o=tanh(pow(o/1e2,vec4(1.5)));

Это валидный код шейдера на GLSL для приложения Twigl: https://twigl.app/?ol=true&ss=-OGqcXbWDIJun2QTR4Cm

Они буквально конкуренты Shadertoy, и тот и другой — онлайн-инструменты для мгновенной проверки и рисования шейдеров на языке GLSL.

Вот, кстати, пример на Shadertoy: https://www.shadertoy.com/view/XX3fDH

В этом варианте ещё и камера дрожит.

Красиво? Не то слово!

#shader #glsl #3d #бородач

🌐 Что происходит внутри инфраструктурных сервисов Yandex Cloud?

Разработчики Yandex Cloud и Yandex Infrastructure расскажут об этом на встрече для разработчиков, архитекторов и инженеров, которая пройдет 16 апреля.

В программе вас ждут реальные технические варианты реализации и опыт нетривиальных решений разработчиков платформы:

— Инфраструктура как код для управления оповещениями: и никаких проблем
— Развёртывание в ритме танго: как мы заменили оркестрацию процесса установки «хореографией»
— Как мы оптимизируем вывод больших языковых моделей: кэширование, время отклика и ресурсы графических ускорителей
— Как мы строили собственную сеть доставки контента и через что нам пришлось пройти?
— Как мы работаем с уязвимостями на примере современных аппаратных атак

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

Участники смогут обсудить волнующие вопросы, варианты реализации и ошибки с разработчиками сервисов Yandex Cloud и другими участниками.

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

Зарегистрируйтесь, чтобы послушать реальные истории от разработчиков, обменяться опытом и узнать, что скрыто под «капотом» инфраструктурных сервисов, а также какие планы у команды на будущее!

#видео дня

Оказывается, у блога Chrome for Developers есть свой собственный YouTube-канал: https://www.youtube.com/@ChromeDevs

Формат, правда, довольно странный. Основу канала составляют видео по 1-3 минуты, и нет, даже не все из них шортсы. Впрочем, есть и подкасты.

Ладно, это я к чему. Они выкатили очень пафосное видео о том, как в Pinterest пересмотрели свои методы создания CSS-каруселей и — как утверждается — избавились от кучи джаваскрипта, перейдя на нативные View Transitions и свежие API для скролла: https://youtu.be/oWJPu3yvfp8

Но, конечно, невозможно в две с половиной минуты уместить все идеи проекта. Потому действительная польза — в описании! А что там у нас?

А, собственно, ресурсы для повторения:

Доступные карусели → https://goo.gle/4aTpGtc
Карусели на CSS → https://goo.gle/3YuWhOv
Локальные View Transitions → https://goo.gle/3XuZMUX
View Transition API → https://goo.gle/3MzVngY

Другой вопрос, конечно, в том, что половина этих API толком недоступна не то что в других браузерах, а даже в самом Chrome без флага, это они аккуратно обходят стороной.

Впрочем, никого ещё обычный скролл и отсутствие переходов вместо красивых транзишенов не убивало.

#chrome #css #carousel

#vscode дня

Если вы умеете пользоваться поиском — вы уже миддл. Если поиском с заменой — смело называйте себя сеньором.

Я щас не шучу, know your tools!

Огромное количество разработчиков вообще с трудом понимает, что код — это просто текст, без подсказок IDE не справляются. Но не будем о наболевшем.

Сейчас я вам покажу нечто, что выведет поиск кода на новый уровень: расширение CodeQue!

Ссылка: https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque

Я иллюстрацию файлом приложу, ибо иначе мелко. Но в чём соль: вы можете искать код, который напоминает тот, что написан в области поиска!

Например, в примере — ищем div, внутри которого есть ещё div с атрибутом className, установленным через clsx. Или ещё, можнот найти все формы, внутри которых есть select (необязательно, HTML-тег или компонент).

Я честно говоря сразу вообще не понял, нафига это надо — есть же RegExp.

Но потом ка-а-ак понял!

#search #extension #бородач

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

Хотели попробовать local‑first? Zero от Rocicorp — отличный способ это сделать.

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

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

На клиенте данные хранятся в IndexedDB, что обеспечивает быстрый доступ и поддержку оффлайна. На сервере Zero использует Postgres как источник правды и реплицирует данные в т. н. zero-cache для обслуживания клиентских запросов. Конфликты при синхронизации обрабатываются библиотекой автоматически.

API достаточно простой: схема с типами и связями, queries для реактивного чтения данных и mutators для записи. Всё это позволяет строить приложения с мгновенным откликом и оффлайн-доступом без больших изменений в привычном коде.

Если хотите попробовать local‑first без сложной архитектуры и ручного синка — Zero даёт такую возможность.

https://zero.rocicorp.dev/

#local #indexeddb #postgresql

#польза дня

Самое важное при разработке ИИ-агентов (на мой взгляд) — создать такую систему, где тебя не нагружают очередными «можно и допилить», а снимают рутину, освобождают время.

Поэтому приглашаю всех на Agents Week от Школы анализа данных Яндекса, который пройдет с 6 по 10 апреля. В течение пяти дней будут вечерние лекции с экспертами, где вы сможете задать любой вопрос, а ещё практика-практика-практика.

За 5 дней узнаете с чего начать проектирование агентов и настройку их поведения, какие есть практики построения single-agent и multi-agent-систем, как доводить агентов до продакшена.

Программа, спикеры, регистрация — всё по этой ссылке