Вайб-кодинг – Telegram
Вайб-кодинг
26.2K subscribers
1.51K photos
519 videos
30 files
712 links
Авторский канал по ВАЙБ КОДИНГУ

Ссылка для друзей: https://news.1rj.ru/str/+ll3pbl442dNkZmYy

Связь: @devmangx
По контенту: @codingpepe

РКН: https://clck.ru/3RRVfk
Download Telegram
Одним из главных элементов на странице является аватар, поэтому его необходимо выделять - ставить на передний план.

#UX_UI
Функция contrast() меняет контраст изображения. В скобках можно указать любое значение от 0% и выше.

Значение 0% сделает изображение полностью чёрным. Значение 100% вернёт изображению исходный контраст.

#CSS
Тег cite в HTML используется для указания источников цитат, названий художественных произведений или объектов искусства.

#HTML
Метод массива forEach() позволяет применить колбэк-функцию ко всем элементам массива. Можно использовать вместо классического цикла for. В отличие от него forEach() выглядит более читабельным и понятным.

#JavaScript
Хороший заголовок в шапке должен иметь контрастность по отношению к остальному контенту, тем самым привлекая внимание пользователя и направляя его к описанию карточки.

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

#UX_UI
Атрибут pattern говорит браузеру, каким должно быть значение полей формы.

Его можно применить только к тегам input и только со следующими значениями атрибута type:
✓ text;
✓ tel;
✓ email;
✓ url;
✓ password;
✓ search.

#HTML
Метод includes() проверяет, есть ли элемент в массиве или подстрока в строке.

#JavaScript
Функция grayscale() дает возможность сделать картинку черно-белой.

В скобках можно указать значение от 0% до 100%. Значение 100% сделает изображение полностью чёрно-белым. Значение 0% вернёт изображению исходные цвета.

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

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

#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