لا تقع ضحية للمخادعين! تيليمتريو يكتشف ويُميّز هذه القنوات 👉 إذا كنت تريد رؤية العلامة، اشترك

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

الذهاب إلى القناة على Telegram

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

7 650

المشتركون

-324 ساعات

-267 أيام

-5030 أيام

822

عرض المشاهدات

~ 54324 ساعات

~ 60148 ساعات

10.75%

معدل المشاركة

لا توجد بيانات

المشاركات في اليوم

Ads index

beta

أرشيف المشاركات

\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/ar/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/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":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3549","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3549","mainEntityOfPage":"https://telemetr.io/ar/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/ar/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/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":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3548","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3548","mainEntityOfPage":"https://telemetr.io/ar/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/ar/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/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":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3547","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3547","mainEntityOfPage":"https://telemetr.io/ar/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/ar/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/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":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3546","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3546","mainEntityOfPage":"https://telemetr.io/ar/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/ar/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/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":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3545","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3545","mainEntityOfPage":"https://telemetr.io/ar/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/ar/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/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":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3544","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3544","mainEntityOfPage":"https://telemetr.io/ar/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/ar/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/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":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3543","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3543","mainEntityOfPage":"https://telemetr.io/ar/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/ar/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/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":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3542","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3542","mainEntityOfPage":"https://telemetr.io/ar/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/ar/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/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":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3541","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3541","mainEntityOfPage":"https://telemetr.io/ar/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/ar/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/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":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3540","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3540","mainEntityOfPage":"https://telemetr.io/ar/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/ar/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ar/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}]}}]}

7 650

На мобильных 100vh уходит под адресную строку. Нужно, чтобы блок всегда занимал видимую высоту при появлении/скрытии UI. Что выбрать?

Anonymous voting

7 650

⚙️ Изнутри жюри: как мы выбирали лучшую работу на чемпионате по html верстке

Рассказываю, как проходил чемпионат от HTML Academy глазами жюри: на что реально смотрят фронтенд-лиды, какие решения отличают профи от просто хороших верстальщиков и где кроется магия качества.

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

7 650

Элемент с z-index: 9999 остаётся под соседним. У его родителя есть transform. Что верно?

Anonymous voting

7 650

👩‍💻 Pac-Man Toggle — Анимированный переключатель в виде пакмена

Сделано на CSS

🔗 Открыть код

7 650

⚙️ Зачем делать акценты в шрифтах: история о том, как типографика управляет вниманием

Разбираюсь, как акценты в шрифтах направляют внимание, создают ритм и помогают читателю не утонуть в потоке текста — не про «красоту», а про осмысленную типографику.

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

7 650

Нужен интерактивный элемент: доступный с клавиатуры, с корректной семантикой для скринридеров и управлением фокусом «из коробки». Что выбрать?

Anonymous voting

7 650

👩‍💻 Radio Button Dot-Slider — Форма переключателя с возможностью выбора одного из предложенных вариантов

Сделано на CSS

🔗 Открыть код

7 650

Куки помечены SameSite=Lax. В каком кросс-сайт сценарии они отправятся?

Anonymous voting

7 650

❓ Зачем используется метод 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 650

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

Сделано на CSS

🔗 Открыть код

7 650

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

Anonymous voting

7 650

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

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

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