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

🤔 Как реализовать адаптивную верстку? Адаптивная верстка (responsive design) – это метод создания веб-страниц, которые корректно отображаются на разных устройствах (телефон, планшет, ноутбук, ПК). 🟠Гибкие сетки (Flexbox, Grid, `max-width`) Использование max-width вместо width

.container {
  width: 100%; /* Контейнер занимает всю ширину */
  max-width: 1200px; /* Но не больше 1200px */
  margin: auto; /* Центрирование */
}

Использование Flexbox

.container {
  display: flex;
  flex-wrap: wrap; /* Перенос элементов, если не влезают */
  justify-content: space-between;
}

.item {
  width: 48%; /* Два элемента в ряд */
}

@media (max-width: 768px) {
  .item {
    width: 100%; /* Один элемент в ряд на маленьких экранах */
  }
}

Использование CSS Grid

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

🟠Медиа-запросы (`@media`) Изменяют стили в зависимости от ширины экрана.

/* Десктоп (от 1024px) */
body {
  font-size: 18px;
}

/* Планшеты (768px – 1023px) */
@media (max-width: 1023px) {
  body {
    font-size: 16px;
  }
}

/* Телефоны (до 767px) */
@media (max-width: 767px) {
  body {
    font-size: 14px;
  }
}

🟠Адаптивные изображения (`srcset`, `sizes`) Позволяет загружать разные изображения в зависимости от устройства.

<img 
  src="image-400.jpg" 
  srcset="image-800.jpg 800w, image-1200.jpg 1200w" 
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" 
  alt="Адаптивное изображение">

🟠Viewport (`meta viewport`) Управляет масштабированием на мобильных устройствах.

<meta name="viewport" content="width=device-width, initial-scale=1">

🟠CSS-фреймворки (Bootstrap, Tailwind) Фреймворки содержат готовые адаптивные классы. Bootstrap (грид-система)

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-12">Контент</div>
    <div class="col-md-6 col-sm-12">Контент</div>
  </div>
</div>

Tailwind CSS

<div class="grid grid-cols-2 md:grid-cols-3 sm:grid-cols-1 gap-4">
  <div class="bg-blue-500">1</div>
  <div class="bg-green-500">2</div>
  <div class="bg-red-500">3</div>
</div>

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

🎉 easyoffer 2.0 — релиз уже в этом месяце! Вас ждут новые фичи, о которых мы ранее даже не упоминали. Они сделают путь к офферам ещё быстрее и эффективнее. Расскажу о них чуть позже 👀 В честь запуска мы готовим ограниченную акцию: Первые 500 покупателей получат: 🚀 PRO тариф на 1 год с 50% скидкой Что нужно сделать: 🔔 Подпишитесь на этот Telegram-канал, чтобы первыми узнать о старте релиза. Сообщение появится в нем раньше, чем где-либо еще — вы успеете попасть в число первых 500 и получить максимальную выгоду. 🎁 А еще только для подписчиков канала ценный бонус в подарок к PRO тарифу. 📅 Официальный запуск — уже совсем скоро. Следите за новостями и не пропустите старт!

🤔 Как работает import и export? - export позволяет открыть переменные, функции, компоненты из модуля; - import — подключает экспортируемое в другом файле; Работают как часть модульной системы ES6, обеспечивают разделение кода и повторное использование. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Для чего нуден key при работе со списками? В React при рендере списков (например, через .map()) каждому элементу необходимо передавать уникальный key. Это помогает React оптимизировать перерисовку и правильно отслеживать изменения в списке. 🚩Почему `key` важен? React использует виртуальный DOM и при обновлении сравнивает новый список с предыдущим. Без key React не понимает, какие элементы изменились, удалились или добавились. Это может привести к неожиданному поведению, например, сбросу состояния или неправильному рендеру. 🚩Как использовать `key` правильно?

const users = ["Alice", "Bob", "Charlie"];

function UserList() {
    return (
        <ul>
            {users.map((user, index) => (
                <li key={user}>{user}</li> // Хорошо, если `user` уникален
            ))}
        </ul>
    );
}

🚩Что будет без `key`? Если не указать key, React выдаст предупреждение:

Warning: Each child in a list should have a unique "key" prop.

Кроме того, при изменении списка возможны проблемы с перерисовкой

{users.map((user, index) => (
    <input key={index} defaultValue={user} />
))}

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

🐍💩👩‍💻👩‍💻🧑‍💻🧑‍💻🐧👩‍💻🧑‍💻👩‍💻👩‍💻 В сети начали массово сливать курсы и книги известных онлайн школ по айти Вот отсортированная база с тонной материала (постепенно пополняется): (363 видео, 87 книги) — Python (415 видео, 68 книги) — Frontend (143 видео, 33 книги) — ИБ/Хакинг (352 видео, 89 книги) — С/С++/C# (343 видео, 87 книги) — Java/QA (176 видео, 32 книги) — Git/Linux (174 видео, 91 книги) — DevOps (167 видео, 53 книги) — PHP/1С (227 видео, 83 книги) — SQL/БД (114 видео, 77 книги) — Сисадмин (107 видео, 43 книги) — BA/SA (181 видео, 32 книги) — Go/Rust (167 видео, 43 книги) — Kotlin/Swift (112 видео, 24 книги) — Flutter (137 видео, 93 книги) — DS/ML (113 видео, 82 книги) — GameDev (183 видео, 37 книги) — Дизайн (136 видео, 33 книги) — PM/HR Скачивать ничего не нужно — все выложили в Telegram

Получи грант на обучение в Центральном университете Несгораемый грант до 2 800 000 Р на учебу в бакалавриате Центрального университета. Подробнее о гранте: – Покрывает до 100% стоимости обучения – Выдается на все 4 года обучения в вузе – Сумма гранта не уменьшается, а может увеличиться за дополнительные достижения и успехи в учебе. Для учеников 10-х и 11-х классов. Участвуй в отборе! Подать заявку #реклама apply.centraluniversity.ru О рекламодателе

🤔 Что делать, если консьюмер не разгребает очередь? - Увеличить количество инстансов консьюмера. - Оптимизировать обработку (batch, async). - Добавить Dead Letter Queue (DLQ). - Использовать rate limiting и backoff/retry. - Мониторить и алертить по lag'у. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Основные причины отказа от классовых компонентов в react? С появлением React Hooks в версии 16.8 (2019 год) классовые компоненты стали устаревшим способом создания компонентов. Сегодня функциональные компоненты с хуками заменяют классы. Давайте разберем почему. 🟠Меньше кода → чище и понятнее Функциональные компоненты короче, читаются легче, а код становится чище.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <button onClick={this.increment}>
        Счетчик: {this.state.count}
      </button>
    );
  }
}

Функциональный компонент (хуки делают код проще)

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Счетчик: {count}
    </button>
  );
}

🟠Легче управлять жизненным циклом (useEffect vs componentDidMount) В классах жизненный цикл* компонента состоит из нескольких методов (componentDidMount, componentDidUpdate, componentWillUnmount).

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: 0 };
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({ time: this.state.time + 1 });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return <p>Время: {this.state.time} секунд</p>;
  }
}

Функциональный компонент (хуки делают все проще)

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setTime(t => t + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  return <p>Время: {time} секунд</p>;
}

🟠Лучшая производительность (меньше потребления памяти) Классовые компоненты используют экземпляры классов, а функциональные компоненты – просто функции. Создают экземпляры this Обрабатывают setState Хранят лишние связи и контексты Не создают this Используют только нужные данные Оптимизируются через React.memo

const Button = React.memo(({ onClick }) => {
  console.log("Ререндер кнопки");
  return <button onClick={onClick}>Нажми</button>;
});

function App() {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => setCount(c => c + 1), []);

  return (
    <div>
      <p>Счетчик: {count}</p>
      <Button onClick={increment} />
    </div>
  );
}

🟠Легче переиспользовать логику (React Hooks vs HOC/Render Props) Раньше в классах код переиспользовали через HOC и Render Props, но это делало код сложным.

function withLogging(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      console.log("Компонент монтирован");
    }
    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

Хуки (useEffect) делают код чище

function useLogger() {
  useEffect(() => console.log("Компонент монтирован"), []);
}

function MyComponent() {
  useLogger();
  return <p>Привет, мир!</p>;
}

🟠Функциональные компоненты – будущее React React официально рекомендует использовать функциональные компоненты Dan Abramov (разработчик React) Новые фичи React (Suspense, Server Components) создаются для функциональных компонентов Классы не работают в React Server Components Большинство современных библиотек (Redux Toolkit, React Query) рассчитаны на хуки Ставь 👍 и забирай 📚 Базу знаний

ИИ + Тайм-менеджмент = Будущее продуктивности Хотите знать, как ИИ может оптимизировать работу вашей команды? В Таймлист ИИ мы делимся: ⚡ Свежими новостями из мира ИИ для бизнеса ⚡ Лайфхаками по тайм-менеджменту для команд 💻 Обновлениями и фичами Таймлист ИИ Управляйте временем с ИИ и увеличивайте эффективность! Подписаться #реклама 16+ tgryx.ru О рекламодателе

🤔 Для кого необходима семантическая верстка? - Для поисковых систем (SEO); - Для помощников с ограниченными возможностями (screen reader); - Для разработчиков и поддержки кода — читаемость и логика; - Для браузеров и парсеров — правильная обработка контента. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Новый кроссовер премиум-класса HONGQI HS5 от 3 990 000 ₽ Новый полноприводный кроссовер с просторным и комфортным салоном выгодно впечатляет! Записывайтесь на тест-драйв, чтобы почувствовать премиальный комфорт и мощь без компромиссов. Узнать больше #реклама hongqi.ru О рекламодателе

🤔 Почему методы жизненного цикла нельзя писать через прилоченную функцию? В Vue 2 и Vue 3 (Options API) методы жизненного цикла (mounted, created, beforeDestroy и др.) должны быть обычными функциями, а не стрелочными (() => {}). 🟠Как работает `this` в Vue? Когда Vue вызывает метод жизненного цикла, он автоматически привязывает this к экземпляру компонента.

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted() {
    console.log(this.message); // ✅ Работает, this = { message: "Привет!" }
  }
};

🟠Почему стрелочная функция не работает? Стрелочные функции не создают свой собственный this, а берут this из внешнего контекста (того, что было при их создании).

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted: () => {
    console.log(this.message); // ❌ Ошибка: this === undefined
  }
};

🟠Как стрелочные функции всё-таки можно использовать? Хотя стрелочные функции нельзя использовать для методов жизненного цикла, их можно применять внутри обычных методов:

export default {
  data() {
    return { message: "Привет!" };
  },
  mounted() {
    setTimeout(() => {
      console.log(this.message); // ✅ Работает, this берётся из `mounted()`
    }, 1000);
  }
};

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

Присоединяйся к хакатону года в сфере travel-tech - О!Хакатону от Островка 💚 Островок приглашает Go и Python разработчиков, а также аналитиков и продакт-менеджеров попробовать свои силы в реальных бизнес-задачах и побороться за денежный приз. Мероприятие пройдет полностью в онлайн-формате, участвовать можно из любой точки мира, самостоятельно или в команде. Призовой фонд: 1 000 000 ₽ Регистрация открыта до 18 сентября. Стартуем 26 сентября! 🚀 Подробности и регистрация Реклама. ООО "БРОНИРОВАНИЕ ГОСТИНИЦ". ИНН 7703389880.

🤔 Какие способы изоляции стилей ты знаешь? Изоляция стилей может быть достигнута с помощью CSS-модулей, которые создают уникальные имена классов для предотвращения конфликта стилей. Shadow DOM изолирует стили внутри веб-компонентов, не позволяя им влиять на внешний код. Также можно использовать атрибуты, такие как scoped для стилей внутри Vue.js или инкапсуляцию стилей с помощью @import и :host в веб-компонентах. Все эти способы помогают избежать пересечения стилей и гарантируют их изоляцию. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое семантические коммиты? Семантические коммиты – это соглашение о формате сообщений коммитов в системе контроля версий (обычно Git), которое помогает делать историю изменений более понятной и удобной для автоматического анализа. Обычно используется стандарт Conventional Commits, который вводит строгую структуру сообщений коммитов. 🚩Формат семантического коммита Коммит должен начинаться с типа изменения, а затем кратко описывать суть правки. Основной шаблон

<тип>(<область>): <краткое описание>

🚩Основные типы коммитов 🟠feat добавление новой функциональности 🟠fix исправление ошибки 🟠docs изменение документации 🟠style исправления, не влияющие на логику (например, форматирование) 🟠refactor переработка кода без изменения функциональности 🟠test добавление или обновление тестов 🟠chore изменения, не влияющие на код (например, обновление зависимостей) 🚩Примеры 1⃣Добавление новой функции

feat(auth): добавлена аутентификация через Google

2⃣Исправление ошибки

fix(login): исправлен баг с неверным редиректом

3⃣Улучшение кода без изменения

refactor(api): оптимизирован алгоритм фильтрации данных

4⃣Обновление документации

docs(readme): добавлены инструкции по развертыванию

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

ЖК «Мечта». Готовые дома для всей семьи от 10 000 ₽/мес Полноценная жизнь за городом в окружении леса и трех озер с собственными пляжами. ✅ Современные школы и детские сады ✅ Чистый воздух, реликтовые озёра ✅ 17 мин. езды до МЦД Лобня ✅4 квартала в продаже: выгодная ипотека, беспроцентная рассрочка, ключи сразу! Узнать больше Изучите все условия кредита (займа) на сайте в соответствующем разделе. Оценивайте свои финансовые возможности и риски. Финансовые услуги оказывает: ПАО "Банк ВТБ". #реклама mrqz.me О рекламодателе

🤔 Что такое блочная модель? Блочная модель (Box model) описывает, как браузер отображает и рассчитывает размеры элементов: - content → padding → border → margin. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Что такое git-flow? Это рабочая модель ветвления, предложенная Винсентом Дриссеном в 2010 году. Эта модель определяет строгий набор правил для создания веток и их слияния, что помогает более организованно управлять процессом разработки, особенно в условиях, когда над проектом работает много людей. Он предназначен для упрощения процесса выпуска новых версий программного обеспечения и обеспечения стабильности кодовой базы. 🚩Основные ветки 🟠master Содержит стабильную версию кода, готовую к выпуску (release). 🟠develop Основная ветка для разработки, содержит последние изменения кода для следующего выпуска. 🚩Вспомогательные ветки 🟠feature Для разработки новых функций. Каждая ветка создается для работы над определенной задачей и в конечном итоге сливается с develop. 🟠release Предназначенные для подготовки новых выпусков продукта. В них может вестись работа по исправлению ошибок, документации и другим задачам, связанным с выпуском. После завершения подготовки ветка release сливается с master и с develop. 🟠hotfix Для быстрого исправления ошибок в продакшен-версии. Создаются от ветки master, и после исправления сразу же сливаются обратно в master и develop. Ставь 👍 и забирай 📚 Базу знаний

Скидка до 20% на готовые квартиры — Мкр. «Самолёт» Жилой микрорайон расположен на северо-западе Краснодара, в районе Западного Обхода. Он находится далеко от промышленных предприятий. Здесь будет всё для комфортной жизни: современные дома с разными планировками, школы и детские сады, поликлиника, торговые центры, парки и аллеи. Центр притяжения микрорайона — бульвар длиной 1,6 км с зонами для отдыха и развлечений. На территории проекта расположено: 4 школы, 10 детских садов, спортивные площадки. - Квартиры от 3,8 млн рублей - Квартиры с выгодой до 1,9 млн. рублей - Выгодные условия покупки квартир - ипотечные каникулы с бонусом до 700 000 рублей. Выбирайте квартиру по лучшей цене на сайте! Получить предложение Проектная декларация на сайте https://наш.дом.рф/ #реклама mrqz.me О рекламодателе

🤔 Что будет, если забиндить два контекста подряд? Если контексты в DI фреймворке (например, в Angular, React или NestJS) перекрывают друг друга, то: - Последний контекст (или более локальный) переопределит предыдущий. - Может возникнуть конфликт зависимостей или непредсказуемое поведение. Важно понимать иерархию инжекторов и область действия каждого контекста. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний