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

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

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

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

7 650

المشتركون

-324 ساعات

-267 أيام

-5030 أيام

822

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

~ 54324 ساعات

~ 60148 ساعات

10.75%

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

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

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

Ads index

beta

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

\n\n📌В этом примере value сначала задаёт значение в поле ввода, а затем позволяет его прочитать.\n\nvalue удобно использовать для работы с формами, валидацией, автозаполнением, поиска и динамического изменения данных. Это ключевой инструмент при создании интерактивных интерфейсов.","datePublished":"2025-09-07T09:01:26Z","dateModified":"2025-09-07T09:01:26Z","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":662},{"@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":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3487","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3487","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3487","headline":"Фронтенд Гайд","datePublished":"2025-09-06T09:03:50Z","dateModified":"2025-09-06T09:03:50Z","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":637},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3486","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3486","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3486","headline":"👩‍💻 Morphing Submit Button — Анимированная кнопка загрузки после нажатия на \"Submit\" Сделана на CSS, SVG и Ja…","articleBody":"👩‍💻 Morphing Submit Button — Анимированная кнопка загрузки после нажатия на \"Submit\"\n\nСделана на CSS, SVG и JavaScript\n\n🔗 Открыть код","datePublished":"2025-09-05T15:04:36Z","dateModified":"2025-09-05T15:04:36Z","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":666},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@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/3485","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3485","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3485","headline":"Фронтенд Гайд","datePublished":"2025-09-05T06:13:14Z","dateModified":"2025-09-05T06:13:14Z","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":675},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3484","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3484","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3484","headline":"⚙️ HTML и CSS осенью 2025. Эти новые фичи я рекомендую изучить прямо сейчас Покажу свежие фишки HTML/CSS, кот…","articleBody":"⚙️ HTML и CSS осенью 2025. Эти новые фичи я рекомендую изучить прямо сейчас\n\nПокажу свежие фишки HTML/CSS, которые уже поддерживаются: что они чинят, где применить, на что смотреть. Короткие примеры, ссылки и мои фавориты — чтобы выбрать, что копать глубже.\n\n🔗 Читать статью","datePublished":"2025-09-04T15:03:57Z","dateModified":"2025-09-04T15:03: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":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":676},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3483","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3483","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3483","headline":"Фронтенд Гайд","datePublished":"2025-09-04T07:03:42Z","dateModified":"2025-09-04T07:03:42Z","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":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":669},{"@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":3}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3482","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3482","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3482","headline":"Фронтенд Гайд","datePublished":"2025-09-03T15:05:44Z","dateModified":"2025-09-03T15:05:44Z","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":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":675},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3481","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3481","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3481","headline":"👩‍💻 Order button animation — Анимированная кнопка \"Оформить заказ\" Сделана на CSS и JS 🔗 Открыть код","articleBody":"👩‍💻 Order button animation — Анимированная кнопка \"Оформить заказ\"\n\nСделана на CSS и JS\n\n🔗 Открыть код","datePublished":"2025-09-03T07:29:33Z","dateModified":"2025-09-03T07:29: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":708},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13},{"@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/3480","url":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3480","mainEntityOfPage":"https://telemetr.io/ar/channels/1681900587-frontend_dev5/posts/3480","headline":"⚙️ Я запрещаю вам margin Я показываю, почему выбраковываю margin: перехожу на gap, даю лишние обёртки ради не…","articleBody":"⚙️ Я запрещаю вам margin\n\nЯ показываю, почему выбраковываю margin: перехожу на gap, даю лишние обёртки ради независимости узлов. Итог — чище код и предсказуемые отступы. Будут примеры и возражения.\n\n🔗 Читать статью","datePublished":"2025-09-02T15:04:09Z","dateModified":"2025-09-02T15:04:09Z","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":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":709},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}}]}

7 653

👩‍💻 Menu Animation — Заливка пунктов меню, которое появляется при нажатии на бургер-кнопку

Сделана SCSS

🔗 Открыть код

7 653

INP высокий — интерфейс «тупит» при кликах/вводе. Что в первую очередь поможет снизить INP?

Anonymous voting

7 653

⚙️ SRE на Frontend`е

Это еще одна статья про разбор ошибок и аварий, но с точки зрения небольших фич фронта, которые вы можете внедрить самостоятельно и упростить свою работу, а также помочь отделу в целом.

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

7 653

Нужно ограничить сессионный cookie точным хостом (без поддоменов) и требовать HTTPS. Как правильно его установить?

Anonymous voting

7 653

👩‍💻 Steam Library App Portrait Card Effect — Очередной эффект при наведении на карточки

Сделана на чистом CSS

🔗 Открыть код

7 653

⚙️ Деструктуризация в JavaScript

Разберу деструктуризацию в JS на примерах: изъятие значений, пропуски, значения по умолчанию, rest/спред, частые ловушки. Коротко и практично.

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

7 653

⚙️ Деструктуризация в JavaScript

Разберу деструктуризацию в JS на примерах: изъятие значений, пропуски, значения по умолчанию, rest/спред, частые ловушки. Коротко и практично.

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

7 653

Используете

Anonymous voting

7 653

👩‍💻 SVG background animation — Медленный круговорот звёздного неба в качестве фона для вашего сайта

Сделана на чистом CSS

🔗 Открыть код

7 653

Какой кросс-доменный запрос не вызовет CORS preflight в браузере?

Anonymous voting

7 653

❓ Зачем используется свойство value в JavaScript и когда его применять? Свойство value позволяет получить или изменить текущее значение элементов форм — таких как <input>, <textarea> или <select>. Это основной способ работы с пользовательским вводом на стороне фронтенда. ✅Пример:

<input id="nameInput" type="text" placeholder="Введите имя">
<script>
  const input = document.getElementById("nameInput");
  input.value = "Alice"; // Установим значение

  console.log(input.value); // Получим текущее значение ➜ "Alice"
</script>

📌В этом примере value сначала задаёт значение в поле ввода, а затем позволяет его прочитать.

value удобно использовать для работы с формами, валидацией, автозаполнением, поиска и динамического изменения данных. Это ключевой инструмент при создании интерактивных интерфейсов.

7 653

👩‍💻 Morphing Submit Button — Анимированная кнопка загрузки после нажатия на "Submit"

Сделана на CSS, SVG и JavaScript

🔗 Открыть код

7 653

Новый Service Worker установился, но пользователи видят старую версию до перезапуска вкладок. Как применить обновление сразу?

Anonymous voting

7 653

⚙️ HTML и CSS осенью 2025. Эти новые фичи я рекомендую изучить прямо сейчас

Покажу свежие фишки HTML/CSS, которые уже поддерживаются: что они чинят, где применить, на что смотреть. Короткие примеры, ссылки и мои фавориты — чтобы выбрать, что копать глубже.

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

7 653

API-ответы должны приходить сразу, можно 30 с устаревшие с фоновым обновлением; при сетевой ошибке — использовать старый до 1 ч. Какие заголовки отдать?

Anonymous voting

7 653

👩‍💻 Order button animation — Анимированная кнопка "Оформить заказ"

Сделана на CSS и JS

🔗 Открыть код

7 653

⚙️ Я запрещаю вам margin

Я показываю, почему выбраковываю margin: перехожу на gap, даю лишние обёртки ради независимости узлов. Итог — чище код и предсказуемые отступы. Будут примеры и возражения.

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