✍️ Frontend Interview Questions — шпаргалка для подготовки к собеседованиям!

В репозитории собраны не просто вопросы, а готовые ответы и пояснения по ключевым концепциям фронтенда, включая типичные спорные моменты и задачи, на которых часто проверяют понимание языка и React. Можно использовать для повторения теории, самопроверки и поиска тем, которые стоит подтянуть.

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

CSS теперь разрешает создавать собственные функции!

В дизайн-системах постоянно повторяются одни и те же вычисления.

.card {
  padding: calc(6 * 4px);
}

.modal {
  gap: calc(4 * 4px);
}

Можно вынести саму логику вычисления в @function.

@function --space(--n) {
  result: calc(var(--n) * 4px);
}

И дальше использовать её практически как встроенную CSS-функцию.

.card {
  padding: --space(6);
}

.modal {
  gap: --space(4);
}

Параметры можно типизировать, чтобы функция принимала только ожидаемые значения.

@function --space(--n <number>) returns <length> {
  result: calc(var(--n) * 4px);
}

Причём функция может содержать не только calc(): внутри доступны локальные CSS-переменные и условная логика, а одна пользовательская функция может вызывать другую.

Поддержка пока ограничена.

🔥 Смысл @function не в сокращении пары строк. CSS получает переиспользуемую логику с аргументами и типами — то, ради чего раньше приходилось повторять формулы или переносить вычисления в препроцессор.

📣 Code Ready | #совет

🔴AI кодинг интервью с разработчиком из международного FinTech в четверг в 19:00

ДА! Вайбкодинг реально начали проверять на интервью, поэтому мы нашли собеседующего, который проводит AI-секцию в международном финтехе, чтобы вы увидели что на ней спрашивают и как к ней подготовиться

Как это будет:
📂 Александр Дмитриев, разработчик из известного международного финтеха, ex-VK, ex-Ozon проведет вайбкодинг секцию разработчику-добровольцу
📂 Александр будет задавать реальные вопросы с секций, которые проводил сам и комментировать ответы
📂 В конце можно будет задать любой вопрос Александру

Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят сменить работу, повысить свой грейд, ЗП и прокачать скиллы.

Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot

Реклама.
О рекламодателе.

inert — отключение целой области интерфейса без обхода дочерних элементов!

Иногда часть интерфейса требуется временно исключить из взаимодействия: например, при открытии выдвижной панели или на время операции, когда фоновый интерфейс не должен принимать пользовательский ввод.

Управлять состоянием каждого элемента отдельно можно, но такой подход требует учитывать разные типы элементов и механизмы взаимодействия:

button.disabled = true;
input.disabled = true;
link.tabIndex = -1;

disabled применим не ко всем HTML-элементам, а изменение tabindex решает только задачу фокуса. Для блокировки целой области документа существует глобальный атрибут inert:

<main id="content">
  <button>Сохранить</button>
  <a href="/profile">Профиль</a>
  <input type="text">
</main>

Состоянием можно управлять через HTMLElement.inert, без поиска и изменения каждого интерактивного элемента внутри контейнера:

const content = document.querySelector('#content');

content.inert = true;

После установки inert контейнер и его потомки в плоском дереве (flat tree) не могут получать фокус. Это относится и к программному вызову focus():

content.inert = true;

document.querySelector('#content input').focus();

Пользовательская активация также блокируется: клик пользователя по кнопке внутри inert-области не приводит к click на этой кнопке. Программный element.click() при этом следует рассматривать отдельно:

const button = document.querySelector('#content button');

button.addEventListener('click', () => {
  console.log('click');
});

content.inert = true;

В отличие от inert, pointer-events: none влияет на определение элемента под указателем, но сам по себе не исключает элементы из последовательной навигации с клавиатуры:

.content {
  pointer-events: none;
}

inert действует шире: элементы не получают фокус, пользовательское взаимодействие блокируется, а содержимое исключается из дерева доступности.

Например, основной интерфейс можно деактивировать при открытии выдвижной панели, расположенной вне inert-контейнера:

<main id="content">
  <!-- основной интерфейс -->
</main>

<aside id="drawer" hidden>
  <!-- выдвижная панель -->
</aside>

Состояние всего фонового интерфейса переключается одной операцией независимо от количества элементов внутри main:

function openDrawer() {
  content.inert = true;
  drawer.hidden = false;
}

function closeDrawer() {
  content.inert = false;
  drawer.hidden = true;
}

Для модальных интерфейсов есть <dialog>. Вызов showModal() помещает диалог в верхний слой (top layer), а остальную часть документа браузер делает inert автоматически:

const dialog = document.querySelector('dialog');

dialog.showModal();

Сам inert не задаёт визуальное состояние заблокированной области. При необходимости оно оформляется отдельно через CSS:

[inert] {
  opacity: 0.6;
}

🔥 inert позволяет исключить целую область документа из взаимодействия без ручного управления disabled, tabindex и состоянием каждого вложенного элемента.

📣 Code Ready | #практика

👩‍💻 Тег для перевода данных с человеческого языка на компьютерный!

Тег <data> позволяет показать пользователю обычный текст и одновременно связать его с другим значением, которое удобно использовать в скриптах или при обработке данных.

В <data> используются:

• содержимое тега — текст, который видит пользователь;
• value — машиночитаемое значение;
• JavaScript — при необходимости может получить значение через свойство value.

Элемент <data> стоит использовать, когда вы не хотите выделять элементы на вёрстке, например, при помощи <div> или <span>, но вам нужно связать текст с внутренним ID или значением, который вы будете использовать при обработке запросов пользователя.

📣 Code Ready | #атрибут

👩‍💻 Можно ли изменить стиль поля, которое браузер заполнил автоматически?

:autofill — псевдокласс, который находит поля формы, куда браузер сам подставил сохранённые данные: адрес, телефон, почту. Нужен, чтобы подсвеченные браузером поля не выбивались из дизайна формы.

Как работает автозаполнение:

• срабатывает только по инициативе браузера, через JavaScript вызвать его нельзя;
• браузер может заполнить сразу несколько полей формы;
• поле остаётся :autofill, пока пользователь не изменит значение;
• после ручного редактирования оно больше не считается автозаполненным.

Не полагайтесь на :autofill для валидации: это лишь визуальное состояние, а не факт корректности данных.

📣 Code Ready | #свойство

scheduler.yield() — разбиваем долгую JS-задачу, чтобы не блокировать интерфейс!

Длительная синхронная работа на main thread блокирует выполнение других задач. Даже обычный цикл может превратиться в длительную задачу, если обработка элементов достаточно тяжёлая:

function processItems(items) {
  for (const item of items) {
    renderItem(item);
  }
}

Классический способ разбить такую работу — планировать продолжение через setTimeout(). В современных браузерах для добровольной передачи управления планировщику есть более специализированный механизм — scheduler.yield():

async function processItems(items) {
  for (let i = 0; i < items.length; i++) {
    renderItem(items[i]);

    if ((i + 1) % 100 === 0) {
      await scheduler.yield();
    }
  }
}

scheduler.yield() приостанавливает текущую async-функцию и планирует её продолжение как отдельную задачу, давая браузеру возможность выполнить другую ожидающую работу на main thread:

await scheduler.yield();

// выполнение продолжится позже

Это принципиально отличается от await Promise.resolve(): resolved Promise продолжает выполнение через microtask queue и не обеспечивает полноценную передачу управления event loop для выполнения следующей задачи:

await Promise.resolve();

// продолжение выполняется как microtask

Делать yield() после каждой итерации не стоит: каждая передача управления создаёт дополнительные накладные расходы. Размер порции работы зависит от стоимости конкретных операций, поэтому 100 или 200 итераций — лишь пример, а не универсальное значение.

if ((i + 1) % CHUNK_SIZE === 0) {
  await yieldToMain();
}

Поддержка scheduler.yield() пока не универсальна, поэтому стоит предусмотреть запасной вариант:

function yieldToMain() {
  if (globalThis.scheduler?.yield) {
    return scheduler.yield();
  }

  return new Promise(resolve => setTimeout(resolve, 0));
}

🔥 scheduler.yield() полезен для кооперативного планирования длительной работы на main thread: обработки больших наборов данных и постепенного обновления сложного UI. Для тяжёлых вычислений, интенсивно использующих процессор, Worker остаётся предпочтительным решением: yield() не переносит вычисления с main thread, а только разбивает их выполнение во времени.

📣 Code Ready | #практика

🤔 Неожиданно интересная статья на Хабре: «Сложнейшая проблема компьютерных наук: центрирование»!

В этой статье:
• Разберётесь, почему Flexbox и Grid не гарантируют визуально идеальное выравнивание;
• Узнаете, как метрики шрифтов и высота строки влияют на положение текста;
• Посмотрите, почему иконки рядом с текстом часто «съезжают» и как это исправлять на практике.

🔊 Продолжай читать на Habr!

📣 Code Ready | #статья

👩‍💻 Псевдоэлемент для стилизации встроенной кнопки выбора файла внутри <input type="file">.

::file-selector-button — псевдоэлемент, представляющий кнопку внутри поля <input type="file">. Позволяет стилизовать её так же, как любую кнопку интерфейса: менять фон, бордеры, скругления, состояния наведения/фокуса и другие стили.

С его помощью можно настроить:

• background — цвет фона;
• color — цвет текста;
• border — рамку кнопки;
• padding — внутренние отступы;
• font — оформление текста.

Для лучшей доступности обеспечьте заметные стили фокуса (outline, outline-offset).

📣 Code Ready | #свойство