Фронтенд Гайд
7.34K subscribers
601 photos
298 videos
267 links
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов!

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

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
Как устроен event loop в Node.js

Разбирается внутрянка Node.js: что делает libuv, зачем фаз столько и как всё это уживается в одном потоке. После прочтения цикл событий больше не будет магией.
This media is not supported in your browser
VIEW IN TELEGRAM
Single Keyframe Tricks

Большой набор анимированных кнопок
Зачем используется метод includes() в JavaScript и когда его применять?

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

Пример:

const fruits = ["apple", "banana", "orange"];
const hasBanana = fruits.includes("banana");
console.log(hasBanana); // true


📌 В этом примере includes() возвращает true, потому что значение "banana" присутствует в массиве.

includes() удобно использовать при валидации, фильтрации, поиске совпадений, а также при условной отрисовке в UI. Он делает код короче и читаемее по сравнению с indexOf и другими устаревшими подходами.
3
This media is not supported in your browser
VIEW IN TELEGRAM
Toggle Pill

Набор переключателей с разными стилями анимаций
Настройка location в Angie. Разделение динамических и статических запросов

Объясняю, как работает директива location в Angie и зачем она вообще нужна. Разбираемся, как сервер понимает, что отдавать: статичку, динамику или вообще 404
This media is not supported in your browser
VIEW IN TELEGRAM
3D wave animation

Анимированная галерея с эффектом волны
😁5💯2
Как сделать ужасный для пользователя интерфейс. Коллекция HTML/CSS лайфхаков

Собрал коллекцию HTML и CSS-ужасов для тех, кто вдруг решил саботировать интерфейс. Всё максимально вредно, эффективно и бесит пользователя до искр в глазах
This media is not supported in your browser
VIEW IN TELEGRAM
CSS-only Custom range slider

Интересный слайдер с динамичным отображением
Зачем используется метод some() в JavaScript и когда его применять?

Метод some() проверяет, удовлетворяет ли хотя бы один элемент массива заданному условию. Это удобно, когда нужно быстро узнать, есть ли подходящий элемент, не перебирая весь массив вручную.

Пример:

const users = [
{ name: "Alice", isAdmin: false },
{ name: "Bob", isAdmin: true },
{ name: "Charlie", isAdmin: false }
];

const hasAdmin = users.some(user => user.isAdmin);
console.log(hasAdmin); // true


📌 В этом примере some() вернёт true, потому что в массиве есть хотя бы один пользователь с isAdmin: true.

some() удобно использовать для валидации, проверки доступа, поиска флагов или условий в списках. Это делает код чище, короче и более декларативным, особенно при работе с массивами объектов.
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Hover Glyph Button

Кнопка с анимированным эффектом при наведении
Перенаправления в Angie: return, rewrite и примеры их применения

В этой статье мы разберём все основные методы перенаправлений: от простых до сложных. Начнём с общего принципа обработки директив в модуле rewrite.