1. Расскажите о проекте, которым по-настоящему гордитесь. Что вы сделали для его успешной реализации?
2. Расскажите о проекте, который вас разочаровал. Что бы вы сейчас изменили при работе над ним?
  
6. Что такое SPA и как сделать его SEO-friendly?

  Single Page Application - это реализация веб-приложения таким образом, чтобы при первой 
  загрузке пользователь получал все ресурсы, необходимые для того, чтобы избавиться от 
  загрузки страницы с нуля при совершении интерактивных действий с интерфейсом.

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

  Для того, чтобы сделать SPA SEO-friendly, можно обратиться к таким решениям, 
  как предварительный рендеринг или серверный рендеринг.    
    
    Javascript вопрос: Можно ли использовать ключевое слово await при объявлении for/of циклов?
    
    HTML вопрос: Какой тег позволяет без использования JS сделать так, чтобы при нажатии на него 
    пользователь мог позвонить на определенный номер телефона?
    
alert - это часть браузера, а не DOM сущность, её нельзя изменять.
Обязательно нашлись бы мошенники, которые что-нибудь гадкое придумали как тогда с окном ухода с сайта.


Что такое CORS и чем он может быть полезен?
«CORS — это сокращение от «совместное использование ресурсов из разных источников». Это процесс, который я использую для доступа к веб-ресурсам в разных доменах. CORS удобен при интеграции веб-скриптов, поскольку я могу сделать это более открыто с внешним контентом исходного домена. Это приводит к плавной интеграции между двумя или более веб-сервисами».

Что такое XSS (Cross-Site Scripting)?
Как запретить браузеру отдавать кэш на HTTP-запрос?

---
## JavaScript

### Что такое примитивы?
Примитив (значение примитивного типа, примитивный тип данных) - это данные, которые не являются объектом и не имеют методов. В JavaScript 7 простых типов данных: string, number, boolean, null, undefined, symbol (новое в ECMAScript 2015), bigint

### В чем разница между let, const и var?

var - поднимается в начало области видимости функции при компиляции
      объявляет переменную, которая может быть перезаписана
      объявляет переменную, которая может быть переопределена

let - поднимается в начало области видимости блока при компиляции
      объявляет переменную, которая может быть перезаписана
      объявляет переменную, которая не может быть переопределена

const - поднимается в начало области видимости блока при компиляции
        объявляет переменную, которая не может быть перезаписана или переопределена

### Как проверить наличие ключа\свойства в обьекте? | В чем разница между оператором in и методом hasOwnProperty?
Оператор «in» проверяет наличие свойства не только в самом объекте, но и в его прототипах, а метод hasOwnProperty — только в объекте.
```js
const person = {
    name: 'Foo',
};

'name' in person; // true
person.hasOwnProperty('name'); // true

'constructor' in person; // true
'__proto__' in person; // true
'toString' in person; // true

person.hasOwnProperty('constructor'); // false
person.hasOwnProperty('__proto__'); // false
person.hasOwnProperty('toString'); // false
```

### Объясните разницу между синхронными и асинхронными функциями

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

  С другой стороны, есть асинхронный способ выполнения функций, когда мы не блокируем 
  весь интерфейс благодаря тому, что не дожидаемся выполнения функции, а подписываемся 
  на событие с передачей обратного вызова. Ну, или мы можем иметь дело с обещанием или 
  с прочими внешними API вроде setTimeout.

  В таком случае браузер помещает обработчик события в очередь задач, а когда наступает 
  время его вызвать, он перемещает его в стек вызовов.
  
#### Main Thread
В основном потоке браузер обрабатывает пользовательские события и рисует. По умолчанию браузер использует один поток для запуска всего JavaScript на вашей странице, а также для выполнения компоновки, перекомпоновки и сборки мусора. Это означает, что долго выполняющиеся функции JavaScript могут заблокировать поток, что приведет к тому, что страница не будет отвечать, а пользовательский опыт будет плохим.

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

По умолчанию есть только один поток, который асинхронно обслуживает очередь сообщений.
В браузере для многопоточности есть WebWorkers, но единственное возможное общение между потоками осуществляется через отправку строк или сериализованного JSON; к одним и тем же переменным из разных воркеров обратиться нельзя.

### Расскажите о базовом устройстве и механизме работы Event loop
Идея событийного цикла очень проста. Есть бесконечный цикл, в котором движок JavaScript ожидает задачи, исполняет их и снова ожидает появления новых. Задачи из очереди исполняются по правилу «первым пришёл – первым ушёл»
- Кроме главного списка задач существуют микрозадачи и макрозадачи
- В микрозадачи попадают калбеки завершенных промисов, функции внутри queueMicrotask()
- В макрозадачи попадают колбеки планирования и обработчики событий
- Сначала выполняется основной код, затем микрозадачи и за ними макрозадачи.

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

  Оператор двойного равенства производит приведение типов, оператор строгого равенства - нет.

### Что такое this?
  this указывает на объект области видимости во время выполнения. 
  По умолчанию this указывает на глобальный объект. В браузере 
  выражение this === window будет истинно.
  
  это ключевое слово, используемое в JavaScript, которое имеет особое значение, зависящее от контекста в котором оно             применяется. Когда мы используеп ключевое слово this, мы обращаемся к некоему объекту. Например, если мы обратимся к this в глобальной области видимости, то оно будет привязано к объекту window. Когда мы используем this внутри объекта, оно обращается на сам объект. Стрелочные функций ведут себя не так как обычные функций. Если мы обратимся к this внутри  обычной функций в глобальной области видимости, то будет обращаться к объекту window. Однако в строгом режиме она вернут undefined, так как в этом режиме запрещены привязки по умолчанию
  
### В чем разница между Array.prototype.forEach и Array.prototype.map?

  Array.prototype.forEach - это инструмент обхода цикла процедурно, а Array.prototype.map - функционально.

  .forEach просто проходится по массиву с выполнением переданного обратного 
  вызова на каждой итерации, а .map создает и возвращает новый массив 
  на основе исходного, выкладывая по кирпичику на каждой итерации.
  
### В чем смысл и польза указания use strict в начале JavaScript-файла?
Команда use strict включает так называемый строгий режим. В этом режиме предупреждения становятся ошибками.

### Как работает прототипное наследование?
  Если отвечать кратко, в JavaScript все является объектами. Эти объекты связаны цепочками прототипов, по которым им передаются методы и свойства. При обращении к свойству или методу объекта сначала происходит поиск этого свойства у самого объекта. В случае неудачи поиск перенаправляется в его прототип, затем в прототип прототипа и так далее, пока искомое свойство не будет найдено, либо пока не закончится цепочка прототипов.

### Что такое Рекурсия?
Это когда алгоритм или функция вызывает сама себя.

### Какие приемы работы с асинхронным кодом в JS Вы знаете?
- Функции обратного вызова
- Промисы
- Async await

### В чем плюсы и минусы использования CDN?

- Второй важной проблемой является протухание ссылок на CDN. На старых проектах вы можете столкнуться с ситуацией, когда CDN удалил старую версию библиотеки, на которую все завязано. И вам теперь нужно срочно искать ее, или ближайшую подходящую версию.
- Это локальная разработка. Если у тебя нет интернета в дороге или он плохой, то полноценно работать над сайтом невозможно.
- Если сделать фронтенд бандлом и закинуть его на CDN - все будет быстро и хорошо. Обычно я вижу кучу ссылок на разные CDN из-за чего загрузка сайта на телефоне, где соединения открываются медленно, это печалька. Чтобы CDN был полезен нужно чтобы люди понимали что он делает, какой ценой и какие проблемы решает. Я про случай когда единственный повод не использовать CDN для разработчика - лень скачивать и собирать библиотеку.

Сейчас сайты состоят из статического и динамического контента. К статическому относится содержимое страницы, которое не меняется: тексты, картинки, видео- и аудиофайлы, скрипты. Это «тяжёлый» контент, который должен быстро загружаться у пользователей. К динамическому относятся файлы, которые отображаются по-разному у разных пользователей. Например, местоположение, пол, блок рекомендаций, история просмотра. 

Динамический и статический контент создают разную нагрузку на сервер. Первый задействует оперативную память, а второй зависит от скорости сети. Если оба типа контента хранятся на одном сервере, это создаёт на него двойную нагрузку, поэтому страницы могут загружаться дольше. 

Решить эту проблему помогает CDN-хостинг. Часть сайта (статический контент) передаётся на серверы из CDN-сетей, а динамический контент остаётся на основном сервере. Таким образом, нагрузка распределяется, и страницы загружаются быстрее.

### Что такое мутабельность и иммутабельность?
Иммутабельность предполагает, что после создания данные или структура, которая их содержит, не могут быть изменены
Мутабельность означает что данные могут меняться.
```js
var mutableArr = [1, 2, 3, 4];
arr.push(5);
console.log(mutableArr); // [1, 2, 3, 4, 5]

//Use seamless-immutable.js
var immutableArr = Immutable([1, 2, 3, 4]);
var newImmutableArr = immutableArr.concat([5]);
console.log(immutableArr); //[1, 2, 3, 4];
console.log(newImmutableArr); //[1, 2, 3, 4, 5];
```
### Что такое Promise?

### Жизненный цикл HTML-страницы
У жизненного цикла HTML-страницы есть три важных события:
1. `DOMContentLoaded` – браузер полностью загрузил HTML, было построено DOM-дерево, но внешние ресурсы, такие как картинки <img> и стили, могут быть ещё не загружены.
2. `load` – браузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.).
3. `beforeunload/unload` – пользователь покидает страницу.


Событие `DOMContentLoaded` – DOM готов, так что обработчик может искать DOM-узлы и инициализировать интерфейс.

Событие `load` – внешние ресурсы были загружены, стили применены, размеры картинок известны и т.д.

Событие `beforeunload` – пользователь покидает страницу. Мы можем проверить, сохранил ли он изменения и спросить, на самом ли деле он хочет уйти.

`unload` – пользователь почти ушёл, но мы всё ещё можем запустить некоторые операции, например, отправить статистику.

### Какие хуки жизненного цикла есть у в VueJS
- `beforeCreate` - вызывается синхронно сразу после инициализации экземпляра, перед установкой наблюдения за данными и механизмов слежения и событий.
- `created` - вызывается синхронно после создания экземпляра. На этом этапе экземпляр закончил обработку опций и настроил: наблюдение за данными, вычисляемые свойства, методы, коллбэки методов-наблюдателей и событий
- `beforeMount` - вызывается непосредственно перед началом монтирования: функция render будет вызываться в первый раз.
- `mounted` - вызывается после монтирования экземпляра, где элемент, переданный в app.mount, заменяется вновь созданным vm.$el. Если корневой экземпляр примонтирован на элемент документа, то vm.$el также будет элементом документа при вызове mounted.

Обратите внимание: `mounted` не гарантирует, что все дочерние компоненты будут уже примонтированы. Если необходимо дождаться, пока будут отрисованы все дочерние компоненты, то можно воспользоваться `vm.$nextTick` внутри mounted:
```js
mounted() {
  this.$nextTick(function () {
    // Код, который будет запущен только после
    // отрисовки всех представлений
  })
}
```
- `beforeUpdate` - Вызывается при изменении данных, перед обновлением DOM. В этом хуке удобно получить доступ к существующему DOM перед обновлением, например, чтобы вручную удалить слушатели событий, которые были добавлены.
- `updated` - Вызывается после того, как обновится виртуальный DOM из-за изменений данных.

DOM компонента уже будет обновлён к моменту вызова этого хука, поэтому здесь можно выполнять операции, связанные с DOM. Тем не менее, старайтесь избегать изменения состояния в этом хуке. Для реагирования на изменения состояния лучше использовать вычисляемые свойства или отслеживание с помощью методов-наблюдателей.

Обратите внимание: `updated` не гарантирует, что все дочерние компоненты также были отрисованы повторно. Если необходимо дождаться повторной отрисовки всех дочерних компонентов, можно воспользоваться vm.$nextTick внутри updated:

```js
updated() {
  this.$nextTick(function () {
    // Код, который будет запущен только после
    // переотрисовки всех представлений
  })
}
```

Не вызывается при отрисовке на стороне сервера, потому что на стороне сервера выполняется только первоначальная отрисовка.

### Что такое вычисляемые свойства?

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

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


### Что такое props?


---

## HTTP | REST

### Что такое HTTP?
`HTTP` — широко распространённый протокол передачи данных, изначально предназначенный для передачи гипертекстовых документов (то есть документов, которые могут содержать ссылки, позволяющие организовать переход к другим документам).

Протокол `HTTP` предполагает использование клиент-серверной структуры передачи данных. Клиентское приложение формирует запрос и отправляет его на сервер, после чего сервер обрабатывает данный запрос, формирует ответ и передаёт его обратно клиенту.

Как правило, передача данных по протоколу `HTTP` осуществляется через `TCP/IP`-соединения. Серверное программное обеспечение при этом обычно использует `TCP`-порт 80 (и, если порт не указан явно, то обычно клиентское программное обеспечение по умолчанию использует именно 80-й порт для открываемых HTTP-соединений).

### Разница между REST и RESTful API
`REST` - Это набор правил, определяющих, как должен работать `API`. Если `API` является `RESTful`, это просто означает, что `API` придерживается архитектуры `REST`. Проще говоря, нет никаких различий между `REST` и `RESTful` с точки зрения `API`. `REST` — это набор правил. `RESTful` относится к `API`, придерживающемуся этих правил. Его можно использовать в веб-сервисах, приложениях и программном обеспечении.

Основные принципы
- Разделение клиента и сервера - В архитектурном стиле REST реализация клиента и реализация сервера могут выполняться независимо друг от друга, не зная друг друга. Пока каждая сторона знает, какой формат сообщений отправлять другой, они могут оставаться модульными и отдельными.
- Statelessness - Системы, которые следуют парадигме `REST`, не имеют состояния, а это означает, что серверу не нужно ничего знать о том, в каком состоянии находится клиент, и наоборот. Таким образом, и сервер, и клиент могут. Эти ограничения помогают приложениям `RESTful` достичь надежности, быстрой производительности и масштабируемости как компонентов, которыми можно управлять, обновлять и повторно использовать, не затрагивая систему в целом, даже во время работы системы.
- Связь между клиентом и сервером

### В чем самая большая разница между GraphQL и REST?

## GIT
1. Опишите свой опыт создания рабочего процесса в Gitflow.