不要被骗子欺骗！Telemetrio 会找到并标记这些频道 👉 如果想查看标记，请订阅

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

前往频道在 Telegram

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

显示更多

📈 Telegram 频道 Frontend | Вопросы собесов 的分析概览

频道 Frontend | Вопросы собесов (@easy_javascript_ru) 俄语语言赛道中的是活跃参与者。目前社区聚集了 17 400 名订阅者，在 技术与应用 类别中位列第 7 467，并在 俄罗斯 地区排名第 37 733 位。

📊 受众指标与增长动态

自 невідомо 创建以来，项目保持高速增长，吸引了 17 400 名订阅者。

根据 30 十月, 2026 的最新数据，频道保持稳定运转。过去 30 天订阅人数变化为 -247，过去 24 小时变化为 -22，整体触达仍然可观。

认证状态： 未认证
互动率 (ER)： 平均受众互动率为 6.93%。内容发布后 24 小时内通常能获得 4.37% 的反应，占订阅者总量。
帖子覆盖： 每篇帖子平均可获得 1 206 次浏览，首日通常累积 761 次浏览。
互动与反馈： 受众积极参与，单帖平均反应数为 4。
主题关注点： 内容集中在 ставь, браузер, html, border, flex 等核心主题上。

📝 描述与内容策略

作者将该频道定位为表达主观观点的平台：
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads”

凭借高频更新（最新数据采集于 31 十月, 2026），频道始终保持新鲜度与高覆盖。分析显示受众积极互动，使其成为 技术与应用 类别中的关键影响点。

17 400

订阅者

-2224 小时

-837 天

-24730 天

1 206

帖子浏览量

~ 76124 小时

~ 86548 小时

6.93%

参与率

~ 2

每日帖子数

Ads index

beta

帖子存档

\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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2131","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2131","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2130","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2130","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2129","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2129","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2128","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2128","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2127","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2127","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2126","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2126","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2125","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2125","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2124","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2124","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2123","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2123","mainEntityOfPage":"https://telemetr.io/ch/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

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

\n \n

\n));\n\nexport default Counter;\n\n🟠Компьютед-свойства (`computed`)\nЭто вычисляемые значения, которые пересчитываются только при изменении зависимостей. \nclass Store {\n count = 2;\n\n constructor() {\n makeAutoObservable(this);\n }\n\n get double() {\n return this.count * 2;\n }\n}\n\nconst store = new Store();\nconsole.log(store.double); // 4\nstore.count = 5;\nconsole.log(store.double); // 10 (пересчиталось автоматически)\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-11-12T09:05:31Z","dateModified":"2025-11-12T09:05:31Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2122","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2122","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2121","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2121","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2120","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2120","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2119","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2119","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2118","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2118","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2117","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2117","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru/posts/2116","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2116","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2116","headline":"🤔 Как увеличить в размере при наведении элемент, не сдвигая соседние? Чтобы увеличить элемент в размере при н…","articleBody":"🤔 Как увеличить в размере при наведении элемент, не сдвигая соседние?\n\nЧтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.\n\n\n\n \n \n Увеличение при наведении\n \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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/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}]}}]}

17 400

🤔 Как можно гибко изменять размеры flex-элементов? С помощью: - flex-grow — распределение свободного пространства; - flex-shrink — сжатие при нехватке места; - flex-basis — базовая ширина перед распределением; - или flex — сокращённой записи всех трёх параметров. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 400

🤔 Почему у нас в css нет селектора на родителе? В CSS нет селектора родителя, потому что это нарушило бы оптимизацию и производительность рендеринга. 🚩Как работают селекторы в CSS? Обычные селекторы идут от родителя к дочерним элементам.

.parent .child {
  color: red;
}

Что было бы с селектором родителя?

.child:has-parent(.parent) { 
  color: red;
}

🚩Использовать `:has()` (в современных браузерах) В CSS4 появился :has(), который позволяет изменять родителя, если в нём есть определённый потомок.

.parent:has(.child) {
  border: 2px solid red;
}

🚩Использовать Flexbox/Grid вместо селектора родителя Иногда можно поменять структуру HTML и стилизацию, чтобы избежать проблемы.

.parent {
  display: flex;
  gap: 10px;
}

🚩Использовать JavaScript Если нужно изменить родителя динамически, можно использовать JavaScript.

document.querySelectorAll(".child").forEach(child => {
  child.parentElement.classList.add("has-child");
});

.has-child {
  border: 2px solid blue;
}

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

17 400

🤔 Какие использовал шаблоны в HTML? - layout шаблоны — шапка, футер, контейнер; - формы — шаблонные блоки для ввода; - таблицы, карточки — повторяющиеся элементы; - Использование <template> — для динамической вставки или фреймворков (например, Vue). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 400

🤔 Является ли, 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>

🚩Какие события есть в Drag and Drop? Основные события: 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. Ставь 👍 и забирай 📚 Базу знаний

17 400

🤔 Чем отличается блочный элемент от инлайнового? - Блочный (block) — занимает всю ширину родителя, начинается с новой строки. - Инлайновый (inline) — занимает только нужную ширину, располагается в строке с другими. Примеры: <div> — блочный, <span> — инлайновый. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 400

"Ты че, дурак?" – базовая реакция сеньора на тех, кто покупает IT курсы Дело в том, что онлайн школы создают инкубаторных айтишников, которые в реальных условиях попросту зависнут. Трушные ребята учатся на жизненных каналах для айтишников. Вот топ-5 от тимлида из Сбера: ⚙️ Технолоджия – для тех, кто хочет быть в курсе новостей в айти 🧠 Ai-чница – способы превратить нейросети в заработок $$$ 💻 ИИ тебя заменит! – тенденции айти рынка в связке с нейросетями 4️⃣ Войти в IT – тонны бесплатного обучения для прогеров 😄 IT индус – сборник айти мемов

17 400

🤔 Как изменить стили кнопок с атрибутом 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 Этот селектор выбирает все элементы, которые находятся в состоянии disabled.

button:disabled {
    background-color: gray;
    color: white;
    border: 1px solid #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

🚩Полные примеры С HTML

<!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>

С CSS

/* Стили для активных кнопок */
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;
}

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

17 400

Айтишники, это вам — в телеграм есть комьюнити по каждому направлению в IT Там есть буквально всё: чаты для общения, тонны материала(книги, курсы, ресурсы и гайды), свежие новости и конечно же мемы Выбирайте своё направление: 💩 Frontend 🐍 Python 🐧 Linux 👩‍💻 С/С++ 👩‍💻 C# 🤔 Хакинг & ИБ 📱 GitHub 🖥 SQL 👩‍💻 Сисадмин 🤟 DevOps ⚙️ Backend 🖥 Data Science 🧑‍💻 Java 🐞 Тестирование 🖥 PM / PdM 👩‍💻 GameDev 🧑‍💻 Golang 🤵‍♂️ IT-Митапы 🧑‍💻 PHP 💻 WebDev 🖥 Моб. Dev 🖥Анали.(SA&BA) 👩‍💻 Дизайн 🖥 Нейросети 💛 1C 🤓 Книги IT ➡️ Сохраняйте в закладки

17 400

🤔 Как создать поток Web Worker в JavaScript? Создаётся через объект Worker, указывая путь к JS-файлу. Этот файл будет исполняться в отдельном потоке и обмениваться данными с основным с помощью сообщений. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 400

🤔 Как мы будем через 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()` — лучший способ в чистом JS Если нужно более гибкое управление анимацией, используем 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>

🟠Библиотеки (GSAP, Anime.js, Velocity.js) Если нужно делать мощные анимации с минимальным кодом, лучше использовать библиотеку.

<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>

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

17 400

🤔 Какая ключевая особенность React-рендера? React использует виртуальный DOM, который позволяет эффективно сравнивать (diff) изменения и применять минимальное количество реальных DOM-операций, повышая производительность интерфейса. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 400

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

17 400

🤔 Расскажи про mobx MobX — это библиотека для управления состоянием в JavaScript-приложениях, особенно в React. Она основана на реактивности и позволяет автоматически отслеживать изменения данных, обновляя интерфейс только там, где это необходимо. 🚩Основные принципы MobX 🟠Модели данных – `observable` (наблюдаемые) MobX делает объекты реактивными, автоматически отслеживая их изменения.

import { makeAutoObservable } from "mobx";

class Store {
  count = 0;

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

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

const store = new Store();

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

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

🟠Компоненты подписываются на изменения – `observer` Чтобы React-компонент обновлялся при изменении данных, его нужно обернуть в observer (из mobx-react-lite).

import React from "react";
import { observer } from "mobx-react-lite";

const Counter = observer(({ store }) => (
  <div>
    <p>Счетчик: {store.count}</p>
    <button onClick={() => store.increment()}>+</button>
  </div>
));

export default Counter;

🟠Компьютед-свойства (`computed`) Это вычисляемые значения, которые пересчитываются только при изменении зависимостей.

class Store {
  count = 2;

  constructor() {
    makeAutoObservable(this);
  }

  get double() {
    return this.count * 2;
  }
}

const store = new Store();
console.log(store.double); // 4
store.count = 5;
console.log(store.double); // 10 (пересчиталось автоматически)

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

17 400

🤔 Использование хука useEffect в React - useEffect позволяет выполнять побочные эффекты в функциональных компонентах React. - Хук может заменить методы жизненного цикла классовых компонентов для выполнения кода после каждого рендеринга. - Принимает функцию эффекта и массив зависимостей, указывая, при изменении каких пропсов или состояний должен выполняться эффект. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 400

🤔 Как удалить все элементы с массива? Чтобы удалить все элементы из массива в 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` Метод 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); // []

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

17 400

🚀 Вебыч — канал для тех, кто живёт фронтендом. 💡 Здесь не будет скучных туториалов и типовых “как сделать кнопку”. Вместо этого — живой, умный контент про: ✨ Глубокие аспекты JavaScript О которых почти никто не рассказывает, но которые важно понимать. 🎨 Неожиданные трюки в CSS Те, что помогают писать чище, гибче и элегантнее. 🏗 Архитектуру и дизайн-системы Практичные подходы без академической скуки. 🧠 Советы по собеседованиям Как не только ответить правильно, но и мыслить как инженер. 🌍 Философию веб-разработки Без пафоса — просто, по делу и с душой. 🧩 «Вебыч» — это не просто Telegram-канал, а целая экосистема: справочник, библиотеки и идеи, выросшие из практики. ── Подпишись, если хочешь развиваться во фронтенде — осознанно, красиво и без воды. 🔥 👉 https://t.me/webeach_ru

17 400

Кулинарные тренды начинаются здесь! Food.ru — это медиа, где тренды в еде и стиле жизни создаете вы Мы объединяем гурманов и тех, кто только начинает свой путь в кулинарии. Наша платформа поможет вам: • Удивить близких вкусными блюдами • Позаботиться о здоровье семьи • Следить за КБЖУ легко и удобно • Открывать новые рецепты каждый день Присоединяйтесь к сообществу, где: ✨ Вы можете делиться своими кулинарными находками ✨ Находите единомышленников и друзей по вкусу ✨ Открываете новые идеи — от полезных рецептов до стильных решений для дома Создавайте тренды вместе с Food.ru!❤️ Узнать больше #реклама food.ru О рекламодателе

17 400

🤔 Как создать пользовательскую директиву? Создаётся через Vue.directive() (в Vue 2) или локально в directives: {} (в обоих версиях). Директива имеет жизненные хуки, например: - bind (Vue 2) или beforeMount (Vue 3) - update - unmounted Можно применять к элементу через v-my-directive. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

17 400

Repost from Идущий к IT

🔥 Записал видос "Как за 3 минуты настроить Автоотклики на вакансии HeadHunter" больше не придется заниматься этой унылой рутиной 📺 Видео: https://youtu.be/G_FOwEGPwlw

17 400

🤔 Как увеличить в размере при наведении элемент, не сдвигая соседние? Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать 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 делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса. Ставь 👍 и забирай 📚 Базу знаний