#статья дня

В недавней заметке про кнопки и role="button" я упомянул, что переключатели и чекбоксы — вещи разные. Вот, прикладываю обещанное объяснение: https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8

Используйте переключатель:

1. Для вызова мгновенной реакции системы на включение опции.
2. Для выделения несвязанных элементов в группе.

Используйте чекбоксы:

1. Когда форму после пометок требуется отправить отдельным действием.
2. Если требуется множественный выбор.
3. Для выделения связанных элементов в группе.

#css #checkbox #switch #ux

#ссылка дня

Когда-то давно мы с Виталием Киренковым, автором канала «Просто: разработка» (в телеге и на ютубе) запилили красивый анимированный переключатель тем в браузере.

Причём, трёхпозиционный: авто, день, ночь. Получилось красиво, но я не смог выжать адекватную работу, без моргания, на мобильных устройствах. Так что в продакшен (на сайт канала) так и не пошло.

Вот оно, если кому интересно: https://codepen.io/alinaki/pen/gOLzbQE

Так вот, ссылка дня — это коллекция анимированных переключателей попроще. Скажем так, сильно попроще: https://toggles.dev/

Но их много, они оттестированные и довольно симпатичные.

Пользуемся.

#switch #dark #light

#codepen дня

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

В какой-то момент я устал быть душнилой и отвечать всем: "Но... ведь... SVG..."

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

А вот уже достаточно хорошо известный вам бывший деврел Google Джей не поленился и таки сделал этот чёртов переключатель!

Смотрите: https://codepen.io/jh3y/pen/LYgjpYZ

Явно покруче чем наш с Киренковым трёхпозиционный... пора поднимать ставки, котаны :)

Кто пасхалку найдёт?

В общем, меня забавляют эти дуэли. Надо бы поучаствовать в какой-нибудь :)

#tiktok #switch #design #challenge

#codepen дня

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

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

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

И только select до сих пор рисуется совершенно отдельно. Кстати, это одна из причин, почему селекты не видно в трансляции экрана на митингах :)

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

Теперь же это не так. Google Chrome уже давно не стесняясь разрешает псевдоэлементы на ваших чекбоксах, Safari и Firefox тоже недавно подтянулись.

В итоге, в сочетании с appearance: none можно творить что-то такое: https://codepen.io/alvaromontoro/pen/OJqKGBz

Я, кстати, уже говорил ведь, что в стандарт пытаются пропихнуть атрибут switch, чтобы окончательно распрощаться с чекбоксами?

Вот такое (работает только в Safari TP): https://nt1m.github.io/html-switch-demos/

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

#css #switch #checkbox

#фишка дня

Как убедиться, что ваш 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