#фишка дня

Надоело угадывать высоту строки, чтобы текст стал высотой ровно в прописную букву? Say no more!

 line-height: 1cap;

И вы великолепны.

P. S. ещё более вы великолепны, если Safari версии больше 17.2 включительно.

#css

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

Дамы и господа, неправильно свёрстанный макет это x2 к срокам, потому что переделывать сложнее, чем делать изначально правильно.

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

#заметка дня

#css #html #pp #pixelperfect

Один из самых проблемных вопросов верстальщиков — не обязательно начинающих — это так называемый “пиксель пёрфект” (pixel perfect). Проще говоря, свёрстанный макет должен полностью соответствовать дизайну вплоть до последнего пикселя.

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

Но всё немного интереснее.

Давайте сразу определимся: правильно свёрстанный макет точен до пикселя по умолчанию. Точка.

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

У блока стоят поля и отступы по 16 пикселей? Нет ни одной причины ставить 10, чтобы “было легче считать” (и такое бывает), а потом проходить по всему макету заново. Ставьте сразу 16, а чтобы помочь себе — пользуйтесь расширениями для браузера, например https://www.welldonecode.com/perfectpixel/

Конечно, так можно дойти до крайности. Я много раз видел как люди бездумно копируют размеры из Sketch, Avocode или Figma наивно полагая, что уж кому как не им знать о размерах и положении. Это самая большая ошибка, и я уж молчу о том, что редакторы зачастую ставят абсолютное позиционирование всему подряд.

Будьте заранее готовы к тому, что макет – живой. Выделенный блок делится на секции? Используйте проценты во флексах или fr в гридах, делите его относительными единицами. Дизайнер поставил 63 px? Это явно дрогнула рука, не используйте нечётные значения никогда, округляйте до ближайших x4 (в данном случае — 64). Во всех размерах должна просматриваться логика, не могут три кнопки в ряду иметь один размер, а четвёртая – другой.

Почему кратно четырём? Потому что округление в пределах четырёх пикселей вполне укладывается в общепринятое понятие точной вёрстки, но на крайний случай у вас останется ещё как минимум два уровня деления. А при использовании нечётных значений transform или устройства с полуторной плотностью экрана дадут вам размытую картинку (к счастью, последние версии браузеров эту проблему часто решают за нас).

В скором времени я попробую затронуть тему вёрстки изначально неудобных макетов: что делать если вам выдали макет в 1920 пикселей, а большинство ноутбуков до сих пор имеют 1366 и как вести диалог с дизайнером и заказчиком в такой ситуации.

#заметка дня

Сразу с панча: не используйте input[type=“number”].

Он тащит за собой целый ворох проблем:

1. странно выглядит (ниже о том, почему);
2. плохо стилизуется;
3. не подчиняется стандартным атрибутам вроде maxlength (sick!);
4. имеет ARIA-роль spinbutton (ниже поясню, что это);
5. позволяет ввести e (10e9) и валидация даже не заикнётся;
6. в старых Safari и Chrome округляет введённые числа (например, номер кредитки) до мантиссы и экспоненты (по-моему, это уже конец);
7. во время ввода можно случайно нажать стрелку вверх или вниз (или даже тронуть колесо мышки на некоторых ос) и введённое число изменится.

Как видите, минусов немало. А откуда они вообще взялись?

А всё просто: input[type=“number”] создавался для имитации т. н. tally counter, ручного счётчика. Ну вы наверняка видели фильмы, где людей или скот считали надетым на палец устройством. Отсюда и ARIA-роль spinner (счётчик оборотов), и стрелки ввода.

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

Так что же делать?

А делать следующее:

<input type="text" inputmode="numeric" pattern="[0-9]*">

В 2024 году с такой конструкцией проблем у вас не возникнет. И с точки зрения доступности всё верно. И на мобильных клавиатура нужная встанет.

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

За подробностями можно обратиться к блогу разработчиков официального сайта правительства Великобритании: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/

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

Я помню подобное было у многих государственных сайтов,. но почти все блоги исчезли со временем...

Подытожим: input[type=“number”] делался не для того, как его применяют.

Подумайте об этом.

#css #html #number #aria #semantics #a11y #бородач

Как я могу помочь CSS развиваться

Периодически в подкасте «Веб-стандарты» мы обсуждаем всякие новые CSS-фичи. CSS-блогеры активно делятся демками с этими фичами, выпускают про них обучающие материалы, готовят доклады. Но я, например, не часто задумываюсь, откуда у людей, которые занимаются тем, чтобы новые фичи в принципе появлялись, берётся мотивация этим заниматься.

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

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

Мириам Сюзанн — как раз такой человек. @scope, @layer, CSS Anchor Positioning, popover — все эти довольно революционные для CSS спецификации так или иначе дошли до браузеров благодаря OddBird — компании Мириам. Они ещё делают SCSS.

Никого ни к чему не призываю, но так как я сам спецификации писать не умею, а в браузере их реализовывать и подавно, то помогаю как могу. Буду донатить OddBird, которым сейчас нужны деньги на дальнейшую работу. Когда-то веб-разработчики всем миром собрали на атрибут inert. Я хочу таким образом двигать CSS вперёд.

Хотите так же помогать развитию CSS — https://opencollective.com/oddbird-open-source.

Вообще советую поддерживать денежкой те инструменты, которые вам очень важны. Многие опенсорс-авторы выгорают, потому что после работы приходят делать классное для всего сообщества, а им в issues прилетает не благодарность, а баги и негатив.

Ну а если ваш путь — тот самый open source, который вы хотите делать своими руками, то вот вам видео выходного дня: Андрей Ситник ещё в 2019 году поделился опытом, как продвигать open source.

https://youtu.be/-CLm8bwwL_M

#ссылка дня

Внимание, важный вопрос!

Что вам больше нравится: Volvo или Porsche?

Прежде чем отвечать, подумайте! Ведь речь идёт не об автомобилях, а о...

...дизайн-системах.

Вот это поворот

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

Давайте на них посмотрим.

Volvo: https://vcc-ui.vercel.app/docs

И их Storybook: https://developer.volvocars.com/design-system/web/?path=/docs/getting-started-1-introduction--docs

Porsche: https://designsystem.porsche.com/v3/

Ребята из Volvo даже блог свой ведут. Например, они ушли от CSS-in-JS назад к CSS ещё до того, как это стало модным: https://vcc-ui.vercel.app/blog/2022-11-23-future-css

Кто найдёт дизайн-систему BMW? :)

Кто использовал эти две?

#css #design #ui #storybook

#фишка дня

Когда-то давно я слышал о таком свойстве, как text-align-last.

Что оно делает? Ну, думаю, всё понятно из иллюстрации :)

Работает с последней строкой индивидуально, позволяя сделать более приятные глазу переходы текста, соответствующие остальной стилистике. Вот хорошая статья на тему: https://www.stefanjudis.com/today-i-learned/how-to-align-the-text-of-the-last-paragraph-line/

С интерактивным примером, как вы любите.

Почему я акцентировал на нём внимание?

Да просто я знал о нём ещё тогда, когда оно толком нигде не поддерживалось. Вот в IE работало, буквально, а в Chrome нет. И как-то все на него забили в итоге.

В этом есть небольшая беда так нами любимых «the future CSS tip». Наиграешься, разочаруешься, и забудешь :(

Но есть же наш уютный канальчик, мы тут всё вспомним :)

#css #thefuturepast

#ссылка дня

Все знают, что в JavaScript возможны утечки памяти, вот только никто их не видел.

Погоди, в смысле, никто? Вот же, целый репозиторий: https://github.com/ufocoder/javanoscript.memory-leaks

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

Не позволяйте памяти утечь, котаны! И дополняйте примеры :)

#javanoscript #memory

#ссылка дня

Я сначала подумал, что это шутка: https://github.com/tc39/proposal-math-sum

Оказалось, совсем и не шутка.

Ваши мнения, котаны?

inb4 https://0.30000000000000004.com/

#фишка дня

Продолбался весь день с подготовкой релиза. С cherry-pick-ами нужных коммитов. Шутки про черрипики точёны оставьте себе.

В чём же проблема?

А в том, что наша команда работает по trunk-модели. Всё сливается в мастер, мастер автоматически релизится как Latest-версия продукта и отправляется в тестирование.

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

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

Очень важный момент здесь: время, когда транк считается нестабильным, должно быть сведено к минимуму. В любой момент команда должна иметь возможность релизить текущее состояние проекта.

Для этого реализуются различные feature-флаги и прочие условные условности для разделения потоков пользователей продукта по фичам.

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

Плохо когда вы забыли о гигиене и смешали коммиты от двух фичей — свободной к релизу и нестабильной. Или когда не засквошили PR-коммит (мой случай).

Тогда выборка черри-пиков может быть не самым приятным занятием. А грязные черри-пики штука очень неприятная.

Так вот, про что же фишка дня? А вот про то, что в процессе я выяснил: совсем не обязательно делать checkout коммита по его хэшу, можно по сообщению! Буквально:

git checkout ':/add multiselect to ui kit'

Причём, сообщение не надо вспоминать полностью!

В итоге, git выберет ближайший к вам такой коммит. Уютно!

В общем, соблюдайте гигиену репы, котаны. Не долбитесь весь день в черрипики.

#git #til #commit #бородач

#статья дня

Нет, на видео к посту вовсе не очередная реализация Tower Defense на ванильном JavaScript. Тут кое-что покруче.

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

И проблема эта — балансировка нагрузки! А точнее, существующие алгоритмы балансировки нагрузки.

Сразу ссылка на статью: https://samwho.dev/load-balancing/

И перевод: https://habr.com/ru/companies/ruvds/articles/732648/

Но в переводе нет интерактивного примера!

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

Итак, что там за алгоритмы такие:

1. Чистый рандом
2. Карусель и взвешенная карусель (мощнее сервер — больше запросов в него кидаем)
3. Карусель с очередью запросов
4. Подсчёт активных подключений и передача серверу, с наименьшим их числом
5. Активный подсчёт способности серверов обрабатывать запросы и исключение наиболее слабых из них.

Очень крутая статья. Иллютрации и интерактив делают знакомство с алгоритмами весьма увлекающим.

Ну и, заодно, станет понятно, о чём говорить с девопсами, когда ваш чатик начнёт падать :)

#connections #devops

#фишка дня

Как заставить элемент изменять свою ширину... ступенчато?

Ну, например, вам нужно, чтобы шахматная сетка при любых условиях оставалась цельной.

И сегодня у нас аж несколько вариантов, как этого добиться.

1. От Аны Тюдор: https://codepen.io/thebabydino/pen/zYbZpBq

Используем функцию модуля:

width: calc(95vmin + -1*mod(95vmin, 15px));

Но вот беда, в Chrome модуль пока не поддерживается... но не унываем! Есть ещё два варианта от Темани Афифа aka CSS Challenges.

2. Эффективное значение функции выше это, буквально, округление. Но так и такая функция в CSS имеется! Как-то так:

min-width: round(95vmin,15px);

Пример: https://codepen.io/alinaki/pen/VwRMpPY

Но... Chrome опять в обломе.

Да, и в первом и во втором вариантах на коне Firefox и Safari. Как я уже недавно писал, парни из Chrome взяли привычку реализовывать только то, что можно красиво оформить в пост. И реализовали тригонометрические функции, забыв про базу.

Потому нам ничего не остаётся кроме как...

3. CSS Grid конечно же: https://codepen.io/t_afif/pen/KKEXwmR

И секрет будет в правиле:

grid-template-columns: repeat(auto-fill, 15px);

Всем шахмат, котаны :)

#css #trick #math #бородач

#фишка дня

Вы знали, что в CSS можно анимировать кривые SVG?

Криво анимировать кривые...

Вот и я не знал. Посмотрите:

<noscript viewBox="0 0 10 10">
  <path d="M5,2 Q 2,5 5,8" />
</noscript>

noscript path {
  transition: d 0.35s;
}

noscript:hover path {
  d: path("M5,2 Q 8,5 5,8");
}

До тех пор пока совпадает число точек и тип кривой, можно набросить переход aka transition и будет красота.

Да, сложные анимации будет сделать непросто, но даже так — довольно забавно.

Ладно, к чему это вообще. Сейчас работает в Chrome и Firefox, а буквально вчера это добавили в WebKit, а значит, скоро и в Safari!

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

#noscript #animation #transition #css

#codepen дня

Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.

Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz

1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.

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

Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.

3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.

Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:

label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
 transform: translateY(100%);
}

Обратите внимание, рамка — отдельный элемент, к ней обращаемся через селектор низлежащих соседей ~.

Не знаю, что меня больше впечатляет. Псевдоэлементы на полях ввода или :has.

И да, поддерживается везде.

#css #has #appearance #бородач

#ссылка дня

Если у вас есть Chrome Canary (125+), то уже сегодня можно побаловаться такой фичей, как CSS Anchor Positioning.

Короче, можно прилепить один элемент к другому так, что он всегда там будет, несмотря на скролл и так далее. Без расчёта координат и трансформаций. Без прямой зависимости межлу элементами в DOM. Просто указываем ID элемента-якоря в атрибуте anchor и передаём позицию в стили: inset-area: right bottom. Всё.

Это, в целом, продолжение идеи, развиваемой в спецификации Popover.

Уна Кравец как раз сделала инструмент для демонстрации этой возможности: https://anchor-tool.com/

Повторю: только Chrome Canary 125+.

Ну а, конечно, пока этого нет в основных браузерах, нам надо довольствоваться https://floating-ui.com/ aka ex-Popper. Работает очень хорошо.

#css #anchor #tool

Этот комментарий к посту про анимацию кривой SVG определённо стоит выноса в основной поток 🙂

Причём так можно анимировать не только SVG-элементы, но и CSS-свойства с SVG-контуром в качестве значения, напр. clip-path:path(...) или offset-path. Главное, чтобы количество и тип команд в контуре оставалось тем же. Я так выпрямлял offset-path по ховеру в этой демке https://codepen.io/SelenIT/pen/zYLoXdB

🇺🇲Реально ли специалисту в любой области получить greencard США без предложения о работе, без высшего образования, и без знания английского языка? Ответ: да! Рассказываем, как это сделать.

Виза EB-1a дала возможность более 4000 специалистам из разных областей переехать в США в 2022 году. Она выдаётся на срок до 10 лет, по ней можно работать в любой компании, фрилансить и открывать собственный бизнес. И через 5 лет жизни в США претендовать на паспорт!

Чтобы получить эту визу, не обязательно иметь высшее образование, не нужно знать язык на высоком уровне, а заявку можно подать из любой страны. И, пожалуй, самое главное – не нужно обладать каким-то исключительным талантом! Огромное количество специалистов даже не знают, что могут претендовать на эту визу.

Подписывайтесь на наш Telegram-канал, где мы даём массу полезной информации о релокации: https://news.1rj.ru/str/relocode

Пишите нам в WhatsApp: +44 7496 949122 или в Telegram: @relocode_dm. Мы проводим бесплатные консультации, на которых поможем разобрать ваш кейс и подобрать наиболее подходящий способ релокации.

#статья дня

Как выделить абзац полоской на всю ширину экрана?

Да вот так: https://codepen.io/t_afif/full/LYQgPgM

Упорото, не правда ли?

Илья Стрельцын предлагает ещё более упорото: https://codepen.io/SelenIT/pen/bGLmGVq, да ещё и с градиентом.

Источник — тред экспериментов в Твиттере.

Но если серьёзно, как насчёт т. н. full bleed раскладки? Весьма модная в блогах и журналах: когда какой-то абзац или изображение (галерея) резко решают, что им надо занять всю ширину экрана.

И тут на выручку приходит Джош Комо: https://www.joshwcomeau.com/css/full-bleed/

Вообще, его способ, конечно, не единственный: https://css-tricks.com/full-bleed/

Я обычно первый способ из второй статьи использовал. Люблю магию.

И вообще, как такая раскладка по-русски будет-то?

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

#заметка дня

В чём разница между селекторами :disabled и [disabled]?

Вот вы не знали (наверное), а она есть!

Псевдокласс :disabled выберет любой элемент, находящийся в отключённом состоянии.

Селектор атрибута [disabled] выберет любой элемент, имеющий атрибут disabled.

Например, <input type="text" disabled/> подпадёт под оба селектора, вне зависимости от того, случилось это на этапе прямого рендера или через установку свойства disabled узлу.

Да не томи уже!

Короче, суть дела в том, что атрибут disabled может быть установлен на fieldset, в таком случае поля будут недоступны, но в селектор input[disabled] не попадёт ничего.

Сложно? Вот пример: https://codepen.io/alinaki/pen/VwgKOPE

Короче, аккуратнее.

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

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

Генераторов треугольников на самом деле достаточно много... было создано лет за 20. Поэтому почти все из используют довольно старые техники. Или же вообще универсальные aka clip path.

Потому, встречаем:
https://css-generators.com/triangle-shapes/

Рассчитаны под один элемент. Пример кода:
/* HTML: <div class="triangle"></div> */
.triangle {
width: 180px;
aspect-ratio: 1/cos(30deg);
clip-path: polygon(50% 100%,100% 0,0 0);
background: linear-gradient(45deg,#FA6900,#C02942);
}

Заценили расчет соотношения сторон, кстати? 🤓

Пользуемся, котаны!

#css #triangle #tool #generator