«Почему у нас такая дерьмовая кодовая база?»

Как у нас проводят код-ревью:

👉 @frontendInterview

​sv, lv, dv

Одной из распространённых проблем, с которой сталкиваются разработчики сегодня это изменение размера viewport на мобильных устройствах. Было бы логичным полагать, что 100vh или 100% высоты экрана означали высоту, равную высоте экрана устройства, но vh не учитывает адресную строку и навигационную панель браузера на мобильных устройствах. Поэтому иногда высота контента оказывается слишком большой и появляется лишний скролл.

Это относительные единицы измерения, пришедшие на помощь знакомым vw, vh, vmin, vmax, с целью сделать процесс разработки более предсказуемым. svw и svh представляет собой наименьшую (smallest) ширину и высоту экрана с учётом элементов браузера, lvw и lvh — наибольшую (largest) ширину и высоту с учётом элементов браузера. dvw и dvh динамически (dynamic) высчитывает размер экрана при различных состояниях браузера, при открытой/закрытой адресной строке и навигационной панели браузера.

Пример
Ширина первого экрана будет равна 100% ширины вьюпорта, а высота — 100% высоты вьюпорта, причём размер будет динамически высчитываться при открытии/закрытии элементов браузера:

.vh {
  min-height: 100vh;
}

.dvh {
  min-height: 100dvh;
}

Динамический вьюпорт

dvw
Размер указывается в процентах от ширины вьюпорта (viewport width). 100dvw соответствует полной ширине вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvw = 1% ширины вьюпорта.

dvh
Размер в процентах от высоты вьюпорта (viewport height). 100dvhсоответствует полной высоте вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. 1dvh = 1% высоты вьюпорта.

dvmin
Размер в процентах от меньшей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота меньше ширины (например, горизонтальная ориентация телефона), то расчёт будет вестись относительно высоты.

dvmax
Размер в процентах от большей размерности вьюпорта и динамически пересчитывается при открытии/закрытии элементов браузера. Если высота больше ширины (например, нормальная ориентация телефона), то расчёт будет вестись относительно высоты.

👉 @frontendInterview

Пять строк кода.

В каждой кодовой базе есть ошибки и слабые места, которые нужно найти и исправить. Правильный рефакторинг сделает ваш код элегантным, удобным для чтения и простым в обслуживании.
Познакомьтесь с уникальным подходом, позволяющим реализовать любой метод в пяти строках кода. И не забывайте про тайну, хорошо известную большинству senior-разработчиков: иногда проще ухудшить код и вернуться к его исправлению позже.

👉 @frontendInterview

Flatten and sort an array

Задача:
Задав двумерный массив целых чисел, верните отсортированную версию массива, в которой все целые числа расположены в порядке возрастания.

Пример:
Учитывая [[3, 2, 1], [4, 6, 5], [], [9, 7, 8]], ваша функция должна вернуть [1, 2, 3, 4, 5, 6, 7, 8, 9].

Дополнение:
Пожалуйста, помните, что JavaScript по умолчанию сортирует объекты в алфавитном порядке

👉 @frontendInterview

Замыкания в JavaScript

Замыкание в JavaScript - это комбинация функции и лексического окружения, в котором она была определена. Это позволяет ей обращаться к переменным и функциям этого лексического окружения в дальнейшем.

В следующем примере мы определяем функцию makeCounter(), которая фактически является фабричной функцией. При вызове она возвращает дочернюю функцию, которая имеет доступ к лексическому окружению внешней функции, то-есть функции makeCounter(). Таким образом, возвращаемая функция запоминает переменную counter и в последующем изменяет ее значение.

function makeCounter(initial = 0) {
let counter = initial;

return function() {
return counter += 1;
}
}

const counterA = makeCounter(0);

console.log(counterA()); // 1
console.log(counterA()); // 2

const counterB = makeCounter(100);

console.log(counterB()); // 101
console.log(counterB()); // 102

👉 @frontendInterview