Frontend Interview - собеседования по Javascript / Html / Css

Обычный дейлик

👉 @frontendInterview

Мои 7 правил при собеседовании разработчиков

За последние несколько лет я перестроил свой процесс найма разработчиков, начал по-другому готовиться к собеседованиям и проверять нужные навыки. Как мне кажется, у меня получилось повысить свою продуктивность и научиться нанимать подходящих разработчиков в проекты, где я работаю.

Пару недель назад меня попросили помочь на техническом собеседовании для Senior/Lead backend-разработчика и поделиться опытом. В процессе я формализовал несколько правил, которых придерживаюсь при проверке кандидатов. Чем я и хочу поделиться.

Ниже — мои советы по проведению интервью с конкретными примерами. Уточню, что это не подробное руководство по найму на конкретную должность, а универсальные рекомендации для всех интервью с разработчиками.

👉 @frontendInterview

Как встроить содержимое внешнего сайта на свой?

<iframe> — это контейнер, который позволяет вставить любой HTML-документ из другого источника. Часто этот документ интерактивный — например, карта, видео или пост из соцсети.

Этот контейнер обычно называют фреймом. Внешний вид фрейма и его положение на странице можно задать через CSS.

Пример
С помощью такого нехитрого кода мы можем встроить карту размером 560 на 400 пикселей на любую страницу:

<iframe
  id="inlineFrameExample"
  title="Inline Frame Map"
  width="560"
  height="400"
  frameborder="1"
  allowfullscreen="true"
  src="https://yandex.ru/map-widget/v1/-/CBFkaYSE0A"
>
</iframe>

Часто сервисы, из которых мы хотим что-то встроить (карты, посты и тому подобное), сами могут сгенерировать вам <iframe>. Его останется только добавить в свой код.

👉 @frontendInterview

👉 @frontendInterview

Зачем нужен eslint?

ESLint – это инструмент для автоматического анализа и исправления кода в JavaScript и TypeScript. Он помогает разработчикам следовать единым стилям кодирования, находить ошибки и предотвращать баги ещё до запуска кода.

Почему ESLint полезен?
Без линтера код может быть неаккуратным и содержать ошибки, которые сложно отловить.

Проблемы без ESLint
- Разные стили написания кода
- Пропущенные точки с запятой или лишние пробелы
- Неиспользуемые переменные
- Ошибки, которые не выявляются во время компиляции (например, undefined переменные)

**Решение с ESLint:**
- Автоматически находит ошибки и предупреждения
- Подсказывает лучшие практики
- Поддерживает кастомные правила
- Работает в IDE и CI/CD (автоматическая проверка)

Как ESLint работает?
ESLint использует набор правил, которые проверяют код. Если код нарушает эти правила – линтер выдаёт предупреждение или ошибку.

function sayHello(name) {
  console.log("Hello, " + name)
}

sayHello("John")

Пример исправленного кода (ESLint fix)

function sayHello(name) {
  console.log(`Hello, ${name}`);
}

sayHello("John");

Как установить и настроить ESLint?
Установка

npm install eslint --save-dev

Создание конфига

npx eslint --init

Пример .eslintrc.js (настройки ESLint)

module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    "eslint:recommended", // Базовые рекомендации
    "plugin:vue/vue3-recommended" // Рекомендации для Vue
  ],
  rules: {
    "no-unused-vars": "warn", // Предупреждать о неиспользуемых переменных
    "semi": ["error", "always"], // Обязательные точки с запятой
    "quotes": ["error", "double"], // Только двойные кавычки
  },
};

Запуск проверки кода

npx eslint myfile.js

Автоматическое исправление ошибок

npx eslint myfile.js --fix

👉 @frontendInterview

Simple CSS selector comparison

Создайте функцию, которая сравнивает переданные CSS селекторы и возвращает самый специфичный.

Примеры:

 "body p",  "div"     --->  return "body p"
 ".class",  "#id"     --->  return "#id"
 "div.big", ".small"  --->  return "div.big"
 ".big",    ".small"  --->  return ".small" (because it appears later)

👉 @frontendInterview

Full-Stack React Projects

React в сочетании с проверенными в отрасли серверными технологиями, такими как Node, Express и MongoDB, позволяет разрабатывать и развертывать надежные полнофункциональные веб-приложения. Данное обновленное второе издание фокусируется на последних версиях и соглашениях технологий в этом стеке, а также на их новых фичах, таких как хуки в React и async / await в JavaScript. В книге также раскрываются сложные темы, такие как создание веб-приложения для учебных занятий и визуализация данных в приложении для отслеживания расходов.

👉 @frontendInterview

Какими способами мы можем получить картинку с сервера?

В веб-разработке есть разные способы загрузки изображений с сервера. Они зависят от того, какой сервер и какая задача (отображение в браузере, скачивание, работа с API и т. д.).

Через тэг <img> – самый простой способ (браузер сам загружает)

<img src="https://example.com/image.jpg" alt="Картинка">

Через CSS (background-image) – если нужно фоновое изображение

.element {
  background-image: url("https://example.com/image.jpg");
  background-size: cover;
}

Используя fetch() – если нужно обработать картинку в JS
Можно загрузить изображение как Blob и создать временный URL.

fetch("https://example.com/image.jpg")
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob);
    document.getElementById("img").src = url;
  });

Используя XMLHttpRequest – старый метод (устарел, но работает)

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://example.com/image.jpg", true);
xhr.responseType = "blob";

xhr.onload = function () {
  const url = URL.createObjectURL(xhr.response);
  document.getElementById("img").src = url;
};

xhr.send();

На <canvas> – если нужно редактировать изображение
Можно загрузить картинку и нарисовать её на <canvas>.

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const img = new Image();

img.onload = function () {
  ctx.drawImage(img, 0, 0);
};

img.src = "https://example.com/image.jpg";

👉 @frontendInterview

Как владельцы Макбуков в модной кофейне видят твой Lenovo ThinkPad

👉 @frontendInterview

Интернет мельчает. К чему привели тенденции Web дизайна

Открывая очередной сайт с компьютера, я вижу одну и ту же картину. На странице так много «воздуха» в виде отступов, что дышать просто невозможно, это просто перебор.

Половина пространства не занята абсолютно ничем. И это на любом разрешении, выше мобилок / планшетов. Основной блок кажется сплюснутым по центру, сжатым. Контенту просто визуально тесно на странице, ощущается как будто уменьшили масштаб. Но поверьте, это обычный 100% масштаб, обычное разрешение (1920х1080 для ПК и 2048х1330 для ноутбука).

👉 @frontendInterview

Правильно ли заполнено поле ввода с цифрами? Проверяем прямо в браузере.

Поля ввода с типами date, month, week, time, datetime-local, number и range могут иметь атрибуты min и max. Эти атрибуты задают диапазон допустимых значений, которые пользователь может вводить в поле. В зависимости от того, попадает ли введённое значение в диапазон, будут применяться стили для псевдоклассов :in-range и :out-of-range.

- :in-range для полей, в которых введённое значение попадает в диапазон от min до max;
- :out-of-range для полей, в которых введённое значение не попадает в диапазон от min до max.

Пример

<input class="with-range" type="number" min="10" max="20" step="1">

.with-range {
  border: 1px solid black;
}

.with-range:in-range {
  border-color: green;
  background-color: rgb(0 255 0 / 20%);
}

.with-range:out-of-range {
  border-color: red;
  background-color: rgb(255 0 0 / 20%);
}

👉 @frontendInterview

👉 @frontendInterview

Является ли drag and drop частью спецификации?

Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек.

Как работает Drag and Drop API?
В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут draggable="true". Затем срабатывают специальные события, такие как dragstart, drop, dragover и другие.

<div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>

<script>
  const dragItem = document.getElementById("drag-item");
  const dropZone = document.getElementById("drop-zone");

  dragItem.addEventListener("dragstart", (event) => {
    event.dataTransfer.setData("text/plain", "Данные элемента");
  });

  dropZone.addEventListener("dragover", (event) => {
    event.preventDefault(); // Нужно, чтобы разрешить сброс
  });

  dropZone.addEventListener("drop", (event) => {
    event.preventDefault();
    const data = event.dataTransfer.getData("text/plain");
    alert("Элемент сброшен: " + data);
  });
</script>

Какие события есть в Drag and Drop?
Основные события:
dragstart — когда начали тянуть элемент.
drag — когда элемент двигается (срабатывает много раз).
dragenter — когда курсор заходит в зону сброса.
dragover — когда элемент находится над зоной (нужно preventDefault()).
dragleave — когда курсор покидает зону сброса.
drop — когда элемент отпущен в зоне сброса.
dragend — когда перетаскивание завершено (даже если не сбросили).

Где используется Drag and Drop?
- Перетаскивание файлов в <input type="file"> (например, загрузка изображений).
- Канбан-доски, как в Trello.
- Онлайн-редакторы, как Figma.
- Игры, где можно перемещать предметы.

Можно ли сделать Drag and Drop без HTML5 API?
Да, можно использовать другие методы:
Через события мыши (mousedown, mousemove, mouseup).
Через CSS position: absolute и transform.
Через JS-библиотеки (Sortable.js, React DnD, Draggable.js).
Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend.

👉 @frontendInterview

Partial Word Searching

Создайте метод, который будет искать в массиве строк все строки, содержащие данную подстроку, игнорируя заглавные буквы. Затем верните массив найденных строк.

Метод принимает два параметра: строку запроса и массив строк для поиска, и возвращает массив.

Если строка не содержится ни в одной из строк массива, метод возвращает массив, содержащий одну строку: «Empty».

Пример:

 wordSearch("me",["home", "milk", "Mercury", "fish"]) => ["home", "Mercury"]

👉 @frontendInterview