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

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

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

Что-то я насмотрелся на мучения семьи и коллег в отношении составления резюме, и решил поискать, а нет ли готовых бесплатных решений?

Кроме экспорта из линкедина, конечно.

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

С одной стороны, можно и Google Docs обойтись. С другой, процесс оттачивания резюме в процессе поиска работы может, мягко говоря, раздражать. HR'ы нынче капризные, хотят опыт и баззворды только под нужную вакансию, а больше ничего не хотят.

И такой инструмент нашёлся! Reactive Resume: https://github.com/AmruthPillai/Reactive-Resume

Открытый проект на React и Nest.js на бакенде. Можно запустить локально, можно захостить. А можно воспользоваться и сайтом: https://rxresu.me/

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

В общем, счастье соискателя — вот оно, рядом. Да и к контрибушенам проект открыт :)

#nestjs #react #resume

#заметка дня

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

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

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

И ему вроде даже дали ответ на StackOverflow: https://stackoverflow.com/questions/10744645/detect-touchpad-vs-mouse-in-javascript

Приложу сюда кратчайший сниппет:

  var isTrackpad = false;
  if (e.wheelDeltaY) {
    if (e.wheelDeltaY === (e.deltaY * -3)) {
      isTrackpad = true;
    }
  }
  else if (e.deltaMode === 0) {
    isTrackpad = true;
  }
  console.log(isTrackpad ? "Trackpad detected" : "Mousewheel detected");
}

document.addEventListener("mousewheel", detectTrackPad, false);
document.addEventListener("DOMMouseScroll", detectTrackPad, false);

И пример: https://jsfiddle.net/ucLe3hLa/

Вот только из мышей у меня имеется Logitech MX Master 3 и её колёсико... слишком плавное. Даже в дискретном режим. Браузер опять же определяет её как тачпад :)

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

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

#mouse #touchpad #event

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

AI-парсинг (скрейпинг, скраппинг) сайтов набирает обороты, но классические утилиты никто не отменял.

И среди таких утилит очень выделяется pipet: https://github.com/bjesus/pipet

Создаем pipet-файл:
curl https://news.ycombinator.com/
.title .titleline
span > a
.sitebit a

Ну и запускаем:
pipet hackernews.pipet

Красота? Не то слово. Более того, утилита умеет рендерить сразу в шаблоны, напоминающие Mustache:

<ul>
{{range $index, $item := index (index . 0) 0}}
<li>{{index $item 0}} ({{index $item 1}})</li>
{{end}}
</ul>

Ясное дело, никто не отменяет и ИИ прикрутить, если так надо :) Ну а вообще, поддерживаются пайпы, потому результат любой строки конфигурации можно пропустить через что угодно вообще. Да и запуск возможен не только curl-ом, но и Playwright.

В общем, я впечатлен. Надо брать.

#go #parser #scraping

#такое дня

Как выбесить коллег одной строкой?

А сейчас я покажу вам...

Автор

#фишка дня

Новое — это хорошо забытое старое.

Многие любят это повторять, но не всегда — демонстрировать. И уж тем более — на ярких примерах.

Вот как вы сейчас делаете скруглённые углы на элементах?

Наверное, просто прописываете border-radius и всё, да? Даже не задумываясь, что годах так в 2006-2012 это правило не то чтобы не работало кроссбраузерно, а его и не было вообще.

Как же делали углы? А очень просто, CSS-спрайтом. Нарезали картинку скруглённого прямоугольника на 4-9 частей в зависимости от задачи и распихивали в нужные места. Пруф: https://bavotasan.com/2009/simple-rounded-corners-with-a-css-sprite/

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

И я сейчас даже не про вёрстку писем

Правда, сейчас всё чаще для этой цели используются SVG- и контурные маски вообще.

Ладно, к чему это я такое большое введение выдал?

Тут по соцсетям в очередной раз прокатилась ода скруглённым углам на технике Apple. Как они все сочетаются и так далее. И что у них даже название своё есть: squircle.

Гусары, молчать

Вот, мы обсуждали тут: https://www.tg-me.com/htmlshit/1258

И да, простое скругление на фоне сглаженного смотрится... грубовато.

Итак, вашему вниманию столь хорошо забытое старое: плагин сглаженных углов для Tailwind!

Вот: https://github.com/gtokman/corner-smoothing

Если зайти в код плагина, который на самом деле ни что иное, как просто описание CSS-класса, а значит, может быть использован кем угодно, мы найдём там тот самый спрайт, маску, если угодно, на SVG: https://github.com/gtokman/corner-smoothing/blob/main/masks/squircle.svg

Как-то так:

.continuous-corners {
  mask-border: url("./[email protected]") 49% fill / 75px;
}

А чтобы не гадать, каков результат работы плагина, можно посмотреть оригинальный пример: https://github.com/robb/Continuous-Corners-CSS

Или описание спецификации на mask-border на MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border

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

#css #squircle

#фишка дня

Как заполнить фон целым количеством, например, кружочков или цветков?

Ну, вдруг, вы работаете в Маримекко

Очень просто! Используем background-repeat: space.

Работает аналогично флексовому space-between

И пример от Аны Тюдор: https://codepen.io/thebabydino/pen/RwXvryZ

#css #background #fill #бородач

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

Не так давно мы с вами использовали 3D-преобразования в CSS для эффектного выбора персонажа: https://www.tg-me.com/htmlshit/2969

Тогда получилось неожиданно хорошо. Но пришло время для настоящих 3D-моделей!

Сходу демо: https://codepen.io/RAFA3L/pen/raBJjgO

Тут используется веб-компонент <model-viewer>: https://modelviewer.dev/

Атрибуты компонента схожи с тегом video, а JS API максимально простой, да и чаще всего нужна работа с «орбитальной» камерой, как в кодпене выше.

Есть поддержка VR и XR, но я, если честно, от этого совсем далёк :) Поддерживается смена текстур, освещения и теней, установка сцены.

Норм? По-моему, норм :)

#3d #component #webgl

Когда в последний раз вы трогали свои сиксели?

Ладно, кроме шуток. Оказывается, в консоли можно смотреть картинки! И в высоком качестве. И давно.

Узнал случайно, когда смотрел видео про DEC Alpha. Там описали странный формат — SIXEL.

📌 Что это такое?

Этот формат придумали в 1983 году для DEC-принтеров и терминалов вроде VT240. Он позволяет кодировать растровые изображения в текстовом виде с помощью специальных escape-последовательностей.

Последовательности состоят из колонок по 6 пикселей, отсюда и название — six pixels.

Тогда это было нужно, чтобы выводить графику без сложных GUI. А теперь SIXEL неожиданно полезен в терминалах, где можно без сторонних приложений просматривать картинки прямо в консоли!

🖼 Как смотреть картинки в терминале?

👉 Самый простой способ — lsix, это ls, но для миниатюр:

brew install lsix # macOS
sudo apt install lsix # Debian/Ubuntu Linux

А дальше просто запускаем:

lsix

и терминал покажет миниатюры всех картинок в папке. Работает в iTerm2, XTerm и других терминалах с поддержкой SIXEL.

🔄 Конвертация изображений

Для работы с этим форматом есть libsixel, который позволяет преобразовывать обычные изображения:

brew install libsixel
img2sixel myimage.png

А если у вас установлен ImageMagick, можно делать так:

convert myimage.png sixel:- #

Конвертирует и сразу выводит в терминал.

Если уже есть картинка в формате sixel, можно вывести её простым cat.

❓ Поддержка в эмуляторах терминала

Есть список совместимых на сайте:
🔗 https://www.arewesixelyet.com/

Сразу скажу, что стандартный терминал в macOS — не умеет.

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

В общем, когда думаешь, что знаешь всё о графике, а потом узнаёшь, что кроме пикселей и вокселей есть ещё и сиксели! 😄

#console #images

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

Дизайнеры в последнее время очень полюбили градиенты. Особенно ненаправленные.

Градиенты как элемент оформления. Градиенты как плейсхолдеры. Градиенты как идея.

И вот вроде есть у нас продукты, исповедующие идеологию LQIP (Low Quality Image Preview), о которых я писал не так давно, но многим этого мало и охота точной настройки. Особенно если дело касается mesh-градиентов (по сетке, или, проще говоря, ненаправленных).

И тут нашёлся такой инструмент для генерации и настройки градиента по фото! Буквально, так и называется: https://photogradient.com/

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

Но для нагруженного проекта я предпочту LQIP или SQIP, ссылку на которые дал выше.

#gradient #tool #mesh #бородач

#фишка дня

Эмодзи вместо курсора? Нет ничего проще! Смотрим КДПВ и, конечно, пример: https://codepen.io/alinaki/pen/oNPpQrQ

Конечно, через SVG можно и более интересные курсоры создавать, только придётся через base64 кодирование прогонять: https://yoksel.github.io/url-encoder/

Ну а конкретно для эмодзи-курсоров имеется целый инструмент: https://www.emojicursor.app/

Всем 😜🙈🤡🤖, котаны!

#css #svg #cursor #emoji #бородач

#немогумолчать дня

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

Человек прошел путь от моего вопроса лет семь назад: «Накой тебе сдался битрикс? Не ломай себе жизнь!» до тимлида. И стоял у истоков канала и всячески поддерживает до сих пор.

Накидайте ему сердечек там штоле ☺️ Будет мой ему такой подарок 💝

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

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

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

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

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

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

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

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

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

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

#css #flex #layout

#статья дня

Посмотрите на иллюстрацию. Я не буду говорить: "Ничего интересного не замечаете?", — ну просто потому что в самом коде ничего интересного нет. Секрет кроется в подсветке кода.

И суть в том, что подсветка кода сделана... шрифтом.

Кроме шуток, я когда это увидел, я подумал "ну точно какой-то финн упоролся". Есть у финнов такое направление в дизайне, извращение над шрифтами называется. Вот, например, шрифт, который становится тоньше из-за изменения климата: https://kampanjat.hs.fi/climatefont/

И да!

Автор шрифта — Хейкки Лотвонен. И он буквально выжал всё возможное из фишки COLR (это чуть больше чем лигатуры на стероидах) стандарта шрифтов OpenType: https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/

Статья не только рассказывает о возможностях шрифта, но и погружает в понятие COLR: палитра, правила совмещения, лигатуры.

Поддерживаются HTML, CSS и даже JavaScript. Более того, можно перегружать цвета, получая свою собственую тему!

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

Есть обсуждение на HackerNews, вдруг кому интересно.

И CodePen с демо: https://codepen.io/argyleink/pen/GRbyNNv

Подробное описание технологии COLR от разработчиков Google Chrome: https://developer.chrome.com/blog/colrv1-fonts

В общем, Финляндия это не только озёра и Linux, но и шрифты. Теперь и вы знаете.

#opentype #fonts #colr #бородач

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

Зачем писать !(a && !b && c >= 10 && d !== e), если можно !a || b || c < 10 || d === e?

Ответ на эти и другие вопросы прост: «Потому что не подумал».

Но думать — сложно. И не всегда нужно. Поэтому в IDE от JetBrains встроен преобразователь логических вырадений по законам де Моргана.

А тем, кто предпочитает быть свободным, приходится искать иные решения.

Иногда — даже думать.

И тут есть вариант, откуда не ждали: правило для ESLint!

ESLint Plugin De Morgan: https://github.com/azat-io/eslint-plugin-de-morgan

Запросто преобразует ваши const value = !(a || b !== c) в const value = !a && b === c.

В плагине два правила:

- no-negated-conjunction
- no-negated-disjunction

Все правила имеют автофикс. У плагина нет зависимостей. Поддерживает как современный, так и легаси формат ESLint конфигов.

Твиттер автора с анонсом: https://x.com/azat_io/status/1888874193007132762

Пользуемся, котаны!

#boolean #eslint #logic

#статья дня

Эффект frosted glass — матового стекла, а не замороженного, как вы могли бы подумать — последнее время довольно популярен.

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

Джош Комо решил подойти к этой проблеме серьезно: https://www.joshwcomeau.com/css/backdrop-filter/

Что он заметил?
Когда смотришь сквозь настоящее матовое стекло, размытие неравномерное:
Чем дальше объект за стеклом, тем сильнее он размывается.

Блики и яркие детали распространяются по стеклу, создавая эффект светящегося ореола.

В итоге он решил применить фильтр для гораздо большей части изображения, а остальное — скрыть

маской: 

  .backdrop {
    position: absolute;
    inset: 0;
    height: 200%;
    backdrop-filter: blur(16px);
    mask-image: linear-gradient(
      to bottom,
      black 0% 50%,
      transparent 50% 100%
    );
  }

Звучит страшно, но на самом деле всё достаточно просто. В статье объясняются как базовые принципы использования фильтров и масок в CSS, так и неожиданные их комбинации.

#css #filter #glass

#ссылка дня

Адам Аргайл (Adam Argyle) — деврел в команде Google Chrome — уже давно в своём блоге https://nerdy.dev/ ведёт раздел Nerdy Notebook. Собирает разные техники создания компонентов и эффектов.

И одно из последних обновлений там — это большой сборник эффектов появления по скроллу! ScrollAnimation API в CSS: https://nerdy.dev/notebook/scroll-driven-animations.html

z-stack вариант шикарный вообще.

Ну и, естественно, есть описание техники.

Нелишним будет напомнить, что работает ScrollAnimation API пока только в Chrome и Safari TP. Но работа идёт!

#css #scroll