Не попадитесь на канал ботавода! Telemetrio находит и помечает такие каналы 👉 Хотите видеть метку — оформите подписку

Фронтенд Гайд

Открыть в Telegram

Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов! Все представлено в виде готового кода, бери и юзай в своем проекте. 6ad1a2aabe82d4fbb0d6

Больше

Россия79 662 Технологии и приложения14 701

7 653

Подписчики

+824 часа

-157 дней

-4030 дней

822

Просмотры поста

~ 55124 часа

~ 59948 часов

10.74%

Коэффициент вовлеченности

Нет данных

Постов в день

Ads index

beta

Архив постов

\n\n📌 В этом примере скрипт начнёт загружаться параллельно с HTML и выполнится, как только загрузится — вне зависимости от состояния DOM.\n\nasync удобно использовать для независимых скриптов, таких как аналитика, реклама или внешние виджеты, которые не зависят от DOM и других скриптов. Это помогает улучшить время загрузки страницы.","datePublished":"2025-05-25T09:00:00Z","dateModified":"2025-05-25T09:00:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":783},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3306","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3306","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3306","headline":"Фронтенд Гайд","datePublished":"2025-05-24T09:00:00Z","dateModified":"2025-05-24T09:00:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":739},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3305","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3305","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3305","headline":"Bouncy image radio group Галерея с плавной анимацией при переключении","articleBody":"Bouncy image radio group\n\nГалерея с плавной анимацией при переключении","datePublished":"2025-05-23T15:00:01Z","dateModified":"2025-05-23T15:00:01Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":783},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3304","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3304","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3304","headline":"Фронтенд Гайд","datePublished":"2025-05-23T07:00:01Z","dateModified":"2025-05-23T07:00:01Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":718},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3303","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3303","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3303","headline":"Автоматический подбор браузером контрастного цвета в CSS Я покажу, как contrast-color() в CSS сам решает, бел…","articleBody":"Автоматический подбор браузером контрастного цвета в CSS\n\nЯ покажу, как contrast-color() в CSS сам решает, белым писать текст или чёрным, и как это спасает от визуального позора. Больше никакой ручной игры в угадайку","datePublished":"2025-05-22T15:00:00Z","dateModified":"2025-05-22T15:00:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":734},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3302","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3302","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3302","headline":"Фронтенд Гайд","datePublished":"2025-05-22T07:00:01Z","dateModified":"2025-05-22T07:00:01Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":713},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3301","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3301","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3301","headline":"Фронтенд Гайд","datePublished":"2025-05-21T15:00:00Z","dateModified":"2025-05-21T15:00:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":730},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3300","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3300","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/3300","headline":"Very cool animated text Интересная анимация спирального текста","articleBody":"Very cool animated text\n\nИнтересная анимация спирального текста","datePublished":"2025-05-21T07:00:01Z","dateModified":"2025-05-21T07:00:01Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":725},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}}]}

7 653

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

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

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

includes() удобно использовать при валидации, фильтрации, поиске совпадений, а также при условной отрисовке в UI. Он делает код короче и читаемее по сравнению с indexOf и другими устаревшими подходами.

7 653

Single Keyframe Tricks Большой набор анимированных кнопок

7 653

Что из перечисленного наиболее точно описывает reflow в контексте браузерного рендеринга?

Anonymous voting

7 653

Как устроен event loop в Node.js Разбирается внутрянка Node.js: что делает libuv, зачем фаз столько и как всё это уживается в одном потоке. После прочтения цикл событий больше не будет магией.

7 653

Что происходит при использовании фазы перехвата (capturing) в обработке событий?

Anonymous voting

7 653

Text-Animation-test Простая сцена с анимированным текстом

7 653

Как использовать любой CSS-фреймворк в вашем проекте Автор показывает, как настроить Bootstrap Alert под свой стиль через SCSS и дизайн-систему, чтобы больше не страдать от серых прямоугольников по умолчанию

7 653

Какое из утверждений наиболее точно описывает разницу между == и === в JavaScript?

Anonymous voting

7 653

Card Mouse Hover Effect Карточки с интересным эффектом при наведении

7 653

Что происходит с объектом после применения Object.freeze()?

Anonymous voting

7 653

❓ Зачем используется атрибут async в теге script и когда его применять Атрибут async указывает браузеру загружать скрипт в фоновом режиме и выполнять его сразу после загрузки, не дожидаясь полной обработки HTML. Это ускоряет загрузку страницы, но может привести к непредсказуемому порядку выполнения скриптов. ✅ Пример:

<script src="script.js" async></script>

📌 В этом примере скрипт начнёт загружаться параллельно с HTML и выполнится, как только загрузится — вне зависимости от состояния DOM.

async удобно использовать для независимых скриптов, таких как аналитика, реклама или внешние виджеты, которые не зависят от DOM и других скриптов. Это помогает улучшить время загрузки страницы.

7 653

Bouncy image radio group Галерея с плавной анимацией при переключении

7 653

Какое утверждение наиболее точно описывает поведение метода bind()?

Anonymous voting

7 653

Автоматический подбор браузером контрастного цвета в CSS Я покажу, как contrast-color() в CSS сам решает, белым писать текст или чёрным, и как это спасает от визуального позора. Больше никакой ручной игры в угадайку

7 653

Какое поведение наиболее точно описывает вызов event.preventDefault()?

Anonymous voting

7 653

Very cool animated text Интересная анимация спирального текста