#фишка дня

Я долгое время не понимал, нафига нужен background-attachment: fixed;. Но потом в моду вошли скелетоны для загрузки (терпеть их не могу), и существование fixed стало чуть более понятным.

Но тут же появилась такая штука, как CSS-переменные... Это привело к тому, что буквально парой строк JS можно установить координаты этому самому фону и практически бесплатно получить эффект "фонарика". Вот демо от DX-инженера Vercel Джея: https://codepen.io/alinaki/pen/poYyNbB

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

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

Впрочем, хоть сам эффект и кажется сложным, реализация его хорошо раскладывается на шаги: https://codepen.io/alinaki/pen/jOJqVmR

1. Применяем всё тот же радиальный градиент для "фонарика".
2. Цвета меняем через функцию hsl, передавая в неё градусы поворота цветового колеса:

[data-glow] {
  background-image: radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x, 0) * 1px)
    calc(var(--y, 0) * 1px),
    hsl(var(--hue) 100% 70% / 0.25), transparent
  );
  background-attachment: fixed;
}

3. Накладываем маску из псевтоэлементов так, чтобы подсветить границу чуть сильнее:

  mask:
    linear-gradient(transparent, transparent),
    linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;

4. Вы великолепны.

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

#фишка дня

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

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

Так вот, вашему вниманию:

touch-action: manipulation;

...и его друзья!

Его советуют добавлять на кнопки для более быстрой обработки тапа.

Но также!

Отменить зум? Запретить вертикальный или горизонтальный скролл? А может, вообще всё запретить, чтобы заблокировать элемент на экране до определённого момента?

Всё это тоже можно! Да ещё и в разных комбинациях. Например:

#element {
  touch-action: pan-right pinch-zoom;
}

...разрешит скроллить направо и зумить, но отключит обработка тапов и вертикального скролла.

Статья на CSS-Tricks по теме: https://css-tricks.com/almanac/properties/t/touch-action/

Демо оттуда же: https://codepen.io/team/css-tricks/pen/PXbPXL

Кстати, на мобильном сафари (а значит, и в хроме на iOS) присутствует офигенный баг!

При указании touch-action: pan-x; элемент можно скроллить только по вертикали, но пока он движется по инерции, его можно и горизонтально скроллить. После чего скролл успешно в последнем положении блокируется вновь.

Apple как обычно, конечно

В общем, полезно.

#css #touch

дополнительные выводы:
- контрактная разработка позволяет уменьшить риски
- динамические схемы валидации с бэкэнда позволяют сохранить источник истины
- стандартизация обработки ошибок всегда дополнит контекст пользователя и избавит службу поддержку от дополнительной нагрузки
- в случае ошибки всегда следует предлагать посмотреть рекомендации по заполнению, а не оставлять пользователя наедине с иконками i в полях ввода (да-да, я тоже редко кликаю на них чтобы посмотреть попап с каким-то текстом)

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

Однако это удобство обернулось уязвимостью.

С помощью анализа стилей отрисованных ссылок можно было выяснить, какие страницы были посещены, что открывало путь для скрытых атак. Эта техника называется Visited Link Sniffing.

Как браузеры защищали от этого?

Для борьбы с такой угрозой браузеры внедряли различные меры:

✅ Ограничение доступа к вычисляемым стилям для :visited
✅ Игнорирование некоторых стилей вообще

Но эти подходы оставались полумерами, так как информация о посещённых ссылках оставалась глобальной, и её всё ещё можно было использовать для скрытого отслеживания. Например, буквально считая миллисекунды парсинга стилей: https://codepen.io/alinaki/pen/ogNrVoj

Примечание: это будет работать только на Firefox и Safari и только на достаточно старых машинах.

Что теперь предлагает Google?

В Chrome 123 появился новый подход — Partitioned Visited Links History. Теперь ссылки считаются посещёнными только в пределах определённого контекста. Например, для одного сайта или даже внутри конкретного iframe.

Это значит:

✅ Один сайт не будет знать, какие страницы вы посетили на другом.
✅ История посещений разделена на изолированные части (partition'ы).

Псевдокласс :visited больше не работает глобально — он зависит от контекста.

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

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

👉 Подробности:
https://github.com/explainers-by-googlers/Partitioning-visited-links-history

#history #security #safety

#статья дня

7 апреля 2025 года системе контроля версий Git исполнилось 20 лет!

По этому поводу GitHub (а кто же ещё) провели с автором — Линусом Торвальдсом — интервью.

Выдержки:

– Он не хотел писать систему контроля версий — это казалось скучным. Но BitKeeper перестал быть вариантом, и пришлось самому.

– У него не было «плана» или видения. Всё делал на ходу, по мере необходимости. Даже не знал, насколько всё это станет популярным.

– Git задумывался не как «инструмент для всех», а как «инструмент для меня». И, по мнению Линуса, именно в этом причина успеха.

– Его подход: «не делать предсказаний», особенно в open source. Он сам не ожидал, что Git проживёт 20 лет.

– Команду git bisect называет «одной из умных штук», но уклоняется от выбора любимой команды: «это как выбирать любимого ребёнка».

А прочитать целиком рекомендую тут: https://github.blog/open-source/git/git-turns-20-a-qa-with-linus-torvalds/

Кстати, интервью скоро обещают выложить в формате видео!

#git #anniversary

#фишка дня

Как контролировать прозрачность фоновых изображений?

Первое, что приходит в голову: «Никак».

Точнее, как — никак. Можно сымитировать фоновую картинку через наложение фона на псевдоэлемент или любой другой элемент вообще, и уже его прозрачность и контролировать.

Но может, как-то ещё?

И таки да!

background-image: url(image.jpg);
background-color: rgba(255, 255, 255,0.2);
background-blend-mode: lighten;

или

background-image: url(image.jpg);
background-color: rgba(0, 0, 0,0.2);
background-blend-mode: darken;

...в зависимости от нужного эффекта.

А в случае с несколькими фонами одновременно, background-blend-mode позволяет делать мультиэкспозицию, как на иллюстрации.

Собственно, пример с lighten: https://codepen.io/alinaki/pen/dPyxdPe

P. S. а в Safari можно через функцию cross-fade.

#css #blend

#статья дня

Когда-то давно я в качестве демо накладывания ячеек грида друг на друга сделал табло аэропорта: https://www.tg-me.com/htmlshit/2814

Очень схематичное, конечно, но сделать что-то более симпатичное руки не дошли.

Задо дошли у всем известного нам Jhey!

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

От построения модели ячейки, с лепестками и осью, до анимации этой модели: https://craftofui.substack.com/p/time-travel-with-javascript

И, более того, анимация выполнена в двух вариантах: GSAP и WAAPI aka Web Animation API, а это значит, можно обойтись без зависимостей вообще.

Горячая рекомендация, в общем.

#css #gsap #waapi

#такое дня

Очень неожиданная информация всплыла в комментариях к одному из предыдущих постов.

Теперь в Chrome дефолтные стили для тегов b и strong не bold, а... bolder!

Пруф: https://github.com/chromium/chromium/commit/0f34660cbc02352d5deabbf135c4b07303979df5

Судя по дате изменения, это как раз улетело в последнюю (135) версию Chromium и Chrome, соответственно.

Казалось бы, какое мелкое изменение, но уже принесло людям проблем :) А главное, посмотрите сколько тестов!

Да-да, тестов там сильно больше, чем в твоём PR, который меняет вообще всё в проекте.

Ладно, а что кроется-то за этим изменением?

А кроется имплементация последних изменений в спеке: https://html.spec.whatwg.org/multipage/rendering.html#phrasing-content-3

Ведь задача strong и b — выделить текст во что бы то ни стало. А если он уже полужирный? То-то и оно.

Или ещё хуже, глядите, на span стоит font-weight: 100: https://codepen.io/alinaki/pen/XJJrEPo

Видите отличия? Я — нет.

Ладно, кроме шуток, объяснение на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#meaning_of_relative_weights

Если 700 на родителе — то 800 на strong/b и так далее.

Чудны дела твои, HTML. Упёрлось же кому-то...

Да, кстати, ещё существует lighter :)

P. S. Safari всё ещё использует bold, а Firefox — тоже bolder. Но когда конкретно Firefox внёс это изменение я пока не знаю.

P. P. S. normalize.css тоже всё приводит к bolder.

#html #bolder #bold

#новость дня

Figma зарегистрировала словосочетание Dev Mode на себя!

Никогда такого не было и вот опять.

Кроме шуток, Figma направила официальное письмо компании Lovable, которые разрабатывают визуальную AI IDE, c требованием прекратить называть их средство просмотра сгенерированного исходного кода Dev Mode.

Всего у Figma 13 зарегистрированных торговых марок, кроме Dev Mode там ещё есть, например, Schema и слоган "Nothing great is made alone". И слово Config!

Подали они заявку летом 2023, а получили одобрение в ноябре 2024.

Словосочетание Dev Mode, хоть и подразумевается во многих приложениях, до этого момента никем не регистрировалсь и, кстати, нигде в общем-то кроме Figma напрямую и не применяется.

Хотя тут с полей сообщают, что Atlassian применяла ещё в 2021.

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

P. S. Надо бы проверить Google DevTools :)

#trademark #devmode

#статья дня

Итак, перед тобой задача: поставить заглушку, пока грузится основное изображение.

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

И все такие: «Ну чот...»

Наверное, есть же что-то получше?

Да, есть. LQIP-техники вида, собственно, LQIP, SQIP и BlurHash. Вот, писал тут: https://www.tg-me.com/htmlshit/2565

Ну или генерация всенаправленного градиента по фото: https://www.tg-me.com/htmlshit/3517

Но это всё как-то муторно... вот бы что попроще.

И таки есть! Лин Рада — разработчик из Canva — придумал новую технику LQIP, основанную на CSS. Заключается она в кодировании цветных тёмных/светлых участков короткой последовательностью символов.

Ну, типа:

<img src="…" style="--lqip:192900">

И пример того, что получается, можно посмотреть на иллюстрации.

А сама статья шикарный пример умного использования различного рода координат: https://leanrada.com/notes/css-only-lqip/

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

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

Кстати, там же есть и скрипт для обработки картинок, чтобы не гадать координаты самому.

#css #lqip #math

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

Вы только посмотрите на эту красоту!

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

И не только для React! Vue и Svelte тоже там.

Итак, встречайте: NumberFlow от Максвелла Барвиана.

GitHub: https://github.com/barvian/number-flow
Документация и демо: https://number-flow.barvian.me/

Настраивается формат чисел, параметры анимированных переходов. И, собственно, никаких скрытых зависимостей.

Прекрасное.

#react #number #transition #бородач

#нытьё дня

Неожиданно, пост дедовского нытья!

Раньше мы сами выбирали библиотеки. Скачивали архивы, клали их в vendor, подключали в коде. Всё было сложно, но понятно: ты знал, что именно ты ставишь, откуда оно, и зачем.

Потом появились Bower, npm, yarn — и стало проще. Одной командой можно было добавить любую зависимость. Но с этой простотой пришла и новая проблема: стало слишком легко установить что-то не то.

Теперь в игру вступил ИИ. Он подсказывает код, генерирует функции, предлагает решения. Иногда вместе с ними — и зависимости: import x from 'some-lib'. Всё бы ничего, но...

1. LLM генерирует код, который подключает внешние пакеты — это ожидаемо.
2. Иногда эти пакеты вымышленные, они не существуют.
3. Злоумышленники это поняли и публикуют настоящие пакеты с такими "выдуманными" именами.
4. Теперь LLM генерирует код, который подключает вредоносное ПО — и оно успешно устанавливается.

ИИ не различает добро и зло. Он просто делает то, что, по его модели, «похоже на правильное решение». А злоумышленники подстраивают реальность под эту модель.

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

Естественно, это не только о фронтенде. Проблеме в том или ином виде подтверждена любая система пакетов. И даже операционные системы! Кастомные репозитории не вчера придумали.

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

Осторожнее, котаны.

#ai #vulnerability

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

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

ntfy.sh — минималистичный и мощный сервис пуш-уведомлений, который идеально справляется с этой задачей.

Отправить уведомление можно одной строкой:

curl -d "Бэкап завершён успешно ✅" ntfy.sh/my-topic

А теперь представь: ты ставишь это в конце крон-джоба или CI-пайплайна, и тебе тут же прилетает пуш на телефон, в браузер или куда угодно.

Особенности:

> Поддержка Web, iOS и Android (через приложения)

> Подписка на топики через браузер или curl

> Можно отправлять заголовки, приоритеты, вложения

> Есть self-hosted режим (на Go, легко разворачивается)

> Поддерживает MQTT и WebSockets

🔐 Безопасность? Можно настроить basic auth и TTL сообщений. Но важно понимать, что в бесплатной версии сервиса топики не резервируются, являясь по факту паролями. Security over obscurity, но что делать.

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

Пример с заголовком и высоким приоритетом:

curl -H "Title: Внимание!" \
     -H "Priority: urgent" \
     -d "На сервере заканчивается место!" \
     ntfy.sh/my-topic

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

👉 Официальный сайт: https://ntfy.sh/

#push #notification

#фишка дня

Селекторы атрибутов штука довольно удобная если правильно их использовать. Особенно хорошо они раскрываются с aria-атрибутами вроде aria-hidden, aria-pressed и так далее.

Да даже элементарные кнопки соцсетей весьма неплохо выглядят в виде data-social=“twitter”, чтобы не замусоривать пространство классов. Или вообще a[href*=“twitter.com”], если собрались на символах экономить.

В React строить API компонента на data-атрибутах тоже выходит весьма и весьма элегантно.

Вот только есть нюанс: селекторы атрибутов — регистрозависимы. Чтобы сделать их независимыми — стоит добавить модификатор i, то есть:

[data-social=“twitter” i]

Свалидирует

<div data-social=“Twitter”>
<div data-social=“twitter”>
<div data-social=“TWITTER”>

…ну и если хотите ровно наоборот — есть модификатор s. Но оно совсем новое и для частных случаев, которые по-умолчанию и так регистронезависимы (вроде type, checked, disabled).

#attribute #css #case #бородач

#статья дня

Ох, что тут принесло!

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

Далеко ходить не надо: Google Sheets, Google Docs, Miro, да даже Microsoft в онлайн и не очень офисных пакетах это позволяет. И, кстати, онлайн игры это тоже самое что ни на есть приложение для совместной работы. Особенно это интересно в файтингах, но об этом потом.

Общее название структур данных для организации подобного это CRDT. Conflict-free Replicated Data Type, или, по-русски, бесконфликтная репликация данных.

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

Встречайте: https://jakelazaroff.com/words/an-interactive-intro-to-crdts/

Статью не назвать простой, а реализацию — промышленной, но оно работает и очень впечатляет! Всем рекомендую, котаны.

#crdt #algorithm #бородач