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

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

#UX_UI

Тег fieldset группирует элементы формы в блок с характерным выделением границ.

Опционально с помощью тега legend внутри fieldset можно задать заголовок для создаваемой группы (он может быть только один и обязательно должен идти первым вложенным элементом).

#HTML

Количество доступных ячеек называют размером или длиной массива. В JavaScript длина массива обычно совпадает с количеством элементов в нем. Массивы хранят свой размер в свойстве length.

#JavaScript

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

#UX_UI

Атрибут inputmode говорит браузеру на устройствах с экранной клавиатурой какой набор символов показать при вводе данных в конкретное поле. Указывается для элементов input или textarea.

#HTML

random() - одна из самых часто используемых функции объекта Math. Возвращает случайное число в диапазоне от 0 до 1, не включая 1. Используется, когда нужно сгенерировать случайное число в заданном диапазоне.

#JavaScript

Функция sepia() меняет цвета изображения на сепию — коричневые оттенки. Значение 100% полностью преобразует изображение в сепию. Значение 0% не изменяет исходное изображение.

Отрицательные значения или значения больше 100% не допускаются. Можно использовать целое или дробное число без единиц измерения в качестве значения.

#CSS

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

#JavaScript

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

#UX_UI

Функция invert() инвертирует цвета изображения, как бы выворачивает их, превращая в противоположные. В результате получается что-то вроде негатива.

Можно указать процент инверсии от 0% до 100%. При 100% цвета на картинке полностью инвертированы. Отрицательные значения или значения больше 100% не допускаются.

#CSS

Метод массива find() вернёт первый найденный в массиве элемент, который подходит под условие в переданной колбэк-функции. Если в массиве не найдётся ни одного подходящего элемента, то вернётся значение undefined.

#JavaScript

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

#UX_UI

Функция saturate() меняет насыщенность цветов изображения. Значение 0% полностью убирает насыщенность цветов. Значение 100% не изменяет исходное изображение.

Допускаются значения больше 100%, что приводит к перенасыщенности. Нельзя указать отрицательное значение.

#CSS

В HTML есть атрибут autocomplete, при помощи которого форма заполняется в один клик — браузер подставит значения в соответствующие поля. Атрибут можно указать для любого поля, которое требует ввода данных.

Этот атрибут принимает только два значения: off (отключает автозаполнения) и on (разрешает автозаполнение; значение по умолчанию).

#HTML

В метод find() необходимо передать аргументом функцию. Функция должна возвращать булевое значение true или false. find() вернёт первый элемент, на котором переданная функция-колбэк вернула true.

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

От результата выполнения функции зависит, вернёт ли find() подходящий элемент:
✓ true — элемент проходит проверку.
✓ false — элемент не проходит проверку.

#JavaScript

Дизайн кнопки должен отражать её приоритет. Чем выше акцент кнопки, тем выше приоритет.

#UX_UI

Атрибут required добавляется обязательным полям формы. Если поле с таким атрибутом не заполнено, то при отправке формы браузер покажет предупреждение и отменит отправку.

#HTML

Различные свойства в CSS позволяют создавать фигуры и рисунки. В этом случае переворачиваем квадрат и получаем ромб.

#CSS

Свойство length возвращает количество элементов в массиве. Если элементов нет, то свойство возвращает 0.

#JavaScript

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

#UX_UI

Тег details — это интерактивный элемент, при нажатии на который открывается блок с информацией — текстом или картинками. Тег summary — это заголовок «аккордеона», так называемая легенда.

Собирается «аккордеон» просто: в details вкладываем summary и теги с информацией, которая будет показываться при нажатии.
По умолчанию «аккордеон» закрыт, но если мы хотим, чтобы его содержание показывалось сразу при загрузке страницы или открывать его из JavaScript, нужно добавить к нему атрибут open.

#HTML