#статья дня

Самая имбовая статья рунета на тему оптического выравнивания иконок: https://habr.com/ru/companies/badoo/articles/333992/

Математика не стареет! Вечнозелёная статья, люблю такие.

Что не так с выравниванием вообще?

Если расположить некоторые объекты по их геометрическому центру (например, по пересечению диагоналей описанного прямоугольника), то визуально будет казаться, что всё очень и очень плохо. Например, одно из оснований треугольника будет явно перевешивать (первый же пример в статье).

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

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

Я себе на случай смерти хабра статью даже сохранил. Надо, кстати, проверить, а что там в Figma.

А вот сервис для проверки соответствия визуального центра геометрическому: https://javier.xyz/visual-center

#optics #geometry

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

Или надо завести тег #компонент дня? Что-то я не знаю даже. Короче.

Если ты пользуешься VS Code (а кто нет? Я, кстати, переехал), да и вообще любым другим редактором кода, то наверное уже привык к разделенным панелям в интерфейсе. Как правило, тот же вскод можно не только делить как угодно, но и изменять размер панелей.

Итак, два кандидата: https://github.com/bvaughn/react-resizable-panels и https://github.com/devbookhq/splitter. Как вам будет удобно.

Первый гораздо мощнее, есть пример правильного подключения server-компонента и вообще Брайан Вон ровный тип 👌

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

#react #component

#фишка дня

Как подсказать пользователю мобильного устройства, что сейчас произойдёт при отправке формы?

Места на экране мало, ещё и клавиатура съест.

Очень просто! Использовать атрибут enterkeyhint!

Спека: https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute

Поддержка: https://caniuse.com/?search=enterkeyhint

Пользуемся!

#mobile #form #html #бородач

#фишка дня

Накидали секций, поставили к ним якоря, поставили ссылки вида #anchorName в навигацию, включили scroll-behavior: smooth; чтобы плавненько все было и...

...и ваша секция уехала под шапку ко всем чертям. Что же делать?

Спокойно. Есть три варианта.
1. Если ты живешь в 2012, можно подвинуть якорь вверх с помощью position: relative и отрицательного top. Или всячески играть полями. Но мы живем в 2023, так что...
2. scroll-padding-top на html (а часто, на родителя секций) или...
3. scroll-margin-top на любую из секцию, за которой якорь закреплен.

В чем отличие 2 от 3?

Ну, очевидно, в области применения. Разом на всех во 2 случае или индивидуально в 3.

Важно понимать, что на обычный скролл это не распространяется. Только якоря или snap: https://getpublii.com/blog/one-line-css-solution-to-prevent-anchor-links-from-scrolling-behind-a-sticky-header.html

#css #scroll #snap #anchor

#заметка дня

Чем отличаются auto-fit и auto-fill в гридах?

Отвечает Александр Друзь.

Функцию repeat используют чтобы не писать повторяющиеся определения колонок или строк. Помимо конкретного их числа, можно задать и автоматическое их заполнение при помощи пресловутых auto-fit и auto-fill, сравните на иллюстрации. Тут можно было бы и закончить :)

Так в чем же разница, словами? :)

При использовании repeat движок гридов создает столько колонок или строк, сколько вообще может уместиться в заданные рамки. Отличие fit от fill буквально в том, что fill задаст контенту минимально возможный размер, сохранив "фантомные", незаполненные, в примере, колонки. А fit — заполнит (впишет) контент, схлопнув те самые фантомные колонки.

В общем, всё довольно просто.

#css #grid #repeat

#дополнение дня

В чате и комментариях к посту о scroll-margin-top и scroll-padding-top был обнаружен один факт, который насколько очевиден, настолько же и внезапен.

В общем, как было сказано, scroll-margin отновится к элементу, в то время как scroll-padding — к контейнеру со скроллом, то бишь, к родителю.

Так вот, если у элемента установлен overflow: hidden, ни о каком положительном значении scroll-margin речи идти не может: отступ обрежется. Ну, почти как в случае со схлопывающимися отступами в блочной модели 🤯

При этом отрицательный отступ всё ещё возможен (Полина, привет), поскольку "смотрит" он внутрь элемента.

Чудны дела, в общем, котаны.

#статья дня

Две недели назад я писал о том, что мой бывший коллега Даниэль Ющик создал Stylelint-плагин, помогающий привнести Defensive CSS-практики в ваш процесс деплоя.

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

Впрочем, очень удачно подоспела и расширенная статья Даниэля об его плагине и в принципе о том, как настраивать Stylelint, включая демо-проект.

Собственно: https://blog.logrocket.com/linting-defensive-logical-css-stylelint-plugins

Линтуйте, котаны!

#css #defensive #stylelint

#codepen дня

А кому тут неожиданно уместных применений CSS 3D-преобразований?

Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!

Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO

Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).

Маги тут?

#css #3d #transform

#статья дня

Все любят хорошие статьи по SVG.

От базового понимания координат и viewBox, через transform к clipPath и его анимации с помощью GSAP. Вот так вот просто.

Каждый шаг стильно иллюстрирован и ёмко разжёван: https://www.cassie.codes/posts/swipey-image-grids/

#svg #viewbox #clippath #gsap #бородач

#игра дня

Глядите чо я откопал. По-моему, мы уже рассматривали все CSS-игры и игроподобные занятия, но этот ресурс больше похож на продвинутый #опрос.

Итак, встречайте: Guess CSS!

https://www.guess-css.app/

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

Делитесь результатами, котаны!

#css #game #quiz

#новость дня

Давайте я быренько, чтобы никого не задерживать: нативный CSS-нестинг вчера приземлился в Firefox Nightly!

Пруф: https://bugzilla.mozilla.org/show_bug.cgi?id=1835066

Codepen для проверки вашего любимого браузера: https://codepen.io/bramus/full/oNdrypM

Caniuse: https://caniuse.com/?search=css%20nesting

Ну и PostCSS-плагин, который я совсем скоро подключу и избавлюсь от ненавистного мне Dart Sass: https://github.com/postcss/postcss-nested

Остаёмся на связи, котаны!

#css #nesting

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

Про caniuse.com говорить никому уже не приходится, это база, которая должна появляться как только ты набрал "c" в адресной строке.

Но иногда кому-то из нас приходится верстать... письма. И вот тут начинается веселье.

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

Для таких случаев придуман https://www.caniemail.com/

Всё то же самое, что Can I Use", но про почту.

Больше никаких "а может?.." Определяете целевую аудиторию — и поехали верстать.

#email #css #html #feature #бородач

#статья дня

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

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

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

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

И вот поэтому статьи вроде "Breaking React Query's API on purpose" — это настоящая золотая жила. Кто бы мог подумать, что такие простые вещи как события onSuccess и onError на самом деле могут приводить к проблемам и их придётся объявлять устаревшими?

Рекомендую не только пользователям React Query, если что.

#react #query #js

⚡️ CockroachDB vs YDB vs YugabyteDB

Нашли ультимативный гайд по базам данных.

В статье:
• исследование БД на основе популярного бенчмарк-теста YCSB;
• «сравнение яблок и апельсинов» или небольшая ретроспектива в историю исследований баз данных SQL;
• проверка производительности БД на разных сценариях.

Есть ли одна лучшая СУБД SQL, узнайте по ссылке 😉

#совет дня

Буду краток.

Когда верстаете проект, расставляйте aria-label на интерактивных элементах сразу.

Хрен с ней, с доступностью. Просто потом не будете сидеть как я и заполнять action name для системы трекинга на каждый чих 😭

#бородач

#статья дня

В Chrome 114, вышедший вот буквально пару недель назад, приземлился крайне любопытный атрибут: popover. Что это такое? Давайте посмотрим.

Добавленный элементу атрибут popover превратит его в неблокирующий (об этом ниже) диалог, удобный для меню, выбора вариантов, уведомлений, или отображения вспомогательных элементов формы. Собственно, сразу пример кода:

<button popovertarget="pop">Click me</button>

<div id="pop" popover>
<p>Pew-pew!<p>
</div>

Что мы получаем из коробки:
- Никакого теребоньканья скриптов
- Никаких игр в z-index: 10000: всплывашке будет выдан свой слой
- Клик вне элемента скроет его (нативный onClickOutside)
- Захват фокуса и esc для закрытия

В отличие от dialog, как я уже сказал выше, всплывашка не блокирует взаимодействие со страницей и дополнительного контроля со стороны JS API не предоставляет. Dialog сильно старее и довольно спорен в целом.

В общем, читаем блог разработчиков Chrome:
https://developer.chrome.com/en/blog/introducing-popover-api/

#css #html #popover

#codepen дня

А давайте, вдогонку к предыдущей новости о появлении popover, взглянем на такой вот шикарный эффект удаления диалога 🙂

Гори всё синим пламенем! Эх, жаль в своё время на проекте, где это было уместно, я не шибко много знал о шейдерах.

Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.

Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa

Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂

Спасибо Ксении Кондрашёвой.

#webgl #shader

#ссылка дня

Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с SVG, символами...

Но вот типографика же не стоит на месте. Вариативные шрифты — уже реальность. Было бы глупо не применить их для иконок.

И таки да, встречайте, Material Symbols: https://material.io/blog/introducing-symbols

Вариативный иконочный шрифт от Google. Естественно, он есть на Google Fonts: https://fonts.google.com/icons

Естественно, вы можете скачать SVG и PNG.

Ну и куда же без плагина для Figma: https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols, позволяющего настроить и экспортировать иконки как душе угодно.

Меня, правда, забавляет целый ползунок на fill, если вы понимаете, о чём я. Вообще, с ползунками на Google Fonts всё очень плохо... но речь не о них.

К слову, nice touch: там присутствуют специальные символы для iOS, они вариативности не подвластны. Забавный жест.

#fonts #icons #google #material #бородач

#заметка дня

Очень много сказано на тему того, что использовать тип React.FC для функциональных компонентов React довольно неудобно, глупо и вообще странно: передача children была обязательной, нельзя было вернуть string, number, undefined (что поддерживается JSX так-то).

Самое странное, что он по-умолчанию был в create-react-app и вводил в ступор огромное количество разработчиков вне зависимости от их опыта: https://github.com/facebook/create-react-app/pull/8177

Начиная с TS 5.1 и React 18.1 использование React.FC безопасно и прозрачно, но рекомендованным способом пока, конечно, остаётся прямая типизация пропсов, смотрим PR выше.

В общем, don't overengineer it, котаны.

#react #fc #ts

#фишка дня

...для маководов.

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

defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'; killall Dock

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

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

P.S. а ещё доком можно управлять с клавиатуры, нажмите fn + ⌃ + F3 и дальше стрелочками.

P.P.S. есть разделитель поменьше!

defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="small-spacer-tile";}'; killall Dock

#mac #dock #feature

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

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

Оказалось, изобретать ничего не нужно — уже есть https://jsonhero.io/

Сгруппирует по категориям, покажет связанное, отобразит картинку.

Удобно.

#json #viewer #бородач