#баг дня

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

Пришло время повторить! С небольшим историческим экскурсом :)

Итак, некая библиотека компонентов Radix. И написана она в технике bring your own styles. То есть буквально стыкуются с чем угодно, не навязывая своё оформление (темы есть, но они — отдельно).

В чём же тогда смысл таких UI-китов? Ну, собственно, создание своих компонентов и дизайн-систем не ограничивается наложением стилей на стандартные input да button, это большая работа по объединению их в доступные группы, в задание нужного поведения и так далее.

А уже потом как, например, в нашем случае — можно хоть Tailwind накинуть. Ирония какая.

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

И один из достаточно неожиданных способов этого добиться — это поменять обработчик onClick на onMouseDown.

И вуаля, на мобильных устройствах как будто бы стало на 300 мс быстрее!

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

А тут я обнаружил ещё одну проблему: https://github.com/radix-ui/primitives/issues/3600

Там есть и видео, и демо.

Суть: на вкладках тоже применена техника onMouseDown. В итоге, когда мы анмаунтим вкладку с полем ввода, на котором висит onBlur, это событие — не срабатывает. В нашем случае это приводит к проблемам с форматированием полей, которое как раз на onBlur и повешено.

Почему так происходит? Потому что во всех браузерах обработка событий происходит в таком порядке:

0. mousedown
1. change
2. blur
3. focus
4. mouseup
5. click

...остальное посмотрите по ссылке.

Логично, что при замене mousedown на click всё прекрасно работает. Но кому-то в Radix очень захотелось, чтобы на мобилах их UI-кит казался быстрее других.

Выстрелили себе в ногу получается.

В общем, как обычно, прошу ваших комментариев и реакций на issue в GitHub!

#ui #kit #radix #onmousedown

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

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

А для этого о них надо как-то договориться, продемонстрировать, выявить возможные проблемы и нестыковки. К примеру, стрелки не работают там, где должны.

Ну или, как вариант, показать кому-то как эффективно можно управлять текстовым или графическим редактором, девтулзами. Стать настоящим хоткей-ниндзей!

Что ж, по крайней мере для маководов у меня есть решение! Keycastr — https://github.com/keycastr/keycastr

Задача этой маленькой утилиты буквально вывести на экран нажатые клавиши. Конечно, есть выбор — показывать все, или только модификаторы.

Очень круто было наблюдать, как наш техлид джирой манипулирует :)

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

Upd.

Альтернатива для Windows: http://carnackeys.com/

Для Linux:
https://github.com/bm-mit/key-caster
https://www.thregr.org/wavexx/software/screenkey/
https://github.com/critiqjo/key-mon

#hotkey #a11y #record

#статья дня

От перемены мест слагаемых сумма не меняется, не правда ли?

А если речь о композиции? Например, композиции трансформаций в CSS?

Ну, вот, например раз:

.demo {
  transition: transform 1s ease;
}
.demo.zoom {
  transform: scale(3) translate(-33.1%, 20.2%);
}

и два

.demo {
  transition: transform 1s ease;
}
.demo.zoom {
  transform: translate(-33.1%, 20.2%) scale(3);
}

Это одно и то же, или нет? Так-то ответ интуитивен: нет, не одно и то же. Школьного курса математики должно хватить для понимания. Ну, окей.

А вот если так, три:

.demo {
  transition: transform 1s ease;
  transform: rotate(0);
}
.demo.zoom {
  transform: scale(3) translate(-33.1%, 20.2%);
}

Что-то резко стало сложно, не правда ли? А что если я вам скажу, что итог номера три равнозначен итогу номера два? И именно он приведён на видео к посту.

Почему так? Потому что браузер немножечко сходит с ума от того преобразует то, что от него требуют, и организует переданные значения в единую матрицу преобразований, нивелируя порядок translate и scale.

А подробнее об этом в статье Джейка Арчибальда: https://jakearchibald.com/2025/animating-zooming/

CSS, конечно, прекрасен.

#css #transform #matrix

#фишка дня

Как убедиться, что ваш switch покрывает все кейсы, а default остаётся только на случай косяков в рантайме?

Очень просто! Два варианта:

1. Используем never, от Кори Хауса:

interface Dog {
  kind: "dog";
  favoriteToy: string;
}

interface Parrot {
  kind: "parrot";
  knowsWords: number;
}

type Pet = Dog | Parrot;

function logPetTalent(pet: Pet) {
  switch (pet. kind) {
    case "dog":
      return console. log (Dog loves ${pet. favoriteToy}. ');
    case "parrot":
      return console. log (Parrot knows ${pet.knowsWords} words. *);
    default:
      const exhaustiveCheck: never = pet;
  }
}

2. Второй вариант — ESLint и правило switch-exhaustiveness-check. И уже дальше решаем, разрешать default, или нет. Конфигураия это позволяет.

Впрочем, мы у себя вообще переходим на pattern matching, о чём как-нибудь в следующий раз.

#ts #switch

Как оптимизировать PostgreSQL и не лишиться сна: разбор для разработчиков
 
Когда вы разворачиваете веб-приложение, чаще всего веб-сервер, бэкенд, база данных и авторизация оказываются на одном сервере.
 
Тестировщики и менеджер счастливы — все летает. Но потом приложение выходит в продакшн и начинается боль. Запросы тормозят и отвечают по пять секунд, CPU не загружен даже на треть, а веб-сервер выдает 504 Gateway Timeout.
 
И вот вы сидите ночью и чините прод, потому что PostgreSQL не просто «табличка с данными», а сложный инструмент с кэшем, индексами, буферами и планировщиком запросов.
Как избежать такой ситуации и грамотно подойти к проектированию схем  — рассказали в статье Академии Selectel.
 
Переходите по ссылке и учитесь настраивать СУБД правильно.
 
Реклама, АО «Селектел», ИНН: 7810962785, ERID: 2Vtzqwmd9RY

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

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

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

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

$ caniuse "viewport units"
$ caniuse @property

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

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

#cli #caniuse #бородач

Хард-скиллы — это то, за что нас нанимают. Софт-скиллы — то, за что нас потом терпят, повышают или, наоборот, обходят стороной.

Вечный спор: что важнее? Ответ зависит от контекста. Но чем выше в карьере, тем заметнее, что технических знаний уже недостаточно.

На управленческих позициях особенно важна способность не только делать, но и объяснять, договариваться, делегировать, выстраивать доверие. Всё это — про софт-скиллы.

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

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

Если хотите прокачать не только хард, но и то, что с годами оказывается важнее — вот ссылка на курс → https://netolo.gy/eepI

Реклама. ООО "Нетология", ИНН: 7726464125, erid: 2W5zFK5okZ6

#фишка дня

Как плавно остановить вращение? Ведь резкая остановка нередко вызывает отторжение к анимации вообще.

Темани Афиф aka CSS Challenges показывает простой трюк: ставим на паузу и добавляем трансформацию "доворота":

.box:hover {
animation-play-state: paused;
transform: rotate(.2turn);
}

Пример: https://codepen.io/t_afif/pen/XWQMPqY

#css #animation #transform #trick #бородач

#фишка дня

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

Вы думали, что вендорные префиксы почти вымерли, да? Все эти -webkit-, -moz-, -ms-, -o-... А как бы не так!

Вот вам -electron-corner-smoothing!

Что это правило делает?

А оно указывает, насколько сильно применять эффект squircle (квадруг, дефолтное закругление на iOS и macOS) к вашим скруглениями границ. Короче, переопределяет поведение border-radius.

И, более того, по-умолчанию настроено на system-ui! На яблоках вы получите squircle, а на остальных системах — классическое скругление. Вы можете даже не осознавать этого.

.box {
  width: 128px;
  height: 128px;
  background-color: cornflowerblue;
  border-radius: 24px;
  -electron-corner-smoothing: system-ui;  /* Match the system UI design. */
}

Чудны дела. А вот и ссылка на доку: https://www.electronjs.org/docs/latest/api/corner-smoothing-css

#css #squircle #macos #electron

#фишка дня

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

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

#safari #callout #бородач

#фишка дня

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

Буквально — используя параметры строки запроса (query string parameters).

Ну то есть что-то вроде https://buy.that?title=Product&action=buy&config=2&amount=3, классические GET-параметры, но управляемые с фронта.

А вот как позволить клиенту обновить страницу, сохранив эти параметры? Желательно, без лишней работы и без использования JS вообще.

А очень просто!

<a href="">Reload</a>

Да, вот так просто! Самое классное, что абсолютно валидно и есть в спеках: https://stackoverflow.com/questions/5637969/is-an-empty-href-valid/43340108#43340108

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

Не пишите лишнего, котаны!

#http #html #trick #бородач

#фишка дня

Понадобилось мне тут создать список полей для функции watch (обозреватель введенных значений) в react-hook-form.

Но дело в том, что поля в форме сгруппированы по одному из параметров. Ну, условно: feature1[goods], feature1[variants], feature2[goods], feature2[variants].

А watch на вход принимает одномерный массив строк. Так что же делать?

А тут нам поможет flatMap! Это как map, но любой возвращённый массив развернёт и включит в состав возвращаемого.

Удобно? Удобно.

#js #map #flatMap #бородач

Валера искал работу в ИТшечке, посоны. Сижу литерали часами, и вот это вот: клик, клик, клик. Короче, наст%!&ело по итогу.
А че делает разраб, когда зае@!лся? Пральна — пет-проект. Хоба-на: аппка, которая сама кликает по 200 вакансий на HH в день. Итог: 10 собесов в неделю.
Минусы: кринжевать на собесах и выбирать оффер один х@р надо самому.
Короче, вэлкам потыкать в мою поделку, если кому нада.

@hmailer

#фишка дня

Раз :has уже везде, грех не воспользоваться. Тем более, некоторые селекторы получаются весьма угарными.

Например, как затемнить все элементы, кроме того, на который наведена мышь?

Вот как-то так:

main:has(article:hover) article:not(:hover) {
  opacity: 0.3;
}

Собственно: https://codepen.io/alinaki/pen/XWGdadP

Впрочем, похожий, хоть и не настолько гибкий, эффект достигается и без :has:

main:hover article:not(:hover) {
  opacity: 0.3;
}

Пруф: https://codepen.io/alinaki/pen/OJqNjWb

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

Но тут кому как, конечно.

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

#шрифт дня

Microsoft выкатили Kermit — первый в своём роде шрифт, в котором каждая буква анимируется поштрихово, как будто её пишут от руки.

Сделан он студией Underware — и не просто для красоты. Этот шрифт помогает детям учиться читать и писать, показывая, как именно строятся буквы.

И, что особенно приятно — всё это работает и для
кириллицы.

В Office уже есть 4 начертания, в мае обещают добавить ещё 38. Всё это — один вариативный файл без привычного набора Regular/Bold/Italic.

📌 Презентация Kermit на microsoft.design
📌 Тест шрифта и эссе от Underware
📌 PDF со всеми стилями и "анатомией" букв

Если ты работаешь со шрифтами — обязательно посмотри. Это очень крутой пример того, на что вообще способны вариативные гарнитуры.

#font

12 июля в Казани, в экстрим-парке «Урам» пройдет мероприятие Сезон Кода от Т-Технологий, соберутся разработчики, аналитики, QA и продакты, чтобы поговорить о технологиях — не в переговорке, а рядом со скейт-парком и видом на мост Миллениум.

Формат — как лето этого и просит:
→ короткие, насыщенные доклады от практикующих инженеров Т-Банка
→ инженерные зоны и карьерные консультации
→ музыка, граффити, движение, нетворкинг

Темы:
— как проектировать клиентский API, чтобы не захотелось всё выкинуть через месяц
— как не сломать ничего, выкатываясь по 200 раз в день
— что такое микросервисы по-честному
— как тестить прод — и не бояться
— зачем разработчику понимать продуктовую воронку
— и почему инфраструктура — не "где-то там"

📍 Казань, экстрим-парк «Урам»
🕥 12 июля
🌐 Подробности и регистрация по ссылке

Регистрация = короткая форма + пожертвование от 1000 ₽ в один из трех благотворительных фондов.

Важно: при пожертвовании укажите ту же почту, что и в регистрации — туда придёт билет.

Приезжайте. Будет по делу — и по настроению. Не конференция, а техно-фест под открытым небом.

Реклама. АО "ТБанк", ИНН 7710140679, лицензия ЦБ РФ № 2673 от 24.03.2015 г. Erid: 2W5zFGUvVpL