Фронтенд Гайд
Відкрити в Telegram
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов! Все представлено в виде готового кода, бери и юзай в своем проекте. 6ad1a2aabe82d4fbb0d6
Показати більше7 650
Підписники
-324 години
-267 днів
-5030 днів
Архів дописів
\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.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":659},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":4,"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.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":618},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":5,"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.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.telemetr.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":6,"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.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":676},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":7,"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.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":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":8,"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.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":624},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":9,"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.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":668},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":10,"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.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":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":11,"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.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":703},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":12,"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.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":620},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":13,"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.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":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}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3526","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3526","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3526","headline":"Фронтенд Гайд","datePublished":"2025-09-29T07:02:43Z","dateModified":"2025-09-29T07:02:43Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":683},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3525","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3525","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3525","headline":"❓ Зачем используется свойство disabled в HTML и JavaScript и когда его применять? Свойство disabled делает эл…","articleBody":"❓ Зачем используется свойство disabled в HTML и JavaScript и когда его применять?\n\nСвойство disabled делает элемент формы недоступным для взаимодействия. Это полезно, когда нужно временно отключить кнопку, поле ввода или выбор, пока не выполнено условие.\n\n✅Пример:\n\n\n\n\n\n\n📌В этом примере кнопка Отправить становится активной только тогда, когда пользователь ввёл текст.\n\ndisabled удобно использовать при валидации форм, управлении состоянием UI и предотвращении повторных действий (например, двойного клика по кнопке). Это делает интерфейс более надёжным и дружелюбным","datePublished":"2025-09-28T09:00:53Z","dateModified":"2025-09-28T09:00:53Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":705},{"@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}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3524","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3524","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3524","headline":"Фронтенд Гайд","datePublished":"2025-09-27T09:04:29Z","dateModified":"2025-09-27T09:04:29Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":651},{"@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":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3523","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3523","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3523","headline":"👩💻 Smooth Pulse Button — Пульсирующая кнопка для воспроизведения видео Сделано на CSS 🔗 Открыть код","articleBody":"👩💻 Smooth Pulse Button — Пульсирующая кнопка для воспроизведения видео\n\nСделано на CSS\n\n🔗 Открыть код","datePublished":"2025-09-26T15:04:40Z","dateModified":"2025-09-26T15:04:40Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":699},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3522","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3522","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3522","headline":"Фронтенд Гайд","datePublished":"2025-09-26T07:02:00Z","dateModified":"2025-09-26T07:02:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":691},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@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/3521","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3521","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3521","headline":"⚙️ CSS, который все ненавидят: sin() и cos() Мы разберёмся, что делают sin() и cos(), и посмотрим на практиче…","articleBody":"⚙️ CSS, который все ненавидят: sin() и cos()\n\nМы разберёмся, что делают sin() и cos(), и посмотрим на практические примеры: от круговых раскладок до затухающих анимаций.\n\n🔗 Читать статью","datePublished":"2025-09-25T15:01:25Z","dateModified":"2025-09-25T15:01:25Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":670},{"@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":1}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3520","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3520","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3520","headline":"Фронтенд Гайд","datePublished":"2025-09-25T07:01:47Z","dateModified":"2025-09-25T07:01:47Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/uk/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":664},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}}]}
Anonymous voting
Anonymous voting
![]()
ниже фолда грузится слишком рано. Нужно понизить сетевой приоритет (без lazy). Что выбрать?Anonymous voting
Anonymous voting
Anonymous voting
Anonymous voting
7 650
Биотредин для улучшения памяти, концентрации внимания
Препарат для улучшения памяти, концентрации внимания и работы мозга. Цена от 110 р.
Узнать больше
Есть противопоказания. Посоветуйтесь с врачом.
#реклама
biotredin.ru
О рекламодателе
7 650
Ссылка открывает внешний сайт в target="_blank". Нужно исключить tabnabbing и не слать Referrer. Что указать?
7 650
❓ Зачем используется метод
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 650
👩💻 Animated gradient button — Анимация кнопки при наведении
Сделано на HTML и SCSS🔗 Открыть код
7 650
CORS-запрос с куками из app.example.com к api.example.net. Что нужно?
7 650
⚙️ Странные CSS-свойства, но, возможно, полезные
Я собрал список свойств, которые знаю, как работают, но не понимаю, зачем нужны. Делюсь «критическим обзором» и жду от вас примеры пользы — вдруг откроете мне глаза.🔗 Читать статью
7 650
7 650
⚙️ Shadcn для Vue: норм или стрём?
Опыт использования shadcn-vue в продакшн проекте: что работает хорошо, а с чем придется помучиться. Честный обзор популярной UI библиотеки от практикующего разработчика.🔗 Читать статью
7 650
У hero-фона стоит CSS background-image, поверх — только логотип ![]()
. Что станет кандидатом на LCP
7 650
👩💻 Flip-card Menu — Вращение карточек с появлением текстовой информации на обороте
Сделано на CSS🔗 Открыть код
7 650
В есть: (а) классический async, (б) классический defer, (в) модуль type="module". Кто гарантированно выполнится до DOMContentLoaded?
7 650
❓ Зачем используется свойство
disabled в HTML и JavaScript и когда его применять?
Свойство disabled делает элемент формы недоступным для взаимодействия. Это полезно, когда нужно временно отключить кнопку, поле ввода или выбор, пока не выполнено условие.
✅Пример:
<input type="text" id="name" placeholder="Введите имя">
<button id="submitBtn" disabled>Отправить</button>
<script>
const input = document.getElementById("name");
const button = document.getElementById("submitBtn");
input.addEventListener("input", () => {
button.disabled = input.value.trim() === "";
});
</script>disabled удобно использовать при валидации форм, управлении состоянием UI и предотвращении повторных действий (например, двойного клика по кнопке). Это делает интерфейс более надёжным и дружелюбным
7 650
👩💻 Smooth Pulse Button — Пульсирующая кнопка для воспроизведения видео
Сделано на CSS🔗 Открыть код
7 650
⚙️ CSS, который все ненавидят: sin() и cos()
Мы разберёмся, что делают sin() и cos(), и посмотрим на практические примеры: от круговых раскладок до затухающих анимаций.🔗 Читать статью
7 650
Нужно мгновенно показать выбранный пользователем большой файл (видео) в
