Frontend | Вопросы собесов

Открыть в Telegram

Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv

Больше

Сеть:easyoffer Россия36 769 Технологии и приложения7 116...

📈 Аналитический обзор Telegram-канала Frontend | Вопросы собесов

Канал Frontend | Вопросы собесов (@easy_javascript_ru) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 17 879 подписчиков, занимая 7 116 место в категории Технологии и приложения и 36 769 место в регионе Россия.

📊 Показатели аудитории и динамика

С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 17 879 подписчиков.

Согласно последним данным от 26 августа, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -159, а за последние 24 часа — -8, при этом общий охват остаётся высоким.

Статус верификации: Не верифицирован
Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 6.82%. В первые 24 часа после публикации контент обычно набирает 4.58% реакций от общего числа подписчиков.
Охват публикаций: В среднем каждый пост получает 1 220 просмотров. В течение первых суток публикация набирает 820 просмотров.
Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 5.
Тематические интересы: Контент сосредоточен на ключевых темах, таких как ставь, браузер, html, border, flex.

📝 Описание и контентная политика

Автор описывает ресурс как площадку для выражения субъективного мнения:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @easyoffer_adv”

Благодаря высокой частоте обновлений (последние данные получены 27 августа, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.

17 879

Подписчики

-824 часа

-457 дней

-15930 день

1 220

Просмотры поста

~ 82024 часа

~ 92948 часов

6.82%

Коэффициент вовлеченности

~ 3

Постов в день

Ads index

beta

Архив постов

\";\ndocument.getElementById(\"content\").innerHTML = userInput;\n\n🟠Проблемы с безопасностью CSP (Content Security Policy) \nЕсли в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности. \n\n\n🟠Случайное удаление обработчиков событий \nЕсли заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся. \ndocument.getElementById(\"btn\").addEventListener(\"click\", () => {\n alert(\"Нажато!\");\n});\n\ndocument.getElementById(\"container\").innerHTML = \"\";\ndocument.getElementById(\"btn\").click(); // Ошибка, обработчик удален\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-18T09:05:40Z","dateModified":"2026-08-18T09:05:40Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1264},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2844","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2844","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2844","headline":"О!Хакатон возвращается — на кону миллион Приглашаем Go- и Python-разработчиков, аналитиков и продакт-менеджер…","articleBody":"О!Хакатон возвращается — на кону миллион\n\nПриглашаем Go- и Python-разработчиков, аналитиков и продакт-менеджеров на тревел-тех хакатон от Островка.\n\nВам предстоит решить одну из двух AI-задач в сфере тревел-теха и побороться за главный приз — 1 000 000 ₽.\n\nПрисоединиться к хакатону можно из любой точки мира. Участвуйте командой до пяти человек и выбирайте один из двух треков:\n\n📌«О!дин запрос». Цель для junior-специалистов — создать AI-агента для путешествий и отелей.\n📌«О!дин шаг до идеального отеля». Задача для специалистов уровней middle и senior — «переизобрести» опыт бронирования пользователя с помощью AI и новых интерфейсных механик.\n\n📅 Регистрация открыта до 16 октября 2026 года. Стартуем 23 октября.\n\nСкорее присоединяйтесь по ссылке!\n\nРеклама. ООО \"БРОНИРОВАНИЕ ГОСТИНИЦ\". ИНН 7703389880.","datePublished":"2026-08-18T07:00:10Z","dateModified":"2026-08-20T07:29:59Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_CCS0BLObe7NwDFhNBl2Ry2T9yhzj0LWHKORnaj9K_Ow?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":889},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2843","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2843","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2843","headline":"deep tech night: 5 сентября, онлайн ⚡ 5 сентября в онлайн-трансляции — доклады экспертов из Яндекса и междуна…","articleBody":"deep tech night: 5 сентября, онлайн\n\n⚡ 5 сентября в онлайн-трансляции — доклады экспертов из Яндекса и международных IT-компаний. В фокусе системы: NPU под LLM, RL-инфраструктура, Physical AI, YDB, большие базы данных и agentic systems.\n\nРазберём, что уже работает, где появляются инженерные компромиссы и как команды справляются с новыми требованиями к архитектуре, инфраструктуре и продакшену.\n\nВ прямом эфире можно будет задать вопросы спикерам. Запись отправим зарегистрированным участникам после события. \n\nЗарегистрироваться\n\n#реклама 16+\ndeeptechnight.ru\nО рекламодателе","datePublished":"2026-08-18T03:11:51Z","dateModified":"2026-08-20T01:19:13Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":880}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2842","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2842","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2842","headline":"🤔 Какое событие сработает при потере фокуса элементом формы? Событие blur — срабатывает, когда элемент теряет…","articleBody":"🤔 Какое событие сработает при потере фокуса элементом формы?\n\nСобытие blur — срабатывает, когда элемент теряет фокус (например, при переходе к другому полю).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-08-17T16:10:30Z","dateModified":"2026-08-17T16:10:30Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1163},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2841","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2841","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2841","headline":"Яндекс Музыка до 360 дней бесплатно Яндекс Музыка для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже…","articleBody":"Яндекс Музыка до 360 дней бесплатно\n\nЯндекс Музыка для вас и 3-х ваших близких.\nКинопоиск и Яндекс Книги тоже в мультиподписке Плюс.\nПопробуйте бесплатно❤️ \n\nСлушать\n\n#реклама 18+\nmusic.yandex.ru\nО рекламодателе","datePublished":"2026-08-17T11:04:54Z","dateModified":"2026-08-19T09:05:41Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/_J0rvKzoeTiA6fXsTvexFG8rJSNUOxWMI04is7a9qzSk?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":943}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2840","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2840","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2840","headline":"🤔 Как добавить слушатель события? Это важный аспект работы с веб-приложениями, так как позволяет реагировать…","articleBody":"🤔 Как добавить слушатель события?\n\nЭто важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий.\n\n🚩Почему это нужно?\n\nСлушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее.\n\n🚩Как это используется?\n\nРассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery.\n\n🟠Чистый JavaScript\nДля добавления слушателя события используется метод addEventListener.\n\n\n\n \n Event Listener Example\n\n\n \n\n \n\n\n\n🟠React\nОбработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.\nimport React from 'react';\n\nfunction App() {\n const handleClick = () => {\n alert('Button was clicked!');\n };\n\n return (\n

\n \n

\n );\n}\n\nexport default App;\n\n🟠jQuery\nЕсли вы используете его, добавление слушателей событий также очень просто и удобно.\n\n\n\n \n Event Listener Example\n \n\n\n \n\n \n\n\n\n🚩Почему это удобно и важно\n\n🟠Интерактивность\nПозволяет создавать динамичные и отзывчивые интерфейсы.\n🟠Гибкость\nВозможность реагировать на различные действия пользователей.\n🟠Удобство\nВ каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-17T09:05:39Z","dateModified":"2026-08-17T09:05:39Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1121},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}}]}

17 879

🤔 Как предотвратить рекурсию? Чтобы избежать бесконечной рекурсии: - Всегда нужно базовое условие выхода, которое не вызывает рекурсивный вызов. - Использовать ограничения по глубине вызова. - Проверять входные параметры. - Можно заменить рекурсию на итеративный подход (цикл), если глубина вызовов слишком большая. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 879

🤔 Какие типы данных существуют? Существует несколько основных типов данных, которые можно разделить на две категории: примитивные типы и объекты. 🚩Примитивные типы: 🟠Number представляет как целые числа, так и числа с плавающей точкой. Например, 42 или 3.14. 🟠String представляет текстовые данные. Строки неизменяемы. Пример: "Привет, мир!". 🟠Boolean имеет два значения, true и false, и используется для работы с логическими операциями. 🟠Undefined переменная имеет тип undefined, если она была объявлена, но ей не было присвоено никакого значения. 🟠Null специальное значение, которое представляет собой "ничего" или "пустое значение". Важно отметить, что null является объектом из-за ошибки в ранних версиях JavaScript. 🟠Symbol уникальное и неизменяемое значение, используемое как ключ для свойств объекта. Создают уникальные идентификаторы в объектах. 🟠BigInt тип данных, позволяющий работать с целыми числами произвольной точности. Введен для представления чисел, которые больше, чем максимальное значение, которое может представить тип Number. 🚩Объекты могут содержать наборы пар ключ-значение, где ключи - строки или символы, а значения — любой тип данных. Используются для представления коллекций данных, сложных структур или для создания пользовательских типов данных с помощью классов и прототипов. Ставь 👍 и забирай 📚 Базу знаний

17 879

🤔 Что такое SVG? SVG (Scalable Vector Graphics) — это векторный графический формат, основанный на XML. Он позволяет отображать графику (фигуры, линии, текст) с возможностью масштабирования без потери качества. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 879

🤔 Для чего нужна методология в html? Методология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения. 🚩Зачем это нужно 🟠Понятность кода Без единого подхода код может стать "кашей" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам. 🟠Снижение ошибок Если есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей. 🟠Упрощение масштабирования В больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые. 🟠Легкость сопровождения С методологией легко найти нужные элементы и вносить изменения. 🚩Примеры популярных методологий 🟠БЭМ (Блок, Элемент, Модификатор) Одна из самых популярных методологий для HTML и CSS. - Она предлагает структурировать классы так: - Блок: независимый компонент (например, menu). - Элемент: часть блока (например, menu__item). - Модификатор: вариант блока или элемента (например, menu__item--active). Пример кода

     <div class="menu">
       <div class="menu__item menu__item--active">Главная</div>
       <div class="menu__item">О нас</div>
       <div class="menu__item">Контакты</div>
     </div>

🟠Atomic Design Основана на создании интерфейсов из "атомов" (простейшие элементы, например, кнопки), "молекул" (комбинации атомов, например, форма) и "организмов" (сложные компоненты, например, шапка сайта). Пример

     <!-- Атом -->
     <button class="button">Клик</button>
     <!-- Молекула -->
     <div class="form">
       <label class="form__label">Имя</label>
       <input class="form__input" type="text">
     </div>

🟠SMACSS (Scalable and Modular Architecture for CSS) Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода. Ставь 👍 и забирай 📚 Базу знаний

17 879

Планируете переводить ребенка в онлайн-школу в сентябре? ✅Приглашаем родителей на прямую линию с директором онлайн-школы «Синергия». Встреча пройдет 25 августа в 18:00 в формате онлайн. Количество мест в вебинарной команте ограничено! Успейте зарегистрироваться! Регистрация бесплатная в мессенджере TELEGRAM Зарегистрироваться #реклама 16+ s.salebot.pro О рекламодателе

17 879

🤔 Как отменить обтекание картинки текстом? Используется свойство clear, которое говорит элементу не обтекать плавающие элементы. Можно применить clear: both или вставить блок с этим стилем после float-элемента. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 879

Не знак свыше, а точный таргетинг Теперь всем, кто продвигается через CTV в Яндекс Директе, стало проще находить свою аудиторию. Таргетингов стало в 5 раз больше. Вот что нового: — Таргетинг по интересам. Например, можно выбрать не всех, кто интересуется спортом, а только любителей фитнеса или тенниса. — Таргетинг по привычкам. Находите аудиторию по поведению в онлайне и офлайне — например, тех, кто регулярно посещает торговые центры или часто покупает товары в интернете. — Более гибкие настройки. Можно сочетать интересы и социально-демографические характеристики с жанрами и тематиками контента. 👌 Используйте новые возможности, чтобы сделать рекламу на Connected TV еще эффективнее Узнать больше #реклама yandex.ru О рекламодателе

17 879

🤔 Какие особенности слежения за "глубокими" объектами? Когда мы отслеживаем изменения в объектах (например, в React, Vue или MobX), важно понимать, что JavaScript не умеет автоматически следить за вложенными свойствами. Это называется глубокое слежение (deep watching). Проблема: поверхностное слежение (`shallow watching`) JavaScript сравнивает только ссылки на объекты, а не их содержимое.

const obj = { user: { name: "Иван" } };
const copy = obj; 

copy.user.name = "Петр"; 
console.log(obj.user.name); // "Петр" (оба объекта ссылаются на одно и то же)

🚩Глубокое копирование vs поверхностное Обычный Object.assign() или spread-оператор ({ ...obj }) делают поверхностное копирование:

const obj = { user: { name: "Иван" } };
const shallowCopy = { ...obj };

shallowCopy.user.name = "Петр";
console.log(obj.user.name); // "Петр" 😱 (изменился оригинал!)

Для глубокого копирования можно использовать structuredClone() или JSON.parse(JSON.stringify(obj)):

const deepCopy = structuredClone(obj);
deepCopy.user.name = "Петр";

console.log(obj.user.name); // "Иван" ✅ (оригинал не изменился)

🚩Как следить за глубокими объектами? 🟠React: следим через `useState` и `useEffect` В React состояние обновляется только при изменении ссылки (shallow compare).

const [user, setUser] = useState({ name: "Иван" });

useEffect(() => {
  console.log("Имя изменилось:", user.name);
}, [user]); // Работает только если user — новый объект!

// НЕ сработает:
user.name = "Петр"; // user остался тем же объектом

Решение – создавать новый объект при изменении:

setUser(prev => ({ ...prev, name: "Петр" }));

🟠Vue: `watch` vs `watchEffect` (глубокое слежение) Обычный watch следит только за первой вложенностью

watch(user, (newValue) => {
  console.log("Изменено:", newValue);
});

Глубокое слежение (deep: true)

watch(user, (newValue) => {
  console.log("Изменено:", newValue);
}, { deep: true });

Ставь 👍 и забирай 📚 Базу знаний

17 879

🤔 Как очистить форму? - Установить значения всех полей в "", null или undefined. - Использовать reset() на DOM-форме. - В фреймворках — сброс v-model/state. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 879

Тренинги по ИИ с выездом экспертов Практикума в ваш офис ⚡ Чтобы закрывать больше задач с меньшими ресурсами, нужна «суперсила». И это — ИИ, который снимает рутину, ускоряет процессы и повышает качество решений. Обучайте сотрудников ИИ, чтобы автоматизировать операционные задачи и ускорить ключевые процессы. Выберите формат, который подходит именно вашей команде: ✅ Базовый ИИ - закладываем фундамент. ✅ ИИ под роль - навыки для конкретных функций и специалистов: руководители, продукт и аналитика, маркетинг и продажи, HR и L&D, операционные команды. ✅ ИИ-трансформация - для компаний, которые хотят внедрять нейросети системно. ✨ При покупке любой из программ в августе и сентябре дарим доступ к бибиотеке ИИ навыков для команды Узнать больше #реклама 16+ practicum.yandex.ru О рекламодателе

17 879

🤔 Что такое meta теги? Meta-теги – это специальные HTML-теги, которые содержат метаинформацию о веб-странице. Они располагаются внутри <head> и не отображаются на самой странице, но помогают браузерам, поисковым системам и социальным сетям правильно обрабатывать и отображать страницу. 🚩Зачем нужны meta-теги? Улучшают SEO (поисковую оптимизацию) Управляют отображением в соцсетях и поисковиках Настраивают адаптивность страницы (например, на мобильных устройствах) Определяют кодировку, язык и авторство страницы 🚩Основные meta-теги с примерами Кодировка страницы

<meta charset="UTF-8">

Описание страницы (SEO)

<meta name="description" content="Лучший сайт с рецептами вкусных блюд!">

Ключевые слова (SEO, устарело)

<meta name="keywords" content="рецепты, еда, кулинария, блюда">

Автор страницы

<meta name="author" content="Иван Иванов">

Запрет индексации страницы

<meta name="robots" content="noindex, nofollow">

Адаптивность на мобильных устройствах

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Социальные сети (Open Graph, Twitter Cards) Facebook и другие соцсети (Open Graph)

<meta property="og:title" content="Вкусные рецепты">
<meta property="og:description" content="Попробуйте лучшие блюда со всего мира!">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">

Twitter-карточки

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Рецепты для гурманов">
<meta name="twitter:image" content="https://example.com/image.jpg">

Ставь 👍 и забирай 📚 Базу знаний

17 879

Gurufy 📚 Gurufy — ИИ-сервис, который собирает персональный курс под вашу задачу: план из глав, статьи с иллюстрациями и интерактивными виджетами, задания и ИИ-ассистент прямо в главе. ✨ Простой вопрос быстрее задать ChatGPT. Но когда на тему нужен день и больше, одним чатом её не закрыть: нет плана, нет визуализаций, нет заданий — всё тонет в одной переписке. 🎓 Готовый курс — десятки тысяч рублей против 500–1000 ₽. ⚡ Попробуйте сами. Старт бесплатный. Узнать больше #реклама 16+ gurufy.ru О рекламодателе

17 879

🤔 Как мы можем заставить элемент быть выше другого? Через z-index, но только если элемент позиционирован (relative, absolute, fixed, sticky). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 879

Дачная дача в Т-Банк Шопе Футболки с огурцами, тыквами, капустой и другие крутые штуки, да еще и с финансовыми пожеланиями. Надо брать. Посмотреть каталог #реклама tbank.ru О рекламодателе

17 879

🤔 Опасности использования `innerHTML` в JavaScript innerHTML – это свойство, которое позволяет вставлять HTML-код внутрь элемента как строку. Однако оно небезопасно и может привести к серьезным проблемам.

document.getElementById("content").innerHTML = "<h1>Привет!</h1>";

🟠Уязвимость: XSS-атаки (внедрение вредоносного кода) Если innerHTML получает данные от пользователя (например, из формы или URL), хакер может вставить вредоносный JavaScript-код.

const userInput = "<script>alert('Вас взломали!');</script>";
document.getElementById("content").innerHTML = userInput;

🟠Проблемы с безопасностью CSP (Content Security Policy) Если в веб-приложении включена CSP (защита от XSS), то innerHTML может нарушать политику безопасности.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

🟠Случайное удаление обработчиков событий Если заменить содержимое элемента через innerHTML, все обработчики событий внутри него удалятся.

document.getElementById("btn").addEventListener("click", () => {
  alert("Нажато!");
});

document.getElementById("container").innerHTML = "<button id='btn'>Клик</button>";
document.getElementById("btn").click(); // Ошибка, обработчик удален

Ставь 👍 и забирай 📚 Базу знаний

17 879

О!Хакатон возвращается — на кону миллион Приглашаем Go- и Python-разработчиков, аналитиков и продакт-менеджеров на тревел-тех хакатон от Островка. Вам предстоит решить одну из двух AI-задач в сфере тревел-теха и побороться за главный приз — 1 000 000 ₽. Присоединиться к хакатону можно из любой точки мира. Участвуйте командой до пяти человек и выбирайте один из двух треков: 📌«О!дин запрос». Цель для junior-специалистов — создать AI-агента для путешествий и отелей. 📌«О!дин шаг до идеального отеля». Задача для специалистов уровней middle и senior — «переизобрести» опыт бронирования пользователя с помощью AI и новых интерфейсных механик. 📅 Регистрация открыта до 16 октября 2026 года. Стартуем 23 октября. Скорее присоединяйтесь по ссылке! Реклама. ООО "БРОНИРОВАНИЕ ГОСТИНИЦ". ИНН 7703389880.

17 879

deep tech night: 5 сентября, онлайн ⚡ 5 сентября в онлайн-трансляции — доклады экспертов из Яндекса и международных IT-компаний. В фокусе системы: NPU под LLM, RL-инфраструктура, Physical AI, YDB, большие базы данных и agentic systems. Разберём, что уже работает, где появляются инженерные компромиссы и как команды справляются с новыми требованиями к архитектуре, инфраструктуре и продакшену. В прямом эфире можно будет задать вопросы спикерам. Запись отправим зарегистрированным участникам после события. Зарегистрироваться #реклама 16+ deeptechnight.ru О рекламодателе

17 879

🤔 Какое событие сработает при потере фокуса элементом формы? Событие blur — срабатывает, когда элемент теряет фокус (например, при переходе к другому полю). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 879

Яндекс Музыка до 360 дней бесплатно Яндекс Музыка для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в мультиподписке Плюс. Попробуйте бесплатно❤️ Слушать #реклама 18+ music.yandex.ru О рекламодателе

17 879

🤔 Как добавить слушатель события? Это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий. 🚩Почему это нужно? Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее. 🚩Как это используется? Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery. 🟠Чистый JavaScript Для добавления слушателя события используется метод addEventListener.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>

🟠React Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.

import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

🟠jQuery Если вы используете его, добавление слушателей событий также очень просто и удобно.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').on('click', function() {
        alert('Button was clicked!');
      });
    });
  </script>
</body>
</html>

🚩Почему это удобно и важно 🟠Интерактивность Позволяет создавать динамичные и отзывчивые интерфейсы. 🟠Гибкость Возможность реагировать на различные действия пользователей. 🟠Удобство В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно. Ставь 👍 и забирай 📚 Базу знаний