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

前往频道在 Telegram

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

显示更多

俄罗斯78 685 技术与应用14 099

7 743

订阅者

-624 小时

-107 天

+330 天

759

帖子浏览量

~ 54824 小时

~ 59348 小时

9.80%

参与率

无数据

每日帖子数

Ads index

beta

帖子存档

\n\n📌В этом примере preventDefault() предотвращает перезагрузку страницы при отправке формы.\n\npreventDefault() удобно использовать при работе с формами, ссылками, drag&drop и кастомными UI-элементами. Оно даёт разработчику полный контроль над поведением интерфейса","datePublished":"2025-12-23T07:26:51Z","dateModified":"2025-12-23T07:27:07Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":1}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3604","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3604","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3604","headline":"👩‍💻 Fancy Glowing Button — Крутая кнопка с RGB подсветкой и эффектом при наведении Сделана на чистом CSS 🔗 От…","articleBody":"👩‍💻 Fancy Glowing Button — Крутая кнопка с RGB подсветкой и эффектом при наведении\n\nСделана на чистом CSS\n\n🔗 Открыть код","datePublished":"2025-12-21T16:00:06Z","dateModified":"2025-12-21T16:00:06Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":617},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3603","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3603","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3603","headline":"❓ Зачем используется метод preventDefault() в JavaScript и когда его применять? Метод preventDefault() отменя…","articleBody":"❓ Зачем используется метод preventDefault() в JavaScript и когда его применять?\n\nМетод preventDefault() отменяет стандартное поведение элемента браузера, не прерывая при этом выполнение других обработчиков. Это удобно, когда нужно полностью контролировать действия пользователя.\n\n✅Пример:\n\n\n\n\n\n📌В этом примере preventDefault() предотвращает перезагрузку страницы при отправке формы.\n\npreventDefault() удобно использовать при работе с формами, ссылками, drag&drop и кастомными UI-элементами. Оно даёт разработчику полный контроль над поведением интерфейса","datePublished":"2025-12-20T06:54:49Z","dateModified":"2025-12-20T06:54:49Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":723},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3602","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3602","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3602","headline":"🤷🏼‍♂️ Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display Статья посвящена по…","articleBody":"🤷🏼‍♂️ Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display\n\nСтатья посвящена подготовке к собеседованию на позицию Frontend-разработчика, в частности, вопросам, связанным с вёрсткой и свойством display в CSS. Автор подробно объясняет, как работает свойство display, его внешние и внутренние типы отображения, а также ключевые слова, которые можно использовать. Это включает в себя обсуждение таких ключевых слов, как block, inline, run-in, flow, flow-root, flex, grid, table и ruby. \n\n#Полезное\n\nhttps://habr.com/ru/companies/ruvds/articles/798975/","datePublished":"2025-12-18T09:27:20Z","dateModified":"2025-12-18T09:27:20Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":810},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3601","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3601","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3601","headline":"IT — не латте, смузи и гироскутер, а вызовы и амбиции VK показывает, чем занимаются её команды — от экспериме…","articleBody":"IT — не латте, смузи и гироскутер, а вызовы и амбиции\n\nVK показывает, чем занимаются её команды — от экспериментальных технологий до VK Fest. Переходите по ссылке: смотрите ролики, читайте про проекты и тут же откликайтесь на вакансию, которая по вкусу! \n\nПерейти на сайт\n\n#реклама 16+\nvkteam.ru\nО рекламодателе","datePublished":"2025-12-04T06:43:14Z","dateModified":"2025-12-06T04:43:18Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":314},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3600","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3600","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3600","headline":"Фронтенд Гайд","datePublished":"2025-12-02T13:19:53Z","dateModified":"2025-12-02T13:19:53Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":30,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1236},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":30}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3599","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3599","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3599","headline":"Ищу желающих заполнять карточки товаров на ВБ! Работа полностью на удаленке с зп до150 000 рублей в месяц. Бе…","articleBody":"Ищу желающих заполнять карточки товаров на ВБ!\n\nРабота полностью на удаленке с зп до150 000 рублей в месяц.\n\nБез опыта, нужен только телефон, занятость 3-6 часов в день.\n\nВсему обучат на бесплатном курсе и после возьму на работу:\n\n✅ 3 дня уроков по 30 минут\n✅ Домашки с проверкой и оплатой бонусами\n✅ Плачу 10 тыс за каждую выполненную домашку\n\nВсе кто пройдет курс, получат сертификат от школы с образовательной лицензией.\n\n⚡ Набор заканчивается завтра.\n\n👍 Для регистрации жмите кнопку \"Зарегистрироваться\": \n\nЗарегистрироваться\n\n#реклама 16+\ncourse.wildmanager.ru\nО рекламодателе","datePublished":"2025-11-24T06:44:25Z","dateModified":"2025-11-26T11:17:24Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":324},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3598","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3598","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3598","headline":"Курс \"Дизайн карточек для WB и Ozon\". Бесплатно и с нуля Дизайнер карточек для маркетплейсов — востребованная…","articleBody":"Курс \"Дизайн карточек для WB и Ozon\". Бесплатно и с нуля\n\nДизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰\nНаучись ей бесплатно!\n\n- Бесплатный доступ\n- Разбор ДЗ от наставника\n- Мощные кейсы в портфолио \n\nУзнать больше\n\n#реклама 16+\nyudaevschool24.online\nО рекламодателе","datePublished":"2025-11-10T06:34:37Z","dateModified":"2025-11-12T04:34:40Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":300},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3597","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3597","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3597","headline":"👩‍💻 Home Creative Wave Button. Сделано на HTML и SCSS 🔗 Открыть код","articleBody":"👩‍💻 Home Creative Wave Button.\n\nСделано на HTML и SCSS\n\n🔗 Открыть код","datePublished":"2025-11-07T14:59:57Z","dateModified":"2025-11-07T14:59:57Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":73,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1244},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":73}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3596","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3596","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3596","headline":"Фронтенд Гайд","datePublished":"2025-11-07T06:59:57Z","dateModified":"2025-11-07T06:59:57Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":1085},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3595","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3595","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3595","headline":"⚙️ Я CSS-программист: «Магия» CSS или как превратить язык стилей в Тьюринг-полный ад Разбираю феномен «кальку…","articleBody":"⚙️ Я CSS-программист: «Магия» CSS или как превратить язык стилей в Тьюринг-полный ад\n\nРазбираю феномен «калькуляторов на чистом CSS» — как язык оформления превратился в инструмент логики и почему иногда разработчики делают невозможное просто из любопытства.\n\n🔗 Читать статью","datePublished":"2025-11-06T15:04:00Z","dateModified":"2025-11-06T15:04:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":966},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3594","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3594","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3594","headline":"Фронтенд Гайд","datePublished":"2025-11-06T07:05:16Z","dateModified":"2025-11-06T07:05:16Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":830},{"@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/ch/channels/1681900587-frontend_dev5/posts/3593","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3593","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3593","headline":"Фронтенд Гайд","datePublished":"2025-11-05T15:02:12Z","dateModified":"2025-11-05T15:02:12Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":721},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3592","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3592","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3592","headline":"👩‍💻 Abstract Login Page w/ Background Animation — Анимация для фона и формы ввода данных. Сделано на CSS 🔗 От…","articleBody":"👩‍💻 Abstract Login Page w/ Background Animation — Анимация для фона и формы ввода данных.\n\nСделано на CSS\n\n🔗 Открыть код","datePublished":"2025-11-05T07:03:51Z","dateModified":"2025-11-05T07:03:51Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":722},{"@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/ch/channels/1681900587-frontend_dev5/posts/3591","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3591","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3591","headline":"⚙️ Топ 5 причин, когда JavaScript блокирует загрузку вашего сайта На основе наблюдений я выделил 5 самых проб…","articleBody":"⚙️ Топ 5 причин, когда JavaScript блокирует загрузку вашего сайта\n\nНа основе наблюдений я выделил 5 самых проблемных случая, когда JavaScript блокирует загрузку сайта. В статье вы узнаете, как с ними бороться.\n\n🔗 Читать статью","datePublished":"2025-11-04T15:03:53Z","dateModified":"2025-11-04T15:03:53Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":742},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3590","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3590","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3590","headline":"Фронтенд Гайд","datePublished":"2025-11-04T07:02:00Z","dateModified":"2025-11-04T07:02:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":612},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3589","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3589","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3589","headline":"👩‍💻 3D Cover Flow — Анимированные карточки с интересным эффектом движения. Сделано на SCSS и JavaScript 🔗 Отк…","articleBody":"👩‍💻 3D Cover Flow — Анимированные карточки с интересным эффектом движения.\n\nСделано на SCSS и JavaScript\n\n🔗 Открыть код","datePublished":"2025-11-03T15:02:13Z","dateModified":"2025-11-03T15:02:13Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":633},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3588","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3588","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3588","headline":"Фронтенд Гайд","datePublished":"2025-11-03T07:02:44Z","dateModified":"2025-11-03T07:02:44Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":589},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3587","url":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3587","mainEntityOfPage":"https://telemetr.io/ch/channels/1681900587-frontend_dev5/posts/3587","headline":"❓ Зачем используется метод append() в JavaScript и когда его применять? Метод append() добавляет один или нес…","articleBody":"❓ Зачем используется метод append() в JavaScript и когда его применять?\n\nМетод append() добавляет один или несколько элементов или текст в конец указанного DOM-элемента. Это современный и удобный способ динамически изменять содержимое страницы.\n\n✅Пример:\n\n

\n\n\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/ch/channels/1681900587-frontend_dev5","image":"https://img.tlmtr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ch/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":598},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}}]}

7 743

⚙️ View Transitions API

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

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

7 743

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

<form id="loginForm">
  <button type="submit">Войти</button>
</form>

<script>
  const form = document.getElementById("loginForm");

  form.addEventListener("submit", (event) => {
    event.preventDefault(); // отменяем стандартную отправку формы
    console.log("Форма не перезагружается, можно обработать данные вручную");
  });
</script>

📌В этом примере preventDefault() предотвращает перезагрузку страницы при отправке формы.

preventDefault() удобно использовать при работе с формами, ссылками, drag&drop и кастомными UI-элементами. Оно даёт разработчику полный контроль над поведением интерфейса

7 743

👩‍💻 Fancy Glowing Button — Крутая кнопка с RGB подсветкой и эффектом при наведении

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

🔗 Открыть код

7 743

<form id="loginForm">
  <button type="submit">Войти</button>
</form>

<script>
  const form = document.getElementById("loginForm");

  form.addEventListener("submit", (event) => {
    event.preventDefault(); // отменяем стандартную отправку формы
    console.log("Форма не перезагружается, можно обработать данные вручную");
  });
</script>

📌В этом примере preventDefault() предотвращает перезагрузку страницы при отправке формы.

preventDefault() удобно использовать при работе с формами, ссылками, drag&drop и кастомными UI-элементами. Оно даёт разработчику полный контроль над поведением интерфейса

7 743

🤷🏼‍♂️ Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: свойство display Статья посвящена подготовке к собеседованию на позицию Frontend-разработчика, в частности, вопросам, связанным с вёрсткой и свойством display в CSS. Автор подробно объясняет, как работает свойство display, его внешние и внутренние типы отображения, а также ключевые слова, которые можно использовать. Это включает в себя обсуждение таких ключевых слов, как block, inline, run-in, flow, flow-root, flex, grid, table и ruby. #Полезное https://habr.com/ru/companies/ruvds/articles/798975/

7 743

IT — не латте, смузи и гироскутер, а вызовы и амбиции VK показывает, чем занимаются её команды — от экспериментальных технологий до VK Fest. Переходите по ссылке: смотрите ролики, читайте про проекты и тут же откликайтесь на вакансию, которая по вкусу! Перейти на сайт #реклама 16+ vkteam.ru О рекламодателе

7 743

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

7 743

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

7 743

👩‍💻 Home Creative Wave Button.

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

🔗 Открыть код

7 743

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

Anonymous voting

7 743

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

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

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

7 743

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

Anonymous voting

7 743

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

Сделано на CSS

🔗 Открыть код

7 743

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

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

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

7 743

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

Anonymous voting

7 743

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

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

🔗 Открыть код

7 743

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

Anonymous voting

7 743

❓ Зачем используется метод 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(), он может добавлять сразу несколько узлов или строки текста, что делает его более гибким