#фишка дня

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

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

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

Наверное, просто прописываете 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

#заметка дня

Джордж Моллер (George Moller) — техлид в Shopify — предлагает интересное решение одной наболевшей в React проблемы. И проблема эта — ререндер всех компонентов, зависящих от некоего контекста.

Ну просто потому что useContext сработает на любое изменение данных в контексте, очевидно.

И решение это — кастомный хук useContextSelector: https://github.com/dai-shi/use-context-selector

И вроде всё бы ничего, вот только если вам пришлось это делать — вы используете контекст не очень верно. И лучше бы перейти на Jotai, Zustand, Effector, Reatom и так далее. На любой современный стейт-менеджер, короче говоря.

Контекст — он для чего-то глобального. Тема, данные пользователя, информация о лицензии. Плюс, совсем не обязательно хранить огромный контекст на всё приложение. Можно иметь много контекстов на разные зоны ответственности — в этом же вся его прелесть.

Но если уж вы попали в подобную ситуацию — да, useContextSelector спасёт.

Хотя я бы не стал.

#react #context #hook

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

На правах пятницы!

Если надо выбрать любимый бесполезный эффект — то мой определённо будет глитч.

И вот есть библиотечка как раз для этого!

https://github.com/7PH/powerglitch

Она это делает совершенно потрясающим способом: объявляется набор полигонов для выделения маски, элемент будто нарезается на куски, а потом к ним применяются CSS-преобразования. Просто шикарно.

Я давно хотел сделать плеер. где обложка будет глючить в так музыке :) Настало время!

#css #glitch #effect

#статья дня

Если среди моих подписчиков есть те, кому за 30, то они могут вспомнить, что 8 и 16-битные игры на ЭЛТ-телевизорах выглядели совсем не так, как их нынче имитируют. Ни о каком пиксель-арте речи не шло, всё было достаточно смазано, чтобы казаться гладким и настоящим. А пиксель-арт, собственно, распространился с ЖК-экранами и модой на ретро.

А всё потому что из особенностей и недостатков технологии делали преимущество! Нативное сглаживание, бесплатно!

К чему это я?

К тому, что набор квадратиков на иллюстрации это самый настоящий шрифт, использующий особенности технологии построения ЖК-экранов. В 1 пиксель шириной. Он так и называется: Millitext. Вот: http://www.msarnoff.org/millitext/

Но статья дня всё равно о другом.

Как происходит процесс рендеринга шрифтов вообще, что за этим стоит и почему это так сложно. И да, особенности ЖК играют в этом не последнюю роль, потому и вступление такое: https://faultlore.com/blah/text-hates-you/

Text hates you, котаны!

#font #rendering #бородач

#devtools дня

Одна из моих любимых фишек современного CSS — это функция clamp.

В переводе — зажим. И это буквально то, что она делает: зажимает некое значение в пределах двух других.

Ну, например, выражение:

width: clamp(250px, 50vw, 600px);

...задаст по-умолчанию ширину блока в половину ширины экрана, но не меньше 250 пикселей и не больше шестиста.

Удобно? Ну, не то слово. Со шрифтами вообще великолепно выходит! Вот инструмент, например: https://www.tg-me.com/htmlshit/902

Ну и пример с шириной: https://codepen.io/Ekaterina_Vu/pen/QWjxJvm

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

Но уже в Chrome Canary и скоро и в стабильных DevTools 134 нас ждёт адекватная нотация! С зачёркнутыми неиспользуемыми значениями:

width: clamp(250px, 50vw, 600px);

Счастье есть, котаны!

#css #clamp #chrome

#видео и #статья дня

Отгадайте за секунду, что это такое зелёное подсвечено на скриншоте Танков?

Да, это буквально игровой UI. А что если я скажу вам, что он написан на TypeScript и React?

А вы что думали, Реакт ограничивается только вебом и мобилками? Нет :) И Prabashwara Seneviratne (я не уверен, как его имя транслитерировать правильно) несколько лет назад как раз работал в отделении Wargaming в Праге над UI для World of Tanks.

И даже написал об этом статью: https://www.frontendundefined.com/posts/essays/pc-game-ui-react/

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

И таки да, вы не поверите, но там буквально свой кастомный браузер, поддерживающий лишь некоторые возможности HTML/CSS и JS.

Если лениво читать, автор не поленился выложить видео с конференции Web Expo 2022, где он рассказывает, в общем, о том же: https://www.frontendundefined.com/posts/talks/web-tech-game-ui/

#game #wot #react #ui