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

Відкрити в Telegram

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

Росія78 685 Технології та додатки14 099

7 743

Підписники

-624 години

-107 днів

+330 день

759

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

~ 54824 години

~ 59348 годин

9.80%

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

Немає даних

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

Ads index

beta

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

\n\n📌В этом примере setAttribute() изменяет путь к изображению и описание\n\nsetAttribute() удобно использовать при работе с динамическим контентом, темизацией, lazy-loading изображений и управлением data-* атрибутами. Он даёт гибкий способ изменять DOM-структуру без прямого доступа к свойствам","datePublished":"2025-10-26T09:03:54Z","dateModified":"2025-10-26T09:03: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":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":611},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@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/3573","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3573","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3573","headline":"Фронтенд Гайд","datePublished":"2025-10-25T09:04:29Z","dateModified":"2025-10-25T09:04:29Z","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":609},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3572","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3572","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3572","headline":"👩‍💻 Navicon Transformicons — 6 вариантов анимации бургер-кнопок. Сделано на SCSS 🔗 Открыть код","articleBody":"👩‍💻 Navicon Transformicons — 6 вариантов анимации бургер-кнопок.\n\nСделано на SCSS\n\n🔗 Открыть код","datePublished":"2025-10-24T15:01:20Z","dateModified":"2025-10-24T15:01:20Z","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":675},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@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/3571","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3571","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3571","headline":"Фронтенд Гайд","datePublished":"2025-10-24T07:05:16Z","dateModified":"2025-10-24T07:05:16Z","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":648},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3570","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3570","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3570","headline":"⚙️ Не обижайте Django Разбираюсь, почему сравнивать Django и FastAPI — всё равно что спорить, чем забивать гв…","articleBody":"⚙️ Не обижайте Django\n\nРазбираюсь, почему сравнивать Django и FastAPI — всё равно что спорить, чем забивать гвозди. У каждого своя ниша, и Django по-прежнему силён там, где нужен фундамент.\n\n🔗 Читать статью","datePublished":"2025-10-23T15:04:54Z","dateModified":"2025-10-23T15:04: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":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":651},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3569","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3569","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3569","headline":"Фронтенд Гайд","datePublished":"2025-10-23T07:03:24Z","dateModified":"2025-10-23T07:03:24Z","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":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/uk/channels/1681900587-frontend_dev5/posts/3568","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3568","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3568","headline":"Фронтенд Гайд","datePublished":"2025-10-22T15:02:03Z","dateModified":"2025-10-22T15:02:03Z","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":650},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3567","url":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3567","mainEntityOfPage":"https://telemetr.io/uk/channels/1681900587-frontend_dev5/posts/3567","headline":"👩‍💻 Home Radio Button Animation Сделано на HTML и CSS 🔗 Открыть код","articleBody":"👩‍💻 Home Radio Button Animation\n\nСделано на HTML и CSS\n\n🔗 Открыть код","datePublished":"2025-10-22T07:00:58Z","dateModified":"2025-10-22T07:00:58Z","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":658},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}}]}

7 744

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

Сделано на SCSS

🔗 Открыть код

7 744

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

Anonymous voting

7 744

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

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

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

7 744

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

Anonymous voting

7 744

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

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

🔗 Открыть код

7 744

⚙️ View Transitions API

Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте!

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

7 744

Нужно отложить тяжёлый рендер вне экрана, но чтобы место под блок было зарезервировано и не было скачка макета (CLS). Что используешь?

Anonymous voting

7 744

⚙️ View Transitions API

Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте!

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

7 744

👩‍💻 Card Hover Eeffect Left to right line — Анимированный эффект для карточек с появлением пояснительной информации.

Сделано на SCSS

🔗 Открыть код

7 744

В React есть огромный список (тысячи строк), но пользователю видны только ~20 в вьюпорте. Нужно снизить нагрузку на DOM и рендер.

Anonymous voting

7 744

❓ Зачем используется метод setAttribute() в JavaScript и когда его применять? Метод setAttribute() устанавливает или обновляет значение атрибута у HTML-элемента. Это удобно, когда нужно динамически менять параметры элементов — например, src, href, id или data-*. ✅Пример:

<img id="avatar" src="default.png" alt="Avatar">

<script>
  const img = document.getElementById("avatar");
  img.setAttribute("src", "user.png");
  img.setAttribute("alt", "User photo");
</script>

📌В этом примере setAttribute() изменяет путь к изображению и описание

setAttribute() удобно использовать при работе с динамическим контентом, темизацией, lazy-loading изображений и управлением data-* атрибутами. Он даёт гибкий способ изменять DOM-структуру без прямого доступа к свойствам

7 744

👩‍💻 Navicon Transformicons — 6 вариантов анимации бургер-кнопок.

Сделано на SCSS

🔗 Открыть код

7 744

Дальше так не буду. Вот новый короткий тест, где верный вариант не самый длинный и не №2

Anonymous voting

7 744

⚙️ Не обижайте Django

Разбираюсь, почему сравнивать Django и FastAPI — всё равно что спорить, чем забивать гвозди. У каждого своя ниша, и Django по-прежнему силён там, где нужен фундамент.

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

7 744

После обработчика клика планируются Promise.resolve().then(A) и setTimeout(B, 0). Что вызовется раньше?

Anonymous voting

7 744

👩‍💻 Home Radio Button Animation

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

🔗 Открыть код