\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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2683},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":18}]}},{"@type":"ListItem","position":5,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2091","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2091","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2499},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":6,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2090","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2090","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2858},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":11}]}},{"@type":"ListItem","position":7,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2089","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2089","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1536}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2088","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2088","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2378},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2087","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2087","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1654},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":19}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2086","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2086","mainEntityOfPage":"https://telemetr.io/ch/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 ;\n}\n\nfunction Profile() {\n const user = useContext(UserContext);\n return ;\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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2314},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2085","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2085","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1451},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2084","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2084","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2390},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":13},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2083","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2083","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2472},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2082","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2082","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1603}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2081","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2081","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2340},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2080","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2080","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1660},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2079","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2079","mainEntityOfPage":"https://telemetr.io/ch/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/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2525},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":17}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2078","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2078","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2078","headline":"VK RecSys Challenge — решите задачу холодного старта Привет! Открываем регистрацию на VK RecSys Challenge – с…","articleBody":"VK RecSys Challenge — решите задачу холодного старта\n\nПривет! Открываем регистрацию на VK RecSys Challenge – соревнование по разработке рекомендательных систем.\n\nЗадача – решить одну из ключевых проблем рекомендаций: как показать пользователю ролик, который он точно посмотрит, даже если никто этот ролик не видел.\n\nВам предстоит поработать с реальным датасетом VK-LSVD: 40 миллиардов обезличенных пользовательских взаимодействий и 20 миллионов коротких видео.\nЖдём студентов, исследователей, ML-инженеров – всех, кому интересен мир рекома.\n\nФормат участия:\n\n- индивидуально или в команде до 4 человек\n- 5 сабмитов в день\n- призовой фонд – 2 500 000 рублей\n\nПриём заявок – до 15 декабря\nПодробности и регистрация – по ссылке \n\nЗарегистрироваться\n\n#реклама 16+\ndev-events.com\nО рекламодателе","datePublished":"2025-10-27T03:02:57Z","dateModified":"2025-10-29T01:09:59Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1576},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2077","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2077","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2077","headline":"🤔 Как браузер понимает, что картинка — это картинка? По MIME-типу в заголовке ответа (Content-Type), расширен…","articleBody":"🤔 Как браузер понимает, что картинка — это картинка?\n\nПо MIME-типу в заголовке ответа (Content-Type), расширению файла и контексту использования ().\n\nСтавь 👍 если знал ответ, 🔥 если нет\nЗабирай 📚 Базу знаний","datePublished":"2025-10-26T16:10:43Z","dateModified":"2025-10-26T16:10:43Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2396},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":12},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":7}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2076","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2076","mainEntityOfPage":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru/posts/2076","headline":"🤔 Как происходит tostring? Метод .toString() используется для преобразования значения в строку. Он есть у все…","articleBody":"🤔 Как происходит tostring?\n\nМетод .toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных. \n\n🟠toString() у примитивов \nЧисла, строки, булевы значения, null, undefined\nДля примитивных типов toString() работает просто — возвращает строковое представление значения:\nconsole.log((123).toString()); // \"123\"\nconsole.log(true.toString()); // \"true\"\nconsole.log(false.toString()); // \"false\"\nconsole.log((3.14).toString()); // \"3.14\"\n\nНо null и undefined не имеют метода toString() и вызов приведёт к ошибке\nconsole.log(null.toString()); // ❌ Ошибка: Cannot read properties of null\nconsole.log(undefined.toString()); // ❌ Ошибка\n\nПоэтому для них лучше использовать String()\nconsole.log(String(null)); // \"null\"\nconsole.log(String(undefined)); // \"undefined\"\n\n🟠toString() у массивов \nДля массивов toString() преобразует их в строку, разделяя элементы запятой\nconsole.log([1, 2, 3].toString()); // \"1,2,3\"\nconsole.log([\"яблоко\", \"банан\"].toString()); // \"яблоко,банан\"\nconsole.log([].toString()); // \"\" (пустая строка)\n\n🟠`toString()` у объектов \nПо умолчанию метод toString() у объекта возвращает строку вида [object Object]\nconst obj = { a: 1, b: 2 };\nconsole.log(obj.toString()); // \"[object Object]\"\n\nЕсли нужно другое поведение, можно переопределить toString() в объекте\nconst user = {\n name: \"Иван\",\n age: 30,\n toString() {\n return `Имя: ${this.name}, Возраст: ${this.age}`;\n }\n};\n\nconsole.log(user.toString()); // \"Имя: Иван, Возраст: 30\"\n\n🟠`toString()` у классов \nМожно переопределять метод toString() в классах\nclass Person {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n\n toString() {\n return `${this.name} (${this.age} лет)`;\n }\n}\n\nconst person = new Person(\"Анна\", 25);\nconsole.log(person.toString()); // \"Анна (25 лет)\"\n\n🟠`toString()` у функций \nФункции тоже имеют метод toString(), но он возвращает их исходный код\nfunction hello() {\n return \"Привет!\";\n}\n\nconsole.log(hello.toString());\n// \"function hello() { return 'Привет!'; }\"\n\nДля стрелочных функций\nconst sum = (a, b) => a + b;\nconsole.log(sum.toString());\n// \"(a, b) => a + b\"\n\n🟠Использование `String()` вместо `.toString()`\nЛучше использовать String(значение), потому что toString() не работает на null и undefined\nconsole.log(String(null)); // \"null\"\nconsole.log(String(undefined)); // \"undefined\"\nconsole.log(String(42)); // \"42\"\nconsole.log(String({ a: 1 })); // \"[object Object]\"\n\nСтавь 👍 и забирай 📚 Базу знаний","datePublished":"2025-10-26T09:05:41Z","dateModified":"2025-10-26T09:05:41Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/ch/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":2591},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":29},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":15}]}}]}

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

17 386

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

2.3k39

分析

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

17 386

🤔 Расскажи про особенности свойства 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;
}

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

2.6k1111

分析

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

17 386

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

2.3k814

分析

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

17 386

🤔 Что такое 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>

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

2.7k188

分析

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

17 386

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

2.5k59

分析

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

17 386

🤔 Какие есть значения у 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 */
   }

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

2.9k114

分析

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

17 386

Ad

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

1.5k

分析

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

17 386

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

2.4k210

分析

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

17 386

Ad

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

1.7k192

分析

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

17 386

🤔 Как определить что состояние является глобальным? Глобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов: 🚩Используется ли это состояние в нескольких независимых компонентах? Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В 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 Ставь 👍 и забирай 📚 Базу знаний

2.3k75

分析

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

17 386

Ad

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

1.5k3

分析

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

17 386

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

2.4k1513

分析

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

17 386

🤔 Для чего нужна методология в 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.5k95

分析

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

17 386

Ad

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

1.6k

分析

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

17 386

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

2.3k48

分析

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

17 386

Ad

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

1.7k4

分析

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

17 386

🤔 Зачем нужен 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

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

2.5k1710

分析

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

17 386

Ad

VK RecSys Challenge — решите задачу холодного старта Привет! Открываем регистрацию на VK RecSys Challenge – соревнование по разработке рекомендательных систем. Задача – решить одну из ключевых проблем рекомендаций: как показать пользователю ролик, который он точно посмотрит, даже если никто этот ролик не видел. Вам предстоит поработать с реальным датасетом VK-LSVD: 40 миллиардов обезличенных пользовательских взаимодействий и 20 миллионов коротких видео. Ждём студентов, исследователей, ML-инженеров – всех, кому интересен мир рекома. Формат участия: - индивидуально или в команде до 4 человек - 5 сабмитов в день - призовой фонд – 2 500 000 рублей Приём заявок – до 15 декабря Подробности и регистрация – по ссылке Зарегистрироваться #реклама 16+ dev-events.com О рекламодателе

1.6k3

分析

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

17 386

🤔 Как браузер понимает, что картинка — это картинка? По MIME-типу в заголовке ответа (Content-Type), расширению файла и контексту использования (<img src="">). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

2.4k712

分析

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

17 386

🤔 Как происходит tostring? Метод .toString() используется для преобразования значения в строку. Он есть у всех объектов в JavaScript, потому что наследуется от Object.prototype. Однако, его поведение зависит от типа данных. 🟠toString() у примитивов Числа, строки, булевы значения, null, undefined Для примитивных типов toString() работает просто — возвращает строковое представление значения:

console.log((123).toString());     // "123"
console.log(true.toString());      // "true"
console.log(false.toString());     // "false"
console.log((3.14).toString());    // "3.14"

Но null и undefined не имеют метода toString() и вызов приведёт к ошибке

console.log(null.toString());   // ❌ Ошибка: Cannot read properties of null
console.log(undefined.toString()); // ❌ Ошибка

Поэтому для них лучше использовать String()

console.log(String(null));       // "null"
console.log(String(undefined));  // "undefined"

🟠toString() у массивов Для массивов toString() преобразует их в строку, разделяя элементы запятой

console.log([1, 2, 3].toString()); // "1,2,3"
console.log(["яблоко", "банан"].toString()); // "яблоко,банан"
console.log([].toString()); // "" (пустая строка)

🟠`toString()` у объектов По умолчанию метод toString() у объекта возвращает строку вида [object Object]

const obj = { a: 1, b: 2 };
console.log(obj.toString()); // "[object Object]"

Если нужно другое поведение, можно переопределить toString() в объекте

const user = {
  name: "Иван",
  age: 30,
  toString() {
    return `Имя: ${this.name}, Возраст: ${this.age}`;
  }
};

console.log(user.toString()); // "Имя: Иван, Возраст: 30"

🟠`toString()` у классов Можно переопределять метод toString() в классах

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  toString() {
    return `${this.name} (${this.age} лет)`;
  }
}

const person = new Person("Анна", 25);
console.log(person.toString()); // "Анна (25 лет)"

🟠`toString()` у функций Функции тоже имеют метод toString(), но он возвращает их исходный код

function hello() {
  return "Привет!";
}

console.log(hello.toString());
// "function hello() { return 'Привет!'; }"

Для стрелочных функций

const sum = (a, b) => a + b;
console.log(sum.toString());
// "(a, b) => a + b"

🟠Использование `String()` вместо `.toString()` Лучше использовать String(значение), потому что toString() не работает на null и undefined

console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String(42));        // "42"
console.log(String({ a: 1 }));  // "[object Object]"

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

2.6k1529

分析

显示更多