不要被骗子欺骗！Telemetrio 会找到并标记这些频道 👉 如果想查看标记，请订阅

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

前往频道在 Telegram

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

显示更多

📈 Telegram 频道 Frontend | Вопросы собесов 的分析概览

频道 Frontend | Вопросы собесов (@easy_javascript_ru) 俄语语言赛道中的是活跃参与者。目前社区聚集了 17 418 名订阅者，在 技术与应用 类别中位列第 7 459，并在 俄罗斯 地区排名第 37 727 位。

📊 受众指标与增长动态

自 невідомо 创建以来，项目保持高速增长，吸引了 17 418 名订阅者。

根据 29 十月, 2026 的最新数据，频道保持稳定运转。过去 30 天订阅人数变化为 -230，过去 24 小时变化为 -11，整体触达仍然可观。

认证状态： 未认证
互动率 (ER)： 平均受众互动率为 6.92%。内容发布后 24 小时内通常能获得 4.34% 的反应，占订阅者总量。
帖子覆盖： 每篇帖子平均可获得 1 206 次浏览，首日通常累积 757 次浏览。
互动与反馈： 受众积极参与，单帖平均反应数为 4。
主题关注点： 内容集中在 ставь, браузер, html, border, flex 等核心主题上。

📝 描述与内容策略

作者将该频道定位为表达主观观点的平台：
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads”

凭借高频更新（最新数据采集于 30 十月, 2026），频道始终保持新鲜度与高覆盖。分析显示受众积极互动，使其成为 技术与应用 类别中的关键影响点。

17 418

订阅者

-1124 小时

-727 天

-23030 天

1 206

帖子浏览量

~ 75724 小时

~ 87448 小时

6.92%

参与率

~ 2

每日帖子数

Ads index

beta

帖子存档

\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-03-11T09:05:41Z","dateModified":"2026-03-11T09:05:41Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2381},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":22}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2453","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2453","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2453","headline":"🤔 Как мониторить ошибки JS? - Через консоль браузера (DevTools); - Используя системы логирования: Sentry, Log…","articleBody":"🤔 Как мониторить ошибки JS?\n\n- Через консоль браузера (DevTools);\n- Используя системы логирования: Sentry, LogRocket, Bugsnag;\n- Локальный лог с console.error и передачей на сервер;\n- Performance API, window.onerror, unhandledrejection.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-03-10T16:10:40Z","dateModified":"2026-03-10T16:10:40Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2192},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2452","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2452","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2452","headline":"🤔 Расскажи про операторы сравнения Операторы сравнения в JavaScript позволяют сравнивать значения и возвращаю…","articleBody":"🤔 Расскажи про операторы сравнения\n\nОператоры сравнения в JavaScript позволяют сравнивать значения и возвращают true или false. Они часто используются в условиях (if, while) и тернарных операторах. \n\n🚩Разница между `==` и `===` \n\n🟠`==` (нестрогое сравнение)\nПри == JavaScript приводит типы перед сравнением. \nconsole.log(5 == \"5\"); // true (строка \"5\" приводится к числу)\nconsole.log(0 == false); // true (false → 0)\nconsole.log(null == undefined); // true (особый случай)\n\n🟠`===` (строгое сравнение)\nПри === сравниваются и значение, и тип.\nconsole.log(5 === \"5\"); // false (разные типы)\nconsole.log(0 === false); // false (число !== логический тип)\nconsole.log(null === undefined); // false (разные типы)\n\n🚩🔹 Логические значения в сравнении \n\nJavaScript приводит значения к true или false \nconsole.log(1 == true); // true (1 → true)\nconsole.log(0 == false); // true (0 → false)\nconsole.log(\"\" == false); // true (\"\" → false)\nconsole.log([] == false); // true (пустой массив → false)\nconsole.log(null == false); // false (null не приводится к false)\n\n🚩Особые случаи \n\n- null == undefined → true (они считаются \"похожими\"). \n- null === undefined → false (разные типы). \n- null >= 0 → true (null превращается в 0). \n- null > 0 → false (но null >= 0 – true, странно, да?). \nconsole.log(null == undefined); // true\nconsole.log(null >= 0); // true\nconsole.log(null > 0); // false (WTF?)\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-03-10T09:05:38Z","dateModified":"2026-03-10T09:05:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2451},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2451","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2451","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2451","headline":"Покупайте Samsung Galaxy A серию на Яндекс Маркете Узнать больше #реклама market.yandex.ru О рекламодателе","articleBody":"Покупайте Samsung Galaxy A серию\n\nна Яндекс Маркете \n\nУзнать больше\n\n#реклама \nmarket.yandex.ru\nО рекламодателе","datePublished":"2026-03-10T03:11:22Z","dateModified":"2026-03-12T01:11:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/5296329464004416052?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1506},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2450","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2450","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2450","headline":"🤔 Для чего необходим атрибут rel тега ? Атрибут rel (relationship) указывает тип связи между текущим до…","articleBody":"🤔 Для чего необходим атрибут rel тега ?\n\nАтрибут rel (relationship) указывает тип связи между текущим документом и подключаемым ресурсом. Примеры:\n- stylesheet — для подключения CSS;\n- icon — для favicon;\n- preload, dns-prefetch — для оптимизации загрузки.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-03-09T16:10:39Z","dateModified":"2026-03-09T16:10:39Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2250},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2449","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2449","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2449","headline":"🤔 Что делает omit? omit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект б…","articleBody":"🤔 Что делает omit?\n\nomit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект без этих ключей. \n\nВ JavaScript нет встроенного omit, но его можно реализовать с помощью деструктуризации и методов Object.fromEntries() или reduce(). \n\nРеализация omit с Object.fromEntries() (современный способ)\nfunction omit(obj, keys) {\n return Object.fromEntries(\n Object.entries(obj).filter(([key]) => !keys.includes(key))\n );\n}\n\nconst user = { name: \"Alice\", age: 25, password: \"123456\" };\nconst safeUser = omit(user, [\"password\"]); \n\nconsole.log(safeUser); // { name: \"Alice\", age: 25 }\n\nРеализация omit с reduce() (альтернативный способ)\nfunction omit(obj, keys) {\n return Object.keys(obj).reduce((acc, key) => {\n if (!keys.includes(key)) acc[key] = obj[key];\n return acc;\n }, {});\n}\n\nconst data = { a: 1, b: 2, c: 3 };\nconsole.log(omit(data, [\"b\"])); // { a: 1, c: 3 }\n\nЕсли используете Lodash, можно просто вызвать \nimport { omit } from \"lodash\";\n\nconst user = { name: \"Alice\", age: 25, password: \"123456\" };\nconst safeUser = omit(user, [\"password\"]);\n\nconsole.log(safeUser); // { name: \"Alice\", age: 25 }\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-03-09T09:05:38Z","dateModified":"2026-03-09T09:05:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2463},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17}]}}]}

17 418

Бесплатная конференция по PostgreSQL — уже 19 марта! Регистрируйся на бесплатную конференцию по PostgreSQL — 19.03.2026. В фокусе — практический опыт эксплуатации PostgreSQL, ее внутреннее устройство, производительность, взаимодействие с другими системами и реальные кейсы из highload-среды. Мероприятие в формате онлайн+офлайн, 25+ тематических докладов, 3 потока. Вот некоторые темы конференции: ✅ Опыт выноса OLAP-нагрузки на реплику ✅ Временные таблицы в PostgreSQL: почему это критично для платформы 1С и что можно улучшить ✅ Разделение Compute и Storage: архитектурный прорыв для PostgreSQL в облаке ✅ Highload «из ниоткуда»: когда узкое место — не в СУБД, а в клиентской архитектуре ✅ Работа с логами PostgreSQL Регистрируйся, будет интересно! И бесплатно! Зарегистрироваться #реклама 16+ pgbootcamp.ru О рекламодателе

17 418

🤔 Какие способы сортировки массива есть? В JavaScript массивы сортируются с помощью метода sort() Также можно использовать: - Сортировку по строкам (по умолчанию): arr.sort() - Сортировку по свойствам объектов: - users.sort((a, b) => a.age - b.age); - Создание новых отсортированных массивов без мутации: - const sorted = [...arr].sort(); Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 418

🤔 Что такое merge и rebase, в чем отличие друг от друга? Это два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев. 🚩Merge (слияние) Объединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния. Предположим, у вас есть две ветки: main и feature. В ветке feature вы сделали несколько коммитов. Вы хотите объединить изменения из feature в main.

git checkout main
git merge feature

🚩Rebase (перебазирование) Перемещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов. Предположим, у вас есть две ветки: main и feature. В ветке feature вы сделали несколько коммитов. Вы хотите перенести изменения из feature на текущий конец main.

git checkout feature
git rebase main

🚩Основные отличия 🟠История коммитов Merge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток. Rebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений. 🟠Коммиты слияния Merge: Создает новый коммит слияния, который объединяет изменения из двух веток. Rebase: Не создает коммит слияния. Перебазирование "переносит" коммиты одной ветки на другую. 🟠Конфликты Merge: Конфликты решаются один раз при слиянии. Rebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно. 🟠Применение Merge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе. Rebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master. Ставь 👍 и забирай 📚 Базу знаний

17 418

🤔 Как работает поток данных между Redux и компонентом? Компонент получает данные из Redux через функции useSelector или connect(). При изменении состояния Redux происходит перерисовка. Чтобы изменить состояние, компонент диспатчит action через dispatch. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 418

🤔 Почему map используют чаще, чем объект? Хотя объекты {} исторически использовались как ассоциативные массивы (ключ-значение), у Map есть ряд преимуществ, которые делают его более удобным в большинстве случаев. 🟠`Map` может использовать любые типы данных в качестве ключей В объектах {} ключи всегда автоматически приводятся к строке.

const obj = {};
const key1 = {};
const key2 = {};

obj[key1] = "value1";
obj[key2] = "value2";

console.log(obj); // { '[object Object]': 'value2' }
console.log(obj[key1]); // "value2" (ключи перезаписались, потому что оба стали "[object Object]")

Пример с Map:

const map = new Map();
map.set(key1, "value1");
map.set(key2, "value2");

console.log(map.get(key1)); // "value1"
console.log(map.get(key2)); // "value2"

🟠`Map` хранит порядок ключей В объекте {} порядок ключей не гарантируется (особенно для числовых ключей).

const obj = { 2: "two", 1: "one", 3: "three" };
console.log(Object.keys(obj)); // ["1", "2", "3"] (порядок числовых ключей изменился!)

Пример с Map

const map = new Map();
map.set(2, "two");
map.set(1, "one");
map.set(3, "three");

console.log([...map.keys()]); // [2, 1, 3] (порядок сохраняется!)

🟠`Map` быстрее при частых добавлениях/удалениях Объекты {} оптимизированы для хранения структуры данных, но операции delete и Object.keys(obj).length могут быть медленными, потому что движок JavaScript выполняет дополнительные проверки. Разница в скорости В Map операции .set(), .get(), .delete() выполняются быстрее. В объекте {} delete obj[key] может работать медленнее, так как JavaScript оптимизирует объекты для других целей. 🟠У `Map` есть удобные методы Объект {} не имеет встроенных методов для работы с ключами и значениями. Чтобы, например, узнать размер объекта, приходится использовать Object.keys(obj).length.

const map = new Map();
map.set("a", 1);
map.set("b", 2);

console.log(map.size); // 2
console.log(map.has("a")); // true
console.log(map.delete("b")); // true (удалит "b")

В объекте {}

const obj = { a: 1, b: 2 };

console.log(Object.keys(obj).length); // 2 (нужно вызывать Object.keys())
console.log(obj.hasOwnProperty("a")); // true (менее удобный синтаксис)
delete obj.b; // Удаление ключа

🟠`Map` не имеет проблем с прототипами В объекте {} могут быть неожиданные проблемы, если ключ совпадает с именем встроенного метода.

const obj = {};
console.log(obj.toString); // [Function: toString] (унаследованное свойство!)
console.log(obj["toString"]); // [Function: toString] (может вызвать баги)

Чтобы обойти это, приходится делать так

const obj = Object.create(null); // Теперь у объекта нет прототипа
obj.toString = "custom";
console.log(obj.toString); // "custom"

В Map таких проблем нет

const map = new Map();
map.set("toString", "custom");
console.log(map.get("toString")); // "custom" (никаких багов!)

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

17 418

Бесплатный курс: веб-дизайн, графика, интерфейсы Научись создавать дизайн сайтов и приложений, инфографику для карточек на маркетплейсах и работать в Figma! Студенты курса в среднем зарабатывают от 68 000 ₽ уже во время обучения💰 Этот курс для тебя, если ты: ✅ мечтаешь о новой профессии, но не знаешь, с чего начать; ✅ чувствуешь, что хочешь большего — свободы, самореализации, творчества; ✅ полный новичок и хочешь систему, а не хаос; ✅ хочешь начать зарабатывать удалённо. Зарегистрироваться #реклама 16+ ydaev.ru О рекламодателе

17 418

🤔 Как передать данные из родительского компонента в дочерний? Данные передаются с использованием props. 1. Родительский компонент передаёт данные через атрибуты в дочерний компонент. 2. Дочерний компонент принимает их, определяя props в своей конфигурации. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 418

🤔 Как определить что состояние является глобальным? Глобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов: 🚩Используется ли это состояние в нескольких независимых компонентах? Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В 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 Ставь 👍 и забирай 📚 Базу знаний

17 418

🤔 Можем ли мы получить картинку по HTTP? Да, браузер может получить картинку по HTTP, если сервер отдаёт правильный Content-Type (например, image/jpeg). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 418

Бесплатный онлайн-марафон для руководителей Два дня практических онлайн-встреч с топ-экспертами в области управления — на них расскажем, как выстроить слаженную работу сотрудников и забыть о хаосе с помощью автоматизации. Спикеры Битрикс24, SETTERS EDUCATION, «ВкусВилл» и Максим Батырев расскажут: — как обеспечить рост команды без регламентов и ручного управления — как мотивировать сотрудников и давать обратную связь — как управлять большим потоком задач и контролировать их выполнение — как выстраивать эффективную коммуникацию с командой Бонусы для всех участников: — чек-лист: «Как обезопасить команду от кибермошенников?» — бесплатная консультация по автоматизации командной работы Бесплатно. 17–18 марта. Подробная программа мероприятия и регистрация — на сайте. Узнать больше #реклама 16+ marathon.bitrix24.works О рекламодателе

17 418

Найти работу фронтендера трудно? Ты просто не там ищешь! @job_webdev – огромная база вакансий фронтендеров, пополняющаяся ежедневно Не трать время зря! Подписывайся и ищи заказы уже сейчас🧑‍💻

17 418

Яндекс Практикум: 8 суперсил Руководителя - бесплатно Пройдите бесплатный интенсив Руководитель будущего от Яндекс Практикума и соберите 8 ключевых суперсил современного лидера. Каждый день — одно практическое задание в Telegram-боте, всего 20 минут. Вас ждут кейсы и опыт экспертов из Яндекса, Ozon, СберЗдоровья и других компаний. Прокачайте: - ИИ - Антихрупкость - Мышление роста - Навыки саморазвития - Работа с поколениями - Эффективная обратная связь - Кризисное лидерство - Биохакинг Подойдёт специалистам и действующим руководителям, готовым к новому уровню. Узнать больше #реклама 16+ practicum.yandex.ru О рекламодателе

17 418

🤔 Примеры того, что можно использовать в useEffect помимо запросов на сервер: - Слежение за размерами окна (event listener); - Установка таймера или интервала; - Работа с локальным хранилищем (localStorage); - Изменение мета-тегов или заголовков документа; - Анимации, интеграции с библиотеками (например, chart.js). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 418

🤔 Является ли, 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. Ставь 👍 и забирай 📚 Базу знаний

17 418

🤔 Как мониторить ошибки JS? - Через консоль браузера (DevTools); - Используя системы логирования: Sentry, LogRocket, Bugsnag; - Локальный лог с console.error и передачей на сервер; - Performance API, window.onerror, unhandledrejection. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 418

🤔 Расскажи про операторы сравнения Операторы сравнения в JavaScript позволяют сравнивать значения и возвращают true или false. Они часто используются в условиях (if, while) и тернарных операторах. 🚩Разница между `==` и `===` 🟠`==` (нестрогое сравнение) При == JavaScript приводит типы перед сравнением.

console.log(5 == "5");  // true (строка "5" приводится к числу)
console.log(0 == false); // true (false → 0)
console.log(null == undefined); // true (особый случай)

🟠`===` (строгое сравнение) При === сравниваются и значение, и тип.

console.log(5 === "5"); // false (разные типы)
console.log(0 === false); // false (число !== логический тип)
console.log(null === undefined); // false (разные типы)

🚩🔹 Логические значения в сравнении JavaScript приводит значения к true или false

console.log(1 == true);  // true (1 → true)
console.log(0 == false); // true (0 → false)
console.log("" == false); // true ("" → false)
console.log([] == false); // true (пустой массив → false)
console.log(null == false); // false (null не приводится к false)

🚩Особые случаи - null == undefined → true (они считаются "похожими"). - null === undefined → false (разные типы). - null >= 0 → true (null превращается в 0). - null > 0 → false (но null >= 0 – true, странно, да?).

console.log(null == undefined); // true
console.log(null >= 0); // true
console.log(null > 0);  // false (WTF?)

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

17 418

Покупайте Samsung Galaxy A серию на Яндекс Маркете Узнать больше #реклама market.yandex.ru О рекламодателе

17 418

🤔 Для чего необходим атрибут rel тега <link>? Атрибут rel (relationship) указывает тип связи между текущим документом и подключаемым ресурсом. Примеры: - stylesheet — для подключения CSS; - icon — для favicon; - preload, dns-prefetch — для оптимизации загрузки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 418

🤔 Что делает omit? omit – это функция, которая удаляет указанные ключи из объекта и возвращает новый объект без этих ключей. В JavaScript нет встроенного omit, но его можно реализовать с помощью деструктуризации и методов Object.fromEntries() или reduce(). Реализация omit с Object.fromEntries() (современный способ)

function omit(obj, keys) {
    return Object.fromEntries(
        Object.entries(obj).filter(([key]) => !keys.includes(key))
    );
}

const user = { name: "Alice", age: 25, password: "123456" };
const safeUser = omit(user, ["password"]); 

console.log(safeUser); // { name: "Alice", age: 25 }

Реализация omit с reduce() (альтернативный способ)

function omit(obj, keys) {
    return Object.keys(obj).reduce((acc, key) => {
        if (!keys.includes(key)) acc[key] = obj[key];
        return acc;
    }, {});
}

const data = { a: 1, b: 2, c: 3 };
console.log(omit(data, ["b"])); // { a: 1, c: 3 }

Если используете Lodash, можно просто вызвать

import { omit } from "lodash";

const user = { name: "Alice", age: 25, password: "123456" };
const safeUser = omit(user, ["password"]);

console.log(safeUser); // { name: "Alice", age: 25 }

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