لا تقع ضحية للمخادعين! تيليمتريو يكتشف ويُميّز هذه القنوات 👉 إذا كنت تريد رؤية العلامة، اشترك

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

الذهاب إلى القناة على Telegram

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

إظهار المزيد

الشبكة: easyofferروسيا37 797التكنولوجيات والتطبيقات7 467...

📈 نظرة تحليلية على قناة تيليجرام Frontend | Вопросы собесов

تُعد قناة Frontend | Вопросы собесов (@easy_javascript_ru) في القطاع اللغوي الروسية لاعباً نشطاً. يضم المجتمع حالياً 17 341 مشتركاً، محتلاً المرتبة 7 467 في فئة التكنولوجيات والتطبيقات والمرتبة 37 797 في منطقة روسيا.

📊 مؤشرات الجمهور والحراك

منذ تأسيسه في невідомо، حقق المشروع نمواً سريعاً وجمع 17 341 مشتركاً.

بحسب آخر البيانات بتاريخ 04 نوفمبر, 2026، تحافظ القناة على نشاط مستقر. خلال آخر 30 يوماً تغيّر عدد الأعضاء بمقدار -284، وفي آخر 24 ساعة بمقدار -13، مع بقاء الوصول العام مرتفعاً.

حالة التحقق: غير موثّقة
معدل التفاعل (ER): يبلغ متوسط تفاعل الجمهور 6.78‎%. وخلال أول 24 ساعة من النشر يحصد المحتوى عادةً 4.42‎% من ردود الفعل نسبةً إلى إجمالي المشتركين.
وصول المنشورات: يحصل كل منشور على متوسط 1 175 مشاهدة. وخلال اليوم الأول يجمع عادةً 766 مشاهدة.
التفاعلات والاستجابة: يتفاعل الجمهور بانتظام؛ متوسط التفاعلات لكل منشور يبلغ 4.
الاهتمامات الموضوعية: يركز المحتوى على مواضيع رئيسية مثل ставь, браузер, html, border, flex.

📝 الوصف وسياسة المحتوى

يصف المؤلف القناة بأنها مساحة للتعبير عن الآراء الذاتية:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads”

بفضل وتيرة التحديث المرتفعة (أحدث البيانات بتاريخ 05 نوفمبر, 2026) تحافظ القناة على حداثتها ومستوى وصول مرتفع. وتُظهر التحليلات تفاعلاً نشطاً من الجمهور، ما يجعلها نقطة تأثير مهمة ضمن فئة التكنولوجيات والتطبيقات.

17 341

المشتركون

-1324 ساعات

-1037 أيام

-28430 أيام

1 175

عرض المشاهدات

~ 76624 ساعات

~ 88148 ساعات

6.78%

معدل المشاركة

~ 2

المشاركات في اليوم

Ads index

أرشيف المشاركات

\n\n🟠`requestAnimationFrame()` — лучший способ в чистом JS \nЕсли нужно более гибкое управление анимацией, используем requestAnimationFrame(). \n\n

\n\n\n\n\n\n🟠Библиотеки (GSAP, Anime.js, Velocity.js)\nЕсли нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку. \n\n

\n\n\n\n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-28T09:10:11Z","dateModified":"2025-02-28T09:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/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":3764},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":31}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1172","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1172","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1172","headline":"🤔 Что такое inline block в отличие от inline элемента? Inline block отображается в одну строку, как inline-эл…","articleBody":"🤔 Что такое inline block в отличие от inline элемента?\n\nInline block отображается в одну строку, как inline-элементы, но позволяет задавать размеры (ширину и высоту) и отступы. В отличие от inline-элементов, такие элементы сохраняют возможность занимать всю строку, как block-элементы.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-02-27T16:10:13Z","dateModified":"2025-02-27T16:10:13Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/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":3376},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":19},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1171","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1171","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1171","headline":"🤔 В чем различие методов call apply bind? Методы call, apply и bind принадлежат к функциональному объекту Fun…","articleBody":"🤔 В чем различие методов call apply bind? \n\nМетоды call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении.\n\n🚩Сall\n\nВызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.\nfunction greet(message, name) {\n console.log(${message}, ${name}. This is ${this});\n}\n\ngreet.call(\"Earth\", \"Hello\", \"Alice\"); // \"Hello, Alice. This is Earth\"\n\n🚩Apply\n\nОчень похож на call, но принимает аргументы в виде массива, а не по отдельности.\nfunction greet(message, name) {\n console.log(\n${message}, ${name}. This is ${this}\n);\n}\n\ngreet.apply(\"Earth\", [\"Hello\", \"Alice\"]); // \"Hello, Alice. This is Earth\"\n\n🚩Bind\n\nСоздаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.\nfunction greet(message, name) {\n console.log(\n${message}, ${name}. This is ${this}\n);\n}\n\nconst greetEarth = greet.bind(\"Earth\", \"Hello\", \"Alice\");\ngreetEarth(); // \"Hello, Alice. This is Earth\"\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-27T09:10:10Z","dateModified":"2025-02-27T09:10:10Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/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":4039},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":18},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":27}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1170","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1170","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1170","headline":"🤔 Как id может участвовать в ссылке? В URL-адресе id элемента используется в качестве якоря, который указывае…","articleBody":"🤔 Как id может участвовать в ссылке?\n\nВ URL-адресе id элемента используется в качестве якоря, который указывает браузеру, куда прокрутить страницу. Например, если элемент имеет id section1, то адрес https://example.com#section1 автоматически переместит страницу к этому элементу.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-02-26T16:10:08Z","dateModified":"2025-02-26T16:10:08Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/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":3757},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":31},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1169","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1169","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1169","headline":"⚡ Новые каналы с вакансиями и стажировками для джунов В этих каналах публикуются все свежие вакансии и стажир…","articleBody":"⚡ Новые каналы с вакансиями и стажировками для джунов\n\nВ этих каналах публикуются все свежие вакансии и стажировки \n\n🔺 ВАКАНСИИ\nГорячие вакансии с привлекательными офферами для джуниор разработчиков, аналитиков, дизайнеров и QA-специалистов.\n👉 ПОДПИСАТЬСЯ\n\n🔺СТАЖИРОВКИ\nСтажировки для начинающих специалистов в IT независимо от возраста!\n👉 ПОДПИСАТЬСЯ\n\n🔺Junojobs\nВакансии и стажировки для junior-разработчиков на удалёнке.\n👉 ПОДПИСАТЬСЯ\n\n🔺БИГТЕХ\nJunior вакансии и стажировки в крупнейших IT-компаниях мира: NVidia, Apple, T-банк, Яндекс, Google и т. д.\n👉 ПОДПИСАТЬСЯ \n\n🔺Макс из < codereview />\nЭксперименты про трудоустройство в IT, советы для быстрого поиска работы и офферы для джунов.\n👉 ПОДПИСАТЬСЯ","datePublished":"2025-02-26T14:05:11Z","dateModified":"2025-02-28T14:05:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/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":2326},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1168","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1168","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1168","headline":"🤔 Что такое делегирование? Делегирование событий (Event Delegation) — это техника, при которой мы не навешива…","articleBody":"🤔 Что такое делегирование?\n\nДелегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков. \n\n🚩Как работает делегирование?\n\nОбычный способ (без делегирования) \nЕсли у нас есть 10 кнопок, мы можем повесить обработчик на каждую\ndocument.querySelectorAll(\"button\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n console.log(\"Кнопка нажата\");\n });\n});\n\nЕсли кнопок 1000, это создаст 1000 обработчиков, что неэффективно. \nЕсли кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает. \n\n🟠Делегирование событий (оптимальный способ)\nВместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие: \ndocument.getElementById(\"container\").addEventListener(\"click\", (event) => {\n if (event.target.tagName === \"BUTTON\") {\n console.log(\"Кнопка нажата:\", event.target.textContent);\n }\n});\n\n🟠Пример с динамическими элементами\nЕсли мы добавляем кнопки динамически, обработчик все равно будет работать\ndocument.getElementById(\"container\").addEventListener(\"click\", (event) => {\n if (event.target.classList.contains(\"btn\")) {\n console.log(\"Нажата кнопка:\", event.target.textContent);\n }\n});\n\n// Добавляем новую кнопку динамически\nsetTimeout(() => {\n const newButton = document.createElement(\"button\");\n newButton.classList.add(\"btn\");\n newButton.textContent = \"Новая кнопка\";\n document.getElementById(\"container\").appendChild(newButton);\n}, 2000);\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-26T09:10:10Z","dateModified":"2025-02-26T09:10:10Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/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":4024},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":25},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":30}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1167","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1167","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1167","headline":"🤔 Что такое z-index? Свойство z-index в CSS определяет порядок расположения элементов на оси Z (перекрытие).…","articleBody":"🤔 Что такое z-index?\n\nСвойство z-index в CSS определяет порядок расположения элементов на оси Z (перекрытие). Элементы с более высоким z-index располагаются поверх элементов с более низким значением. Однако свойство работает только для элементов с установленным position отличным от static.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-02-25T16:10:09Z","dateModified":"2025-02-25T16:10:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/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":3803},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":22},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1166","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1166","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1166","headline":"🤔 Как с помощью js можно передвигать вперед/назад по истории браузера? В JavaScript можно перемещаться вперед…","articleBody":"🤔 Как с помощью js можно передвигать вперед/назад по истории браузера?\n\nВ JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта window.history. \n\n🟠Использование `history.back()` и `history.forward()`\nЭти методы аналогичны кнопкам \"Назад\" и \"Вперед\" в браузере. \nhistory.back(); // Перемещение на одну страницу назад\nhistory.forward(); // Перемещение на одну страницу вперед\n\nПример кнопок \"Назад\" и \"Вперед\"\n\n\n\n🟠Использование `history.go(n)`\nЭтот метод позволяет перемещаться на определенное количество шагов: \nhistory.go(-1) – назад на 1 страницу \nhistory.go(1) – вперед на 1 страницу \nhistory.go(-2) – назад на 2 страницы \nhistory.go(-2); // Перейти на две страницы назад\nhistory.go(3); // Перейти на три страницы вперед\n\n🟠Получение длины истории `history.length`\nЕсли нужно узнать, сколько страниц в истории текущей сессии: \nconsole.log(history.length); // Количество записей в истории\n\n🟠Манипуляции с историей: `pushState()` и `replaceState()` \nЕсли нужно изменить URL без перезагрузки страницы, можно использовать: \nhistory.pushState(state, title, url)\nДобавляет новый URL в историю (как будто пользователь перешел по ссылке). \nhistory.pushState({ page: 1 }, \"Title 1\", \"/page1\");\n\nhistory.replaceState(state, title, url)\nЗаменяет текущий URL (не добавляет новую запись в историю). \nhistory.replaceState({ page: 2 }, \"Title 2\", \"/page2\");\n\nПример динамического изменения истории: \ndocument.querySelector(\"button\").addEventListener(\"click\", () => {\n history.pushState({ page: \"about\" }, \"About Page\", \"/about\");\n});\n\n🟠Отслеживание изменений истории `popstate`\nКогда пользователь нажимает \"Назад\" или \"Вперед\", можно реагировать с помощью события popstate\nwindow.addEventListener(\"popstate\", (event) => {\n console.log(\"Текущий state:\", event.state);\n});\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-02-25T09:10:08Z","dateModified":"2025-02-25T09:10:08Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/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":4093},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":19},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":28}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1165","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1165","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1165","headline":"🤔 Что известно про отладку JS? Для отладки JavaScript-кода используются инструменты разработчика (DevTools) в…","articleBody":"🤔 Что известно про отладку JS?\n\nДля отладки JavaScript-кода используются инструменты разработчика (DevTools) в браузерах, такие как Chrome или Firefox. Вы можете ставить точки останова, отслеживать значения переменных в режиме выполнения, использовать команду debugger для остановки кода и логировать информацию через console.log().\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-02-24T16:10:13Z","dateModified":"2025-02-24T16:10:13Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ar/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":3661},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":19},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}}]}

17 341

Партнёрская программа рекрутинга в Яндекс Еду Станьте партнёром Яндекс Еды по привлечению курьеров и получите кучу преимуществ: 💰Платим до 47 000 ₽ за успешного кандидата 📞Поддержка на всех этапах 📅Свободное расписание 📊Удобные инструменты для работы Приводите новых курьеров и получайте в среднем 250 000 ₽ в месяц! Зарегистрироваться #реклама eda.yandex.ru О рекламодателе Реклама на Яндексе

17 341

🤔 Какую проблему решает асинхронность в JavaScript? Асинхронность позволяет выполнять долгие операции (запросы к серверу, чтение файлов, таймеры) без блокировки основного потока. Без нее весь интерфейс зависал бы при ожидании ответа от сервера или выполнения сложных вычислений. Решается через callback, Promises и async/await. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 341

🤔 Где писать запросы к серверу? Запросы к серверу в React можно выполнять в нескольких местах в зависимости от архитектуры вашего приложения и используемого подхода. 🚩Использование хуков useEffect позволяет выполнять побочные эффекты, такие как запросы к серверу, в функциональных компонентах.

import React, { useState, useEffect } from 'react';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []); // Пустой массив означает, что эффект выполнится только при монтировании компонента

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

🚩Методы жизненного цикла в классовых компонентах Метод componentDidMount используется для выполнения запросов к серверу в классовых компонентах после монтирования компонента.

import React, { Component } from 'react';

class DataFetchingComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data });
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        {data ? (
          <pre>{JSON.stringify(data, null, 2)}</pre>
        ) : (
          <p>Loading data...</p>
        )}
      </div>
    );
  }
}

export default DataFetchingComponent;

🟠Сервисы или утилиты Запросы к серверу можно изолировать в отдельные файлы сервисов или утилит, что помогает сделать код более модульным и переиспользуемым. service.js

export async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
}

DataFetchingComponent.js

import React, { useState, useEffect } from 'react';
import { fetchData } from './service';

function DataFetchingComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData()
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {data ? (
        <pre>{JSON.stringify(data, null, 2)}</pre>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}

export default DataFetchingComponent;

🟠Управление состоянием Для крупных приложений, где важно централизованное управление состоянием, запросы к серверу можно выполнять в рамках таких библиотек, как Redux или MobX. Ставь 👍 и забирай 📚 Базу знаний

17 341

Битрикс24 💻Один онлайн-сервис для совместной работы. 📱10+ инструментов. ✅0 денег. Счастливые сотрудники. Прибыльный бизнес. Регистрируйтесь и забирайте себе Зарегистрироваться #реклама 16+ office-online.bitrix24.ru О рекламодателе

17 341

🤔 Какие библиотеки популярны в React? В экосистеме React популярны Redux для управления состоянием, React Router для маршрутизации, Axios для работы с HTTP-запросами, MUI и Tailwind для стилизации, а также Formik и React Hook Form для управления формами. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 341

Автоматизированное SEO-продвижение для бизнеса! Бесплатный тест 5 дней. Моментальный и понятный результат. Снимаем и прозрачно показываем все метрики. Попробовать #реклама умныйсервис.рф О рекламодателе

17 341

🤔 Расскажи про memo в react React.memo — это функция в React, которая используется для оптимизации производительности функциональных компонентов. Она предотвращает ненужные повторные рендеры, если пропсы компонента не изменились. 🚩Зачем нужен `React.memo`? В React каждый раз, когда родительский компонент обновляется, все его дочерние компоненты тоже ререндерятся, даже если их пропсы остались неизменными. Это может негативно сказаться на производительности, особенно если дочерний компонент выполняет сложные вычисления или рендерит большое количество данных. React.memo решает эту проблему, запоминая (мемоизируя) предыдущий результат рендера и сравнивая его с новыми пропсами. Если пропсы не изменились, компонент просто использует закэшированное представление, а не ререндерится. 🚩Как использовать `React.memo`? React.memo — это функция высшего порядка (HOC), которая оборачивает функциональный компонент

import React from "react";

const MyComponent = ({ value }) => {
  console.log("Рендер компонента!");
  return <div>Значение: {value}</div>;
};

// Оборачиваем компонент в React.memo
const MemoizedComponent = React.memo(MyComponent);

export default MemoizedComponent;

🚩Пример без React.memo vs. с React.memo Допустим, у нас есть родительский компонент, который изменяет состояние при каждом клике

import React, { useState } from "react";
import MemoizedComponent from "./MyComponent";

const Parent = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Увеличить</button>
      <MemoizedComponent value="Привет, мир!" />
    </div>
  );
};

export default Parent;

🚩Когда НЕ стоит использовать `React.memo`? Если компонент всегда ререндерится из-за изменения пропсов – смысла в memo нет. Если компонент рендерится быстро – оптимизация может быть ненужной, а проверка пропсов даже замедлит работу. Если пропсы часто изменяются – кэширование теряет смысл, так как все равно ререндерится. Ставь 👍 и забирай 📚 Базу знаний

17 341

Онлайн-интенсив для ИТ-специалистов в Открытых школах Т1 Уже есть опыт работы в ИТ, но хочешь прокачать скилы и продвинуться в карьере? Тогда скорее залетай на бесплатный ИТ-интенсив в Открытых школах Т1. Открытые школы — это возможность усилить свои навыки и получить оффер в ИТ-холдинг Т1. И все это за месяц, онлайн и в удобное вечернее время. Что ты получишь? ✅ бесплатное обучение в гибком формате: по вечерам, онлайн, из любого города РФ и РБ. ✅ материалы от HR для прокачки резюме и подготовки к интервью в Т1. ✅ много практики и уникальный рыночный опыт. ✅ поддержку опытных преподавателей и карьерный фаст-трек до мидла в Т1 для лучших выпускников. ✅ реальный шанс получить оффер в Т1. Более 1000 специалистов уже прошли этот путь — теперь твоя очередь! Регистрация до 14 марта! Подать заявку #реклама 16+ t1.ru О рекламодателе

17 341

🤔 Что есть во фронтенде, кроме JS? Помимо JavaScript, во фронтенде используются HTML для структуры страниц, CSS для их оформления, инструменты для сборки (Webpack, Vite), фреймворки (React, Angular, Vue) и различные библиотеки для работы с анимацией, данными и API. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 341

🤔 Как работает 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 341

🤔 Зачем изучение функционального языка? Изучение функционального языка помогает понять ключевые концепции функционального программирования, такие как чистые функции, каррирование, иммутабельность данных и рекурсия. Эти знания полезны для написания эффективного и предсказуемого кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 341

🤔 Как мы будем через js анимировать что либо? В JavaScript есть три основных способа создания анимаций: CSS-анимации (transition, @keyframes) + изменение классов через JS Метод requestAnimationFrame() Использование библиотек (GSAP, Anime.js, Velocity.js) 🟠CSS-анимации + управление через JS Самый простой способ — использовать CSS-анимации, а в JS только добавлять или убирать классы.

<button onclick="toggleBox()">Анимировать</button>
<div id="box"></div>

<style>
  #box {
    width: 100px;
    height: 100px;
    background: red;
    transition: transform 0.5s ease-in-out;
  }
  .move {
    transform: translateX(200px);
  }
</style>

<script>
  function toggleBox() {
    document.getElementById("box").classList.toggle("move");
  }
</script>

🟠`requestAnimationFrame()` — лучший способ в чистом JS Если нужно более гибкое управление анимацией, используем requestAnimationFrame().

<button onclick="startAnimation()">Старт</button>
<div id="box"></div>

<style>
  #box {
    width: 50px;
    height: 50px;
    background: blue;
    position: absolute;
  }
</style>

<script>
  let position = 0;
  let animationId;

  function animate() {
    position += 5; // Двигаем на 5px за кадр
    document.getElementById("box").style.transform = `translateX(${position}px)`;

    if (position < 300) { // Останавливаем, когда достигнет 300px
      animationId = requestAnimationFrame(animate);
    }
  }

  function startAnimation() {
    cancelAnimationFrame(animationId); // Останавливаем предыдущую анимацию
    position = 0;
    animate();
  }
</script>

🟠Библиотеки (GSAP, Anime.js, Velocity.js) Если нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку.

<button onclick="animateBox()">Анимировать</button>
<div id="box"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

<script>
  function animateBox() {
    gsap.to("#box", { x: 300, rotation: 360, duration: 2, ease: "elastic.out(1,0.3)" });
  }
</script>

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

17 341

🤔 Что такое inline block в отличие от inline элемента? Inline block отображается в одну строку, как inline-элементы, но позволяет задавать размеры (ширину и высоту) и отступы. В отличие от inline-элементов, такие элементы сохраняют возможность занимать всю строку, как block-элементы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 341

🤔 В чем различие методов call apply bind? Методы call, apply и bind принадлежат к функциональному объекту Function и используются для указания контекста this при вызове функции. Хотя все три метода позволяют контролировать значение this внутри функции, между ними существуют ключевые различия в способе использования и поведении. 🚩Сall Вызывает функцию, явно устанавливая this в первом аргументе. Остальные аргументы передаются в вызываемую функцию как есть.

function greet(message, name) {
  console.log(${message}, ${name}. This is ${this});
}

greet.call("Earth", "Hello", "Alice"); // "Hello, Alice. This is Earth"

🚩Apply Очень похож на call, но принимает аргументы в виде массива, а не по отдельности.

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

greet.apply("Earth", ["Hello", "Alice"]); // "Hello, Alice. This is Earth"

🚩Bind Создаёт новую функцию, которая, когда она вызывается, имеет установленный контекст this, указанный в первом аргументе. В отличие от call и apply, bind не вызывает функцию сразу, а возвращает новую функцию, которую можно вызвать позже.

function greet(message, name) {
  console.log(
${message}, ${name}. This is ${this}
);
}

const greetEarth = greet.bind("Earth", "Hello", "Alice");
greetEarth(); // "Hello, Alice. This is Earth"

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

17 341

🤔 Как id может участвовать в ссылке? В URL-адресе id элемента используется в качестве якоря, который указывает браузеру, куда прокрутить страницу. Например, если элемент имеет id section1, то адрес https://example.com#section1 автоматически переместит страницу к этому элементу. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 341

⚡ Новые каналы с вакансиями и стажировками для джунов В этих каналах публикуются все свежие вакансии и стажировки 🔺 ВАКАНСИИ

Горячие вакансии с привлекательными офферами для джуниор разработчиков, аналитиков, дизайнеров и QA-специалистов.

👉 ПОДПИСАТЬСЯ 🔺СТАЖИРОВКИ

Стажировки для начинающих специалистов в IT независимо от возраста!

👉 ПОДПИСАТЬСЯ 🔺Junojobs

Вакансии и стажировки для junior-разработчиков на удалёнке.

👉 ПОДПИСАТЬСЯ 🔺БИГТЕХ

Junior вакансии и стажировки в крупнейших IT-компаниях мира: NVidia, Apple, T-банк, Яндекс, Google и т. д.

👉 ПОДПИСАТЬСЯ 🔺Макс из < codereview />

Эксперименты про трудоустройство в IT, советы для быстрого поиска работы и офферы для джунов.

👉 ПОДПИСАТЬСЯ

17 341

🤔 Что такое делегирование? Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков. 🚩Как работает делегирование? Обычный способ (без делегирования) Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую

document.querySelectorAll("button").forEach((btn) => {
  btn.addEventListener("click", () => {
    console.log("Кнопка нажата");
  });
});

Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно. Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает. 🟠Делегирование событий (оптимальный способ) Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:

document.getElementById("container").addEventListener("click", (event) => {
  if (event.target.tagName === "BUTTON") {
    console.log("Кнопка нажата:", event.target.textContent);
  }
});

🟠Пример с динамическими элементами Если мы добавляем кнопки динамически, обработчик все равно будет работать

document.getElementById("container").addEventListener("click", (event) => {
  if (event.target.classList.contains("btn")) {
    console.log("Нажата кнопка:", event.target.textContent);
  }
});

// Добавляем новую кнопку динамически
setTimeout(() => {
  const newButton = document.createElement("button");
  newButton.classList.add("btn");
  newButton.textContent = "Новая кнопка";
  document.getElementById("container").appendChild(newButton);
}, 2000);

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

17 341

🤔 Что такое z-index? Свойство z-index в CSS определяет порядок расположения элементов на оси Z (перекрытие). Элементы с более высоким z-index располагаются поверх элементов с более низким значением. Однако свойство работает только для элементов с установленным position отличным от static. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 341

🤔 Как с помощью js можно передвигать вперед/назад по истории браузера? В JavaScript можно перемещаться вперед и назад по истории браузера с помощью объекта window.history. 🟠Использование `history.back()` и `history.forward()` Эти методы аналогичны кнопкам "Назад" и "Вперед" в браузере.

history.back();    // Перемещение на одну страницу назад
history.forward(); // Перемещение на одну страницу вперед

Пример кнопок "Назад" и "Вперед"

<button onclick="history.back()">⬅️ Назад</button>
<button onclick="history.forward()">Вперед ➡️</button>

🟠Использование `history.go(n)` Этот метод позволяет перемещаться на определенное количество шагов: history.go(-1) – назад на 1 страницу history.go(1) – вперед на 1 страницу history.go(-2) – назад на 2 страницы

history.go(-2); // Перейти на две страницы назад
history.go(3);  // Перейти на три страницы вперед

🟠Получение длины истории `history.length` Если нужно узнать, сколько страниц в истории текущей сессии:

console.log(history.length); // Количество записей в истории

🟠Манипуляции с историей: `pushState()` и `replaceState()` Если нужно изменить URL без перезагрузки страницы, можно использовать: history.pushState(state, title, url) Добавляет новый URL в историю (как будто пользователь перешел по ссылке).

history.pushState({ page: 1 }, "Title 1", "/page1");

history.replaceState(state, title, url) Заменяет текущий URL (не добавляет новую запись в историю).

history.replaceState({ page: 2 }, "Title 2", "/page2");

Пример динамического изменения истории:

document.querySelector("button").addEventListener("click", () => {
  history.pushState({ page: "about" }, "About Page", "/about");
});

🟠Отслеживание изменений истории `popstate` Когда пользователь нажимает "Назад" или "Вперед", можно реагировать с помощью события popstate

window.addEventListener("popstate", (event) => {
  console.log("Текущий state:", event.state);
});

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

17 341

🤔 Что известно про отладку JS? Для отладки JavaScript-кода используются инструменты разработчика (DevTools) в браузерах, такие как Chrome или Firefox. Вы можете ставить точки останова, отслеживать значения переменных в режиме выполнения, использовать команду debugger для остановки кода и логировать информацию через console.log(). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний