#фишка дня

Применяя position: sticky к заголовку таблицы, мы получам прекрасную и понятную реализацию прилипшего заголовка.

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

А решение простое!

Добавляем margin-bottom на thead размером во всю высоту строки:

margin-bottom: calc(1lh + 20px);

Обратите внимание, 1lh — это буквально единица измерения, позволяющая обратиться к значению интерлиньяжа, aka высоте строки. Ну а складывать удавов с попугаями мы умели всегда.

Да, совсем не очевидно, зато выглядит таблица теперь бомбически: https://codepen.io/alinaki/pen/JojeGMY?editors=0100

#table #sticky #position

Не ожидал, что телега не останется в стороне от 1 апреля.

Вы уже видели эту офигительную анимацию лайка?

#1апреля

#новость дня

Я терпел с 26 марта! Потому что именно 26 марта Google должны были объявить о запуске Google Chrome 135, в котором поддержка кастомизации нативного select перестаёт быть экспериментальной!

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

И вот, наконец, долетело и мне! Срочно тестирую: https://developer.chrome.com/blog/a-customizable-select

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

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

Впрочем, на этом преимущества заканчиваются.

А вот в новом селекте можно даже HTML писать в option!

Есть даже дока на MDN: https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select

Поддерживается, правда, пока только в Chrome, потому что реализован новый селект на CSS anchor positioning API.

Крайне рекомендую сначала с этим API ознакомиться, потому что ни одна из демок гугла не умеет правильно определять границы экрана :)

Мы в @htmlshitchat попробовали собрать демо: https://jsbin.com/yizawexeyi/edit?html,css,output

Ну такое, если честно. Могли бы хоть для презентации постараться и применить position-try на выпадающий список.

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

Кроме заказчиков.

#select #custom

#фишка дня

Поменяли какую-то настройку в VS Code, и теперь всё сломалось?

Вообще не проблема! Вводим в поиск @modified и — вуаля — видим все настройки, отличные от дефолтных!

Да, вторым вариантом, конечно же, будет нажать иконку с переворачиванием листа и, буквально, увидеть изнанку настроек — JSON-файл. Тоже отличный вариант.

#vscode #settings #json

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

Microsoft — а точнее, Билл Гейтс собственной персоной — опубликовали исходный код Altair BASIC — своей первой программы!

4 апреля 1975 года Билл Гейтс и Пол Аллен основали Microsoft, а их первым продуктом стал интерпретатор BASIC для компьютера Altair 8800.

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

Проект появился благодаря объявлению в журнале Popular Electronics, которое вдохновило Гейтса и Аллена написать интерпретатор, ещё даже не имея самого компьютера. Код был дописан в буквальном смысле в полёте в Альбукерке, где находилась компания MITS, производитель Altair 8800. Там же состоялась и первая демонстрация программы, которая, к счастью, заработала сразу.

В честь 50-летия Microsoft Билл Гейтс решил поделиться этим историческим кодом.

Эффекты на тексте, конечно, потрясающие. Надо бы потырить :)

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

Но фиг бы с ним, повозюкайте и потыкайте в блоки текста мышкой! Красота же.

Да и сам процесс создания Altair BASIC хорошо задокументирован, и даже телефильм «Пираты Кремниевой долины» отлично передаёт атмосферу той эпохи, так что этот проект можно просто рассматривать как эстетический жест, дань уважения истории.

Визуализация и статья: https://www.gatesnotes.com/microsoft-original-source-code

Ах, да. Сами исходники даны в, простите, PDF! Но это даже забавно.

#microsoft

#статья дня

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

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

И решение на самом деле очевидно! Засирать консоль браузера!

Ну серьёзно, если человек туда попёрся — наверное, он что-то хотел увидеть? Так давайте предоставим такое удовольствие!

А секрет прост: консоль браузера поддерживает CSS. А значит, можно сделать всё, что угодно. Включая анимирование SVG. Или даже буквально анимированные SVG.

То есть представьте, что наше сообщение — это некий блок. В него можно вставить фоновый SVG, как анимированный, так и обычный. А уже в SVG можно писать свои стили в теге style.

Какой-то глитч на бесконечные стили. Вот бы с деньгами так.

Как-то так:

console.info(
  '%c ',
  `padding-left:750px;padding-top:200px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 750 200'%3E%3Cstyle%3E text %7B font-family: sans-serif; font-weight: 100; fill: %23d8eaff; %7D %23stop1 %7B animation: recolor 40s linear infinite alternate %7D %23stop2 %7B animation: recolor 40s -32s linear infinite alternate %7D @keyframes recolor %7B 0%25 %7B stop-color: %23388bee; %7D 20%25 %7B stop-color: %2324c6dc; %7D 40%25 %7B stop-color: %23af74fd; %7D 60%25 %7B stop-color: %23c020d9; %7D 80%25 %7B stop-color: %23514a9d; %7D 100%25 %7B stop-color: %23053ece; %7D %7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='grad'%3E%3Cstop id='stop1' offset='0%25' stop-color='%23388bee'%3E%3C/stop%3E%3Cstop id='stop2' offset='100%25' stop-color='%23514a9d'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='750' height='500' fill='url(%23grad)'%3E%3C/rect%3E%3Ctext text-anchor='end' font-size='50' x='725' y='125'%3E thanks for %3C/text%3E%3Ctext text-anchor='end' font-size='50' x='725' y='175'%3E stopping by %3C/text%3E%3C/svg%3E")`
);

Вы любите простыню кода в сообщениях, я знаю :)

Статья на тему: https://frontendmasters.com/blog/console-delight/

Демо, сконвертировал из обычного кодпена: https://codepen.io/alinaki/pen/BaXPmoV

Естественно, можно просто на файл сослаться, не обязательно столько кода упихивать :)

Если хотите делать своё, вам пригодится конвертер от Йоксель: https://yoksel.github.io/url-encoder/

#css #svg #devtools #console #fun #бородач

#заметка дня

Не знаю, как вас, но меня очень раздражает то, что в React Router состоянием скролла надо управлять самостоятельно.

Перемещаешься по роутам, а скролл на месте остаётся. Ну типа, што.

К счастью, решение что для v5 React Router, что для v6 одинаковое:

function ScrollToTop() {
    const { pathname } = useLocation();

    useLayoutEffect(() => {
        document.documentElement.scrollTo(0, 0);
    }, [pathname]);

    return null;
}

И потом вставляете его в контекст роутинга:

<BrowserRouter>
    <Routes>
         ...
    </Routes>
    <ScrollToTop/>
</BrowserRouter>

Но вот я это всё по привычке написал и решил всё-таки посмотреть документацию. Ну бывает. И вот что там: https://reactrouter.com/en/main/components/scroll-restoration

Восстановление скролла теперь поставляется из коробки! И умеет гораздо больше, чем просто скроллить наверх. Правда, требует изменения корневого роутера. Благо, это несложно.

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

По-моему, очень круто. И хорошо, что решение официальное.

#react #router #бородач

#ссылка дня

Я исчезающе мало пишу о Vue.js, потому что в своей жизни использовал его лишь в одном проекте.

Поэтому, если кто-то хочет присоединиться и периодически писать в канал что-то о Vue.js — милости просим.

Тем не менее, нельзя пройти мимо ставшего поулярным в последние несколько лет тренда State of...

И сегодня это — кто бы мог подумать — State of Vue.js Report 2025.

1. Почти все, кто попробовал Vue.js, остаются с ним: в одном из отчётов сообщалось, что 96% разработчиков, использующих Vue.js, планируют продолжать его использовать в будущем. Людям нравится!

2. Документация Vue.js получила высокую оценку: 60% опрошенных отметили качество документации как одно из главных преимуществ фреймворка. Тут, кстати, да. До появления новой версии, документация по React отставала от Vue.js на световые десятилетия.

3. Широкая интеграция с различными бэкенд-технологиями: Vue.js часто используется вместе с PHP (53% случаев) и Node.js (45% случаев). Это, кстати, забавно. У нас все internal tools — на Vue и пишутся бакенд-разработчиками.

4. Быстрый рост популярности: в 2022 году, после того как Vue 3.0 стал стандартом, количество загрузок npm увеличилось в 4 раза, достигнув в среднем 800 000 в неделю. Ну, заслуженно.

5. Постоянное развитие экосистемы: в 2024 году были отмечены значительные улучшения в инструментах разработки, таких как официальное расширение для VS Code и DevTools для Vue и Nuxt, что значительно улучшило DX.

State of Vue — это не просто отчёт. Это способ собрать обратную связь, понять, как меняются потребности разработчиков, и построить будущее фреймворка вместе с сообществом. Именно благодаря таким инициативам Vue остаётся живым, активно развивающимся проектом.

Читая весь отчёт, можно, теоретически, даже узнать что-то новое! Например, какой нынче самый модный способ для менеджмента стейта.

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

#vuejs #stateof

#заметка дня

Как мы все знаем, в JavaScript есть две формы «пустоты»: undefined и null.

Но почти весь современный фронтенд давно выбрал сторону.

null — это ошибка на миллиард долларов, о которой пожалел даже его создатель, Тони Хоар. Он добавляет путаницу, ломает API и заставляет писать лишние проверки.

Почему null — плохая идея:
Разные API возвращают то null, то undefined, то оба.

Это неясно, это ошибки.

✅ TypeScript-гайд от Microsoft прямо говорит: используйте undefined, избегайте null.

✅ В TSLint null запрещён по умолчанию (`no-null-keyword`).

✅ Правила ESLint Unicorn (да, название неслучайное) — тоже пропагандируют борьбу с null в пользу чистого, предсказуемого кода.

✅ В крупных экосистемах, например, как у Prisma, null создаёт баги и недопонимание в API (issue #572)

✅ undefined — поведение по умолчанию в JS для необъявленных свойств и пустых объектов.

✅ undefined выигрывает даже в JSON. Когда ты сериализуешь данные:

null остаётся в объекте:

{ "a": null }

а undefined просто исчезает:

{ "a": undefined } → { }

В реальных системах это даёт выигрыш в размере и читаемости. Пример из продакшена: объект с миллионом null весил 13.9 MB, а с undefined — всего 21 байт. И если ты работаешь с Node.js и хорошо контролируешь свои API — undefined тебе только на руку.

❌ Да, из-за того, что множество систем до сих пор оперирует null, и даже DOM API возвратит null при отсутствии элемента (ноды), выбор становится не настолько простым. К счастью, мы можем использовать optional chaining (?.) и nullish coalescing (??) чтобы снизить вероятность конфуза.

Кстати, даже столь любимый мной Effector ещё не так давно пропагандировал null для пустых сторов, но с недавнего времени разрешил undefined (в своей манере, там сложная концепция).

Итак, null — это рудимент. Он создаёт больше проблем, чем решает. undefined уже делает всё, что нужно — чище, предсказуемей и легче.

Пора выбрать сторону 🦄

P. S. человек, который заставил меня принять сторону сейчас, наверное, сидит и хихикает. Но в целом, единственное, что у меня есть в защиту null — это наш бакенд на PHP и MySQL 🤷

#js #ts #eslint #null

#фишка дня

Я долгое время не понимал, нафига нужен 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