Don't get caught by a cheater! Telemetrio finds and tags such channels 👉 If you want to see the tag, subscribe

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

Open in Telegram

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

Russia79 799 Technologies & Applications14 708

7 650

Subscribers

-324 hours

-267 days

-5030 days

822

Post views

~ 54324 hours

~ 60148 hours

10.75%

Engagement rate

No data

Posts per day

Ads index

beta

Posts Archive

\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/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":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":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3573","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3573","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":609},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3572","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3572","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":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":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3571","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3571","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":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":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3570","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3570","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":651},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3569","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3569","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3568","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3568","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":650},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3567","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3567","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":658},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3566","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3566","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3566","headline":"⚙️ HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 13 Мы показыв…","articleBody":"⚙️ HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 13\n\nМы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.\n\n🔗 Читать статью","datePublished":"2025-10-21T15:03:42Z","dateModified":"2025-10-21T15:03:42Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":653},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3565","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3565","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3565","headline":"Фронтенд Гайд","datePublished":"2025-10-21T07:02:26Z","dateModified":"2025-10-21T07:02:26Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":616},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3564","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3564","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3564","headline":"👩‍💻 Wall of text — Плавно движущиеся строки с текстом в качестве фона для вашего сайта Сделано на SCSS 🔗 Откр…","articleBody":"👩‍💻 Wall of text — Плавно движущиеся строки с текстом в качестве фона для вашего сайта\n\nСделано на SCSS\n\n🔗 Открыть код","datePublished":"2025-10-20T15:02:33Z","dateModified":"2025-10-20T15:02:33Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":638},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3563","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3563","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3563","headline":"Фронтенд Гайд","datePublished":"2025-10-20T07:00:59Z","dateModified":"2025-10-20T07:00:59Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":618},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3562","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3562","mainEntityOfPage":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3562","headline":"❓ Зачем используется метод toggle() у classList в JavaScript и когда его применять? Метод classList.toggle()…","articleBody":"❓ Зачем используется метод toggle() у classList в JavaScript и когда его применять?\n\nМетод classList.toggle() добавляет класс, если его нет, и удаляет, если он уже есть. Это удобный способ переключать состояния элементов без лишних условий.\n\n✅Пример:\n\n\n\n\n\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/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":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":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3561","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3561","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3560","url":"https://telemetr.io/en/channels/1681900587-frontend_dev5/posts/3560","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/en/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":668},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}}]}

7 647

⚙️ View Transitions API

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

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

7 647

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

Anonymous voting

7 647

⚙️ View Transitions API

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

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

7 647

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

Сделано на SCSS

🔗 Открыть код

7 647

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

Anonymous voting

7 647

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

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

Сделано на SCSS

🔗 Открыть код

7 647

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

Anonymous voting

7 647

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

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

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

7 647

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

Anonymous voting

7 647

👩‍💻 Home Radio Button Animation

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

🔗 Открыть код

7 647

⚙️ HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 13

Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

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

7 647

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

Anonymous voting

7 647

👩‍💻 Wall of text — Плавно движущиеся строки с текстом в качестве фона для вашего сайта

Сделано на SCSS

🔗 Открыть код

7 647

Нужно обмениваться сообщениями между открытыми вкладками того же origin в реальном времени. Что выбрать?

Anonymous voting

7 647

❓ Зачем используется метод toggle() у classList в JavaScript и когда его применять? Метод classList.toggle() добавляет класс, если его нет, и удаляет, если он уже есть. Это удобный способ переключать состояния элементов без лишних условий. ✅Пример:

<button id="menuBtn">Меню</button>
<nav id="nav" class="hidden">Навигация</nav>

<script>
  const btn = document.getElementById("menuBtn");
  const nav = document.getElementById("nav");

  btn.addEventListener("click", () => {
    nav.classList.toggle("hidden");
  });
</script>

📌В этом примере при каждом клике меню будет показываться и скрываться за счёт переключения класса hidden

toggle() удобно использовать для работы с выпадающими меню, модальными окнами, переключателями тем и интерактивными UI-элементами. Код становится чище и нагляднее, без лишних if

7 647

👩‍💻 cool hover card — Эффект наведения на карточку с плавным размытием изображения

Сделано на CSS

🔗 Открыть код