\n\nВывод в консоль при создании компонента\nМиксин: created\nКомпонент: created\n\nVue 3: хуки вызываются так же \nЕсли использовать setup(), он выполнится после хуков миксина \nimport { onMounted } from \"vue\";\nexport default {\n mixins: [myMixin],\n setup() {\n console.log(\"🚀 setup()\");\n },\n mounted() {\n console.log(\"📦 Компонент: mounted\");\n }\n};\n\nВывод в консоль\nМиксин: mounted\nsetup()\nКомпонент: mounted\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-07-15T09:05:39Z","dateModified":"2025-07-15T09:05:39Z","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":3038},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1736","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1736","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1736","headline":"Виртуальная инфраструктура с GPU Протестируйте новый сервис «Виртуальная инфраструктура с GPU». ⚡Первыми на р…","articleBody":"Виртуальная инфраструктура с GPU\n\nПротестируйте новый сервис «Виртуальная инфраструктура с GPU».\n\n⚡Первыми на рынке запускаем это решение с инновационными NVIDIA H200.\n\nВ составе «Публичного облака» услуга доступна в двух вариантах: \n✅ виртуальные машины; \n✅ Linux-контейнеры с GPU на базе NVIDIA H200.\n\nХотите протестировать флагманскую инфраструктуру?\nОставьте заявку на сайте или напишите нам на почту. \n\nПопробовать\n\n#реклама 16+\ncloud.rt.ru\nО рекламодателе","datePublished":"2025-07-14T19:53:21Z","dateModified":"2025-07-16T18:21:37Z","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":1845},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1735","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1735","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1735","headline":"🤔 Какие числовые значения имеют true/false? - true → 1 - false → 0 Это часто используется при приведении типо…","articleBody":"🤔 Какие числовые значения имеют true/false?\n\n- true → 1\n- false → 0\nЭто часто используется при приведении типов, в логике, арифметике или при передаче булевых значений в числовой контекст.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-07-14T16:10:27Z","dateModified":"2025-07-14T16:10:27Z","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":2760},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1734","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1734","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1734","headline":"👩‍💻 Ищем JavaScript разработчиков. Релокейт, удалёнка, платим много! Специально для Вас, собираем лучшие вака…","articleBody":"👩‍💻 Ищем JavaScript разработчиков. Релокейт, удалёнка, платим много!\n\nСпециально для Вас, собираем лучшие вакансии по JavaScript с прямыми контактами в Telegram:\n\n👩‍💻 Fronted Jobs - для фронтендеров\n\n👩‍💻 Node.Js Jobs - для бекендеров\n\nПодпишись чтобы не упустить свой шанс получить лучший оффер!","datePublished":"2025-07-14T14:00:13Z","dateModified":"2025-07-16T14:00: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":1965},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1733","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1733","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1733","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-07-14T09:05:38Z","dateModified":"2025-07-14T09:05:38Z","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":3044},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1732","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1732","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1732","headline":"🤔 Как оптимизировать рендер в компонентах? Чтобы избежать лишнего рендера и повысить производительность: - Ис…","articleBody":"🤔 Как оптимизировать рендер в компонентах?\n\nЧтобы избежать лишнего рендера и повысить производительность:\n- Использовать React.memo() — мемоизация компонента на основе пропсов.\n- Применять useMemo() — мемоизация вычисляемых значений.\n- Использовать useCallback() — мемоизация колбэков, чтобы не пересоздавать функции.\n- Разбивать большие компоненты на мелкие.\n- Следить за key в списках (в map), чтобы избежать полного пересоздания.\n- Избегать анонимных функций в render, если они передаются в потомки.\n- Использовать shouldComponentUpdate в классовых компонентах или React.PureComponent.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-07-13T16:10:27Z","dateModified":"2025-07-13T16:10:27Z","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":2797},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":27}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1731","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1731","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1731","headline":"🤔 Что происходит в момент запроса в браузере? Когда пользователь вводит URL в адресную строку браузера и нажи…","articleBody":"🤔 Что происходит в момент запроса в браузере?\n\nКогда пользователь вводит URL в адресную строку браузера и нажимает Enter, происходит ряд шагов для получения и отображения запрашиваемой веб-страницы. Этот процесс включает взаимодействие различных компонентов сети и веб-технологий. \n\n🟠Ввод URL и начало запроса\nПользователь вводит URL в адресную строку браузера.\nБраузер проверяет кэш браузера для определения, есть ли сохраненная копия запрашиваемого ресурса. Если ресурс найден в кэше и он актуален, страница загружается из кэша, минуя сетевые запросы.\n\n🟠DNS-разрешение\nЕсли ресурс не найден в кэше, браузер выполняет запрос к DNS-серверу для преобразования доменного имени (например, www.example.com) в IP-адрес сервера.\n\n🟠Установление TCP-соединения\nПосле получения IP-адреса браузер устанавливает TCP-соединение с сервером. Этот процесс включает в себя трехэтапное рукопожатие:\nБраузер отправляет SYN-пакет серверу.\nСервер отвечает SYN-ACK пакетом.\nБраузер отправляет ACK-пакет, подтверждая установление соединения.\n\n🟠HTTPS и SSL/TLS\nЕсли URL использует HTTPS, происходит дополнительный этап установки защищенного соединения с использованием SSL/TLS:\nБраузер и сервер обмениваются сертификатами и выполняют шифрование данных.\n\n🟠Отправка HTTP-запроса\nБраузер отправляет HTTP-запрос на сервер. Например, для получения главной страницы сайта может быть отправлен следующий запрос:\n GET / HTTP/1.1\n Host: www.example.com\n\n🟠Обработка запроса на сервере\nСервер принимает запрос, обрабатывает его, генерирует ответ и отправляет его обратно клиенту. Сервер может выполнять различные задачи, такие как доступ к базе данных, обработка логики приложения и рендеринг страниц.\n\n🟠Получение и обработка HTTP-ответа\nБраузер получает HTTP-ответ от сервера. Ответ включает в себя статусный код, заголовки и тело (содержимое) ответа. Пример HTTP-ответа:\n HTTP/1.1 200 OK\n Content-Type: text/html\n Content-Length: 1234\n\n \n \n \n \n \n \n

Добро пожаловать!

\n \n \n \n\n🟠Парсинг и рендеринг страницы\nБраузер начинает парсинг HTML-документа. Этот процесс включает построение DOM (Document Object Model) — структуры дерева, представляющей элементы страницы.\nВ процессе парсинга HTML браузер может обнаруживать ссылки на другие ресурсы, такие как CSS, JavaScript, изображения и шрифты, и отправлять дополнительные HTTP-запросы для их загрузки.\n\n🟠Выполнение JavaScript\nПосле парсинга HTML и CSS браузер начинает выполнение встроенных и внешних JavaScript-скриптов. JavaScript может изменять DOM и CSSOM (CSS Object Model), что приводит к изменениям в отображении страницы.\nJavaScript также может отправлять асинхронные запросы (AJAX) для динамической загрузки данных и обновления страницы без перезагрузки.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-07-13T09:05:40Z","dateModified":"2025-07-13T09:05:40Z","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":2788},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":25},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":71}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1730","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1730","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1730","headline":"🤔 Что такое SPA? SPA (Single Page Application) — это приложение, в котором вся логика и интерфейс загружаются…","articleBody":"🤔 Что такое SPA?\n\nSPA (Single Page Application) — это приложение, в котором вся логика и интерфейс загружаются на одной странице, а переходы и обновления происходят без перезагрузки. Данные подгружаются через API-запросы.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-07-12T16:10:26Z","dateModified":"2025-07-12T16:10:26Z","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":2808},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":30},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1729","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1729","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1729","headline":"🤔 Какие знаешь подходы по написанию css? Существует несколько методологий и подходов к написанию CSS, которые…","articleBody":"🤔 Какие знаешь подходы по написанию css?\n\nСуществует несколько методологий и подходов к написанию CSS, которые помогают структурировать код, сделать его более читаемым, масштабируемым и поддерживаемым. Рассмотрим основные. \n\n🟠Классический (обычный) CSS \nСтандартное написание CSS без структурных ограничений. \n.button {\n background-color: blue;\n color: white;\n padding: 10px;\n}\n\n🟠BEM (Block Element Modifier) \nBEM — один из самых популярных методологий. Он помогает избежать конфликтов классов и улучшает читаемость кода. \n- Block (Блок) — независимый компонент (.button). \n- Element (Элемент) — часть блока (.button__icon). \n- Modifier (Модификатор) — изменение блока (.button--primary). \n\n Нажми меня\n\n.button {\n background-color: gray;\n color: white;\n padding: 10px;\n}\n\n.button--primary {\n background-color: blue;\n}\n\n.button__icon {\n margin-right: 5px;\n}\n\n🟠OOCSS (Object-Oriented CSS) \nOOCSS (Объектно-ориентированный CSS) предлагает разбивать стили на структуру и внешний вид, чтобы повторно использовать код. \n.card {\n border: 1px solid #ccc;\n padding: 10px;\n}\n\n.card--dark {\n background-color: black;\n color: white;\n}\n\n🟠CSS-in-JS (Styled Components, Emotion) \nЭтот подход популярен в React и других фреймворках, где стили пишутся внутри JavaScript. \nimport styled from 'styled-components';\n\nconst Button = styled.button`\n background-color: blue;\n color: white;\n padding: 10px;\n`;\n\nexport default function App() {\n return Нажми меня;\n}\n\n🟠Utility-First (Tailwind CSS) \nВ этом подходе используются готовые утилитарные классы для быстрого стилизации. \nКнопка\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-07-12T09:05:38Z","dateModified":"2025-07-12T09:05:38Z","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":3112},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":18},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":21}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1728","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1728","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1728","headline":"🤔 Зачем нам разбивать приложение отдельно на backend и frontend? Для масштабируемости, разделения ответственн…","articleBody":"🤔 Зачем нам разбивать приложение отдельно на backend и frontend?\n\nДля масштабируемости, разделения ответственности, независимой разработки и деплоя. Это упрощает работу в команде и позволяет фронтенду использовать разные технологии (React, Vue), а бэкенду — работать через API.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-07-11T16:10:25Z","dateModified":"2025-07-11T16:10:25Z","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":2739},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1727","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1727","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1727","headline":"🤔 Как работают плавающие элементы (floats)? float – это CSS-свойство, которое позволяет \"выплывать\" элементу…","articleBody":"🤔 Как работают плавающие элементы (floats)?\n\nfloat – это CSS-свойство, которое позволяет \"выплывать\" элементу из обычного потока документа и обтекаться другими элементами (например, текстом). \n\nОсновные значения float \n\n

Это текст, который будет обтекать картинку.

\n.float-img {\n float: left;\n margin-right: 10px;\n}\n\n🟠Почему родитель \"схлопывается\" при `float`? \nКогда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока. \n\n.container {\n background: lightgray;\n}\n.float-img {\n float: left;\n}\n\nРешение 1: overflow: hidden; \n.container {\n overflow: hidden; /* Контейнер теперь учитывает float-элементы */\n}\n\nРешение 2: clearfix (старый способ) \n.container::after {\n content: \"\";\n display: block;\n clear: both;\n}\n\n🟠Как остановить обтекание (`clear`)? \nЧтобы отменить обтекание, используется clear. \n\n

Этот текст обтекает картинку.

\n\n

Этот текст пойдёт на новую строку.

\n.float-img {\n float: left;\n margin-right: 10px;\n}\n.clear {\n clear: both;\n}\n\n🚩Почему `float` устарел и что использовать вместо него? \nРаньше float использовали для создания колонок и сеток, но сегодня его заменили: \nFlexbox (display: flex;) – лучше для адаптивных макетов. \nCSS Grid (display: grid;) – мощный инструмент для сложных сеток. \n.container {\n display: flex;\n align-items: center;\n}\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-07-11T09:05:37Z","dateModified":"2025-07-11T09:05:37Z","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":3020},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":14}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1726","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1726","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1726","headline":"🤔 Кому видны данные, хранящиеся в localStorage, sessionStorage и cookies? - localStorage и sessionStorage: —…","articleBody":"🤔 Кому видны данные, хранящиеся в localStorage, sessionStorage и cookies?\n\n- localStorage и sessionStorage:\n— доступны только в браузере, на текущем домене и не отправляются на сервер.\n— localStorage сохраняется между сессиями, sessionStorage — только на время вкладки.\n- cookies:\n— могут быть доступны как JavaScript, так и отправляться на сервер при каждом запросе (если не указано HttpOnly).\n— используются для авторизации, трекинга, хранения предпочтений.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-07-10T16:10:26Z","dateModified":"2025-07-10T16:10:26Z","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":2583},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":26},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1725","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1725","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1725","headline":"🤔 Как реализовать адаптивную верстку? Адаптивная верстка (responsive design) – это метод создания веб-страниц…","articleBody":"🤔 Как реализовать адаптивную верстку?\n\nАдаптивная верстка (responsive design) – это метод создания веб-страниц, которые корректно отображаются на разных устройствах (телефон, планшет, ноутбук, ПК). \n\n🟠Гибкие сетки (Flexbox, Grid, `max-width`) \nИспользование max-width вместо width\n.container {\n width: 100%; /* Контейнер занимает всю ширину */\n max-width: 1200px; /* Но не больше 1200px */\n margin: auto; /* Центрирование */\n}\n\nИспользование Flexbox\n.container {\n display: flex;\n flex-wrap: wrap; /* Перенос элементов, если не влезают */\n justify-content: space-between;\n}\n\n.item {\n width: 48%; /* Два элемента в ряд */\n}\n\n@media (max-width: 768px) {\n .item {\n width: 100%; /* Один элемент в ряд на маленьких экранах */\n }\n}\n\nИспользование CSS Grid\n.container {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 20px;\n}\n\n🟠Медиа-запросы (`@media`) \nИзменяют стили в зависимости от ширины экрана. \n/* Десктоп (от 1024px) */\nbody {\n font-size: 18px;\n}\n\n/* Планшеты (768px – 1023px) */\n@media (max-width: 1023px) {\n body {\n font-size: 16px;\n }\n}\n\n/* Телефоны (до 767px) */\n@media (max-width: 767px) {\n body {\n font-size: 14px;\n }\n}\n\n🟠Адаптивные изображения (`srcset`, `sizes`) \nПозволяет загружать разные изображения в зависимости от устройства. \n\n\n🟠Viewport (`meta viewport`) \nУправляет масштабированием на мобильных устройствах. \n\n\n🟠CSS-фреймворки (Bootstrap, Tailwind) \nФреймворки содержат готовые адаптивные классы. \nBootstrap (грид-система)\n\n\nTailwind CSS\n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-07-10T09:05:37Z","dateModified":"2025-07-10T09:05:37Z","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":2564},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":19},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":29}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1724","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1724","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1724","headline":"🎉 easyoffer 2.0 — релиз уже в этом месяце! Вас ждут новые фичи, о которых мы ранее даже не упоминали. Они сде…","articleBody":"🎉 easyoffer 2.0 — релиз уже в этом месяце!\n\nВас ждут новые фичи, о которых мы ранее даже не упоминали. Они сделают путь к офферам ещё быстрее и эффективнее. Расскажу о них чуть позже 👀\n\nВ честь запуска мы готовим ограниченную акцию:\n\nПервые 500 покупателей получат:\n🚀 PRO тариф на 1 год с 50% скидкой\n\nЧто нужно сделать:\n\n🔔 Подпишитесь на этот Telegram-канал, чтобы первыми узнать о старте релиза. Сообщение появится в нем раньше, чем где-либо еще — вы успеете попасть в число первых 500 и получить максимальную выгоду. 🎁 А еще только для подписчиков канала ценный бонус в подарок к PRO тарифу.\n\n📅 Официальный запуск — уже совсем скоро.\nСледите за новостями и не пропустите старт!","datePublished":"2025-07-10T08:30:29Z","dateModified":"2025-07-10T08:30: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":2119},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}],"sharedContent":{"@type":"SocialMediaPosting","datePublished":"2025-07-10T08:30:14Z"}}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1723","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1723","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1723","headline":"🤔 Как работает import и export? - export позволяет открыть переменные, функции, компоненты из модуля; - impor…","articleBody":"🤔 Как работает import и export?\n\n- export позволяет открыть переменные, функции, компоненты из модуля;\n- import — подключает экспортируемое в другом файле; Работают как часть модульной системы ES6, обеспечивают разделение кода и повторное использование.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-07-09T16:10:26Z","dateModified":"2025-07-09T16:10:26Z","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":2718},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":19},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":12}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1722","url":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1722","mainEntityOfPage":"https://telemetr.io/en/channels/1917151177-easy_javascript_ru/posts/1722","headline":"🤔 Для чего нуден key при работе со списками? В React при рендере списков (например, через .map()) каждому эле…","articleBody":"🤔 Для чего нуден key при работе со списками?\n\nВ React при рендере списков (например, через .map()) каждому элементу необходимо передавать уникальный key. Это помогает React оптимизировать перерисовку и правильно отслеживать изменения в списке. \n\n🚩Почему `key` важен? \n\nReact использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим. \nБез key React не понимает, какие элементы изменились, удалились или добавились. \nЭто может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру. \n\n🚩Как использовать `key` правильно? \n\nconst users = [\"Alice\", \"Bob\", \"Charlie\"];\n\nfunction UserList() {\n return (\n

\n {users.map((user, index) => (\n
• {user}
// Хорошо, если `user` уникален\n ))}\n

\n );\n}\n\n🚩Что будет без `key`? \n\nЕсли не указать key, React выдаст предупреждение: \nWarning: Each child in a list should have a unique \"key\" prop.\n\nКроме того, при изменении списка возможны проблемы с перерисовкой\n{users.map((user, index) => (\n \n))}\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-07-09T09:05:36Z","dateModified":"2025-07-09T09:05:36Z","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":3189},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":14},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":13}]}}]}