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

Обучение на Data Protection Officer (DPO) ⚡Обучение по защите персональных данных от практиков из Comply, ALUMNI Partners, Ozon, VK и др ✨ На курсе вы узнаете: » Узнаете все про работу с персональными данными » 152-ФЗ и трансграничную передачу данных 🎓Программа: » Управление рисками » Проверка регулятора » Составление документов Скидка до конца недели! Оставьте заявку сейчас и станьте ближе к успешной карьере юриста! ❤️ Узнать больше #реклама 16+ mosdigitals.ru О рекламодателе

🤔 Что такое action creator? Это функция, которая создает объект экшена. Она упрощает передачу данных и предотвращает дублирование кода при отправке dispatch. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как работают плавающие элементы (floats)? float – это CSS-свойство, которое позволяет "выплывать" элементу из обычного потока документа и обтекаться другими элементами (например, текстом). Основные значения float

<img src="image.jpg" class="float-img">
<p>Это текст, который будет обтекать картинку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}

🟠Почему родитель "схлопывается" при `float`? Когда внутри div есть только float-элементы, браузер считает, что он пустой, потому что float убирает элемент из потока.

<div class="container">
  <img src="image.jpg" class="float-img">
  <p>Текст обтекает картинку.</p>
</div>

.container {
  background: lightgray;
}
.float-img {
  float: left;
}

Решение 1: overflow: hidden;

.container {
  overflow: hidden; /* Контейнер теперь учитывает float-элементы */
}

Решение 2: clearfix (старый способ)

.container::after {
  content: "";
  display: block;
  clear: both;
}

🟠Как остановить обтекание (`clear`)? Чтобы отменить обтекание, используется clear.

<img src="image.jpg" class="float-img">
<p>Этот текст обтекает картинку.</p>
<div class="clear"></div>
<p>Этот текст пойдёт на новую строку.</p>

.float-img {
  float: left;
  margin-right: 10px;
}
.clear {
  clear: both;
}

🚩Почему `float` устарел и что использовать вместо него? Раньше float использовали для создания колонок и сеток, но сегодня его заменили: Flexbox (display: flex;) – лучше для адаптивных макетов. CSS Grid (display: grid;) – мощный инструмент для сложных сеток.

.container {
  display: flex;
  align-items: center;
}

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

Шанс попасть в IT 🔥 Clevertec запускает бесплатный марафон по frontend-разработке, после которого у тебя будет не только кейс в портфолио, но и шанс попасть в команду. ✨ Если ты начинающий веб-разработчик (JavaScript, React) из России и хочешь прокачаться под менторством программистов компании, заполняй анкету: ✍️ Форма регистрации 📍Формат: онлайн-марафон на 3 месяца 📍Каждую неделю ты получаешь задание с подробной инструкцией 📍В финале у тебя будет готовый проект в репозитории Условия приближенные к реальному проекту с поддержкой менторов. Разработка идет по спринтам, будет и взаимодействие с командой. Старт — 1 апреля (не шутка 😄). Отличная возможность попробовать свои силы.

На easyoffer 2.0 появится новый раздел: Задачи с собеседований 🟠Задачи на Алгоритмические, Live-coding и System Design из реальных собеседований 🟠Вероятность встретить ту или иную задачу 🟠Возможность подготовиться к задачам конкретной компании Есть много сайтов, на которых можно тренироваться решать задачи, но у них у всех одна проблема – сами задачи люди просто выдумывают. На easyoffer 2.0 вы сможете готовиться к live-coding и system design секциям на основе задач из реальных собеседований. Вы можете найдете самые частые задачи и сделаете упор на их решение. Считаные дни остались до старта краудфандинговой кампании, чтобы ускорить разработку easyoffer 2.0. Все кто, поддержал проект на этом этапе смогу получить 1 год доступа к сайту по цене месячной подписки, а те кто поддержат проект раньше других ито дешевле + получат существенный бонус. Следите за стартом 👉 в этом телеграм канале.

Хотите освоить востребованную профессию в IT? 💻 Откройте новые возможности в IT с гарантированным трудоустройством! Обучение под руководством экспертов Стажировка в реальных проектах Гибкий график: совмещайте с бизнесом или работой После обучения вы получите: ✅ Удалённую работу в ведущих компаниях ✅ Доход от 150 000 ₽, без ограничений по росту ✅ Возможность работать в комфортных условиях и управлять своим временем ⚡ Осталось 47 мест Успейте подать заявку: Узнать больше #реклама 16+ technolium.ru О рекламодателе

🤔 Что такое store? Централизованное хранилище состояния в Redux. Оно содержит данные приложения, позволяет подписываться на обновления и изменять состояние только через dispatch. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 К какой категории относятся промисы? Промисы (Promise) относятся к асинхронным объектам, реализующим паттерн "Promise". Они позволяют работать с отложенными и асинхронными операциями (например, сетевые запросы, таймеры, операции с файлами). Категория: Асинхронные программные конструкции (Async Objects / Async Patterns) Тип: Объект (Promise Object)* Используются в: Асинхронном программировании (Async/Await, then/catch) 🚩Почему промисы – асинхронная конструкция? Промисы не выполняются сразу, а ждут завершения операции, после чего выполняют код в .then() или .catch().

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Данные загружены!"); // Успех
  }, 2000);
});

fetchData.then(data => console.log(data));

🚩Promise – это не просто колбэк До появления Promise в JavaScript использовались колбэки, но они приводили к "callback hell".

function fetchData(callback) {
  setTimeout(() => {
    callback("Данные загружены!");
  }, 2000);
}

fetchData(data => console.log(data));

Решение с Promise

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

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

Почему вы не используете Битрикс24 CRM с AI-помощником? 1- не знал 2- забыл Рассказываем и напоминаем! ✅Битрикс24 CRM с AI помогает увеличивать продажи, работать с постоянными клиентами и сохранять все важные данные. AI-помощник CoPilot внутри сервиса расшифрует телефонные разговоры и автоматически заполнит карточки клиента в CRM. Битрикс24 можно использовать бесплатно для всех команд, независимо от их размера. ⚡Не тратьте время на рутину. Узнать больше #реклама 16+ bitrix24.ru О рекламодателе

🤔 Что такое dispatch? Это функция в Redux, которая отправляет экшены (actions) в хранилище (store). Она запускает редюсер, который изменяет состояние на основе переданного экшена. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

"Поступашки — ШАД, Стажировки и Магистратура", - лучше гайд в мире образования и карьеры. Канал ведут преподаватели Яндекса, ВШЭ и ШАД. Внутри: 🔺Слив вопросов с собеса в Яндекс 🔺Как бесплатно вкатиться в айти 🔺Подборка топовых магистратур по Data Science ...и еще море полезнейшего контента. Я жалею, что не нашел этот канал раньше. Подписывайтесь, потом сами себе спасибо скажете: ⬇️ @postypashki_old

Нанимаете аутсорс, подрядчиков, фрилансеров? Попробуйте Битрикс24 Коллабы – платформа для эффективной работы с подрядчиками. Тут обсуждения превращаются в задачи, а видео созвон можно собрать одной кнопкой. Любой проект можно разложить по полочкам с понятным ТЗ и обозначенными сроками. Работайте в Битрикс24 и создавайте Коллабы с подрядчиками. Начать #реклама 16+ collabs.bitrix24.ru О рекламодателе

🤔 В чём разница между тегами div, img, p? Все три тега (<div>, <img>, <p>) используются в HTML, но у них разные предназначения и свойства. 🚩Тег `<div>` (контейнер) Блочный элемент, используется для группировки других элементов и стилизации.

<div class="container">
  <p>Привет, мир!</p>
  <img src="image.jpg" alt="Картинка">
</div>

Особенности <div> - Не несёт семантического значения (просто контейнер). - По умолчанию блочный (занимает всю ширину). - Используется для группировки и стилизации через CSS. 🚩Тег `<img>` (изображение) Строчно-замещающий элемент, предназначен для вставки картинок.

<img src="logo.png" alt="Логотип">

Особенности <img> - Не имеет закрывающего тега (<img> – одиночный тег). - Строчно-замещающий (ведёт себя как inline, но может иметь размеры). - Заменяется на картинку при отображении страницы. - Требует alt для доступности и SEO. 🚩Тег `<p>` (абзац) Блочный элемент, предназначен для разметки текста.

<p>Это текст в абзаце.</p>

Особенности <p> - Блочный (начинается с новой строки). - Используется только для текста. - Внутри нельзя размещать другие блочные элементы (<div>, <p>). Ошибка

<p>Привет, мир!</p>
<p>Второй абзац</p> <!-- Это правильно -->
<p><div>Ошибка!</div></p> <!-- ❌ Нельзя вставлять <div> внутрь <p> -->

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

Методичка: как сделать онлайн-встречи эффективнее Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать? Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи. Из методички узнаете: - Как создать постоянную ссылку и подключаться на встречи в 2 клика, - Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных. - Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту. Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч. Получить гайд можно бесплатно на сайте. Скачать #реклама 16+ mts-link.ru О рекламодателе

🤔 Какие есть альтернативы у Redux? Альтернативы Redux включают: - Context API + useReducer – встроенное в React решение для управления состоянием. - Recoil – удобный state-менеджер с простым API и атомарным состоянием. - Zustand – легковесное хранилище с удобным синтаксисом. - MobX – реактивное управление состоянием с автоматическими обновлениями. - Jotai – атомарное управление состоянием, похожее на Recoil, но проще. Выбор зависит от сложности проекта: для небольших – Context API, для масштабных – Zustand, MobX или Redux Toolkit. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

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

🤔 Что такое async и await? Это синтаксический сахар для работы с асинхронными операциями, делающий код, работающий с асинхронными действиями, такими как запросы к серверу или чтение файлов, более читаемым и легким для понимания. Этот синтаксис был введен в ES2017 (ES8) и строится на промисах (Promises). 🚩Ключевое слово async Используется перед объявлением функции. Это позволяет функции автоматически возвращать промис. Если эта функция возвращает не промис, то возвращаемое значение будет автоматически обернуто в промис.

async function fetchData() {
  return 'данные';
}

fetchData().then(data => console.log(data)); // выводит "данные"

🚩Ключевое слово await Используется для ожидания результата промиса внутри асинхронной функции async. Оно приостанавливает выполнение асинхронной функции до тех пор, пока промис не выполнится (т.е. не будет разрешен или отклонен). ЕЕ можно использовать только внутри асинхронных функций.

async function fetchData() {
  let data = await fetch('https://api.example.com/data');
  let json = await data.json();
  return json;
}

🚩Плюсы ➕Улучшение читаемости кода Асинхронный код, написанный с использованием async/await, выглядит более структурированным и похожим на синхронный код, что упрощает его понимание ➕Упрощение обработки ошибок В асинхронных функциях с await можно использовать стандартный синтаксис try/catch для обработки ошибок, что делает код единообразнее. ➕Избегание "callback hell" Использование async/await позволяет избежать сложностей с вложенными коллбэками, которые могут возникнуть при использовании промисов или старого стиля асинхронного кода с коллбэками. Ставь 👍 и забирай 📚 Базу знаний

На easyoffer 2.0 появится: 🎯 Тренажер "Проработка вопросов" ✅ Метод интервальных повторений и флеш-карточки ✅ Персональный подход изучения на основе ваших ответов ✅ Упор на самые частые вопросы 📌 Интервальные повторения по карточкам это научно доказанный метод эффективного обучения. Каждая карточка – это вопрос, который задают на собеседовании, вы можете выбрать "Не знаю", "Знаю", "Не спрашивать". После ответа вам показывается правильный ответ и возможность изучить вопрос подробнее (примеры ответов других людей). От ваших ответов зависит то, как часто карточки будут показываться на следующей тренировке. Трудные вопросы показываются чаще, простые – реже. Это позволяет бить в слабые места. Кроме того, изначальный порядок карточек зависит от частотности (вероятности встретить вопрос). 🚀 Благодаря этому тренажеру вы сможете очень быстро подготовиться к собеседованию, т.к. фокусируетесь отвечать на самые частые вопросы. Именно так готовился я сам, когда искал первую работу программистом. Уже в течение недели я объявлю о старте краудфандинговой кампании на сбор финансирования, чтобы ускорить разработку сайта. Все кто поддержит проект до официального релиза получат самые выгодные условия пользования сервисом. А именно 1 год доступа к сайту по цене месячной подписки. ‼️ Очень важно, чтобы как можно больше людей поддержали проект в первые дни, по-этому те кто окажет поддержку первыми получат еще более выгодную стоимость на годовую подписку и существенный 💎 бонус о котором я позже расскажу в этом телеграм канале. Подписывайтесь, чтобы узнать о старте проекта раньше других и воспользоваться лимитированными вознаграждениями.

Курс "Дизайн карточек для WB и Ozon". Бесплатно и с нуля Дизайнер карточек для маркетплейсов — востребованная и доходная профессия 💰 Научись ей бесплатно! - Бесплатный доступ - Разбор ДЗ от наставника - Мощные кейсы в портфолио Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

🤔 Что если микрозадача создаст еще микрозадачу? Если микрозадача (например, Promise) вызывает новую микрозадачу, она будет выполнена сразу после текущей, до перехода к следующей макрозадаче (например, setTimeout). Это может привести к бесконечному циклу, задерживая рендеринг и блокируя интерфейс. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний