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

#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

Статический метод Array.isArray() проверяет, является ли переданный аргумент массивом. Возвращает true, если является, и false — если нет.

#JavaScript

Когда нужно сделать плавное изменение какого-то CSS-свойства, то браузеру нужно понимать, какое время займёт этот переход. Это время указывается в свойстве transition-duration.

#CSS

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

#UX_UI

Тег picture используется, когда для разных вариантов отображения нужны разные картинки. Внутри тега обязательно должен находиться тег img, и опционально теги source.

Браузер анализирует каждый тег source по порядку, останавливается на первом подходящем под текущие условия и отображает картинку из атрибута src. Другие теги source не анализируются. Если тег picture не поддерживается браузером или ни один из тегов source не подходит под условия, то отображается картинка из тега img.

#HTML

Функция Array.from() создаёт новый массив на основе переданного объекта. Объект должен быть либо массивоподобным (как строка или объект arguments), либо итерируемым (как Set или Map).

Функция Array.from() принимает три аргумента, последние два из которых не обязательны:
✓ Объект, на основе которого создаётся массив.
✓ Функция преобразования элемента перед его добавлением в массив. Работает как метод map().
✓ Значение, которое будет использоваться как this в функции из второго параметра.

Возвращает новый массив, составленный из элементов переданного объекта.

#JavaScript

Функция skew() свойства transform трансформирует элемент, наклоняя его в 2D-пространстве.

#CSS

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

#UX_UI

Тег bdo переопределяет направление текста внутри — он отображается в другом направлении. Используется обычно для языков, где текст читается справа налево.

#HTML