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

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

Відкрити в Telegram

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

Показати більше

📈 Аналітичний огляд Telegram-каналу Frontend | Вопросы собесов

Канал Frontend | Вопросы собесов (@easy_javascript_ru) у мовному сегменті Російська є активним учасником. На даний момент спільнота об'єднує 17 882 підписників, посідаючи 7 116 місце в категорії Технології та додатки та 36 769 місце у регіоні Росія.

📊 Показники аудиторії та динаміка

З моменту свого створення невідомо, проект продемонстрував стрімке зростання, зібравши аудиторію у 17 882 підписників.

За останніми даними від 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 882
Підписники
-824 години
-457 днів
-15930 день
Архів дописів
\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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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}]}},{"@type":"ListItem","position":2,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2839","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2839","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2839","headline":"В нашем канале много ценного для разработчиков по подготовке к собесам👇 Уже 2 года мы развиваем комьюнити, гд…","articleBody":"В нашем канале много ценного для разработчиков по подготовке к собесам👇\n\nУже 2 года мы развиваем комьюнити, где 10000+ разработчиков, и вместе мы тренируем собеседования и выжимаем из рынка максимум!\n\nПолные разборы собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ\n\nСтримы с гостями и записями: \nКак проходить собеседование на английском\nКак решать livecoding задачи\nПрокачали более 30 резюме вместе с Юрой\n\nСборники вопросов по темам:\nКибербезопасность на собеседовании\nВсе вопросы по React на собеседовании\nВсе вопросы по TypeScript на собеседовании\nКак решать задачи двумя указателями\nВопросы с Vue собеседований\nВопросы по сетям и методологиям с 200 собесов\nВопросы по JS с 200 собесов\nКакие задачи спрашивают на livecoding чаще\n\nПолезные посты:\nJob-борды для поиска работы\nЗапись нашего самого кринжового собеса\nНовый HTTP метод QUERY\n\nСтатистика по рынку:\nИюль, Июнь, Май, Апрель, Март\n\nТекущие рекорды участников: \nОффер 6800$ net с релокацией на Кипр\nИз Шанхая до 4500$ в американскую компанию\nПолучили 427 000 на руки в Сбер и отказались\nВыбили 380 000 на руки в банк и приняли!\nНаши встречи в Питере, Москве, Шанхае\n\nКак я прохожу собесы на ютубе: \nОффер 260к на Go в Empoycity\nОффер 300к на Go в \"Системная интеграция\"\nОтжал 390 gross + 25% премии в Иннотех\nОффер на лида 415 gross + 20% премии в ПСБ\n\nА еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) \n\nПодписывайся 👇\nhttps://t.me/frontend_punks\n\nРеклама, erid: 2W5zFHWEhaH ИП Галактионов Тихон Витальевич, ИНН 771618975809","datePublished":"2026-08-17T07:00:18Z","dateModified":"2026-08-17T07:00:18Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n3.tlmtr.cc/p/_OHrosQTvU3dAY7dgvv-Pbuc1-gKDot5fwmuN1zpJGXE?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1086},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2838","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2838","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2838","headline":"Основные шаблоны проектирования в системном дизайне Знать CQRS, Event Sourcing и Saga недостаточно, чтобы пра…","articleBody":"Основные шаблоны проектирования в системном дизайне\n\nЗнать CQRS, Event Sourcing и Saga недостаточно, чтобы правильно применять эти шаблоны в реальной системе. Каждый из них решает архитектурную проблему, но одновременно увеличивает сложность разработки, эксплуатации и поддержки. Если выбирать паттерн только потому, что он популярен или используется в высоконагруженных проектах, можно получить архитектуру, сложнее самой задачи.\n\nНа открытом уроке 24 августа в 20:00 в OTUS разберём ключевые шаблоны системного дизайна: CQRS, Event Sourcing и Saga Pattern. Рассмотрим, какие проблемы они решают, в каких системах действительно нужны и какие новые ограничения создают. На практических примерах посмотрим, как эти подходы применяются в высоконагруженных сервисах, событийных системах и процессах с распределёнными транзакциями. \n\nУзнать больше\n\n#реклама 16+\notus.ru\nО рекламодателе","datePublished":"2026-08-17T03:09:21Z","dateModified":"2026-08-19T01:18:23Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n3.tlmtr.cc/p/_VJb-2Siji9Wt700FpgIVHhYeHpZaivgJuJGKvH_9JCM?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":830}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2837","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2837","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2837","headline":"🤔 Где используются Promise? Promise применяется при асинхронных операциях, таких как: - fetch и любые HTTP-за…","articleBody":"🤔 Где используются Promise?\n\nPromise применяется при асинхронных операциях, таких как:\n- fetch и любые HTTP-запросы\n- Асинхронные таймеры (через обёртки)\n- Файловые операции (в Node.js)\n- Интерфейсы IndexedDB\n- Асинхронные анимации, Web APIs\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-08-16T16:10:38Z","dateModified":"2026-08-16T16:10:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1275},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2836","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2836","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2836","headline":"Яндекс Музыка до 360 дней бесплатно Яндекс Музыка для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже…","articleBody":"Яндекс Музыка до 360 дней бесплатно\n\nЯндекс Музыка для вас и 3-х ваших близких.\nКинопоиск и Яндекс Книги тоже в мультиподписке Плюс.\nПопробуйте бесплатно❤️ \n\nСлушать\n\n#реклама 18+\nmusic.yandex.ru\nО рекламодателе","datePublished":"2026-08-16T11:37:37Z","dateModified":"2026-08-18T09:52:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_TPJWoNmdaRc7tbEXzo-m-ep8QjQsb1evGuzFxLxB22g?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":997}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2835","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2835","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2835","headline":"🤔 Что такое семантические коммиты? Семантические коммиты – это соглашение о формате сообщений коммитов в сист…","articleBody":"🤔 Что такое семантические коммиты?\n\nСемантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа. \n\nОбычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов. \n\n🚩Формат семантического коммита \n\nКоммит должен начинаться с типа изменения, а затем кратко описывать суть правки. \n\nОсновной шаблон\n<тип>(<область>): <краткое описание>\n\n🚩Основные типы коммитов\n\n🟠feat \nдобавление новой функциональности \n🟠fix \nисправление ошибки \n🟠docs \nизменение документации \n🟠style \nисправления, не влияющие на логику (например, форматирование) \n🟠refactor \nпереработка кода без изменения функциональности \n🟠test \nдобавление или обновление тестов \n🟠chore\nизменения, не влияющие на код (например, обновление зависимостей) \n\n🚩Примеры \n\n1⃣Добавление новой функции\nfeat(auth): добавлена аутентификация через Google\n\n2⃣Исправление ошибки\nfix(login): исправлен баг с неверным редиректом\n\n3⃣Улучшение кода без изменения \nrefactor(api): оптимизирован алгоритм фильтрации данных\n\n4⃣Обновление документации\ndocs(readme): добавлены инструкции по развертыванию\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-16T09:05:41Z","dateModified":"2026-08-16T09:05:41Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1362},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":20}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2834","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2834","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2834","headline":"Битрикс24 представил Коворк/Код Достаточно простыми словами описать, что нужно сделать, а Коворк/Код сам разб…","articleBody":"Битрикс24 представил Коворк/Код\n\nДостаточно простыми словами описать, что нужно сделать, а Коворк/Код сам разберётся: найдёт информацию, поработает со сделками, чатами и документами, создаст или отредактирует файлы. Не нужно вручную искать информацию по разным разделам — Коворк/Код сделает это за вас. \n\nМожно поручить ему сразу несколько дел и работать с ними параллельно. А в режиме «Код» он ещё и создаёт приложения под конкретные сценарии. \n\nСобрать презентацию — Коворк/Код. Подготовить отчет — Коворк/Код. Получить благодарность от руководителя или клиента — вам. \n\nРанний доступ к Битрикс24 Коворк/Код уже открыт. \n\nУзнать больше\n\n#реклама 16+\ncowork.bitrix24.ru\nО рекламодателе","datePublished":"2026-08-15T21:37:34Z","dateModified":"2026-08-17T20:09:24Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_Bg5SmUPgKEwYzdAu-PBKBliaCCCEl2jGSqwKtQKJQgA?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":931}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2833","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2833","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2833","headline":"🤔 Как считается вес селектора? Вес селектора (специфичность) – это правило, по которому браузер определяет, к…","articleBody":"🤔 Как считается вес селектора?\n\nВес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов. \n( inline, id, class/атрибут/псевдокласс, элемент/псевдоэлемент )\n\nПример\n/* Специфичность: (0, 1, 0, 0) */\n#header { color: red; }\n\n/* Специфичность: (0, 0, 1, 0) */\n.header { color: blue; }\n\n/* Специфичность: (0, 0, 0, 1) */\nh1 { color: green; }\n\n🟠Примеры сравнения специфичности \nПример 1\nh1 { color: red; } /* (0,0,0,1) */\n.title { color: blue; } /* (0,0,1,0) */\n\nПример 2\nh1 { color: red; } /* (0,0,0,1) */\n#main { color: blue; } /* (0,1,0,0) */\n\nПример 3 (комбинированные селекторы)\nh1.title { color: red; } /* (0,0,1,1) */\n#main h1 { color: blue; } /* (0,1,0,1) */\n\nПример 4 (инлайн-стиль всегда сильнее)\n

Заголовок

\nh1 { color: red; } /* (0,0,0,1) */\n.title { color: blue; } /* (0,0,1,0) */\n#main { color: purple; } /* (0,1,0,0) */\n\n🟠Как повысить вес селектора? \nДобавить ID (но не злоупотреблять). Использовать более специфичные селекторы (например, .header h1 вместо h1). Использовать !important (но осторожно!). \nh1 { color: red !important; } /* Всегда будет красным */\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-15T20:20:09Z","dateModified":"2026-08-15T20:20:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1401},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2832","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2832","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2832","headline":"Подключайтесь 24.09 к Yandex Scale 2026 Главная конференция Yandex Cloud. Узнайте о сервисах, которые меняют…","articleBody":"Подключайтесь 24.09 к Yandex Scale 2026\n\nГлавная конференция Yandex Cloud. \n\nУзнайте о сервисах, которые меняют ваш бизнес. \n\n4 офлайн-трека (AI, Infra + DevTools, Data, Security), онлайн-трек Deep Tech, воркшопы по ИИ и интерактивы. \n\nУчастие бесплатное! \n\nЗарегистрироваться\n\n#реклама 16+\nscale.yandex.cloud\nО рекламодателе","datePublished":"2026-08-14T20:00:51Z","dateModified":"2026-08-16T18:05:29Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/_jjbPUdqnZapZab4JnT5KRUPO6Ba6pyd6I5aG6wXu5DA?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":924}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2831","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2831","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2831","headline":"🤔 В каком случае нужно SPA? SPA (Single Page Application) нужен, когда: - требуется динамичный интерфейс без…","articleBody":"🤔 В каком случае нужно SPA?\n\nSPA (Single Page Application) нужен, когда:\n- требуется динамичный интерфейс без перезагрузки страницы;\n- важен быстрый отклик UI;\n- есть много интерактивных действий на клиенте;\n- приложение похоже на десктопное по поведению (например, админки, CRM, почта).\nНе нужен — для SEO-критичных лендингов и новостных сайтов.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-08-14T16:10:16Z","dateModified":"2026-08-14T16:10:16Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1438},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2830","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2830","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2830","headline":"🤔 Как уничтожить объект web worker? В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать…","articleBody":"🤔 Как уничтожить объект web worker?\n\nВ JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован.\n\n🚩Зачем уничтожать Web Worker?\n\nWeb Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется.\n\n🚩Как использовать `terminate()`?\n\nВы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.\n// Создаем worker\nconst myWorker = new Worker('worker.js');\n\n// Выполняем какие-то операции через worker\nmyWorker.postMessage('Hello, worker!');\n\n// Завершаем работу worker, когда он больше не нужен\nmyWorker.terminate();\n\n🚩Важно помнить\n\n1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения.\n2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются.\n3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.\nconst worker = new Worker('worker.js');\n\n// Отправляем сообщение\nworker.postMessage('Start working');\n\n// Завершаем работу worker\nworker.terminate();\n\n// Попытка отправить сообщение после уничтожения worker\nworker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен\n\n🚩 Когда еще уничтожается worker?\n\nЕсли вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-14T09:05:44Z","dateModified":"2026-08-14T09:05:44Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1563},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2829","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2829","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2829","headline":"Работай с топом Т-Банка над стратегическими проектами ⚡В программе «Мини-СЕО» ты получаешь индивидуальный тре…","articleBody":"Работай с топом Т-Банка над стратегическими проектами\n\n⚡В программе «Мини-СЕО» ты получаешь индивидуальный трек, погружаешься в стратегию компании и работаешь над проектами — от анализа данных до создания новых продуктов. \n\nНаставники — топ-менеджеры, которые руководят целыми направлениями. \n\nОни передадут знания, которые сложно найти в интернете, помогут выстроить индивидуальный трек карьеры и защитить собственный проект в финале программы. \n\nЕсли ты студент или выпускник с опытом в ИТ, математике или аналитике, подай заявку и начни разгонять карьеру! \n\nЗарегистрироваться\n\n#реклама 16+\nt-miniceo.ru\nО рекламодателе","datePublished":"2026-08-13T21:40:16Z","dateModified":"2026-08-15T20:10:06Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_gQ9k7Rvd-abESWL8wAYCNrCu4We-w_9_yie86zGEvxY?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":951}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2828","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2828","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2828","headline":"🤔 Как следует оформлять страницу, в которой контент может быть на разных языках? - Указывать атрибут lang в <…","articleBody":"🤔 Как следует оформлять страницу, в которой контент может быть на разных языках?\n\n- Указывать атрибут lang в и в текстовых блоках;\n- Использовать hreflang в и для указания языковых версий;\n- Хранить переводы отдельно и подгружать в зависимости от языка (через i18n).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-08-13T16:10:19Z","dateModified":"2026-08-13T16:10:19Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1415},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2827","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2827","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2827","headline":"🤔 Зачем нужен ref? В React ref (сокращение от reference) используется для доступа к DOM-элементам или компоне…","articleBody":"🤔 Зачем нужен ref? \n\nВ React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.\n\n🚩Основные случаи использования `ref`\n\nДоступ к DOM-элементам:\nИспользование в сторонних библиотеках:\nСохранение состояния вне дерева компонентов:\n\n🚩Примеры использования `ref`\n\nДоступ к DOM-элементам\nУстановка фокуса на элемент\nimport React, { useRef, useEffect } from 'react';\n\nfunction TextInputWithFocusButton() {\n const inputEl = useRef(null);\n\n const onButtonClick = () => {\n // Установить фокус на текстовое поле\n inputEl.current.focus();\n };\n\n return (\n
\n \n \n
\n );\n}\n\nexport default TextInputWithFocusButton;\n\nПолучение размеров элемента\nИзмерение элемента:\nimport React, { useRef, useEffect, useState } from 'react';\n\nfunction MeasureDiv() {\n const divRef = useRef(null);\n const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n\n useEffect(() => {\n if (divRef.current) {\n const { width, height } = divRef.current.getBoundingClientRect();\n setDimensions({ width, height });\n }\n }, []);\n\n return (\n
\n
\n Измеряемый элемент\n
\n

Ширина: {dimensions.width}px, Высота: {dimensions.height}px

\n
\n );\n}\n\nexport default MeasureDiv;\n\nИспользование в классовых компонентах\nДоступ к методам компонента:\nimport React, { Component } from 'react';\n\nclass CustomComponent extends Component {\n customMethod() {\n console.log('Метод компонента вызван');\n }\n\n render() {\n return
Custom Component
;\n }\n}\n\nclass ParentComponent extends Component {\n constructor(props) {\n super(props);\n this.customComponentRef = React.createRef();\n }\n\n handleClick = () => {\n this.customComponentRef.current.customMethod();\n };\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nexport default ParentComponent;\n\n🚩Важно помнить\n\nПрямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо.\nКогда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.\nСостояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-13T09:05:38Z","dateModified":"2026-08-13T09:05:38Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1482},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2826","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2826","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2826","headline":"Метрики Delivery Manager: что измерять, а что — нет Большое количество показателей не делает поставку более у…","articleBody":"Метрики Delivery Manager: что измерять, а что — нет\n\nБольшое количество показателей не делает поставку более управляемой. Команда может регулярно заполнять отчёты, отслеживать скорость и обновлять дашборды, но всё равно с опозданием узнавать о проблемах со сроками, качеством и нагрузкой. Метрика полезна только тогда, когда помогает увидеть риск, принять решение или изменить процесс, а не просто создаёт ощущение контроля.\n\nНа открытом уроке 19 августа в 20:00 в OTUS разберём, какие показатели отражают реальное состояние поставки и помогают Delivery Manager управлять сроками, качеством и предсказуемостью работы. Поговорим о том, как выбирать метрики для команды и проекта, не перегружая процессы лишней отчётностью. \n\nУзнать больше\n\n#реклама 16+\notus.ru\nО рекламодателе","datePublished":"2026-08-13T03:13:36Z","dateModified":"2026-08-15T01:27:58Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_DI9TE0_wwHzvw6GSnbDXlfDSjMo1LwY4tR2uq-vPp_s?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":952},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2825","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2825","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2825","headline":"🤔 Пример архитектурных решений для проектов на Node.js? - Layered architecture — с разделением на controller,…","articleBody":"🤔 Пример архитектурных решений для проектов на Node.js?\n\n- Layered architecture — с разделением на controller, service, repository;\n- Hexagonal architecture — с портами/адаптерами;\n- Microservices с gRPC/REST;\n- GraphQL gateway с Apollo;\n- Event-driven через Kafka/RabbitMQ;\n- Serverless архитектура (AWS Lambda, Firebase Functions).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-08-12T16:10:23Z","dateModified":"2026-08-12T16:10:23Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1427},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2824","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2824","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2824","headline":"Как Фронтенд-разработчику получить оффер в бигтех в 2026 Узнаешь, какие вопросы задают на собеседованиях Пойм…","articleBody":"Как Фронтенд-разработчику получить оффер в бигтех в 2026\n\nУзнаешь, какие вопросы задают на собеседованиях\n\nПоймёшь, какие темы по JavaScript и React нужно знать особенно хорошо\n\nУвидишь, как рассуждают сильные кандидаты при решении задач\n\nПолучишь понимание того, чего ожидают интервьюеры от Middle и Senior специалистов\n\nУчастие — бесплатно. \n\nЗарегистрироваться\n\n#реклама 16+\nweb.shortcut.education\nО рекламодателе","datePublished":"2026-08-12T12:04:36Z","dateModified":"2026-08-14T10:21:17Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/_yk8JhI9ySDJf6oghKoHwD15Zlc-zS17Cl2Tech0D2D8?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1096},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2823","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2823","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2823","headline":"🤔 Какие проблемы решает eventloop? Event Loop (Цикл событий) – это механизм, который позволяет JavaScript раб…","articleBody":"🤔 Какие проблемы решает eventloop?\n\nEvent Loop (Цикл событий) – это механизм, который позволяет JavaScript работать асинхронно, обрабатывать события и не блокировать основной поток выполнения. Он решает несколько важных проблем, которые были бы сложны без него. \n\n🚩JavaScript однопоточный, но нужно выполнять асинхронные задачи \n\nJavaScript работает в одном потоке, то есть выполняет код последовательно. Если одна операция занимает много времени (например, загрузка данных с сервера), выполнение всего кода остановилось бы, пока задача не завершится. Это привело бы к зависанию страницы. \nEvent Loop позволяет выполнять тяжёлые операции (например, запросы на сервер, таймеры) асинхронно, не блокируя основной поток. \nconsole.log(\"1: Перед запросом\");\n\nsetTimeout(() => {\n console.log(\"2: Данные загружены\");\n}, 2000);\n\nconsole.log(\"3: После запроса\");\n\nВывод в консоль \n1: Перед запросом \n3: После запроса \n2: Данные загружены (спустя 2 секунды)\n\n🚩Обработка пользовательских событий без зависаний \n\nЕсли бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция. \nEvent Loop ставит события (например, click, keydown) в очередь и обрабатывает их только когда основной поток свободен. \ndocument.querySelector(\"button\").addEventListener(\"click\", () => {\n console.log(\"Кнопка нажата!\");\n});\n\n🚩Загрузка данных без блокировки страницы \n\nКогда мы загружаем данные с сервера (fetch, setTimeout, setInterval), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа. \nАсинхронные запросы (fetch, XMLHttpRequest) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится. \nconsole.log(\"Запрос данных...\");\n\nfetch(\"https://jsonplaceholder.typicode.com/posts/1\")\n .then(response => response.json())\n .then(data => console.log(\"Данные получены:\", data));\n\nconsole.log(\"Код выполняется дальше!\");\n\nВывод \nЗапрос данных... \nКод выполняется дальше! \n(Спустя время) Данные получены: {id: 1, title: \"...\"}\n\n🚩Обход блокировки в тяжёлых вычислениях \n\nЕсли в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет. \nМожно разбить задачу на части и выполнять её постепенно с помощью setTimeout или requestAnimationFrame. \nlet count = 0;\n\nfunction heavyTask() {\n for (let i = 0; i < 1e6; i++) {\n count++;\n }\n console.log(\"Часть работы выполнена!\");\n\n if (count < 5e6) {\n setTimeout(heavyTask, 0); // Даем Event Loop обработать другие задачи\n }\n}\n\nheavyTask();\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-12T09:05:40Z","dateModified":"2026-08-12T09:05:40Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1477},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2822","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2822","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2822","headline":"Новейшие игровые ноутбуки MSI 2026 Новейшая серия игровых ноутбуков MSI — идеальный баланс невероятной вычисл…","articleBody":"Новейшие игровые ноутбуки MSI 2026\n\nНовейшая серия игровых ноутбуков MSI — идеальный баланс невероятной вычислительной мощи и бескомпромиссной производительности, созданный для самых требовательных задач.\n\nПередовые многоядерные процессоры последнего поколения и высокопроизводительные дискретные видеокарты позволяют с лёгкостью погружаться в работу и игру, наслаждаясь безупречным комфортом.\n\nНоутбуки данной серии подходят геймерам, дизайнерам и профессионалам, которым важны скорость и качество изображения. \n\nУзнать больше\n\n#реклама \nmsi.gm\nО рекламодателе","datePublished":"2026-08-11T21:01:48Z","dateModified":"2026-08-13T19:19:28Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_rvbU-J6QSGrwe1IQNYWaB2ohR1XmTbbCaMzo9R_IEmw?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1034},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2821","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2821","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2821","headline":"🤔 Как задать Flexbox? Нужно установить контейнеру свойство display: flex. Его содержимое становится flex-элем…","articleBody":"🤔 Как задать Flexbox?\n\nНужно установить контейнеру свойство display: flex. Его содержимое становится flex-элементами, которые подчиняются гибкой системе распределения.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-08-11T16:10:25Z","dateModified":"2026-08-11T16:10:25Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1460},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}}]}
🤔 Как добавить слушатель события? Это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке 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) есть свои удобства и особенности, которые помогают решать задачи более эффективно. Ставь
👍 и забирай 📚 Базу знаний

В нашем канале много ценного для разработчиков по подготовке к собесам👇 Уже 2 года мы развиваем комьюнити, где 10000+ разраб
В нашем канале много ценного для разработчиков по подготовке к собесам👇
Уже 2 года мы развиваем комьюнити, где 10000+ разработчиков, и вместе мы тренируем собеседования и выжимаем из рынка максимум!
Полные разборы собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Стримы с гостями и записями: Как проходить собеседование на английском Как решать livecoding задачи Прокачали более 30 резюме вместе с Юрой Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY Статистика по рынку: Июль, Июнь, Май, Апрель, Март Текущие рекорды участников: Оффер 6800$ net с релокацией на Кипр Из Шанхая до 4500$ в американскую компанию Получили 427 000 на руки в Сбер и отказались Выбили 380 000 на руки в банк и приняли! Наши встречи в Питере, Москве, Шанхае Как я прохожу собесы на ютубе: Оффер 260к на Go в Empoycity Оффер 300к на Go в "Системная интеграция" Отжал 390 gross + 25% премии в Иннотех Оффер на лида 415 gross + 20% премии в ПСБ А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Подписывайся 👇 https://t.me/frontend_punks Реклама, erid: 2W5zFHWEhaH ИП Галактионов Тихон Витальевич, ИНН 771618975809

Основные шаблоны проектирования в системном дизайне Знать CQRS, Event Sourcing и Saga недостаточно, чтобы правильно применять
Основные шаблоны проектирования в системном дизайне Знать CQRS, Event Sourcing и Saga недостаточно, чтобы правильно применять эти шаблоны в реальной системе. Каждый из них решает архитектурную проблему, но одновременно увеличивает сложность разработки, эксплуатации и поддержки. Если выбирать паттерн только потому, что он популярен или используется в высоконагруженных проектах, можно получить архитектуру, сложнее самой задачи. На открытом уроке 24 августа в 20:00 в OTUS разберём ключевые шаблоны системного дизайна: CQRS, Event Sourcing и Saga Pattern. Рассмотрим, какие проблемы они решают, в каких системах действительно нужны и какие новые ограничения создают. На практических примерах посмотрим, как эти подходы применяются в высоконагруженных сервисах, событийных системах и процессах с распределёнными транзакциями. Узнать больше #реклама 16+ otus.ru О рекламодателе

🤔 Где используются Promise? Promise применяется при асинхронных операциях, таких как: - fetch и любые HTTP-запросы - Асинхронные таймеры (через обёртки) - Файловые операции (в Node.js) - Интерфейсы IndexedDB - Асинхронные анимации, Web APIs Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Что такое семантические коммиты? Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа. Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов. 🚩Формат семантического коммита Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки. Основной шаблон
<тип>(<область>): <краткое описание>
🚩Основные типы коммитов 🟠feat добавление новой функциональности 🟠fix исправление ошибки 🟠docs изменение документации 🟠style исправления, не влияющие на логику (например, форматирование) 🟠refactor переработка кода без изменения функциональности 🟠test добавление или обновление тестов 🟠chore изменения, не влияющие на код (например, обновление зависимостей) 🚩Примеры 1⃣Добавление новой функции
feat(auth): добавлена аутентификация через Google
2⃣Исправление ошибки
fix(login): исправлен баг с неверным редиректом
3⃣Улучшение кода без изменения
refactor(api): оптимизирован алгоритм фильтрации данных
4⃣Обновление документации
docs(readme): добавлены инструкции по развертыванию
Ставь 👍 и забирай 📚 Базу знаний

Битрикс24 представил Коворк/Код Достаточно простыми словами описать, что нужно сделать, а Коворк/Код сам разберётся: найдёт и
Битрикс24 представил Коворк/Код Достаточно простыми словами описать, что нужно сделать, а Коворк/Код сам разберётся: найдёт информацию, поработает со сделками, чатами и документами, создаст или отредактирует файлы. Не нужно вручную искать информацию по разным разделам — Коворк/Код сделает это за вас. Можно поручить ему сразу несколько дел и работать с ними параллельно. А в режиме «Код» он ещё и создаёт приложения под конкретные сценарии. Собрать презентацию — Коворк/Код. Подготовить отчет — Коворк/Код. Получить благодарность от руководителя или клиента — вам. Ранний доступ к Битрикс24 Коворк/Код уже открыт. Узнать больше #реклама 16+ cowork.bitrix24.ru О рекламодателе

🤔 Как считается вес селектора? Вес селектора (специфичность) – это правило, по которому браузер определяет, какой стиль применить, если есть несколько конфликтующих селекторов.
( inline, id, class/атрибут/псевдокласс, элемент/псевдоэлемент )
Пример
/* Специфичность: (0, 1, 0, 0) */
#header { color: red; }

/* Специфичность: (0, 0, 1, 0) */
.header { color: blue; }

/* Специфичность: (0, 0, 0, 1) */
h1 { color: green; }
🟠Примеры сравнения специфичности Пример 1
h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */
Пример 2
h1 { color: red; } /* (0,0,0,1) */
#main { color: blue; } /* (0,1,0,0) */
Пример 3 (комбинированные селекторы)
h1.title { color: red; } /* (0,0,1,1) */
#main h1 { color: blue; } /* (0,1,0,1) */
Пример 4 (инлайн-стиль всегда сильнее)
<h1 style="color: green;">Заголовок</h1>
h1 { color: red; } /* (0,0,0,1) */
.title { color: blue; } /* (0,0,1,0) */
#main { color: purple; } /* (0,1,0,0) */
🟠Как повысить вес селектора? Добавить ID (но не злоупотреблять). Использовать более специфичные селекторы (например, .header h1 вместо h1). Использовать !important (но осторожно!).
h1 { color: red !important; } /* Всегда будет красным */
Ставь 👍 и забирай 📚 Базу знаний

Подключайтесь 24.09 к Yandex Scale 2026 Главная конференция Yandex Cloud. Узнайте о сервисах, которые меняют ваш бизнес. 4 оф
Подключайтесь 24.09 к Yandex Scale 2026 Главная конференция Yandex Cloud. Узнайте о сервисах, которые меняют ваш бизнес. 4 офлайн-трека (AI, Infra + DevTools, Data, Security), онлайн-трек Deep Tech, воркшопы по ИИ и интерактивы. Участие бесплатное! Зарегистрироваться #реклама 16+ scale.yandex.cloud О рекламодателе

🤔 В каком случае нужно SPA? SPA (Single Page Application) нужен, когда: - требуется динамичный интерфейс без перезагрузки страницы; - важен быстрый отклик UI; - есть много интерактивных действий на клиенте; - приложение похоже на десктопное по поведению (например, админки, CRM, почта). Не нужен — для SEO-критичных лендингов и новостных сайтов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как уничтожить объект web worker? В JavaScript, чтобы уничтожить объект Web Worker, необходимо использовать метод terminate(). Этот метод останавливает выполнение worker'а, освобождает связанные с ним ресурсы и завершает его работу. После вызова terminate() объект worker больше не может быть использован. 🚩Зачем уничтожать Web Worker? Web Worker позволяет выполнять тяжелые операции в фоновом потоке, не блокируя основной поток (UI-поток). Однако, если worker больше не нужен, он продолжает существовать и занимает ресурсы (память, процессорное время). Чтобы избежать утечек памяти и оптимизировать работу приложения, важно уничтожать worker, когда он больше не используется. 🚩Как использовать `terminate()`? Вы вызываете метод terminate() на экземпляре объекта worker. Это мгновенно останавливает выполнение фонового скрипта.
// Создаем worker
const myWorker = new Worker('worker.js');

// Выполняем какие-то операции через worker
myWorker.postMessage('Hello, worker!');

// Завершаем работу worker, когда он больше не нужен
myWorker.terminate();
🚩Важно помнить 1⃣После вызова terminate() worker полностью уничтожается и больше не может отправлять или получать сообщения. 2⃣Если есть обработчики событий, привязанные к worker (например, onmessage), они автоматически удаляются. 3⃣Доступ к worker после вызова terminate() не приведет к ошибке, но никакие операции через него больше работать не будут.
const worker = new Worker('worker.js');

// Отправляем сообщение
worker.postMessage('Start working');

// Завершаем работу worker
worker.terminate();

// Попытка отправить сообщение после уничтожения worker
worker.postMessage('Will this work?'); // Ничего не произойдет, worker уже завершен
🚩 Когда еще уничтожается worker? Если вы перезагружаете страницу или закрываете вкладку, все web worker автоматически уничтожаются браузером. Однако в рамках текущей сессии ответственность за уничтожение лежит на разработчике. Ставь 👍 и забирай 📚 Базу знаний

Работай с топом Т-Банка над стратегическими проектами ⚡В программе «Мини-СЕО» ты получаешь индивидуальный трек, погружаешься
Работай с топом Т-Банка над стратегическими проектами ⚡В программе «Мини-СЕО» ты получаешь индивидуальный трек, погружаешься в стратегию компании и работаешь над проектами — от анализа данных до создания новых продуктов. Наставники — топ-менеджеры, которые руководят целыми направлениями. Они передадут знания, которые сложно найти в интернете, помогут выстроить индивидуальный трек карьеры и защитить собственный проект в финале программы. Если ты студент или выпускник с опытом в ИТ, математике или аналитике, подай заявку и начни разгонять карьеру! Зарегистрироваться #реклама 16+ t-miniceo.ru О рекламодателе

🤔 Как следует оформлять страницу, в которой контент может быть на разных языках? - Указывать атрибут lang в <html> и в текстовых блоках; - Использовать hreflang в <link> и <a> для указания языковых версий; - Хранить переводы отдельно и подгружать в зависимости от языка (через i18n). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Зачем нужен ref? В React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React. 🚩Основные случаи использования `ref` Доступ к DOM-элементам: Использование в сторонних библиотеках: Сохранение состояния вне дерева компонентов: 🚩Примеры использования `ref` Доступ к DOM-элементам Установка фокуса на элемент
import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Установить фокус на текстовое поле
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус</button>
    </div>
  );
}

export default TextInputWithFocusButton;
Получение размеров элемента Измерение элемента:
import React, { useRef, useEffect, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Измеряемый элемент
      </div>
      <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
    </div>
  );
}

export default MeasureDiv;
Использование в классовых компонентах Доступ к методам компонента:
import React, { Component } from 'react';

class CustomComponent extends Component {
  customMethod() {
    console.log('Метод компонента вызван');
  }

  render() {
    return <div>Custom Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.customComponentRef = React.createRef();
  }

  handleClick = () => {
    this.customComponentRef.current.customMethod();
  };

  render() {
    return (
      <div>
        <CustomComponent ref={this.customComponentRef} />
        <button onClick={this.handleClick}>Вызвать метод компонента</button>
      </div>
    );
  }
}

export default ParentComponent;
🚩Важно помнить Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо. Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам. Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом. Ставь 👍 и забирай 📚 Базу знаний

Метрики Delivery Manager: что измерять, а что — нет Большое количество показателей не делает поставку более управляемой. Кома
Метрики Delivery Manager: что измерять, а что — нет Большое количество показателей не делает поставку более управляемой. Команда может регулярно заполнять отчёты, отслеживать скорость и обновлять дашборды, но всё равно с опозданием узнавать о проблемах со сроками, качеством и нагрузкой. Метрика полезна только тогда, когда помогает увидеть риск, принять решение или изменить процесс, а не просто создаёт ощущение контроля. На открытом уроке 19 августа в 20:00 в OTUS разберём, какие показатели отражают реальное состояние поставки и помогают Delivery Manager управлять сроками, качеством и предсказуемостью работы. Поговорим о том, как выбирать метрики для команды и проекта, не перегружая процессы лишней отчётностью. Узнать больше #реклама 16+ otus.ru О рекламодателе

🤔 Пример архитектурных решений для проектов на Node.js? - Layered architecture — с разделением на controller, service, repository; - Hexagonal architecture — с портами/адаптерами; - Microservices с gRPC/REST; - GraphQL gateway с Apollo; - Event-driven через Kafka/RabbitMQ; - Serverless архитектура (AWS Lambda, Firebase Functions). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Как Фронтенд-разработчику получить оффер в бигтех в 2026 Узнаешь, какие вопросы задают на собеседованиях Поймёшь, какие темы
Как Фронтенд-разработчику получить оффер в бигтех в 2026 Узнаешь, какие вопросы задают на собеседованиях Поймёшь, какие темы по JavaScript и React нужно знать особенно хорошо Увидишь, как рассуждают сильные кандидаты при решении задач Получишь понимание того, чего ожидают интервьюеры от Middle и Senior специалистов Участие — бесплатно. Зарегистрироваться #реклама 16+ web.shortcut.education О рекламодателе

🤔 Какие проблемы решает eventloop? Event Loop (Цикл событий) – это механизм, который позволяет JavaScript работать асинхронно, обрабатывать события и не блокировать основной поток выполнения. Он решает несколько важных проблем, которые были бы сложны без него. 🚩JavaScript однопоточный, но нужно выполнять асинхронные задачи JavaScript работает в одном потоке, то есть выполняет код последовательно. Если одна операция занимает много времени (например, загрузка данных с сервера), выполнение всего кода остановилось бы, пока задача не завершится. Это привело бы к зависанию страницы. Event Loop позволяет выполнять тяжёлые операции (например, запросы на сервер, таймеры) асинхронно, не блокируя основной поток.
console.log("1: Перед запросом");

setTimeout(() => {
  console.log("2: Данные загружены");
}, 2000);

console.log("3: После запроса");
Вывод в консоль
1: Перед запросом  
3: После запроса  
2: Данные загружены (спустя 2 секунды)
🚩Обработка пользовательских событий без зависаний Если бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция. Event Loop ставит события (например, click, keydown) в очередь и обрабатывает их только когда основной поток свободен.
document.querySelector("button").addEventListener("click", () => {
  console.log("Кнопка нажата!");
});
🚩Загрузка данных без блокировки страницы Когда мы загружаем данные с сервера (fetch, setTimeout, setInterval), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа. Асинхронные запросы (fetch, XMLHttpRequest) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится.
console.log("Запрос данных...");

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log("Данные получены:", data));

console.log("Код выполняется дальше!");
Вывод
Запрос данных...  
Код выполняется дальше!  
(Спустя время) Данные получены: {id: 1, title: "..."}
🚩Обход блокировки в тяжёлых вычислениях Если в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет. Можно разбить задачу на части и выполнять её постепенно с помощью setTimeout или requestAnimationFrame.
let count = 0;

function heavyTask() {
  for (let i = 0; i < 1e6; i++) {
    count++;
  }
  console.log("Часть работы выполнена!");

  if (count < 5e6) {
    setTimeout(heavyTask, 0); // Даем Event Loop обработать другие задачи
  }
}

heavyTask();
Ставь 👍 и забирай 📚 Базу знаний

Новейшие игровые ноутбуки MSI 2026 Новейшая серия игровых ноутбуков MSI — идеальный баланс невероятной вычислительной мощи и
Новейшие игровые ноутбуки MSI 2026 Новейшая серия игровых ноутбуков MSI — идеальный баланс невероятной вычислительной мощи и бескомпромиссной производительности, созданный для самых требовательных задач. Передовые многоядерные процессоры последнего поколения и высокопроизводительные дискретные видеокарты позволяют с лёгкостью погружаться в работу и игру, наслаждаясь безупречным комфортом. Ноутбуки данной серии подходят геймерам, дизайнерам и профессионалам, которым важны скорость и качество изображения. Узнать больше #реклама msi.gm О рекламодателе

🤔 Как задать Flexbox? Нужно установить контейнеру свойство display: flex. Его содержимое становится flex-элементами, которые подчиняются гибкой системе распределения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний