#фишка и #статья дня

Надоело проигрывать битву z-index? Используй BFG от CSS: infinity.

Ладно, кроме шуток (хотя я и не шутил). С помощью infinity можно гарантировать верно скруглённые углы на прямоугольниках, мы с вами уже рассматривали алгоритм для веба и Flutter: https://t.me/htmlshit/1565

Вместо

  border-radius: 9999px;

...пишем:

  border-radius: calc(infinity * 1px);

А ещё в CSS общепринятое «если что-то поделить на ноль, получится бесконечность» вполне себе закреплено на практике:

calc(infinity) = calc(1 / 0)
calc(1px / 0) = calc(infinity * 1px)

Учителя вторых классов будут нами явно недовольны.

В общем, читаем статью и погружаемся в бесконечность и далее:
https://codersblock.com/blog/playing-with-infinity-in-css/

#css #infinity #math #бородач

#статья дня

У Джоша Комо вышел разбор squash and stretch — старого анимационного приёма, который нормально работает и в интерфейсах.

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

В интерфейсах это можно использовать совсем незаметно. Например, при наведении стрелка не только удлиняется, но ещё чуть меняет форму:

.arrow {
transition: transform 200ms;
}

.button:hover .arrow {
transform: scaleX(1.15) scaleY(0.9);
}

Особенно хорошо это работает с пружинной анимацией вместо обычного easing. Но выкручивать эффект сильно не стоит: тогда кнопка уже начинает вести себя как желе.

Ну а сама статья тут: Squash and Stretch

#animation #tutorial

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

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

А ещё, поскольку иных способов отбирать джунов, кроме как третировать их алгоритмами на собесе, толком и нет, важно самому их понимать как никогда.

Итак, встречайте: https://algorithm-visualizer.org/

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

Приглашаю накидать в комментариях подобных проектов.

#algorithms #cs #visualizations #бородач

#библиотека дня

Crashcat — новый физический движок для JavaScript. Его можно использовать с Three.js, Babylon.js, PlayCanvas или собственным рендерером.

Внутри есть столкновения, трение, шарниры, пружины, моторы, ragdoll, character controller и continuous collision detection.

Исходники лежат на GitHub.

Но лучше всего возможности движка показывают примеры на сайте. Там можно покатать машину, побегать персонажем, собрать ragdoll, запустить конвейер, подвесить объекты на шарнирах или навалить сотни тел в одну кучу.

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

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

Но примеры заодно хорошо показывают разницу между «движок умеет» и «игра работает». Готовый character controller ещё нужно нормально связать с камерой и управлением, машину — настроить под нужное поведение, а физические объекты — встроить в правила игры.

Пришло время пилить все те дурацкие игры, в которые любит позалипать дочка. Но хотя бы без рекламы и попапов.

#game #engine

#молния дня

Не планировал выпускать ещё один пост сегодня, но тут прям надо.

Есть автор такой, Дэн Холлик. Вы можете его знать по веб-сайту makingsoftware.com, где он буквально дотошно расписывает как работают современные (и не очень) компьютерные технологии.

Прям буквально про все: как работает экран, сеть, ИИ, GPU, шейдеры, сеть. Это потрясающая серия статей, которые он объединяет в книгу.

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

Так вот, он сегодня на пару дней выкатил статью «Как сделать шрифт». И это, как всегда, просто пушка. Дотошно и красиво, именно про основы: формирование координат и кривых.

Рекомендую: https://www.makingsoftware.com/chapters/how-to-make-a-font

#font #book

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

Скриншоты для App Store добавляются заметно сложнее, чем должны.

Сначала нужно запустить приложение в симуляторе с подходящим устройством. Потом разобраться, какие размеры Apple принимает для iPhone и iPad и какие изображения можно получить масштабированием из одного набора. Порядок неочевидный: если снять не в том разрешении, часть скриншотов придётся делать заново.

Дальше — App Store Connect. Интерфейс медленный, требования к изображениям разбросаны по разным экранам, порядок скриншотов легко перепутать, а загрузка нескольких локализаций быстро превращается в монотонную ручную работу.

Заметка на будущее для разработчиков: проще делать на айфонах/симуляторах Pro Max. Кстати, весь сыр-бор случился просто потому что на тот момент (февраль 2026) AppStore для экрана 6.9“ нужен был скриншот только с iPhone 14 Pro Max и никак иначе. А ещё, если ты забыл снять совместимость с iPad — конечно же модератор будет на iPad и не дай бог твоему интерфейсу расползтись.

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

Готовая версия работает на GitHub Pages, а исходники лежат на GitHub. При желании проект можно запустить локально. А для полноценного промышленного инструмента ему, конечно же, не хватает загрузки CSV с локализацией.

Надо кстати поискать плагины для Figma, решающие ту же проблему…

#apple #ios #appstore

#статья дня

Леа Веру написала большой текст в защиту полифиллов. Поводом стало мнение одного из ключевых редакторов WHATWG: полифиллы якобы вредят веб-платформе, потому что слишком рано занимают имена и форму будущих API.

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

В качестве более безопасной альтернативы часто предлагают ponyfills.
Полифилл добавляет отсутствующий API туда, где он должен находиться:
if (!RegExp.escape) {
RegExp.escape = value => /* реализация */;
}

После этого приложение всегда вызывает RegExp.escape(). В новом браузере работает нативная версия, в старом — подставленная.

Ponyfill глобальные объекты не меняет. Это обычная импортируемая функция:
import { regexpEscape } from "./regexp-escape.js";

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

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

Ponyfill остаётся в коде. Даже когда браузеры давно поддерживают нужный API, проект продолжает использовать импортированную функцию. Для перехода на нативную реализацию придётся менять импорты и вызовы.
Можно заставить ponyfill внутри проверять наличие нативного API, но тогда получается, по выражению Веру, «разобранный полифилл»: стандартная реализация уже используется, однако нестандартный интерфейс и отдельная зависимость всё равно остаются.

Ponyfills полезны, пока API только проектируется: на них можно проверить идею, не занимая заранее имя в платформе. Но для уже сформировавшегося API полифилл даёт более естественный путь — стандартный интерфейс сегодня и автоматический переход на браузерную реализацию завтра.

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

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

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

#javascript

#заметка дня

Вчера сайт 35mmc уронил Chrome на моём iPhone. Я просто читал статью про Olympus XA.

Подключил телефон к Web Inspector, записал таймлайн. За двенадцать секунд страница разогналась до 627 МБ памяти. Процессор жрал до 160%. Safari несколько раз запускал полный сборщик мусора, память немного проседала — и тут же начинала расти снова. Потом вкладка умерла. Буквально Web Page Crashed.

Вы же в курсе, что все браузеры на iPhone — это Safari? Но вот отработка нештатных ситуаций ведёт себя по разному. Chrome просто падает, а Safari — перезагрузит страницу несколько раз, на что-то надеясь.

Кстати, такая тактика даже лучше.

Самое смешное, что перед этим сайт предлагает купить ad-free experience.

Я не против рекламы и не против подписок. Маленькому изданию надо как-то зарабатывать. Но в данном случае выглядит издевательски: «заплатите, чтобы убрать рекламу, пока браузер не упал».

Погонял страницу ещё через Chrome с сетевыми трейсами и heap snapshots. Там не один неудачный баннер, а вполне себе рекламный комбайн: Flashtalking с креативами Adobe, Google SafeFrames, куча bidder’ов и измерителей, плюс Primis video player. А у видео внутри HLS, Google IMA, OMID, video Prebid и ещё свой трекинг.

В прогонах, где включался этот видеостек, память за короткую загрузку и прокрутку прибавляла 8–12 МБ. В других прогонах почти не росла. То есть один читатель получит просто перегруженную страницу, а другому случайно выпадет набор рекламы, который положит вкладку.

Не буду делать вид, что по одному таймлайну можно назвать виновника каждого байта. Но когда GC работает, память всё равно растёт, а Safari убивает процесс — пользователю всё равно, как это правильно назвать: memory leak, allocation pressure или «interplay независимых рекламных систем».

Он просто не дочитает статью.

#performance

#заметка дня

В конце прошлого года в Chrome появилась небольшая, но полезная оптимизация CSS-анимаций. Браузер перестал считать любое упоминание width или height безусловной причиной выполнять анимацию на в основном потоке.

Раньше даже такой код лишал opacity возможности анимироваться на compositor:

@keyframes fade {
from {
width: 200px;
opacity: 0;
}

to {
width: 200px;
opacity: 1;
}
}

Ширина здесь вообще не меняется, но одного присутствия width в keyframes было достаточно, чтобы Chrome счёл всю анимацию non-composited.

В Chrome 144 это исправили. Blink теперь проверяет, действительно ли layout-зависимое свойство меняется между кадрами. Если значения одинаковые, width или height больше не мешают opacity и transform работать на compositor.

Особенно заметна эта оптимизация во View Transitions. Chrome сам генерирует для них анимации с width и height, даже когда геометрия элемента остаётся прежней. До исправления такие переходы могли без необходимости фоллбека в основной поток.

В первой реализации, правда, нашлась проблема с округлением:

97.984px
97.9844px

Формально значения разные, хотя визуально это один и тот же размер. Вскоре сравнение сделали нечётким, так что небольшая погрешность вычислений больше не отключает оптимизацию.

Но чудес не произошло. Если размер действительно меняется:

@keyframes expand {
from {
width: 100px;
}

to {
width: 300px;
}
}

браузеру всё ещё приходится пересчитывать layout на каждом кадре. Такая анимация остаётся в основном потоке. Chrome не превращает её автоматически в transform: scale().

Для подобных случаев в CSSWG обсуждают отдельный механизм, условный size-animation, но к июлю 2026 года это всё ещё только предложение без готовой спецификации и реализации.

Так что старое правило остаётся в силе: реально меняющиеся width и height лучше без необходимости не анимировать. Chrome лишь убрал случай, когда неизменяющийся размер мешал нормальной compositor-анимации.

#performance

#фишка дня

В CSS есть ключевое слово safe, которое используется вместе со значениями выравнивания и не даёт контенту «вылезать» за границы контейнера. Если элемент не помещается при обычном выравнивании, браузер автоматически смещает его так, чтобы он оставался видимым.

Это удобно в адаптивных интерфейсах, где размеры могут меняться и важно не терять доступ к содержимому. safe работает с flexbox, grid и свойствами вроде align-items, justify-content и другими.

Простой пример:

.container {
  display: flex;
  justify-content: safe center;
}

Здесь элементы будут центрироваться, но если не помещаются, выравнивание изменится так, чтобы их не обрезало.

Подробнее читать тут: https://iprodan.dev/l/safe-alignment/

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

#заметка дня

В рассылке ядра Linux снова спорят об ИИ. То есть люди, способные неделями обсуждать правильный подсчёт байт, спустились на землю.

Поводом стал Sashiko — LLM-инструмент для проверки патчей. Laurent Pinchart предложил сначала прогонять его вывод через человека и сослался на рекомендации Software Freedom Conservancy, где поддерживают право проектов вообще запрещать AI-generated contributions.

Roman Gushchin резонно заметил: если мейнтейнер обязан перепроверить каждое замечание, инструмент экономит ему время примерно никак.
Тут вмешался Линус.

Письмо прекрасное: Linux не anti-AI-проект. Не нравится — форкайте или уходите.

По его мнению, спор о пользе ИИ уже закончился. Он полезен, находит реальные ошибки и иногда ставит людей в неловкое положение, потому что замечает то, что они пропустили. Если инструмент заваливает мейнтейнеров мусором, надо чинить инструмент, а не изображать, будто LLM не существует.
Сам Линус уже навайбкодил с Google Antigravity Python-визуализатор для своего проекта AudioNoise. DSP на C написал сам, а разбираться ради вспомогательной утилиты в Python не стал. Раньше собирал бы её по чужим примерам, теперь просто убрал из цепочки себя.

Другие проекты осторожнее. QEMU не принимает AI-generated code из-за проблем с происхождением и лицензиями. Похожие ограничения есть у NetBSD, Gentoo, Zig и отдельных проектов GNOME.

Разница простая. Они сначала видят юридическую и ревьюерскую головную боль. Линус сначала смотрит, работает ли штука.

ИИ — инструмент. А запрещать инструмент целиком потому, что им удобно производить говно, — довольно странная инженерная политика.

#ai

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

Сайтов с палитрами, генераторами и готовыми сочетаниями цветов полно. Но грибной среди них, кажется, один — Mushroom Color Atlas.

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

Проект сделала художница и дизайнер Джули Билер. Она выросла рядом с лесами у подножия вулкана Сент-Хеленс и с детства интересовалась грибами и природой. Позже Билер начала экспериментировать с натуральными красителями, а для атласа решила превратить эти опыты почти в лабораторное исследование: повторять один и тот же процесс, записывать переменные и постепенно собирать базовую карту грибных цветов.

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

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

#color

#статья дня

Так получилось, что я использовал матрицы преобразований — осмысленно — всего раз в жизни. Правда, в итоге перешёл на решение попроще: https://t.me/htmlshit/1580

Но это не значит, что они не нужны :) Просто не у всех есть под них задачи.

А вот у Ивана Шубина — автора редактора диаграмм Schemio — такая задача возникла. Правда, осознал он это не сразу :)

Ну кто бы мог подумать, что тебе понадобятся матрицы преобразований, когда ты разрабатываешь векторный редактор, правда?

Прекрасная статья для тех, кто говорит, что программисту математика не нужна: https://itnext.io/how-i-used-linear-algebra-to-build-an-interactive-diagramming-editor-and-why-matrix-math-is-d5bd552f2e8d

Ну, точнее, линейная алгебра.

Есть перевод на русский: https://habr.com/ru/articles/870462/

Не, кроме шуток, просто шикарнейшая статья, после которой очень многое в работе с векторной (и не только) графикой станет понятно.

#svg #math #matrix #transform #бородач

ИИ-агент собрал папку Telegram-каналов про AI и IT

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

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

Подписывайтесь на авторов в 1 клик. Здесь каждый найдет для себя что-то полезное:

👉 https://t.me/addlist/f3NatCl2n0M0MzVi

#ссылка дня

Кто хотел красивых анимированных иконок без обязательств?

🙋 Я точно хотел!

Итак, вашему вниманию иконки от Дмитро Товстокорого: https://icons.pqoqubbw.dev/

Анимированные при помощи библиотеки motion SVG с MIT-лицензией, что может быть прекраснее?

Давайте немного насладимся воем на болотах о том, что ещё одна библиотека анимации в проект нам не нужна.

Ну и никто не мешает вдохновиться и реализовать своё, с использованием своих инструментов, ведь правда?

К слову, библиотека Motion выросла из инструмента Framer, а их уж новичками никак не назовёшь. Так что вполне себе проверена в бою.

Берём, котаны?

#icons #svg #animation #бородач