Не попадись на ботовода! Telemetrio знаходить і позначає такі канали мітками 👉 Хочеш бачити мітку, оформляй підписку

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

Відкрити в Telegram

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

Сітка:easyoffer Росія37 711 Технології та додатки7 464...

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

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

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

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

За останніми даними від 27 жовтня, 2026, канал демонструє стабільну активність. Хоча за останні 30 днів спостерігається зміна кількості учасників на -217, а за останні 24 години на -18, загальне охоплення залишається високим.

Статус верифікації: Не верифікований
Рівень залученості (ER): Середній показник залученості аудиторії становить 6.71%. Протягом перших 24 годин після публікації контент зазвичай збирає 4.29% реакцій від загальної кількості підписників.
Охоплення публікацій: В середньому кожен допис отримує 1 171 переглядів. Протягом першої доби публікація в середньому набирає 748 переглядів.
Реакції та взаємодія: Аудиторія активно підтримує контент: середня кількість реакцій на один пост – 4.
Тематичні інтереси: Контент зосереджений навколо ключових тем, таких як ставь, браузер, html, border, flex.

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

Автор описує ресурс як майданчик для висловлення суб'єктивної думки:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads”

Завдяки високій частоті оновлень (останні дані отримано 28 жовтня, 2026), канал підтримує актуальність та високий рівень охоплення публікацій. Аналітика показує, що аудиторія активно взаємодіє з контентом, що робить його важливою точкою впливу в категорії Технології та додатки.

17 451

Підписники

-1824 години

-707 днів

-21730 днів

1 171

Перегляди допису

~ 74824 години

~ 87348 годин

6.71%

Коефіцієнт залучення

~ 2

Дописів на день

Ads index

beta

Архів дописів

\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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2802","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2802","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2801","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2801","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2800","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2800","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2799","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2799","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2798","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2798","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2797","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2797","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2796","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2796","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2795","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2795","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2794","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2794","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2793","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2793","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2792","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2792","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2788","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2788","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2787","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2787","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2786","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2786","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2785","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2785","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2784","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2784","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2783","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2783","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru/posts/2782","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2782","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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. ➖Усложнение архитектуры Нужно отслеживать запросы и разделять их. ➖Задержки для ботов Генерация страницы на сервере может занять время. Ставь 👍 и забирай 📚 Базу знаний