Don't get caught by a cheater! Telemetrio finds and tags such channels 👉 If you want to see the tag, subscribe

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

Open in Telegram

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

Russia79 588 Technologies & Applications14 703

7 657

Subscribers

+124 hours

-67 days

-3930 days

828

Post views

~ 56124 hours

~ 60648 hours

10.82%

Engagement rate

No data

Posts per day

Ads index

beta

Posts Archive

\n\n🔹 Зачем нужно?\n\n • Позволяет хранить данные прямо в HTML.\n • Удобно для передачи информации в JavaScript.\n • Избавляет от необходимости использовать скрытые инпуты или классы.\n\n⚡️ dataset делает работу с динамическими данными в разметке проще и чище!","datePublished":"2025-02-16T09:00:06Z","dateModified":"2025-02-16T09:00:06Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1040},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3123","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3123","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3123","headline":"Фронтенд Гайд","datePublished":"2025-02-15T09:00:04Z","dateModified":"2025-02-15T09:00:04Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":1012},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3122","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3122","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3122","headline":"Broken Glass Effect Сцена с эффектом сломанного стекла в месте клика.","articleBody":"Broken Glass Effect\n\nСцена с эффектом сломанного стекла в месте клика.","datePublished":"2025-02-14T15:00:06Z","dateModified":"2025-02-14T15:00:06Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":1073},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3121","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3121","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3121","headline":"Фронтенд Гайд","datePublished":"2025-02-14T07:00:04Z","dateModified":"2025-02-14T07:00:04Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1000},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3120","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3120","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3120","headline":"⚙️ CSS в 2025: какие фишки теперь доступны? Краткий обзор новых возможностей CSS, которые стали поддерживатьс…","articleBody":"⚙️ CSS в 2025: какие фишки теперь доступны?\n\nКраткий обзор новых возможностей CSS, которые стали поддерживаться в современных браузерах в 2024 году. Без теории — только список фич, которые стоит изучить и применять уже сейчас.\n\n#Полезное","datePublished":"2025-02-13T15:00:00Z","dateModified":"2025-02-13T15:00:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":1030},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3119","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3119","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3119","headline":"Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 2 часа. ⏰ Когда: 20 февраля в 19:00…","articleBody":"Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 2 часа.\n\n⏰ Когда: 20 февраля в 19:00 по мск.\n\nПогрузитесь в решение реальной задачи и напишите небольшую игру на HTML, JS и CSS, которая работает прямо в браузере 🎮\n\nРасскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе.\n\nКакие JS фреймворки учить: Vue, React, а может, Angular?\n\nЗадайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.\n\n🎁 Всем, кто зарегистрировался - гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - карта компетенций начинающего Frontend-разработчика и гайд «Как опубликовать страницу в интернете при помощи GitHub Pages»","datePublished":"2025-02-13T10:59:58Z","dateModified":"2025-02-26T20:29:41Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":914},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3118","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3118","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3118","headline":"javascript-algorithms Этот репозиторий содержит JavaScript-примеры многих популярных алгоритмов и структур да…","articleBody":"javascript-algorithms\n\nЭтот репозиторий содержит JavaScript-примеры многих популярных алгоритмов и структур данных.\n\n#GitHub","datePublished":"2025-02-13T07:00:01Z","dateModified":"2025-02-13T07:00:01Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":917},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3117","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3117","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3117","headline":"Фронтенд Гайд","datePublished":"2025-02-12T15:00:03Z","dateModified":"2025-02-12T15:00:03Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":961},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3116","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3116","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3116","headline":"⚙️ JavaScript Set и Map: За пределами массивов и объектов Как эффективно обрабатывать уникальные значения и п…","articleBody":"⚙️ JavaScript Set и Map: За пределами массивов и объектов\n\nКак эффективно обрабатывать уникальные значения и пары ключ-значение, избегая принудительного приведения типов и потери производительности?\n\n#Полезное","datePublished":"2025-02-12T07:00:01Z","dateModified":"2025-02-12T07:00:01Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":1035},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3115","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3115","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3115","headline":"free-programming-books Один из самых популярных и рейтинговых репозиториев на Github, «бесплатные книги по пр…","articleBody":"free-programming-books\n\nОдин из самых популярных и рейтинговых репозиториев на Github, «бесплатные книги по программированию» содержит не только книги, как следует из названия, но и потрясающие бесплатные онлайн-курсы, подкасты/скринкасты. А также интерактивные ресурсы по программированию, наборы задач, соревновательное программирование и шпаргалки.\n\nИ самое приятное — все это доступно на огромном количестве различных языков.\n\n#GitHub","datePublished":"2025-02-11T07:00:06Z","dateModified":"2025-02-11T07:00:06Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":989},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3114","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3114","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3114","headline":"Multiple Glow effects Button Анимированная кнопка с различными эффектами свечения","articleBody":"Multiple Glow effects Button\n\nАнимированная кнопка с различными эффектами свечения","datePublished":"2025-02-10T15:00:03Z","dateModified":"2025-02-10T15:00:03Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":932},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3113","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3113","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3113","headline":"Фронтенд Гайд","datePublished":"2025-02-10T07:00:00Z","dateModified":"2025-02-10T07:00:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":982},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}}]}

7 654

Универсальный подход к адаптивному веб-дизайну интерфейсов Stretch, Scale, Switch (SSS) Создание адаптивных версий интерфейса это боль многих дизайнеров и, как следствие, разработчиков. Разные экраны, хаос в макетах, непонимание между специалистами… Но есть способ сделать адаптацию проще, предсказуемее и удобнее для всех. В этой статье я предложу вам подход, который сократит количество макетов и сделает интерфейс аккуратным на любом устройстве. Готовы взглянуть на адаптацию под новым углом?

7 654

developer-roadmap Зашли в тупик или нуждаетесь в совете как начать? Или запутались между фреймворками и инструментами? Тогда этот репозиторий для вас. Владелец проделал отличную работу как для новичков, так и для экспертов. Вы получите общее представление о том, где находитесь и куда вам нужно двигаться. Цель этих дорожных карт — дать вам представление о перспективе и направить вас, в случае замешательства, куда двигаться дальше, а не призывать вас выбирать то, что модно. Вы должны понять, почему один инструмент лучше подходит для некоторых случаев, чем другой, и помнить, что модный и современный никогда не означает лучший для работы. #GitHub

7 654

Neuro Noise (GLSL Shader) Интерактивный фон с эффектом при перемещении курсора

7 654

Button with tooltip hover timing feedback Панель плеера с подсказками при наведении

7 654

Как работает transform: scale() в CSS?

Anonymous voting

7 654

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка для вас и 3-х ваших близких 30 дней бесплатно. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте сейчас❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

7 654

Как работает dataset в JavaScript? Свойство dataset позволяет получать и изменять пользовательские атрибуты data-* в HTML-элементах. ✅ Пример:

<button id="btn" data-user-id="42">Click me</button>

<script>
  const btn = document.getElementById("btn");
  console.log(btn.dataset.userId); // "42"

  btn.dataset.userId = "99"; // Изменение значения
</script>

🔹 Зачем нужно? • Позволяет хранить данные прямо в HTML. • Удобно для передачи информации в JavaScript. • Избавляет от необходимости использовать скрытые инпуты или классы. ⚡️ dataset делает работу с динамическими данными в разметке проще и чище!

7 654

Broken Glass Effect Сцена с эффектом сломанного стекла в месте клика.

7 654

Как z-index влияет на отображение элементов в CSS?

Anonymous voting

7 654

⚙️ CSS в 2025: какие фишки теперь доступны? Краткий обзор новых возможностей CSS, которые стали поддерживаться в современных браузерах в 2024 году. Без теории — только список фич, которые стоит изучить и применять уже сейчас. #Полезное

7 654

Бесплатный практический вебинар: Веб-разработчик: с нуля до мини-игры за 2 часа. ⏰ Когда: 20 февраля в 19:00 по мск. Погрузитесь в решение реальной задачи и напишите небольшую игру на HTML, JS и CSS, которая работает прямо в браузере 🎮 Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular? Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии. 🎁 Всем, кто зарегистрировался - гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - карта компетенций начинающего Frontend-разработчика и гайд «Как опубликовать страницу в интернете при помощи GitHub Pages»

7 654

javascript-algorithms Этот репозиторий содержит JavaScript-примеры многих популярных алгоритмов и структур данных. #GitHub

7 654

⚙️ JavaScript Set и Map: За пределами массивов и объектов Как эффективно обрабатывать уникальные значения и пары ключ-значение, избегая принудительного приведения типов и потери производительности? #Полезное

7 654

free-programming-books Один из самых популярных и рейтинговых репозиториев на Github, «бесплатные книги по программированию» содержит не только книги, как следует из названия, но и потрясающие бесплатные онлайн-курсы, подкасты/скринкасты. А также интерактивные ресурсы по программированию, наборы задач, соревновательное программирование и шпаргалки. И самое приятное — все это доступно на огромном количестве различных языков. #GitHub

7 654

Multiple Glow effects Button Анимированная кнопка с различными эффектами свечения

7 654

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

Anonymous voting