Don't get caught by a cheater! Telemetrio finds and tags such channels 👉 If you want to see the tag, subscribe

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

Open in Telegram

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

Network:easyoffer Russia37 727 Technologies & Applications7 459...

📈 Analytical overview of Telegram channel Frontend | Вопросы собесов

Channel Frontend | Вопросы собесов (@easy_javascript_ru) in the Russian language segment is an active participant. Currently, the community unites 17 411 subscribers, ranking 7 459 in the Technologies & Applications category and 37 727 in the Russia region.

📊 Audience metrics and dynamics

Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 17 411 subscribers.

According to the latest data from 29 October, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -230 over the last 30 days and by -11 over the last 24 hours, overall reach remains high.

Verification status: Not verified
Engagement rate (ER): The average audience engagement rate is 6.92%. Within the first 24 hours after publication, content typically collects 4.34% reactions from the total number of subscribers.
Post reach: On average, each post receives 1 206 views. Within the first day, a publication typically gains 757 views.
Reactions and interaction: The audience actively supports content: the average number of reactions per post is 4.
Thematic interests: Content is focused on key topics such as ставь, браузер, html, border, flex.

📝 Description and content policy

The author describes the resource as a platform for expressing subjective opinions:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads”

Thanks to the high frequency of updates (latest data received on 30 October, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.

17 411

Subscribers

-1124 hours

-727 days

-23030 days

1 206

Post views

~ 75724 hours

~ 87448 hours

6.92%

Engagement rate

~ 2

Posts per day

Ads index

beta

Posts Archive

\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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1162},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/3001","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/3001","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/3001","headline":"REKONFA: что интересного вас ждёт 15 октября 15 октября встречаемся на REKONFA — большой конференции Яндекс Р…","articleBody":"REKONFA: что интересного вас ждёт 15 октября\n\n15 октября встречаемся на REKONFA — большой конференции Яндекс Рекламы.\n\nНа сцене:\n— Глеб Доброрадных — о рекламном рынке и эффективности в сложных условиях\n— Алексей Штоколов — о новых продуктах и технологиях\n— Лиза Смирнова — о 360°-форматах и новых точках контакта\n— Александр Пушной — о человеке и ИИ\n— Александр Умаров — о персональном подходе, который помогает влюблять клиентов в бренд\n— Яна Чурикова — об актуальных задачах предпринимателей\n— Татьяна Мужицкая — о целях и энергии\n— Антон Беляев — об индивидуальности и проектах, которые любят зрители\nВне сцены — зона продуктов Яндекс Рекламы, три игры, викторина, зоны Яндекс Ярда и eLama и нетворкинг.\n\n15 октября, Москва, ВТБ Арена и онлайн. Участие бесплатное. \n\nЗарегистрироваться\n\n#реклама 16+\nya.rekonfa.ru\nО рекламодателе","datePublished":"2026-09-30T18:38:29Z","dateModified":"2026-10-02T16:55:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":858}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/3000","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/3000","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1285},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2999","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2999","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2999","headline":"Аренда и размещение серверов в дата-центрах Москвы ITSOFT оказывает услуги коммерческого дата-центра в Москве…","articleBody":"Аренда и размещение серверов в дата-центрах Москвы\n\nITSOFT оказывает услуги коммерческого дата-центра в Москве.\n👌Аренда физических выделенных серверов (Dedicated Servers) в готовых конфигурациях и в рамках индивидуальных сборок.\n👌Colocation и аренда серверных стоек.\n👌Предоставление инфраструктурных ИТ-решений для физических лиц и корпоративных клиентов.\n👌Предоставление высокоскоростных каналов передачи данных. \n\nУзнать цену\n\n#реклама 16+\nitsoft.ru\nО рекламодателе","datePublished":"2026-09-29T18:48:57Z","dateModified":"2026-10-01T17:01:04Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n3.tlmtr.cc/p/_a4LFhAMULjhkLa9oFbC84KOh3dOtVqJkgrW45FNHzzk?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":902},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2998","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2998","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1359},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2997","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2997","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n2.tlmtr.cc/p/_oxrU7Oed_U8C14J2HCmn1E2go6nmb5D9pCijohFRFCE?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":919}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2996","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2996","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2996","headline":"🤔 Расскажи про mobx MobX — это библиотека для управления состоянием в JavaScript-приложениях, особенно в Reac…","articleBody":"🤔 Расскажи про mobx\n \nMobX — это библиотека для управления состоянием в JavaScript-приложениях, особенно в React. Она основана на реактивности и позволяет автоматически отслеживать изменения данных, обновляя интерфейс только там, где это необходимо. \n\n🚩Основные принципы MobX \n\n🟠Модели данных – `observable` (наблюдаемые)\nMobX делает объекты реактивными, автоматически отслеживая их изменения. \nimport { makeAutoObservable } from \"mobx\";\n\nclass Store {\n count = 0;\n\n constructor() {\n makeAutoObservable(this); // Автоматически делает свойства \"наблюдаемыми\"\n }\n\n increment() {\n this.count++;\n }\n}\n\nconst store = new Store();\n\n🟠Экшены (`actions`)\nЭто методы, которые изменяют состояние. \nstore.increment(); // Увеличит count и автоматически обновит UI\n\n🟠Компоненты подписываются на изменения – `observer`\nЧтобы React-компонент обновлялся при изменении данных, его нужно обернуть в observer (из mobx-react-lite). \nimport React from \"react\";\nimport { observer } from \"mobx-react-lite\";\n\nconst Counter = observer(({ store }) => (\n

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

\n \n

\n));\n\nexport default Counter;\n\n🟠Компьютед-свойства (`computed`)\nЭто вычисляемые значения, которые пересчитываются только при изменении зависимостей. \nclass Store {\n count = 2;\n\n constructor() {\n makeAutoObservable(this);\n }\n\n get double() {\n return this.count * 2;\n }\n}\n\nconst store = new Store();\nconsole.log(store.double); // 4\nstore.count = 5;\nconsole.log(store.double); // 10 (пересчиталось автоматически)\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2026-09-29T09:05:56Z","dateModified":"2026-09-29T09:05:56Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1431},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2995","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2995","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2995","headline":"Открытый урок: бизнес-логика в микросервисах Разработка в микросервисах — это не только разбиение на сервисы,…","articleBody":"Открытый урок: бизнес-логика в микросервисах\n\nРазработка в микросервисах — это не только разбиение на сервисы, но и грамотное распределение логики. \n22 октября в 19:00 мск — открытый урок для разработчиков и архитекторов. Узнаете, где должна жить бизнес-логика. Запишитесь! \n\nЗарегистрироваться","datePublished":"2026-09-29T00:04:22Z","dateModified":"2026-09-30T22:08:04Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"image":["https://n1.tlmtr.cc/p/_FkgMWMQQgzSkSn2k3bKGiOeABBtg4KeeM2pfhq_3g-w?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":916}]}}]}

17 411

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

17 411

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

17 411

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

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

17 411

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

17 411

🤔 Можно ли перезапустить остановленный 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 411

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

17 411

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

17 411

🤔 Какие знаешь подходы по написанию 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 411

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

17 411

🤔 Какие статические методы 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 411

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

17 411

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

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

17 411

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

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

17 411

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

17 411

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

17 411

import { makeAutoObservable } from "mobx";

class Store {
  count = 0;

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

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

const store = new Store();

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

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

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;

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 411

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