Функции с несколькими аргументами
Функция
#JavaScript
Функция
add
принимает два аргумента a
и b
и возвращает их сумму.#JavaScript
Фильтрация массива с использованием метода
Метод
#JavaScript
filter()
Метод
filter
создает новый массив на основе условия фильтрации.#JavaScript
Изменение фона элемента
Этот CSS-код устанавливает светло-серый цвет фона для элементов с классом
#CSS
Этот CSS-код устанавливает светло-серый цвет фона для элементов с классом
container
.#CSS
Изменение шрифта и размера текста
Этот код устанавливает шрифт Arial и размер 24 пикселя для заголовков
#CSS
Этот код устанавливает шрифт Arial и размер 24 пикселя для заголовков
<h1>
.#CSS
Добавление границы к элементам
Этот CSS-код добавляет тонкую черную границу среди элементов с классом
#CSS
Этот CSS-код добавляет тонкую черную границу среди элементов с классом
box
.#CSS
Простой способ упрощения CSS селекторов с использованием
👉 @tips_frontend
:where()
: на заметку фронтенд-разработчику👉 @tips_frontend
This media is not supported in your browser
VIEW IN TELEGRAM
В Chrome Dev Tools мы можем переопределять заголовки ответов, что может быть удобно для локальной обработки ошибок CORS до тех пор, пока они не будут исправлены на уровне сервера.
👉 @tips_frontend
👉 @tips_frontend
Упрощение группировки данных в JavaScript с помощью
👉 @tips_frontend
Object.groupBy()
или Map.groupBy()
: на заметку фронтендеру👉 @tips_frontend
This media is not supported in your browser
VIEW IN TELEGRAM
CSS свойство shape-outside в действии: на заметку фронтенд-разработчику
👉 @tips_frontend
.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 для создания плавной ступенчатой задержки перехода:
➡️ @tips_frontend
.character {
transition-delay:
calc(sin((var(--index) / 12) * 45deg) * 0.475s);
}
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Раскрывающийся список без использования Javascript: HTML-теги
Поиграть можно здесь
➡️ @tips_frontend
<details>
и <summary>
в действииПоиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
AbortSignal.timeout()
в действии: на заметку фронтенд-разработчикуПоиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
Самый простой способ вертикального центрирования контента в макете блока: на заметку фронтенд-разработчику
Поиграть можно здесь
➡️ @tips_frontend
Поиграть можно здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
Для повышения производительности загружайте изображения в зависимости от размера области просмотра, используя атрибуты
➡️ @tips_frontend
srcset
и size
HTML-элемента img
.Please open Telegram to view this post
VIEW IN TELEGRAM
HTML-элемент
➡️ Поиграть можно здесь
➡️ @tips_frontend
<progress>
в действии: на заметку фронтенд-разработчику Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Новый способ замены элемента в массиве
Актуальные версии всех браузеров поддерживают метод with(index, value) для создания копии массива с заменой одного элемента.
➡️ @tips_frontend
Актуальные версии всех браузеров поддерживают метод with(index, value) для создания копии массива с заменой одного элемента.
Please open Telegram to view this post
VIEW IN TELEGRAM