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

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

Ой, только не говорите, что я один тут верстаю вслепую.

Вашему вниманию Bramus Van Damme и его caniuse-cli: https://www.npmjs.com/package/@bramus/caniuse-cli

$ caniuse viewport-units
$ caniuse "viewport units"
$ caniuse @property

Имеется автокомплит для zsh.

Ну, консольные маньяки, перепись!

#cli #caniuse

#статья дня

Ну что, давайте хором назовём самый больной элемент из всего набора стандартных HTML-виджетов.

Конечно же это select.

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

Тем временем, пропозал кастомного select дошёл до Stage 2 в WHATWG, а это значит, пришло время расчехлять хотелки. Иначе останемся с чем-то очередным поломанным и недоделанным.

Естественно, инициатива здесь исходит от команды Chrome, вот свежий RFC: https://developer.chrome.com/blog/rfc-customizable-select

Кто не знает, что такое RFC — это, буквально, Request For Comments, запрос комментариев. Ваших, конечно, чьих же ещё.

Надо заметить, что раньше переиспользование select не предполагалось. Рассчитывали создать новый компонент — selectmenu, переименованный потом в selectlist. Но от идеи в итоге отказались.

Чтобы попробовать новый select нужен Chrome Canary 130 с включённым флагом #experimental-web-platform-features.

На Linux это, впрочем, Chromium Dev. Canary для нас не нашлось.

Ну, какие будут впечатления?

P. S. Есть форма в Google Forms для отправки этих самых впечатлений команде.

#css #select #custom

#фишка дня

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

Ни слова больше! Спека 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://www.tg-me.com/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://www.tg-me.com/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. Ничего себе, в телеге распознаются таймкоды!