#фишка дня

Накидали секций, поставили к ним якоря, поставили ссылки вида #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 #бородач

#такое дня

Меня одного задолбали недоделанные технологии?

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

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

1. position: sticky

Мы его ждали много лет. С таблицами правило стало работать только после того, как в Chrome полностью движок таблиц переписали. А теперь... а теперь ещё несколько лет будем ждать, чтобы получить возможности навесить нужные стили на «прилипший» элемент. Слухи о псевдоклассе :sticked так и остались слухами.

Что мы делаем? Конечно же считаем скролл ручками!

2. element.scrollIntoView

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

Вот только где offset, я спрашиваю? Почему нет такой простой вещи?

Но ведь есть scroll-margin-top, скажете вы...

Ага, вроде и есть. Но у меня нифига не вышло. А что если мне нужен разный в зависимости от ситуации? А если динамический? Что если у меня на одном варианте AB-теста есть sticky-заголовки, а в другом — нет?

Что мы делаем? А опять ручками:


const line = document.querySelector(`[data-id=${id}]`);

if (line) {
const p = line.getBoundingClientRect();
window.scrollTo(p.left, p.top + window.scrollY - 40);
}


Раздражает. Зачем таким вообще заниматься?

Ну выход на самом деле только один — участвовать в обсуждениях. Или заткнуться.

#css #whining #бородач

#заметка дня

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

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

Так вот, семантически вкладывать div в a в 2023 году весьма верно. А вот вкладывать div в button — уже нет 🙂 Потому что button принимает только фразовый контент, коим div не является. Ссылки даны на кодпен, копируйте оттуда в валидатор и смотрите сами.

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

И решение это — растянуть псевдоэлемент, принадлежащий ссылке или кнопке, на весь контейнер: https://codepen.io/IhorPower/pen/YzRqzyL (пример от подписчика).

Чуть позже разберем бенефиты такого решения, а пока доброе утро, котаны :)

#css #trick #a11y