Frontend | Вопросы собесов
Open in Telegram
Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads
Show more
Network:📈 Analytical overview of Telegram channel Frontend | Вопросы собесов
Channel Frontend | Вопросы собесов (@easy_javascript_ru) in the Russian language segment is an active participant. Currently, the community unites 17 400 subscribers, ranking 7 467 in the Technologies & Applications category and 37 733 in the Russia region.
📊 Audience metrics and dynamics
Since its creation on невідомо, the project has demonstrated rapid growth, gathering an audience of 17 400 subscribers.
According to the latest data from 30 October, 2026, the channel demonstrates stable activity. Although there has been a change in the number of participants by -247 over the last 30 days and by -22 over the last 24 hours, overall reach remains high.
- Verification status: Not verified
- Engagement rate (ER): The average audience engagement rate is 6.93%. Within the first 24 hours after publication, content typically collects 4.37% reactions from the total number of subscribers.
- Post reach: On average, each post receives 1 206 views. Within the first day, a publication typically gains 761 views.
- Reactions and interaction: The audience actively supports content: the average number of reactions per post is 4.
- Thematic interests: Content is focused on key topics such as ставь, браузер, html, border, flex.
📝 Description and content policy
The author describes the resource as a platform for expressing subjective opinions:
“Сайт: https://easyoffer.ru/
Все каналы: t.me/+xGeAw6ckJ4liYzQy
Контакт для рекламы: @sendme_ads”
Thanks to the high frequency of updates (latest data received on 31 October, 2026), the channel maintains relevance and a high level of publication reach. Analytics show that the audience actively interacts with content, making it an important point of influence in the Technologies & Applications category.
17 400
Subscribers
-2224 hours
-837 days
-24730 days
Posts Archive
\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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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/en/channels/1917151177-easy_javascript_ru/posts/2131","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2131","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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/en/channels/1917151177-easy_javascript_ru/posts/2130","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2130","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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/en/channels/1917151177-easy_javascript_ru/posts/2129","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2129","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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/en/channels/1917151177-easy_javascript_ru/posts/2128","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2128","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1468},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2127","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2127","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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/en/channels/1917151177-easy_javascript_ru/posts/2126","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2126","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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/en/channels/1917151177-easy_javascript_ru/posts/2125","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2125","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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/en/channels/1917151177-easy_javascript_ru/posts/2124","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2124","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1649},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2123","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2123","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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/en/channels/1917151177-easy_javascript_ru/posts/2122","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2122","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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/en/channels/1917151177-easy_javascript_ru/posts/2121","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2121","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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/en/channels/1917151177-easy_javascript_ru/posts/2120","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2120","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1476},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2119","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2119","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1398},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2118","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2118","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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/en/channels/1917151177-easy_javascript_ru/posts/2117","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2117","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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/en/channels/1917151177-easy_javascript_ru/posts/2116","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/2116","mainEntityOfPage":"https://telemetr.io/en/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/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":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 делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса.
Ставь 👍 и забирай 📚 Базу знаний