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

Авторский канал, сотрудничество: @hand_of_ragnaros
Download Telegram
Поиск индекса элемента в массиве

Мы находим индекс элемента 'банан'.

#JavaScript
Удаление элемента по индексу

Метод splice удаляет элементы по индексу.

#JavaScript
Объединение массивов

Массивы объединяются с помощью метода concat.

#JavaScript
Итерация по массиву с использованием цикла

Мы проходим по массиву с помощью цикла for.

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

Метод forEach выполняет функцию для каждого элемента массива.

#JavaScript
Функции с несколькими аргументами

Функция 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