Вайб кодинг
2.6K subscribers
1.16K photos
152 videos
53 files
222 links
Кодим с ИИ + мозги

Авторский канал, сотрудничество: @hand_of_ragnaros
Download Telegram
Функции с несколькими аргументами

Функция add принимает два аргумента a и b и возвращает их сумму.

#JavaScript
Фильтрация массива с использованием метода filter()

Метод filter создает новый массив на основе условия фильтрации.

#JavaScript
Изменение цвета текста

Этот CSS-код изменяет цвет текста внутри элементов <p> на красный.

#CSS
Изменение фона элемента

Этот CSS-код устанавливает светло-серый цвет фона для элементов с классом container.

#CSS
Изменение шрифта и размера текста

Этот код устанавливает шрифт Arial и размер 24 пикселя для заголовков <h1>.

#CSS
Добавление границы к элементам

Этот CSS-код добавляет тонкую черную границу среди элементов с классом box.

#CSS
Простой способ упрощения CSS селекторов с использованием :where(): на заметку фронтенд-разработчику

👉 @tips_frontend
This media is not supported in your browser
VIEW IN TELEGRAM
В Chrome Dev Tools мы можем переопределять заголовки ответов, что может быть удобно для локальной обработки ошибок CORS до тех пор, пока они не будут исправлены на уровне сервера.

👉 @tips_frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Единицы измерения CSS: lh в действии

Поиграть можно здесь

👉 @tips_frontend
Упрощение группировки данных в JavaScript с помощью Object.groupBy() или Map.groupBy(): на заметку фронтендеру

👉 @tips_frontend
This media is not supported in your browser
VIEW IN TELEGRAM
CSS свойство shape-outside в действии: на заметку фронтенд-разработчику


.column--left .shape {
float: right;
shape-outside: circle(100px at 100% 50%);
}


👉 @tips_frontend
This media is not supported in your browser
VIEW IN TELEGRAM
Используйте тригонометрические функции в CSS для создания плавной ступенчатой задержки перехода:


.character {
transition-delay:
calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}

➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Раскрывающийся список без использования Javascript: HTML-теги <details> и <summary> в действии

Поиграть можно здесь

➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
AbortSignal.timeout() в действии: на заметку фронтенд-разработчику

Поиграть можно здесь

➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Самый простой способ вертикального центрирования контента в макете блока: на заметку фронтенд-разработчику

Поиграть можно здесь

➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Для повышения производительности загружайте изображения в зависимости от размера области просмотра, используя атрибуты srcset и size HTML-элемента img.

➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
HTML-элемент <progress> в действии: на заметку фронтенд-разработчику

➡️Поиграть можно здесь

➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Range media queries в CSS: на заметку фронтенд-разработчику

➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Простой способ определения наличия в массиве повторяющихся элементов

➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
Новый способ замены элемента в массиве

Актуальные версии всех браузеров поддерживают метод with(index, value) для создания копии массива с заменой одного элемента.

➡️ @tips_frontend
Please open Telegram to view this post
VIEW IN TELEGRAM