Не попадись на ботовода! Telemetrio знаходить і позначає такі канали мітками 👉 Хочеш бачити мітку, оформляй підписку

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

Відкрити в Telegram

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

Сітка: easyofferРосія37 846Технології та додатки7 490...

📈 Аналітичний огляд Telegram-каналу Frontend | Вопросы собесов

Канал Frontend | Вопросы собесов (@easy_javascript_ru) у мовному сегменті Російська є активним учасником. На даний момент спільнота об'єднує 17 296 підписників, посідаючи 7 490 місце в категорії Технології та додатки та 37 846 місце у регіоні Росія.

📊 Показники аудиторії та динаміка

З моменту свого створення невідомо, проект продемонстрував стрімке зростання, зібравши аудиторію у 17 296 підписників.

За останніми даними від 08 листопада, 2026, канал демонструє стабільну активність. Хоча за останні 30 днів спостерігається зміна кількості учасників на -302, а за останні 24 години на -8, загальне охоплення залишається високим.

Статус верифікації: Не верифікований
Рівень залученості (ER): Середній показник залученості аудиторії становить 6.03%. Протягом перших 24 годин після публікації контент зазвичай збирає 4.46% реакцій від загальної кількості підписників.
Охоплення публікацій: В середньому кожен допис отримує 1 043 переглядів. Протягом першої доби публікація в середньому набирає 771 переглядів.
Реакції та взаємодія: Аудиторія активно підтримує контент: середня кількість реакцій на один пост – 4.
Тематичні інтереси: Контент зосереджений навколо ключових тем, таких як ставь, браузер, html, border, flex.

📝 Опис та контентна політика

Автор описує ресурс як майданчик для висловлення суб'єктивної думки:
“Сайт: https://easyoffer.ru/ Все каналы: t.me/+xGeAw6ckJ4liYzQy Контакт для рекламы: @sendme_ads”

Завдяки високій частоті оновлень (останні дані отримано 09 листопада, 2026), канал підтримує актуальність та високий рівень охоплення публікацій. Аналітика показує, що аудиторія активно взаємодіє з контентом, що робить його важливою точкою впливу в категорії Технології та додатки.

17 296

Підписники

-824 години

-727 днів

-30230 днів

1 043

Перегляди допису

~ 77124 години

~ 88748 годин

6.03%

Коефіцієнт залучення

~ 2

Дописів на день

Ads index

Архів дописів

\n\n\n\nВ этом примере, если вы кликнете на элемент #child, вы увидите два алерта: сначала \"Child clicked!\", затем \"Parent clicked!\". Это происходит потому, что событие клика всплывает от элемента #child к его родителю #parent.\n\nУправление всплытием\n\nИногда нужно предотвратить всплытие события, чтобы оно не передавалось родительским элементам. Это можно сделать с помощью метода event.stopPropagation().\n\n\nТеперь, если вы кликнете на элемент #child, вы увидите только алерт \"Child clicked!\", так как всплытие события было остановлено.\n\nЗахват событий\n\nПомимо всплытия, существует другой этап обработки событий, называемый захватом (event capturing). Событие сначала идет сверху вниз от корневого элемента к цели (начиная с document и заканчивая целевым элементом), а затем поднимается обратно вверх (всплытие).\n\nЧтобы добавить обработчик на этапе захвата, нужно передать true в качестве третьего аргумента в addEventListener:\n\n\nВсплытие событий — это механизм, при котором событие сначала обрабатывается целевым элементом, а затем передается его родителям по дереву DOM. Чтобы остановить всплытие, можно использовать event.stopPropagation().\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-07-10T09:10:11Z","dateModified":"2024-07-10T09:10:11Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":8,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5462},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":27},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":46},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":8}]}},{"@type":"ListItem","position":8,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/311","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/311","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/311","headline":"Почему тебя не зовут на интервью? Исправь это в своем резюме… Получить приглашение на интервью сейчас сложнее…","articleBody":"Почему тебя не зовут на интервью? Исправь это в своем резюме…\n\nПолучить приглашение на интервью сейчас сложнее, чем с нуля обучиться разработке. И к сожалению, это не шутка.\n\nСкорее всего только 1-2% работодателей сейчас позовут тебя на интервью. Это статистика, которую мы собирали по 10.000 откликам. Но над этой цифрой можно и нужно работать.\n\nЕсли правильно оформить свое резюме, и поменять свою стратегию с откликами, то конверсию можно увеличить до 10%. Т.е почти в 10 раз!\n\nКак это сделать?\n\n1. Проверить свое резюме по нашему чек листу, и внести в него то, чего будет не хватать.\n\n2. Поменять свой подход к поиску работы, ведь одними откликами на hh.ru сыт не будешь.\n\n16 июля, в 18:00 по москве, мы вместе с Максом из CodeReview проведем вебинар на тему эффективного поиска работы в 2024 году.\n\nНа нем Макс покажет как сейчас нужно искать работу. В прямом эфире. \n\nА также раскроет что именно нужно писать в свое резюме, чтобы оно ПРОДАВАЛО.\n\nПолучить чек лист по составлению резюме, а также зарегистрироваться на вебинар можно по этой ссылке.\n\nРегистрируйся сейчас и увидимся 16 июля, в 18:00 по мск.\n\n👉 Зарегистрироваться и получить чек-лист по резюме.","datePublished":"2024-07-10T07:00:22Z","dateModified":"2024-07-12T06:57:19Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":3521},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6}]}},{"@type":"ListItem","position":9,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/310","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/310","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/310","headline":"Frontend | Вопросы собесов","datePublished":"2024-07-09T16:10:08Z","dateModified":"2024-08-23T17:12:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5612},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":16},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/309","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/309","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/309","headline":"В чем преимущество методологии bem ? Спросят с вероятностью 7% Методология БЭМ (Блок, Элемент, Модификатор) —…","articleBody":"В чем преимущество методологии bem ?\nСпросят с вероятностью 7%\n\nМетодология БЭМ (Блок, Элемент, Модификатор) — это подход к написанию и организации CSS кода, который помогает создавать масштабируемые и поддерживаемые интерфейсы. Основные преимущества методологии:\n\n1️⃣Четкая структура и семантика\n\nБЭМ обеспечивает ясную и логичную структуру именования классов, что делает код более читаемым и понятным. Это особенно полезно в больших проектах.\n

\n Click me\n

\n\n2️⃣button — блок\n✅button__text — элемент\n✅button--primary — модификатор\n\n2️⃣Изоляция компонентов\n\nБлоки в БЭМ независимы и изолированы друг от друга, что предотвращает проблемы с каскадностью и неожиданным переопределением стилей.\n\n\n\n\nКлассы .header__logo и .footer__logo не пересекаются и не влияют друг на друга.\n\n3️⃣Легкость в переиспользовании\n\nБлоки можно легко переиспользовать в разных частях проекта или даже в разных проектах без изменения их стилей.\n

Title

Content

\n\n

Profile Title

Profile Content

\n\n4️⃣Удобство в поддержке и масштабировании\n\nБлагодаря четкой структуре и изоляции, код написанный по БЭМ легче поддерживать и масштабировать. Добавление новых компонентов или модификация существующих не вызывает каскадных изменений в других частях системы.\n\n5️⃣Унификация стилей\n\nМетодология БЭМ способствует унификации и стандартизации стилей, что упрощает работу с проектом и делает его более предсказуемым.\n\nПример\nHTML:\n\n\nCSS:\n.menu {\n background-color: #fff;\n border: 1px solid #ccc;\n}\n\n.menu__item {\n padding: 10px;\n color: #333;\n}\n\n.menu__item--active {\n background-color: #007bff;\n color: #fff;\n}\n\nМетодология БЭМ упрощает чтение, поддержку и масштабирование кода за счет четкой структуры, изоляции компонентов и унификации стилей. Она делает интерфейсы более предсказуемыми и удобными для работы в команде.\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-07-09T09:10:07Z","dateModified":"2024-07-09T09:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":23,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5908},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":30},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":57},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":23}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/308","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/308","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/308","headline":"Привет! Ты сейчас ищешь работу? Если да, то у меня для тебя классные новости. Мы с Максом решили провести веб…","articleBody":"Привет! Ты сейчас ищешь работу?\n\nЕсли да, то у меня для тебя классные новости.\n\nМы с Максом решили провести вебинар на тему поиска работы и того, как быстрее получить оффер.\n\nЗачем?\n\nДа потому что найти работу просто откликаясь на вакансии теперь практически нереально.\n\nНа Junior вакансии откликаются по 1500 кандидатов. 1500 человек, Карл... \n\nВопрос: Как искать работу в таких условиях?\nОтвет: Нужно менять подходы, и использовать новые способы поиска работы.\n\nА вот какие способы, и как искать работу в 2024 году, расскажет мой товарищ - Макс, который помогает разработчикам с трудоустройством.\n\nОн расскажет тебе как ПРАВИЛЬНО откликаться на вакансии, на что смотрят рекрутеры, и как ты должен быть упакован, чтобы получить работу в это непростое время.\n\n🗓 Когда? Во вторник – 16 июля, в 18:00 по мск.\n\n🎁 После регистрации он также обещал прислать: 1) Анализ рынка труда. 2) Разбор кейсов тех, кто сейчас находит работу. 3) Пошаговый план, что нужно делать, чтобы прийти к оферу.\n\n👉 Записаться на вебинар по поиску работы.","datePublished":"2024-07-09T07:00:18Z","dateModified":"2024-07-11T07:00:16Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":3651},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/307","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/307","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/307","headline":"Frontend | Вопросы собесов","datePublished":"2024-07-08T16:10:09Z","dateModified":"2024-07-08T16:10:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":7,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5740},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":15},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":7}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/306","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/306","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/306","headline":"Оплата зарубежных сервисов стала удобной и доступной. Теперь можно пользоваться любыми сервисами со всего мир…","articleBody":"Оплата зарубежных сервисов стала удобной и доступной. Теперь можно пользоваться любыми сервисами со всего мира, не задумываясь о проблемах с оплатой. \n\nCheatPay помогает оплатить любые зарубежные сервисы российскими картами, а также помогает перевести средства за границу или получить средства из других стран. \n\nНапример:\n- Потеряли доступ к Zoom, Chat GPT, Airtable, Atlassian, Canva Midjourney, Figma, Notion, Hetzner и к другим программам? \n\n- Простаивают проекты в Adobe Photoshop, Premiere Pro и After Effects, или другие? \nВам помогут!\n\nCheatPay — это надежный, удобный и быстрый сервис оплаты, с множеством положительных отзывов.\n\n📌Возможна оплата на ИП и кредитной картой 💳\n\nПодписывайтесь на канал сервиса CheatPay, чтобы не потерять его.","datePublished":"2024-07-08T14:00:10Z","dateModified":"2024-07-10T14:00:18Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":3857},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/305","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/305","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/305","headline":"Что такое схлопывание границ ? Спросят с вероятностью 7% Схлопывание границ (или схлопывание отступов, margin…","articleBody":"Что такое схлопывание границ ?\nСпросят с вероятностью 7%\n\nСхлопывание границ (или схлопывание отступов, margin collapsing) — это поведение CSS, при котором вертикальные отступы (margins) соседних блоков могут быть объединены (схлопнуты) в один отступ. Это позволяет избежать удвоения вертикальных отступов между элементами и упрощает их управление.\n\nОсновные правила\n\n1️⃣Смежные вертикальные отступы:\nКогда два вертикальных отступа соседних блоков соприкасаются, они схлопываются в один. Размер схлопнутого отступа равен наибольшему из двух схлопывающихся отступов.\n

\n\nВ данном случае итоговый отступ между .block1 и .block2 будет 30px, а не 50px.\n\n2️⃣Родитель и первый/последний дочерний элемент:\nЕсли первый или последний дочерний элемент имеет вертикальный отступ, он схлопывается с отступом родительского элемента, если между ними нет границ, внутреннего отступа или контента.\n

\n\nВ этом случае итоговый отступ сверху для .child будет 20px, так как отступ .child схлопывается с отступом родителя.\n\n3️⃣Пустые блоки:\nЕсли блок не содержит контента, границ или внутреннего отступа, его вертикальные отступы также могут схлопываться.\n\nПримеры\n\nСхлопывание между соседними элементами\n

Box 1

Box 2

\n\nИтоговый отступ между .box1 и .box2 будет 30px.\n\nСхлопывание границ родителя и первого/последнего дочернего элемента\n

Content

\n\nИтоговый верхний отступ для .content будет 25px, так как отступы схлопываются.\n\nИсключения и предотвращение схлопывания\n\n✅Границы или внутренние отступы:\nЕсли между элементами добавить границу или внутренний отступ, схлопывания не произойдет.\n .parent {\n padding-top: 1px;\n }\n \n\n✅Flexbox и Grid:\nЭлементы, расположенные с помощью Flexbox или Grid, не схлопывают свои отступы.\n\n✅Блоки с overflow: hidden, position: absolute, или display: inline-block:\nТакие блоки не участвуют в схлопывании отступов.\n\nСхлопывание границ — это процесс объединения вертикальных отступов соседних блоков в один, чтобы избежать удвоения отступов. В результате итоговый отступ равен наибольшему из схлопывающихся отступов.\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-07-08T09:10:08Z","dateModified":"2024-07-08T09:10:08Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5919},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":25},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":33},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/304","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/304","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/304","headline":"Как джуну без опыта составить себе крутое резюме? Просто скачай наш гайд с 5 примерами реальных резюмешек реб…","articleBody":"Как джуну без опыта составить себе крутое резюме?\n\nПросто скачай наш гайд с 5 примерами реальных резюмешек ребят, которые недавно нашли работу.\n\nВ этом гайде рассказали как:\n\n1. Оформить свой опыт, даже если его нет.\n2. Добавили 5 крутых примеров настоящих резюме junior разработчиков без опыта, которые нашли работу.\n\nА писала этот гайд команда, которая трудоустроила уже больше 150 джунов!\n\nМеняем его на подписку на канал 😊\n\n👉 Скачать можно бесплатно по этой ссылочке.","datePublished":"2024-07-08T07:00:14Z","dateModified":"2024-07-10T12:17:17Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":3668},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":40}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/303","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/303","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/303","headline":"Frontend | Вопросы собесов","datePublished":"2024-07-07T16:10:09Z","dateModified":"2024-07-07T16:10:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":11,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5742},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":11}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/302","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/302","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/302","headline":"Что такое usecontext ? Спросят с вероятностью 7% useContext — это один из встроенных хуков, который позволяет…","articleBody":"Что такое usecontext ?\nСпросят с вероятностью 7%\n\nuseContext — это один из встроенных хуков, который позволяет компонентам подписываться на контекст и получать доступ к данным контекста. Используется для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий авторизованный пользователь, тема (светлая/темная) или настройки локализации.\n\nКак он работает\n\n1️⃣Создание контекста\n\nДля создания контекста используется функция createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer.\n import React, { createContext, useState } from 'react';\n\n const MyContext = createContext();\n \n\n2️⃣Provider\n\nКомпонент Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value.\n const MyProvider = ({ children }) => {\n const [state, setState] = useState('Hello World');\n\n return (\n \n {children}\n \n );\n };\n \n\n3️⃣useContext\n\nИспользуется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из createContext, и возвращает текущее значение контекста.\n import React, { useContext } from 'react';\n\n const MyComponent = () => {\n const { state, setState } = useContext(MyContext);\n\n return (\n

{state}

\n \n

\n );\n };\n \n\nПолный пример\nimport React, { createContext, useState, useContext } from 'react';\n\n// Создание контекста\nconst MyContext = createContext();\n\nconst MyProvider = ({ children }) => {\n const [state, setState] = useState('Hello World');\n\n return (\n \n {children}\n \n );\n};\n\nconst MyComponent = () => {\n const { state, setState } = useContext(MyContext);\n\n return (\n

{state}

\n \n

\n );\n};\n\nconst App = () => (\n \n \n \n);\n\nexport default App;\n\nuseContext — это хук, который позволяет компонентам получать данные из контекста. Он используется для доступа к глобальным данным без необходимости передавать пропсы на каждом уровне компонента.\n\n🔥 ТОП ВОПРОСОВ С СОБЕСОВ\n\n🔒 База собесов | 🔒 База тестовых","datePublished":"2024-07-07T09:10:07Z","dateModified":"2024-07-07T09:10:07Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":4,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5817},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":21},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":35},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":4}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/301","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/301","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/301","headline":"⚡️ Бесплатное обучение HTML/CSS, JavaScript, Vue.js с нуля с поддержкой от наставника На канале Интенсивный J…","articleBody":"⚡️ Бесплатное обучение HTML/CSS, JavaScript, Vue.js с нуля с поддержкой от наставника\n\nНа канале Интенсивный JavaScript действующий тимлид уровня мидл+ помогает изучить JS на практических задачах, которые интересно кодить\n\nС 10 по 14 июля он проводит бесплатное обучение, где на практике поможет разобраться в HTML/CSS, JavaScript и — Vue.js\n\nЧто вы сделаете на обучении\n— Сверстаете макет под присмотром тимлида\n— Затем добавите JavaScript (и это не пара скриптов для модального окна)\n— И перепишете проект на Vue.js\n\n🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться джуну. \n\nПомимо работы с кодом на обучении он расскажет, где новичку взять опыт работы, что ни в коем случае нельзя говорить на собеседовании, почему 90% новичков никогда не получат даже отклика на своё резюме\n\nВ общем — даст пошаговый подробный план «Что учить фронтенд и как найти работу джуну в 2024 году» . По этому плану его ученики устраиваются на работу\n\nОбучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля\n\nПодписывайтесь, осталось 30 мест\n\nУчиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду\n\n👉Участвовать бесплатно\n\nПервый урок из обучения уже доступен","datePublished":"2024-07-07T07:02:12Z","dateModified":"2024-07-09T07:00:19Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":3714},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":10},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/300","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/300","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/300","headline":"Frontend | Вопросы собесов","datePublished":"2024-07-07T06:33:22Z","dateModified":"2024-07-07T06:33:34Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/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":1}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/299","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/299","mainEntityOfPage":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru/posts/299","headline":"Frontend | Вопросы собесов","datePublished":"2024-07-06T16:10:08Z","dateModified":"2024-08-23T17:12:09Z","author":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"publisher":{"@type":"Organization","name":"Frontend | Вопросы собесов","url":"https://telemetr.io/uk/channels/1917151177-easy_javascript_ru","image":"https://img.telemetr.io/c/25KaBb/5431453649143450783?ty=x"},"commentCount":22,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":5487},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":23},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":22}]}}]}

17 296

🤔 Какой атрибут для `` определяет, что поле должно быть заполнено перед отправкой формы?

Anonymous voting

17 296

👩‍💻 Программирование теперь в телеграм! Вот обширная база материалов, которая ежедневно обновляется, выбирай своё направление: Обучение JavaScript с нуля Обучение Python с нуля Обучение Java с нуля Обучение HTML/CSS с нуля Обучение C/С++ с нуля Обучение С# с нуля Обучение SQL/GO/PHP с нуля Обучение Kotlin/Swift с нуля ⛓ Архив на 1789ГБ: Курсы, книги, шпаргалки, статьи, видео ресурсы — всё собрано в одном месте: @roadmap_ready

17 296

Что такое ssr ? Спросят с вероятностью 7% SSR (Server-Side Rendering) — это технология рендеринга веб-страниц на сервере, а не на клиенте. В контексте современных JavaScript-фреймворков, таких как React или Vue.js, это означает, что HTML-код страницы генерируется на сервере и отправляется в браузер уже готовым для отображения. Это отличается от традиционного подхода клиентского рендеринга (Client-Side Rendering, CSR), где HTML генерируется непосредственно в браузере с использованием JavaScript. Основные особенности и преимущества 1️⃣Улучшение производительности и скорости загрузки: ✅Первичный контент: Поскольку HTML генерируется на сервере, браузеры могут отображать готовый контент без необходимости ждать загрузки и выполнения JavaScript. ✅SEO: Поисковые системы лучше индексируют страницы, так как весь контент доступен сразу. 2️⃣Лучшая поддержка SEO: ✅Статические HTML-страницы, генерируемые сервером, легче индексируются поисковыми системами, что улучшает видимость сайта в поисковых результатах. 3️⃣Улучшенное восприятие пользователем (First Paint): ✅Пользователи видят контент быстрее, так как сервер отправляет уже готовую HTML-разметку. Как он работает 1️⃣Запрос от клиента: ✅Браузер отправляет запрос на сервер для получения страницы. 2️⃣Генерация HTML на сервере: ✅Сервер запускает JavaScript-код для рендеринга компонента или всей страницы. ✅Сервер генерирует HTML-код и отправляет его клиенту. 3️⃣Отображение страницы в браузере: ✅Браузер получает готовую HTML-страницу и отображает её. ✅Затем JavaScript-фреймворк (например, React или Vue) «гидрирует» страницу, то есть связывает готовую HTML-разметку с JavaScript-кодом, чтобы сделать страницу интерактивной. Next.js — популярный фреймворк для React, который поддерживает SSR из коробки. 1️⃣Установка Next.js:

      npx create-next-app my-ssr-app
   cd my-ssr-app
   npm run dev

2️⃣Создание страницы с SSR:

      // pages/index.js
   import React from 'react';

   const Home = ({ data }) => {
     return (
       <div>
         <h1>Server-Side Rendering Example</h1>
         <p>{data.message}</p>
       </div>
     );
   };

   // Эта функция вызывается на сервере при каждом запросе к странице
   export async function getServerSideProps() {
     // Выполняем запрос к API или базе данных
     const res = await fetch('https://api.example.com/data');
     const data = await res.json();

     // Передаем данные как пропсы в компонент
     return {
       props: {
         data
       }
     };
   }

   export default Home;

В этом примере Next.js использует функцию getServerSideProps для получения данных на сервере перед рендерингом страницы. Эти данные затем передаются в компонент как пропсы и используются для генерации HTML. SSR (Server-Side Rendering) — это процесс рендеринга веб-страниц на сервере, а не в браузере. Это улучшает производительность, SEO и восприятие пользователем за счет отправки готового HTML-кода с сервера. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

17 296

🤔 Какой HTML5 API предназначен для хранения данных в браузере, даже после закрытия вкладки?

Anonymous voting

17 296

Фронтенд в картинках — просто, наглядно и понятно. Новые знания в компактном формате каждый день. Присоединяйтесь: @FrontendPortal

17 296

Repost from easyoffer

Канал приближается к 20к подписчиков, а здесь так и нет нормального контент плана 😒 Ищу талантливых журналистов, способных писать клевые и авторские посты на тему "Карьера в IT" и все что с этим связано: поиск работы, повышение з/п, разбор кейсов, переезд в другие страны по рабочим визам, аналитика, исследование рынка и т.д. Важно глубокое понимание IT индустрии, вы должны иметь опыт работы в ней Если интересно отправьте мне свое резюме @kivaiko

17 296

Что такое всплытие ? Спросят с вероятностью 7% Всплытие (или бабблинг, event bubbling) — это механизм обработки событий в веб-разработке, при котором событие, происходящее на одном элементе, сначала обрабатывается этим элементом, а затем последовательно передаётся (всплывает) вверх по дереву DOM к его родительским элементам вплоть до корневого элемента (обычно document). Как работает всплытие событий Когда это происходит на элементе, сначала выполняются обработчики, прикрепленные к самому элементу, затем к его родителю, потом к родителю родителя, и так далее до document. Рассмотрим пример с вложенными элементами и обработчиками событий:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Event Bubbling</title>
</head>
<body>
  <div id="parent" style="padding: 20px; background-color: lightblue;">
    Parent
    <div id="child" style="padding: 20px; background-color: lightcoral;">
      Child
    </div>
  </div>

  <script>
    document.getElementById('parent').addEventListener('click', () => {
      alert('Parent clicked!');
    });

    document.getElementById('child').addEventListener('click', () => {
      alert('Child clicked!');
    });
  </script>
</body>
</html>

В этом примере, если вы кликнете на элемент #child, вы увидите два алерта: сначала "Child clicked!", затем "Parent clicked!". Это происходит потому, что событие клика всплывает от элемента #child к его родителю #parent. Управление всплытием Иногда нужно предотвратить всплытие события, чтобы оно не передавалось родительским элементам. Это можно сделать с помощью метода event.stopPropagation().

<script>
  document.getElementById('parent').addEventListener('click', () => {
    alert('Parent clicked!');
  });

  document.getElementById('child').addEventListener('click', (event) => {
    alert('Child clicked!');
    event.stopPropagation(); // предотвращает всплытие события
  });
</script>

Теперь, если вы кликнете на элемент #child, вы увидите только алерт "Child clicked!", так как всплытие события было остановлено. Захват событий Помимо всплытия, существует другой этап обработки событий, называемый захватом (event capturing). Событие сначала идет сверху вниз от корневого элемента к цели (начиная с document и заканчивая целевым элементом), а затем поднимается обратно вверх (всплытие). Чтобы добавить обработчик на этапе захвата, нужно передать true в качестве третьего аргумента в addEventListener:

<script>
  document.getElementById('parent').addEventListener('click', () => {
    alert('Parent clicked!');
  }, true);

  document.getElementById('child').addEventListener('click', () => {
    alert('Child clicked!');
  }, true);
</script>

Всплытие событий — это механизм, при котором событие сначала обрабатывается целевым элементом, а затем передается его родителям по дереву DOM. Чтобы остановить всплытие, можно использовать event.stopPropagation(). 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

17 296

Почему тебя не зовут на интервью? Исправь это в своем резюме… Получить приглашение на интервью сейчас сложнее, чем с нуля обучиться разработке. И к сожалению, это не шутка. Скорее всего только 1-2% работодателей сейчас позовут тебя на интервью. Это статистика, которую мы собирали по 10.000 откликам. Но над этой цифрой можно и нужно работать. Если правильно оформить свое резюме, и поменять свою стратегию с откликами, то конверсию можно увеличить до 10%. Т.е почти в 10 раз! Как это сделать? 1. Проверить свое резюме по нашему чек листу, и внести в него то, чего будет не хватать. 2. Поменять свой подход к поиску работы, ведь одними откликами на hh.ru сыт не будешь. 16 июля, в 18:00 по москве, мы вместе с Максом из CodeReview проведем вебинар на тему эффективного поиска работы в 2024 году. На нем Макс покажет как сейчас нужно искать работу. В прямом эфире. А также раскроет что именно нужно писать в свое резюме, чтобы оно ПРОДАВАЛО. Получить чек лист по составлению резюме, а также зарегистрироваться на вебинар можно по этой ссылке. Регистрируйся сейчас и увидимся 16 июля, в 18:00 по мск. 👉 Зарегистрироваться и получить чек-лист по резюме.

17 296

🤔 Какое CSS-свойство определяет пространство между границей и содержимым элемента?

Anonymous voting

17 296

В чем преимущество методологии bem ? Спросят с вероятностью 7% Методология БЭМ (Блок, Элемент, Модификатор) — это подход к написанию и организации CSS кода, который помогает создавать масштабируемые и поддерживаемые интерфейсы. Основные преимущества методологии: 1️⃣Четкая структура и семантика БЭМ обеспечивает ясную и логичную структуру именования классов, что делает код более читаемым и понятным. Это особенно полезно в больших проектах.

<div class="button button--primary">
  <span class="button__text">Click me</span>
</div>

2️⃣button — блок ✅button__text — элемент ✅button--primary — модификатор 2️⃣Изоляция компонентов Блоки в БЭМ независимы и изолированы друг от друга, что предотвращает проблемы с каскадностью и неожиданным переопределением стилей.

<div class="header">
  <div class="header__logo"></div>
  <div class="header__nav"></div>
</div>

<div class="footer">
  <div class="footer__logo"></div>
</div>

Классы .header__logo и .footer__logo не пересекаются и не влияют друг на друга. 3️⃣Легкость в переиспользовании Блоки можно легко переиспользовать в разных частях проекта или даже в разных проектах без изменения их стилей.

<div class="card">
  <div class="card__title">Title</div>
  <div class="card__content">Content</div>
</div>

<div class="profile">
  <div class="card">
    <div class="card__title">Profile Title</div>
    <div class="card__content">Profile Content</div>
  </div>
</div>

4️⃣Удобство в поддержке и масштабировании Благодаря четкой структуре и изоляции, код написанный по БЭМ легче поддерживать и масштабировать. Добавление новых компонентов или модификация существующих не вызывает каскадных изменений в других частях системы. 5️⃣Унификация стилей Методология БЭМ способствует унификации и стандартизации стилей, что упрощает работу с проектом и делает его более предсказуемым. Пример HTML:

<div class="menu">
  <div class="menu__item menu__item--active">Home</div>
  <div class="menu__item">About</div>
  <div class="menu__item">Contact</div>
</div>

CSS:

.menu {
  background-color: #fff;
  border: 1px solid #ccc;
}

.menu__item {
  padding: 10px;
  color: #333;
}

.menu__item--active {
  background-color: #007bff;
  color: #fff;
}

Методология БЭМ упрощает чтение, поддержку и масштабирование кода за счет четкой структуры, изоляции компонентов и унификации стилей. Она делает интерфейсы более предсказуемыми и удобными для работы в команде. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

17 296

Привет! Ты сейчас ищешь работу? Если да, то у меня для тебя классные новости. Мы с Максом решили провести вебинар на тему поиска работы и того, как быстрее получить оффер. Зачем? Да потому что найти работу просто откликаясь на вакансии теперь практически нереально. На Junior вакансии откликаются по 1500 кандидатов. 1500 человек, Карл... Вопрос: Как искать работу в таких условиях? Ответ: Нужно менять подходы, и использовать новые способы поиска работы. А вот какие способы, и как искать работу в 2024 году, расскажет мой товарищ - Макс, который помогает разработчикам с трудоустройством. Он расскажет тебе как ПРАВИЛЬНО откликаться на вакансии, на что смотрят рекрутеры, и как ты должен быть упакован, чтобы получить работу в это непростое время. 🗓 Когда? Во вторник – 16 июля, в 18:00 по мск. 🎁 После регистрации он также обещал прислать: 1) Анализ рынка труда. 2) Разбор кейсов тех, кто сейчас находит работу. 3) Пошаговый план, что нужно делать, чтобы прийти к оферу. 👉 Записаться на вебинар по поиску работы.

17 296

🤔 Какой тег HTML используется для встраивания исполняемого кода написанного на JavaScript?

Anonymous voting

17 296

Оплата зарубежных сервисов стала удобной и доступной. Теперь можно пользоваться любыми сервисами со всего мира, не задумываясь о проблемах с оплатой. CheatPay помогает оплатить любые зарубежные сервисы российскими картами, а также помогает перевести средства за границу или получить средства из других стран. Например: - Потеряли доступ к Zoom, Chat GPT, Airtable, Atlassian, Canva Midjourney, Figma, Notion, Hetzner и к другим программам? - Простаивают проекты в Adobe Photoshop, Premiere Pro и After Effects, или другие? Вам помогут! CheatPay — это надежный, удобный и быстрый сервис оплаты, с множеством положительных отзывов. 📌Возможна оплата на ИП и кредитной картой 💳 Подписывайтесь на канал сервиса CheatPay, чтобы не потерять его.

17 296

Что такое схлопывание границ ? Спросят с вероятностью 7% Схлопывание границ (или схлопывание отступов, margin collapsing) — это поведение CSS, при котором вертикальные отступы (margins) соседних блоков могут быть объединены (схлопнуты) в один отступ. Это позволяет избежать удвоения вертикальных отступов между элементами и упрощает их управление. Основные правила 1️⃣Смежные вертикальные отступы: Когда два вертикальных отступа соседних блоков соприкасаются, они схлопываются в один. Размер схлопнутого отступа равен наибольшему из двух схлопывающихся отступов.

      <div class="block1"></div>
   <div class="block2"></div>

В данном случае итоговый отступ между .block1 и .block2 будет 30px, а не 50px. 2️⃣Родитель и первый/последний дочерний элемент: Если первый или последний дочерний элемент имеет вертикальный отступ, он схлопывается с отступом родительского элемента, если между ними нет границ, внутреннего отступа или контента.

      <div class="parent">
     <div class="child"></div>
   </div>

В этом случае итоговый отступ сверху для .child будет 20px, так как отступ .child схлопывается с отступом родителя. 3️⃣Пустые блоки: Если блок не содержит контента, границ или внутреннего отступа, его вертикальные отступы также могут схлопываться. Примеры Схлопывание между соседними элементами

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

Итоговый отступ между .box1 и .box2 будет 30px. Схлопывание границ родителя и первого/последнего дочернего элемента

<div class="container">
  <div class="content">Content</div>
</div>

Итоговый верхний отступ для .content будет 25px, так как отступы схлопываются. Исключения и предотвращение схлопывания ✅Границы или внутренние отступы: Если между элементами добавить границу или внутренний отступ, схлопывания не произойдет.

    .parent {
    padding-top: 1px;
  }

✅Flexbox и Grid: Элементы, расположенные с помощью Flexbox или Grid, не схлопывают свои отступы. ✅Блоки с overflow: hidden, position: absolute, или display: inline-block: Такие блоки не участвуют в схлопывании отступов. Схлопывание границ — это процесс объединения вертикальных отступов соседних блоков в один, чтобы избежать удвоения отступов. В результате итоговый отступ равен наибольшему из схлопывающихся отступов. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

17 296

Как джуну без опыта составить себе крутое резюме? Просто скачай наш гайд с 5 примерами реальных резюмешек ребят, которые недавно нашли работу. В этом гайде рассказали как: 1. Оформить свой опыт, даже если его нет. 2. Добавили 5 крутых примеров настоящих резюме junior разработчиков без опыта, которые нашли работу. А писала этот гайд команда, которая трудоустроила уже больше 150 джунов! Меняем его на подписку на канал 😊 👉 Скачать можно бесплатно по этой ссылочке.

17 296

🤔 Какой метод массива в JavaScript применяется для преобразования всех элементов массива и создания нового массива?

Anonymous voting

17 296

Что такое usecontext ? Спросят с вероятностью 7% useContext — это один из встроенных хуков, который позволяет компонентам подписываться на контекст и получать доступ к данным контекста. Используется для передачи данных через дерево компонентов без необходимости передавать пропсы на каждом уровне. Это особенно полезно для глобальных данных, таких как текущий авторизованный пользователь, тема (светлая/темная) или настройки локализации. Как он работает 1️⃣Создание контекста Для создания контекста используется функция createContext. Она возвращает объект контекста, который содержит два компонента: Provider и Consumer.

      import React, { createContext, useState } from 'react';

   const MyContext = createContext();

2️⃣Provider Компонент Provider используется для предоставления значения контекста всем дочерним компонентам. Все компоненты внутри Provider могут получить доступ к значениям, переданным в value.

      const MyProvider = ({ children }) => {
     const [state, setState] = useState('Hello World');

     return (
       <MyContext.Provider value={{ state, setState }}>
         {children}
       </MyContext.Provider>
     );
   };

3️⃣useContext Используется для подписки на контекст в функциональных компонентах. Он принимает объект контекста, возвращаемый из createContext, и возвращает текущее значение контекста.

      import React, { useContext } from 'react';

   const MyComponent = () => {
     const { state, setState } = useContext(MyContext);

     return (
       <div>
         <p>{state}</p>
         <button onClick={() => setState('New Value')}>Change Value</button>
       </div>
     );
   };

Полный пример

import React, { createContext, useState, useContext } from 'react';

// Создание контекста
const MyContext = createContext();

const MyProvider = ({ children }) => {
  const [state, setState] = useState('Hello World');

  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
};

const MyComponent = () => {
  const { state, setState } = useContext(MyContext);

  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('New Value')}>Change Value</button>
    </div>
  );
};

const App = () => (
  <MyProvider>
    <MyComponent />
  </MyProvider>
);

export default App;

useContext — это хук, который позволяет компонентам получать данные из контекста. Он используется для доступа к глобальным данным без необходимости передавать пропсы на каждом уровне компонента. 🔥 ТОП ВОПРОСОВ С СОБЕСОВ 🔒 База собесов | 🔒 База тестовых

17 296

⚡️ Бесплатное обучение HTML/CSS, JavaScript, Vue.js с нуля с поддержкой от наставника На канале Интенсивный JavaScript действующий тимлид уровня мидл+ помогает изучить JS на практических задачах, которые интересно кодить С 10 по 14 июля он проводит бесплатное обучение, где на практике поможет разобраться в HTML/CSS, JavaScript и — Vue.js Что вы сделаете на обучении — Сверстаете макет под присмотром тимлида — Затем добавите JavaScript (и это не пара скриптов для модального окна) — И перепишете проект на Vue.js 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться джуну. Помимо работы с кодом на обучении он расскажет, где новичку взять опыт работы, что ни в коем случае нельзя говорить на собеседовании, почему 90% новичков никогда не получат даже отклика на своё резюме В общем — даст пошаговый подробный план «Что учить фронтенд и как найти работу джуну в 2024 году» . По этому плану его ученики устраиваются на работу Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля Подписывайтесь, осталось 30 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 👉Участвовать бесплатно Первый урок из обучения уже доступен

17 296

🤔 Какая функция JavaScript используется для асинхронной обработки HTTP-запросов?

Anonymous voting