frontend.md

Расскажите о проекте, которым по-настоящему гордитесь. Что вы сделали для его успешной реализации?
Расскажите о проекте, который вас разочаровал. Что бы вы сейчас изменили при работе над ним?
Что такое 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 — только в объекте.

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-сетей, а динамический контент остаётся на основном сервере. Таким образом, нагрузка распределяется, и страницы загружаются быстрее.

Что такое мутабельность и иммутабельность?

Иммутабельность предполагает, что после создания данные или структура, которая их содержит, не могут быть изменены Мутабельность означает что данные могут меняться.

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-страницы есть три важных события:

DOMContentLoaded – браузер полностью загрузил HTML, было построено DOM-дерево, но внешние ресурсы, такие как картинки и стили, могут быть ещё не загружены.
load – браузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.).
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:

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

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

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

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

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

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

Nurzzzone/frontend.md