Что такое медиа запросы в CSS?

Медиа запросы (media queries) - это правила CSS, которые позволяют управлять стилями элементов в зависимости от значений параметров устройств. Они предназначены для создания адаптивных сайтов.

Синтаксис:

 @media условие {
 /* стили (они будут выполняться, если устройство соответствует указанному условию)
 }

Логические операторы:
and - требует обязательного выполнения всех условий.
, - требует обязательного выполнения хотя бы одного условия.
not - предназначен для отрицания условия.

Медиа функции:
width - указывает требования к ширине области просмотра устройства.
min-width - задаёт минимальную ширину области viewport.
max-width - определяет максимальную рабочую область устройства.
height, min-height и max-height - задают требования аналогично, но в отношении высоты viewport.

Пример:
@media not screen and (orientation: portrait),
(min-width: 992px){ /* Стили CSS ... */ }

👉 @frontendInterview

👉 @frontendInterview

Почему следует избегать использования индексов в качестве ключей в React?

Ключи должны быть стабильными, предсказуемыми и уникальными, чтобы React имел возможность следить за элементами.

В приведенном ниже примере ключом каждого элемента является порядок его расположения в массиве без привязки к предоставляемым им данным. Это ограничивает возможности React по оптимизации:

 {todos.map((todo, index) =>
   <Todo
     {...todo}
     key={index}
   />
 )}

При использовании в качестве уникальных ключей данных элемента, например, todo.id, которые являются уникальными в списке и стабильными, у React появится возможность изменять порядок расположения элементов без необходимости выполнения дополнительных вычислений:
{todos.map((todo) =>
<Todo {...todo}
key={todo.id} />
)}

👉 @frontendInterview

👉 @frontendInterview

JavaScript Frameworks for Modern Web Development (2019)

Если вы являетесь опытным разработчиком и хотите изучать JavaScript, данная книга поможет вам в этом. Авторы учат работать с React, VueJS и Angular. В конце каждой главы есть ссылки для дополнительного чтения.

👉 @frontendInterview

Длина пропущенного массива

Вам дан массив, состоящий из массивов. Нужно отсортировать массивы по их длине. Если вы это сделаете, то обнаружите, что значения длин возрастают с каждым разом на 1. Но один массив при этом пропущен. Функция должна вернуть длину пропущенного массива.

Пример:
[[1, 2], [4, 5, 1, 1], [1], [5, 6, 7, 8, 9]] --> 3

👉 @frontendInterview

Angular Development with TypeScript (2018)

Автор книги учит создавать веб-приложения с помощью Angular и TypeScript. Написанное в доступном, живом стиле, это подробное руководство охватывает основные задачи, такие как управление состоянием, данные, формы и связь с сервером, когда вы создаете полнофункциональное приложение. Вы получите навыки, необходимые для написания классов и интерфейсов с помощью TypeScript, а также узнаете, как увеличить продуктивность разработки.

👉 @frontendInterview

Что такое React Fiber и для чего он предназначен?

Fiber (волокно) - это новый движок согласования, изменение основного алгоритма в React 16. Основной задачей React Fiber является повышения производительности в таких областях, как анимация, создание макета страницы, обработка жестов, возможность приостанавливать, прерывать или повторно запускать выполнение операций, предоставление приоритета определенным типам обновлений, а также новые примитивы параллелизма.

Цель React Fiber - повышение производительности в таких областях, как анимация, создание макета страницы и обработка жестов. Основной его особенностью является incremental rendering (инкрементальный рендеринг, используется Angular): возможность разделения процесса рендеринга на части и их объединение через различные фреймы.

👉 @frontendInterview

👉 @frontendInterview

Что такое Пересечение (Intersection) в TypeScript?

Пересечение (Intersection) - мощный механизм TypeScript, который позволяет рассматривать множество типов данных, как один. Пересечение указывается с помощью оператора амперсанда &, по обе стороны от которого указываются типы данных.

Переменной, которой был указан тип пересечение A и B и С может быть присвоено значение, которое принадлежит к типам A и B и C одновременно.

type A = {
x: number
y: number
}

type B = {
y: number
z: number
}

type I = A & B

Переменная типа пересечения I может содержать объекты со свойствами типа A AND типа B (т. е. x, y и z; отсюда символ & ), который соответствует объединению свойств двух типов

Степени двойки

Напишите функцию, которая принимает неотрицательное целое число и возвращает массив из степеней двойки от 0 до входного числа.

Примеры
n = 0 ==> [1] # [2^0]
n = 1 ==> [1, 2] # [2^0, 2^1]
n = 2 ==> [1, 2, 4] # [2^0, 2^1, 2^2]

👉 @frontendInterview

👉 @frontendInterview

В чем разница между createElement() и cloneElement() в React?

JSX транспилируется в функции createElement() для создания элементов React, которые используются для объектного представления пользовательского интерфейса. А cloneElement() используется для клонирования элемента и передачи ему новых свойств.

👉 @frontendInterview

👉 @frontendInterview