#codepen дня

Не думаю, что вы помните это изображение. Но оно — с одной из презентаций Apple. Кажется, iPhone 13. Список сотовых операторов-партнёров яблочной конторы.

Так вот.

Прелесть этой сетки логотипов в том, что она весьма сбалансирована.

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

И вот один из вариантов попытки автоматизации подобного: https://codepen.io/jaredstanley/pen/VwYPvJO

Есть некий коэффициент scaleFactor. 0 — к единому значению приводится ширина, 1 — высота. Ну а baseSize — к чему в итоге приводить. А дальше — подбирай порядок и нужные параметры, чтоб неплохо смотрелось.

Кто-нибудь находил нечто подобное в виде плагина для Figma?

Где-то в закладках у меня лежала информация о подготовке изображений для такой сетки... завтра найду и закину.

#js #grid #img #бородач

#фишка дня

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

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

Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ

Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!

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

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

А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.

#html #button #label #бородач

#статья дня

Если кто-то из вас ещё не знаком с комик-стрипами xkcd, я настоятельно рекомендую проникнуться.

Ещё можно пойти и проникнуться классическим Flash-мемом из 2005 года Blue Ball Machine (осторожно, звук).

А теперь к делу. Народу из xkcd показалось забавным на 1 апреля 2024 года выпустить нечто подобное, но помасштабней.

Виральности проекта хватило на то, чтобы буквально просто интегрировать интерактивную сумасшедшую машину в стандартную сетку комиксов: The Machine.

Так вот, авторы выпустили статью, описывающую создание машины начиная от прототипа и базовых решений до отладки: https://chromakode.com/post/xkcd-machine/

Естественно, уже никакого Flash :) Всем заправляет физический движок Rapier, написанный на Rust и собранный в WASM. Данные из движка транслируются в контекст React и, как можно догадаться, всё остальное приложение написано на React.

Да, всё, что вы можете увидеть в машине — это элементы DOM!

Им просто хотелось понять лимиты DOM. Не нащупали.

И самое крутое — проект открытый, можно посмотреть исходники, почерпнуть полезности и собрать: https://github.com/xkcd/incredible

В общем, моё почтение.

#machine #xkcd #react #rust

#заметка дня

Сегодня у моего коллеги случился aha moment. Ближайший перевод на русский... кто-то говорит "Эврика", но это не совсем то.

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

Под элементами-обёртками я имею в виду, например, различные виды карточек.

Тут могла бы быть ссылка на компонент Card из Chakra UI, но это не совсем то.

В общем, карточка, Card, в неком UI представляет из себя контейнер, который имеет заголовок, границу и поля. Всё, что внутри — тело компонента, полезная нагрузка.

Что делают разработчики? Правильно, делают Card частью компонента, упихивая и полезную нагрузку и обёртку в одно целое.

Что делают разработчики когда им требуется использовать полезную нагрузку в другом месте?

Правильно, переопределяют стили Card! Кто кастомным классом, кто через css-проперти.

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

Тем более, стандартная обёртка из UI-кита.

Тем более, если эта обёртка каким-то образом влияет на положение элемента в пространстве: внешние отступы, позиционирование, прилепляемость.

И пример, конечно, вот так вот — не надо:

const CustomField = () => (
  <Box mb={2}>
    <input />
  </Box>

<CustomField />

Надо вот так:

const CustomField = () => <input />

<Box mb={2}>
  <CustomField />
</Box>

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

#тип дня

Что делать если вам нужно создать тип, параметры которого служат для передачи в библиотечную функцию? Aka тип аргументов не торчит наружу?

Не делайте это ручками, используйте служебный тип Parameters!

const createPerson = ({
  firstName, 
  lastName
}: { 
  firstName: string, 
  lastName: string
}) => ({
  firstName,
  lastName
})

type CreatePersonParams = Parameters<typeof createPerson>[0]; 

const params: CreatePersonParams = {
  firstName: 'John', 
  lastName: 'Doe' 
};

Песочница

#typescript #utility

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

Мне очень нравится концепция командного интерфейса. Я даже не говорю сейчас о консоли (командной строке), я говорю о панели команд Sublime Text, VS Code и macOS Spotlight.

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

Почему нравится? Потому что поиск происходит в fuzzy-манере, мне не нужно помнить точное название пункта меню и/или команды. Я просто ввожу что примерно хочу сделать. Очень уютно.

Так вот, некоторые веб-приложения становятся настолько огромны, что было бы неплохо иметь подобный командный интерфейс. И вот сегодняшняя библиотека предназначена как раз для этого: https://github.com/albingroen/react-cmdk

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

#command #lib #ui #ux #бородач

#фишка дня

Кому ещё не надоели споры, что быстрее, # или ., * или :has — те будут рады новой фишке Chrome DevTools в Chrome 125 — Selector Stats!

Кстати, её сделали разработчики Edge, они много внимания уделяют развитию DevTools вообще. Ну что же, у каждого свой PR :)

Впрочем, тем, кому эти споры надоели, можно лишний раз напомнить: CSS вряд ли станет бутылочным горлышком. Ну разве что новые селекторы, has, is, not и злое использование .foo > * и то это надо постараться.

#devtools #chrome #performance

#статья дня

Даже не одна статья, а целая серия из пяти. Автор — Артём Сапегин.

И серия статей эта — о тестировании в React. От лучших практик и ответа на вопрос, зачем тестировать вообще (кстати, зачем?), до описания работы с Jest, Enzyme, React Testing Library (ныне уже стандартный способ), Cypress и Playwright.

Ссылка на первую статью цикла: https://sapegin.me/blog/react-testing-1-best-practices/

Надо отметить, что начало цикла — это 2020 год (камень в огород Артёма: это было весьма сложно вычислить, нужны даты), но каждая из статей была не раз обновлена.

Ну и с тех пор Enzyme практически перестали использовать, во всяком случае в моём кругу. Если у вас иная информация — поделитесь.

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

#react #testing

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

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

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

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

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

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

#git #бородач

Мне кажется, Артём выстроил шикарную аналогию размера бандла с весом туристического снаряжения и отлично показал проблему затрат в целом. Читаем!

Базовый вес

Правильно выставленная система отсчета помогает принимать правильные решения. Вопрос размера бандла веб-приложения холиварный, но я постоянно вижу одну и ту же ошибку: "Какая разница 50кБ React или 5кБ Preact, если из node_modules тащится еще пол мегабайта?". Даже если не учитывать, что вопрос поставлен неправильно (в каждом приложении набор либ и их размер разный), ответ очень простой: базовые примитивы загружаются всегда и замедляют каждую страницу, а отдельные тяжелые пакеты для разных страниц догружаются лениво и могут вообще не влиять на перф приложения в общем.

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

Есть прекрасная аналогия как это разботает в мире туризма. Если вы заменяете какой-то тяжелый котелок титановой кружкой, то в общем весе вы разницу не почувствуете, только получите головняк от того что еда начнет пригорать. Но если вы немного заморочитесь и выстроите слаженную систему: сублиматы, кружка и горелка под нее, вы уже уменьшете походный вес кухни и еды в 2-3 раза. Если то же самое сделать с рюкзаком, укрытием, спальной системой - весь вес можно сократить в 2-3 раза. И для этого не обязателньо тратить больше денег, достаточно немного заморочиться, разобраться в вопросе и существующих альтернативах. Но уменьшив вес на плечах даже в полтора - два раза, можно почувствовать радикальную разницу в качестве и комфорте похода!

В легкоходном туризме есть понятие “базового веса” - это вес минимально необходимого снаряжения для похода: рюкзак, спальная система, кухня. Обычно, это 5кг. Конечно, в каждом походе есть необходимость брать больше или меньше еды или какое-то специфическое снаряжение, но это уже за базовый вес не считается. Это, типа, динамические импорты, если выстраивать аналогию.

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

Есть ли у вас лимиты базового веса для какой-нибудь страницы логина и следите ли вы за ним?

#codepen дня

Давайте немного развлечёмся. Кто-то не так давно в чате канала выкатил большой SCSS-цикл для анимации, но саму анимацию зажал (ай-яй-яй).

Давайте исправим положение и сделаем что-то насущное.

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

Поехали: https://codepen.io/alinaki/pen/ZEaOdKq

Заодно использована интересная фишка CSS Grid: наложить две ячейки друг на друга без абсолюта.

#css #grid #animation #scss #бородач

#статья дня

Казалось бы, что может быть проще 100%? Но это не совсем так.

От чего рассчитываются 100%? Как говорят англоязычные, it depends. По-русски – “зависит от”. Косноязычно как-то, но уж как есть.

В общем, держите прекрасный интерактивный пост от Амелии Ваттенбергер: https://wattenberger.com/blog/css-percents

Красиво, удобно, понятно.

#css #percent #width #height #position #бородач

#codepen дня

Если в CSS есть встроенные фильтры, наверное, можно и редактор картинок сделать?

И таки да, можно.

Если в CSS есть (где-то, впрочем, только планируется) анимация по скроллу, наверное, на её основе можно делать элементы-ползунки?

И таки да, можно.

Зная всё это, можно ли на (почти) чистом CSS сделать фоторедактор?

Да!

https://codepen.io/paulnoble/pen/bGyNRNE

JS тут используется буквально для того, чтобы зарегистрировать CSS-переменные как анимируемые. Ну и добавить drag-возможности для десктопа.

Забавно, что при всех этих возможностях у нас так и нет нормального API для получения картинки из DOM-ноды...

#css #filters #scroll

#фишка дня

Одна из самых недооценённых возможностей CSS-анимаций, это функция steps(n).

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

Почему недооценена? Потому что SVG, Lottie и Rive-анимации предоставляют чуть больше возможностей, но ценой подключения скриптов или целого рантайма. А всего-то надо подготовить лист спрайтов-кадров.

Поэтому сегодня я дам вам два примера. Первый — анимашка шагающего пиксель-артного Локи: https://codepen.io/alinaki/pen/GRPrYdv

Здесь есть небольшой хак чтобы картинка стала отзывчивой: вместо размера указано соотношение сторон, а фон сдвигается в процентах. Ну и, чтобы пиксель-арт оставался собой, а не размывался, стоит накинуть соответствующее правило image-rendering.

И наглядно от мэтра Джея: https://codepen.io/jh3y/pen/KKbpeBQ

Если концепция спрайтов вам совсем не знакома, в этом примере можно включить раскадровку.

Никаких рантаймов, красота.

#css #sprite #animation #бородач

#новость дня

В этот день 11 лет назад React стал публичным открытым проектом.

С чем нас всех и поздравляю.

Делитесь, кто когда начал с ним работать. Я — аж летом 2018, написал на нем проект для Oreo.

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

А до того — Ember был единственной любовью.

У вас как?

#баг дня

Вроде мы все с вами знаем, что CSS — отвечает за представление контента, никак его не модифицируя. И это подтверждается спецификацией во многих местах.

Вот только если ты пойдёшь и скопируешь в Chrome текст, на который наложен text-transfrorm: uppercase, скопируются заглавные буквы!

Но это неправильно: спека.

В общем, в Chrome 127, благодаря разработчикам из Microsoft, это будет исправлено.

Мне нравится путь, которым разрабы Edge выбрали пиар своего браузера: исправление старых багов и работа на девтулзами.

Ну и ссылка на баг: https://chromium-review.googlesource.com/c/chromium/src/+/5399744

Такой же баг присутствует в Safari, Firefox же отрабатывает ок. Думаю, код этой части CSS в Blink довольно старый, потому можно ожидать, что в Safari и WebKit будет бэкпорт.

#bug #chrome #css

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

P. S. не уверен, что вам нужен был ещё один пост про Docker в РФ ...

Кыргызы против Intl.NumberFormat

Когда лучшее враг хорошего.

Недавно к нам в команду web platform в aviasales пришли из техподдержки со странным багом у пользователя: в Arc браузере сломано отображение символа валюты кыргызских сомов, вместо него выводится непонятный символ. Проще всего конечно было ответить, что браузер не поддерживается, но стоп, разве арк не на хромиуме, чем он такой особенный?

Начал разбираться

Действительно, в обычном хроме сомы показываются как KGS, а в арке как символ, и символ явно ошибочный.
Для отображения валют мы используем стандартный Intl.NumberFormat и в арке он действительно выдаёт другой символ. Начало проясняться. Возможно, арк использует новую версию хромиума и поэтому показал проблемы раньше? И действительно, Chrome Canary получил точно такой же баг. Получается, совсем скоро, валюта сломается у всех, вообще у всех сайтов и пользователей страны, и отсчёт времени уже пошёл 🫠

Куда отправлять баг? У хромиума есть свой баг трекер, но работа с ним оставляет желать лучшего, выглядит он мягко говоря антично. Никогда не заполнял баги для браузера, но видимо этот час настал. В процессе подготовки репорта вспомнил, что вообще говоря, локализациями занимается не хромиум а отдельная библиотека ICU, то есть проблема ещё глубже, чем просто баг браузерного движка. А, казалось бы, невинная проблема

Описываю свои приключения коллегам, один замечает, что это первый раз, когда мы нашли баг не в самом лучшем браузере safari а в хроме, теперь счёт багов 4:1 в пользу первого. А действительно, а как себя ведёт в таких условиях сафари? Открываю. Встречаю тот же баг 🫡

Очевидно, проблема на уровне операционной системы.

Решил присмотреться к символу внимательнее, это просто мусорный вывод или он имеет какую-то семантику?

Символ который выдаётся на macos выглядит так: ⃀, если вы читаете с macos то почти наверняка ничего не увидите (в первом комментарии скриншот как это рендерилось в реальности). В базах данных по юникоду описание: Unicode Character 'SOM SIGN'. Бинго. Это не баг, это настоящий символ валюты, но в стандартных шрифтах macos его нет, на windows всё отображается нормально

В итоге получается ситуация: раньше вместо символа валюты выдавалась аббревиатура, библиотека ICU исправила эту проблему чем ухудшила вывод на девайсах apple

Это многое говорит о нашем обществе

Issue в багтрекере хрома или ICU открывать не стал. Очевидно они всё сделали правильно; парадоксальная ситуация в которой никто толком не виноват. Ну, точнее, можно конечно попинать apple чтобы добавляли символ, но это всё равно что орать на баобаб

Оценив диспозицию, решил что надёжнее всего будет просто сделать .replace для проблемного символа на старый вариант.
Мимоходом заметил, что в некоторых других условиях у нас на сайте кыргызская валюта отображается нормально. Оказалось, что вместо официального символа используется юникод-комбинация c + нижнее подчеркивание под символом: c̲. Как говорится c̲мекалочка ок. Но чтобы я не сильно радовался, оказалось, что в том самом стандартном шрифте apple этот символ тоже отображается криво, проще заменить обратно на KGS, как это было раньше и всех устраивало

Когда я заходил на эту пятничную задачу последнее чего я ожидал это изучения багтрекера браузеров. А вот проблемы с apple наоборот вполне были в рамках! Разумеется это ценно, что у движка chromium есть конкурент который не живёт на пособиях гугла, но нельзя не признать, что девайсы apple и веб разработка это головная боль. Всегда.

Пока писался этот пост, «улучшающий» апдейт хрома был раскатан на всех пользователей. Кыргызский интернет оказался уже сломан, сломан для всех