Не пейте воду

Вам дан двумерный массив, состоящий из различных жидкостей. Отсортируйте массив, исходя из плотности каждой жидкости. В задании дана таблица плотности.

======================
| Density Chart |
======================
| Honey | H | 1.36 |
| Water | W | 1.00 |
| Alcohol | A | 0.87 |
| Oil | O | 0.80 |
----------------------

[ [
['H', 'H', 'W', 'O'], ['O','O','O','O']
['W', 'W', 'O', 'W'], => ['W','W','W','W']
['H', 'H', 'O', 'O'] ['H','H','H','H']
] ]

👉 @frontendInterview

В чем разница между `==` и `===`?

== — это оператор абстрактного сравнения, а === — оператор строгого сравнения. Оператор == будет сравнивать на равенство после выполнения любых необходимых преобразований типов. Оператор === не будет выполнять преобразование типов, поэтому, если два значения не одного типа, === просто вернет false. При использовании == могут происходить такие странные вещи, как:

 1 == '1'; // true
 1 == [1]; // true
 1 == true; // true
 0 == ''; // true
 0 == '0'; // true
 0 == false; // true

Мой совет — никогда не используйте оператор ==, за исключением удобного сравнения с null или undefined, где выражение a == null вернет true, если a принимает значение null или undefined .
var a = null;
console.log(a == null); // true
console.log(a == undefined); // true

👉 @frontendInterview

👉 @frontendInterview

Почему не следует расширять нативные JavaScript-объекты?

Расширение встроенного/нативного объекта JavaScript означает добавление свойств/функций к его прототипу. Хотя на первый взгляд это может показаться хорошей идеей, на практике это опасно. Представьте, что ваш код использует несколько библиотек, которые расширяют Array.prototype, добавляя один и тот же метод contains. В результате код будет работать неверно, если поведение этих двух методов не будет одинаковым.

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

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

​Каковы преимущества и недостатки написания JavaScript-кода на языке, который компилируется в JavaScript?

Вот несколько языков, которые компилируются в JavaScript: CoffeeScript, Elm, ClojureScript, PureScript и TypeScript.

Преимущества:
- Исправляют некоторые давние проблемы в JavaScript и препятствует использованию анти-паттернов в JavaScript.
- Позволяют писать более короткий код, предоставляя синтаксический сахар поверх JavaScript, которого, как мне кажется, не хватало в ES5, но с приходом ES2015 все изменилось.
- Статическая типизация идеальна (в случае TypeScript) для больших проектов, которые необходимо поддерживать с течением времени.

Недостатки:
- Необходима сборка/компиляция кода, так как браузеры запускают только JavaScript, и ваш код должен быть скомпилирован в JavaScript перед тем, как он будет передан в браузеры.
- Отладка может быть трудной, если карты кода (source maps) плохо сопоставляются с исходным кодом.
- Большинство разработчиков не знакомы с этими языками и должны будут изучить их. Если ваша команда будет использовать их для своих проектов, это приведет к увеличению затрат.
- Меньшее сообщество (зависит от языка), что означает, что будет труднее найти ресурсы, учебные пособия, библиотеки и инструменты.
- Может отсутствовать поддержка в IDE/редакторе.
- Эти языки всегда будут позади последнего стандарта JavaScript.
- Разработчики должны знать, во что компилируется их код — потому что это то, что будет запускаться в браузере, и это наиболее важно.

По большому счету, ES2015 значительно улучшил JavaScript и сделал разработку на нем намного удобнее. Я не вижу причин использовать CoffeeScript в наши дни.

👉 @frontendInterview

Beginning React and Firebase: Create Four Beginner-Friendly Projects Using React and Firebase (2021)

Вы начнете с основ: научитесь развертывать приложение React на хостинге Firebase. Затем вы научитесь создавать полнофункциональное приложение "ToDo", которое будет использовать базу данных Firebase для хранения списка элементов действий. Также вы научитесь создавать приложение "Stories", в котором можно показывать короткие вертикальные видеоролики, и приложение для хранения документов.

👉 @frontendInterview

Сортировка нечетных значений

Вам дан массив чисел.
Ваша задача состоит в том, чтобы отсортировать нечетные числа по возрастанию, а четные оставить на их местах.

Пример:
sortArray([5, 3, 2, 8, 1, 4])
//[1, 3, 2, 8, 5, 4]

👉 @frontendInterview

​Какие методы использования flexbox вы знаете и какие особенности имеет каждый из них?

Flexbox предоставляет несколько методов для организации и управления расположением элементов на веб-странице. Рассмотрим некоторые из них:

1. flex-direction: Определяет основную ось гибкого контейнера и направление элементов. Может быть row (главная ось горизонтальная), column (главная ось вертикальная), row-reverse (главная ось горизонтальная в обратном направлении), column-reverse (главная ось вертикальная в обратном направлении).

2. justify-content: Определяет выравнивание элементов вдоль главной оси. Может быть flex-start (выравнивание в начале), flex-end (выравнивание в конце), center (выравнивание по центру), space-between (равномерное распределение элементов вдоль оси), space-around (равномерное распределение элементов вдоль оси со внешними отступами.

3. align-items: Определяет выравнивание элементов вдоль поперечной оси. Может быть flex-start (выравнивание в начале), flex-end (выравнивание в конце), center (выравнивание по центру), stretch (растягивание элементов по высоте контейнера), baseline (выравнивание по базовой линии).

4. flex-wrap: Определяет, должны ли элементы переноситься на новые строки (wrap) или должны быть в одной строке (nowrap).

5. align-content: Применяется, когда элементы занимают не всю доступную высоту контейнера. Определяет, как выравнивать и размещать элементы по вертикали. Может быть flex-start, flex-end, center, space-between, space-around, stretch.

Эти методы позволяют управлять расположением элементов на странице более гибко и эффективно.

👉 @frontendInterview

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

Для оптимизации производительности веб-страниц существует множество инструментов и технологий. Вот некоторые из них:

- Сжатие и минификация кода: Gulp, Grunt, Webpack;
- Оптимизация и сжатие изображений: ImageOptim, Kraken.io, TinyPNG;
- Кеширование: CDN, Varnish Cache, Redis;
- Параллельная загрузка ресурсов: Resource Hints (preload, prefetch);
- Предзагрузка и предварительная отрисовка: Link rel="prerender", Intersection Observer API;
- Уменьшение имен файлов и использование компрессии: gzip, brotli, Babel;
- Использование кэширования браузера: Cache-Control, ETag, Expires.

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

👉 @frontendInterview

​Как вы реализуете адаптивный дизайн?

Для реализации адаптивного дизайна я использую следующие подходы и инструменты:

- Media queries - используются для изменения стилей в зависимости от размера экрана устройства пользователя.

 @media (max-width: 767px) {
   .header {
     font-size: 16px;
     padding: 10px;
    }
 }

- Fluid Grids - основной принцип заключается в том, чтобы разделить макет на колонки, которые могут динамически изменяться в зависимости от размера экрана.

 .container {
   display: flex;
   flex-wrap: wrap;
   max-width: 100%;
 }

 .col {
   flex-grow: 1;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
 }

- Flexible Images - применяется для того, чтобы изображения могли менять свой размер в зависимости от размера экрана.

 img {
   width: 100%;
   height: auto;
 }

- Mobile-first Approach - основной принцип заключается в том, чтобы сначала оптимизировать сайт для маленьких экранов мобильных устройств, а затем наращивать функционал и компоненты для больших экранов.

 //Mobile styles
  .main-header {
    font-size: 1.8rem;
    padding: 10px;
  }


 //Desktop styles
 @media (min-width: 1200px) {
  .main-header {
    font-size: 3rem;
    padding: 20px;
  }
 }

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

👉 @frontendInterview

👉 @frontendInterview