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

Предзаказ 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 отключён. Ставь 👍 и забирай 📚 Базу знаний

Профессиональный бесщеточный винтоверт... Купить KLDV18B-80 KLPRO на vseinstrumenti Узнать больше #реклама vseinstrumenti.ru О рекламодателе

🤔 В чём разница между foreach и map? forEach выполняет функцию для каждого элемента массива, не возвращая нового массива, тогда как map создает новый массив, заполняя его результатами выполнения функции для каждого элемента исходного массива. forEach обычно используется для выполнения побочных эффектов, таких как изменение существующих данных или вызов внешних функций. map удобен для преобразования массива в новый массив с изменёнными данными. Если требуется создать новый массив, предпочтительнее использовать map. Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚 Базу знаний

Онлайн-магистратура для IT: ИТМО, МИФИ + Яндекс Программы онлайн-магистратуры ИТМО и МИФИ в партнёрстве с Яндексом. Актуальные знания, практическое обучение и гибкий график. Учитесь, совмещая с работой. Доступна господдержка оплаты, отсрочка от армии Перейти на сайт #реклама 16+ practicum.yandex.ru О рекламодателе

🤔 Что такое псевдоклассы? Это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или ID напрямую в HTML-код. С их помощью можно, например, изменить внешний вид ссылок при наведении курсора, стилизовать четные и нечетные элементы списка, изменять стиль элементов при получении фокуса и многое другое. :hover — применяется к элементу, когда на него наводят курсор мыши.

a:hover {
  color: red; /* Ссылка станет красной при наведении /
}

:focus — применяется к элементу, когда он получает фокус (например, при переходе на элемент с помощью клавиатуры или при клике мыши).

input:focus {
  border-color: blue; / Граница инпута станет синей при фокусе /
}

:active — применяется к элементу в момент его активации пользователем (например, во время клика по кнопке).

button:active {
  transform: scale(0.98); / Кнопка немного уменьшится при клике /
}

:nth-child() — позволяет стилизовать элементы в зависимости от их порядка среди детей родительского элемента.

li:nth-child(odd) {
  background-color: gray; / Заливка каждого нечетного элемента списка /
}

:not() — исключает из выборки элементы, соответствующие указанному селектору.

div:not(.special) {
  color: green; / Применяется к каждому div, который не имеет класса special */
}

🚩Зачем нужны псевдоклассы? Они делают CSS более мощным и гибким, позволяя разработчикам применять стили к элементам на основе их состояния или положения в документе, без изменения HTML-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя. Ставь 👍 и забирай 📚 Базу знаний