\n\n🚩Какие события есть в Drag and Drop? \n\nОсновные события: \ndragstart — когда начали тянуть элемент. \ndrag — когда элемент двигается (срабатывает много раз). \ndragenter — когда курсор заходит в зону сброса. \ndragover — когда элемент находится над зоной (нужно preventDefault()). \ndragleave — когда курсор покидает зону сброса. \ndrop — когда элемент отпущен в зоне сброса. \ndragend — когда перетаскивание завершено (даже если не сбросили). \n\n🚩Где используется Drag and Drop? \n\n- Перетаскивание файлов в
(например, загрузка изображений). \n- Канбан-доски, как в Trello. \n- Онлайн-редакторы, как Figma. \n- Игры, где можно перемещать предметы. \n\n🚩Можно ли сделать Drag and Drop без HTML5 API? \n\nДа, можно использовать другие методы: \nЧерез события мыши (mousedown, mousemove, mouseup). \nЧерез CSS position: absolute и transform. \nЧерез JS-библиотеки (Sortable.js, React DnD, Draggable.js). \nНапример, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-06-27T09:05:58Z","dateModified":"2026-06-27T09:05:58Z","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":1617},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2651","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2651","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2651","headline":"Запустите рекламу в телеграм-каналах через Яндекс Директ Перфоманс-реклама в мессенджере продолжает работать:…","articleBody":"Запустите рекламу в телеграм-каналах через Яндекс Директ\n\nПерфоманс-реклама в мессенджере продолжает работать:\n\n• Таргетинг по тематикам и регионам\n• Умный подбор каналов\n• Гибкие модели оплаты (CPC и CPV)\n\nЯндекс Директ знает, как привлечь целевую аудиторию 💰👌 \n\nПопробовать\n\n#реклама \nyandex.ru\nО рекламодателе","datePublished":"2026-06-26T18:10:28Z","dateModified":"2026-06-28T16:10:35Z","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://n3.tlmtr.cc/p/_7FChcAKV3NDJmwkFRUdk48MHAa9a5k8ORNfyl8Om1u4?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":909}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2650","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2650","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2650","headline":"🤔 Примеры того, что можно использовать в useEffect помимо запросов на сервер: - Слежение за размерами окна (e…","articleBody":"🤔 Примеры того, что можно использовать в useEffect помимо запросов на сервер:\n\n- Слежение за размерами окна (event listener);\n- Установка таймера или интервала;\n- Работа с локальным хранилищем (localStorage);\n- Изменение мета-тегов или заголовков документа;\n- Анимации, интеграции с библиотеками (например, chart.js).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-06-26T16:10:27Z","dateModified":"2026-06-26T16:10:27Z","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":1433},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2649","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2649","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2649","headline":"Гайд МТС Линк для усиления лидогенерации Как выполнить KPI по лидам с помощью вебинаров? Изучили опыт 7.5 млн…","articleBody":"Гайд МТС Линк для усиления лидогенерации\n\nКак выполнить KPI по лидам с помощью вебинаров? Изучили опыт 7.5 млн онлайн-мероприятий, которые проходят на платформе ежегодно, и спешим поделиться бесплатным гайдом\n\n✅ Что внутри:\n\n- Составили пошаговую инструкцию по организации маркетингового вебинара;\n- Собрали рекомендации экспертов по обучению, выступлениям и маркетингу; \n- Делимся успешными кейсами компаний DSSL, Just AI, «Гален», «САРШТЕДТ» и «ЭГИС-РУС»\n\n✅ Кому полезно:\n\n- Маркетологам — для выполнения KPI по лидам;\n- Владельцам сложных продуктов — чтобы знакомить с продуктом поэтапно;\n- Экспертам и блогерам — для монетизации личного бренда;\n- B2B-командам — для сокращения цикла сделки через обучение клиентов.\n\n✨ Скачайте бесплатно по ссылке \n\nСкачать\n\n#реклама 16+\nmts-link.ru\nО рекламодателе","datePublished":"2026-06-26T10:44:21Z","dateModified":"2026-06-28T08:53:24Z","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://n3.tlmtr.cc/p/_7qI9kh9fIubQ1NytQ8i8Q8iaHR4PqVVYYy7AN66kzEQ?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":990}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2648","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2648","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2648","headline":"🤔 Что такое элемент datalist в html 5?
— это тег в HTML5, который позволяет создать выпадающий спи…","articleBody":"🤔 Что такое элемент datalist в html 5?\n\n — это тег в HTML5, который позволяет создать выпадающий список вариантов для , список остаётся необязательным — пользователь может ввести своё значение. \n\n🚩Как работает ``? \n\nПример: автодополнение города \nВыберите город: \n\n \n \n \n \n \n\n🚩Можно ли использовать с `type=\"number\"`? \n\nНет, не работает с type=\"number\". \nНо с type=\"text\" и type=\"email\" — работает отлично. \n\n \n \n \n\nРабочий вариант \n.\n- figure — контейнер для самостоятельного медиаконтента с подписью (графики, схемы).\n- footer — нижний блок страницы или раздела, часто содержит навигацию, контакты.\n- header — верхний блок, заголовки, логотип, меню.\n- hgroup — группировка заголовков (например, h1 и h2 вместе как один логический блок).\n- output — отображение результата (например, вычислений в формах).\n- section — логический блок документа (тема, раздел).\n- video — встроенный видеоплеер, воспроизводит видео.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-06-25T16:10:23Z","dateModified":"2026-06-25T16:10:23Z","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":1544},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2645","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2645","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2645","headline":"Яндекс приглашает опытных аналитиков на мероприятия Мы собрали календарь событий для продуктовых и data-анали…","articleBody":"Яндекс приглашает опытных аналитиков на мероприятия\n\nМы собрали календарь событий для продуктовых и data-аналитиков, data scientists, маркетинговых и бизнес-аналитиков: \n\n✅ Welcome time — уютные офлайн-встречи. Обсуждаем внутреннюю кухню команд Поисковых сервисов и ИИ, делимся кейсами и неформально общаемся.\n\n✅ Data Driven — главная конференция года про анализ данных для бизнес-решений.\n\n✅ Подкаст и ТГ-канал для тех, кто любит погружаться в детали. \n\nТакже периодически проводим мероприятия с быстрым офером.\n\nЗаглядывайте на страничку, чтобы узнать больше, и приходите знакомиться с коллегами по цеху и делиться экспертизой. \n\nПерейти на сайт\n\n#реклама \nyandex.ru\nО рекламодателе","datePublished":"2026-06-25T11:10:08Z","dateModified":"2026-06-27T09:17:29Z","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":1054}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2644","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2644","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2644","headline":"🤔 Как определить что состояние является глобальным? Глобальное состояние – это данные, которые должны быть до…","articleBody":"🤔 Как определить что состояние является глобальным?\n\nГлобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов: \n\n🚩Используется ли это состояние в нескольких независимых компонентах? \n\nЕсли одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (user), лучше хранить её в глобальном состоянии (например, в Context или Redux). \n// Глобальное состояние (например, Context API)\nconst UserContext = createContext();\n\nfunction App() {\n const [user, setUser] = useState({ name: \"Иван\", isLoggedIn: true });\n\n return (\n \n \n );\n}\n\nfunction Navbar() {\n const user = useContext(UserContext);\n return Привет, {user.name}!
;\n}\n\nfunction Profile() {\n const user = useContext(UserContext);\n return Профиль пользователя: {user.name}
;\n}\n\n🚩Должно ли состояние сохраняться при переходе между страницами? \n\nЕсли данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине \nАвторизация пользователя \nТемная/светлая тема приложения \nЕсли данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище. \n\n🚩Может ли состояние изменяться в одном месте, а использоваться в другом? \n\nЕсли одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии. \nconst ChatContext = createContext();\n\nfunction ChatProvider({ children }) {\n const [messages, setMessages] = useState([]);\n\n const sendMessage = (text) => {\n setMessages([...messages, { text, id: Date.now() }]);\n };\n\n return (\n \n {children}\n \n );\n}\n\nfunction ChatList() {\n const { messages } = useContext(ChatContext);\n return messages.map((msg) => {msg.text}
);\n}\n\nfunction ChatInput() {\n const { sendMessage } = useContext(ChatContext);\n const [text, setText] = useState(\"\");\n\n return (\n setText(e.target.value)}\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n sendMessage(text);\n setText(\"\");\n }\n }}\n />\n );\n}\n\n🚩Зависит ли состояние от URL (адресной строки)? \n\nИногда состояние можно не делать глобальным, а просто хранить его в URL (в query-параметрах или path). \nID открытого товара: /products/123 \nФильтры товаров: /shop?category=shoes&sort=price \nСтраница чата с пользователем: /chat?user=ivan\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-06-25T09:05:55Z","dateModified":"2026-06-25T09:05:55Z","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":1366},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@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/2643","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2643","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2643","headline":"Кредитная карта супер Сплита Платите ей на кассах магазинов и онлайн — лимит до 1 млн ₽ на любые покупки. Сум…","articleBody":"Кредитная карта супер Сплита\n\nПлатите ей на кассах магазинов и онлайн — лимит до 1 млн ₽ на любые покупки.\nСумму можно разделить на части до 6 месяцев без переплат. А также:\n\n— Бесплатное обслуживание\n— 0 ₽ в день покупки, первый платёж — только через месяц\n— Самостоятельная настройка графика платежей\n— Бесплатная пластиковая карта \n\nУзнать больше\n\nИзучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: АО «Яндекс Банк» .\n\n#реклама \npay.yandex.ru\nО рекламодателе","datePublished":"2026-06-24T21:10:03Z","dateModified":"2026-06-26T19:10:07Z","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/_hqCHX1wW4MP0VlZ9Pz928RtZPtjN1ZQHZrLA7sKHqhw?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1054}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2642","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2642","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2642","headline":"🤔 Какой метод запускает проигрывание аудио-файла? Для воспроизведения используется метод play(), вызываемый н…","articleBody":"🤔 Какой метод запускает проигрывание аудио-файла?\n\nДля воспроизведения используется метод play(), вызываемый на элементе или объекте, созданном через JavaScript.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-06-24T16:10:23Z","dateModified":"2026-06-24T16:10:23Z","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":1615},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2641","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2641","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2641","headline":"🤔 Как браузер понимает что ресурс нужно закешировать? Браузер использует HTTP-заголовки и механизмы кэширован…","articleBody":"🤔 Как браузер понимает что ресурс нужно закешировать?\n\nБраузер использует HTTP-заголовки и механизмы кэширования, чтобы решить, нужно ли сохранять ресурс (HTML, CSS, JS, изображения) и как долго его хранить. \n\n🚩Как браузер решает, кешировать ресурс или нет? \n\nКогда браузер загружает ресурс, сервер может сказать браузеру, как его кешировать, с помощью HTTP-заголовков. \nHTTP/1.1 200 OK\nCache-Control: max-age=3600, public\nETag: \"abc123\"\n\n🚩Как работают заголовки кэширования? \n\n🟠`Cache-Control` – главный заголовок \nОпределяет, как долго ресурс должен храниться в кэше. \nCache-Control: max-age=86400, public\n\n🟠`Expires` – устаревший, но ещё используется \nОпределяет конкретную дату, до которой браузер может использовать кэшированный ресурс. \nExpires: Wed, 26 Feb 2025 12:00:00 GMT\n\n🟠`ETag` – проверка обновлений ресурса \nПозволяет браузеру узнать, изменился ли файл на сервере. \nETag: \"abc123\"\n\nЕсли браузер снова запрашивает ресурс, он отправляет заголовок \nIf-None-Match: \"abc123\"\n\n🟠`Last-Modified` – альтернатива `ETag` \nДата последнего изменения ресурса. \nLast-Modified: Tue, 25 Feb 2025 15:30:00 GMT\n\nБраузер может отправить запрос с\nIf-Modified-Since: Tue, 25 Feb 2025 15:30:00 GMT\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-06-24T09:06:13Z","dateModified":"2026-06-24T09:06: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":1928},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2640","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2640","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2640","headline":"Осталось 3 часа до конца акции: «Пожизненный PRO тариф — по цене 1 года» Поиск работы отнимает силы, время и…","articleBody":"Осталось 3 часа до конца акции:\n«Пожизненный PRO тариф — по цене 1 года»\n\nПоиск работы отнимает силы, время и веру в себя, но не у тех кто использует easyoffer PRO. Успей сделать самую выгодную инвестицию в развитие своей карьеры.\n\nАкция закончится уже сегодня 23 июня 23:59 по мск:\n👉 https://easyoffer.ru/pro","datePublished":"2026-06-23T18:00:08Z","dateModified":"2026-06-23T21:00: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"},"image":["https://n3.tlmtr.cc/p/_vWKtxt9wr-YckWmwSyyE-030E4qRrDwSbsa8ToUhfcI?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":403}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2639","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2639","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2639","headline":"🤔 Что такое CDN? CDN (Content Delivery Network) — это сеть распределённых серверов, которая хранит копии стат…","articleBody":"🤔 Что такое CDN?\n\nCDN (Content Delivery Network) — это сеть распределённых серверов, которая хранит копии статических ресурсов (изображения, стили, скрипты) и предоставляет их пользователям с ближайшего к ним узла.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-06-23T16:10:23Z","dateModified":"2026-06-23T16:10:23Z","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":1810},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}}]}🤔 Какие методы HTTP-запросов есть?
1. GET: Получение данных с сервера.
2. POST: Отправка данных на сервер.
3. PUT: Полное обновление ресурса.
4. PATCH: Частичное обновление ресурса.
5. DELETE: Удаление ресурса.
6. HEAD: Получение заголовков ответа без тела.
7. OPTIONS: Получение информации о поддерживаемых методах.
8. CONNECT, TRACE: Используются реже для специальных задач.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Как понимают изменение состояния mobxvue?
MobX в Vue работает с реактивностью (как и Vue), но использует свою систему отслеживания изменений. Он понимает, что состояние изменилось, с помощью прокс (Proxy) и геттеров/сеттеров (get/set).
🚩
Как MobX делает состояние реактивным?
В MobX основная функция для создания реактивного состояния —
observable(). Она превращает объект в реактивный Proxy, который отслеживает чтение (get) и изменение (set) свойств.
import { observable } from "mobx";
const store = observable({
count: 0,
increment() {
this.count++;
},
});
console.log(store.count); // MobX "запоминает", что это свойство использовалось
store.increment(); // MobX "замечает", что свойство изменилось
🚩
Как MobX понимает, что нужно обновить компонент Vue?
Vue-компоненты подписываются на реактивные свойства, когда они рендерятся внутри
observer().
import { defineComponent } from "vue";
import { observer } from "mobx-vue-lite";
export default observer(defineComponent({
setup() {
return {
store,
};
},
template: `<div>{{ store.count }}</div>`,
}));
🚩
Как MobX понимает зависимости? (Track & Re-run)
MobX автоматически отслеживает зависимости во время рендера.
Когда компонент использует
store.count, MobX **"запоминает", что он зависит от
count.
Когда
count изменяется, MobX перерисовывает только этот компонент.
import { computed } from "mobx";
const store = observable({
count: 1,
get doubleCount() {
return this.count * 2;
},
});
console.log(store.doubleCount); // 2
store.count = 2;
console.log(store.doubleCount); // 4 (MobX понимает, что зависимость изменилась)
🚩
Как MobX оптимизирует обновления? (Reactions)
MobX не просто перерисовывает всё — он оптимизирует рендеринг.
🟠
autorun
запускается сразу и при изменении любого используемого свойства.
🟠
reaction
запускается только когда меняется конкретное наблюдаемое свойство.
🟠
when
выполняется один раз, когда условие становится
true.
import { autorun } from "mobx";
const store = observable({ count: 0 });
autorun(() => {
console.log("Count изменился:", store.count);
});
store.count = 1; // "Count изменился: 1"
store.count = 2; // "Count изменился: 2"Ставь 👍 и забирай 📚 Базу знаний 🤔 Что мы можем делать с помощью DevTools браузера?
- Инспектировать и изменять DOM/CSS;
- Смотреть сетевые запросы (Network);
- Отлаживать JS-код (Sources, breakpoints);
- Анализировать производительность;
- Проверять доступность и рендеринг;
- Смотреть localStorage, cookies и др.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний Получи грант до 3,48 млн на обучение дизайну
Поступай на дизайн в Центральный университет с грантом.
Для учеников 10–11-х классов и СПО. Освой графический, UI/UX и продуктовый дизайн. Создавай визуальные концепты будущего.
На программе студенты получают фундаментальную базу, развивают прикладные навыки, приобретают опыт работы над реальными проектами, собирают портфолио и строят связи внутри дизайн-сообщества
Подать заявку
#реклама 16+
cu.ru
О рекламодателе 🤔 Является ли, drag and drop частью спецификации?
Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек.
🚩Как работает Drag and Drop API?
В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут
draggable="true". Затем срабатывают специальные события, такие как
dragstart,
drop,
dragover и другие.
<div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>
<script>
const dragItem = document.getElementById("drag-item");
const dropZone = document.getElementById("drop-zone");
dragItem.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text/plain", "Данные элемента");
});
dropZone.addEventListener("dragover", (event) => {
event.preventDefault(); // Нужно, чтобы разрешить сброс
});
dropZone.addEventListener("drop", (event) => {
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
alert("Элемент сброшен: " + data);
});
</script>🚩Какие события есть в Drag and Drop?
Основные события:
dragstart — когда начали тянуть элемент.
drag — когда элемент двигается (срабатывает много раз).
dragenter — когда курсор заходит в зону сброса.
dragover — когда элемент находится над зоной (нужно
preventDefault()).
dragleave — когда курсор покидает зону сброса.
drop — когда элемент отпущен в зоне сброса.
dragend — когда перетаскивание завершено (даже если не сбросили).
🚩Где используется Drag and Drop?
- Перетаскивание файлов в
<input type="file"> (например, загрузка изображений).
- Канбан-доски, как в Trello.
- Онлайн-редакторы, как Figma.
- Игры, где можно перемещать предметы.
🚩Можно ли сделать Drag and Drop без HTML5 API?
Да, можно использовать другие методы:
Через события мыши (
mousedown,
mousemove,
mouseup).
Через CSS
position: absolute и
transform.
Через JS-библиотеки (
Sortable.js,
React DnD,
Draggable.js).
Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события
touchstart,
touchmove,
touchend.
Ставь 👍 и забирай 📚 Базу знаний 🤔 Примеры того, что можно использовать в useEffect помимо запросов на сервер:
- Слежение за размерами окна (event listener);
- Установка таймера или интервала;
- Работа с локальным хранилищем (localStorage);
- Изменение мета-тегов или заголовков документа;
- Анимации, интеграции с библиотеками (например, chart.js).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний Гайд МТС Линк для усиления лидогенерации
Как выполнить KPI по лидам с помощью вебинаров? Изучили опыт 7.5 млн онлайн-мероприятий, которые проходят на платформе ежегодно, и спешим поделиться бесплатным гайдом
✅ Что внутри:
- Составили пошаговую инструкцию по организации маркетингового вебинара;
- Собрали рекомендации экспертов по обучению, выступлениям и маркетингу;
- Делимся успешными кейсами компаний DSSL, Just AI, «Гален», «САРШТЕДТ» и «ЭГИС-РУС»
✅ Кому полезно:
- Маркетологам — для выполнения KPI по лидам;
- Владельцам сложных продуктов — чтобы знакомить с продуктом поэтапно;
- Экспертам и блогерам — для монетизации личного бренда;
- B2B-командам — для сокращения цикла сделки через обучение клиентов.
✨ Скачайте бесплатно по ссылке
Скачать
#реклама 16+
mts-link.ru
О рекламодателе 🤔 Что такое элемент datalist в html 5? <datalist> — это тег в HTML5, который позволяет создать выпадающий список вариантов для
<input>. Он помогает пользователям быстрее вводить данные, предлагая автодополнение, но в отличие от
<select>, список остаётся необязательным — пользователь может ввести своё значение.
🚩
Как работает `<datalist>`?
Пример: автодополнение города
<label for="city">Выберите город:</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
<option value="Москва">
<option value="Санкт-Петербург">
<option value="Казань">
<option value="Новосибирск">
</datalist>
🚩
Можно ли использовать с `type="number"`?
Нет,
<datalist> не работает с
type="number".
Но с
type="text" и
type="email" — работает отлично.
<input type="number" list="numbers">
<datalist id="numbers">
<option value="10">
<option value="20">
</datalist>
Рабочий вариант
<input type="text" list="numbers">Ставь 👍 и забирай 📚 Базу знаний Магия Lovable: как создавать готовые интерфейсы промптом
Lovable может за минуты собрать экран, который выглядит как почти готовый интерфейс. Но результат зависит не от «магии нейросети», а от того, насколько точно вы ставите задачу. Один расплывчатый запрос даст случайный макет, а правильно собранный системный промпт — понятную структуру, единый стиль и экран, который уже можно показывать заказчику или использовать для проверки идеи.
На открытом уроке
2 июля в 20:00 разберём, как формулировать задачи для Lovable. Поговорим о структуре системного промпта, ключевых словах, которые помогают превратить текст в качественный интерфейс, и способах доработки результата через встроенный редактор. Отдельно обсудим, как управлять компонентами, просить нейросеть переиспользовать элементы и сохранять единый визуальный стиль.
Записаться
#реклама 16+
otus.ru
О рекламодателе 🤔 Дай пояснение, для какой цели добавлены следующие элементы.
article, aside, audio, canvas, figcaption, figure, footer, header, hgroup, output, section, video
- article — самодостаточный, независимый фрагмент контента (пост, новость).
- aside — боковое или дополнительное содержимое (сайдбар, заметка).
- audio — встроенный аудиоплеер, проигрывает звук.
- canvas — холст для динамической графики, рисования.
- figcaption — подпись к изображению или другой визуализации в <figure>.
- figure — контейнер для самостоятельного медиаконтента с подписью (графики, схемы).
- footer — нижний блок страницы или раздела, часто содержит навигацию, контакты.
- header — верхний блок, заголовки, логотип, меню.
- hgroup — группировка заголовков (например, h1 и h2 вместе как один логический блок).
- output — отображение результата (например, вычислений в формах).
- section — логический блок документа (тема, раздел).
- video — встроенный видеоплеер, воспроизводит видео.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний Яндекс приглашает опытных аналитиков на мероприятия
Мы собрали календарь событий для продуктовых и data-аналитиков, data scientists, маркетинговых и бизнес-аналитиков:
✅ Welcome time — уютные офлайн-встречи. Обсуждаем внутреннюю кухню команд Поисковых сервисов и ИИ, делимся кейсами и неформально общаемся.
✅ Data Driven — главная конференция года про анализ данных для бизнес-решений.
✅ Подкаст и ТГ-канал для тех, кто любит погружаться в детали.
Также периодически проводим мероприятия с быстрым офером.
Заглядывайте на страничку, чтобы узнать больше, и приходите знакомиться с коллегами по цеху и делиться экспертизой.
Перейти на сайт
#реклама
yandex.ru
О рекламодателе 🤔 Как определить что состояние является глобальным?
Глобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов:
🚩
Используется ли это состояние в нескольких независимых компонентах?
Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (
user), лучше хранить её в глобальном состоянии (например, в Context или Redux).
// Глобальное состояние (например, Context API)
const UserContext = createContext();
function App() {
const [user, setUser] = useState({ name: "Иван", isLoggedIn: true });
return (
<UserContext.Provider value={user}>
<Navbar />
<Profile />
</UserContext.Provider>
);
}
function Navbar() {
const user = useContext(UserContext);
return <div>Привет, {user.name}!</div>;
}
function Profile() {
const user = useContext(UserContext);
return <div>Профиль пользователя: {user.name}</div>;
}
🚩
Должно ли состояние сохраняться при переходе между страницами?
Если данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине
Авторизация пользователя
Темная/светлая тема приложения
Если данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище.
🚩
Может ли состояние изменяться в одном месте, а использоваться в другом?
Если одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (
ChatInput), а отображается в другом (
ChatList), логично хранить все сообщения в глобальном состоянии.
const ChatContext = createContext();
function ChatProvider({ children }) {
const [messages, setMessages] = useState([]);
const sendMessage = (text) => {
setMessages([...messages, { text, id: Date.now() }]);
};
return (
<ChatContext.Provider value={{ messages, sendMessage }}>
{children}
</ChatContext.Provider>
);
}
function ChatList() {
const { messages } = useContext(ChatContext);
return messages.map((msg) => <p key={msg.id}>{msg.text}</p>);
}
function ChatInput() {
const { sendMessage } = useContext(ChatContext);
const [text, setText] = useState("");
return (
<input
value={text}
onChange={(e) => setText(e.target.value)}
onKeyPress={(e) => {
if (e.key === "Enter") {
sendMessage(text);
setText("");
}
}}
/>
);
}
🚩
Зависит ли состояние от URL (адресной строки)?
Иногда состояние можно не делать глобальным, а просто хранить его в URL (в
query-параметрах или
path).
ID открытого товара:
/products/123
Фильтры товаров:
/shop?category=shoes&sort=price
Страница чата с пользователем:
/chat?user=ivan
Ставь 👍 и забирай 📚 Базу знаний Кредитная карта супер Сплита
Платите ей на кассах магазинов и онлайн — лимит до 1 млн ₽ на любые покупки.
Сумму можно разделить на части
до 6 месяцев без переплат. А также:
— Бесплатное обслуживание
— 0 ₽ в день покупки, первый платёж — только через месяц
— Самостоятельная настройка графика платежей
— Бесплатная пластиковая карта
Узнать больше Изучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: АО «Яндекс Банк» .
#реклама
pay.yandex.ru
О рекламодателе 🤔 Какой метод запускает проигрывание аудио-файла?
Для воспроизведения используется метод play(), вызываемый на элементе <audio> или объекте, созданном через JavaScript.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний 🤔 Как браузер понимает что ресурс нужно закешировать?
Браузер использует HTTP-заголовки и механизмы кэширования, чтобы решить, нужно ли сохранять ресурс (HTML, CSS, JS, изображения) и как долго его хранить.
🚩
Как браузер решает, кешировать ресурс или нет?
Когда браузер загружает ресурс, сервер может сказать браузеру, как его кешировать, с помощью HTTP-заголовков.
HTTP/1.1 200 OK
Cache-Control: max-age=3600, public
ETag: "abc123"
🚩
Как работают заголовки кэширования?
🟠
`Cache-Control` – главный заголовок
Определяет, как долго ресурс должен храниться в кэше.
Cache-Control: max-age=86400, public
🟠
`Expires` – устаревший, но ещё используется
Определяет конкретную дату, до которой браузер может использовать кэшированный ресурс.
Expires: Wed, 26 Feb 2025 12:00:00 GMT
🟠
`ETag` – проверка обновлений ресурса
Позволяет браузеру узнать, изменился ли файл на сервере.
ETag: "abc123"
Если браузер снова запрашивает ресурс, он отправляет заголовок
If-None-Match: "abc123"
🟠
`Last-Modified` – альтернатива `ETag`
Дата последнего изменения ресурса.
Last-Modified: Tue, 25 Feb 2025 15:30:00 GMT
Браузер может отправить запрос с
If-Modified-Since: Tue, 25 Feb 2025 15:30:00 GMTСтавь 👍 и забирай 📚 Базу знаний Осталось 3 часа до конца акции:
«Пожизненный PRO тариф — по цене 1 года»
Поиск работы отнимает силы, время и веру в себя, но не у тех кто использует easyoffer PRO. Успей сделать самую выгодную инвестицию в развитие своей карьеры.
Акция закончится уже сегодня 23 июня 23:59 по мск:
👉
https://easyoffer.ru/pro 🤔 Что такое CDN?
CDN (Content Delivery Network) — это сеть распределённых серверов, которая хранит копии статических ресурсов (изображения, стили, скрипты) и предоставляет их пользователям с ближайшего к ним узла.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай
📚 Базу знаний Больше 
Сеть: