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 406Technologies & Applications14 814

7 647

Subscribers

+124 hours

-137 days

-2830 days

904

Post views

~ 56224 hours

~ 62148 hours

11.82%

Engagement rate

No data

Posts per day

Ads index

Posts Archive

\n\n📌В этом примере focus() автоматически активирует поле ввода при загрузке страницы\n\nfocus() удобно использовать для навигации по формам, активации поиска, подсветки ошибок или управления клавиатурным вводом. Это помогает сделать интерфейс более интуитивным и доступным","datePublished":"2025-10-12T09:03:37Z","dateModified":"2025-10-12T09:03:37Z","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":659},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":2,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3549","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3549","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3549","headline":"Фронтенд Гайд","datePublished":"2025-10-11T09:01:40Z","dateModified":"2025-10-11T09:01:40Z","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":625},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3548","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3548","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3548","headline":"👩‍💻 Linear-gradient button animation — Градиентный контур у кнопки, который переливается при наведении курсор…","articleBody":"👩‍💻 Linear-gradient button animation — Градиентный контур у кнопки, который переливается при наведении курсора мыши\n\nСделано на CSS\n\n🔗 Открыть код","datePublished":"2025-10-10T15:03:18Z","dateModified":"2025-10-10T15:03:18Z","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":657},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3547","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3547","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3547","headline":"Фронтенд Гайд","datePublished":"2025-10-10T07:01:51Z","dateModified":"2025-10-10T07:01:51Z","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":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":673},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3546","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3546","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3546","headline":"⚙️ Мой список вопросов о CSS для собеседования в 2025 году Я обновил список вопросов для проверки знаний CSS…","articleBody":"⚙️ Мой список вопросов о CSS для собеседования в 2025 году\n\nЯ обновил список вопросов для проверки знаний CSS — с фокусом на новые фичи и неожиданные нюансы. Попробуйте пройти этот мини-тест и проверьте, насколько хорошо вы чувствуете современный CSS.\n\n🔗 Читать статью","datePublished":"2025-10-09T15:02:01Z","dateModified":"2025-10-09T15:02: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":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":623},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3545","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3545","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3545","headline":"Фронтенд Гайд","datePublished":"2025-10-09T06:37:57Z","dateModified":"2025-10-09T06:37:57Z","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":594},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3544","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3544","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3544","headline":"Фронтенд Гайд","datePublished":"2025-10-08T15:05:18Z","dateModified":"2025-10-08T15:05:18Z","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":640},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3543","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3543","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3543","headline":"👩‍💻 Song Selector — Анимированный селектор трека в виде карусели Сделано на SCSS 🔗 Открыть код","articleBody":"👩‍💻 Song Selector — Анимированный селектор трека в виде карусели\n\nСделано на SCSS\n\n🔗 Открыть код","datePublished":"2025-10-08T07:00:33Z","dateModified":"2025-10-08T07:00:33Z","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":648},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3542","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3542","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3542","headline":"⚙️ Почему @starting-style не заменит keyframes (пока) Разбираем, как новое правило должно было сделать анимац…","articleBody":"⚙️ Почему @starting-style не заменит keyframes (пока)\n\nРазбираем, как новое правило должно было сделать анимации проще, почему на практике всё сложнее, и когда лучше остаться с проверенными keyframes.\n\n🔗 Читать статью","datePublished":"2025-10-07T15:05:18Z","dateModified":"2025-10-07T15:05:18Z","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":635},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3541","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3541","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3541","headline":"Фронтенд Гайд","datePublished":"2025-10-07T07:02:34Z","dateModified":"2025-10-07T07:02:34Z","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":599},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3540","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3540","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3540","headline":"👩‍💻 Animated gradient button Сделано на HTML и SCSS 🔗 Открыть код","articleBody":"👩‍💻 Animated gradient button\n\nСделано на HTML и SCSS\n\n🔗 Открыть код","datePublished":"2025-10-06T15:02:34Z","dateModified":"2025-10-06T15:02:34Z","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":616},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3539","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3539","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3539","headline":"Биотредин для улучшения памяти, концентрации внимания Препарат для улучшения памяти, концентрации внимания и…","articleBody":"Биотредин для улучшения памяти, концентрации внимания\n\nПрепарат для улучшения памяти, концентрации внимания и работы мозга. Цена от 110 р. \n\nУзнать больше\n\nЕсть противопоказания. Посоветуйтесь с врачом.\n\n#реклама \nbiotredin.ru\nО рекламодателе","datePublished":"2025-10-06T06:32:48Z","dateModified":"2025-10-08T05:03:49Z","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":399},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3538","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3538","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3538","headline":"Фронтенд Гайд","datePublished":"2025-10-06T06:28:00Z","dateModified":"2025-10-06T06:28: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":612},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3537","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3537","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3537","headline":"❓ Зачем используется метод preventDefault() в JavaScript и когда его применять? Метод preventDefault() отменя…","articleBody":"❓ Зачем используется метод preventDefault() в JavaScript и когда его применять?\n\nМетод preventDefault() отменяет стандартное поведение элемента браузера, не прерывая при этом выполнение других обработчиков. Это удобно, когда нужно полностью контролировать действия пользователя.\n\n✅Пример:\n\n\n\n\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/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":659},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3536","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3536","mainEntityOfPage":"https://telemetr.io/en/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/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":618},{"@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/en/channels/1681900587-frontend_dev5/posts/3535","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3535","mainEntityOfPage":"https://telemetr.io/en/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/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":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":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3534","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3534","mainEntityOfPage":"https://telemetr.io/en/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/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":676},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3533","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3533","mainEntityOfPage":"https://telemetr.io/en/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/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":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":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3532","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3532","mainEntityOfPage":"https://telemetr.io/en/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/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":624},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3531","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3531","mainEntityOfPage":"https://telemetr.io/en/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/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":668},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}}]}

7 648

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

<input type="text" id="username" placeholder="Введите имя">

<script>
  const input = document.getElementById("username");
  window.addEventListener("load", () => input.focus());
</script>

📌В этом примере focus() автоматически активирует поле ввода при загрузке страницы

focus() удобно использовать для навигации по формам, активации поиска, подсветки ошибок или управления клавиатурным вводом. Это помогает сделать интерфейс более интуитивным и доступным

7 648

👩‍💻 Linear-gradient button animation — Градиентный контур у кнопки, который переливается при наведении курсора мыши

Сделано на CSS

🔗 Открыть код

7 648

На мобильных прокрутка «тормозит» из-за обработчиков touchstart/touchmove. Как улучшить скролл без изменения логики?

Anonymous voting

7 648

⚙️ Мой список вопросов о CSS для собеседования в 2025 году

Я обновил список вопросов для проверки знаний CSS — с фокусом на новые фичи и неожиданные нюансы. Попробуйте пройти этот мини-тест и проверьте, насколько хорошо вы чувствуете современный CSS.

🔗 Читать статью

7 648

Картинки вызывают CLS, высота заранее неизвестна. Что делать?

Anonymous voting

7 648

👩‍💻 Song Selector — Анимированный селектор трека в виде карусели

Сделано на SCSS

🔗 Открыть код

7 648

⚙️ Почему @starting-style не заменит keyframes (пока)

Разбираем, как новое правило должно было сделать анимации проще, почему на практике всё сложнее, и когда лучше остаться с проверенными keyframes.

🔗 Читать статью

7 648

В поиске «по мере ввода» надо исключить гонки ответов старых запросов. Что делать?

Anonymous voting

7 648

👩‍💻 Animated gradient button

Сделано на HTML и SCSS

🔗 Открыть код

7 648

Биотредин для улучшения памяти, концентрации внимания Препарат для улучшения памяти, концентрации внимания и работы мозга. Цена от 110 р. Узнать больше Есть противопоказания. Посоветуйтесь с врачом. #реклама biotredin.ru О рекламодателе

7 648

Ссылка открывает внешний сайт в target="_blank". Нужно исключить tabnabbing и не слать Referrer. Что указать?

Anonymous voting

7 648

❓ Зачем используется метод 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() предотвращает перезагрузку страницы при отправке формы.

preventDefault() удобно использовать при работе с формами, ссылками, drag&drop и кастомными UI-элементами. Оно даёт разработчику полный контроль над поведением интерфейса

7 648

👩‍💻 Animated gradient button — Анимация кнопки при наведении

Сделано на HTML и SCSS

🔗 Открыть код

7 648

CORS-запрос с куками из app.example.com к api.example.net. Что нужно?

Anonymous voting

7 648

⚙️ Странные CSS-свойства, но, возможно, полезные

Я собрал список свойств, которые знаю, как работают, но не понимаю, зачем нужны. Делюсь «критическим обзором» и жду от вас примеры пользы — вдруг откроете мне глаза.

🔗 Читать статью

7 648

ниже фолда грузится слишком рано. Нужно понизить сетевой приоритет (без lazy). Что выбрать?

Anonymous voting

7 648