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

Просто показываем промокод Просто предлагаем съездить отдохнуть со скидкой 5000 рублей от Яндекс Путешествий. Больше ничего от вас не хотим, потому что понимаем, что сил нет. Забронировать #реклама travel.yandex.ru О рекламодателе

🤔 Как перехватить глобально ошибки по бэкенду? - Через глобальный обработчик ошибок (например, process.on('uncaughtException') в Node.js); - Использовать middleware-логгер; - Интеграция с системами мониторинга (например, Sentry, Logstash); - Обработка try/catch на верхнем уровне запроса. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Массажные кресла для дома! Приятная забота о себе! Массажные кресла Yamaguchi. Cканируют зажимы в теле. 2 массажных механизма. Узнать больше #реклама yamaguchi.ru О рекламодателе

🤔 Как оптимизировать страницы для печати? Если пользователи захотят распечатать вашу веб-страницу, важно, чтобы она выглядела чисто и профессионально. Для этого используется CSS-медиа-правило @media print, которое позволяет задать специальные стили для печати. 🟠Использование `@media print` Вы можете задать стили, которые будут применяться только при печати

@media print {
  body {
    font-size: 12pt; /* Оптимальный размер шрифта */
    color: black; /* Убираем цветной текст для экономии чернил */
    background: none !important; /* Убираем фон */
  }
}

🟠Убираем ненужные элементы (меню, рекламу, анимации) Некоторые элементы (например, навигация, футер, кнопки) не нужны при печати, их можно скрыть

@media print {
  nav, .sidebar, .ads, .button {
    display: none; /* Скрываем ненужное */
  }
}

🟠Изменяем ширину страницы и текст Обычно страницы шире, чем лист бумаги. Можно задать max-width для удобства

@media print {
  body {
    width: 100%; 
    max-width: 800px; /* Уменьшаем ширину */
    margin: auto; /* Центрируем */
  }
}

Заменяем цвета на чёрно-белые (экономия чернил)

@media print {
  a {
    color: black !important; /* Делаем ссылки чёрными */
    text-decoration: underline; /* Добавляем подчёркивание */
  }
}

🟠Добавляем URL ссылок в текст При печати гиперссылки не работают, поэтому можно показать их адрес

@media print {
  a::after {
    content: " (" attr(href) ")"; /* Добавляем URL рядом со ссылкой */
    font-size: 10pt;
    color: gray;
  }
}

Избегаем разрывов страниц в неудобных местах

@media print {
  h1, h2, h3 {
    page-break-after: avoid; /* Не разрываем страницу после заголовка */
  }
  p {
    page-break-inside: avoid; /* Не разрываем абзац на две страницы */
  }
}

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

Предзаказ Samsung Galaxy Z серии на сайте МТС! Оформите предзаказ на Samsung Galaxy Z серии с выгодой до 20 000р. и повышенным кешбэком 10% на сайте МТС! Рассрочка 0-0-24 Узнать больше #реклама shop.mts.ru О рекламодателе

🤔 Какие есть способы фокусировки на элементе? - element.focus() - autofocus в HTML. - ref + useEffect в React. - Навигация через tabindex. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 С помощью чего можно рассчитать идентификатор в js? В JavaScript есть несколько способов сгенерировать уникальный идентификатор (ID), в зависимости от требований: 🟠 Генерация UUID UUID (универсально уникальный идентификатор) – это 128-битное число, представленное строкой в формате xxxxxxxx-xxxx-Mxxx-Nxxx-xxxxxxxxxxxx. Генерация с помощью crypto.randomUUID() (современный способ)

const id = crypto.randomUUID();
console.log(id); // Например: "3d593c8e-7a34-45f7-9a14-2f5f5788d4ec"

Использование библиотеки uuid

import { v4 as uuidv4 } from 'uuid';

const id = uuidv4();
console.log(id); // "f47ac10b-58cc-4372-a567-0e02b2c3d479"

🟠Хеш-функции (SHA, MD5) Если нужно вычислить уникальный идентификатор на основе входных данных (например, строки или объекта), можно использовать хеш-функции. SHA-256 через crypto.subtle

async function generateHash(input) {
    const encoder = new TextEncoder();
    const data = encoder.encode(input);
    const hashBuffer = await crypto.subtle.digest('SHA-256', data);
    return [...new Uint8Array(hashBuffer)].map(b => b.toString(16).padStart(2, '0')).join('');
}

generateHash("hello").then(console.log);
// Например: "2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824"

🟠Генерация случайного идентификатора Если нужна просто случайная строка, можно использовать Math.random(). Базовая генерация ID

const id = Math.random().toString(36).substring(2, 10);
console.log(id); // Например: "5g7f8a1z"

Более безопасный вариант с crypto.getRandomValues()

function generateRandomId(length = 16) {
    const array = new Uint8Array(length);
    crypto.getRandomValues(array);
    return [...array].map(b => b.toString(16).padStart(2, '0')).join('');
}

console.log(generateRandomId(8)); // Например: "a3f9b8c7"

🟠Инкрементальные ID Если нужно просто увеличивающееся число (например, ID для записей в массиве), можно использовать счётчик

let counter = 0;
function generateIncrementalId() {
    return ++counter;
}

console.log(generateIncrementalId()); // 1
console.log(generateIncrementalId()); // 2
console.log(generateIncrementalId()); // 3

🟠Хеширование строки (например, объекта) Можно создать ID, основываясь на JSON-объекте.

function hashObject(obj) {
    return JSON.stringify(obj)
        .split("")
        .reduce((hash, char) => {
            return ((hash << 5) - hash) + char.charCodeAt(0);
        }, 0)
        .toString(16);
}

console.log(hashObject({ name: "Alice", age: 25 })); // Например: "-3d4e5f"

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

🤔 Как работают плавающие элементы (floats)? При установке float: left или float: right: - элемент вырывается из нормального потока документа; - соседние элементы (особенно текст) обтекают его; - родитель может "не заметить" плавающий элемент, если не применить очистку (clearing). Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Как работают плавающие элементы (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;
}

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

Базовая структура ML: задачи, pipeline, метрики Высокая точность модели ещё не означает, что она решает нужную задачу. Ошибка может появиться гораздо раньше — при выборе постановки, метрики или функции потерь. 6 августа в 20:00 на открытом уроке курса «ML System Design» разберёте базовую структуру ML-системы. Увидите, как связаны тип задачи, подготовка данных, обучение и оценка модели. Поймёте, почему метрику нужно выбирать с учётом бизнес-цели и какую роль в обучении играет функция потерь. После занятия у вас будет цельная схема работы — от определения задачи до интерпретации результата. Вы сможете осознаннее выбирать подход к обучению, оценивать качество модели и не путать метрики с функциями потерь. Урок проведёт Михаил Лебедев. Узнать больше #реклама 16+ otus.ru О рекламодателе

🤔 Как делим контракт из 4 методов? Контракт — это API-интерфейс. Делим по действиям: - /price — GET, POST, PATCH, DELETE. Или разбиваем на: - /price/get, /price/set, /price/subscribe, /price/history. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

🤔 Когда используются теги div и span? <div> и <span> — это самые универсальные HTML-теги, но у них разные роли: <div> — блочный контейнер (для структуры). <span> — строчный контейнер (для оформления текста). 🚩Примеры использования `<div>` Разметка секций страницы

<div class="header">Навигация</div>
<div class="content">Основной контент</div>
<div class="footer">Подвал</div>

Группировка элементов

<div class="card">
  <h2>Заголовок</h2>
  <p>Текст внутри карточки</p>
</div>

🚩Когда использовать `<span>`? <span> используется для выделения части текста или небольших элементов. Это строчный элемент, который не переносится на новую строку. 🚩Примеры использования `<span>` Выделение части текста

<p>Сегодня <span class="highlight">солнечная погода</span>.</p>

Иконки, кнопки и маленькие элементы

<button>
  <span class="icon">🔍</span> Поиск
</button>

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

Метрики Delivery Manager: что измерять, а что — нет Большое количество показателей не делает поставку более управляемой. Команда может регулярно заполнять отчёты, отслеживать скорость и обновлять дашборды, но всё равно с опозданием узнавать о проблемах со сроками, качеством и нагрузкой. Метрика полезна только тогда, когда помогает увидеть риск, принять решение или изменить процесс, а не просто создаёт ощущение контроля. На открытом уроке 19 августа в 20:00 в OTUS разберём, какие показатели отражают реальное состояние поставки и помогают Delivery Manager управлять сроками, качеством и предсказуемостью работы. Поговорим о том, как выбирать метрики для команды и проекта, не перегружая процессы лишней отчётностью. Узнать больше #реклама 16+ otus.ru О рекламодателе

🤔 Как настраивать собственную кастомизацию форм? Можно использовать стили для стандартных элементов формы, применять псевдоэлементы, использовать кастомные компоненты на основе div и JavaScript. Также часто подключают библиотеки или UI-фреймворки. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Где чатиться с аутсорсерами и подрядчиками? Пригласите подрядчиков и клиентов в ваш рабочий мессенджер Битрикс24. Они увидят только свои чаты, задачи и звонки, а внутренние данные компании остаются закрытыми. Всё нужное для работы: • Общий чат проекта со всеми участниками • Доступ к задачам, файлам и календарю проекта • Гибкие права доступа и безопасность данных Общайтесь, созванивайтесь и согласовывайте прямо в Битрикс24, можно в мобильном приложении. Зарегистрироваться #реклама 16+ bitrix24.ru О рекламодателе

🤔 Какая есть важная особенность у pipe? Это популярная концепция в программировании, особенно в функциональных языках и библиотеках вроде RxJS (в контексте реактивного программирования). Она используется для последовательного применения функций к данным. 🚩Почему это важно? 🟠Чистота pipe работает с чистыми функциями, которые не изменяют исходные данные и возвращают новый результат. Это повышает предсказуемость кода. 🟠Композиция Вместо вложенных вызовов функций (когда результат одной функции передается в другую) pipe упрощает цепочку, делая её линейной. 🟠Читаемость Код становится проще для понимания, особенно если функций много. 🟠Легкость модификации Можно легко добавлять или удалять шаги в цепочке, не меняя структуру кода. 🚩Как работает `pipe`? pipe принимает несколько функций в качестве аргументов и применяет их слева направо к переданным данным. То есть результат одной функции передается как вход в следующую. 🚩Пример реализации простого `pipe`

const pipe = (...functions) => (input) => 
  functions.reduce((acc, fn) => fn(acc), input);

// Пример функций
const multiplyByTwo = (num) => num * 2;
const addThree = (num) => num + 3;
const square = (num) => num ** 2;

// Использование pipe
const processNumber = pipe(multiplyByTwo, addThree, square);

console.log(processNumber(5)); // ((5 * 2) + 3) ** 2 = 121

🚩Использование в RxJS В контексте RxJS pipe используется для работы с потоками данных, где через него можно передавать операторы, такие как map, filter, mergeMap и другие.

import { of } from 'rxjs';
import { map, filter } from 'rxjs/operators';

// Создаем поток данных
const numbers$ = of(1, 2, 3, 4, 5);

// Используем pipe для применения операторов
numbers$
  .pipe(
    filter((num) => num % 2 === 0), // Оставляем только четные
    map((num) => num * 10)          // Умножаем их на 10
  )
  .subscribe((result) => console.log(result)); 
// Вывод: 20, 40

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

Обнулите все свои кредиты и долги по госпрограмме! Долги от 200т.р. Законно по ФЗ127. 0 проигранных дел. Консультация 0₽. Сохраню ипотеку. Узнать больше Банкротство влечет негативные последствия, в том числе ограничения на получение кредита и повторное банкротство в течение пяти лет. Предварительно обратитесь к своему кредитору и в МФЦ. #реклама spishy-dolg.ru О рекламодателе

🤔 Что ещё является важной частью понимания кода? Структура проекта, читаемость, консистентность, наличие документации, комментирование сложных участков и покрытие тестами. Также важен контекст — бизнес-цель и поведение кода. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Регистрация товарного знака с полным сопровождением Зарегистрируем ваш товарный знак онлайн от 27 490 ₽! ✅ Бесплатно проверим ✅ Подадим заявку за 10 минут ✅ Доставим свидетельство через 6-8 месяцев Обращайтесь. Сделаем всё быстро! Узнать больше #реклама onlinepatent.ru О рекламодателе

🤔 Можешь ли пояснить разницу между progressive enhancement и graceful degradation? Оба подхода используются в веб-разработке для обеспечения доступности и совместимости веб-приложений на разных устройствах и браузерах. 🚩Progressive Enhancement (Прогрессивное улучшение) Сначала создаём простую, но рабочую версию сайта, которая работает на всех устройствах и браузерах. Затем добавляем улучшения (CSS-анимации, сложный JavaScript), которые работают только в современных браузерах. 🚩Graceful Degradation (Постепенное упрощение) Сначала создаём полнофункциональную версию с последними технологиями. Затем добавляем fallback'и (упрощённые версии) для старых браузеров. Используем CSS Grid, но добавляем @supports для fallback'а на Flexbox Приложение на React, но показываем простой HTML, если JavaScript отключён. Ставь 👍 и забирай 📚 Базу знаний