#codepen дня

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

Естественно, под каждым из таких видео с названиями «how to make supa 3d carousel in Figma supafast» раздаётся вой вида: «А как это верстать?»

Ну иногда, к счастью, верстать это можно так же, как рисовалось, и Jhey — деврел Google — нам это демонстрирует при помощи градиентной маски, смотрим: https://codepen.io/jh3y/pen/gOeXgXv

Элегантно, конечно, но требует тонкой настройки, чтобы не кружилась голова 🤪

#css #tiktok #mask #gradient

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

Ребята из Adobe делают очень и очень крутые вещи со своей дизайн-системой Spectrum.

Ну хотя бы просто потому что они догадались разделить React-часть на несколько дополняющих друг-друга компонентов: Aria, Spectrum и Stately. Где Aria — хуки для доступности, Stately — хуки состояний элементов, а Spectrum — построенная на них библиотека виджетов.

То есть, смекаете? Хуков из Aria и Stately достаточно для построения своего UI-кита или дизайн-системы. Их сочетание можно назвать безголовым, headless, UI-набором.

Не потому что дурным, а потому что реализация включает в себя не компоненты, но поведение.

Так вот, они тут провели большое исследование библиотек и компонентов для реализации перетаскивания элементов (drag-n-drop) и реализовали свои, с поддержкой не только мыши, но и тач-интерфейсов и клавиатур.

Их отчёт об этом: https://react-spectrum.adobe.com/blog/drag-and-drop.html

Весьма интересно, почитайте. И сам Spectrum, кстати, тоже очень хорош. Лёгок и продуман.

#adobe #react #ui

#статья дня

О, чо подъехало-то на ночь глядя!

Забудьте все то, что вы учили о флексбоксе. Забудьте FlexFroggy, Flex vs Zombies и Flex Defense (нет).

Джош Комо как всегда великолепен в своей новой статье на сей раз — да, о флексбоксе: https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/

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

#flex #turorial

#баг дня

input size=“1” в Firefox слишком широкий. Логика подсказывает нам, что он должен так-то быть в один символ шириной.

Песочница: https://jsbin.com/zavefac/edit?output

Багтрекер: https://bugzilla.mozilla.org/show_bug.cgi?id=1782385

С комментария в приложенном куске кода я в целом в голос прорал: «To better match IE»…

Вот и он, кстати: https://searchfox.org/mozilla-central/rev/92e8568bbe7c8bf64f7a8ee958291877d960d7d8/layout/forms/nsTextControlFrame.cpp#209-232

Вроде как для моноширинных шрифтов все отрабатывает как надо. Но что-то пошло не так.

#firefox #bug

#ссылка дня

Тимлид я ещё довольно молодой, приходится учиться всему на лету и черпать знания отовсюду.

Поэтому, было весьма интересно найти роадмап (карту знаний и умений) по этой теме: https://tlroadmap.io/

Работать с ним можно буквально как с картой, выбирая нужные ветки, или же как с документом: https://tlroadmap.io/guide.html#%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%86%D0%B8%D0%B8-%D0%BF%D0%BE-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8E

Всё написано понятным языком и вообще весьма интересно. И не только тимлидам, конечно же.

#teamlead #learning #roadmap

#статья дня

Вечнозелёная (суть, никогда не устареет) статья Павла Лаптева о CSS Grid: https://pavellaptev.medium.com/learning-css-grid-with-the-swiss-2bd02e913fa

Но не просто очередная уровня "две колонки, три строки", а с некоторым историческим экскурсом через газеты и журналы, приводящим в итоге к реализации пары каноничных швейцарских сеток.

А уж кто знает о типографских сетках больше швейцарцев? Да в общем-то, никто. Как и о типографике, впрочем.

Давайте-ка сюда сразу добавим статью про золотой канон в сетках (golden canon grid): https://habr.com/ru/post/479580/

#css #grid #swiss

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

Виджет выбора цвета, color picker — пипетка, по-нашему — нечастый гость в интерфейсах, но уж если нужен, то максимально удобный.

Да, в браузерах есть встроенный (`input type=“”color`), но давайте честно, они все полное говно. Сложно приходится.

Встречайте: https://github.com/Simonwep/pickr

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

А вот и пример подъехал: https://codepen.io/serg-by/details/qBXqJxL

К слову, о системных пикерах. Мой любимый на Linux: https://www.kryogenix.org/code/pick/

На macOS: ColorSlurp.

#pickr #colorpicker

#заметка дня

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

И, естественно, очень хорошо прослеживается влияние JSX. Я не думаю, что XHTML вообще оказал хоть какое-либо влияние на молодых разработчиков :) А JSX — запросто.

В любом случае, «каноничный» вариант HTML input это, конечно, третий и четвертый варианты.

Остальное пахнет JSX и XHTML, но уж точно не является неверным, если мы исходим из того, как это разберут браузеры и чего вы вообще хотите добиться.

Короче, это был не опрос в смысле вас проверить, а буквально сбор ответов :)

#статья дня

Видите, подписчик проблему обвёл синей линией?

Оказалось, он просто был не в курсе, что пару лет назад я писал статью с прекрасным названием «Загадка дыры».

По-моему, пришло время её репостнуть, раз проблема всё ещё встречается: https://telegra.ph/Zagadka-dyry-07-18

Не дырите, котаны.

#img #inline #block #flex

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

Тема генерации градиентов буквально неисчерпаема. Вот подъехал ещё инструмент: https://components.ai/gradient/rfx04toi2Bx4GLUxPpdV

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

Удобный предпросмотр и экспорт в React-компоненты наличествуют.

#gradient #css #tool

#заметка дня

CSS-градиенты, конечно, были в своё время прорывом, вот только есть одна проблема.

Математически линейное изменение цвета и/или прозрачности глазом воспринимается слишком резким и… ранним.

Точно так же как и с transition, можно было бы применить функции плавности (easing). Правда, это потребует некоторых усилий, в стандарт CSS они пока не вошли.

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

Можно, конечно, и проще. Добавить промежуточный цвет при помощи пары остановок, т. н. подсказки перехода. Этот цвет может стать едва ли не основным: https://codepen.io/argyleink/pen/GRZoQLB

Какой бы способ вы ни применили, доверяйте своим глазам.

#css #color #gradient #easing

#codepen дня

Бегущую строку заказывали? Нет?

А я принёс: https://codepen.io/ykadosh/pen/KKezJzz

Почему именно этот вариант? Да всё просто. Логика построения анимаций бегущей строки не требует JS сама по себе, но требует повторения контента 2-3 раза, чтобы сделать бесшовный (или как минимум, кажущийся таким) переход.

Вот, можно и почитать: https://ryanmulligan.dev/blog/css-marquee/

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

К слову, в Chrome объявленный устаревшим тег marquee реализован на веб-компонентах и Shadow DOM. Вполне себе современно, не?

#marquee

#codepen дня

Спирограф, слышали о таком развлечении? Если нет, крайне рекомендую найти себе, прокрастинация будет рада.

А пока давайте сделаем свой генератор спирограф-фигур в SVG на базе библиотек SVG.js, GSAP и generative-utils:

https://codepen.io/michellebarker/pen/GRMBVYX

Пакет generative-utils вообще довольно интересный, там приличное количество утилит для создания генеративного арта (не путать с дегенеративным, это что-то времён Хрущёва).

#svg #art #gsap

#бесит дня

!! — не оператор!

У меня всё.

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

Как часто вы произносите “ой”, работая с Git? Или, того хуже, “упс”? Не говорю уж про “бля”…

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

Так вот, если Git это бесконечный undo для ваших проектов, то ugit — это undo для Git!

Ссылка: https://github.com/Bhupesh-V/ugit

КДПВ говорит сама за себя.

#git

#фишка дня

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

Как всегда, способ этот не очень-то стандартный. Спасибо, Apple, чо.

#safari #callout

#фишка дня

Реклама предлагает всем стать настоящими программистами. Оставим это рекламе.

Нам же, чтобы ими стать, надо научиться отлаживать программы, не правда ли? (Филологи — молчать!)

Поднимите руку те, кто дебажит через console.log(var) 🙋

А надо не так. Надо открыть девтулзы, в них — исходный код. И там просто нажать «Add logpoint…» на строке. Вуа-ля. Никаких тебе ожиданий сборки. Смотрим альбом.

#debug #devtools

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

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

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

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

Удобно.

#json #viewer

#заметка дня

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

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

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

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

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

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

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

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

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

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

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

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

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

Я помню подобное было у сайта kremlin.ru. И то в итоге почти все фишки исчезли со временем... Но мы отклонились от темы.

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

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

#css #html #number #aria #semantics #a11y