#фишка дня

Пишешь чат или выводишь данные лога в консоль и хочешь чтобы каждое новое сообщение снизу было видимым?

Ни слова больше! Спека has us covered: https://drafts.csswg.org/css-scroll-snap/#example-d0a2d86f

Удивительное дело, конечно, видеть примеры прямо в черновике спецификации :)

Вот, кстати, пример от Брамуса Ван Дамма (опять и снова, да): https://codepen.io/bramus/pen/PorRORd

Обратите внимание, за нас подумали, что пользователь может поскроллить наверх.

Работает везде, но иногда проявляется баг с пружинящим скроллом — Chrome теряет событие и "снапит" нас назад. Впрочем, не всегда.

Ну если вы за старое доброе решение на JavaScript, вот, держите хук от Vercel.

#scroll #snap #css

#фишка дня

О проблеме вертикального центрирования контента в CSS можно слагать легенды, писать статьи, делать целые сайты...

Даже грустно, что всё это подходит к концу. Ведь теперь у нас есть не только флекс и грид, но и такое простое и понятное align-content.

Да, это свойство с давних пор является базой во flex- и grid-моделях, но начиная с Chrome 123, Firefox 125 и Safari 17.4 поддерживается и в — 🎉 — блочной модели!

.container {
  align-content: center;
}

Демо: https://codepen.io/alinaki/pen/ExBzeLW

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

#css #align

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

Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: https://t.iss.one/htmlshit/2516

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

А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/

Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?

Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.

Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.

#input #attribute #mobile #tool #бородач

#фишка дня

Концепция анимированных круговых лоадеров на SVG достаточно проста: берём две окружности, одну для фона, вторую для отображение прогресса, и анимируем значение атрибута stroke-dashoffset.

И вот этот самый сдвиг задаётся в рамках некого stroke-dasharray: массива точек (кривых, dash), которыми рисуется кривая.

С ним можно много забавного делать, но это потом.

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

const circle = document.querySelector('.spinner__circle');
console.log(circle.getTotalLength());

И я так постоянно делал. Ну, как, постоянно: лоадер как правило делается один раз на проект 🙂

Каково же было моё удивление, когда я обнаружил, что относительную длину кривой можно задать заранее! И не страдать ерундой с расчётом:

pathLength="100"
stroke-dasharray="100"
stroke-dashoffset="0"

И за это отвечает именно атрибут pathLength. Дальше же для простоты работы определяем dasharray и dashoffset круглыми значениями.

Ну и демо, конечно: https://codepen.io/alinaki/pen/oNXjEzz

Теперь, внимание, вопрос: почему часть атрибутов записывается через дефис, в kebab-case, а часть — в camelCase?

#svg #length #loader

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

Как сделать текст поверх картинки читаемым?

Те, кто смотрит сериалы с субтитрами, уже давно знает ответ: белый текст с темно-серой тенью.

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

Как подобрать цвет оверлея и прозрачность? Очень просто, воспользоваться вот этим инструментом: https://codepen.io/yaphi1/pen/oNbEqGV

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

#css #tool #a11y

#напоминание дня

Пользуясь случаем, напоминаю, что завтра, 19 августа в 20:00 МСК у нас пройдёт совместный с @acceleracio стрим, на котором я расскажу, как проходили мои зарубежные собеседования, а эксперты Acceleracio поделятся секретами того, как заполучить работу за границей.

⚡️Пост с подробностями: https://t.iss.one/htmlshit/3108

⚡️Бот для записи: @acceleracio_bot

Увидимся!

#фишка дня

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

Сидите вы такие в уютном месте, пьёте кофе, работаете на макбуках, с экранами высокой плотности... в итоге забывая, что клиенты-то ваши — на ThinkPad с разрешением 1366*768.

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

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

1. Используйте нецелые значения процентов для стоп-меток. Если честно, я в механизме не до конца разобрался, но это заставляет браузер размывать линию стыка: https://codepen.io/alinaki/pen/oNrKXpM

  background: linear-gradient(
    176deg,
    red,
    red 50%,
    black 50.3%
  );

2. Похожее решение — прибавить пиксель к стоп-метке: https://codepen.io/alinaki/pen/xxovGyz

  background: linear-gradient(
    176deg,
    red,
    red 50%,
    black calc(50% + 1px)
  );

Второе решение даёт больший контроль над качеством размытия, потому что под разные плотности экранов можно давать разные значения. Например, если плотность экрана x2.5, делим наш несчастный пиксель на 2.5 и получаем ещё более красивую картинку на экранах высокой плотности (хотя мне не очень уже ясно, зачем).

P. S. естественно, Telegram зашакалил картинку на 10 шакалов из 10. Так что ползите смотреть кодпены, дамы и господа.

#css #trick #gradient #smooth

Мы на связи, заходите в эфир!

Чтобы услышать мою историю поиска работы и обсудить, как сейчас с трудоустройством за границу!

Подключиться можно ЗДЕСЬ

Спасибо большое всем участникам стрима и отдельно тем, кто задавал вопросы!

Завтра выкачу записи. Есть и видео, и просто аудио, как кому удобно 👍

#фишка дня

Отладка в Chrome только что стала проще, а вы и не знали!

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

Достаточно открыть девтулзы и жмакнуть по чекбоксу Emulate focused page на вкладке Rendering или Elements.

Как-то так:
https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page

Очень уютно!

#chrome #devtools

#стрим дня

Итак, запись вчерашнего стрима.

1. Мой путь к получению оффера в Финляндии, обсуждение необходимого уровня английского языка
2. Презентация @acceleracio (00:31:00)
3. Ответы на вопросы: Cover Letter, соответствие уровня занимаемой позиции, поиск работы в России (01:00:00)

Аудиоверсия и слайды в комментариях.

P. S. Ничего себе, в телеге распознаются таймкоды!

#статья дня

В заметке про работу с отменой запросов в React Query я лишь косвенно упомянул такую потрясающую штуку, как Abort Controller.

Зачем он вообще нужен?

Можно перестать слушать события, отменить ненужный запрос на сервер (и даже в девтулзах он пометится как canceled), отменить транзакцию, отменить вообще всё, что отменяется, да ещё сделать это стандартным способом!

Документация на MDN крайне скудна и не описывает и половину вариантов применения. Поэтому, нужно что-то ещё.

Про отмену событий мы уже писали, про React Query я упомянул выше... так что давайте для остальных примеров возьмём свежую статью Артёма Захарченко: https://kettanaito.com/blog/dont-sleep-on-abort-controller

1. Уже ставшие классическими примеры отмены событий и запросов
2. Отмена чего угодно вообще
3. AbortSignal.timeout для отработки, внезапно, таймаутов
4. AbortSignal.any для ситуаций, когда сигнал может поступить от разных контроллеров.

Учитывая, что для работы с Google AppsScript API у меня имеется самописный преобразователь коллбэков в промисы, мне и самому стоит дополнить реализацию поддержкой Abort Controller.

Так что статья как раз вовремя.

#javascript #abortcontroller

#статья дня

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

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

Итак, чтобы вынести рендеринг в неблокирующий режим, в React имеются два хука: useTransition и useDeferredValue. И сегодня речь пойдёт о первом.

Конечно, можно просто посмотреть видеоиллюстрацию от Алекса Сидоренко, но и документация очень даже исчерпывающая: https://react.dev/reference/react/useTransition

Выглядит интересно? Не то слово! Но...

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

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

Зато без блокировки. Гении, не иначе.

И по этому поводу имеется статья Нади Макаревич: https://www.developerway.com/posts/use-transition

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

В интересные времена живём.

#react #concurrent