Фронтенд Гайд
Відкрити в Telegram
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов! Все представлено в виде готового кода, бери и юзай в своем проекте. 6ad1a2aabe82d4fbb0d6
Показати більше7 743
Підписники
-624 години
-107 днів
+330 день
Архів дописів
\n\n📌В этом примере preventDefault() предотвращает перезагрузку страницы при отправке формы.\n\npreventDefault() удобно использовать при работе с формами, ссылками, drag&drop и кастомными UI-элементами. Оно даёт разработчику полный контроль над поведением интерфейса","datePublished":"2025-10-05T08:59:55Z","dateModified":"2025-10-05T08:59:55Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":659},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3536","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3536","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3536","headline":"Фронтенд Гайд","datePublished":"2025-10-04T09:04:07Z","dateModified":"2025-10-04T09:04:07Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":618},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3535","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3535","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3535","headline":"👩💻 Animated gradient button — Анимация кнопки при наведении Сделано на HTML и SCSS 🔗 Открыть код","articleBody":"👩💻 Animated gradient button — Анимация кнопки при наведении\n\nСделано на HTML и SCSS\n\n🔗 Открыть код","datePublished":"2025-10-03T15:01:36Z","dateModified":"2025-10-03T15:01:36Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":675},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3534","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3534","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3534","headline":"Фронтенд Гайд","datePublished":"2025-10-03T07:01:17Z","dateModified":"2026-06-11T03:46:13Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":676},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3533","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3533","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3533","headline":"⚙️ Странные CSS-свойства, но, возможно, полезные Я собрал список свойств, которые знаю, как работают, но не п…","articleBody":"⚙️ Странные CSS-свойства, но, возможно, полезные\n\nЯ собрал список свойств, которые знаю, как работают, но не понимаю, зачем нужны. Делюсь «критическим обзором» и жду от вас примеры пользы — вдруг откроете мне глаза.\n\n🔗 Читать статью","datePublished":"2025-10-02T15:00:58Z","dateModified":"2025-10-02T15:00:58Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":671},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3532","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3532","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3532","headline":"Фронтенд Гайд","datePublished":"2025-10-02T07:03:00Z","dateModified":"2025-10-02T07:03:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":624},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3531","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3531","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3531","headline":"Фронтенд Гайд","datePublished":"2025-10-01T15:03:32Z","dateModified":"2025-10-01T15:03:32Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":668},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3530","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3530","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3530","headline":"👩💻 Linear preloader — Анимация загрузки в виде лазера Сделано на HTML и CSS 🔗 Открыть код","articleBody":"👩💻 Linear preloader — Анимация загрузки в виде лазера\n\nСделано на HTML и CSS\n\n🔗 Открыть код","datePublished":"2025-10-01T07:00:40Z","dateModified":"2025-10-01T07:00:40Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":690},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3529","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3529","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3529","headline":"⚙️ Shadcn для Vue: норм или стрём? Опыт использования shadcn-vue в продакшн проекте: что работает хорошо, а с…","articleBody":"⚙️ Shadcn для Vue: норм или стрём?\n\nОпыт использования shadcn-vue в продакшн проекте: что работает хорошо, а с чем придется помучиться. Честный обзор популярной UI библиотеки от практикующего разработчика.\n\n🔗 Читать статью","datePublished":"2025-09-30T15:04:16Z","dateModified":"2025-09-30T15:04:16Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":703},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3528","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3528","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3528","headline":"Фронтенд Гайд","datePublished":"2025-09-30T07:04:50Z","dateModified":"2025-09-30T07:04:50Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":620},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3527","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3527","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3527","headline":"👩💻 Flip-card Menu — Вращение карточек с появлением текстовой информации на обороте Сделано на CSS 🔗 Открыть…","articleBody":"👩💻 Flip-card Menu — Вращение карточек с появлением текстовой информации на обороте\n\nСделано на CSS\n\n🔗 Открыть код","datePublished":"2025-09-29T15:02:43Z","dateModified":"2025-09-29T15:02:43Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":655},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}}]}
Anonymous voting
Anonymous voting
Anonymous voting
![]()
ниже фолда грузится слишком рано. Нужно понизить сетевой приоритет (без lazy). Что выбрать?Anonymous voting
Anonymous voting
7 744
⚙️ Мой список вопросов о CSS для собеседования в 2025 году
Я обновил список вопросов для проверки знаний CSS — с фокусом на новые фичи и неожиданные нюансы. Попробуйте пройти этот мини-тест и проверьте, насколько хорошо вы чувствуете современный CSS.🔗 Читать статью
7 744
⚙️ Почему @starting-style не заменит keyframes (пока)
Разбираем, как новое правило должно было сделать анимации проще, почему на практике всё сложнее, и когда лучше остаться с проверенными keyframes.🔗 Читать статью
7 744
В поиске «по мере ввода» надо исключить гонки ответов старых запросов. Что делать?
7 744
Биотредин для улучшения памяти, концентрации внимания
Препарат для улучшения памяти, концентрации внимания и работы мозга. Цена от 110 р.
Узнать больше
Есть противопоказания. Посоветуйтесь с врачом.
#реклама
biotredin.ru
О рекламодателе
7 744
Ссылка открывает внешний сайт в target="_blank". Нужно исключить tabnabbing и не слать Referrer. Что указать?
7 744
❓ Зачем используется метод
preventDefault() в JavaScript и когда его применять?
Метод preventDefault() отменяет стандартное поведение элемента браузера, не прерывая при этом выполнение других обработчиков. Это удобно, когда нужно полностью контролировать действия пользователя.
✅Пример:
<form id="loginForm">
<button type="submit">Войти</button>
</form>
<script>
const form = document.getElementById("loginForm");
form.addEventListener("submit", (event) => {
event.preventDefault(); // отменяем стандартную отправку формы
console.log("Форма не перезагружается, можно обработать данные вручную");
});
</script>preventDefault() удобно использовать при работе с формами, ссылками, drag&drop и кастомными UI-элементами. Оно даёт разработчику полный контроль над поведением интерфейса
7 744
👩💻 Animated gradient button — Анимация кнопки при наведении
Сделано на HTML и SCSS🔗 Открыть код
7 744
CORS-запрос с куками из app.example.com к api.example.net. Что нужно?
7 744
⚙️ Странные CSS-свойства, но, возможно, полезные
Я собрал список свойств, которые знаю, как работают, но не понимаю, зачем нужны. Делюсь «критическим обзором» и жду от вас примеры пользы — вдруг откроете мне глаза.🔗 Читать статью
7 744
7 744
⚙️ Shadcn для Vue: норм или стрём?
Опыт использования shadcn-vue в продакшн проекте: что работает хорошо, а с чем придется помучиться. Честный обзор популярной UI библиотеки от практикующего разработчика.🔗 Читать статью
7 744
У hero-фона стоит CSS background-image, поверх — только логотип ![]()
. Что станет кандидатом на LCP
7 744
👩💻 Flip-card Menu — Вращение карточек с появлением текстовой информации на обороте
Сделано на CSS🔗 Открыть код
