Don't get caught by a cheater! Telemetrio finds and tags such channels 👉 If you want to see the tag, subscribe

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

Open in Telegram

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

Network:easyoffer Russia37 711 Technologies & Applications7 464...

📈 Analytical overview of Telegram channel Frontend | Вопросы собесов

Channel Frontend | Вопросы собесов (@easy_javascript_ru) in the Russian language segment is an active participant. Currently, the community unites 17 451 subscribers, ranking 7 464 in the Technologies & Applications category and 37 711 in the Russia region.

📊 Audience metrics and dynamics

Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 17 451 subscribers.

According to the latest data from 27 October, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -217 over the last 30 days and by -18 over the last 24 hours, overall reach remains high.

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 6.71%. Within the first 24 hours after publication, content typically collects 4.29% reactions from the total number of subscribers.
Post reach: On average, each post receives 1 171 views. Within the first day, a publication typically gains 748 views.
Reactions and interaction: The audience actively supports content: the average number of reactions per post is 4.
Thematic interests: Content is focused on key topics such as ставь, браузер, html, border, flex.

📝 Description and content policy

The author describes the resource as a platform for expressing subjective opinions:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads”

Thanks to the high frequency of updates (latest data received on 28 October, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.

17 451

Subscribers

-1824 hours

-707 days

-21730 days

1 171

Post views

~ 74824 hours

~ 87348 hours

6.71%

Engagement rate

~ 2

Posts per day

Ads index

beta

Posts Archive

\n\n\n \n\n\n\n🚩Особенности события `blur`\n\n🟠Не всплывает\nСобытие blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.\n \n // Работает только для конкретного элемента\n element.addEventListener(\"blur\", handler);\n\n // Для делегирования используют focusout\n parentElement.addEventListener(\"focusout\", handler);\n \n\n🟠Отличие от `change`\nСобытие change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-06T09:05:51Z","dateModified":"2026-08-06T09:05:51Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":1507},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2802","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2802","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2802","headline":"🤔 Какие ограничения накладываются на поток Web Worker? - Нет доступа к DOM напрямую; - Нет доступа к window,…","articleBody":"🤔 Какие ограничения накладываются на поток Web Worker?\n\n- Нет доступа к DOM напрямую;\n- Нет доступа к window, document, alert;\n- Обмен данными происходит через сообщения (postMessage);\n- Нужно отдельно импортировать зависимости.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-08-05T16:10:29Z","dateModified":"2026-08-05T16:10:29Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":1411},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2801","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2801","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2801","headline":"Вентиляция в доме на основе низкопрофильных воздуховодов Система пластиковых гофрированных двухслойных полуже…","articleBody":"Вентиляция в доме на основе низкопрофильных воздуховодов\n\nСистема пластиковых гофрированных двухслойных полужестких воздуховодов с антимикробным и антистатическим покрытием \"Flexag\" :\n\n👍 Имеют диаметр всего 75мм благодаря чему потолок не придется опускать слишком низко.\n\n👍 Выгодно отличается от металлических и ПВХ каналов так как не подвергнется коррозии и не будет выделять вредные вещества в процессе эксплуатации.\n\n👍 Благодаря тому, что система цельная и не имеет соединений от коллектора до пленума, исключены нежелательные вибрация и шум, а также слышимость из прилегающих помещений.\n\n👍 Закладывать в свой проект Flexag удобно! BIM модели на продукцию.\n\nСделано в России \n\nУзнать больше\n\n#реклама \nflexag.ru\nО рекламодателе","datePublished":"2026-08-05T13:10:44Z","dateModified":"2026-08-07T11:41:57Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":1020},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2800","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2800","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2800","headline":"🤔 Для чего нуден key при работе со списками? В React при рендере списков (например, через .map()) каждому эле…","articleBody":"🤔 Для чего нуден key при работе со списками?\n\nВ React при рендере списков (например, через .map()) каждому элементу необходимо передавать уникальный key. Это помогает React оптимизировать перерисовку и правильно отслеживать изменения в списке. \n\n🚩Почему `key` важен? \n\nReact использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим. \nБез key React не понимает, какие элементы изменились, удалились или добавились. \nЭто может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру. \n\n🚩Как использовать `key` правильно? \n\nconst users = [\"Alice\", \"Bob\", \"Charlie\"];\n\nfunction UserList() {\n return (\n

{user}

\n );\n}\n\n🚩Что будет без `key`? \n\nЕсли не указать key, React выдаст предупреждение: \nWarning: Each child in a list should have a unique \"key\" prop.\n\nКроме того, при изменении списка возможны проблемы с перерисовкой\n{users.map((user, index) => (\n \n))}\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-05T09:05:47Z","dateModified":"2026-08-05T09:05:47Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":1602},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2799","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2799","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2799","headline":"Аренда VPS/VDS-сервера. Виртуальные выделенные серверы в дата-центрах уровня Tier III — 7 готовых конфигураци…","articleBody":"Аренда VPS/VDS-сервера.\n\nВиртуальные выделенные серверы в дата-центрах уровня Tier III — 7 готовых конфигураций от 200 ₽/мес. \n\nПреимущества аренды:\n- Выделенные ресурсы без переплаты;\n- KVM-виртуализация;\n- Быстрые NVMe SSD;\n- Соответствие 152-ФЗ, PCI DSS;\n- Бесплатная защита от DDoS;\n- Управление через панель, API и Terraform;\n- Техподдержка 24/7.\n\nЗапустите сервер за несколько минут! \n\nПопробовать\n\n#реклама 16+\nselectel.ru\nО рекламодателе","datePublished":"2026-08-05T04:10:20Z","dateModified":"2026-08-07T02:20:33Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/_bjeN0mKn6xEffsfb2Q90G-Co-_58fRrnSD3PTRV1lGc?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1018}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2798","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2798","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2798","headline":"🤔 Есть ли в React Shadow DOM или только Virtual DOM? React использует Virtual DOM, а не Shadow DOM. Virtual D…","articleBody":"🤔 Есть ли в React Shadow DOM или только Virtual DOM?\n\nReact использует Virtual DOM, а не Shadow DOM.\nVirtual DOM — это копия DOM в памяти, для вычисления минимальных изменений и повышения производительности.\nShadow DOM — изолированное дерево DOM (используется, например, в Web Components), но не в React.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-08-04T16:10:35Z","dateModified":"2026-08-04T16:10:35Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":1488},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2797","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2797","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2797","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-04T10:07:33Z","dateModified":"2026-08-06T08:13:44Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.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":1086}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2796","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2796","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2796","headline":"🤔 Что такое merge и rebase, в чем отличие друг от друга? Это два способа интеграции изменений из одной ветки…","articleBody":"🤔 Что такое merge и rebase, в чем отличие друг от друга?\n\nЭто два способа интеграции изменений из одной ветки в другую в системе контроля версий Git. Оба метода имеют свои особенности и подходят для разных сценариев.\n\n🚩Merge (слияние)\n\nОбъединяет изменения из одной ветки в другую, создавая новый коммит слияния (merge commit). Этот метод сохраняет историю всех коммитов, включая все ветвления и слияния.\nПредположим, у вас есть две ветки: main и feature.\nВ ветке feature вы сделали несколько коммитов.\nВы хотите объединить изменения из feature в main.\ngit checkout main\ngit merge feature\n\n🚩Rebase (перебазирование) \n\nПеремещает или переписывает базу текущей ветки на указанную базу другой ветки. Это переписывает историю коммитов, создавая новые коммиты для каждого из оригинальных коммитов.\nПредположим, у вас есть две ветки: main и feature.\nВ ветке feature вы сделали несколько коммитов.\nВы хотите перенести изменения из feature на текущий конец main.\ngit checkout feature\ngit rebase main\n\n🚩Основные отличия\n\n🟠История коммитов\nMerge: Сохраняет всю историю, включая коммиты слияния. История показывает, когда и как происходили слияния веток.\nRebase: Переписывает историю, делая её линейной. История показывает, как если бы все изменения были сделаны последовательно, без ветвлений.\n\n🟠Коммиты слияния\nMerge: Создает новый коммит слияния, который объединяет изменения из двух веток.\nRebase: Не создает коммит слияния. Перебазирование \"переносит\" коммиты одной ветки на другую.\n\n🟠Конфликты\nMerge: Конфликты решаются один раз при слиянии.\nRebase: Конфликты могут возникнуть на каждом коммите, и их нужно решать поэтапно.\n\n🟠Применение\nMerge: Хорош для сохранения полного контекста истории разработки, особенно в командной работе.\nRebase: Хорош для поддержания чистой, линейной истории, особенно перед слиянием ветки в основную ветку, например, main или master.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-04T09:05:49Z","dateModified":"2026-08-04T09:05:49Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":1548},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2795","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2795","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2795","headline":"Яндекс Музыка до 360 дней бесплатно Яндекс Музыка для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже…","articleBody":"Яндекс Музыка до 360 дней бесплатно\n\nЯндекс Музыка для вас и 3-х ваших близких.\nКинопоиск и Яндекс Книги тоже в мультиподписке Плюс.\nПопробуйте бесплатно❤️ \n\nСлушать\n\n#реклама 18+\nmusic.yandex.ru\nО рекламодателе","datePublished":"2026-08-03T18:48:38Z","dateModified":"2026-08-05T17:16:17Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_J0ibVtrTyeHbpw_9CCU0Wz2eEx5_SowmhlOOi-Vf6S8?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1009}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2794","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2794","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2794","headline":"🤔 Что использовать для стейт-менеджмента в React? Варианты: - Redux Toolkit — классическое, мощное решение. -…","articleBody":"🤔 Что использовать для стейт-менеджмента в React?\n\nВарианты:\n- Redux Toolkit — классическое, мощное решение.\n- Context + useReducer — для локального или простого глобального состояния.\n- Zustand, Jotai, Recoil — более лёгкие и современные альтернативы.\n- MobX — реактивный и удобный, особенно для сложных моделей данных.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-08-03T16:10:35Z","dateModified":"2026-08-03T16:10:35Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":1426},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2793","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2793","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2793","headline":"Автоматизация бизнеса аренды серверов DCImanager. Скачай и попробуй бесплатно 30 дней. Для хостинга и сервис-…","articleBody":"Автоматизация бизнеса аренды серверов\n\nDCImanager. Скачай и попробуй бесплатно 30 дней. Для хостинга и сервис-провайдеров!\n\n✅ Выдача сервера за 10 мин\nАвтоматическая подготовка серверов к выдаче\n\n✅ Мультифункциональность\nПлатформа имеет встроенные дополнительные инструменты\n\n✅ IPAM\nУправление IPv4/IPv6 и учет адресного пространства\n\n✅ Поддержка 24/7\nТехподдержка - сетевые инженеры, системные администраторы\n\n✅ Получить доступ к демостенду\nТестовый демостенд, на котором установлена платформа \n\nУзнать больше\n\n#реклама 16+\nispsystem.ru\nО рекламодателе","datePublished":"2026-08-03T13:13:36Z","dateModified":"2026-08-05T11:37:15Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_-XB2G0C4XorB7oYIyelReV9Td7rBQERe3lt1WJQvtlE?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1018},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2792","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2792","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2792","headline":"🤔 Как растянуть элемент на 100%? Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям),…","articleBody":"🤔 Как растянуть элемент на 100%?\n\nЧтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего \"100%\" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы.\n\n🟠Растяжение элемента на 100% ширины (`width: 100%;`)\nЭлемент займет всю ширину своего родителя.\n

Я растянут по ширине!

\n\n🟠Растяжение элемента на 100% высоты (`height: 100%;`)\nЭлемент займет всю высоту родительского элемента.\n

Я растянут по высоте!

\n\n🟠Растяжение элемента на 100% ширины и высоты\nДля растяжения элемента как по ширине, так и по высоте относительно родителя используются width: 100%; и height: 100%;.\n

Растянут по ширине и высоте!

\n\n🟠Растяжение относительно окна браузера (`viewport`)\nЕсли элемент нужно растянуть на весь экран, используются единицы 100vw (ширина окна) и 100vh (высота окна).\n

\n Я растянут на весь экран!\n

\n\nДля исключения полосы прокрутки можно использовать\nwidth: calc(100vw - 16px); /* Учитывается ширина скролла */\n\n🟠Использование `position: absolute`\nКогда нужно растянуть элемент независимо от размера его содержимого, можно использовать position: absolute.\n

\n Я растянут абсолютно!\n

\n\n🟠Растяжение внутри Flexbox-контейнера\nFlexbox автоматически растягивает вложенные элементы, если у них указаны свойства flex: 1 или align-items: stretch.\n

Я растянут по Flexbox!

\n\n🟠Растяжение внутри Grid-контейнера\nCSS Grid также позволяет растягивать элементы.\n

Я растянут внутри Grid!

\n\n🟠Растяжение с учетом отступов\nЕсли нужно учесть отступы (padding) или границы (border), используйте свойство box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет \"выходить за пределы\" из-за отступов.\n

\n Я растянут с учетом отступов!\n

\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-03T09:05:49Z","dateModified":"2026-08-03T09:05:49Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":1382},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2788","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2788","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2788","headline":"Международная выставка освещения в Гучжэне, Китай 2026 Дата: 2026. 20-25 октября ⚡Люстры, LED, smart lighting…","articleBody":"Международная выставка освещения в Гучжэне, Китай 2026\n\nДата: 2026. 20-25 октября\n⚡Люстры, LED, smart lighting, интерьерный, коммерческий свет напрямую от фабрик Китая!\n✨Посетите крупнейшую выставку света в Китае. \n\nОфициальный сайт выставки!\nПройти регистрацию и получить бесплатный билет: \n\nЗарегистрироваться\n\n#реклама \nreg.denggle.com\nО рекламодателе","datePublished":"2026-08-02T19:10:19Z","dateModified":"2026-08-04T17:34:22Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_dn-v7x_79HjicmxkVURTE28gCouH6dPW1sDJg_U68No?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":978},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2787","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2787","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2787","headline":"🤔 Что использовать, чтобы всплытие событий не происходило? Метод event.stopPropagation() останавливает всплыт…","articleBody":"🤔 Что использовать, чтобы всплытие событий не происходило?\n\nМетод event.stopPropagation() останавливает всплытие события вверх по DOM. Также можно использовать event.stopImmediatePropagation() для прекращения вызова других обработчиков.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-08-02T16:10:39Z","dateModified":"2026-08-02T16:10:39Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":1342},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2786","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2786","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2786","headline":"Онлайн-магистратура для IT: ИТМО, МИФИ + Яндекс Программы онлайн-магистратуры ИТМО и МИФИ в партнёрстве с Янд…","articleBody":"Онлайн-магистратура для IT: ИТМО, МИФИ + Яндекс\n\nПрограммы онлайн-магистратуры ИТМО и МИФИ в партнёрстве с Яндексом. Актуальные знания, практическое обучение и гибкий график. Учитесь, совмещая с работой. Доступна господдержка оплаты, отсрочка от армии \n\nПерейти на сайт\n\n#реклама 16+\npracticum.yandex.ru\nО рекламодателе","datePublished":"2026-08-02T12:34:42Z","dateModified":"2026-08-04T10:55:06Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":974}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2785","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2785","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2785","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-08-02T09:05:50Z","dateModified":"2026-08-02T09:05:50Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":1389},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2784","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2784","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2784","headline":"Дома так же хорошо, как на природе MirCli создаёт в квартире климат, который не отличить от свежести на приро…","articleBody":"Дома так же хорошо, как на природе\n\nMirCli создаёт в квартире климат, который не отличить от свежести на природе: тихая прохлада и чистый воздух даже в самую жару. Подберём кондиционер, очиститель и увлажнитель под вашу площадь - более 250 000 товаров для климата и официальные поставки от 800 брендов. \n\nУзнать больше\n\n#реклама \nmircli.ru\nО рекламодателе","datePublished":"2026-08-01T21:06:00Z","dateModified":"2026-08-03T19:06:04Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n3.tlmtr.cc/p/_MNNexXnM7wXLXAkcMTOPIJ2hc3Lz346-1pr-_4jjaJ0?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":922},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2783","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2783","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2783","headline":"🤔 Что известно про обобщённые типы? Обобщённые типы (generics) позволяют писать универсальный и типобезопасны…","articleBody":"🤔 Что известно про обобщённые типы?\n\nОбобщённые типы (generics) позволяют писать универсальный и типобезопасный код, не зависящий от конкретных типов данных. Они часто применяются для функций, классов и интерфейсов, которым нужно работать с разными типами, но при этом сохранять строгую типизацию.\nТакой подход помогает избежать дублирования кода и повышает гибкость без потери контроля типов.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-08-01T16:10:47Z","dateModified":"2026-08-01T16:10:47Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":1407},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2782","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2782","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2782","headline":"🤔 Какие есть альтернативы ssr? В современном веб-разработке существует несколько подходов к рендерингу веб-ст…","articleBody":"🤔 Какие есть альтернативы ssr?\n\nВ современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки. \n\n🚩CSR (Client-Side Rendering)\n\nВся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой

с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.\n

\n\n\n🚩Плюсы\n\n➕Быстрая работа после загрузки\nПриложение становится очень интерактивным после инициализации.\n➕Меньшая нагрузка на сервер\nОсновная работа выполняется на клиентской стороне.\n➕Гибкость и модульность\nЛегко добавлять сложные интерактивные компоненты.\n\n🚩Минусы\n\n➖Медленная первая загрузка (Time to First Byte, TTFB)\nПользователь видит пустую страницу, пока загружается JavaScript и данные.\n➕Проблемы с SEO\nПоисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере.\n➖Требования к устройствам\nБольше ресурсов требуется на стороне клиента.\n\n🚩SSG (Static Site Generation)\n\nСайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.\nnpm run build\n\n🚩Плюсы и минусы\n\n➕Молниеносная загрузка\nHTML статичен и отдается сервером без обработки.\n➕SEO-дружелюбность\nПоисковые системы могут легко индексировать готовый HTML.\n➕Уменьшение нагрузки на сервер\nВсе вычисления выполняются заранее (во время сборки).\n➖Ограничения при частых обновлениях контента\nДля обновления нужно заново пересобирать сайт, что может занимать много времени.\n➖Не подходит для динамических данных\nЕсли страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным.\n\n🚩ISR (Incremental Static Regeneration)\n\nЭто гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (revalidate). После этого сервер пересоберет страницу и кэширует ее.\nexport async function getStaticProps() {\n return {\n props: {\n data: fetchData(),\n },\n revalidate: 60, // Обновлять страницу каждые 60 секунд\n };\n}\n\n🚩Плюсы и минусы\n\n➕Лучшая производительность\nСтраницы отдаются как статические, но обновляются при необходимости.\n➕Гибкость\nУдобно для контента, который редко обновляется.\n➕SEO\nПоисковики видят статические страницы.\n➖Сложнее настроить\nНужно управлять кэшированием и интервалами обновления.\n➖Не подходит для полностью динамических страниц\nЕсли обновления контента слишком частые, ISR может не подойти.\n\n🚩DPR (Dynamic Rendering / Hybrid Rendering)\n\nЭто подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков.\n\n🚩Плюсы и минусы\n\n➕Оптимально для SEO\nБоты получают готовый HTML.\n➕Гибкость\nПользователи получают интерактивные страницы через CSR.\n➖Усложнение архитектуры\nНужно отслеживать запросы и разделять их.\n➖Задержки для ботов\nГенерация страницы на сервере может занять время.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-08-01T09:05:46Z","dateModified":"2026-08-01T09:05:46Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/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":1462},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}}]}

17 451

🤔 Какие модификаторы есть у v-model? Для двусторонней привязки данных с помощью v-model есть модификаторы, позволяющие изменить стандартное поведение. Например, можно задать обновление значения только при завершении ввода, автоматически преобразовать значение в число или убрать пробелы с краёв строки. Это помогает упростить валидацию данных и уменьшить количество ошибок при вводе. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 451

🤔 Какое событие сработает при потери фокуса элементом формы? Событие, которое срабатывает при потере фокуса элементом формы, называется blur. 🚩Почему нужно событие `blur`? Событие blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле. Автоматическое сохранение введенных данных при переходе на другой элемент формы. Скрытие вспомогательной информации (например, подсказок) при уходе с элемента. blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы. 🚩Как оно работает? blur срабатывает, когда элемент теряет фокус, то есть пользователь: Кликнул на другой элемент. Нажал клавишу Tab, чтобы перейти на следующий элемент. В отличие от события focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом. 🚩Как использовать `blur`? Событие можно обрабатывать с помощью: 1. HTML-атрибутов (например, onblur). 2. JavaScript через метод addEventListener. Пример на практике

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример blur</title>
  <script>
    function validateInput(event) {
      const input = event.target;
      if (input.value.trim() === "") {
        alert("Поле не должно быть пустым!");
      }
    }

    document.addEventListener("DOMContentLoaded", () => {
      const inputElement = document.getElementById("name");
      inputElement.addEventListener("blur", validateInput);
    });
  </script>
</head>
<body>
  <form>
    <label for="name">Введите имя:</label>
    <input type="text" id="name" name="name" />
    <button type="submit">Отправить</button>
  </form>
</body>
</html>

🚩Особенности события `blur` 🟠Не всплывает Событие blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.

   // Работает только для конкретного элемента
   element.addEventListener("blur", handler);

   // Для делегирования используют focusout
   parentElement.addEventListener("focusout", handler);

🟠Отличие от `change` Событие change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение. Ставь 👍 и забирай 📚 Базу знаний

17 451

🤔 Какие ограничения накладываются на поток Web Worker? - Нет доступа к DOM напрямую; - Нет доступа к window, document, alert; - Обмен данными происходит через сообщения (postMessage); - Нужно отдельно импортировать зависимости. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 451

Вентиляция в доме на основе низкопрофильных воздуховодов Система пластиковых гофрированных двухслойных полужестких воздуховодов с антимикробным и антистатическим покрытием "Flexag" : 👍 Имеют диаметр всего 75мм благодаря чему потолок не придется опускать слишком низко. 👍 Выгодно отличается от металлических и ПВХ каналов так как не подвергнется коррозии и не будет выделять вредные вещества в процессе эксплуатации. 👍 Благодаря тому, что система цельная и не имеет соединений от коллектора до пленума, исключены нежелательные вибрация и шум, а также слышимость из прилегающих помещений. 👍 Закладывать в свой проект Flexag удобно! BIM модели на продукцию. Сделано в России Узнать больше #реклама flexag.ru О рекламодателе

17 451

🤔 Для чего нуден key при работе со списками? В React при рендере списков (например, через .map()) каждому элементу необходимо передавать уникальный key. Это помогает React оптимизировать перерисовку и правильно отслеживать изменения в списке. 🚩Почему `key` важен? React использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим. Без key React не понимает, какие элементы изменились, удалились или добавились. Это может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру. 🚩Как использовать `key` правильно?

const users = ["Alice", "Bob", "Charlie"];

function UserList() {
    return (
        <ul>
            {users.map((user, index) => (
                <li key={user}>{user}</li> // Хорошо, если `user` уникален
            ))}
        </ul>
    );
}

🚩Что будет без `key`? Если не указать key, React выдаст предупреждение:

Warning: Each child in a list should have a unique "key" prop.

Кроме того, при изменении списка возможны проблемы с перерисовкой

{users.map((user, index) => (
    <input key={index} defaultValue={user} />
))}

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

17 451

Аренда VPS/VDS-сервера. Виртуальные выделенные серверы в дата-центрах уровня Tier III — 7 готовых конфигураций от 200 ₽/мес. Преимущества аренды: - Выделенные ресурсы без переплаты; - KVM-виртуализация; - Быстрые NVMe SSD; - Соответствие 152-ФЗ, PCI DSS; - Бесплатная защита от DDoS; - Управление через панель, API и Terraform; - Техподдержка 24/7. Запустите сервер за несколько минут! Попробовать #реклама 16+ selectel.ru О рекламодателе

17 451

🤔 Есть ли в React Shadow DOM или только Virtual DOM? React использует Virtual DOM, а не Shadow DOM. Virtual DOM — это копия DOM в памяти, для вычисления минимальных изменений и повышения производительности. Shadow DOM — изолированное дерево DOM (используется, например, в Web Components), но не в React. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 451

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

17 451

🤔 Что такое 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 451

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

17 451

🤔 Что использовать для стейт-менеджмента в React? Варианты: - Redux Toolkit — классическое, мощное решение. - Context + useReducer — для локального или простого глобального состояния. - Zustand, Jotai, Recoil — более лёгкие и современные альтернативы. - MobX — реактивный и удобный, особенно для сложных моделей данных. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 451

Автоматизация бизнеса аренды серверов DCImanager. Скачай и попробуй бесплатно 30 дней. Для хостинга и сервис-провайдеров! ✅ Выдача сервера за 10 мин Автоматическая подготовка серверов к выдаче ✅ Мультифункциональность Платформа имеет встроенные дополнительные инструменты ✅ IPAM Управление IPv4/IPv6 и учет адресного пространства ✅ Поддержка 24/7 Техподдержка - сетевые инженеры, системные администраторы ✅ Получить доступ к демостенду Тестовый демостенд, на котором установлена платформа Узнать больше #реклама 16+ ispsystem.ru О рекламодателе

17 451

🤔 Как растянуть элемент на 100%? Чтобы растянуть элемент на 100% (по ширине, высоте или обоим направлениям), нужно понимать контекст, от чего "100%" будет вычисляться. Значение 100% в CSS основывается на родительском элементе. Рассмотрим различные случаи и подходы. 🟠Растяжение элемента на 100% ширины (`width: 100%;`) Элемент займет всю ширину своего родителя.

<div style="width: 300px; background: lightblue;">
  <div style="width: 100%; background: coral;">Я растянут по ширине!</div>
</div>

🟠Растяжение элемента на 100% высоты (`height: 100%;`) Элемент займет всю высоту родительского элемента.

<div style="height: 300px; background: lightblue;">
  <div style="height: 100%; background: coral;">Я растянут по высоте!</div>
</div>

🟠Растяжение элемента на 100% ширины и высоты Для растяжения элемента как по ширине, так и по высоте относительно родителя используются width: 100%; и height: 100%;.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Растянут по ширине и высоте!</div>
</div>

🟠Растяжение относительно окна браузера (`viewport`) Если элемент нужно растянуть на весь экран, используются единицы 100vw (ширина окна) и 100vh (высота окна).

<div style="width: 100vw; height: 100vh; background: coral;">
  Я растянут на весь экран!
</div>

Для исключения полосы прокрутки можно использовать

width: calc(100vw - 16px); /* Учитывается ширина скролла */

🟠Использование `position: absolute` Когда нужно растянуть элемент независимо от размера его содержимого, можно использовать position: absolute.

<div style="position: relative; width: 300px; height: 300px; background: lightblue;">
  <div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: coral;">
    Я растянут абсолютно!
  </div>
</div>

🟠Растяжение внутри Flexbox-контейнера Flexbox автоматически растягивает вложенные элементы, если у них указаны свойства flex: 1 или align-items: stretch.

<div style="display: flex; width: 300px; height: 300px; background: lightblue;">
  <div style="flex: 1; background: coral;">Я растянут по Flexbox!</div>
</div>

🟠Растяжение внутри Grid-контейнера CSS Grid также позволяет растягивать элементы.

<div style="display: grid; width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; background: coral;">Я растянут внутри Grid!</div>
</div>

🟠Растяжение с учетом отступов Если нужно учесть отступы (padding) или границы (border), используйте свойство box-sizing: border-box. Это гарантирует, что элемент с width: 100% и height: 100% не будет "выходить за пределы" из-за отступов.

<div style="width: 300px; height: 300px; background: lightblue;">
  <div style="width: 100%; height: 100%; padding: 20px; box-sizing: border-box; background: coral;">
    Я растянут с учетом отступов!
  </div>
</div>

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

17 451

Международная выставка освещения в Гучжэне, Китай 2026 Дата: 2026. 20-25 октября ⚡Люстры, LED, smart lighting, интерьерный, коммерческий свет напрямую от фабрик Китая! ✨Посетите крупнейшую выставку света в Китае. Официальный сайт выставки! Пройти регистрацию и получить бесплатный билет: Зарегистрироваться #реклама reg.denggle.com О рекламодателе

17 451

🤔 Что использовать, чтобы всплытие событий не происходило? Метод event.stopPropagation() останавливает всплытие события вверх по DOM. Также можно использовать event.stopImmediatePropagation() для прекращения вызова других обработчиков. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 451

Онлайн-магистратура для IT: ИТМО, МИФИ + Яндекс Программы онлайн-магистратуры ИТМО и МИФИ в партнёрстве с Яндексом. Актуальные знания, практическое обучение и гибкий график. Учитесь, совмещая с работой. Доступна господдержка оплаты, отсрочка от армии Перейти на сайт #реклама 16+ practicum.yandex.ru О рекламодателе

17 451

🤔 Расскажи про операторы сравнения Операторы сравнения в 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 451

Дома так же хорошо, как на природе MirCli создаёт в квартире климат, который не отличить от свежести на природе: тихая прохлада и чистый воздух даже в самую жару. Подберём кондиционер, очиститель и увлажнитель под вашу площадь - более 250 000 товаров для климата и официальные поставки от 800 брендов. Узнать больше #реклама mircli.ru О рекламодателе

17 451

🤔 Что известно про обобщённые типы? Обобщённые типы (generics) позволяют писать универсальный и типобезопасный код, не зависящий от конкретных типов данных. Они часто применяются для функций, классов и интерфейсов, которым нужно работать с разными типами, но при этом сохранять строгую типизацию. Такой подход помогает избежать дублирования кода и повышает гибкость без потери контроля типов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 451

🤔 Какие есть альтернативы ssr? В современном веб-разработке существует несколько подходов к рендерингу веб-страниц, и помимо SSR (Server-Side Rendering), есть альтернативы, каждая из которых имеет свои особенности, преимущества и недостатки. 🚩CSR (Client-Side Rendering) Вся логика рендеринга страницы осуществляется на стороне клиента (браузера) с помощью JavaScript. Сервер отправляет минимальный HTML (обычно пустой <div> с ID), а приложение загружается, рендерится и управляется на стороне клиента. Сервер отправляет статический HTML (например, через index.html), а JavaScript (чаще всего — библиотека/фреймворк, например React, Vue или Angular) загружает необходимые данные и динамически создает интерфейс.

<div id="app"></div>
<script src="bundle.js"></script>

🚩Плюсы ➕Быстрая работа после загрузки Приложение становится очень интерактивным после инициализации. ➕Меньшая нагрузка на сервер Основная работа выполняется на клиентской стороне. ➕Гибкость и модульность Легко добавлять сложные интерактивные компоненты. 🚩Минусы ➖Медленная первая загрузка (Time to First Byte, TTFB) Пользователь видит пустую страницу, пока загружается JavaScript и данные. ➕Проблемы с SEO Поисковым системам сложнее индексировать страницы, так как контент рендерится только в браузере. ➖Требования к устройствам Больше ресурсов требуется на стороне клиента. 🚩SSG (Static Site Generation) Сайт полностью генерируется на этапе сборки (build time) и сервер отдает готовые HTML-страницы. Это популярный подход в JAMstack-приложениях (JavaScript, APIs, Markup). HTML генерируется один раз (обычно через фреймворк вроде Next.js, Gatsby, Nuxt.js) во время сборки. Сайт раздается пользователям как готовый статический контент.

npm run build

🚩Плюсы и минусы ➕Молниеносная загрузка HTML статичен и отдается сервером без обработки. ➕SEO-дружелюбность Поисковые системы могут легко индексировать готовый HTML. ➕Уменьшение нагрузки на сервер Все вычисления выполняются заранее (во время сборки). ➖Ограничения при частых обновлениях контента Для обновления нужно заново пересобирать сайт, что может занимать много времени. ➖Не подходит для динамических данных Если страница сильно зависит от данных пользователя или часто меняется, SSG становится менее удобным. 🚩ISR (Incremental Static Regeneration) Это гибрид между SSG и SSR. Вы создаете статический контент во время сборки, но некоторые страницы могут обновляться динамически при запросе, а сервер сохраняет их для следующих пользователей. Фреймворк (например, Next.js) генерирует страницы на этапе сборки, но для определенных страниц вы можете указать интервал обновления (revalidate). После этого сервер пересоберет страницу и кэширует ее.

export async function getStaticProps() {
  return {
    props: {
      data: fetchData(),
    },
    revalidate: 60, // Обновлять страницу каждые 60 секунд
  };
}

🚩Плюсы и минусы ➕Лучшая производительность Страницы отдаются как статические, но обновляются при необходимости. ➕Гибкость Удобно для контента, который редко обновляется. ➕SEO Поисковики видят статические страницы. ➖Сложнее настроить Нужно управлять кэшированием и интервалами обновления. ➖Не подходит для полностью динамических страниц Если обновления контента слишком частые, ISR может не подойти. 🚩DPR (Dynamic Rendering / Hybrid Rendering) Это подход, при котором разные версии страницы рендерятся для разных пользователей. Например, для пользователей с обычными браузерами вы используете CSR, а для поисковых ботов — SSR. Запросы от поисковых ботов обрабатываются сервером, который генерирует готовый HTML. Запросы от обычных пользователей обрабатываются через CSR. Этот подход используется с инструментами, такими как Prerender.io или встроенными решениями фреймворков. 🚩Плюсы и минусы ➕Оптимально для SEO Боты получают готовый HTML. ➕Гибкость Пользователи получают интерактивные страницы через CSR. ➖Усложнение архитектуры Нужно отслеживать запросы и разделять их. ➖Задержки для ботов Генерация страницы на сервере может занять время. Ставь 👍 и забирай 📚 Базу знаний