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

Відкрити в Telegram

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

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

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

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

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

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

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

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

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

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

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

17 623

Підписники

-1224 години

-447 днів

-16930 днів

1 152

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

~ 78224 години

~ 89948 годин

6.54%

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

~ 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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":999},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/3001","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/3001","mainEntityOfPage":"https://telemetr.io/uk/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:49:34Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":858},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/3000","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/3000","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1156},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2999","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2999","mainEntityOfPage":"https://telemetr.io/uk/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-01T16:48:01Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.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":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2998","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2998","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1236},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2997","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/2997","mainEntityOfPage":"https://telemetr.io/uk/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/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.tlmtr.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":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}}]}

17 623

🤔 Как передать данные из родительского компонента в дочерний? Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в 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 623

5 офферов получили наши ребята на прошлой неделе Оффер на 4,2k долларов Оффер на 5k евро Оффер 260k рублей Оффер на 210k рублей Оффер на 220k рублей И еще 19 за сентябрь... а за лето более 50... и у тебя получится!

👋 Меня зовут Тихон, я действующий Frontend-разработчик и ментор. За руку довожу до оффера в Big Tech и не бросаю на испытательном сроке. Вокруг меня собралось целое комьюнити из почти 300 фронтендеров.

Я веду канал, в котором уже 15 тыс разработчиков. Регулярно публикую полезные материалы по подготовке к собесам. А еще каждый четверг у нас проходят полезные стримы с решениями задач и разборами резюме) Забирайте в закрепленном сообщении Полные разборы реальных собеседований: Сбер, VK, OZON, M-Video, Evrone, еще раз OZON, IT One, Trading View, МТС, Лантан, ДОМ.РФ Сборники вопросов по темам: Кибербезопасность на собеседовании Все вопросы по React на собеседовании Все вопросы по TypeScript на собеседовании Как решать задачи двумя указателями Вопросы с Vue собеседований Вопросы по сетям и методологиям с 200 собесов Вопросы по JS с 200 собесов Какие задачи спрашивают на livecoding чаще Полезные посты: Job-борды для поиска работы Запись нашего самого кринжового собеса Новый HTTP метод QUERY 🏆Статистика по рынку: Июль, Июнь, Май, Апрель, Март Подписывайся 👇 frontend_punks Реклама, erid: 2W5zFJ982Rw ИП Галактионов Тихон Витальевич, ИНН 771618975809

17 623

Олимпиада Высшая проба: промышленное программирование Участвуй в олимпиаде школьников 9-11 класса по промышленному программированию от Яндекса и ВШЭ. Победителям — БВИ или 100 баллов по профильному предмету в топовых вузах России. Регистрируйся до 20 октября! Узнать больше #реклама olymp.hse.ru О рекламодателе

17 623

🤔 Что известно про user-agent стили и способы работы с ними? User-agent стили — это базовые стили браузера. Они автоматически применяются к HTML-элементам (например, отступы у <body>). Чтобы работать с ними, часто применяют CSS reset или normalize.css. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 623

🤔 Расскажи про 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 623

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

17 623

🤔 В чём отличие amend от squash? amend заменяет последний коммит, добавляя новые изменения или меняя сообщение. squash объединяет несколько коммитов в один, используется в git rebase -i для "очистки" истории перед пушем. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 623

🤔 Можно ли перезапустить остановленный promise? Нет, Promise в JavaScript нельзя перезапустить. Промисы являются одноразовыми: после того как они переходят в одно из состояний — выполнен (resolved) или отклонён (rejected) — их состояние больше не может измениться. Это одно из ключевых свойств промисов. 🚩Почему нельзя перезапустить Promise? Промис, как только выполняется, становится иммутабельным. После выполнения (resolve) или отклонения (reject), он остаётся в этом состоянии навсегда. Промисы предназначены для представления единственного результата асинхронной операции. Их дизайн не предполагает повторного запуска той же самой асинхронной логики.

const myPromise = new Promise((resolve, reject) => {
  resolve('Done!');
});

myPromise.then((result) => console.log(result)); // "Done!"

// Даже если вы попытаетесь вызвать resolve или reject снова, ничего не произойдет
myPromise.then((result) => console.log(result)); // "Done!" (результат уже закеширован)

🚩Что делать, если нужно "перезапустить" асинхронную операцию? Если вы хотите выполнить операцию заново, вместо "перезапуска" Promise нужно создать новый Promise или использовать функцию, которая возвращает новый Promise каждый раз.

function createPromise() {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('Я новый промис!'), 1000);
  });
}

// Первый вызов
createPromise().then((result) => console.log(result)); // "Я новый промис!"

// "Перезапуск"
createPromise().then((result) => console.log(result)); // "Я новый промис!" (новый промис создан)

🚩Как это сделать с использованием `async/await`? Это синтаксический сахар над промисами. Если вам нужно "перезапустить" асинхронную операцию, просто вызовите асинхронную функцию ещё раз.

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('Данные загружены!'), 1000);
  });
}

async function main() {
  const data1 = await fetchData();
  console.log(data1); // "Данные загружены!"

  const data2 = await fetchData(); // "Перезапуск" fetchData
  console.log(data2); // "Данные загружены!"
}

main();

🚩Повторная попытка выполнения промиса (ретрай) Если вам нужно повторно попытаться выполнить операцию (например, в случае неудачи), можно реализовать "ретрай". Это особенно полезно для операций вроде сетевых запросов.

function fetchDataWithRetry(retries) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.7) { // 70% шансов на ошибку
        resolve('Данные успешно загружены!');
      } else {
        reject('Ошибка загрузки данных');
      }
    }, 1000);
  }).catch((error) => {
    if (retries > 0) {
      console.log(`Повторная попытка... Осталось: ${retries}`);
      return fetchDataWithRetry(retries - 1); // Рекурсивный вызов
    } else {
      throw error; // Если попытки исчерпаны, выбрасываем ошибку
    }
  });
}

fetchDataWithRetry(3)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

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

17 623

Ключевое ИБ-событие года SOC Forum — одно из крупнейших событий в сфере ИБ, которое проходит в рамках Российской недели кибербезопасности. ✅ Здесь встречаются эксперты, представители бизнеса и госструктур, чтобы обсудить ключевые вызовы отрасли. Событие, которое нельзя пропустить. Для тех, кто не может присутствовать лично, будет запущена онлайн-трансляция: 👌 Переключайтесь между залами. 👌 Выбирайте только актуальные для вас выступления. 👌 Задавайте вопросы спикерам в прямом эфире. 👌 Участвуйте в интерактивах. И все это не выходя из дома. Зарегистрируйтесь, и мы напомним о старте трансляции и пришлем ссылку, чтобы вы ничего не пропустили. Узнать больше #реклама 16+ registration.forumsoc.ru О рекламодателе

17 623

🤔 Что известно про шаблонное проектирование, которое ты использовал в разработке? Шаблонное проектирование (template-based) — это использование предзаданных структур, классов или функций как "заготовок". В TS это может быть: - Generics — шаблоны типов; - Абстрактные классы — базовые реализации; - React шаблоны компонентов; - CLI scaffolding — генераторы файлов по шаблонам. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 623

🤔 Какие знаешь подходы по написанию css? Существует несколько методологий и подходов к написанию CSS, которые помогают структурировать код, сделать его более читаемым, масштабируемым и поддерживаемым. Рассмотрим основные. 🟠Классический (обычный) CSS Стандартное написание CSS без структурных ограничений.

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

🟠BEM (Block Element Modifier) BEM — один из самых популярных методологий. Он помогает избежать конфликтов классов и улучшает читаемость кода. - Block (Блок) — независимый компонент (.button). - Element (Элемент) — часть блока (.button__icon). - Modifier (Модификатор) — изменение блока (.button--primary).

<button class="button button--primary">
  <span class="button__icon"></span> Нажми меня
</button>

.button {
  background-color: gray;
  color: white;
  padding: 10px;
}

.button--primary {
  background-color: blue;
}

.button__icon {
  margin-right: 5px;
}

🟠OOCSS (Object-Oriented CSS) OOCSS (Объектно-ориентированный CSS) предлагает разбивать стили на структуру и внешний вид, чтобы повторно использовать код.

.card {
  border: 1px solid #ccc;
  padding: 10px;
}

.card--dark {
  background-color: black;
  color: white;
}

🟠CSS-in-JS (Styled Components, Emotion) Этот подход популярен в React и других фреймворках, где стили пишутся внутри JavaScript.

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
`;

export default function App() {
  return <Button>Нажми меня</Button>;
}

🟠Utility-First (Tailwind CSS) В этом подходе используются готовые утилитарные классы для быстрого стилизации.

<button class="bg-blue-500 text-white p-2 rounded">Кнопка</button>

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

17 623

Рассрочка 0% на квартиры клубного формата в Анапе 38 малоэтажных домов на территории 27 га. Каскадный бассейн и зелёные дворы. Узнать больше #реклама mrqz.me О рекламодателе

17 623

🤔 Какие статические методы promise знаешь? Promise – это объект, представляющий отложенный результат (асинхронную операцию). Помимо new Promise(), у Promise есть статические методы, которые помогают работать с несколькими промисами. 🟠`Promise.resolve(value)` – создаёт выполненный промис Возвращает успешно выполненный Promise с переданным значением.

Promise.resolve(42).then(console.log); // 42

🟠`Promise.reject(error)` – создаёт отклонённый промис Возвращает промис в состоянии "отклонён" (rejected).

Promise.reject("Ошибка!").catch(console.error); // "Ошибка!"

🟠`Promise.all(promises)` – ждёт ВСЕ промисы или первый `reject` Выполняет все промисы параллельно и ждёт, пока ВСЕ выполнятся. Если один промис отклонится, Promise.all немедленно выдаст ошибку.

Promise.all([
    Promise.resolve(10),
    Promise.resolve(20),
    Promise.resolve(30),
]).then(console.log); // [10, 20, 30]

Ошибка прерывает выполнение

Promise.all([
    Promise.resolve(1),
    Promise.reject("Ошибка!"),
    Promise.resolve(3),
]).catch(console.error); // "Ошибка!"

🟠`Promise.allSettled(promises)` – ждёт ВСЕ промисы, не падает при `reject` Возвращает массив состояний (fulfilled или rejected) каждого промиса. Никогда не отклоняется, даже если есть ошибки.

Promise.allSettled([
    Promise.resolve(100),
    Promise.reject("Ошибка!"),
    Promise.resolve(300),
]).then(console.log);

Выведет

[
  { status: "fulfilled", value: 100 },
  { status: "rejected", reason: "Ошибка!" },
  { status: "fulfilled", value: 300 }
]

🟠`Promise.race(promises)` – ждёт ТОЛЬКО первый завершённый промис Возвращает результат ПЕРВОГО выполненного или отклонённого промиса.

Promise.race([
    new Promise(res => setTimeout(() => res("Промис 1"), 500)),
    new Promise(res => setTimeout(() => res("Промис 2"), 300)),
]).then(console.log); // "Промис 2" (он быстрее)

🟠`Promise.any(promises)` – ждёт ПЕРВЫЙ успешный промис Возвращает результат ПЕРВОГО выполненного (fulfilled) промиса. Если ВСЕ промисы отклонены (rejected), возвращает AggregateError.

Promise.any([
    Promise.reject("Ошибка 1"),
    Promise.resolve("Успех!"),
    Promise.reject("Ошибка 2"),
]).then(console.log); // "Успех!"

Ошибка, если все промисы reject

Promise.any([
    Promise.reject("Ошибка 1"),
    Promise.reject("Ошибка 2"),
]).catch(console.error); // AggregateError: Все промисы отклонены

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

17 623

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

17 623

🤔 Как добавить слушатель события? Это важный аспект работы с веб-приложениями, так как позволяет реагировать на действия пользователя, такие как клики, ввод текста, прокрутка и другие. В современных фреймворках и библиотеке 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 623

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

17 623

🤔 Что такое макро и микро задачи? Макро- и микро-задачи являются частью механизма асинхронного программирования и внутренней модели выполнения, которые помогают управлять порядком выполнения асинхронных операций. Эти понятия связаны с циклом событий (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 623

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

17 623

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

17 623

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