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

\n\n📌В этом примере при каждом клике меню будет показываться и скрываться за счёт переключения класса hidden\n\ntoggle() удобно использовать для работы с выпадающими меню, модальными окнами, переключателями тем и интерактивными UI-элементами. Код становится чище и нагляднее, без лишних if","datePublished":"2025-10-19T09:02:07Z","dateModified":"2025-10-19T09:02: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":686},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3561","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3561","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3561","headline":"Фронтенд Гайд","datePublished":"2025-10-18T08:59:54Z","dateModified":"2025-10-18T08:59:54Z","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":616},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3560","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3560","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3560","headline":"👩‍💻 cool hover card — Эффект наведения на карточку с плавным размытием изображения Сделано на CSS 🔗 Открыть к…","articleBody":"👩‍💻 cool hover card — Эффект наведения на карточку с плавным размытием изображения\n\nСделано на CSS\n\n🔗 Открыть код","datePublished":"2025-10-17T14:59:54Z","dateModified":"2025-10-17T14:59:54Z","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":668},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3559","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3559","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3559","headline":"Фронтенд Гайд","datePublished":"2025-10-17T06:59:54Z","dateModified":"2025-10-17T06:59:54Z","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":676},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@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/3558","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3558","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3558","headline":"⚙️ Изнутри жюри: как мы выбирали лучшую работу на чемпионате по html верстке Рассказываю, как проходил чемпио…","articleBody":"⚙️ Изнутри жюри: как мы выбирали лучшую работу на чемпионате по html верстке\n\nРассказываю, как проходил чемпионат от HTML Academy глазами жюри: на что реально смотрят фронтенд-лиды, какие решения отличают профи от просто хороших верстальщиков и где кроется магия качества.\n\n🔗 Читать статью","datePublished":"2025-10-16T15:00:50Z","dateModified":"2025-10-16T15:00: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":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":690},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3557","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3557","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3557","headline":"Фронтенд Гайд","datePublished":"2025-10-16T07:02:44Z","dateModified":"2025-10-16T07:02:44Z","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":676},{"@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":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3556","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3556","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3556","headline":"Фронтенд Гайд","datePublished":"2025-10-15T15:01:49Z","dateModified":"2025-10-15T15:01:49Z","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":644},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3555","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3555","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3555","headline":"👩‍💻 Pac-Man Toggle — Анимированный переключатель в виде пакмена Сделано на CSS 🔗 Открыть код","articleBody":"👩‍💻 Pac-Man Toggle — Анимированный переключатель в виде пакмена\n\nСделано на CSS\n\n🔗 Открыть код","datePublished":"2025-10-15T07:01:56Z","dateModified":"2025-10-15T07:01:56Z","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":678},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3554","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3554","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3554","headline":"⚙️ Зачем делать акценты в шрифтах: история о том, как типографика управляет вниманием Разбираюсь, как акценты…","articleBody":"⚙️ Зачем делать акценты в шрифтах: история о том, как типографика управляет вниманием\n\nРазбираюсь, как акценты в шрифтах направляют внимание, создают ритм и помогают читателю не утонуть в потоке текста — не про «красоту», а про осмысленную типографику.\n\n🔗 Читать статью","datePublished":"2025-10-14T15:02:04Z","dateModified":"2025-10-14T15:02:04Z","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":673},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@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/3553","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3553","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3553","headline":"Фронтенд Гайд","datePublished":"2025-10-14T07:01:39Z","dateModified":"2025-10-14T07:01:39Z","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":569},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3552","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3552","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3552","headline":"👩‍💻 Radio Button Dot-Slider — Форма переключателя с возможностью выбора одного из предложенных вариантов Сдел…","articleBody":"👩‍💻 Radio Button Dot-Slider — Форма переключателя с возможностью выбора одного из предложенных вариантов\n\nСделано на CSS\n\n🔗 Открыть код","datePublished":"2025-10-13T15:04:59Z","dateModified":"2025-10-13T15:04:59Z","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":599},{"@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/3551","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3551","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3551","headline":"Фронтенд Гайд","datePublished":"2025-10-13T07:04:52Z","dateModified":"2025-10-13T07:04:52Z","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":636},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3550","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3550","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3550","headline":"❓ Зачем используется метод focus() в JavaScript и когда его применять? Метод focus() устанавливает курсор вво…","articleBody":"❓ Зачем используется метод focus() в JavaScript и когда его применять?\n\nМетод focus() устанавливает курсор ввода в элемент формы, делая его активным для пользователя. Это удобно для улучшения UX — например, при автоматическом фокусе на первом поле формы или после действий пользователя.\n\n✅Пример:\n\n\n\n\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/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":659},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3549","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3549","mainEntityOfPage":"https://telemetr.io/uk/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/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":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":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3548","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3548","mainEntityOfPage":"https://telemetr.io/uk/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/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":657},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3547","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3547","mainEntityOfPage":"https://telemetr.io/uk/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/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":673},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}}]}