Frontend | Вопросы собесов
Kanalga Telegram’da o‘tish
Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads
Ko'proq ko'rsatish
Tarmoq:📈 Telegram kanali Frontend | Вопросы собесов analitikasi
Frontend | Вопросы собесов (@easy_javascript_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 17 400 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 467-o'rinni va Rossiya mintaqasida 37 733-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 17 400 obunachiga ega bo‘ldi.
30 Oktabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -247 ga, so‘nggi 24 soatda esa -22 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 6.93% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.37% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 206 marta ko‘riladi; birinchi sutkada odatda 761 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 4 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent ставь, браузер, html, border, flex kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Сайт: https://easyoffer.ru/
Все каналы: t.me/+xGeAw6ckJ4liYzQy
Контакт для рекламы: @sendme_ads”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 31 Oktabr, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
17 400
Obunachilar
-2224 soatlar
-837 kun
-24730 kun
Postlar arxiv
\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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2131","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2131","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2130","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2130","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2129","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2129","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2128","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2128","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2127","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2127","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2126","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2126","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2125","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2125","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2124","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2124","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2123","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2123","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2122","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2122","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2121","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2121","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2120","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2120","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2119","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2119","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2118","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2118","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2117","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2117","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru/posts/2116","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2116","mainEntityOfPage":"https://telemetr.io/uz/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/uz/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uz/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 делает анимацию плавной и приятной для глаз, улучшая общее восприятие интерфейса.
Ставь 👍 и забирай 📚 Базу знаний