monochromer/frontend-interview

Сборник вопросов для собеседований разработчиков Web UI

Contacts:

• telegram
• mastodon
• twitter
• email

frontend-interview's Issues

Наследование в CSS

Расскажите про наследование в CSS. Какие свойства наследуются, какие - нет? Как сделать принудительное наследование? Расскажите про значение currentColor.

Практическое задание:
Сверстать систему меток-статусов:

Примечания: цвет бордюра такой же, как и цвет текста, но с прозрачностью 32%. Цвет фона такой же, как и цвет текста, но с прозрачностью 10%.

Как работает float-форматирование?

Что такое CSS3?

Собственно, что такое CSS3? Когда, наконец, выйдет CSS4?

Почему React называют библиотекой, а Vue или Angular фреймворком?

В чём отличие библиотеки от фреймворка?
Что есть такого в Vue (Angular) и чего нет в React, что позволяет назвать его (Vue) фреймворком?

Чем отличаются CSS custom properties (✌️CSS-переменные✌️) от переменных в препроцессорах?

Создать hook для react для работы с localStorage

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

Фазы распространения событий - захват и всплытие

Расскажите о фазах события - capture и bubble. Как работают, зачем нужны именно две фазы?

Написать fallback для picture, в котором не загрузилась картинка

Есть разметка:

<picture>
  <source type="image/avif" src="/some-broke-avif-image.avif" />
  <source type="image/webp" src="/some-broke-webp-image.webp"/>
  <img src="/some-real-exsisting-image.jpg" alt="Alt text" width="200" height="200" />
</picture>

Проблема в том, что если браузер поддерживает avif, но ссылка оказалась битой, но никакого fallback-решения не загрузиться.

Что будет, если скрипт будет асинхронным?

WIP. Фоновые цвета для элементов html и body

Поговорить о том, как отрисовывается фоновый цвет у этих элементов

В чем разница width: 100% и width: auto у блочных элементов?

Выбор полей объекта при сериализации в JSON

Есть такой код:

class Model {}

class User extends Model {
  static get fields() {
    return ['name', 'email'];
  }

  constructor(props) {
    Object.assign(this, props);
  }
}

const user = new User({
  name: 'Alex',
  email: '[email protected]',
  password: '123456',
  role: 'editor'
})

const serializedUser = JSON.stringify(user);

Нужно реализовать класс Model так, чтобы serializedUser выводил только поля name и email (то есть брал их из статического свойства User.fields).

Способы очистки float

Контейнер с float-элементами схлопывается. Почему это происходит? Какие есть способы борьбы с этим?

Отступы между inline-block

Какие есть способы убрать отступы между идущими подряд inline-blocks?

Мета-тег viewport

Расскажите про мета-тег viewport, как он и его атрибуты влияют на отображение страницы.

"Схлопывание" и "выпадание" отступов

Что такое "схлопывание" и "выпадание" отступов? В каких случаях проявляется и как с ними бороться? Когда могут быть полезными?

Отлчиие `italic` от `oblique`?

Чем отличается font-style: italic от font-style: oblique?
Зачем ещё font-family: cursive?

Обрезка текста многоточием

Как реализовать? В каких случаях работает, в каких - нет?

Как реализуете поддержку экранов высокой плотности (retina)?

Что такое контекст форматирования?

Видимость элементов

Чем отличаются следующие записи:

opacity: 0;
visibility: hidden;
display: none;
clip-path: inset(100%);
clip: rect(0, 0, 0, 0);

Почему `:root` это псевдокласс, а не псевдоэлемент?

Что такое регрессионное тестирование?

Что такое? Как и когда применять? Какие инструменты знаете?

Загрузка изображений

Как будут и будут ли грузиться изображения <img />, если им задать display: none;?
Будут ли грузиться изображения, заданные через background, если DOM-узлу задать display: none;?
Как вставить изображение в HTML, чтобы оно не грузилось?

Переопределение оператора вхождения свойства в объекте

Как в JavaScript можно реализовать такую проверку?

if (statusCode in range(400, 500)) {
 // ...
}

Как реализовать группу кнопок с одинаковой шириной

Пример:

Что общего между кнопкой и соединением веб-сокет ?

Расскажите, что Вы знаете про семантику и доступность

Отличия target, currentTarget и this

В чем отличия target, currentTarget и this для обработчика dom-события?

Вёрстка карточки с картинкой и текстом

Пусть есть разметка

<figure>
  <img src="https://placeimg.com/480/360/nature" alt="Some alt text" width="480" height="360">
  <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing.</figcaption>
</figure>

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

Пример поведения:

Дополнительно: как сделать, чтобы ширина компонента определялась максимальной шириной текста?

Как отследить появление элемента в DOM?

Какими способами можно отследить появление элементов в DOM?

Запись стрелочных функций

В чем отличие функций?

const f = (x) => x
const g = (x) => { x }

Реализовать свой `switch-case`

Реализовать функцию match, которая работала бы так:

const result = match(10)
  .on(x => x > 10, x => `Value is greater than 10`)
  .on(x => x < 10, x => `Value is less than 10`)
  .otherwise(x => `Value is equal 10`)

console.log(result) /* Value is equal 10 */

В чем отличие селекторов псевдокласса :disabled и атрибута [disabled]?

Вертикальные отступы элемента, заданные в процентах

Относительно чего рассчитываются вертикальные отступы элемента, заданные в процентах?

Какие есть HTTP-методы для запросов?

В чём отличие GET от POST? Почему logout делают ссылкой? Как можно сделать по другому?

Как работают раскладки table-layout: auto и table-layout: fixed?

Управление кэшированием ресурсов в CSS

Пусть есть очень большой CSS-файл, в котором есть ссылка на картинку:

body {
  background-image: url('/url-to-image.jpg')
}
/* 500kb */

Можно ли как-то сделать так, чтобы при изменении картинки, пользователь получил обновлённую картинку, но не загрузил заново CSS-файл.

Расскажите про микроформаты и разметку для OpenGraph

Единицы измерения для line-height

Чем отличаются записи:

line-height: 1;
line-height: 1em;
line-height: 1rem;
line-height: 100%;

Верстка макета "Holy Grail"

Выполнить верстку макета "Holy Grail":

• без flexbox и css-grid
• на flexbox и css-grid

Как работают свойства top, left, right, bottom со значением auto у элементов с position absolute, fixed, relative?

Каскад и специфичность в CSS

Расскажите, что такое каскад в CSS?
Как вычисляется специфичность и приоритет?
Можно ли переопределить из обычного файла стилей, например, styles.css, стили, записанные в атрибуте style c модификатором !important (<div style="width: 50% !important"></div>), хотя бы кратковременно.

Какие техники изоляции стилей знаете?

В чём отличие атрибута и свойства DOM-элемента?

Например, мы можем задать value для input несколькими способами:

<input value="some-value" />

input.value = 'some-value';
input.setAttribute('value', 'some-value');

Что такое контекст наложения?

Чем отличается z-index: 0 от z-index: auto?

Обработчики на DOM-элементах без call, apply, bind

К примеру, есть объект:

var slider = {
  nextSlide() {
    console.log(this);
    // ... go to next slide
  }
}

1. На что будет указывать this, если навесить метод slider.nextSlide как обработчик клика на какой-нибудь dom-элемент?
2. Что можно сделать, не используя call, apply, bind, чтобы ссылка this внутри метода указывала на slider, а не на dom-элемент?

Библиотеки reset.css и normalize.css

Знакомы ли Вы с библиотеками reset.css и normalize.css? Какое у них назначение? Чем они отличаются? Что Вам в них нравится/не нравится?

Как Вы стилизуете сторонние библиотеки и фреймворки под нужды проекта?

В качестве примера можно рассмотреть:

• bootstrap
• highcharts
• kendo ui, devexpress