ar
Feedback

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

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

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

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

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

إظهار المزيد

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

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

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

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

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

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

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

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

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

17 366
المشتركون
-824 ساعات
-1057 أيام
-27630 أيام
أرشيف المشاركات
\n\n\n
\n \n \n \n
\n\n\n\n🚩Особенности события `blur`\n\n🟠Не всплывает\nСобытие blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.\n \n // Работает только для конкретного элемента\n element.addEventListener(\"blur\", handler);\n\n // Для делегирования используют focusout\n parentElement.addEventListener(\"focusout\", handler);\n \n\n🟠Отличие от `change`\nСобытие change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-05-05T09:05:22Z","dateModified":"2025-05-05T09:05:22Z","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":3614},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":18}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1462","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1462","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1462","headline":"🤔 Что такое CDN? CDN (Content Delivery Network) — это сеть распределённых серверов, которая хранит копии стат…","articleBody":"🤔 Что такое CDN?\n\nCDN (Content Delivery Network) — это сеть распределённых серверов, которая хранит копии статических ресурсов (изображения, стили, скрипты) и предоставляет их пользователям с ближайшего к ним узла.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-05-04T16:10:31Z","dateModified":"2025-05-04T16:10:31Z","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":3484},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":32},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":23}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1461","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1461","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1461","headline":"🤔 Какие преимущества у di? Dependency Injection (DI) – это паттерн проектирования, который помогает разделять…","articleBody":"🤔 Какие преимущества у di?\n\nDependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне. \n\n🚩Почему DI полезен? \n\n🟠Уменьшает связность кода (Loose Coupling) \nВместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи. \nclass UserService {\n constructor() {\n this.db = new Database(); // Прямо создаем зависимость\n }\n\n getUser(id) {\n return this.db.findUserById(id);\n }\n}\n\nС DI (гибкость) \nclass UserService {\n constructor(db) {\n this.db = db; // DI передает зависимость извне\n }\n\n getUser(id) {\n return this.db.findUserById(id);\n }\n}\n\n// Передаем нужную зависимость\nconst database = new Database();\nconst userService = new UserService(database);\n\n🟠Улучшает тестируемость (Unit-тесты проще) \nС DI можно подменять зависимости на заглушки (mock, fake, stub). \nconst userService = new UserService(); // Всегда использует реальную Database\nuserService.getUser(1); // Как протестировать без реальной БД? 🤔\n\nС DI (можно подменить зависимость) \nclass FakeDatabase {\n findUserById(id) {\n return { id, name: \"Тестовый пользователь\" };\n }\n}\n\nconst fakeDb = new FakeDatabase();\nconst userService = new UserService(fakeDb);\n\nconsole.log(userService.getUser(1)); // ✅ Тест без реальной БД\n\n🟠Улучшает расширяемость (легко менять зависимости) \nДопустим, сначала использовали MySQLDatabase, но решили перейти на MongoDatabase. \nclass UserService {\n constructor() {\n this.db = new MySQLDatabase(); // Нужно менять здесь\n }\n}\n\nС DI (добавляем новую зависимость без изменения кода UserService) \nconst db = new MongoDatabase(); // Просто передаем другую зависимость\nconst userService = new UserService(db);\n\n🟠Упрощает управление зависимостями (через DI-контейнеры) \nВ крупных приложениях удобно использовать DI-контейнер (например, InversifyJS для JavaScript/TypeScript). \nimport \"reflect-metadata\";\nimport { Container, injectable, inject } from \"inversify\";\n\n@injectable()\nclass Database {\n findUserById(id) {\n return { id, name: \"База данных\" };\n }\n}\n\n@injectable()\nclass UserService {\n constructor(@inject(Database) db) {\n this.db = db;\n }\n\n getUser(id) {\n return this.db.findUserById(id);\n }\n}\n\n// Настраиваем DI-контейнер\nconst container = new Container();\ncontainer.bind(Database).toSelf();\ncontainer.bind(UserService).toSelf();\n\n// Получаем объект с нужными зависимостями\nconst userService = container.get(UserService);\nconsole.log(userService.getUser(1));\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-05-04T09:05:23Z","dateModified":"2025-05-04T09:05:23Z","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":3543},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":30}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1460","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1460","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1460","headline":"Спецпредложение по SEO-продвижению до конца апреля! За 7 дней покажем результат по продвижению вашего сайта,…","articleBody":"Спецпредложение по SEO-продвижению до конца апреля!\n\nЗа 7 дней покажем результат по продвижению вашего сайта, если не получится - вернем предоплату, всё прописано в договоре.\n\n👍Что мы считаем результатом? Продвижение более 30% согласованных с вами коммерческих запросов по вашей нише в топ10 поиска Яндекса всего за 1 неделю работы!\n\n💰Предоплата 25% от стоимости за 1-й месяц продвижения. Подлежит возврату если мы не достигнем результата, описанного выше.\n\n⚡Берем в работу не все сайты, только после предварительного анализа, который проводим бесплатно!\n\n✅Интересно? Отправляйте нам ваш сайт и узнайте сможем ли мы взять его в работу на таких условиях:\n\n📞 Звоните: +7 (499) 433-08-64 \n\nЗаписаться онлайн\n\n#реклама \nmrqz.me\nО рекламодателе","datePublished":"2025-05-03T19:36:09Z","dateModified":"2025-05-05T17:46:01Z","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":2030}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1459","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1459","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1459","headline":"🤔 Для чего нужно сравнивать ссылки при мемоизации? Мемоизация (React.memo, useMemo, useCallback) основана на…","articleBody":"🤔 Для чего нужно сравнивать ссылки при мемоизации?\n\nМемоизация (React.memo, useMemo, useCallback) основана на сравнении входных данных. Для объектов и функций сравнение происходит по ссылке.\nЕсли ссылка на объект или функцию изменилась — React считает, что данные изменились. Даже если внутренности одинаковые.\nПоэтому важно сохранять одну и ту же ссылку, если значение не изменилось, иначе мемоизация не сработает и будет лишняя перерисовка.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-05-03T16:10:23Z","dateModified":"2025-05-03T16:10:23Z","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":2976},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":23}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1458","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1458","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1458","headline":"Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопо…","articleBody":"Дарим подписку на Яндекс Музыку\n\nОтветьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких.\nКинопоиск и Яндекс Книги тоже в подписке.\nПопробуйте бесплатно❤️ \n\nПопробовать\n\n#реклама 18+\nmusic.yandex.ru\nО рекламодателе\nРеклама на Яндексе","datePublished":"2025-05-03T10:11:45Z","dateModified":"2025-05-05T08:12:02Z","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":1854},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1457","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1457","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1457","headline":"🤔 Зачем нужен ref? В React ref (сокращение от reference) используется для доступа к DOM-элементам или компоне…","articleBody":"🤔 Зачем нужен ref? \n\nВ React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React.\n\n🚩Основные случаи использования `ref`\n\nДоступ к DOM-элементам:\nИспользование в сторонних библиотеках:\nСохранение состояния вне дерева компонентов:\n\n🚩Примеры использования `ref`\n\nДоступ к DOM-элементам\nУстановка фокуса на элемент\nimport React, { useRef, useEffect } from 'react';\n\nfunction TextInputWithFocusButton() {\n const inputEl = useRef(null);\n\n const onButtonClick = () => {\n // Установить фокус на текстовое поле\n inputEl.current.focus();\n };\n\n return (\n
\n \n \n
\n );\n}\n\nexport default TextInputWithFocusButton;\n\nПолучение размеров элемента\nИзмерение элемента:\nimport React, { useRef, useEffect, useState } from 'react';\n\nfunction MeasureDiv() {\n const divRef = useRef(null);\n const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n\n useEffect(() => {\n if (divRef.current) {\n const { width, height } = divRef.current.getBoundingClientRect();\n setDimensions({ width, height });\n }\n }, []);\n\n return (\n
\n
\n Измеряемый элемент\n
\n

Ширина: {dimensions.width}px, Высота: {dimensions.height}px

\n
\n );\n}\n\nexport default MeasureDiv;\n\nИспользование в классовых компонентах\nДоступ к методам компонента:\nimport React, { Component } from 'react';\n\nclass CustomComponent extends Component {\n customMethod() {\n console.log('Метод компонента вызван');\n }\n\n render() {\n return
Custom Component
;\n }\n}\n\nclass ParentComponent extends Component {\n constructor(props) {\n super(props);\n this.customComponentRef = React.createRef();\n }\n\n handleClick = () => {\n this.customComponentRef.current.customMethod();\n };\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nexport default ParentComponent;\n\n🚩Важно помнить\n\nПрямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо.\nКогда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам.\nСостояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-05-03T09:05:24Z","dateModified":"2025-05-03T09:05:24Z","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":2699},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":30}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1456","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1456","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1456","headline":"Современная магистратура от Центрального университета Хочешь развиваться в сфере ИТ и получить фундаментальны…","articleBody":"Современная магистратура от Центрального университета\n\nХочешь развиваться в сфере ИТ и получить фундаментальные знания с практикой?\nПоступай в магистратуру Центрального университета!\n\n- 4 офлайн программы по востребованным направлениям ИТ\n- Онлайн-программа по машинному обучению\n- 300 мест с грантами до 1,2 млн руб.\n- Вечерние занятия и учеба по выходным — удобно совмещать с работой\n- Обучение по модели STEM-образования: на стыке науки, технологий и бизнеса\n- Возможность стажировок и трудоустройства в ведущих компаниях\n- Государственный диплом за 2 года\n\nМагистратура в Центральном университете — это современный подход к образованию, сильный преподавательский состав и актуальные кейсы от индустрии.\n\nОставляй заявку на грант уже сейчас! \n\nПодать заявку\n\n#реклама 16+\napply.centraluniversity.ru\nО рекламодателе","datePublished":"2025-05-02T20:19:09Z","dateModified":"2025-05-04T18:35:43Z","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":1833},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1455","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1455","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1455","headline":"🤔 Пример архитектурных решений для проектов на Node.js? - Layered architecture — с разделением на controller,…","articleBody":"🤔 Пример архитектурных решений для проектов на Node.js?\n\n- Layered architecture — с разделением на controller, service, repository;\n- Hexagonal architecture — с портами/адаптерами;\n- Microservices с gRPC/REST;\n- GraphQL gateway с Apollo;\n- Event-driven через Kafka/RabbitMQ;\n- Serverless архитектура (AWS Lambda, Firebase Functions).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-05-02T16:10:30Z","dateModified":"2025-05-02T16:10:30Z","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":2779},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":28}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1454","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1454","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1454","headline":"🤔 Чем em отличается от rem? 🟠Как работает `em`? em зависит от размера шрифта родителя (font-size). .parent {…","articleBody":"🤔 Чем em отличается от rem?\n\n🟠Как работает `em`? \nem зависит от размера шрифта родителя (font-size). \n.parent {\n font-size: 20px;\n}\n\n.child {\n font-size: 1.5em; /* 1.5 * 20px = 30px */\n}\n\nНо если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.\n.parent {\n font-size: 20px;\n}\n\n.child {\n font-size: 1.5em; /* 30px */\n}\n\n.grandchild {\n font-size: 2em; /* 2 * 30px = 60px */\n}\n\n🟠Как работает `rem`? \nrem всегда зависит от font-size у . \nhtml {\n font-size: 16px;\n}\n\n.container {\n font-size: 2rem; /* 2 * 16px = 32px */\n}\n\n🟠Когда использовать `em`, а когда `rem`? \nИспользуйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми \nИспользуйте em, если хотите, чтобы элементы зависели от родителя\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-05-02T09:05:23Z","dateModified":"2025-05-02T09:05:23Z","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":3057},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":19},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":26}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1453","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1453","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1453","headline":"Получи грант на обучение в Центральном университете Прояви себя, получи грант до 2,8 млн на обучение ИТ и биз…","articleBody":"Получи грант на обучение в Центральном университете\n\nПрояви себя, получи грант до 2,8 млн на обучение ИТ и бизнесу в вузе.\n\nДля школьников 10-х и 11-х классов, СПО. \n\nПодать заявку\n\n#реклама \napply.centraluniversity.ru\nО рекламодателе","datePublished":"2025-05-01T18:47:35Z","dateModified":"2025-05-03T16:55:05Z","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":1877}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1452","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1452","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1452","headline":"🤔 С помощью чего можно создать асинхронные callback? Асинхронные callback можно создать через: 1. Промисы — о…","articleBody":"🤔 С помощью чего можно создать асинхронные callback?\n\nАсинхронные callback можно создать через:\n1. Промисы — основной способ в современных браузерах:\n2. fetch('/api').then(response => callback(response));\n3. async/await — оборачиваем функцию в async, а внутри можно использовать await:\n4. const callback = async () => {\n5. const result = await fetch(...);\n6. // обработка\n7. };\n8. Таймеры и события — классические способы:\n9. setTimeout(() => callback(), 1000);\n10. element.addEventListener('click', () => callback());\nCallback вызывается по завершении асинхронной операции, и важно учитывать задержку выполнения (event loop).\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-05-01T16:10:32Z","dateModified":"2025-05-01T16:10:32Z","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":2740},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":22}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1451","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1451","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1451","headline":"Получайте больше продаж из поиска Яндекса Анализируйте метрики и получайте рекомендации для роста продаж в Ян…","articleBody":"Получайте больше продаж из поиска Яндекса\n\nАнализируйте метрики и получайте рекомендации для роста продаж в Яндекс Товарах ⚡ \n\nПопробовать\n\n#реклама \nmerchants.yandex.ru\nО рекламодателе","datePublished":"2025-05-01T12:10:37Z","dateModified":"2025-05-03T10:11:47Z","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":1768}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1450","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1450","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1450","headline":"🤔 Что такое относительная ссылка? Это ссылка, которая указывает путь к ресурсу относительно текущей страницы…","articleBody":"🤔 Что такое относительная ссылка?\n\nЭто ссылка, которая указывает путь к ресурсу относительно текущей страницы или корневого каталога веб-сайта, вместо указания полного пути (абсолютной ссылки).\n\nОтносительная ссылка\nКонтакты\n \nАбсолютная ссылка\nКонтакты\n \n🚩Типы относительных ссылок\n\n🟠Простые относительные ссылки \nУказывают путь к ресурсу, который находится в текущем каталоге или подкаталоге.\nСтраница \n\n🟠Ссылки с подъемом вверх по дереву файловой структуры\nИспользуются два символа точки (..) для перехода на уровень выше.\n \n Страница \n \n\n🟠Корневые ссылки\nУказывают путь относительно корня веб-сайта, начиная с /.\nФото \n\n🚩Зачем нужны относительные ссылки?\n\n🟠Удобство при локальной разработке\nОтносительные ссылки работают независимо от домена. Если вы разрабатываете сайт локально (например, через localhost), вам не нужно указывать абсолютный путь с доменом.\n\n🟠Проще поддерживать сайт\nЕсли домен или структура сайта меняется, относительные ссылки автоматически адаптируются, если структура каталогов остается прежней.\n\n🟠Экономия времени\nМеньше текста в коде, особенно если проект содержит множество ссылок.\n\n🚩Примеры использования относительных ссылок\n\nСсылка на файл в текущей папке\nФайл в текущей папке\n\nСсылка на файл в подкаталоге\nФайл в подкаталоге\n\nСсылка на файл в родительской папке\nФайл в родительской папке\n\nСсылка на файл относительно корня сайта\nФайл в папке от корня\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-05-01T09:05:32Z","dateModified":"2025-05-01T09:05:32Z","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":2735},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1449","url":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1449","mainEntityOfPage":"https://telemetr.io/ar/channels/1917151177-easy_javascript_ru/posts/1449","headline":"Бесплатный курс по дизайну в FIGMA Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По резуль…","articleBody":"Бесплатный курс по дизайну в FIGMA\n\nОнлайн-программа с наставником и чатом. \n\nОсторожно! 80% практики.\n\nПо результату обучения у вас будет портфолио из нескольких работ.\nСертификат о прохождении курса.\nВозможность пройти полное обучение и получить гарантированное трудоустройство!\n\nУчитесь дизайну у профессионалов. \n\nПереходи по кнопки: \"Узнать больше\" и начинай свое обучение.\nДоступ 0 руб. \n\nУзнать больше\n\n#реклама 16+\nyudaevschool24.online\nО рекламодателе","datePublished":"2025-04-30T20:08:58Z","dateModified":"2025-05-02T18:39:25Z","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":1745}]}}]}
Онлайн-магистратура "Науки о данных". Ваш рост в IT! ✅ТОП-1 тех.вуз РФ ✅Диплом магистра ✅Карьера в топ-компаниях ✅Запуск стар
Онлайн-магистратура "Науки о данных". Ваш рост в IT! ✅ТОП-1 тех.вуз РФ ✅Диплом магистра ✅Карьера в топ-компаниях ✅Запуск стартапа ✅+2 диплома ДПО Data Science, МФТИ — среда для профессионального и карьерного роста в IT! Записаться онлайн #реклама 16+ mipt.online О рекламодателе

🤔 Когда нужно использовать кнопки а когда ссылки? В веб-разработке часто возникает вопрос: использовать кнопку (<button>) или ссылку (<a>) для взаимодействий? Хотя они внешне могут выглядеть одинаково, у них разные назначения и поведение. 🟠Когда использовать `<button>`? Когда действие выполняется на странице без перехода на другую Когда нужна интерактивность (отправка формы, открытие модального окна, запуск скрипта) Отправка формы Открытие/закрытие модального окна Включение/выключение чего-то на странице Взаимодействие с JavaScript (AJAX-запросы, события)
<button onclick="alert('Нажато!')">Кликни</button>
Пример кнопки в форме:
<form>
  <input type="text" placeholder="Введите имя">
  <button type="submit">Отправить</button>
</form>
🟠Когда использовать `<a>`? Когда нужно перейти на другую страницу (или секцию сайта) Когда ссылка ведет на внешний или внутренний ресурс Навигация по сайту Переход на другую страницу Ссылки на соцсети, статьи, файлы
<a href="https://example.com">Перейти на сайт</a>
Ссылка внутри страницы (якорь)
<a href="#section">Перейти вниз</a>
<section id="section">Контент</section>
Открытие в новом окне
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Открыть в новой вкладке
</a>
🟠Ошибки и неправильное использование Ошибка: использовать <button> вместо ссылки
<button onclick="window.location.href='https://example.com'">Перейти</button>
Ставь 👍 и забирай 📚 Базу знаний

Почему вы не используете Битрикс24 CRM с AI? 1- не знал 2- забыл Рассказываем и напоминаем! ✅Битрикс24 CRM с AI помогает увел
+5
Почему вы не используете Битрикс24 CRM с AI? 1- не знал 2- забыл Рассказываем и напоминаем! ✅Битрикс24 CRM с AI помогает увеличивать продажи, работать с постоянными клиентами и сохранять все важные данные. AI-помощник CoPilot внутри сервиса расшифрует телефонные разговоры и автоматически заполнит карточки клиента в CRM. Битрикс24 можно использовать бесплатно для всех команд, независимо от их размера. ⚡Не тратьте время на рутину. Узнать больше #реклама 16+ bitrix24.ru О рекламодателе

🤔 Чем можно описывать контракты? - Интерфейсы и типы в TypeScript; - OpenAPI / Swagger — для API; - GraphQL-схемы; - JSON Schema — для валидации; - JSDoc — документация в JS; - gRPC-протоколы — строгий контракт между сервисами. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Высшее образование онлайн — поменяйте жизнь в 2025 году! ✅Набор в мае: от 6700 ₽/мес.* Московский технологический институт пр
Высшее образование онлайн — поменяйте жизнь в 2025 году! ✅Набор в мае: от 6700 ₽/мес.* Московский технологический институт предлагает: — Высшее образование в московском вузе без выезда на сессии — Полностью дистанционный онлайн-формат — Возможность обучаться дома, на работе, в путешествии — Диплом государственного образца — Более 60 направлений на выбор (IT, инженерные, экономические, педагогические, управленческие и другие) — 5 способов оплаты обучения — Поддержка персонального куратора: от поступления до получения диплома Узнать больше #реклама 16+ mti-vuz.ru О рекламодателе

🤔 Какое событие сработает при потери фокуса элементом формы? Событие, которое срабатывает при потере фокуса элементом формы, называется blur. 🚩Почему нужно событие `blur`? Событие blur используется для выполнения действий, когда пользователь перестает взаимодействовать с элементом ввода. Например: Проверка корректности данных (валидация) после того, как пользователь заполнил поле. Автоматическое сохранение введенных данных при переходе на другой элемент формы. Скрытие вспомогательной информации (например, подсказок) при уходе с элемента. blur помогает реализовать логику, связанную с завершением работы с конкретным элементом формы. 🚩Как оно работает? blur срабатывает, когда элемент теряет фокус, то есть пользователь: Кликнул на другой элемент. Нажал клавишу Tab, чтобы перейти на следующий элемент. В отличие от события focus, которое возникает при получении фокуса, blur позволяет отследить момент завершения работы с элементом. 🚩Как использовать `blur`? Событие можно обрабатывать с помощью: 1. HTML-атрибутов (например, onblur). 2. JavaScript через метод addEventListener. Пример на практике
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Пример blur</title>
  <script>
    function validateInput(event) {
      const input = event.target;
      if (input.value.trim() === "") {
        alert("Поле не должно быть пустым!");
      }
    }

    document.addEventListener("DOMContentLoaded", () => {
      const inputElement = document.getElementById("name");
      inputElement.addEventListener("blur", validateInput);
    });
  </script>
</head>
<body>
  <form>
    <label for="name">Введите имя:</label>
    <input type="text" id="name" name="name" />
    <button type="submit">Отправить</button>
  </form>
</body>
</html>
🚩Особенности события `blur` 🟠Не всплывает Событие blur не поддерживает всплытие (то есть не распространяется вверх по дереву DOM). Если нужно отслеживать потерю фокуса на уровне родительских элементов, используется делегирование с помощью события focusout.
   // Работает только для конкретного элемента
   element.addEventListener("blur", handler);

   // Для делегирования используют focusout
   parentElement.addEventListener("focusout", handler);
   
🟠Отличие от `change` Событие change срабатывает только после изменения значения элемента и потери фокуса, тогда как blur срабатывает в любом случае при потере фокуса, независимо от того, менялось ли значение. Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое CDN? CDN (Content Delivery Network) — это сеть распределённых серверов, которая хранит копии статических ресурсов (изображения, стили, скрипты) и предоставляет их пользователям с ближайшего к ним узла. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие преимущества у di? Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне. 🚩Почему DI полезен? 🟠Уменьшает связность кода (Loose Coupling) Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи.
class UserService {
  constructor() {
    this.db = new Database(); // Прямо создаем зависимость
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}
С DI (гибкость)
class UserService {
  constructor(db) {
    this.db = db; // DI передает зависимость извне
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

// Передаем нужную зависимость
const database = new Database();
const userService = new UserService(database);
🟠Улучшает тестируемость (Unit-тесты проще) С DI можно подменять зависимости на заглушки (mock, fake, stub).
const userService = new UserService(); // Всегда использует реальную Database
userService.getUser(1); // Как протестировать без реальной БД? 🤔
С DI (можно подменить зависимость)
class FakeDatabase {
  findUserById(id) {
    return { id, name: "Тестовый пользователь" };
  }
}

const fakeDb = new FakeDatabase();
const userService = new UserService(fakeDb);

console.log(userService.getUser(1)); // ✅ Тест без реальной БД
🟠Улучшает расширяемость (легко менять зависимости) Допустим, сначала использовали MySQLDatabase, но решили перейти на MongoDatabase.
class UserService {
  constructor() {
    this.db = new MySQLDatabase(); // Нужно менять здесь
  }
}
С DI (добавляем новую зависимость без изменения кода UserService)
const db = new MongoDatabase(); // Просто передаем другую зависимость
const userService = new UserService(db);
🟠Упрощает управление зависимостями (через DI-контейнеры) В крупных приложениях удобно использовать DI-контейнер (например, InversifyJS для JavaScript/TypeScript).
import "reflect-metadata";
import { Container, injectable, inject } from "inversify";

@injectable()
class Database {
  findUserById(id) {
    return { id, name: "База данных" };
  }
}

@injectable()
class UserService {
  constructor(@inject(Database) db) {
    this.db = db;
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

// Настраиваем DI-контейнер
const container = new Container();
container.bind(Database).toSelf();
container.bind(UserService).toSelf();

// Получаем объект с нужными зависимостями
const userService = container.get(UserService);
console.log(userService.getUser(1));
Ставь 👍 и забирай 📚 Базу знаний

Спецпредложение по SEO-продвижению до конца апреля! За 7 дней покажем результат по продвижению вашего сайта, если не получится - вернем предоплату, всё прописано в договоре. 👍Что мы считаем результатом? Продвижение более 30% согласованных с вами коммерческих запросов по вашей нише в топ10 поиска Яндекса всего за 1 неделю работы! 💰Предоплата 25% от стоимости за 1-й месяц продвижения. Подлежит возврату если мы не достигнем результата, описанного выше. ⚡Берем в работу не все сайты, только после предварительного анализа, который проводим бесплатно! ✅Интересно? Отправляйте нам ваш сайт и узнайте сможем ли мы взять его в работу на таких условиях: 📞 Звоните: +7 (499) 433-08-64 Записаться онлайн #реклама mrqz.me О рекламодателе

🤔 Для чего нужно сравнивать ссылки при мемоизации? Мемоизация (React.memo, useMemo, useCallback) основана на сравнении входных данных. Для объектов и функций сравнение происходит по ссылке. Если ссылка на объект или функцию изменилась — React считает, что данные изменились. Даже если внутренности одинаковые. Поэтому важно сохранять одну и ту же ссылку, если значение не изменилось, иначе мемоизация не сработает и будет лишняя перерисовка. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Дарим подписку на Яндекс Музыку Ответьте на 1 вопрос и Яндекс Музыка ваша для вас и 3-х ваших близких. Кинопоиск и Яндекс Книги тоже в подписке. Попробуйте бесплатно❤️ Попробовать #реклама 18+ music.yandex.ru О рекламодателе Реклама на Яндексе

🤔 Зачем нужен ref? В React ref (сокращение от reference) используется для доступа к DOM-элементам или компонентам напрямую. Он позволяет взаимодействовать с элементами, которые были созданы в процессе рендеринга, предоставляя механизм для манипуляции с ними, получения их размеров, положения или вызова методов у компонент. Это особенно полезно в ситуациях, когда необходимо выполнить операции, которые не могут быть выполнены исключительно через декларативный подход React. 🚩Основные случаи использования `ref` Доступ к DOM-элементам: Использование в сторонних библиотеках: Сохранение состояния вне дерева компонентов: 🚩Примеры использования `ref` Доступ к DOM-элементам Установка фокуса на элемент
import React, { useRef, useEffect } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);

  const onButtonClick = () => {
    // Установить фокус на текстовое поле
    inputEl.current.focus();
  };

  return (
    <div>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Установить фокус</button>
    </div>
  );
}

export default TextInputWithFocusButton;
Получение размеров элемента Измерение элемента:
import React, { useRef, useEffect, useState } from 'react';

function MeasureDiv() {
  const divRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (divRef.current) {
      const { width, height } = divRef.current.getBoundingClientRect();
      setDimensions({ width, height });
    }
  }, []);

  return (
    <div>
      <div ref={divRef} style={{ width: '100px', height: '100px', backgroundColor: 'lightblue' }}>
        Измеряемый элемент
      </div>
      <p>Ширина: {dimensions.width}px, Высота: {dimensions.height}px</p>
    </div>
  );
}

export default MeasureDiv;
Использование в классовых компонентах Доступ к методам компонента:
import React, { Component } from 'react';

class CustomComponent extends Component {
  customMethod() {
    console.log('Метод компонента вызван');
  }

  render() {
    return <div>Custom Component</div>;
  }
}

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.customComponentRef = React.createRef();
  }

  handleClick = () => {
    this.customComponentRef.current.customMethod();
  };

  render() {
    return (
      <div>
        <CustomComponent ref={this.customComponentRef} />
        <button onClick={this.handleClick}>Вызвать метод компонента</button>
      </div>
    );
  }
}

export default ParentComponent;
🚩Важно помнить Прямое управление DOM может нарушить декларативный подход React, поэтому его следует использовать только тогда, когда это действительно необходимо. Когда необходимо использовать сторонние библиотеки, которые требуют прямого доступа к DOM-элементам. Состояние приложения и его логика должны по возможности управляться через состояния и пропсы React. ref следует использовать для случаев, которые не могут быть решены этим способом. Ставь 👍 и забирай 📚 Базу знаний

Современная магистратура от Центрального университета Хочешь развиваться в сфере ИТ и получить фундаментальные знания с практ
Современная магистратура от Центрального университета Хочешь развиваться в сфере ИТ и получить фундаментальные знания с практикой? Поступай в магистратуру Центрального университета! - 4 офлайн программы по востребованным направлениям ИТ - Онлайн-программа по машинному обучению - 300 мест с грантами до 1,2 млн руб. - Вечерние занятия и учеба по выходным — удобно совмещать с работой - Обучение по модели STEM-образования: на стыке науки, технологий и бизнеса - Возможность стажировок и трудоустройства в ведущих компаниях - Государственный диплом за 2 года Магистратура в Центральном университете — это современный подход к образованию, сильный преподавательский состав и актуальные кейсы от индустрии. Оставляй заявку на грант уже сейчас! Подать заявку #реклама 16+ apply.centraluniversity.ru О рекламодателе

🤔 Пример архитектурных решений для проектов на Node.js? - Layered architecture — с разделением на controller, service, repository; - Hexagonal architecture — с портами/адаптерами; - Microservices с gRPC/REST; - GraphQL gateway с Apollo; - Event-driven через Kafka/RabbitMQ; - Serverless архитектура (AWS Lambda, Firebase Functions). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Чем em отличается от rem? 🟠Как работает `em`? em зависит от размера шрифта родителя (font-size).
.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 1.5 * 20px = 30px */
}
Но если .child вложен в .parent, то он наследует font-size, а его em вычисляется относительно родителя.
.parent {
  font-size: 20px;
}

.child {
  font-size: 1.5em; /* 30px */
}

.grandchild {
  font-size: 2em; /* 2 * 30px = 60px */
}
🟠Как работает `rem`? rem всегда зависит от font-size у <html>.
html {
  font-size: 16px;
}

.container {
  font-size: 2rem; /* 2 * 16px = 32px */
}
🟠Когда использовать `em`, а когда `rem`? Используйте rem, если нужно, чтобы шрифты и размеры были предсказуемыми Используйте em, если хотите, чтобы элементы зависели от родителя Ставь 👍 и забирай 📚 Базу знаний

Получи грант на обучение в Центральном университете Прояви себя, получи грант до 2,8 млн на обучение ИТ и бизнесу в вузе. Для
Получи грант на обучение в Центральном университете Прояви себя, получи грант до 2,8 млн на обучение ИТ и бизнесу в вузе. Для школьников 10-х и 11-х классов, СПО. Подать заявку #реклама apply.centraluniversity.ru О рекламодателе

🤔 С помощью чего можно создать асинхронные callback? Асинхронные callback можно создать через: 1. Промисы — основной способ в современных браузерах: 2. fetch('/api').then(response => callback(response)); 3. async/await — оборачиваем функцию в async, а внутри можно использовать await: 4. const callback = async () => { 5. const result = await fetch(...); 6. // обработка 7. }; 8. Таймеры и события — классические способы: 9. setTimeout(() => callback(), 1000); 10. element.addEventListener('click', () => callback()); Callback вызывается по завершении асинхронной операции, и важно учитывать задержку выполнения (event loop). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Получайте больше продаж из поиска Яндекса Анализируйте метрики и получайте рекомендации для роста продаж в Яндекс Товарах ⚡ П
Получайте больше продаж из поиска Яндекса Анализируйте метрики и получайте рекомендации для роста продаж в Яндекс Товарах ⚡ Попробовать #реклама merchants.yandex.ru О рекламодателе

🤔 Что такое относительная ссылка? Это ссылка, которая указывает путь к ресурсу относительно текущей страницы или корневого каталога веб-сайта, вместо указания полного пути (абсолютной ссылки). Относительная ссылка
<a href="../contact.html">Контакты</a>
Абсолютная ссылка
<a href="https://example.com/contact.html">Контакты</a>
🚩Типы относительных ссылок 🟠Простые относительные ссылки Указывают путь к ресурсу, который находится в текущем каталоге или подкаталоге.
<a href="page.html">Страница</a> <!-- Ресурс в текущем каталоге -->
🟠Ссылки с подъемом вверх по дереву файловой структуры Используются два символа точки (..) для перехода на уровень выше.
   <a href="../folder/page.html">Страница</a> <!-- Подъем на один уровень вверх -->
   
🟠Корневые ссылки Указывают путь относительно корня веб-сайта, начиная с /.
<a href="/images/photo.jpg">Фото</a> <!-- Начало пути от корня сайта -->
🚩Зачем нужны относительные ссылки? 🟠Удобство при локальной разработке Относительные ссылки работают независимо от домена. Если вы разрабатываете сайт локально (например, через localhost), вам не нужно указывать абсолютный путь с доменом. 🟠Проще поддерживать сайт Если домен или структура сайта меняется, относительные ссылки автоматически адаптируются, если структура каталогов остается прежней. 🟠Экономия времени Меньше текста в коде, особенно если проект содержит множество ссылок. 🚩Примеры использования относительных ссылок Ссылка на файл в текущей папке
<a href="file.html">Файл в текущей папке</a>
Ссылка на файл в подкаталоге
<a href="subfolder/file.html">Файл в подкаталоге</a>
Ссылка на файл в родительской папке
<a href="../file.html">Файл в родительской папке</a>
Ссылка на файл относительно корня сайта
<a href="/folder/file.html">Файл в папке от корня</a>
Ставь 👍 и забирай 📚 Базу знаний

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