uz
Feedback

Firibgarlarga uchmang! Telemetrio bunday kanallarni topadi va belgilaydi 👉 Belgini ko‘rmoqchi bo‘lsangiz, obuna bo‘ling

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

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

Kanalga Telegram’da o‘tish

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

Ko'proq ko'rsatish

📈 Telegram kanali Frontend | Вопросы собесов analitikasi

Frontend | Вопросы собесов (@easy_javascript_ru) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 17 386 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 7 467-o'rinni va Rossiya mintaqasida 37 751-o'rinni egallagan.

📊 Auditoriya ko‘rsatkichlari va dinamika

невідомо sanasidan buyon loyiha tez o‘sib, 17 386 obunachiga ega bo‘ldi.

31 Oktabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -255 ga, so‘nggi 24 soatda esa -11 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.

  • Tasdiqlash holati: Tasdiqlanmagan
  • Jalb etish (ER): Auditoriya o‘rtacha 6.76% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.35% ini tashkil etuvchi reaksiyalarni to‘playdi.
  • Post qamrovi: Har bir post o‘rtacha 1 176 marta ko‘riladi; birinchi sutkada odatda 757 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 01 Noyabr, 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 386
Obunachilar
-1124 soatlar
-907 kun
-25530 kun
Postlar arxiv
\n \n \n\n\n

Привет, это AMP!

\n \n\n\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-10-31T09:05:43Z","dateModified":"2025-10-31T09:05:43Z","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":2683},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":18}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2091","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2091","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2091","headline":"🤔 Зачем нужен линтер? - Помогает находить ошибки на этапе написания кода. - Улучшает стиль кодирования по ста…","articleBody":"🤔 Зачем нужен линтер?\n\n- Помогает находить ошибки на этапе написания кода.\n- Улучшает стиль кодирования по стандартам (Prettier, Airbnb).\n- Повышает читаемость и поддерживаемость кода.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-10-30T16:10:44Z","dateModified":"2025-10-30T16:10:44Z","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":2499},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2090","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2090","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2090","headline":"🤔 Какие есть значения у box-sizing? Свойство box-sizing в CSS управляет тем, как рассчитываются размеры элеме…","articleBody":"🤔 Какие есть значения у box-sizing?\n\nСвойство box-sizing в CSS управляет тем, как рассчитываются размеры элемента, включая ширину и высоту. Оно определяет, включаются ли в эти размеры внутренние отступы (padding) и границы (border), или же они добавляются отдельно. \n\n🚩Возможные значения `box-sizing`\n\n🟠`content-box`\nРазмеры элемента считаются только по `width` и `height`, без учета padding и border. Если добавить padding или border, фактические размеры элемента увеличатся. \n .box {\n width: 200px;\n height: 100px;\n padding: 20px;\n border: 10px solid black;\n box-sizing: content-box;\n }\n \n🟠`border-box` \nwidth и height включают padding и border. Внутреннее содержимое (content) будет автоматически уменьшаться, чтобы уложиться в заданные размеры. \n .box {\n width: 200px;\n height: 100px;\n padding: 20px;\n border: 10px solid black;\n box-sizing: border-box;\n }\n \n🟠`inherit` \nНаследует значение box-sizing от родительского элемента. \n .parent {\n box-sizing: border-box;\n }\n .child {\n box-sizing: inherit; /* Унаследует border-box */\n }\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-10-30T09:05:42Z","dateModified":"2025-10-30T09:05:42Z","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":2858},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2089","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2089","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2089","headline":"Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Д…","articleBody":"Запустите рекламу в телеграм-каналах с Яндекс Директом\n\nПерфоманс-реклама теперь в телеграм-каналах ⚡\n\nЯндекс Директ знает, как привлечь целевую аудиторию 💰👌 \n\nПопробовать\n\n#реклама \nyandex.ru\nО рекламодателе","datePublished":"2025-10-29T20:41:47Z","dateModified":"2025-10-31T18:43:43Z","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":1536}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2088","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2088","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2088","headline":"🤔 Как ещё можно структурировать HTML-страницу? - Через семантические теги: header, main, section, article, fo…","articleBody":"🤔 Как ещё можно структурировать HTML-страницу?\n\n- Через семантические теги: header, main, section, article, footer, aside.\n- Использовать div для группировки, nav для навигации и т.д.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-10-29T16:10:42Z","dateModified":"2025-10-29T16:10:42Z","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":2378},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2087","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2087","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2087","headline":"Ваша история в IT начинается в Авито 🚀 Хотите расти в разработке — приходите на оплачиваемую стажировку в Ави…","articleBody":"Ваша история в IT начинается в Авито 🚀\n\nХотите расти в разработке — приходите на оплачиваемую стажировку в Авито. Мы ищем будущих специалистов в направлениях Frontend, Backend, QA и Android. Вы будете работать над продуктами, которыми ежедневно пользуются миллионы людей, и прокачивать навыки с помощью:\n\n➡️ наставника — подскажет, как мыслить в процессе решения задач;\n➡️ комьюнити стажёров — всегда рядом, чтобы обсудить задачи и поддержать;\n➡️ корпоративных курсов, библиотек и баз знаний — всё, чтобы развиваться быстрее.\n\nВыберите два направления — основное и запасное. Если не получится попасть в первое, сможете пройти отбор на второе при наличии мест.\n\nУсловия:\n➡️ зарплата и корпоративный ноутбук,\n➡️ формат — офис, удалёнка или гибрид,\n➡️ от 25 часов в неделю,\n➡️ продолжительность — 9 месяцев,\n➡️ компенсация питания, консультации с психологами и юристами,\n➡️ после стажировки — возможность остаться в команде, если покажите крутой результат.\n\n📌 Регистрация открыта до 12 ноября. Подать заявку можно по ссылке.","datePublished":"2025-10-29T14:00:11Z","dateModified":"2025-10-31T17:00:10Z","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":1654},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":19}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2086","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2086","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2086","headline":"🤔 Как определить что состояние является глобальным? Глобальное состояние – это данные, которые должны быть до…","articleBody":"🤔 Как определить что состояние является глобальным?\n\nГлобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов: \n\n🚩Используется ли это состояние в нескольких независимых компонентах? \n\nЕсли одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (user), лучше хранить её в глобальном состоянии (например, в Context или Redux). \n// Глобальное состояние (например, Context API)\nconst UserContext = createContext();\n\nfunction App() {\n const [user, setUser] = useState({ name: \"Иван\", isLoggedIn: true });\n\n return (\n \n \n \n \n );\n}\n\nfunction Navbar() {\n const user = useContext(UserContext);\n return
Привет, {user.name}!
;\n}\n\nfunction Profile() {\n const user = useContext(UserContext);\n return
Профиль пользователя: {user.name}
;\n}\n\n🚩Должно ли состояние сохраняться при переходе между страницами? \n\nЕсли данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине \nАвторизация пользователя \nТемная/светлая тема приложения \nЕсли данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище. \n\n🚩Может ли состояние изменяться в одном месте, а использоваться в другом? \n\nЕсли одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии. \nconst ChatContext = createContext();\n\nfunction ChatProvider({ children }) {\n const [messages, setMessages] = useState([]);\n\n const sendMessage = (text) => {\n setMessages([...messages, { text, id: Date.now() }]);\n };\n\n return (\n \n {children}\n \n );\n}\n\nfunction ChatList() {\n const { messages } = useContext(ChatContext);\n return messages.map((msg) =>

{msg.text}

);\n}\n\nfunction ChatInput() {\n const { sendMessage } = useContext(ChatContext);\n const [text, setText] = useState(\"\");\n\n return (\n setText(e.target.value)}\n onKeyPress={(e) => {\n if (e.key === \"Enter\") {\n sendMessage(text);\n setText(\"\");\n }\n }}\n />\n );\n}\n\n🚩Зависит ли состояние от URL (адресной строки)? \n\nИногда состояние можно не делать глобальным, а просто хранить его в URL (в query-параметрах или path). \nID открытого товара: /products/123 \nФильтры товаров: /shop?category=shoes&sort=price \nСтраница чата с пользователем: /chat?user=ivan\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-10-29T09:05:42Z","dateModified":"2025-10-29T09:05:42Z","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":2314},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2085","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2085","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2085","headline":"➡️ Как расти во фронтенде и не застрять на месте? Ответ на этот и многие другие вопросы знает замечательный ф…","articleBody":"➡️ Как расти во фронтенде и не застрять на месте?\n\nОтвет на этот и многие другие вопросы знает замечательный фронтенд разработчик из OZON — 🥷🏻 Лёша Истомин\n\n——• 📗 Что полезного на канале \n\n👉🏻 Как стать крутым фронтенд разработчиком в 2025? *читать*\n\n👉🏻 Разбор 7-летнего пути в IT, собрали все ошибки построения карьеры за тебя *читать*\n\n👉🏻 7 постов, которые важно прочитать каждому, кто ищет работу *смотреть*\n\n👉🏻 Что обязательно должен прочитать каждый уважающий себя фронтендер *смотреть*\n\n👉🏻 Подборка-сохраняшка полезных гайдов для фронтендеров *забрать*\n\nПостов в канале > 200, читать минимум 4 часа, так что держи ссылку на оглавление  —·· *тык*\n\n🎁 Подписывайся и приходи на бесплатную консультацию","datePublished":"2025-10-29T07:00:18Z","dateModified":"2025-10-31T07:00:17Z","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":1451},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2084","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2084","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2084","headline":"🤔 В чём разница между event.preventDefault и event.stopPropagation? 1. event.preventDefault: предотвращает ст…","articleBody":"🤔 В чём разница между event.preventDefault и event.stopPropagation?\n\n1. event.preventDefault: предотвращает стандартное поведение элемента (например, отправку формы).\n2. event.stopPropagation: останавливает дальнейшее распространение события по дереву DOM.\n3. Часто используются совместно для полной обработки события без влияния на другие элементы.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-10-28T16:10:41Z","dateModified":"2025-10-28T16:10:41Z","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":2390},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2083","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2083","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2083","headline":"🤔 Для чего нужна методология в html? Методология в HTML (и в веб-разработке в целом) нужна для организации и…","articleBody":"🤔 Для чего нужна методология в html?\n\nМетодология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения.\n\n🚩Зачем это нужно\n\n🟠Понятность кода\nБез единого подхода код может стать \"кашей\" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам.\n\n🟠Снижение ошибок\nЕсли есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей.\n\n🟠Упрощение масштабирования\nВ больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые.\n\n🟠Легкость сопровождения\nС методологией легко найти нужные элементы и вносить изменения.\n\n🚩Примеры популярных методологий\n🟠БЭМ (Блок, Элемент, Модификатор)\nОдна из самых популярных методологий для HTML и CSS.\n - Она предлагает структурировать классы так:\n - Блок: независимый компонент (например, menu).\n - Элемент: часть блока (например, menu__item).\n - Модификатор: вариант блока или элемента (например, menu__item--active).\nПример кода\n \n
\n
Главная
\n
О нас
\n
Контакты
\n
\n \n \n🟠Atomic Design\nОснована на создании интерфейсов из \"атомов\" (простейшие элементы, например, кнопки), \"молекул\" (комбинации атомов, например, форма) и \"организмов\" (сложные компоненты, например, шапка сайта).\nПример\n \n \n \n \n
\n \n \n
\n \n\n🟠SMACSS (Scalable and Modular Architecture for CSS)\nДелит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода.\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-10-28T09:05:41Z","dateModified":"2025-10-28T09:05:41Z","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":2472},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2082","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2082","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2082","headline":"Гайд для РОПов по проведению эффективных вебинаров Как руководителям отделов продаж увеличить количество успе…","articleBody":"Гайд для РОПов по проведению эффективных вебинаров\n\nКак руководителям отделов продаж увеличить количество успешных сделок при том же объеме лидов с помощью вебинаров?\n\nГайд от МТС Линк по обучающим вебинарам для отделов продаж.\n\n✅ В гайде:\n\n- Как эффективнее прокачивать скиллы менеджеров и закрывать больше сделок за меньшие сроки;\n- Как организовать тренинг так, чтобы участники действительно подключились и дошли до финального модуля;\n- Как выявить слабого менеджера и улучшить его показатели;\n- Как сэкономить время на организации вебинара и пригласить всех участников в 2 клика.\n\nБонус внутри: 5 прикладных советов по контролю внимания участников во время вебинара\n\n✨ Скачайте гайд бесплатно по ссылке \n\nСкачать\n\n#реклама 16+\nmts-link.ru\nО рекламодателе","datePublished":"2025-10-27T19:14:07Z","dateModified":"2025-10-29T17:21:50Z","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":1603}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2081","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2081","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2081","headline":"🤔 Как Autoprefixer понимает, где поставить префиксы? Он ориентируется на базу данных Can I Use и список брауз…","articleBody":"🤔 Как Autoprefixer понимает, где поставить префиксы?\n\nОн ориентируется на базу данных Can I Use и список браузеров, указанный в конфигурации проекта. На основе этих данных он определяет, какие свойства и где требуют префиксов.\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-10-27T16:10:42Z","dateModified":"2025-10-27T16:10:42Z","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":2340},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@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/2080","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2080","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2080","headline":"📺 База 1000+ реальных собеседований На программиста, тестировщика, аналитика, проджекта и другие IT профы. Ес…","articleBody":"📺 База 1000+ реальных собеседований\n\nНа программиста, тестировщика, аналитика, проджекта и другие IT профы. \n\nЕсть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д.\n\n🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!","datePublished":"2025-10-27T11:10:50Z","dateModified":"2025-10-29T11:10:18Z","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":1660},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2079","url":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2079","mainEntityOfPage":"https://telemetr.io/uz/channels/1917151177-easy_javascript_ru/posts/2079","headline":"🤔 Зачем нужен docker? Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это и…","articleBody":"🤔 Зачем нужен docker?\n\nЭто инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации. \n\n🚩Почему нужен Docker? \n\n🟠Решает проблему \"работает у меня, но не у тебя\" \nВ разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере. \n\n🟠Автоматизирует развертывание \nБез Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер. \n\n🟠Легко масштабировать \nDocker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes). \n\n🟠Разделяет зависимости \nКаждое приложение работает в изолированной среде, и конфликты библиотек исключены. \n\n🟠Работает везде (Windows, Mac, Linux, серверы, облако) \nКонтейнер можно запустить где угодно, где установлен Docker. \n\n🚩Как работает Docker? \n\n🟠Создаем `Dockerfile` (инструкция для сборки контейнера) \nПример для Node.js-приложения \n# Базовый образ с Node.js\nFROM node:18\n\n# Устанавливаем рабочую директорию\nWORKDIR /app\n\n# Копируем файлы проекта\nCOPY package.json ./\nRUN npm install\nCOPY . .\n\n# Запускаем приложение\nCMD [\"node\", \"server.js\"]\n\nСобираем образ Docker (создаем \"упакованный\" контейнер) \ndocker build -t my-app .\n\nЗапускаем контейнер\ndocker run -p 3000:3000 my-app\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-10-27T09:05:43Z","dateModified":"2025-10-27T09:05:43Z","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":2525},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17}]}}]}
🤔 Как происходит процесс утечки? Обычно это происходит, когда ссылки на объекты сохраняются, даже если они больше не нужны: в глобальных переменных, замыканиях, обработчиках событий, коллекциях (Map, Set) и таймерах. GC не может очистить объект, пока есть ссылка на него. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как передать данные из родительского компонента в дочерний? Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему. 🚩Шаги для передачи данных из родительского компонента в дочерний 1⃣Создание родительского компонента В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать. Затем передаем эти данные в дочерний компонент через пропсы. 2⃣Приём данных в дочернем компоненте В дочернем компоненте мы получаем пропсы и используем их для отображения данных или выполнения других действий. Родительский компонент (ParentComponent.js)
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const message = "Привет, дочерний компонент!";
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent message={message} />
        </div>
    );
}

export default ParentComponent;
Дочерний компонент (ChildComponent.js)
import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>{props.message}</p>
        </div>
    );
}

export default ChildComponent;
🚩Пояснение 1⃣В родительском компоненте `ParentComponent`: Создаем переменную message, содержащую строку "Привет, дочерний компонент!". В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message. 2⃣В дочернем компоненте ChildComponent: Принимаем пропс message через параметр props. Используем props.message для отображения переданной строки внутри тега <p>. 🚩Дополнительные примеры Родительский компонент (ParentComponent.js)
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
    const user = {
        name: "Иван",
        age: 25
    };
    
    return (
        <div>
            <h1>Родительский компонент</h1>
            <ChildComponent user={user} />
        </div>
    );
}

export default ParentComponent;
Дочерний компонент (ChildComponent.js)
import React from 'react';

function ChildComponent(props) {
    return (
        <div>
            <h2>Дочерний компонент</h2>
            <p>Имя: {props.user.name}</p>
            <p>Возраст: {props.user.age}</p>
        </div>
    );
}

export default ChildComponent;
Ставь 👍 и забирай 📚 Базу знаний

Tefal X-Clean 10: Умные технологии для комфортной уборки Tefal X-Clean 10 — беспроводной моющий вертикальный пылесос для влаж
Tefal X-Clean 10: Умные технологии для комфортной уборки Tefal X-Clean 10 — беспроводной моющий вертикальный пылесос для влажной уборки. Главная изюминка — система самоочистки роликовой щётки и сушка горячим воздухом до 65°C Подробнее #реклама tefal.ru О рекламодателе

🤔 Какие форматы изображений? - jpeg, png, gif, svg, webp, avif. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Расскажи про особенности свойства color color – одно из самых базовых CSS-свойств, которое отвечает за цвет текста и текста в элементах (например, градиентных фонах и SVG).
p {
  color: red;
}
🟠Какие значения принимает `color`? CSS позволяет задавать цвета несколькими способами 🟠Особенности работы `color` Наследование color наследуется потомками по умолчанию, в отличие от многих других свойств CSS (например, background).
body {
  color: blue;
}
p {
  color: inherit; /* Явное наследование */
}
currentColor — скрытое золото Это специальное значение, которое означает "используй текущее значение color". Очень полезно для стилизации border, box-shadow, outline и SVG.
button {
  color: red;
  border: 2px solid currentColor; /* Использует color */
}
transparent — особый цвет
p {
  color: transparent;
}
Когда rgba() или hsla() лучше
p {
  color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный */
}
color и mix-blend-mode Можно заставить текст взаимодействовать с фоном с помощью mix-blend-mode
h1 {
  color: white;
  mix-blend-mode: difference;
}
color в ::selection и ::placeholder Некоторые элементы (например, выделенный текст или placeholder в input) требуют отдельного указания color
::selection {
  background: blue;
  color: white;
}

input::placeholder {
  color: gray;
}
Ставь 👍 и забирай 📚 Базу знаний

🤔 Какие протоколы взаимодействия известны? Среди популярных протоколов — HTTP/HTTPS, WebSocket для двусторонней связи, FTP для передачи файлов, SMTP и IMAP для электронной почты, а также REST и GraphQL для API. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое amp страницы? AMP (Accelerated Mobile Pages) — это технология от Google, которая позволяет создавать очень быстрые и легкие веб-страницы для мобильных устройств. AMP-страницы загружаются почти мгновенно, потому что: Используют оптимизированный HTML (AMP HTML) Ограничивают использование JavaScript Подключают Google AMP Cache для мгновенной загрузки 🚩Зачем нужны AMP? Ускоряют загрузку страниц → полезно для мобильных пользователей Улучшают SEO → Google любит быстрые сайты Увеличивают CTR → в поиске AMP-страницы помечены ⚡️ и привлекают внимание Снижают нагрузку на сервер 🚩Как создать AMP-страницу? AMP-страница – это обычный HTML, но с ограничениями и своими тегами.
<!DOCTYPE html>
<html ⚡️ lang="ru">
<head>
  <meta charset="UTF-8">
  <title>AMP Страница</title>
  <link rel="canonical" href="https://example.com/normal-page.html">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-boilerplate>
    body { visibility: hidden; }
  </style>
  <noscript>
    <style amp-boilerplate>
      body { visibility: visible; }
    </style>
  </noscript>
</head>
<body>
  <h1>Привет, это AMP!</h1>
  <amp-img src="image.jpg" width="600" height="400" layout="responsive"></amp-img>
</body>
</html>
Ставь 👍 и забирай 📚 Базу знаний

🤔 Зачем нужен линтер? - Помогает находить ошибки на этапе написания кода. - Улучшает стиль кодирования по стандартам (Prettier, Airbnb). - Повышает читаемость и поддерживаемость кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Какие есть значения у box-sizing? Свойство box-sizing в CSS управляет тем, как рассчитываются размеры элемента, включая ширину и высоту. Оно определяет, включаются ли в эти размеры внутренние отступы (padding) и границы (border), или же они добавляются отдельно. 🚩Возможные значения `box-sizing` 🟠`content-box` Размеры элемента считаются только по `width` и `height`, без учета padding и border. Если добавить padding или border, фактические размеры элемента увеличатся.
   .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: content-box;
   }
🟠`border-box` width и height включают padding и border. Внутреннее содержимое (content) будет автоматически уменьшаться, чтобы уложиться в заданные размеры.
   .box {
       width: 200px;
       height: 100px;
       padding: 20px;
       border: 10px solid black;
       box-sizing: border-box;
   }
🟠`inherit` Наследует значение box-sizing от родительского элемента.
   .parent {
       box-sizing: border-box;
   }
   .child {
       box-sizing: inherit; /* Унаследует border-box */
   }
Ставь 👍 и забирай 📚 Базу знаний

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

🤔 Как ещё можно структурировать HTML-страницу? - Через семантические теги: header, main, section, article, footer, aside. - Использовать div для группировки, nav для навигации и т.д. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Ваша история в IT начинается в Авито 🚀 Хотите расти в разработке — приходите на оплачиваемую стажировку в Авито. Мы ищем буд
Ваша история в IT начинается в Авито 🚀 Хотите расти в разработке — приходите на оплачиваемую стажировку в Авито. Мы ищем будущих специалистов в направлениях Frontend, Backend, QA и Android. Вы будете работать над продуктами, которыми ежедневно пользуются миллионы людей, и прокачивать навыки с помощью: ➡️ наставника — подскажет, как мыслить в процессе решения задач; ➡️ комьюнити стажёров — всегда рядом, чтобы обсудить задачи и поддержать; ➡️ корпоративных курсов, библиотек и баз знаний — всё, чтобы развиваться быстрее. Выберите два направления — основное и запасное. Если не получится попасть в первое, сможете пройти отбор на второе при наличии мест. Условия: ➡️ зарплата и корпоративный ноутбук, ➡️ формат — офис, удалёнка или гибрид, ➡️ от 25 часов в неделю, ➡️ продолжительность — 9 месяцев, ➡️ компенсация питания, консультации с психологами и юристами, ➡️ после стажировки — возможность остаться в команде, если покажите крутой результат. 📌 Регистрация открыта до 12 ноября. Подать заявку можно по ссылке.

🤔 Как определить что состояние является глобальным? Глобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов: 🚩Используется ли это состояние в нескольких независимых компонентах? Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (user), лучше хранить её в глобальном состоянии (например, в Context или Redux).
// Глобальное состояние (например, Context API)
const UserContext = createContext();

function App() {
  const [user, setUser] = useState({ name: "Иван", isLoggedIn: true });

  return (
    <UserContext.Provider value={user}>
      <Navbar />
      <Profile />
    </UserContext.Provider>
  );
}

function Navbar() {
  const user = useContext(UserContext);
  return <div>Привет, {user.name}!</div>;
}

function Profile() {
  const user = useContext(UserContext);
  return <div>Профиль пользователя: {user.name}</div>;
}
🚩Должно ли состояние сохраняться при переходе между страницами? Если данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине Авторизация пользователя Темная/светлая тема приложения Если данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище. 🚩Может ли состояние изменяться в одном месте, а использоваться в другом? Если одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии.
const ChatContext = createContext();

function ChatProvider({ children }) {
  const [messages, setMessages] = useState([]);

  const sendMessage = (text) => {
    setMessages([...messages, { text, id: Date.now() }]);
  };

  return (
    <ChatContext.Provider value={{ messages, sendMessage }}>
      {children}
    </ChatContext.Provider>
  );
}

function ChatList() {
  const { messages } = useContext(ChatContext);
  return messages.map((msg) => <p key={msg.id}>{msg.text}</p>);
}

function ChatInput() {
  const { sendMessage } = useContext(ChatContext);
  const [text, setText] = useState("");

  return (
    <input
      value={text}
      onChange={(e) => setText(e.target.value)}
      onKeyPress={(e) => {
        if (e.key === "Enter") {
          sendMessage(text);
          setText("");
        }
      }}
    />
  );
}
🚩Зависит ли состояние от URL (адресной строки)? Иногда состояние можно не делать глобальным, а просто хранить его в URL (в query-параметрах или path). ID открытого товара: /products/123 Фильтры товаров: /shop?category=shoes&sort=price Страница чата с пользователем: /chat?user=ivan Ставь 👍 и забирай 📚 Базу знаний

➡️ Как расти во фронтенде и не застрять на месте? Ответ на этот и многие другие вопросы знает замечательный фронтенд разработ
➡️ Как расти во фронтенде и не застрять на месте? Ответ на этот и многие другие вопросы знает замечательный фронтенд разработчик из OZON — 🥷🏻 Лёша Истомин ——• 📗 Что полезного на канале  👉🏻 Как стать крутым фронтенд разработчиком в 2025? *читать* 👉🏻 Разбор 7-летнего пути в IT, собрали все ошибки построения карьеры за тебя *читать* 👉🏻 7 постов, которые важно прочитать каждому, кто ищет работу *смотреть* 👉🏻 Что обязательно должен прочитать каждый уважающий себя фронтендер *смотреть* 👉🏻 Подборка-сохраняшка полезных гайдов для фронтендеров *забрать* Постов в канале > 200, читать минимум 4 часа, так что держи ссылку на оглавление  —·· *тык* 🎁 Подписывайся и приходи на бесплатную консультацию

🤔 В чём разница между event.preventDefault и event.stopPropagation? 1. event.preventDefault: предотвращает стандартное поведение элемента (например, отправку формы). 2. event.stopPropagation: останавливает дальнейшее распространение события по дереву DOM. 3. Часто используются совместно для полной обработки события без влияния на другие элементы. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Для чего нужна методология в html? Методология в HTML (и в веб-разработке в целом) нужна для организации и структурирования кода так, чтобы он был понятным, поддерживаемым и масштабируемым. Она помогает разработчикам работать в команде, избегать хаоса в проекте и ускоряет развитие продукта, делая код простым для чтения и изменения. 🚩Зачем это нужно 🟠Понятность кода Без единого подхода код может стать "кашей" из классов и тегов. Методология помогает дать элементы структуры, которые легко понять не только автору кода, но и другим разработчикам. 🟠Снижение ошибок Если есть четкие правила, уменьшается риск дублирования, неправильных имен или конфликтов стилей. 🟠Упрощение масштабирования В больших проектах количество HTML-структур растет, и без системного подхода будет сложно добавлять новые элементы, не нарушая старые. 🟠Легкость сопровождения С методологией легко найти нужные элементы и вносить изменения. 🚩Примеры популярных методологий 🟠БЭМ (Блок, Элемент, Модификатор) Одна из самых популярных методологий для HTML и CSS. - Она предлагает структурировать классы так: - Блок: независимый компонент (например, menu). - Элемент: часть блока (например, menu__item). - Модификатор: вариант блока или элемента (например, menu__item--active). Пример кода
     <div class="menu">
       <div class="menu__item menu__item--active">Главная</div>
       <div class="menu__item">О нас</div>
       <div class="menu__item">Контакты</div>
     </div>
     
🟠Atomic Design Основана на создании интерфейсов из "атомов" (простейшие элементы, например, кнопки), "молекул" (комбинации атомов, например, форма) и "организмов" (сложные компоненты, например, шапка сайта). Пример
     <!-- Атом -->
     <button class="button">Клик</button>
     <!-- Молекула -->
     <div class="form">
       <label class="form__label">Имя</label>
       <input class="form__input" type="text">
     </div>
     
🟠SMACSS (Scalable and Modular Architecture for CSS) Делит код на модули (например, глобальные стили, компоненты, утилиты) и предлагает поддерживать независимость и минимизацию дублирования кода. Ставь 👍 и забирай 📚 Базу знаний

Гайд для РОПов по проведению эффективных вебинаров Как руководителям отделов продаж увеличить количество успешных сделок при
Гайд для РОПов по проведению эффективных вебинаров Как руководителям отделов продаж увеличить количество успешных сделок при том же объеме лидов с помощью вебинаров? Гайд от МТС Линк по обучающим вебинарам для отделов продаж. ✅ В гайде: - Как эффективнее прокачивать скиллы менеджеров и закрывать больше сделок за меньшие сроки; - Как организовать тренинг так, чтобы участники действительно подключились и дошли до финального модуля; - Как выявить слабого менеджера и улучшить его показатели; - Как сэкономить время на организации вебинара и пригласить всех участников в 2 клика. Бонус внутри: 5 прикладных советов по контролю внимания участников во время вебинара ✨ Скачайте гайд бесплатно по ссылке Скачать #реклама 16+ mts-link.ru О рекламодателе

🤔 Как Autoprefixer понимает, где поставить префиксы? Он ориентируется на базу данных Can I Use и список браузеров, указанный в конфигурации проекта. На основе этих данных он определяет, какие свойства и где требуют префиксов. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

📺 База 1000+ реальных собеседований На программиста, тестировщика, аналитика, проджекта и другие IT профы. Есть собесы от ведущих компаний: Сбер, Яндекс, ВТБ, Тинькофф, Озон, Wildberries и т.д. 🎯 Переходи по ссылке и присоединяйся к базе, чтобы прокачать свои шансы на успешное трудоустройство!

🤔 Зачем нужен docker? Это инструмент для создания, развертывания и управления контейнерами. Контейнер – это изолированная среда, которая содержит всё необходимое для работы приложения: код, зависимости, библиотеки, конфигурации. 🚩Почему нужен Docker? 🟠Решает проблему "работает у меня, но не у тебя" В разных средах могут быть разные версии зависимостей (Node.js, Python, базы данных). С Docker всё упаковано в контейнер, и приложение работает одинаково на любом сервере. 🟠Автоматизирует развертывание Без Docker развертывание – это настройка сервера, установка зависимостей, конфигурация окружения. С Docker – просто запускаем контейнер. 🟠Легко масштабировать Docker-контейнеры можно клонировать и запускать на разных серверах (например, в Kubernetes). 🟠Разделяет зависимости Каждое приложение работает в изолированной среде, и конфликты библиотек исключены. 🟠Работает везде (Windows, Mac, Linux, серверы, облако) Контейнер можно запустить где угодно, где установлен Docker. 🚩Как работает Docker? 🟠Создаем `Dockerfile` (инструкция для сборки контейнера) Пример для Node.js-приложения
# Базовый образ с Node.js
FROM node:18

# Устанавливаем рабочую директорию
WORKDIR /app

# Копируем файлы проекта
COPY package.json ./
RUN npm install
COPY . .

# Запускаем приложение
CMD ["node", "server.js"]
Собираем образ Docker (создаем "упакованный" контейнер)
docker build -t my-app .
Запускаем контейнер
docker run -p 3000:3000 my-app
Ставь 👍 и забирай 📚 Базу знаний