Frontend | Вопросы собесов
رفتن به کانال در Telegram
Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads
نمایش بیشتر
شبکه:📈 تحلیل کانال تلگرام Frontend | Вопросы собесов
کانال Frontend | Вопросы собесов (@easy_javascript_ru) در بخش زبانی روسی بازیگری فعال است. در حال حاضر جامعه شامل 17 400 مشترک است و جایگاه 7 467 را در دسته فناوری و برنامه‌ها و رتبه 37 733 را در منطقه روسيا دارد.
📊 شاخص‌های مخاطب و پویایی
از زمان ایجاد در невідомо، پروژه رشد سریعی داشته و 17 400 مشترک جذب کرده است.
بر اساس آخرین داده‌ها در تاریخ 30 اکتبر, 2026، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر -247 و در ۲۴ ساعت گذشته برابر -22 بوده و همچنان دسترسی گسترده‌ای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 6.93% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 4.37% واکنش نسبت به کل مشترکان کسب می‌کند.
- دسترسی پست‌ها: هر پست به طور میانگین 1 206 بازدید دریافت می‌کند. در اولین روز معمولاً 761 بازدید جمع‌آوری می‌شود.
- واکنش‌ها و تعامل: مخاطبان به‌طور فعال حمایت می‌کنند؛ میانگین واکنش به هر پست 4 است.
- علایق موضوعی: محتوا بر موضوعات کلیدی مانند ставь, браузер, html, border, flex تمرکز دارد.
📝 توضیح و سیاست محتوایی
نویسنده این فضا را محل بیان دیدگاه‌های شخصی توصیف می‌کند:
“Сайт: https://easyoffer.ru/
Все каналы: t.me/+xGeAw6ckJ4liYzQy
Контакт для рекламы: @sendme_ads”
به لطف به‌روزرسانی‌های پرتکرار (آخرین داده در تاریخ 31 اکتبر, 2026)، کانال همواره به‌روز و دارای دسترسی بالاست. تحلیل‌ها نشان می‌دهد مخاطبان به‌طور فعال با محتوا تعامل دارند و آن را به نقطه اثرگذاری مهم در دسته فناوری و برنامه‌ها تبدیل کرده‌اند.
17 400
مشترکین
-2224 ساعت
-837 روز
-24730 روز
آرشیو پست ها
\n\n🚩Какие события есть в Drag and Drop? \n\nОсновные события: \ndragstart — когда начали тянуть элемент. \ndrag — когда элемент двигается (срабатывает много раз). \ndragenter — когда курсор заходит в зону сброса. \ndragover — когда элемент находится над зоной (нужно preventDefault()). \ndragleave — когда курсор покидает зону сброса. \ndrop — когда элемент отпущен в зоне сброса. \ndragend — когда перетаскивание завершено (даже если не сбросили). \n\n🚩Где используется Drag and Drop? \n\n- Перетаскивание файлов в (например, загрузка изображений). \n- Канбан-доски, как в Trello. \n- Онлайн-редакторы, как Figma. \n- Игры, где можно перемещать предметы. \n\n🚩Можно ли сделать Drag and Drop без HTML5 API? \n\nДа, можно использовать другие методы: \nЧерез события мыши (mousedown, mousemove, mouseup). \nЧерез CSS position: absolute и transform. \nЧерез JS-библиотеки (Sortable.js, React DnD, Draggable.js). \nНапример, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-11-15T09:05:34Z","dateModified":"2025-11-15T09:05:34Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":2609},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":18},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":24}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2131","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2131","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2131","headline":"🤔 Чем отличается блочный элемент от инлайнового? - Блочный (block) — занимает всю ширину родителя, начинается…","articleBody":"🤔 Чем отличается блочный элемент от инлайнового?\n\n- Блочный (block) — занимает всю ширину родителя, начинается с новой строки.\n- Инлайновый (inline) — занимает только нужную ширину, располагается в строке с другими.\nПримеры:\n
— блочный, — инлайновый.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-11-14T16:10:31Z","dateModified":"2025-11-14T16:10:31Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":2321},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2130","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2130","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2130","headline":"\"Ты че, дурак?\" – базовая реакция сеньора на тех, кто покупает IT курсы Дело в том, что онлайн школы создают…","articleBody":"\"Ты че, дурак?\" – базовая реакция сеньора на тех, кто покупает IT курсы\n\nДело в том, что онлайн школы создают инкубаторных айтишников, которые в реальных условиях попросту зависнут.\n\nТрушные ребята учатся на жизненных каналах для айтишников. Вот топ-5 от тимлида из Сбера:\n\n⚙️ Технолоджия – для тех, кто хочет быть в курсе новостей в айти\n\n🧠 Ai-чница – способы превратить нейросети в заработок $$$\n\n💻 ИИ тебя заменит! – тенденции айти рынка в связке с нейросетями\n\n4️⃣ Войти в IT – тонны бесплатного обучения для прогеров\n\n😄 IT индус – сборник айти мемов","datePublished":"2025-11-14T14:07:21Z","dateModified":"2025-11-16T14:07:14Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":1626},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2129","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2129","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2129","headline":"🤔 Как изменить стили кнопок с атрибутом disabled? C атрибутом disabled, используя селекторы атрибутов. Селект…","articleBody":"🤔 Как изменить стили кнопок с атрибутом disabled? \n\nC атрибутом disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.\n\n🚩Пример использования\n\n🟠Селектора [disabled]\nЭтот селектор выбирает все элементы, у которых присутствует атрибут disabled.\nbutton[disabled] {\n background-color: gray;\n color: white;\n border: 1px solid #ccc;\n cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */\n opacity: 0.6; /* Уменьшает непрозрачность */\n}\n\n🟠Псевдокласса :disabled\nЭтот селектор выбирает все элементы, которые находятся в состоянии disabled.\nbutton:disabled {\n background-color: gray;\n color: white;\n border: 1px solid #ccc;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n🚩Полные примеры\n\nС HTML\n\n\n\n \n \n Disabled Button Styling \n \n\n\n \n \n\n\n\nС CSS\n/* Стили для активных кнопок */\nbutton {\n background-color: blue;\n color: white;\n border: 1px solid #000;\n padding: 10px 20px;\n cursor: pointer;\n}\n\n/* Стили для кнопок с атрибутом disabled */\nbutton[disabled] {\n background-color: gray;\n color: white;\n border: 1px solid #ccc;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Альтернативный способ с использованием псевдокласса :disabled */\nbutton:disabled {\n background-color: gray;\n color: white;\n border: 1px solid #ccc;\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n🟠Комбинированный подход\nВы можете комбинировать селекторы атрибутов с другими селекторами для более точного применения стилей.\n/* Стили для кнопок с классом .special, которые имеют атрибут disabled */\nbutton.special[disabled] {\n background-color: darkgray;\n color: black;\n border: 1px dashed #999;\n cursor: not-allowed;\n opacity: 0.7;\n}\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-11-14T09:05:32Z","dateModified":"2025-11-14T09:05:32Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":2292},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":10}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2128","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2128","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2128","headline":"Айтишники, это вам — в телеграм есть комьюнити по каждому направлению в IT Там есть буквально всё: чаты для о…","articleBody":"Айтишники, это вам — в телеграм есть комьюнити по каждому направлению в IT\n\nТам есть буквально всё: чаты для общения, тонны материала(книги, курсы, ресурсы и гайды), свежие новости и конечно же мемы\n\nВыбирайте своё направление:\n\n💩 Frontend 🐍 Python\n\n🐧 Linux 👩💻 С/С++ \n\n👩💻 C# 🤔 Хакинг & ИБ\n\n📱 GitHub 🖥 SQL \n\n👩💻 Сисадмин 🤟 DevOps\n\n⚙️ Backend 🖥 Data Science\n\n🧑💻 Java 🐞 Тестирование\n\n🖥 PM / PdM 👩💻 GameDev\n\n🧑💻 Golang 🤵♂️ IT-Митапы\n\n🧑💻 PHP 💻 WebDev\n\n🖥 Моб. Dev 🖥Анали.(SA&BA)\n\n👩💻 Дизайн 🖥 Нейросети\n\n💛 1C 🤓 Книги IT\n\n➡️ Сохраняйте в закладки","datePublished":"2025-11-14T07:00:20Z","dateModified":"2025-11-16T07:00:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":1468},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2127","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2127","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2127","headline":"🤔 Как создать поток Web Worker в JavaScript? Создаётся через объект Worker, указывая путь к JS-файлу. Этот фа…","articleBody":"🤔 Как создать поток Web Worker в JavaScript?\n\nСоздаётся через объект Worker, указывая путь к JS-файлу. Этот файл будет исполняться в отдельном потоке и обмениваться данными с основным с помощью сообщений.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-11-13T16:10:31Z","dateModified":"2025-11-13T16:10:31Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":2360},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2126","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2126","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2126","headline":"🤔 Как мы будем через js анимировать что либо? В JavaScript есть три основных способа создания анимаций: CSS-а…","articleBody":"🤔 Как мы будем через js анимировать что либо?\n\nВ JavaScript есть три основных способа создания анимаций: \n\nCSS-анимации (transition, @keyframes) + изменение классов через JS\nМетод requestAnimationFrame() \nИспользование библиотек (GSAP, Anime.js, Velocity.js) \n\n🟠CSS-анимации + управление через JS \nСамый простой способ — использовать CSS-анимации, а в JS только добавлять или убирать классы. \n\n\n\n\n\n\n\n🟠`requestAnimationFrame()` — лучший способ в чистом JS \nЕсли нужно более гибкое управление анимацией, используем requestAnimationFrame(). \n\n\n\n\n\n\n\n🟠Библиотеки (GSAP, Anime.js, Velocity.js)\nЕсли нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку. \n\n\n\n\n\n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-11-13T09:05:33Z","dateModified":"2025-11-13T09:05:33Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":2571},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":20}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2125","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2125","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2125","headline":"🤔 Какая ключевая особенность React-рендера? React использует виртуальный DOM, который позволяет эффективно ср…","articleBody":"🤔 Какая ключевая особенность React-рендера?\n\nReact использует виртуальный DOM, который позволяет эффективно сравнивать (diff) изменения и применять минимальное количество реальных DOM-операций, повышая производительность интерфейса.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-11-12T16:10:29Z","dateModified":"2025-11-12T16:10:29Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":2248},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2124","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2124","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2124","headline":"Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Д…","articleBody":"Запустите рекламу в телеграм-каналах с Яндекс Директом\n\nПерфоманс-реклама теперь в телеграм-каналах ⚡\n\nЯндекс Директ знает, как привлечь целевую аудиторию 💰👌 \n\nПопробовать\n\n#реклама \nyandex.ru\nО рекламодателе","datePublished":"2025-11-12T10:15:15Z","dateModified":"2025-11-14T08:18:16Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":1649},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2123","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2123","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2123","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 Увеличение при наведении \n \n\n\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":"2025-11-12T09:05:31Z","dateModified":"2025-11-12T09:05:31Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":2265},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2122","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2122","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2122","headline":"🤔 Использование хука useEffect в React - useEffect позволяет выполнять побочные эффекты в функциональных комп…","articleBody":"🤔 Использование хука useEffect в React\n\n- useEffect позволяет выполнять побочные эффекты в функциональных компонентах React.\n- Хук может заменить методы жизненного цикла классовых компонентов для выполнения кода после каждого рендеринга.\n- Принимает функцию эффекта и массив зависимостей, указывая, при изменении каких пропсов или состояний должен выполняться эффект.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-11-11T16:10:30Z","dateModified":"2025-11-11T16:10:30Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":2301},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":19},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2121","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2121","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2121","headline":"🤔 Как удалить все элементы с массива? Чтобы удалить все элементы из массива в JavaScript, можно использовать…","articleBody":"🤔 Как удалить все элементы с массива?\n\nЧтобы удалить все элементы из массива в JavaScript, можно использовать несколько способов, в зависимости от ваших целей. \n\n🟠Установка длины массива в 0\nJavaScript позволяет вручную изменять длину массива. Если установить длину массива равной 0, все его элементы будут удалены.\nlet arr = [1, 2, 3, 4, 5];\narr.length = 0;\n\nconsole.log(arr); // []\n\n🟠Присвоение пустого массива\nМожно просто присвоить переменной новый пустой массив.\nlet arr = [1, 2, 3, 4, 5];\narr = [];\n\nconsole.log(arr); // []\n\nПример\nlet arr = [1, 2, 3, 4, 5];\nlet reference = arr;\n\narr = [];\nconsole.log(arr); // []\nconsole.log(reference); // [1, 2, 3, 4, 5]\n\n🟠Использование метода `splice`\nМетод splice позволяет удалять элементы из массива. Если указать удаление всех элементов, массив станет пустым.\nlet arr = [1, 2, 3, 4, 5];\narr.splice(0, arr.length);\n\nconsole.log(arr); // []\n\n🟠Использование цикла (редко применяется)\nХотя это не самый эффективный способ, можно очистить массив с помощью цикла.\nlet arr = [1, 2, 3, 4, 5];\nwhile (arr.length > 0) {\n arr.pop(); // Удаляем последний элемент\n}\n\nconsole.log(arr); // []\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-11-11T09:05:31Z","dateModified":"2025-11-11T09:05:31Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":2383},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2120","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2120","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2120","headline":"🚀 Вебыч — канал для тех, кто живёт фронтендом. 💡 Здесь не будет скучных туториалов и типовых “как сделать кно…","articleBody":"🚀 Вебыч — канал для тех, кто живёт фронтендом.\n\n💡 Здесь не будет скучных туториалов и типовых “как сделать кнопку”.\n\nВместо этого — живой, умный контент про:\n\n✨ Глубокие аспекты JavaScript \nО которых почти никто не рассказывает, но которые важно понимать.\n\n🎨 Неожиданные трюки в CSS \nТе, что помогают писать чище, гибче и элегантнее.\n\n🏗 Архитектуру и дизайн-системы \nПрактичные подходы без академической скуки.\n\n🧠 Советы по собеседованиям \nКак не только ответить правильно, но и мыслить как инженер.\n\n🌍 Философию веб-разработки \nБез пафоса — просто, по делу и с душой.\n\n🧩 «Вебыч» — это не просто Telegram-канал, а целая экосистема: \nсправочник, библиотеки и идеи, выросшие из практики.\n\n──\n\nПодпишись, если хочешь развиваться во фронтенде — осознанно, красиво и без воды.\n \n🔥 👉 https://t.me/webeach_ru","datePublished":"2025-11-11T07:00:13Z","dateModified":"2025-11-13T07:00:12Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":1476},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2119","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2119","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2119","headline":"Кулинарные тренды начинаются здесь! Food.ru — это медиа, где тренды в еде и стиле жизни создаете вы Мы объеди…","articleBody":"Кулинарные тренды начинаются здесь!\n\nFood.ru — это медиа, где тренды в еде и стиле жизни создаете вы\n\nМы объединяем гурманов и тех, кто только начинает свой путь в кулинарии. Наша платформа поможет вам:\n\n• Удивить близких вкусными блюдами\n• Позаботиться о здоровье семьи\n• Следить за КБЖУ легко и удобно\n• Открывать новые рецепты каждый день\n\nПрисоединяйтесь к сообществу, где:\n\n✨ Вы можете делиться своими кулинарными находками\n✨ Находите единомышленников и друзей по вкусу\n✨ Открываете новые идеи — от полезных рецептов до стильных решений для дома\n\nСоздавайте тренды вместе с Food.ru!❤️ \n\nУзнать больше\n\n#реклама \nfood.ru\nО рекламодателе","datePublished":"2025-11-10T18:19:04Z","dateModified":"2025-11-12T16:48:04Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":1398},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2118","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2118","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2118","headline":"🤔 Как создать пользовательскую директиву? Создаётся через Vue.directive() (в Vue 2) или локально в directives…","articleBody":"🤔 Как создать пользовательскую директиву?\n\nСоздаётся через Vue.directive() (в Vue 2) или локально в directives: {} (в обоих версиях).\nДиректива имеет жизненные хуки, например:\n- bind (Vue 2) или beforeMount (Vue 3)\n- update\n- unmounted\nМожно применять к элементу через v-my-directive.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-11-10T16:10:28Z","dateModified":"2025-11-10T16:10:28Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":2232},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2117","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2117","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2117","headline":"🔥 Записал видос \"Как за 3 минуты настроить Автоотклики на вакансии HeadHunter\" больше не придется заниматься…","articleBody":"🔥 Записал видос \"Как за 3 минуты настроить Автоотклики на вакансии HeadHunter\" больше не придется заниматься этой унылой рутиной\n\n📺 Видео: https://youtu.be/G_FOwEGPwlw","datePublished":"2025-11-10T09:29:01Z","dateModified":"2025-11-10T09:29:01Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":1875},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":19}],"sharedContent":{"@type":"SocialMediaPosting","datePublished":"2025-11-10T09:28:46Z"}}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2116","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2116","mainEntityOfPage":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru/posts/2116","headline":"🤔 Как увеличить в размере при наведении элемент, не сдвигая соседние? Чтобы увеличить элемент в размере при н…","articleBody":"🤔 Как увеличить в размере при наведении элемент, не сдвигая соседние?\n\nЧтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.\n\n\n\n \n \n Счетчик: {store.count}
\n \n\n
\n\n\n\n🚩Почему это важно?\n\n🟠Эффективность пользовательского интерфейса\nУвеличение элементов при наведении может служить для привлечения внимания пользователя или для улучшения взаимодействия, например, при работе с интерактивными элементами.\n\n🟠Стабильность макета\nПрименение трансформации с transform: scale позволяет изменять размер элемента без изменения его фактического размера и расположения в документе, что сохраняет стабильность макета и не нарушает расположение соседних элементов.\n\n🟠Плавные анимации\nИспользование transition делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-11-10T09:05:31Z","dateModified":"2025-11-10T09:05:31Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/fa/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":2270},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":16}]}}]}1
\n 2
\n 3
\n 
🤔 Как можно гибко изменять размеры flex-элементов?
С помощью:
- flex-grow — распределение свободного пространства;
- flex-shrink — сжатие при нехватке места;
- flex-basis — базовая ширина перед распределением;
- или flex — сокращённой записи всех трёх параметров.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Почему у нас в css нет селектора на родителе?
В CSS нет селектора родителя, потому что это нарушило бы оптимизацию и производительность рендеринга.
🚩Как работают селекторы в CSS?
Обычные селекторы идут от родителя к дочерним элементам.
.parent .child {
color: red;
}.child:has-parent(.parent) {
color: red;
}:has(), который позволяет изменять родителя, если в нём есть определённый потомок.
.parent:has(.child) {
border: 2px solid red;
}.parent {
display: flex;
gap: 10px;
}document.querySelectorAll(".child").forEach(child => {
child.parentElement.classList.add("has-child");
});.has-child {
border: 2px solid blue;
}🤔 Какие использовал шаблоны в HTML?
- layout шаблоны — шапка, футер, контейнер;
- формы — шаблонные блоки для ввода;
- таблицы, карточки — повторяющиеся элементы;
- Использование <template> — для динамической вставки или фреймворков (например, Vue).
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Является ли, drag and drop частью спецификации?
Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек.
🚩Как работает Drag and Drop API?
В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут
draggable="true". Затем срабатывают специальные события, такие как dragstart, drop, dragover и другие.
<div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>
<script>
const dragItem = document.getElementById("drag-item");
const dropZone = document.getElementById("drop-zone");
dragItem.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text/plain", "Данные элемента");
});
dropZone.addEventListener("dragover", (event) => {
event.preventDefault(); // Нужно, чтобы разрешить сброс
});
dropZone.addEventListener("drop", (event) => {
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
alert("Элемент сброшен: " + data);
});
</script>dragstart — когда начали тянуть элемент.
drag — когда элемент двигается (срабатывает много раз).
dragenter — когда курсор заходит в зону сброса.
dragover — когда элемент находится над зоной (нужно preventDefault()).
dragleave — когда курсор покидает зону сброса.
drop — когда элемент отпущен в зоне сброса.
dragend — когда перетаскивание завершено (даже если не сбросили).
🚩Где используется Drag and Drop?
- Перетаскивание файлов в <input type="file"> (например, загрузка изображений).
- Канбан-доски, как в Trello.
- Онлайн-редакторы, как Figma.
- Игры, где можно перемещать предметы.
🚩Можно ли сделать Drag and Drop без HTML5 API?
Да, можно использовать другие методы:
Через события мыши (mousedown, mousemove, mouseup).
Через CSS position: absolute и transform.
Через JS-библиотеки (Sortable.js, React DnD, Draggable.js).
Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend.
Ставь 👍 и забирай 📚 Базу знаний🤔 Чем отличается блочный элемент от инлайнового?
- Блочный (block) — занимает всю ширину родителя, начинается с новой строки.
- Инлайновый (inline) — занимает только нужную ширину, располагается в строке с другими.
Примеры:
<div> — блочный, <span> — инлайновый.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
"Ты че, дурак?" – базовая реакция сеньора на тех, кто покупает IT курсы
Дело в том, что онлайн школы создают инкубаторных айтишников, которые в реальных условиях попросту зависнут.
Трушные ребята учатся на жизненных каналах для айтишников. Вот топ-5 от тимлида из Сбера:
⚙️ Технолоджия – для тех, кто хочет быть в курсе новостей в айти
🧠 Ai-чница – способы превратить нейросети в заработок $$$
💻 ИИ тебя заменит! – тенденции айти рынка в связке с нейросетями
4️⃣ Войти в IT – тонны бесплатного обучения для прогеров
😄 IT индус – сборник айти мемов
🤔 Как изменить стили кнопок с атрибутом disabled?
C атрибутом
disabled, используя селекторы атрибутов. Селектор [disabled] позволяет выбрать все элементы, которые имеют этот атрибут, а селектор :disabled позволяет выбрать все элементы, которые находятся в состоянии disabled.
🚩Пример использования
🟠Селектора [disabled]
Этот селектор выбирает все элементы, у которых присутствует атрибут disabled.
button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed; /* Указывает, что элемент недоступен для взаимодействия */
opacity: 0.6; /* Уменьшает непрозрачность */
}disabled.
button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disabled Button Styling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button>Active Button</button>
<button disabled>Disabled Button</button>
</body>
</html>/* Стили для активных кнопок */
button {
background-color: blue;
color: white;
border: 1px solid #000;
padding: 10px 20px;
cursor: pointer;
}
/* Стили для кнопок с атрибутом disabled */
button[disabled] {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}
/* Альтернативный способ с использованием псевдокласса :disabled */
button:disabled {
background-color: gray;
color: white;
border: 1px solid #ccc;
cursor: not-allowed;
opacity: 0.6;
}/* Стили для кнопок с классом .special, которые имеют атрибут disabled */
button.special[disabled] {
background-color: darkgray;
color: black;
border: 1px dashed #999;
cursor: not-allowed;
opacity: 0.7;
}Айтишники, это вам — в телеграм есть комьюнити по каждому направлению в IT
Там есть буквально всё: чаты для общения, тонны материала(книги, курсы, ресурсы и гайды), свежие новости и конечно же мемы
Выбирайте своё направление:
💩 Frontend 🐍 Python
🐧 Linux 👩💻 С/С++
👩💻 C# 🤔 Хакинг & ИБ
📱 GitHub 🖥 SQL
👩💻 Сисадмин 🤟 DevOps
⚙️ Backend 🖥 Data Science
🧑💻 Java 🐞 Тестирование
🖥 PM / PdM 👩💻 GameDev
🧑💻 Golang 🤵♂️ IT-Митапы
🧑💻 PHP 💻 WebDev
🖥 Моб. Dev 🖥Анали.(SA&BA)
👩💻 Дизайн 🖥 Нейросети
💛 1C 🤓 Книги IT
➡️ Сохраняйте в закладки
🤔 Как создать поток Web Worker в JavaScript?
Создаётся через объект Worker, указывая путь к JS-файлу. Этот файл будет исполняться в отдельном потоке и обмениваться данными с основным с помощью сообщений.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Как мы будем через js анимировать что либо?
В JavaScript есть три основных способа создания анимаций:
CSS-анимации (
transition, @keyframes) + изменение классов через JS
Метод requestAnimationFrame()
Использование библиотек (GSAP, Anime.js, Velocity.js)
🟠CSS-анимации + управление через JS
Самый простой способ — использовать CSS-анимации, а в JS только добавлять или убирать классы.
<button onclick="toggleBox()">Анимировать</button>
<div id="box"></div>
<style>
#box {
width: 100px;
height: 100px;
background: red;
transition: transform 0.5s ease-in-out;
}
.move {
transform: translateX(200px);
}
</style>
<script>
function toggleBox() {
document.getElementById("box").classList.toggle("move");
}
</script>requestAnimationFrame().
<button onclick="startAnimation()">Старт</button>
<div id="box"></div>
<style>
#box {
width: 50px;
height: 50px;
background: blue;
position: absolute;
}
</style>
<script>
let position = 0;
let animationId;
function animate() {
position += 5; // Двигаем на 5px за кадр
document.getElementById("box").style.transform = `translateX(${position}px)`;
if (position < 300) { // Останавливаем, когда достигнет 300px
animationId = requestAnimationFrame(animate);
}
}
function startAnimation() {
cancelAnimationFrame(animationId); // Останавливаем предыдущую анимацию
position = 0;
animate();
}
</script><button onclick="animateBox()">Анимировать</button>
<div id="box"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script>
function animateBox() {
gsap.to("#box", { x: 300, rotation: 360, duration: 2, ease: "elastic.out(1,0.3)" });
}
</script>🤔 Какая ключевая особенность React-рендера?
React использует виртуальный DOM, который позволяет эффективно сравнивать (diff) изменения и применять минимальное количество реальных DOM-операций, повышая производительность интерфейса.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Запустите рекламу в телеграм-каналах с Яндекс Директом
Перфоманс-реклама теперь в телеграм-каналах ⚡
Яндекс Директ знает, как привлечь целевую аудиторию 💰👌
Попробовать
#реклама
yandex.ru
О рекламодателе
🤔 Расскажи про 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();store.increment(); // Увеличит count и автоматически обновит UIobserver (из 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;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 (пересчиталось автоматически)🤔 Использование хука useEffect в React
- useEffect позволяет выполнять побочные эффекты в функциональных компонентах React.
- Хук может заменить методы жизненного цикла классовых компонентов для выполнения кода после каждого рендеринга.
- Принимает функцию эффекта и массив зависимостей, указывая, при изменении каких пропсов или состояний должен выполняться эффект.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🤔 Как удалить все элементы с массива?
Чтобы удалить все элементы из массива в JavaScript, можно использовать несколько способов, в зависимости от ваших целей.
🟠Установка длины массива в 0
JavaScript позволяет вручную изменять длину массива. Если установить длину массива равной 0, все его элементы будут удалены.
let arr = [1, 2, 3, 4, 5];
arr.length = 0;
console.log(arr); // []let arr = [1, 2, 3, 4, 5];
arr = [];
console.log(arr); // []let arr = [1, 2, 3, 4, 5];
let reference = arr;
arr = [];
console.log(arr); // []
console.log(reference); // [1, 2, 3, 4, 5]splice позволяет удалять элементы из массива. Если указать удаление всех элементов, массив станет пустым.
let arr = [1, 2, 3, 4, 5];
arr.splice(0, arr.length);
console.log(arr); // []let arr = [1, 2, 3, 4, 5];
while (arr.length > 0) {
arr.pop(); // Удаляем последний элемент
}
console.log(arr); // []🚀 Вебыч — канал для тех, кто живёт фронтендом.
💡 Здесь не будет скучных туториалов и типовых “как сделать кнопку”.
Вместо этого — живой, умный контент про:
✨ Глубокие аспекты JavaScript
О которых почти никто не рассказывает, но которые важно понимать.
🎨 Неожиданные трюки в CSS
Те, что помогают писать чище, гибче и элегантнее.
🏗 Архитектуру и дизайн-системы
Практичные подходы без академической скуки.
🧠 Советы по собеседованиям
Как не только ответить правильно, но и мыслить как инженер.
🌍 Философию веб-разработки
Без пафоса — просто, по делу и с душой.
🧩 «Вебыч» — это не просто Telegram-канал, а целая экосистема:
справочник, библиотеки и идеи, выросшие из практики.
──
Подпишись, если хочешь развиваться во фронтенде — осознанно, красиво и без воды.
🔥 👉 https://t.me/webeach_ru
Кулинарные тренды начинаются здесь!
Food.ru — это медиа, где тренды в еде и стиле жизни создаете вы
Мы объединяем гурманов и тех, кто только начинает свой путь в кулинарии. Наша платформа поможет вам:
• Удивить близких вкусными блюдами
• Позаботиться о здоровье семьи
• Следить за КБЖУ легко и удобно
• Открывать новые рецепты каждый день
Присоединяйтесь к сообществу, где:
✨ Вы можете делиться своими кулинарными находками
✨ Находите единомышленников и друзей по вкусу
✨ Открываете новые идеи — от полезных рецептов до стильных решений для дома
Создавайте тренды вместе с Food.ru!❤️
Узнать больше
#реклама
food.ru
О рекламодателе
🤔 Как создать пользовательскую директиву?
Создаётся через Vue.directive() (в Vue 2) или локально в directives: {} (в обоих версиях).
Директива имеет жизненные хуки, например:
- bind (Vue 2) или beforeMount (Vue 3)
- update
- unmounted
Можно применять к элементу через v-my-directive.
Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Repost from Идущий к IT
🔥 Записал видос "Как за 3 минуты настроить Автоотклики на вакансии HeadHunter" больше не придется заниматься этой унылой рутиной
📺 Видео: https://youtu.be/G_FOwEGPwlw
🤔 Как увеличить в размере при наведении элемент, не сдвигая соседние?
Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство
transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Увеличение при наведении</title>
<style>
.container {
display: flex;
gap: 10px;
}
.item {
width: 100px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
transition: transform 0.3s;
}
.item:hover {
transform: scale(1.2); /* Увеличение размера при наведении */
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>transform: scale позволяет изменять размер элемента без изменения его фактического размера и расположения в документе, что сохраняет стабильность макета и не нарушает расположение соседних элементов.
🟠Плавные анимации
Использование transition делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса.
Ставь 👍 и забирай 📚 Базу знаний