Не попадитесь на канал ботавода! Telemetrio находит и помечает такие каналы 👉 Хотите видеть метку — оформите подписку

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

Открыть в Telegram

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

Больше

Сеть:easyoffer Россия37 672 Технологии и приложения7 451...

📈 Аналитический обзор Telegram-канала Frontend | Вопросы собесов

Канал Frontend | Вопросы собесов (@easy_javascript_ru) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 17 460 подписчиков, занимая 7 451 место в категории Технологии и приложения и 37 672 место в регионе Россия.

📊 Показатели аудитории и динамика

С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 17 460 подписчиков.

Согласно последним данным от 26 октября, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -202, а за последние 24 часа — -11, при этом общий охват остаётся высоким.

Статус верификации: Не верифицирован
Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 6.62%. В первые 24 часа после публикации контент обычно набирает 4.38% реакций от общего числа подписчиков.
Охват публикаций: В среднем каждый пост получает 1 156 просмотров. В течение первых суток публикация набирает 765 просмотров.
Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 4.
Тематические интересы: Контент сосредоточен на ключевых темах, таких как ставь, браузер, html, border, flex.

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

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

Благодаря высокой частоте обновлений (последние данные получены 27 октября, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.

17 460

Подписчики

-1124 часа

-607 дней

-20230 дней

1 156

Просмотры поста

~ 76524 часа

~ 87248 часов

6.62%

Коэффициент вовлеченности

~ 2

Постов в день

Ads index

beta

Архив постов

\n\n\n\n🟠React\nОбработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.\nimport React from 'react';\n\nfunction App() {\n const handleClick = () => {\n alert('Button was clicked!');\n };\n\n return (\n

\n \n

\n );\n}\n\nexport default App;\n\n🟠jQuery\nЕсли вы используете его, добавление слушателей событий также очень просто и удобно.\n\n\n\n \n Event Listener Example\n \n\n\n \n\n \n\n\n\n🚩Почему это удобно и важно\n\n🟠Интерактивность\nПозволяет создавать динамичные и отзывчивые интерфейсы.\n🟠Гибкость\nВозможность реагировать на различные действия пользователей.\n🟠Удобство\nВ каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-10-01T09:05:44Z","dateModified":"2026-10-01T09:05:44Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/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":1162},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":3,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/3001","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/3001","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/3001","headline":"REKONFA: что интересного вас ждёт 15 октября 15 октября встречаемся на REKONFA — большой конференции Яндекс Р…","articleBody":"REKONFA: что интересного вас ждёт 15 октября\n\n15 октября встречаемся на REKONFA — большой конференции Яндекс Рекламы.\n\nНа сцене:\n— Глеб Доброрадных — о рекламном рынке и эффективности в сложных условиях\n— Алексей Штоколов — о новых продуктах и технологиях\n— Лиза Смирнова — о 360°-форматах и новых точках контакта\n— Александр Пушной — о человеке и ИИ\n— Александр Умаров — о персональном подходе, который помогает влюблять клиентов в бренд\n— Яна Чурикова — об актуальных задачах предпринимателей\n— Татьяна Мужицкая — о целях и энергии\n— Антон Беляев — об индивидуальности и проектах, которые любят зрители\nВне сцены — зона продуктов Яндекс Рекламы, три игры, викторина, зоны Яндекс Ярда и eLama и нетворкинг.\n\n15 октября, Москва, ВТБ Арена и онлайн. Участие бесплатное. \n\nЗарегистрироваться\n\n#реклама 16+\nya.rekonfa.ru\nО рекламодателе","datePublished":"2026-09-30T18:38:29Z","dateModified":"2026-10-02T16:55:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/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":858}]}},{"@type":"ListItem","position":4,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/3000","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/3000","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/3000","headline":"🤔 Что такое макро и микро задачи? Макро- и микро-задачи являются частью механизма асинхронного программирован…","articleBody":"🤔 Что такое макро и микро задачи? \n\nМакро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Давайте разберемся, что они собой представляют и как работают.\n\n🚩Микро-задачи (Microtasks)\n\nЭто задачи, которые запланированы для выполнения сразу после текущего выполненного скрипта, но до того, как event loop продолжит обрабатывать следующую макро-задачу. \nthen, catch, finally\nqueueMicrotask()\n\n🚩Макро-задачи (Macrotasks)\n\nЭто задачи, которые обрабатываются event loop, каждая макро-задача извлекается из очереди и выполняется до конца, прежде чем event loop перейдет к следующей макро-задаче. \nsetTimeout\nsetInterval\nsetImmediate (Node.js)\nI/O операции\nИнтерактивные действия, такие как клики мыши и нажатия клавиш\n\n🚩Различия и порядок выполнения\n\nОсновное различие между макро- и микро-задачами заключается в их приоритете выполнения:\nПосле каждой макро-задачи, перед тем как переходить к следующей макро-задаче, event loop обрабатывает все микро-задачи в очереди микро-задач. Это означает, что микро-задачи выполняются чаще и имеют более высокий приоритет по сравнению с макро-задачами. Если во время выполнения микро-задач добавляются новые микро-задачи, они также будут выполнены в текущем цикле, перед переходом к следующей макро-задаче. Это может привести к \"голоданию\" макро-задач, если микро-задачи постоянно добавляются.\nsetTimeout(() => console.log('Макро-задача 1'), 0);\nPromise.resolve().then(() => console.log('Микро-задача 1'));\n\nsetTimeout(() => console.log('Макро-задача 2'), 0);\nPromise.resolve().then(() => console.log('Микро-задача 2'));\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-09-30T09:05:40Z","dateModified":"2026-09-30T09:05:40Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/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":1285},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2999","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2999","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2999","headline":"Аренда и размещение серверов в дата-центрах Москвы ITSOFT оказывает услуги коммерческого дата-центра в Москве…","articleBody":"Аренда и размещение серверов в дата-центрах Москвы\n\nITSOFT оказывает услуги коммерческого дата-центра в Москве.\n👌Аренда физических выделенных серверов (Dedicated Servers) в готовых конфигурациях и в рамках индивидуальных сборок.\n👌Colocation и аренда серверных стоек.\n👌Предоставление инфраструктурных ИТ-решений для физических лиц и корпоративных клиентов.\n👌Предоставление высокоскоростных каналов передачи данных. \n\nУзнать цену\n\n#реклама 16+\nitsoft.ru\nО рекламодателе","datePublished":"2026-09-29T18:48:57Z","dateModified":"2026-10-01T17:01:04Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n3.tlmtr.cc/p/_a4LFhAMULjhkLa9oFbC84KOh3dOtVqJkgrW45FNHzzk?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":902},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2998","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2998","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2998","headline":"🤔 Зачем создавать самовызывающуюся функцию, если есть создание контекста через фигурные скобки? Фигурные скоб…","articleBody":"🤔 Зачем создавать самовызывающуюся функцию, если есть создание контекста через фигурные скобки?\n\nФигурные скобки не создают scope в JS (если нет let/const). Самовызывающаяся функция (IIFE) используется для изоляции переменных, особенно в старом JS (var), где блочного scope нет.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-09-29T16:11:42Z","dateModified":"2026-09-29T16:11:42Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/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":1359},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2997","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2997","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2997","headline":"Встречай смартфон Honor — с выгодой для себя! ✅ Стильный дизайн ✅ Заряд надолго ✅ Качественные фото ✅ Быстрая…","articleBody":"Встречай смартфон Honor — с выгодой для себя!\n\n✅ Стильный дизайн\n✅ Заряд надолго\n✅ Качественные фото\n✅ Быстрая и плавная работа\n\nВыбирай свой Honor по привлекательной цене! \n\nКупить\n\n#реклама \nmarket.yandex.ru\nО рекламодателе","datePublished":"2026-09-29T13:18:13Z","dateModified":"2026-10-01T11:14:04Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/_oxrU7Oed_U8C14J2HCmn1E2go6nmb5D9pCijohFRFCE?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":919}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2996","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2996","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2996","headline":"🤔 Расскажи про mobx MobX — это библиотека для управления состоянием в JavaScript-приложениях, особенно в Reac…","articleBody":"🤔 Расскажи про mobx\n \nMobX — это библиотека для управления состоянием в JavaScript-приложениях, особенно в React. Она основана на реактивности и позволяет автоматически отслеживать изменения данных, обновляя интерфейс только там, где это необходимо. \n\n🚩Основные принципы MobX \n\n🟠Модели данных – `observable` (наблюдаемые)\nMobX делает объекты реактивными, автоматически отслеживая их изменения. \nimport { makeAutoObservable } from \"mobx\";\n\nclass Store {\n count = 0;\n\n constructor() {\n makeAutoObservable(this); // Автоматически делает свойства \"наблюдаемыми\"\n }\n\n increment() {\n this.count++;\n }\n}\n\nconst store = new Store();\n\n🟠Экшены (`actions`)\nЭто методы, которые изменяют состояние. \nstore.increment(); // Увеличит count и автоматически обновит UI\n\n🟠Компоненты подписываются на изменения – `observer`\nЧтобы React-компонент обновлялся при изменении данных, его нужно обернуть в observer (из mobx-react-lite). \nimport React from \"react\";\nimport { observer } from \"mobx-react-lite\";\n\nconst Counter = observer(({ store }) => (\n

Счетчик: {store.count}

\n \n

\n));\n\nexport default Counter;\n\n🟠Компьютед-свойства (`computed`)\nЭто вычисляемые значения, которые пересчитываются только при изменении зависимостей. \nclass Store {\n count = 2;\n\n constructor() {\n makeAutoObservable(this);\n }\n\n get double() {\n return this.count * 2;\n }\n}\n\nconst store = new Store();\nconsole.log(store.double); // 4\nstore.count = 5;\nconsole.log(store.double); // 10 (пересчиталось автоматически)\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-09-29T09:05:56Z","dateModified":"2026-09-29T09:05:56Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/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":1431},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2995","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2995","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2995","headline":"Открытый урок: бизнес-логика в микросервисах Разработка в микросервисах — это не только разбиение на сервисы,…","articleBody":"Открытый урок: бизнес-логика в микросервисах\n\nРазработка в микросервисах — это не только разбиение на сервисы, но и грамотное распределение логики. \n22 октября в 19:00 мск — открытый урок для разработчиков и архитекторов. Узнаете, где должна жить бизнес-логика. Запишитесь! \n\nЗарегистрироваться","datePublished":"2026-09-29T00:04:22Z","dateModified":"2026-09-30T22:08:04Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_FkgMWMQQgzSkSn2k3bKGiOeABBtg4KeeM2pfhq_3g-w?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":916}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2994","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2994","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2994","headline":"🤔 Для чего необходим viewport? Viewport – это область видимой части веб-страницы в браузере пользователя. 🟠`m…","articleBody":"🤔 Для чего необходим viewport?\n\nViewport – это область видимой части веб-страницы в браузере пользователя. \n\n🟠`meta viewport` – ключ для адаптивного дизайна \nЧтобы страница корректно отображалась на мобильных устройствах, используется мета-тег viewport: \n\n\n🟠Проблема без `meta viewport` (почему он нужен?) \nБез viewport (по умолчанию)\nНа мобильных браузерах страницы загружаются как на ПК, но уменьшаются. Пользователям приходится зумить и скроллить. \n\n🟠Дополнительные параметры `meta viewport` \nУправление масштабом\n\n\nОтключение адаптации iOS Safari\n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-09-28T09:05:55Z","dateModified":"2026-09-28T09:05:55Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/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":1439},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2993","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2993","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2993","headline":"Бесплатный курс по дизайну в FIGMA от Yudaev School Онлайн-программа с наставником и чатом. Внимание! 80% пра…","articleBody":"Бесплатный курс по дизайну в FIGMA от Yudaev School\n\nОнлайн-программа с наставником и чатом. \n\nВнимание! 80% практики.\n\n✅По результату обучения у вас будет портфолио из нескольких работ.\n✅Сертификат о прохождении курса.\n✅Возможность пройти полное обучение и получить карьерное сопровождение!\n\nУчитесь дизайну у профессионалов в Yudaev Shool. \n\nПереходи по кнопки: \"Подробнее\" и начинай свое обучение.\nДоступ 0 руб. \n\nУзнать больше\n\n#реклама 16+\nyudaevschool24.online\nО рекламодателе","datePublished":"2026-09-28T03:45:26Z","dateModified":"2026-09-30T01:35:30Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/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":927}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2992","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2992","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2992","headline":"🤔 Какие есть значения у box-sizing? Свойство box-sizing в CSS управляет тем, как рассчитываются размеры элеме…","articleBody":"🤔 Какие есть значения у box-sizing?\n\nСвойство box-sizing в CSS управляет тем, как рассчитываются размеры элемента, включая ширину и высоту. Оно определяет, включаются ли в эти размеры внутренние отступы (padding) и границы (border), или же они добавляются отдельно. \n\n🚩Возможные значения `box-sizing`\n\n🟠`content-box`\nРазмеры элемента считаются только по `width` и `height`, без учета padding и border. Если добавить padding или border, фактические размеры элемента увеличатся. \n .box {\n width: 200px;\n height: 100px;\n padding: 20px;\n border: 10px solid black;\n box-sizing: content-box;\n }\n \n🟠`border-box` \nwidth и height включают padding и border. Внутреннее содержимое (content) будет автоматически уменьшаться, чтобы уложиться в заданные размеры. \n .box {\n width: 200px;\n height: 100px;\n padding: 20px;\n border: 10px solid black;\n box-sizing: border-box;\n }\n \n🟠`inherit` \nНаследует значение box-sizing от родительского элемента. \n .parent {\n box-sizing: border-box;\n }\n .child {\n box-sizing: inherit; /* Унаследует border-box */\n }\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-09-27T09:05:53Z","dateModified":"2026-09-27T09:05:53Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/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":1377},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2991","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2991","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2991","headline":"Что будет работать в рекламе завтра? Ответ ищем вместе на REKONFA 2026. 15 октября соберёмся в Москве и онлай…","articleBody":"Что будет работать в рекламе завтра?\n\nОтвет ищем вместе на REKONFA 2026. 15 октября соберёмся в Москве и онлайн, чтобы обсудить новые технологии Яндекс Рекламы, продуктовые запуски, тренды рынка, исследования и реальные кейсы.\n\nВ программе — выступления экспертов и возможность поговорить с продуктовыми командами Яндекс Рекламы о своих задачах. А вне сцены вас ждут коворкинг, фотозоны и форматы для новых знакомств.\n\nУчаствовать можно в Москве на ВТБ Арене или онлайн. Регистрация бесплатная. \n\nЗарегистрироваться\n\n#реклама 18+\nya.rekonfa.ru\nО рекламодателе","datePublished":"2026-09-26T18:45:43Z","dateModified":"2026-09-28T16:42:47Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/_ioF8G6ZoHc0As4E4X-BjrE_LOCN5ZiPJQl5yRoA34fM?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":781},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2990","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2990","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2990","headline":"🤔 Что такое SPA? SPA (Single Page Application) — это приложение, в котором вся логика и интерфейс загружаются…","articleBody":"🤔 Что такое SPA?\n\nSPA (Single Page Application) — это приложение, в котором вся логика и интерфейс загружаются на одной странице, а переходы и обновления происходят без перезагрузки. Данные подгружаются через API-запросы.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2026-09-26T16:11:31Z","dateModified":"2026-09-26T16:11:31Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/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":1337},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2989","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2989","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2989","headline":"Ищете облачную платформу? Есть Beget ✅ Аптайм 99,98% в дата-центрах Tier III ✅ Техподдержка 24/7 — живые люди…","articleBody":"Ищете облачную платформу? Есть Beget\n\n✅ Аптайм 99,98% в дата-центрах Tier III\n✅ Техподдержка 24/7 — живые люди, без ботов\n✅ Прозрачная оплата без скрытых платежей\n✅ Более 200 000 клиентов доверяют Beget \n\nУзнать больше","datePublished":"2026-09-26T10:45:31Z","dateModified":"2026-09-28T09:05:21Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_K2eb7G7moHuu-1X06FPlm_mKpyB7jWPL-F9ZCo6kq1U?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":835}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2988","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2988","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2988","headline":"🤔 Как работает settimeout? Функция setTimeout используется для выполнения кода или функции спустя заданный ин…","articleBody":"🤔 Как работает settimeout?\n\nФункция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта global в Node.js, что делает её доступной для использования в любом окружении.\nlet timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);\nlet timeoutID = setTimeout(functionCode[, delay]);\n\n\nfunction: Будет вызвана после задержки.\nfunctionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности).\ndelay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0.\narg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.\nfunction sayHello() {\n console.log('Привет!');\n}\n\n// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)\nsetTimeout(sayHello, 2000);\n\n🚩Отмена выполнения setTimeout\n\nВызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции clearTimeout.\nlet timerId = setTimeout(sayHello, 2000);\n\n// Отменяет выполнение\nclearTimeout(timerId);\n\n🚩Особенности поведения\n\n🟠Минимальная задержка\nВ HTML5 спецификация предусматривает минимальную задержку в 4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения.\n🟠Задержка в неактивных вкладках\nБраузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано.\n🟠Асинхронность\nsetTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-09-26T09:05:54Z","dateModified":"2026-09-26T09:05:54Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/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":1432},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2987","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2987","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2987","headline":"Тест цифрового двойника — done А еще разработка системы для пиковых нагрузок, продуктов для ритейла, общения…","articleBody":"Тест цифрового двойника — done\n\nА еще разработка системы для пиковых нагрузок, продуктов для ритейла, общения и обучения — вот чем уже занимаются молодые специалисты Т1. Потому что понять, в чем твоя суперспособность в ИТ, можно только в деле.\n\nТ1 — это бигтех для бизнеса, который реализует масштабные проекты для ключевых игроков рынка, и одна из крупнейших аккредитованных ИТ-компаний России.\n\n💻 Здесь ты можешь пройти стажировку онлайн из любой точки страны, погрузиться в работу вместе с опытным наставником и решать реальные задачи.\n\nБолее 4 000 студентов из 300+ вузов уже выбрали Т1 для старта карьеры.\n\n⚡ Присоединяйся и открывай свои суперспособности в ИТ! \n\nПерейти на сайт\n\n#реклама 16+\ncareer.t1.ru\nО рекламодателе","datePublished":"2026-09-25T19:40:53Z","dateModified":"2026-09-27T17:52:05Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_eCeAqAGUKE3BRGMlCcukE9vPGo0Vz7XGqK_7hPUVHG8?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":803}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2986","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2986","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2986","headline":"🤔 Что такое шаблонные литералы, и для чего они нужны? Были введены в ECMAScript 2015 (ES6) и представляют соб…","articleBody":"🤔 Что такое шаблонные литералы, и для чего они нужны? \n\nБыли введены в ECMAScript 2015 (ES6) и представляют собой улучшение стандартных строк в JavaScript. Они облегчают работу с строками, предоставляя более удобный синтаксис для создания многострочных строк, интерполяции переменных и встроенных выражений.\n\n🚩Примеры использования\n\n🟠Интерполяция переменных и выражений\nШаблонные литералы позволяют встраивать переменные и выражения внутрь строк с помощью синтаксиса ${}.\nconst name = 'Alice';\nconst age = 25;\n\nconst greeting = `Hello, my name is ${name} and I am ${age} years old.`;\n\nconsole.log(greeting);\n// Вывод: Hello, my name is Alice and I am 25 years old.\n\n🟠Многострочные строки\nШаблонные литералы позволяют создавать многострочные строки без необходимости использования символов переноса строки (\\n).\nconst multiLineString = `This is a string\nthat spans across\nmultiple lines.`;\n\nconsole.log(multiLineString);\n// Вывод:\n// This is a string\n// that spans across\n// multiple lines.\n\n🟠Встроенные выражения\nВнутри шаблонных литералов можно использовать любые JavaScript-выражения.\nconst a = 5;\nconst b = 10;\n\nconst result = `The sum of ${a} and ${b} is ${a + b}.`;\n\nconsole.log(result);\n// Вывод: The sum of 5 and 10 is 15.\n\n🟠Вызов функций внутри шаблонных литералов\nМожно вызывать функции и методы внутри шаблонных литералов.\nfunction toUpperCase(str) {\n return str.toUpperCase();\n}\n\nconst name = 'Alice';\n\nconst loudGreeting = `Hello, ${toUpperCase(name)}!`;\n\nconsole.log(loudGreeting);\n// Вывод: Hello, ALICE!\n\n🟠Тегированные шаблонные литералы\nТегированные шаблонные литералы позволяют обработать строку с помощью функции перед ее окончательной интерпретацией.\nfunction tag(strings, ...values) {\n console.log(strings);\n console.log(values);\n return 'Tagged template';\n}\n\nconst name = 'Alice';\nconst age = 25;\n\nconst taggedResult = tag`Name: ${name}, Age: ${age}`;\n\nconsole.log(taggedResult);\n// Вывод:\n// [ 'Name: ', ', Age: ', '' ]\n// [ 'Alice', 25 ]\n// Tagged template\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-09-25T09:05:55Z","dateModified":"2026-09-25T09:05:55Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/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":1286},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2985","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2985","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2985","headline":"Курс «Rust-разработчик. Продвинутый уровень» со скидкой Старт: 30 сентября Продолжительность: 5 месяцев Скидк…","articleBody":"Курс «Rust-разработчик. Продвинутый уровень» со скидкой\n\nСтарт: 30 сентября\nПродолжительность: 5 месяцев \nСкидка10% по промокоду: RUST_09\n\nКурс по разработке на Rust: работа с памятью, многопоточность, архитектура и создание надёжных систем. Практика, реальные задачи и развитие до уровня инженера. \n\nУзнать больше\n\n#реклама 16+\notus.ru\nО рекламодателе","datePublished":"2026-09-24T10:19:18Z","dateModified":"2026-09-26T08:09:53Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_oJ3VfjZfuQ8uUnlE7cR7RBwX6gUJi6yn-F5nfvy64Og?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":871}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2984","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2984","mainEntityOfPage":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru/posts/2984","headline":"🤔 Почему у нас в css нет селектора на родителе? В CSS нет селектора родителя, потому что это нарушило бы опти…","articleBody":"🤔 Почему у нас в css нет селектора на родителе?\n\nВ CSS нет селектора родителя, потому что это нарушило бы оптимизацию и производительность рендеринга. \n\n🚩Как работают селекторы в CSS? \n\nОбычные селекторы идут от родителя к дочерним элементам. \n.parent .child {\n color: red;\n}\n\nЧто было бы с селектором родителя? \n.child:has-parent(.parent) { \n color: red;\n}\n\n🚩Использовать `:has()` (в современных браузерах) \n\nВ CSS4 появился :has(), который позволяет изменять родителя, если в нём есть определённый потомок. \n.parent:has(.child) {\n border: 2px solid red;\n}\n\n🚩Использовать Flexbox/Grid вместо селектора родителя \n\nИногда можно поменять структуру HTML и стилизацию, чтобы избежать проблемы. \n.parent {\n display: flex;\n gap: 10px;\n}\n\n🚩Использовать JavaScript \n\nЕсли нужно изменить родителя динамически, можно использовать JavaScript. \ndocument.querySelectorAll(\".child\").forEach(child => {\n child.parentElement.classList.add(\"has-child\");\n});\n.has-child {\n border: 2px solid blue;\n}\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-09-24T09:06:08Z","dateModified":"2026-09-24T09:06:08Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ru/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":1463},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}}]}

17 460

Книга «7 Мощных Психотехнологий». Уникальные практики! Скачайте книгу бесплатно! Эти психотехнологии имеют потрясающую результативность. Узнать больше #реклама 16+ lifexpert.ru О рекламодателе

17 460

🤔 Как добавить слушатель события? Это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке JavaScript есть несколько способов добавить слушатели событий. 🚩Почему это нужно? Слушатели событий позволяют интерактивно реагировать на действия пользователей, делая приложения динамичными и отзывчивыми. Например, при клике на кнопку можно вызвать определенную функцию, при вводе текста в поле — обновить состояние и так далее. 🚩Как это используется? Рассмотрим три основных подхода к добавлению слушателей событий: в чистом JavaScript, в React и с использованием jQuery. 🟠Чистый JavaScript Для добавления слушателя события используется метод addEventListener.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    const button = document.getElementById('myButton');
    
    button.addEventListener('click', () => {
      alert('Button was clicked!');
    });
  </script>
</body>
</html>

🟠React Обработчики событий добавляются непосредственно к JSX-элементам с использованием специальных атрибутов, таких как onClick, onChange и т.д.

import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

export default App;

🟠jQuery Если вы используете его, добавление слушателей событий также очень просто и удобно.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Listener Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').on('click', function() {
        alert('Button was clicked!');
      });
    });
  </script>
</body>
</html>

🚩Почему это удобно и важно 🟠Интерактивность Позволяет создавать динамичные и отзывчивые интерфейсы. 🟠Гибкость Возможность реагировать на различные действия пользователей. 🟠Удобство В каждом подходе (чистый JavaScript, React, jQuery) есть свои удобства и особенности, которые помогают решать задачи более эффективно. Ставь 👍 и забирай 📚 Базу знаний

17 460

REKONFA: что интересного вас ждёт 15 октября 15 октября встречаемся на REKONFA — большой конференции Яндекс Рекламы. На сцене: — Глеб Доброрадных — о рекламном рынке и эффективности в сложных условиях — Алексей Штоколов — о новых продуктах и технологиях — Лиза Смирнова — о 360°-форматах и новых точках контакта — Александр Пушной — о человеке и ИИ — Александр Умаров — о персональном подходе, который помогает влюблять клиентов в бренд — Яна Чурикова — об актуальных задачах предпринимателей — Татьяна Мужицкая — о целях и энергии — Антон Беляев — об индивидуальности и проектах, которые любят зрители Вне сцены — зона продуктов Яндекс Рекламы, три игры, викторина, зоны Яндекс Ярда и eLama и нетворкинг. 15 октября, Москва, ВТБ Арена и онлайн. Участие бесплатное. Зарегистрироваться #реклама 16+ ya.rekonfa.ru О рекламодателе

17 460

🤔 Что такое макро и микро задачи? Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (event loop) и очередью задач. Давайте разберемся, что они собой представляют и как работают. 🚩Микро-задачи (Microtasks) Это задачи, которые запланированы для выполнения сразу после текущего выполненного скрипта, но до того, как event loop продолжит обрабатывать следующую макро-задачу. then, catch, finally queueMicrotask() 🚩Макро-задачи (Macrotasks) Это задачи, которые обрабатываются event loop, каждая макро-задача извлекается из очереди и выполняется до конца, прежде чем event loop перейдет к следующей макро-задаче. setTimeout setInterval setImmediate (Node.js) I/O операции Интерактивные действия, такие как клики мыши и нажатия клавиш 🚩Различия и порядок выполнения Основное различие между макро- и микро-задачами заключается в их приоритете выполнения: После каждой макро-задачи, перед тем как переходить к следующей макро-задаче, event loop обрабатывает все микро-задачи в очереди микро-задач. Это означает, что микро-задачи выполняются чаще и имеют более высокий приоритет по сравнению с макро-задачами. Если во время выполнения микро-задач добавляются новые микро-задачи, они также будут выполнены в текущем цикле, перед переходом к следующей макро-задаче. Это может привести к "голоданию" макро-задач, если микро-задачи постоянно добавляются.

setTimeout(() => console.log('Макро-задача 1'), 0);
Promise.resolve().then(() => console.log('Микро-задача 1'));

setTimeout(() => console.log('Макро-задача 2'), 0);
Promise.resolve().then(() => console.log('Микро-задача 2'));

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

17 460

Аренда и размещение серверов в дата-центрах Москвы ITSOFT оказывает услуги коммерческого дата-центра в Москве. 👌Аренда физических выделенных серверов (Dedicated Servers) в готовых конфигурациях и в рамках индивидуальных сборок. 👌Colocation и аренда серверных стоек. 👌Предоставление инфраструктурных ИТ-решений для физических лиц и корпоративных клиентов. 👌Предоставление высокоскоростных каналов передачи данных. Узнать цену #реклама 16+ itsoft.ru О рекламодателе

17 460

🤔 Зачем создавать самовызывающуюся функцию, если есть создание контекста через фигурные скобки? Фигурные скобки не создают scope в JS (если нет let/const). Самовызывающаяся функция (IIFE) используется для изоляции переменных, особенно в старом JS (var), где блочного scope нет. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 460

Встречай смартфон Honor — с выгодой для себя! ✅ Стильный дизайн ✅ Заряд надолго ✅ Качественные фото ✅ Быстрая и плавная работа Выбирай свой Honor по привлекательной цене! Купить #реклама market.yandex.ru О рекламодателе

17 460

🤔 Расскажи про mobx MobX — это библиотека для управления состоянием в JavaScript-приложениях, особенно в React. Она основана на реактивности и позволяет автоматически отслеживать изменения данных, обновляя интерфейс только там, где это необходимо. 🚩Основные принципы MobX 🟠Модели данных – `observable` (наблюдаемые) MobX делает объекты реактивными, автоматически отслеживая их изменения.

import { makeAutoObservable } from "mobx";

class Store {
  count = 0;

  constructor() {
    makeAutoObservable(this); // Автоматически делает свойства "наблюдаемыми"
  }

  increment() {
    this.count++;
  }
}

const store = new Store();

🟠Экшены (`actions`) Это методы, которые изменяют состояние.

store.increment(); // Увеличит count и автоматически обновит UI

🟠Компоненты подписываются на изменения – `observer` Чтобы React-компонент обновлялся при изменении данных, его нужно обернуть в observer (из mobx-react-lite).

import React from "react";
import { observer } from "mobx-react-lite";

const Counter = observer(({ store }) => (
  <div>
    <p>Счетчик: {store.count}</p>
    <button onClick={() => store.increment()}>+</button>
  </div>
));

export default Counter;

🟠Компьютед-свойства (`computed`) Это вычисляемые значения, которые пересчитываются только при изменении зависимостей.

class Store {
  count = 2;

  constructor() {
    makeAutoObservable(this);
  }

  get double() {
    return this.count * 2;
  }
}

const store = new Store();
console.log(store.double); // 4
store.count = 5;
console.log(store.double); // 10 (пересчиталось автоматически)

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

17 460

Открытый урок: бизнес-логика в микросервисах Разработка в микросервисах — это не только разбиение на сервисы, но и грамотное распределение логики. 22 октября в 19:00 мск — открытый урок для разработчиков и архитекторов. Узнаете, где должна жить бизнес-логика. Запишитесь! Зарегистрироваться

17 460

🤔 Для чего необходим viewport? Viewport – это область видимой части веб-страницы в браузере пользователя. 🟠`meta viewport` – ключ для адаптивного дизайна Чтобы страница корректно отображалась на мобильных устройствах, используется мета-тег viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

🟠Проблема без `meta viewport` (почему он нужен?) Без viewport (по умолчанию) На мобильных браузерах страницы загружаются как на ПК, но уменьшаются. Пользователям приходится зумить и скроллить. 🟠Дополнительные параметры `meta viewport` Управление масштабом

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Отключение адаптации iOS Safari

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

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

17 460

Бесплатный курс по дизайну в FIGMA от Yudaev School Онлайн-программа с наставником и чатом. Внимание! 80% практики. ✅По результату обучения у вас будет портфолио из нескольких работ. ✅Сертификат о прохождении курса. ✅Возможность пройти полное обучение и получить карьерное сопровождение! Учитесь дизайну у профессионалов в Yudaev Shool. Переходи по кнопки: "Подробнее" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

17 460

🤔 Какие есть значения у box-sizing? Свойство box-sizing в CSS управляет тем, как рассчитываются размеры элемента, включая ширину и высоту. Оно определяет, включаются ли в эти размеры внутренние отступы (padding) и границы (border), или же они добавляются отдельно. 🚩Возможные значения `box-sizing` 🟠`content-box` Размеры элемента считаются только по `width` и `height`, без учета padding и border. Если добавить padding или border, фактические размеры элемента увеличатся.

   .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: content-box;
   }

🟠`border-box` width и height включают padding и border. Внутреннее содержимое (content) будет автоматически уменьшаться, чтобы уложиться в заданные размеры.

   .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: border-box;
   }

🟠`inherit` Наследует значение box-sizing от родительского элемента.

   .parent {
       box-sizing: border-box;
   }
   .child {
       box-sizing: inherit; /* Унаследует border-box */
   }

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

17 460

Что будет работать в рекламе завтра? Ответ ищем вместе на REKONFA 2026. 15 октября соберёмся в Москве и онлайн, чтобы обсудить новые технологии Яндекс Рекламы, продуктовые запуски, тренды рынка, исследования и реальные кейсы. В программе — выступления экспертов и возможность поговорить с продуктовыми командами Яндекс Рекламы о своих задачах. А вне сцены вас ждут коворкинг, фотозоны и форматы для новых знакомств. Участвовать можно в Москве на ВТБ Арене или онлайн. Регистрация бесплатная. Зарегистрироваться #реклама 18+ ya.rekonfa.ru О рекламодателе

17 460

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

17 460

Ищете облачную платформу? Есть Beget ✅ Аптайм 99,98% в дата-центрах Tier III ✅ Техподдержка 24/7 — живые люди, без ботов ✅ Прозрачная оплата без скрытых платежей ✅ Более 200 000 клиентов доверяют Beget Узнать больше

17 460

🤔 Как работает settimeout? Функция setTimeout используется для выполнения кода или функции спустя заданный интервал времени, однократно. Она является частью Web API в браузерах и глобального объекта global в Node.js, что делает её доступной для использования в любом окружении.

let timeoutID = setTimeout(function[, delay, arg1, arg2, ...]);
let timeoutID = setTimeout(functionCode[, delay]);

function: Будет вызвана после задержки. functionCode: Строка кода для выполнения (использование этой формы не рекомендуется по соображениям безопасности). delay: Задержка в миллисекундах, после которой будет выполнена функция. Если не указать, по умолчанию будет использовано значение 0. arg1, arg2, ...: Аргументы, которые будут переданы в функцию при её вызове.

function sayHello() {
  console.log('Привет!');
}

// Вызывает функцию sayHello после задержки в 2000 миллисекунд (2 секунды)
setTimeout(sayHello, 2000);

🚩Отмена выполнения setTimeout Вызов ее возвращает идентификатор таймера, который можно использовать для отмены выполнения с помощью функции clearTimeout.

let timerId = setTimeout(sayHello, 2000);

// Отменяет выполнение
clearTimeout(timerId);

🚩Особенности поведения 🟠Минимальная задержка В HTML5 спецификация предусматривает минимальную задержку в 4ms для вложенных таймеров и в некоторых других случаях, что может повлиять на ожидаемое время выполнения. 🟠Задержка в неактивных вкладках Браузеры могут изменять поведение таймеров для неактивных вкладок для оптимизации производительности и энергопотребления. Это может привести к значительно большей задержке, чем указано. 🟠Асинхронность setTimeout не блокирует выполнение кода, который следует за ним. Он лишь запланирует выполнение функции на будущее, позволяя остальному коду продолжать выполняться без ожидания. Ставь 👍 и забирай 📚 Базу знаний

17 460

Тест цифрового двойника — done А еще разработка системы для пиковых нагрузок, продуктов для ритейла, общения и обучения — вот чем уже занимаются молодые специалисты Т1. Потому что понять, в чем твоя суперспособность в ИТ, можно только в деле. Т1 — это бигтех для бизнеса, который реализует масштабные проекты для ключевых игроков рынка, и одна из крупнейших аккредитованных ИТ-компаний России. 💻 Здесь ты можешь пройти стажировку онлайн из любой точки страны, погрузиться в работу вместе с опытным наставником и решать реальные задачи. Более 4 000 студентов из 300+ вузов уже выбрали Т1 для старта карьеры. ⚡ Присоединяйся и открывай свои суперспособности в ИТ! Перейти на сайт #реклама 16+ career.t1.ru О рекламодателе

17 460

🤔 Что такое шаблонные литералы, и для чего они нужны? Были введены в ECMAScript 2015 (ES6) и представляют собой улучшение стандартных строк в JavaScript. Они облегчают работу с строками, предоставляя более удобный синтаксис для создания многострочных строк, интерполяции переменных и встроенных выражений. 🚩Примеры использования 🟠Интерполяция переменных и выражений Шаблонные литералы позволяют встраивать переменные и выражения внутрь строк с помощью синтаксиса ${}.

const name = 'Alice';
const age = 25;

const greeting = `Hello, my name is ${name} and I am ${age} years old.`;

console.log(greeting);
// Вывод: Hello, my name is Alice and I am 25 years old.

🟠Многострочные строки Шаблонные литералы позволяют создавать многострочные строки без необходимости использования символов переноса строки (\n).

const multiLineString = `This is a string
that spans across
multiple lines.`;

console.log(multiLineString);
// Вывод:
// This is a string
// that spans across
// multiple lines.

🟠Встроенные выражения Внутри шаблонных литералов можно использовать любые JavaScript-выражения.

const a = 5;
const b = 10;

const result = `The sum of ${a} and ${b} is ${a + b}.`;

console.log(result);
// Вывод: The sum of 5 and 10 is 15.

🟠Вызов функций внутри шаблонных литералов Можно вызывать функции и методы внутри шаблонных литералов.

function toUpperCase(str) {
    return str.toUpperCase();
}

const name = 'Alice';

const loudGreeting = `Hello, ${toUpperCase(name)}!`;

console.log(loudGreeting);
// Вывод: Hello, ALICE!

🟠Тегированные шаблонные литералы Тегированные шаблонные литералы позволяют обработать строку с помощью функции перед ее окончательной интерпретацией.

function tag(strings, ...values) {
    console.log(strings);
    console.log(values);
    return 'Tagged template';
}

const name = 'Alice';
const age = 25;

const taggedResult = tag`Name: ${name}, Age: ${age}`;

console.log(taggedResult);
// Вывод:
// [ 'Name: ', ', Age: ', '' ]
// [ 'Alice', 25 ]
// Tagged template

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

17 460

Курс «Rust-разработчик. Продвинутый уровень» со скидкой Старт: 30 сентября Продолжительность: 5 месяцев Скидка10% по промокоду: RUST_09 Курс по разработке на Rust: работа с памятью, многопоточность, архитектура и создание надёжных систем. Практика, реальные задачи и развитие до уровня инженера. Узнать больше #реклама 16+ otus.ru О рекламодателе

17 460

🤔 Почему у нас в css нет селектора на родителе? В CSS нет селектора родителя, потому что это нарушило бы оптимизацию и производительность рендеринга. 🚩Как работают селекторы в CSS? Обычные селекторы идут от родителя к дочерним элементам.

.parent .child {
  color: red;
}

Что было бы с селектором родителя?

.child:has-parent(.parent) { 
  color: red;
}

🚩Использовать `:has()` (в современных браузерах) В CSS4 появился :has(), который позволяет изменять родителя, если в нём есть определённый потомок.

.parent:has(.child) {
  border: 2px solid red;
}

🚩Использовать Flexbox/Grid вместо селектора родителя Иногда можно поменять структуру HTML и стилизацию, чтобы избежать проблемы.

.parent {
  display: flex;
  gap: 10px;
}

🚩Использовать JavaScript Если нужно изменить родителя динамически, можно использовать JavaScript.

document.querySelectorAll(".child").forEach(child => {
  child.parentElement.classList.add("has-child");
});

.has-child {
  border: 2px solid blue;
}

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