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

\n\n📌В этом примере textContent выведет строку Привет! как обычный текст, без интерпретации HTML.\n\ntextContent удобно использовать для вывода пользовательского ввода, динамических данных или сообщений, где важна безопасность. В отличие от innerHTML, оно исключает XSS-уязвимости и работает быстрее при массовых изменениях текста","datePublished":"2025-08-31T09:05:24Z","dateModified":"2025-08-31T09:05:24Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":651},{"@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":4}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3475","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3475","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3475","headline":"Фронтенд Гайд","datePublished":"2025-08-30T09:05:04Z","dateModified":"2025-08-30T09:05:04Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":650},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3474","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3474","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3474","headline":"👩‍💻 Card Mouse Hover Effect — Карточки с интересным эффектом при наведении Сделаны на CSS и JavaScript 🔗 Откр…","articleBody":"👩‍💻 Card Mouse Hover Effect — Карточки с интересным эффектом при наведении\n\nСделаны на CSS и JavaScript\n\n🔗 Открыть код","datePublished":"2025-08-29T15:01:02Z","dateModified":"2025-08-29T15:01:02Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":720},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3473","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3473","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3473","headline":"Фронтенд Гайд","datePublished":"2025-08-29T07:01:56Z","dateModified":"2025-08-29T07:01:56Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":681},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3472","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3472","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3472","headline":"⚙️ Циклы в JavaScript: полный обзор функции Покажу, как гонять повторения в JS: for/while/do…while, for…of/fo…","articleBody":"⚙️ Циклы в JavaScript: полный обзор функции\n\nПокажу, как гонять повторения в JS: for/while/do…while, for…of/for…in, break/continue, частые грабли и где что уместно. Мини-примеры, лайфхаки — и цикл не укусит.\n\n🔗 Читать статью","datePublished":"2025-08-28T15:01:16Z","dateModified":"2025-08-28T15:01:16Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":710},{"@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":2}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3471","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3471","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3471","headline":"Фронтенд Гайд","datePublished":"2025-08-28T07:01:24Z","dateModified":"2025-08-28T07:01:24Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":672},{"@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/fa/channels/1681900587-frontend_dev5/posts/3470","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3470","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3470","headline":"Фронтенд Гайд","datePublished":"2025-08-27T15:04:09Z","dateModified":"2025-08-27T15:04:09Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":718},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3469","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3469","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3469","headline":"👩‍💻 Download the Matrix — Крайне стильная кнопка скачивания с анимацией при нажатии Сделана на SVG, CSS и Jav…","articleBody":"👩‍💻 Download the Matrix — Крайне стильная кнопка скачивания с анимацией при нажатии\n\nСделана на SVG, CSS и JavaScript\n\n🔗 Открыть код","datePublished":"2025-08-27T07:02:57Z","dateModified":"2025-08-27T07:02:57Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":729},{"@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":1}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3468","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3468","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3468","headline":"⚙️ HTML- и CSS-советы для джуниор фронтенд-разработчиков Расскажу, какие привычки в вёрстке улучшают код: сем…","articleBody":"⚙️ HTML- и CSS-советы для джуниор фронтенд-разработчиков\n\nРасскажу, какие привычки в вёрстке улучшают код: семантика, читаемость, структура, трюки. Примеры и ссылки.\n\n🔗 Читать статью","datePublished":"2025-08-26T15:03:52Z","dateModified":"2025-08-26T15:03:52Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3467","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3467","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3467","headline":"Фронтенд Гайд","datePublished":"2025-08-26T07:01:27Z","dateModified":"2025-08-26T07:01:27Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":652},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3466","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3466","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3466","headline":"👩‍💻 Fancy Glowing Button — Крутая кнопка с RGB подсветкой и эффектом при наведении Сделана на чистом CSS 🔗 От…","articleBody":"👩‍💻 Fancy Glowing Button — Крутая кнопка с RGB подсветкой и эффектом при наведении\n\nСделана на чистом CSS\n\n🔗 Открыть код","datePublished":"2025-08-25T15:00:44Z","dateModified":"2025-08-25T15:00:44Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":689},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3465","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3465","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3465","headline":"🔥 БЕСПЛАТНЫЙ КУРС ПО СОЗДАНИЮ НЕЙРО-СОТРУДНИКОВ НА GPT И ДРУГИХ LLM 🔥 Ищете практический и углубленный курс,…","articleBody":"🔥 БЕСПЛАТНЫЙ КУРС ПО СОЗДАНИЮ НЕЙРО-СОТРУДНИКОВ НА GPT И ДРУГИХ LLM 🔥\n\nИщете практический и углубленный курс, чтобы освоить создание нейро-сотрудников? Мы создали курс из 5 объемных занятий. Это именно то, что нужно, чтобы прокачать свои навыки абсолютно бесплатно!\n\n📌 Темы занятий:\n1. Введение в мир нейро-сотрудников\n2. Как работают LLM и их аналоги\n3. Создание базы знаний для нейро-сотрудника (RAG)\n4. Тестирование и отладка нейро-сотрудников\n5. Интеграция нейро-сотрудников в Production\n\nВот 5 тем курса - он максимально простой и доступный, общеобразовательный, без какого-либо сложного программирования 📚Прохождение этого курса, скорее всего, займет у вас от 1 до 3 часов\n\n🤖 Присоединяйтесь к нашему бесплатному курсу и разберитесь в этой увлекательной теме с нами!","datePublished":"2025-08-25T10:06:13Z","dateModified":"2025-08-25T10:06:13Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":603},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3464","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3464","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3464","headline":"Фронтенд Гайд","datePublished":"2025-08-25T06:56:20Z","dateModified":"2025-08-25T06:56:20Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":595},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3463","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3463","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3463","headline":"Большая кладовая онлайн-курсов Stepik – незаменимый спутник для тех, кто работает удаленно и любит путешество…","articleBody":"Большая кладовая онлайн-курсов\n\nStepik – незаменимый спутник для тех, кто работает удаленно и любит путешествовать, так как помогает учиться в любой точке мира.\n\nЭто отличная альтернатива чтению книги и просмотру фильма: позволит вам скоротать время в дороге, осваивая полезный навык или подтягивая иностранный язык, особенно удобно это делать в мобильном приложении.\n\nУ Stepik есть свой телеграм-канал, в котором они рассказывают об авторских курсах (как платных, так и бесплатных), а также публикует полезные статьи и ссылки. У них есть такие подборки курсов:\n\n- Разработка на Python\n- Дизайн и графика\n- Тестирование ПО\n- Работа с данными\n\nПодпишитесь на stepik_courses и найдите интересующий курс для себя! \n\nПодписаться\n\n#реклама 16+\nО рекламодателе","datePublished":"2025-08-25T06:42:54Z","dateModified":"2025-08-27T05:03:34Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":331},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3462","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3462","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3462","headline":"❓ Зачем используется свойство innerHTML в JavaScript и когда его применять? Свойство innerHTML позволяет полу…","articleBody":"❓ Зачем используется свойство innerHTML в JavaScript и когда его применять?\n\nСвойство innerHTML позволяет получить или изменить HTML-содержимое элемента. Это удобный способ динамически обновлять интерфейс без перезагрузки страницы.\n\n✅Пример:\n\n\n\n\n📌В этом примере innerHTML вставляет HTML-код с тегом внутрь блока.\n\ninnerHTML удобно использовать для обновления текста, вставки шаблонов и генерации списков. Однако важно помнить о безопасности: при работе с пользовательскими данными лучше использовать textContent, чтобы избежать XSS-уязвимостей","datePublished":"2025-08-24T09:04:49Z","dateModified":"2025-08-24T09:04:49Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":616},{"@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":3}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3461","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3461","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3461","headline":"Фронтенд Гайд","datePublished":"2025-08-23T09:04:25Z","dateModified":"2025-08-23T09:04:25Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":666},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3460","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3460","mainEntityOfPage":"https://telemetr.io/fa/channels/1681900587-frontend_dev5/posts/3460","headline":"👩‍💻 Web Component — Сцена со стильно анимированными карточками Сделана на CSS, SVG и JavaScrip…","articleBody":"👩‍💻 Web Component — Сцена со стильно анимированными карточками\n\nСделана на CSS, SVG и JavaScript\n\n🔗 Открыть код","datePublished":"2025-08-22T15:03:48Z","dateModified":"2025-08-22T15:03:48Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/fa/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":737},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}}]}

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

7 653

Нужно хранить аутентификацию в SPA так, чтобы токен нельзя было украсть XSS и работало на поддоменах, при этом защититься от CSRF. Что выбрать?

Anonymous voting

6711

تحلیل

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

7 653

👩‍💻 Fancy wipe — Стильный текст с анимированным появлением

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

🔗 Открыть код

668154

تحلیل

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

7 653

В Web Component с открытым Shadow DOM внутри нажали кнопку. На document висит обычный click-слушатель (не capture). Что он увидит по умолчанию?

Anonymous voting

67922

تحلیل

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

7 653

❓ Зачем используется свойство textContent в JavaScript и когда его применять? Свойство textContent позволяет получить или изменить только текстовое содержимое элемента, игнорируя HTML-теги. Это безопасный способ отобразить данные без риска вставки вредоносного кода. ✅Пример:

<div id="message"></div>
<script>
  const box = document.getElementById("message");
  box.textContent = "<strong>Привет!</strong>";
</script>

📌В этом примере textContent выведет строку <strong>Привет!</strong> как обычный текст, без интерпретации HTML.

textContent удобно использовать для вывода пользовательского ввода, динамических данных или сообщений, где важна безопасность. В отличие от innerHTML, оно исключает XSS-уязвимости и работает быстрее при массовых изменениях текста

651414

تحلیل

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

7 653

65031

تحلیل

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

7 653

👩‍💻 Card Mouse Hover Effect — Карточки с интересным эффектом при наведении

Сделаны на CSS и JavaScript

🔗 Открыть код

720103

تحلیل

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

7 653

Нужно загрузить веб-шрифты с CDN быстро, без FOIT и с минимальным CLS. Что выбрать?

Anonymous voting

68131

تحلیل

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

7 653

⚙️ Циклы в JavaScript: полный обзор функции

Покажу, как гонять повторения в JS: for/while/do…while, for…of/for…in, break/continue, частые грабли и где что уместно. Мини-примеры, лайфхаки — и цикл не укусит.

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

710712

تحلیل

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

7 653

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

Anonymous voting

67241

تحلیل

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

7 653

718471

تحلیل

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

7 653

👩‍💻 Download the Matrix — Крайне стильная кнопка скачивания с анимацией при нажатии

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

🔗 Открыть код

729811

تحلیل

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

7 653

⚙️ HTML- и CSS-советы для джуниор фронтенд-разработчиков

Расскажу, какие привычки в вёрстке улучшают код: семантика, читаемость, структура, трюки. Примеры и ссылки.

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

657121

تحلیل

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

7 653

Нужно, чтобы страница попадала в bfcache и при уходе отправляла аналитический пинг. Что выбрать?

Anonymous voting

65211

تحلیل

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

7 653

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

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

🔗 Открыть код

6891213

تحلیل

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

7 653

Ad

🔥 БЕСПЛАТНЫЙ КУРС ПО СОЗДАНИЮ НЕЙРО-СОТРУДНИКОВ НА GPT И ДРУГИХ LLM 🔥 Ищете практический и углубленный курс, чтобы освоить создание нейро-сотрудников? Мы создали курс из 5 объемных занятий. Это именно то, что нужно, чтобы прокачать свои навыки абсолютно бесплатно! 📌 Темы занятий: 1. Введение в мир нейро-сотрудников 2. Как работают LLM и их аналоги 3. Создание базы знаний для нейро-сотрудника (RAG) 4. Тестирование и отладка нейро-сотрудников 5. Интеграция нейро-сотрудников в Production Вот 5 тем курса - он максимально простой и доступный, общеобразовательный, без какого-либо сложного программирования 📚Прохождение этого курса, скорее всего, займет у вас от 1 до 3 часов 🤖 Присоединяйтесь к нашему бесплатному курсу и разберитесь в этой увлекательной теме с нами!

603213

تحلیل

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

7 653

Нужно использовать SharedArrayBuffer в проде. Страница грузит ресурсы с CDN. Какие заголовки и условия требуются?

Anonymous voting

5952

تحلیل

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

7 653

Ad

Большая кладовая онлайн-курсов Stepik – незаменимый спутник для тех, кто работает удаленно и любит путешествовать, так как помогает учиться в любой точке мира. Это отличная альтернатива чтению книги и просмотру фильма: позволит вам скоротать время в дороге, осваивая полезный навык или подтягивая иностранный язык, особенно удобно это делать в мобильном приложении. У Stepik есть свой телеграм-канал, в котором они рассказывают об авторских курсах (как платных, так и бесплатных), а также публикует полезные статьи и ссылки. У них есть такие подборки курсов: - Разработка на Python - Дизайн и графика - Тестирование ПО - Работа с данными Подпишитесь на stepik_courses и найдите интересующий курс для себя! Подписаться #реклама 16+ О рекламодателе

3312

تحلیل

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

7 653

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

<div id="message"></div>
<script>
  const box = document.getElementById("message");
  box.innerHTML = "<strong>Добро пожаловать!</strong>";
</script>

📌В этом примере innerHTML вставляет HTML-код с тегом <strong> внутрь блока.

innerHTML удобно использовать для обновления текста, вставки шаблонов и генерации списков. Однако важно помнить о безопасности: при работе с пользовательскими данными лучше использовать textContent, чтобы избежать XSS-уязвимостей

616513

تحلیل

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

7 653

666271

تحلیل

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

7 653

👩‍💻 <pixel-canvas> Web Component — Сцена со стильно анимированными карточками

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

🔗 Открыть код

7371442

تحلیل

نمایش بیشتر