Не попадись на ботовода! Telemetrio знаходить і позначає такі канали мітками 👉 Хочеш бачити мітку, оформляй підписку

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

Відкрити в Telegram

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

Росія79 808 Технології та додатки14 707

7 647

Підписники

-324 години

-267 днів

-5030 днів

822

Перегляди допису

~ 54324 години

~ 60148 годин

10.75%

Коефіцієнт залучення

Немає даних

Дописів на день

Ads index

beta

Архів дописів

\n\n📌В этом примере append() добавляет новый элемент

в конец списка\n\nappend() удобно использовать при генерации списков, карточек, уведомлений и других динамических компонентов. В отличие от appendChild(), он может добавлять сразу несколько узлов или строки текста, что делает его более гибким","datePublished":"2025-11-02T09:03:05Z","dateModified":"2025-11-02T09:03:05Z","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":598},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3586","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3586","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3586","headline":"Фронтенд Гайд","datePublished":"2025-11-01T09:04:27Z","dateModified":"2025-11-01T09:04:27Z","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":656},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@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/3585","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3585","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3585","headline":"👩‍💻 Futuristic 3D hover Effect — Красивый эффект главной кнопки, которая дополнительно открывает другие. Сдел…","articleBody":"👩‍💻 Futuristic 3D hover Effect — Красивый эффект главной кнопки, которая дополнительно открывает другие.\n\nСделано на SCSS\n\n🔗 Открыть код","datePublished":"2025-10-31T15:03:35Z","dateModified":"2025-10-31T15:03:35Z","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":733},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3584","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3584","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3584","headline":"Фронтенд Гайд","datePublished":"2025-10-31T07:00:56Z","dateModified":"2025-10-31T07:00:56Z","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":680},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3583","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3583","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3583","headline":"⚙️ Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков Сегодня я решил показать вам несколько…","articleBody":"⚙️ Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков\n\nСегодня я решил показать вам несколько проверенных трюков. Выбрал самые лёгкие в освоении, чтобы вы смогли внедрить их уже сегодня, не отвлекаясь на сложности.\n\n🔗 Читать статью","datePublished":"2025-10-30T15:04:51Z","dateModified":"2025-10-30T15:04:51Z","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":708},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3582","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3582","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3582","headline":"Фронтенд Гайд","datePublished":"2025-10-30T07:05:12Z","dateModified":"2025-10-30T07:05:12Z","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":657},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@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/3581","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3581","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3581","headline":"Фронтенд Гайд","datePublished":"2025-10-29T15:04:01Z","dateModified":"2025-10-29T15:04:01Z","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":707},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3580","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3580","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3580","headline":"👩‍💻 Vertical menu with gooey effect — Вертикальное меню с липким эффектом наведения на вкладки. Сделано на SC…","articleBody":"👩‍💻 Vertical menu with gooey effect — Вертикальное меню с липким эффектом наведения на вкладки.\n\nСделано на SCSS и JS\n\n🔗 Открыть код","datePublished":"2025-10-29T07:03:47Z","dateModified":"2025-10-29T07:03: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":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":701},{"@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}]}}]}

7 647

Ищу желающих заполнять карточки товаров на ВБ! Работа полностью на удаленке с зп до150 000 рублей в месяц. Без опыта, нужен только телефон, занятость 3-6 часов в день. Всему обучат на бесплатном курсе и после возьму на работу: ✅ 3 дня уроков по 30 минут ✅ Домашки с проверкой и оплатой бонусами ✅ Плачу 10 тыс за каждую выполненную домашку Все кто пройдет курс, получат сертификат от школы с образовательной лицензией. ⚡ Набор заканчивается завтра. 👍 Для регистрации жмите кнопку "Зарегистрироваться": Зарегистрироваться #реклама 16+ course.wildmanager.ru О рекламодателе

7 647

Курс "Дизайн карточек для WB и Ozon". Бесплатно и с нуля Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰 Научись ей бесплатно! - Бесплатный доступ - Разбор ДЗ от наставника - Мощные кейсы в портфолио Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

7 647

👩‍💻 Home Creative Wave Button.

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

🔗 Открыть код

7 647

Нужен единый ввод для мыши/тача/стилуса с поддержкой hover и pressure. Что выбрать?

Anonymous voting

7 647

⚙️ Я CSS-программист: «Магия» CSS или как превратить язык стилей в Тьюринг-полный ад

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

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

7 647

Нужно показывать обводку только при клавиатурной навигации, но не при клике мышью. Что использовать?

Anonymous voting

7 647

👩‍💻 Abstract Login Page w/ Background Animation — Анимация для фона и формы ввода данных.

Сделано на CSS

🔗 Открыть код

7 647

⚙️ Топ 5 причин, когда JavaScript блокирует загрузку вашего сайта

На основе наблюдений я выделил 5 самых проблемных случая, когда JavaScript блокирует загрузку сайта. В статье вы узнаете, как с ними бороться.

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

7 647

Из браузера делаете CORS fetch к API; нужно, чтобы куки не отправлялись. Что выбрать?

Anonymous voting

7 647

👩‍💻 3D Cover Flow — Анимированные карточки с интересным эффектом движения.

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

🔗 Открыть код

7 647

Нужно подсветить карточку, когда её внутренняя кнопка в фокусе, без JS. Что использовать?

Anonymous voting

7 647

❓ Зачем используется метод append() в JavaScript и когда его применять? Метод append() добавляет один или несколько элементов или текст в конец указанного DOM-элемента. Это современный и удобный способ динамически изменять содержимое страницы. ✅Пример:

<ul id="list"></ul>

<script>
  const list = document.getElementById("list");
  const newItem = document.createElement("li");
  newItem.textContent = "Новый элемент";

  list.append(newItem);
</script>

📌В этом примере append() добавляет новый элемент <li> в конец списка

append() удобно использовать при генерации списков, карточек, уведомлений и других динамических компонентов. В отличие от appendChild(), он может добавлять сразу несколько узлов или строки текста, что делает его более гибким

7 647

👩‍💻 Futuristic 3D hover Effect — Красивый эффект главной кнопки, которая дополнительно открывает другие.

Сделано на SCSS

🔗 Открыть код

7 647

Как надёжно определить, что страница восстановлена из bfcache (а не заново загружена)?

Anonymous voting

7 647

⚙️ Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков

Сегодня я решил показать вам несколько проверенных трюков. Выбрал самые лёгкие в освоении, чтобы вы смогли внедрить их уже сегодня, не отвлекаясь на сложности.

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

7 647

Нужно прогреть DNS+TLS к стороннему домену до запроса. Что поставить в ?

Anonymous voting

7 647

👩‍💻 Vertical menu with gooey effect — Вертикальное меню с липким эффектом наведения на вкладки.

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

🔗 Открыть код