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

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

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

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

إظهار المزيد

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

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

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

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

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

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

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

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

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

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

17 374

المشتركون

-1124 ساعات

-907 أيام

-25530 أيام

1 176

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

~ 75724 ساعات

~ 86648 ساعات

6.76%

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

~ 2

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

Ads index

beta

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

\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-08-27T09:05:42Z","dateModified":"2025-08-27T09:05:42Z","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":2641},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1896","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1896","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1896","headline":"👩‍💻 Ищем JavaScript разработчиков. Релокейт, удалёнка, платим много! Специально для Вас, собираем лучшие вака…","articleBody":"👩‍💻 Ищем JavaScript разработчиков. Релокейт, удалёнка, платим много!\n\nСпециально для Вас, собираем лучшие вакансии, только с прямыми контактами в Telegram!\n\n👩‍💻 Frontend 👩‍💻 Node.js\n\n👩‍💻 DevOps 👩‍💻 Python\n\n👩‍💻 C# 👣 Go\n\n🖼️ PHP 🔎 QA\n\n🖥 SQL 🤖 ML & DS\n\n👩‍💻 UX/UI 👩‍💻 Java\n\n👩‍💻 Mobile 📋 Analyst\n\n💼 1C 👩‍💻 IT HR\n\nПодпишись чтобы не упустить свой шанс получить лучший оффер!","datePublished":"2025-08-27T07:00:20Z","dateModified":"2025-08-29T07:00:15Z","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":1761},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1895","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1895","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1895","headline":"🤔 Как браузер понимает, что нужно отображать именно картинку, а не текст? По MIME-типу, заголовкам ответа и к…","articleBody":"🤔 Как браузер понимает, что нужно отображать именно картинку, а не текст?\n\nПо MIME-типу, заголовкам ответа и контексту тега. Если заголовки верны — картинка отобразится, если нет — может быть воспринята как бинарный поток или текст.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-08-26T16:10:29Z","dateModified":"2025-08-26T16:10:29Z","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":2702},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1894","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1894","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1894","headline":"🤔 Что такое async и await? Это синтаксический сахар для работы с асинхронными операциями, делающий код, работ…","articleBody":"🤔 Что такое async и await?\n\nЭто синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises).\n\n🚩Ключевое слово async\n\nИспользуется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.\nasync function fetchData() {\n return 'данные';\n}\n\nfetchData().then(data => console.log(data)); // выводит \"данные\"\n\n🚩Ключевое слово await\n\nИспользуется для ожидания результата промиса внутри асинхронной функции async. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.\nasync function fetchData() {\n let data = await fetch('https://api.example.com/data');\n let json = await data.json();\n return json;\n}\n\n🚩Плюсы\n\n➕Улучшение читаемости кода\nАсинхронный код, написанный с использованием async/await, выглядит более структурированным и похожим на синхронный код, что упрощает его понимание\n\n➕Упрощение обработки ошибок\nВ асинхронных функциях с await можно использовать стандартный синтаксис try/catch для обработки ошибок, что делает код единообразнее.\n\n➕Избегание \"callback hell\"\nИспользование async/await позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-08-26T09:05:42Z","dateModified":"2025-08-26T09:05:42Z","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":3049},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":28}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1893","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1893","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1893","headline":"🤔 Сколько в один кадр eventloopа может войти reflow и repaint? Обычно браузер пытается выполнить один reflow…","articleBody":"🤔 Сколько в один кадр eventloopа может войти reflow и repaint?\n\nОбычно браузер пытается выполнить один reflow и один repaint за один кадр (примерно 16.6 мс при 60 fps), объединяя их по возможности. Если операции слишком тяжёлые, кадры могут пропускаться.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-08-25T16:10:29Z","dateModified":"2025-08-25T16:10:29Z","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":2683},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":22},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1892","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1892","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1892","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":"2025-08-25T09:05:42Z","dateModified":"2025-08-25T09:05:42Z","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":3033},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":11},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1891","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1891","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1891","headline":"ИИ в Битрикс24 умеет предсказывать повторные продажи ИИ-помощник сам найдёт «горячих» клиентов, создаст сделк…","articleBody":"ИИ в Битрикс24 умеет предсказывать повторные продажи\n\nИИ-помощник сам найдёт «горячих» клиентов, создаст сделки, предложит, что продавать и как.\nМенеджеру остаётся нажать «позвонить».\n\n⚡Никакой магии. Только данные и алгоритмы.\nВаш отдел продаж работает проактивно.\nИ растёт выручка — без лишнего бюджета. \n\nПопробовать\n\n#реклама 16+\nbitrix24.ru\nО рекламодателе","datePublished":"2025-08-24T23:36:42Z","dateModified":"2025-08-26T22:03: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":1887}]}}]}

17 374

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

17 374

🤔 Как передать данные из родительского компонента в дочерний? Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему. 🚩Шаги для передачи данных из родительского компонента в дочерний 1⃣Создание родительского компонента В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать. Затем передаем эти данные в дочерний компонент через пропсы. 2⃣Приём данных в дочернем компоненте В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий. Родительский компонент (ParentComponent.js)

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const message = "Привет, дочерний компонент!";
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent message={message} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js)

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>{props.message}</p>
        </div>
    );
}

export default ChildComponent;

🚩Пояснение 1⃣В родительском компоненте `ParentComponent`: Создаем переменную message, содержащую строку "Привет, дочерний компонент!". В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message. 2⃣В дочернем компоненте ChildComponent: Принимаем пропс message через параметр props. Используем props.message для отображения переданной строки внутри тега <p>. 🚩Дополнительные примеры Родительский компонент (ParentComponent.js)

import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const user = {
        name: "Иван",
        age: 25
    };
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent user={user} />
        </div>
    );
}

export default ParentComponent;

Дочерний компонент (ChildComponent.js)

import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>Имя: {props.user.name}</p>
            <p>Возраст: {props.user.age}</p>
        </div>
    );
}

export default ChildComponent;

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

17 374

REKONFA Live 6 ноября приглашаем рекламодателей, агентства и рекламные площадки обсудить технологии, маркетинговые инструменты и актуальные новинки. Ключевые участники рынка поделятся опытом и расскажут: — О ситуации на рынке рекламы — Как продвигать и продавать в интернете в 2025 году — Как бизнесу адаптироваться к меняющимся условиям Вас ждут доклады на актуальные темы, классный нетворкинг, вдохновляющая атмосфера для творчества и креатива. Встречаемся 6 ноября в Москве. Для тех, кто не сможет приехать, организуем интерактивное digital-шоу. Мероприятие бесплатное, нужно только зарегистрироваться. Зарегистрироваться #реклама 16+ ya.rekonfa.ru О рекламодателе

17 374

🤔 Как можно изолировать var? Чтобы переменная, объявленная через var, не «утекала» в глобальную область, её можно изолировать с помощью функции или IIFE. Поскольку var имеет функциональную область видимости, оборачивание кода в функцию — единственный способ изолировать её. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 374

🤔 Зачем создавались библиотеки react и другие? Библиотеки, такие как React, создавались для упрощения и оптимизации процесса разработки пользовательских интерфейсов (UI). Вот несколько ключевых причин, почему создавались React и другие библиотеки: 🟠Повышение эффективности разработки Написание большого количества кода вручную для создания динамических веб-страниц может быть громоздким и ошибочным. React позволяет разбивать интерфейс на отдельные компоненты, которые можно повторно использовать и комбинировать. Это снижает объем дублирующегося кода и упрощает его сопровождение. 🟠Улучшение производительности Постоянное обновление DOM (Document Object Model) может быть медленным и ресурсоемким. React использует виртуальный DOM, который минимизирует количество реальных изменений в DOM, обновляя только те элементы, которые действительно изменились. 🟠Облегчение работы с состоянием приложения Управление состоянием больших и сложных приложений может стать хаотичным. React предоставляет механизмы для удобного управления состоянием компонентов с помощью useState, useReducer, и других хуков. Это делает логику управления состоянием более ясной и предсказуемой. 🟠Улучшение масштабируемости и поддерживаемости кода По мере роста приложения, код может стать сложным для понимания и изменения. Подход к компонентам в React позволяет разработчикам легче разделять задачи и работать над отдельными частями приложения независимо друг от друга. Это улучшает масштабируемость и поддерживаемость кода. 🟠Сообщество и экосистема Наличие обширного сообщества и инструментов для разработки. React имеет большое сообщество разработчиков, множество библиотек и инструментов, которые упрощают разработку и интеграцию различных функций в приложения.

import React, { useState } from 'react';

function Counter() {
  // Определение состояния count с начальным значением 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Вы кликнули {count} раз(а)</p>
      <button onClick={() => setCount(count + 1)}>
        Кликни меня
      </button>
    </div>
  );
}

export default Counter;

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

17 374

🤔 Когда используются теги div и span? - div — это блочный элемент, используется для структурирования больших участков контента; - span — строчный элемент, применяется для выделения текста внутри других блоков без создания новой строки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 374

🤔 Где писать запросы к серверу? Запросы к серверу в 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 374

🤔 На какие события video или audio можно подписаться? Можно подписаться на множество событий, в том числе: - play — начало воспроизведения; - pause — приостановка; - ended — завершение воспроизведения; - timeupdate — изменение текущего времени; - loadeddata — когда данные загружены; - volumechange — изменение громкости; - seeking и seeked — начало и завершение перемотки; - error — ошибка загрузки/воспроизведения. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 374

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

console.log("1: Перед запросом");

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

console.log("3: После запроса");

Вывод в консоль

1: Перед запросом  
3: После запроса  
2: Данные загружены (спустя 2 секунды)

🚩Обработка пользовательских событий без зависаний Если бы JavaScript не мог обрабатывать события асинхронно, то нажатия кнопок, прокрутка страницы и другие действия зависали бы, пока выполняется тяжёлая операция. Event Loop ставит события (например, click, keydown) в очередь и обрабатывает их только когда основной поток свободен.

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

🚩Загрузка данных без блокировки страницы Когда мы загружаем данные с сервера (fetch, setTimeout, setInterval), они не приходят мгновенно. Без Event Loop браузер бы зависал в ожидании ответа. Асинхронные запросы (fetch, XMLHttpRequest) выполняются в фоновом режиме. Когда ответ готов, он помещается в очередь задач и обрабатывается, когда основной поток освободится.

console.log("Запрос данных...");

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

console.log("Код выполняется дальше!");

Вывод

Запрос данных...  
Код выполняется дальше!  
(Спустя время) Данные получены: {id: 1, title: "..."}

🚩Обход блокировки в тяжёлых вычислениях Если в коде идёт сложная операция (например, сложные вычисления или рендеринг огромного списка), интерфейс зависнет. Можно разбить задачу на части и выполнять её постепенно с помощью setTimeout или requestAnimationFrame.

let count = 0;

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

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

heavyTask();

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

17 374

Как IT-компании увеличить продажи с помощью вебинаров? Делимся гайдом для маркетологов IT-компаний с рекомендациями ведущих российских разработчиков и экспертов МТС Линк. Вы узнаете: - Как правильно использовать онлайн-мероприятия для продвижения; - Как собрать 10 000 потенциальных клиентов из любой точки мира в одном месте; - Как увеличить узнаваемость бренда и создать комьюнити вокруг него; - Как оценить вклад онлайн-мероприятия в продвижение компании и правильно обработать лиды; Бонус: кейс IT-компании с доходимостью до вебинаров 70% Получите методичку бесплатно на сайте! Скачать #реклама 16+ mts-link.ru О рекламодателе

17 374

🤔 Когда нужно использовать типы, а когда интерфейсы? - interface — если описывается структура объекта или контракта API (особенно с наследованием). - type — для объединения, пересечений, объединений с примитивами (type ID = string | number). Общее правило: - interface — для объектов. - type — для композиции, объединений и utility-типов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 374

🤔 В чём преимущество синтаксического сахара в виде async await над promise? Оба способа позволяют работать с асинхронным кодом в JavaScript, но async/await делает код чище, проще и удобнее. 🟠`async/await` проще читать и писать Код на Promise.then() часто становится вложенным и запутанным

fetch("https://api.example.com/user")
  .then(response => response.json())
  .then(user => {
    return fetch(`https://api.example.com/orders/${user.id}`);
  })
  .then(response => response.json())
  .then(orders => {
    console.log("Заказы:", orders);
  })
  .catch(error => console.error("Ошибка:", error));

Решение: async/await

async function getUserOrders() {
    try {
        const response = await fetch("https://api.example.com/user");
        const user = await response.json();

        const ordersResponse = await fetch(`https://api.example.com/orders/${user.id}`);
        const orders = await ordersResponse.json();

        console.log("Заказы:", orders);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}

getUserOrders();

async/await лучше обрабатывает ошибки

fetch("https://api.example.com/data")
  .then(response => response.json())
  .then(data => {
    throw new Error("Ошибка в обработке данных");
  })
  .catch(error => console.error("Ошибка:", error));

async/await + try/catch – мощная обработка ошибок

async function fetchData() {
    try {
        const response = await fetch("https://api.example.com/data");
        if (!response.ok) throw new Error("Ошибка HTTP " + response.status);
        
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Ошибка:", error);
    }
}
fetchData();

async/await удобен в for и try/catch

const urls = ["url1", "url2", "url3"];
urls.forEach(url => {
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data));
});

async/await в for of

async function fetchAll(urls) {
    for (const url of urls) {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
    }
}
fetchAll(["url1", "url2", "url3"]);

async/await работает с try/finally

async function fetchData() {
    try {
        console.log("Запрос данных...");
        const response = await fetch("https://api.example.com");
        const data = await response.json();
        console.log("Данные:", data);
    } catch (error) {
        console.error("Ошибка:", error);
    } finally {
        console.log("Закрываем соединение...");
    }
}
fetchData();

async/await можно использовать внутри Promise.all() Иногда Promise.all() быстрее, потому что запускает промисы параллельно.

async function fetchMultiple() {
    const [user, orders] = await Promise.all([
        fetch("https://api.example.com/user").then(res => res.json()),
        fetch("https://api.example.com/orders").then(res => res.json())
    ]);

    console.log(user, orders);
}
fetchMultiple();

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

17 374

🤔 Что такое боксовая модель, из чего она состоит и какие бывают виды? Боксовая модель определяет, как рассчитываются размеры и отступы элементов. Состоит из: - Content — содержимое; - Padding — внутренние отступы; - Border — рамка; - Margin — внешние отступы. Виды: - content-box — по умолчанию, ширина/высота задаются только для content; - border-box — ширина включает padding и border (удобнее в практике). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 374

🤔 Что такое webgl? WebGL (Web Graphics Library) — это JavaScript API для рендеринга 2D и 3D-графики в браузере без необходимости установки дополнительных плагинов. Он основан на OpenGL ES и работает внутри HTML5-элемента <canvas>. WebGL позволяет использовать мощность графического процессора (GPU) для отрисовки сложных сцен, анимаций и интерактивных приложений прямо в браузере. 🚩Зачем нужен WebGL? 🟠Рендеринг 3D-графики в браузере Без WebGL для создания сложных 3D-сцен в вебе приходилось использовать Flash, Java-апплеты или другие технологии. WebGL делает это нативно в браузере. 🟠Использование аппаратного ускорения WebGL использует мощность видеокарты (GPU), а не только центрального процессора (CPU), что значительно ускоряет обработку графики. 🟠Работа в разных браузерах и на разных устройствах WebGL работает на большинстве современных браузеров (Chrome, Firefox, Edge, Safari) и поддерживается на Windows, macOS, Linux, iOS и Android. 🟠Поддержка интерактивных приложений Используется в играх, 3D-графике, симуляциях, картографических сервисах (например, Google Maps, Cesium.js), визуализациях данных. 🟠🚩ак использовать WebGL? WebGL управляет графикой через шейдеры — небольшие программы, которые выполняются на видеокарте. Для работы с WebGL обычно используются библиотеки, упрощающие разработку, например: - Three.js — высокоуровневая библиотека для удобной работы с WebGL. - Babylon.js — мощный движок для создания 3D-приложений. - PixiJS — библиотека для 2D-графики с поддержкой WebGL.

<canvas id="webgl-canvas"></canvas>
<script>
  // Получаем WebGL-контекст
  const canvas = document.getElementById("webgl-canvas");
  const gl = canvas.getContext("webgl");

  if (!gl) {
    console.error("WebGL не поддерживается");
  }

  // Устанавливаем цвет фона и очищаем экран
  gl.clearColor(0.0, 0.0, 0.0, 1.0); // Черный фон
  gl.clear(gl.COLOR_BUFFER_BIT);
</script>

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

17 374

👩‍💻 Ищем JavaScript разработчиков. Релокейт, удалёнка, платим много! Специально для Вас, собираем лучшие вакансии, только с прямыми контактами в Telegram! 👩‍💻 Frontend 👩‍💻 Node.js 👩‍💻 DevOps 👩‍💻 Python 👩‍💻 C# 👣 Go 🖼️ PHP 🔎 QA 🖥 SQL 🤖 ML & DS 👩‍💻 UX/UI 👩‍💻 Java 👩‍💻 Mobile 📋 Analyst 💼 1C 👩‍💻 IT HR Подпишись чтобы не упустить свой шанс получить лучший оффер!

17 374

🤔 Как браузер понимает, что нужно отображать именно картинку, а не текст? По MIME-типу, заголовкам ответа и контексту тега. Если заголовки верны — картинка отобразится, если нет — может быть воспринята как бинарный поток или текст. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 374

🤔 Что такое async и await? Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises). 🚩Ключевое слово async Используется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.

async function fetchData() {
  return 'данные';
}

fetchData().then(data => console.log(data)); // выводит "данные"

🚩Ключевое слово await Используется для ожидания результата промиса внутри асинхронной функции async. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.

async function fetchData() {
  let data = await fetch('https://api.example.com/data');
  let json = await data.json();
  return json;
}

🚩Плюсы ➕Улучшение читаемости кода Асинхронный код, написанный с использованием async/await, выглядит более структурированным и похожим на синхронный код, что упрощает его понимание ➕Упрощение обработки ошибок В асинхронных функциях с await можно использовать стандартный синтаксис try/catch для обработки ошибок, что делает код единообразнее. ➕Избегание "callback hell" Использование async/await позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками. Ставь 👍 и забирай 📚 Базу знаний

17 374

🤔 Сколько в один кадр eventloopа может войти reflow и repaint? Обычно браузер пытается выполнить один reflow и один repaint за один кадр (примерно 16.6 мс при 60 fps), объединяя их по возможности. Если операции слишком тяжёлые, кадры могут пропускаться. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 374

🤔 Для чего необходим 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 374

ИИ в Битрикс24 умеет предсказывать повторные продажи ИИ-помощник сам найдёт «горячих» клиентов, создаст сделки, предложит, что продавать и как. Менеджеру остаётся нажать «позвонить». ⚡Никакой магии. Только данные и алгоритмы. Ваш отдел продаж работает проактивно. И растёт выручка — без лишнего бюджета. Попробовать #реклама 16+ bitrix24.ru О рекламодателе