Front-end. Вопросы на собеседовании

Репозитории видеокаста, содержит коллекцию вопросов, которые можно получить на техническом собеседовании на вакансию Junior/Middle Front-end разработчик. Плейлист будет интересен не только кандидатам, так как поможет быстро подготовиться к интервью, повторив все необходимые темы. Но так же и техническим специалистам, которые проводят интервью, поскольку содержит большой сборник вопросов по всем основным блокам. Все вопросы сформулированы максимально корректно, что бы не запутать кандидата. А ответы подробны и максимально лаконичны, что бы не тратить много времени на подготовку.

Ещё больше полезной информации можно найти на YouTube канале

https://github.com/YauhenKavalchuk/interview-questions

Частые вопросы на собеседовании JS

JavaScript как клонировать обьект?

Обьекты хранятся и копируются по ссылке. Примитивные типы: строки, числа, логические значения – присваиваются и копируются по значению. Два объекта равны только в том случае, если это один и тот же объект.

let user = {
  name: "Иван",
  age: 30
};

let clone = {}; // новый пустой объект

// скопируем все свойства user в него
for (let key in user) {
  clone[key] = user[key];
}

// теперь в переменной clone находится абсолютно независимый клон объекта
clone.name = "Пётр"; // изменим в нём данные

alert( user.name ); // в оригинальном объекте значение свойства `name` осталось прежним – Иван.

Или через Object.assign

let user = {
  name: "Иван",
  age: 30
};

let clone = Object.assign({}, user);

Если объект содержит внутри еще объекты то нужно использовать глубокое клонирование. Мы можем реализовать глубокое клонирование, используя рекурсию. Или, чтобы не изобретать велосипед, использовать готовую реализацию — метод _.cloneDeep(obj) из JavaScript-библиотеки lodash.


Что такое spread?

Этот опреатор появился в ES6

  1. Синтаксис оператора spread это просто три точки: …
  2. Оператор spread позволяет расширять выражения в тех местах, где предусмотрено использование нескольких аргументов.
var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];
console.log(arr); // [1, 2, 3, 4, 5, 6]

// пример с поиском максимального значения
var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max); // 8

// пример копирования массива 
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);

// преобразования строки в массив 
var str = "hello";
var chars = [...str];
console.log(chars);


Что такое event loop js и как он работает?

https://developer.mozilla.org/ru/docs/Web/JavaScript/EventLoop

Что такое js замыкание и как он работает?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Closures


Асинхронность в js

https://developer.mozilla.org/ru/docs/Learn/JavaScript/Asynchronous

Делегирование в браузере

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

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

Эта техника называется делегированием и очень активно применяется в современном JavaScript.

На примере меню
Делегирование событий позволяет удобно организовывать деревья и вложенные меню.

Давайте для начала обсудим одноуровневое меню:

<ul id="menu">
  <li><a href="/php">PHP</a></li>
  <li><a href="/html">HTML</a></li>
  <li><a href="/javascript">JavaScript</a></li>
  <li><a href="/flash">Flash</a></li>
</ul>

Клики по пунктам меню будем обрабатывать при помощи JavaScript. Пунктов меню в примере всего несколько, но может быть и много. Конечно, можно назначить каждому пункту свой персональный onclick-обработчик, но что если пунктов 50, 100, или больше? Неужели нужно создавать столько обработчиков? Конечно же, нет!


Расскажите про событийную модель js

Существуют четыре варианта “навешивания” обработчиков на определенное событие

1 псевдопротокол javascript:

<a href="javascript:alert('got click!')">link</a>

2 inline-метод

<a href="someurl.html" onclick="alert('got click!')">link</a>

3 установка element.onclick в js

var handler = function(){ alert('clicked'); };
document.getElementById('myhref').onclick = handler;

4 addEventListener/attachEvent

// addEventListener:

elem.addEventListener('click', handler, false);
//attachEvent:

elem.attachEvent('onclick', handler);

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

Событийная модель, в которой браузер выстраивает очередь обработчиков от целевого элемента, инициировавшего событие до корневого элемента document, называется bubbling-моделью (bubble, англ., – пузырь).

Событие как бы “всплывает” по иерархии документа от элемента, вызвавшего его и до корня. При прохождении каждого родительского элемента браузер проверяет, не установлен ли у этого родителя обработчик события такого же типа, и если установлен, вызывает его.

Событийная модель, в которой браузер выстравивает очередь обработчиков от корневого элемента document до целевого элемента (инициировавшего событие), называется capturing-моделью (capturing, англ., – захват). При прохождении каждого элемента вниз по иерархии браузер проверяет наличие обработчика события такого же типа, и если обработчик есть, вызывает его.


Фаза погружения в js

https://learn.javascript.ru/bubbling-and-capturing

Что такое html доступность?

https://developer.mozilla.org/ru/docs/Learn/Accessibility/What_is_accessibility


Что такое Идемпотентность?

https://developer.mozilla.org/ru/docs/Glossary/Idempotent


Html entities?

https://www.w3schools.com/html/html_entities.asp

Как работает position: sticky?

Ранее существовало четыре типа позиционирования: staticrelativeabsolute и fixed.

Основное различие между static и relativeabsolute и fixed в том, какое место они занимают в потоке документа (DOM). Элементы с позицией static и relative сохраняют своё естественное положение в потоке документа, в то время как absolute и fixed «вырываются» из потока документа и становятся плавающими.

Новое значение sticky похоже на все предыдущие значения сразу.

.some-component {
  position: sticky;
  top: 0px;
}


Способы изоляции стилей в CSS?

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

Но это ещё не всё. Существуют блоки, которые довольно сложны по своей html-структуре. Например шапка сайта может содержать в себе flex-сетку со множеством вложенных функциональных блоков (меню, логотипы, ссылки, иконки и т.д.). Скорее всего такой блок будет оформлен в виде отдельного html/php-файла, который просто подключается на странице. Но, если html-разметку мы можем разделить по файлам и верстать индивидуально, то с css-стилями такой «финт не прокатит», поскольку, опять же css имеет глобальную область видимости.

  1. CSS каскадность
  2. Уникальность именования классов
  3. Утилитарные классы


Микро и макро таски в js

https://learn.javascript.ru/event-loop


Что такое prototype, proto и чем отличаются?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/proto


Зачем нужны модули в js

https://learn.javascript.ru/modules-intro


Что такое cors csrf?

https://developer.mozilla.org/ru/docs/Web/HTTP/CORS

https://developer.mozilla.org/ru/docs/Glossary/CSRF


SOLID в JS

Command query separation (CQS)

Command-query Separation (CQS) — принцип программирования, изобретённый Бертраном Мейером, создателем языка Eiffel. Согласно этому принципу, каждая функция является либо командой, которая выполняет действие (action), либо запросом (query), который извлекает данные, но не тем и другим одновременно. Команда всегда связана с выполнением побочных эффектов, а чистые функции возможны только для запросов.

// Возвращает true или false как результат своего выполнения
save(user);

Согласно принципу CQS, функция save() является командой. Единственное, что она может — возвращать (опять же согласно принципу) успешность своего выполнения, то есть true или false (либо undefined, как в случае с console.log()). Возврат этой функцией любых осмысленных данных рассматривается как нарушение CQS. Однако, стоит сказать, что существуют ситуации, в которых невозможно соблюсти этот принцип.


Что такое чистая функция?

Функция должна удовлетворять двум условиям, чтобы считаться «чистой»:

— Каждый раз функция возвращает одинаковый результат, когда она вызывается с тем же набором аргументов

— Нет побочных эффектов

Еще можно переформулировать как
1) Не зависит от других
2) Не влияет на других


Что такое стрелочная функция?

Это — анонимные функции с особым синтаксисом, которые принимают фиксированное число аргументов и работают в контексте включающей их области видимости, то есть — в контексте функции или другого кода, в котором они объявлены.

(argument1, argument2, ... argumentN) => {
  // тело функции
}

Пример

const words = ['hello', 'WORLD', 'Whatever'];
const downcasedWords = words.map(word => word.toLowerCase());


Что такое лямбда функция?

Лямбда функция это сокращенный вариант безымянной (анонимной) функции.

const SQUARE = x => x ** 2


Как определяеться контекст?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/this

Что такое промисы?

https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise


Что такое боксинг?

http://htmlbook.ru/css/box-sizing


Отличие for…of от for…in в javascript

Оба оператора, и for...in и for...of производят обход объектов. Разница лишь в том, как они это делают.

Оператор for...of выполняет обход по элементам коллекций (иначе говоря, итерируемых объектов, например, ArrayMapSetStringarguments, DOM коллекций и т.д.), вызывая на каждом шаге итерации значение, а не ключ.

Оператор for...of для массивов работает аналогично forEach, но имеет преимущества: возможность использовать continue и break для контроля итераций, что невозможно в forEach.

let arr = [10, 20, 30];

for (let value of arr) {
  value += 1;
  console.log(value);
}
// 11 21 31

for…in

Цикл for...in проходит через перечисляемые свойства объекта. Он пройдёт по каждому отдельному элементу, вызывая на каждом шаге ключ. Цикл for...in проходит по свойствам в произвольном порядке, поэтому его не следует использовать для Array.

var obj = {a:1, b:2, c:3};

for (var prop in obj) {
  console.log(obj[prop]);
}

// 1 2 3


Функции первого рода

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

Функция высшего порядка должна возвращать функцию и/или принимать одну функцию в параметр.


Что такое dom content load?

https://developer.mozilla.org/ru/docs/Web/API/Window/DOMContentLoaded_event

Чери-пик сквош и тд?

Команда git cherry-pick commit применяет изменения, внесенные именованным коммитом в текущую ветку.

Git squash — это прием, который помогает взять серию коммитов и уплотнить ее. Например, предположим: у вас есть серия из N коммитов и вы можете путем сжатия преобразовать ее в один-единственный коммит. Сжатие через git squash в основном применяется, чтобы превратить большое число малозначимых коммитов в небольшое число значимых. Так становится легче отслеживать историю Git. 


Декларативный и императивный подход

Декларативное программирование – это когда в коде описано что должно получиться, а императивное – когда написано как это сделать. Т.е. в первом случае мы совершенно не интересуемся, каким именно образом машина сделает работу, какие инструкции в каком порядке выполнятся и так далее, мы просто объясняем ей, что хотим увидеть в результате. Примеры декларативных языков – html, css, sql, конфиг nginx.\

Программируя императивно, мы описываем конкретные шаги, действия и точный порядок, в котором их нужно исполнять. Напрямую руководим процессом, непосредственно отдаём приказания. Примеров масса, большинство популярных языков императивны, в том числе и javascript. Ты пишешь: вот, сделай-ка переменную myVar, потом запиши туда число 5, повторяй это до тех пор, пока что-то не случится… и так далее. Возвращаясь к примеру с баней, ты теперь – начальник бригады, именно говоришь какое бревно куда класть.


Что такое гидратация (hydrate)?

Существует такой показатель производительности веб страницы, как First Contentful Paint (FCP) — в приближённом переводе будет звучать как ‘первая значимая отрисовка’ — время, когда браузер начал отображать любой текст, изображения (включая фоновые). Это первые элементы, которые пользователь увидит на странице. Создав отчёт с помощью Lighthouse в Chrome, в закладке performance, вы сразу же увидите этот показатель.

Время, потраченное на генерацию содержимого на сервере и будет являться First Contentful Paint временем.

Сразу после этого, клиентский JavaScript начинает выполнение по созданию полноценного клиентского приложения (в большинстве случаев популярных фреймворков — virtual dom и binding интерфейса управления им).

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

Именно этот процесс и называется гидратацией или регидратацией (hydration / re-hydration).

Анонимные функции

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

var luke = function() {
    // используй силу
}

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

Есть еще одна интересная особенность: в определенной записи такие функции могут вызывать сами себя.

Такая запись может показаться лишней, обычный JS также запустит функцию, когда дойдет до нее в коде. Так зачем использовать такую странную запись?

Главная причина – область видимости функции. Можете вспомнить из прошлой статьи, что переменная, объявленная внутри функции, может быть вызвана только внутри этой функции. В остальном коде данная переменная не видна. Точно так же переменная внутри самовыполняющейся функции замыкается внутри этой функции. Такую переменную нельзя случайно вызвать из внешнего кода или переписать. Такая техника аккуратно инкапсулирует переменные и код, пряча их от глобального пространства имен, чтобы они не вступили в конфликт с другим кодом. По такой же схеме часто пишутся полифилы и плагины, в виде самовыполняющихся функций.

Ответы на вопросы компания MindK на тему OOP

❏ Понимаю в чем суть ООП и его отличия от других подходов в программировании (функционального, процедурного).
ООП нацелено на разделение обязанностей и сокрытие информации

❏ Понимаю, что такое инкапсуляция, наследование и полиморфизм и могу объяснить на примерах.
Инкапсуляция – сокрытие данных ( public private protected )
Наследование – позволяет наследовать значения и методы родительского класса
Полиморфизм – позволяет расширять или изменять дочерний класс

❏ Понимаю, что такое класс в ООП.
Это элемент ПО, описывающий абстрактный тип данных и его частичную или полную реализацию

❏ Понимаю, что такое объект в ООП.
Это отдельный представитель класса, имеющий конкретное состояние и поведение, полностью определяемое классом

❏ Знаю какие бывает модификаторы доступа и их нюансы применения на практике.
public, private, protected

❏ Понимаю, что такое абстрактный класс и могу его реализовать.
Заготовка – методы должны быть определены в классе-потомке

❏ Понимаю, что такое интерфейс и области его применения.
Контракт – какие методы должен реализовывать класс

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

❏ Понимаю, что такое паттерн программирования и какую проблему он решает.
Паттерны (или шаблоны) проектирования описывают типичные способы решения часто встречающихся проблем при проектировании программ

❏ Знаю, понимаю, и реализовывал хотя бы раз:
❏ Singleton – создание одного инстанса
❏ Factory – используется для создания объектов
❏ Proxy – интерфейс взаимодействия с любым классом, который трудно или невозможно использовать в оригинальном виде
❏ Adapter – позволяет привести нестандартный или неудобный интерфейс какого-то класса в интерфейс, совместимый с вашим кодом
❏ Command Chain – позволяет передавать запросы последовательно по цепочке обработчиков. Каждый последующий обработчик решает, может ли он обработать запрос сам и стоит ли передавать запрос дальше по цепи
❏ Inversion of Control – все зависимости модулей должны строятся на абстракциях этих модулях, а не их конкретных реализациях
❏ DI –  объект, который знает, как создать и настроить экземпляр класса и зависимых от него объектов. Используется для реализации слабосвязанной архитектуры
❏ ServiceLocator – является объектом, предоставляющим всевозможные сервисы (или компоненты), которые могут понадобиться приложению
❏ Prototype – позволяет копировать объекты, не вдаваясь в подробности их реализации
❏ Decorator – Динамически добавляет новую функциональность в экземпляры классов
❏ Observer – наблюдатель для навешивания обработчика на изменения
❏ Builder – интерфейс для производства частей сложного объекта
❏ Register – для реализации централизованного хранения объектов, часто используемых во всем приложении
❏ Mixin/Trait – подмешивание методов

Лучший ресурс по паттернам на мой взгляд https://refactoring.guru/ru/design-patterns/php


❏ Понимаю отличие подхода наследования от композиции.
Наследование – class dodgeClass extends carClass
Композиция – new carClass(new dodgeClass())

❏ Понимаю что такое namespace и их практическое применение.
Разделение пространства имен, для избегания конфликтов названий

Ответы на вопросы компания MindK на тему JS

❏ Я знаю все стандартные типы данных в JavaScript, особенности работы с ними.

number для любых чисел: целочисленных или чисел с плавающей точкой.
string для строк. Строка может содержать один или больше символов, нет отдельного символьного типа.
boolean для true/false.
null для неизвестных значений
undefined для не присвоенных значений
object для более сложных структур данных.
symbol для уникальных идентификаторов.

❏ Понимаю, как работает приведение типов в JS.
String(value), Number(value), Boolean(value)

❏ Понимаю отличие null от undefined.

null -это особое значение, означающее “no value”. null -это особый объект, потому что typeof null возвращает ‘object’.
С другой стороны, undefined означает, что переменная не была объявлена или ей не было присвоено значение.

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

Статья про это https://habr.com/ru/post/127482/

❏ Знаю, что такое замыкание и лексическое окружение.
Лексическое окружение – все переменные внутри функции. Замыкание это функция у которой есть доступ к своей внешней функции по области видимости, даже после того, как внешняя функция прекратилась

❏ Знаю, что такое анонимные функции.
Это функции без имени, выполняются непосредственно в контексте

❏ Знаю что такое ДОМ-дерево и как JS с ним взаимодействует.
Объектная модель документа. DOM – это представление HTML-документа в виде дерева тегов. 

❏ Имею опыт манипуляций с ДОМ-деревом документа (удаление, добавление, изменение, поиск по ID, поиск по селекторам).

var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
var elem = document.querySelector('#some-element');
elem.parentNode.removeChild(elem);

❏ Понимаю, что такое события и как с ними работать.

Событие – это сигнал от браузера о том, что что-то произошло. Все DOM-узлы подают такие сигналы (хотя события бывают и не только в DOM).

Вот список самых часто используемых DOM-событий:

События мыши:

  • click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании).
  • mouseover / mouseout – когда мышь наводится на / покидает элемент.
  • mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе.
  • mousemove – при движении мыши.

Существует множество других событий.

❏ Знаю несколько способов создания объекта.
Оператор new var MyObject = new Object();
Литеральная нотация MyObject = { id : 1, name: ‘Pupkin’ }
Конструкторы объектов function MyObject(id, name) { this._id = id; this._name = name; } var MyFirstObjectInstance = new MyObject(5,”Sample”);
Ассоциативные массивы MyObject[“id”] = 5; MyObject[“name”] = “SampleName”;

❏ Понимаю различие strict и non-strict mode.
Строгий режим, выкидывает исключения и ошибки где в нестрого режиме ничего не произойдет

❏ Имею опыт работы с локальными хранилищами: cookies, localstorage, session storage, IndexedDB, знаю их плюсы минусы и сферы приминения.

  • SessionStorage – выполняет это в течение определённого промежутка времени (сессии). Закрытие вкладки или браузера приводит их к удалению. При этом данные в SessionStorage сохраняются при обновлении страницы.
  • LocalStorage – осуществляет это в течение неограниченного времени. Они сохраняются при перезагрузке браузера и компьютера. Их длительность хранения ничем не ограничена. Но, хоть эти данные могут храниться бесконечно в браузере, обычный пользователь может их очень просто удалить, например выполнив очистку истории (при включенной опции «файлы cookie и другие данные сайтов»).
  • IndexedDB – это встроенная база данных, более мощная, чем localStorage.
    Хранилище ключей/значений: доступны несколько типов ключей, а значения могут быть (почти) любыми.
    Поддерживает транзакции для надёжности.
    Поддерживает запросы в диапазоне ключей и индексы.
    Позволяет хранить больше данных, чем localStorage.

❏ Понимаю основные принципы асинхронности в ajax/fetch/XHR.

XMLHttpRequest поддерживает как синхронные, так и асинхронные запросы. В основном предпочтительно использовать асинхронные запросы вместо синхронных из-за соображений производительности.

Синхронный запрос приводит к выполнению кода, который “блокирует” взаимодействие с вкладкой браузера до тех пор, пока запрос не будет полностью выполнен, что существенно ухудшает отклик страницы

❏ Понимаю принцип работы API (типы, логика работы REST-приложений).

REST (RESTful) – это общие принципы организации взаимодействия приложения/сайта с сервером посредством протокола HTTP. Особенность REST в том, что сервер не запоминает состояние пользователя между запросами – в каждом запросе передаётся информация, идентифицирующая пользователя (например, token, полученный через OAuth-авторизацию) и все параметры, необходимые для выполнения операции.

Для каждого типа операции используется свой метод HTTP-запроса:
1. получение – GET
2. добавление – POST
3. модификация – PUT
4. удаление – DELETE

❏ Понимаю, что такое JSON и его применение в современной веб-разработке.

Обозначение объектов JavaScript (JSON – JavaScript Object Notation) – стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот).

❏ Понимаю, как реализовать кроссдоменный Ajax запрос и реализовывал его на практике.

var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
var xhr = new XHR();
xhr.open('GET', 'http://anywhere.com/request', true);
xhr.onload = function() {
    alert(this.responseText);
}
xhr.onerror = function() {
    alert('Ошибка ' + this.status);
}
xhr.send();

❏ Знаю функции отложенного выполнения скрипта setTimeout, setInterval.
setTimeout позволяет вызвать функцию один раз через определённый интервал времени
setInterval позволяет вызывать функцию регулярно, повторяя вызов через определённый интервал времени.

❏ Имею опыт отладки JS-кода в консоли браузера.

Ctrl + Shift + C

❏ Знаю отличие функциональнального наследование от прототипного

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

Наследование – это создание новых «классов» на основе существующих.

❏ Использовал современные возможности ES6/ES7/ES8 (let/const, Деструктуризация, Функции, Строки, Promises, Классы, наследование классов)

https://habr.com/ru/post/313526/

❏ Пониманимаю контекст вызова, this у объектов, функция bind, функции call, apply
Подменяют контекст функции

function f(arg) {
    alert(arg);
    alert(this);
}
f('abc'); // abc, [object Window]
f.call('123', 'abc'); // abc, 123

function f() {
    alert(this);
    for (var i = 0; i < arguments.length; i++) {
        alert(arguments[i]);
    }
}
f(1, 2, 3); // [object Window], 1, 2, 3
f.apply('abc', [1, 2, 3, 4]); // abc, 1, 2, 3, 4

function f() {
    alert(this);
}
var wrapped = f.bind('abc');
f(); // [object Window]
wrapped(); // abc

❏ Работал с webpack и JavaScript-модулями

Вебпак — это сборщик модулей. Он анализирует модули приложения, создает граф зависимостей, затем собирает модули в правильном порядке в один или более бандл (bundle), на который может ссылаться файл «index.html».

const path = require('path');
module.exports = {
  mode: "development", // could be "production" as well
  entry: './src/main.js', 
  output: {
    path: path.resolve(__dirname, 'public'), 
    filename: 'bundle.js' 
  }
};

❏ Пониманю различия Browser APIs и Node.js

Node использует Google V8, который реализует стандарт ECMAScript. Синтаксис точно такой же, но вы работаете с другой средой – например, у вас нет DOM и есть API для доступа к файловой системе и сокетам.

❏ Знаю один из Front-end фремворков: React.js, Angular, Vue.js, Ember.js
https://vuejs.org

❏ Знаю один из Back-end фремворков: Express, Adonis, Loopback, Meteor, Sails, Nest

https://expressjs.com/ru/

❏ Понимаю работу JS Testing frameworks (Jest, Jasmine,..)

https://jestjs.io/ru/

Ответы на вопросы компания MindK на тему SQL

❏ Понимаю ,что такое реляционные базы данных и в чем отличия от нереляционных.
Это набор данных с предопределенными связями между ними

❏ Знаю, что такое 3-я нормальная форма.
Каждый столбец, не являющийся ключом, должен зависеть только от столбца, который является ключом

❏ Знаю, что такое view и когда их лучше применять.
Это представление или виртуальная таблица. Объект базы данных, являющийся результатом выполнения запроса к базе данных, определенного с помощью оператора SELECT, в момент обращения к представлению. Представления иногда называют «виртуальными таблицами».  Можно менять структуру данных, не затрагивая программный код, нужно лишь создать представления, аналогичные таблицам, к которым раньше обращались приложения.

❏ Знаю, что такое временная таблица и когда ее применять.

Временные таблицы используются для хранения промежуточных данных при сложных выборках из БД, например при большом количестве JOIN и UNION запросов. Созданные таблицы доступны до закрытия соединения.

❏ Знаю когда нужно применять varchar, а когда text.
TEXT имеет фиксированный максимальный размер 65535 символов. В него нельзя поместить индекс кроме полнотекстового.
VARCHAR имеет переменную максимальный размер

❏ Знаю, что такое транзакции и для чего они нужны.

BEGIN;
SELECT @A:=SUM(salary) FROM table1 WHERE type=1;
UPDATE table2 SET summmary=@A WHERE type=1;
COMMIT;

В случае не выполнения части транзакции она откатывается до начального состояния.

❏ Знаю, как работает блокировка в MyISAM и InnoDB.
MyISAM (используемом по умолчанию) реализована табличная блокировка
InnoDB построчная

❏ Понимаю, что такое trigger и знаю когда его использовать.

Триггер в MySQL — это определяемая пользователем SQL-команда, которая автоматически вызывается во время операций INSERT , DELETE или UPDATE . Код триггера связан с таблицей и уничтожается после удаления таблицы.

CREATE TRIGGER update_test AFTER INSERT ON test
FOR EACH ROW BEGIN
INSERT INTO log Set msg = 'insert', row_id = NEW.id;
END;

❏ Кодил хранимые процедуры.

Хранимая процедура – это способ инкапсуляции повторяющихся действий. В хранимых процедурах можно объявлять переменные, управлять потоками данных, а также применять другие техники программирования

DELIMITER //  
  
CREATE PROCEDURE `p2` ()  
LANGUAGE SQL  
DETERMINISTIC  
SQL SECURITY DEFINER  
COMMENT 'A procedure'  
BEGIN  
    SELECT 'Hello World !';  
END//  

❏ Знаю для чего нужны индексы и принцип их работы.

MySql Index – это важный и полезный инструмент, который позволяет оптимизировать выборку из базы данных. Использование индексов значительно сокращает время выполнения запроса, что позволяет быстрее получать данные.
Ощутимую разницу при использовании MySql индексов можно увидеть при работе с таблицами крупных размеров.
Индекс представляет из себя структуру, в которой хранятся значения одного или нескольких столбца[ов] таблицы и ссылок на строки, где эти значения расположены. Для хранения индексов чаще всего используются “бинарные деревья”.

❏ Знаю в чем отличие primary key, unique и index.

Типы MySql индексов:

  • PRIMARY KEY – Первичный ключ: основной ключ, который позволяет хранить свои значения как уникальные записи таблицы. Данный тип ключа должен присутствовать в таблице в единственном экземпляре. Обычно данный тип ключа определяют колонке с наименованием id.
  • UNIQUE – Уникальный ключ: Частично похож на первичный ключ, за счет того, что значения колонки таблицы должны быть уникальными (не должны повторяться) и не должны быть равны NULL.
  • Составной индекс: данный тип индекса включает в индексирование несколько полей. Данный тип индексирования обычно используется в запросах, в которых необходимо произвести выборку по нескольким полям (там где в условии WHERE встречается более одного параметра).

❏ Понимаю, что такое полнотекстовый поиск.

1. Делится текст на отдельные слова, отбрасываются короткие и служебные слова.
2. Прогоняются слова через стемминг (отсекаются окончания)
3. По словам строится индекс

❏ Знаю последовательности применения операндов LIMIT, GROUP, ORDER.

GROUP ORDER LIMIT

❏ Знаю в чем разница применения операндов WHERE и HAVING.

Основное отличие WHERE от HAVING заключается в том, что WHERE сначала выбирает строки, а затем группирует их и вычисляет агрегатные функции (таким образом, она отбирает строки для вычисления агрегатов), тогда как HAVING отбирает строки групп после группировки и вычисления агрегатных функций.

❏ Знаю в чем отличие left join, inner join, right join, full join, cross join.

❏ Знаю агрегатные функции и как их использовать.
COUNT() – количество элементов, SUM() – сумма элементов, AVG() – срденнее, MAX() – максимальное, MIN() – минимальное значение.

❏ Могу спроектировать базу данных с двумя сущностями в отношении “многие ко многим”.

table1, table2, table1_to_table2

❏ Знаю как настроить права на таблицу для пользователя.

CREATE USER 'non-root'@'localhost' IDENTIFIED BY '123';
GRANT [тип прав] ON [имя базы данных].[имя таблицы] TO ‘non-root’@'localhost’;
FLUSH PRIVILEGES;


Ответы на вопросы компании MindK на тему PHP

❏ Знаю какие задачи решаются с помощью mod_rewrite.
Модуль Апач, служит для манипуляций над урлом

❏ Реализовывал 301-редирект с помощью mod_rewrite.

Redirect 301 /was.php http://www.site.ru/new.php

❏ Настраивал перенаправления для реализации единой точки входа в приложение с помощью mod_rewrite.

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L]

❏ Знаю, что такое HTTP Authentication и настраивал ее.

AuthName "Текст выводится в окне авторизации"
AuthType Basic
AuthUserFile Полный путь/.htpasswd
require valid-user

❏ Знаю назначение магических методов и применял их на практике.

__construct() - этот метод запускается автоматически при созданнии экземпляра класса
__destruct() - метод запускается автоматически при уничтожении обьекта
__call(), __callStatic() - перехватывают обращение к несуществующему методу в контексте объекта и в статическом контексте
__get(), __set() - выполняется при чтении/записи данных из недоступных свойств
__isset() - будет выполнен при использовании isset() или empty() на недоступных свойствах
__unset() - будет выполнен при вызове unset() на недоступном свойстве
__sleep() - вызывается, когда объект подвергается сериализации при помощи функции serialize()
__wakeup() - вызывается при восстановлении объекта при помощи функции unserialize()
__toString() - метод, с помощью которого можно обращаться к классу как к строке
__invoke() - вызывается при попытке использовать объект в качестве функции
__set_state() - метод, который вызывается для классов, экспортирующих значения свойств функцией var_export()
__clone() - вызывается при клонировании объекта
__debugInfo() - метод вызывается функцией var_dump(), когда необходимо вывести список свойств объекта

❏ Понимаю и использовал в своей работе Iterator (из SPL).

SPL – Стандартная библиотека PHP

// Метод должен вернуть значение текущего элемента
public function current();
// Метод должен вернуть ключ текущего элемента
public function key();
// Метод должен сдвинуть "указатель" на следующий элемент
public function next(): void;
// Метод должен поставить "указатель" на первый элемент
public function rewind(): void;
// Метод должен проверять - не вышел ли указатель за границы?
public function valid(): bool

Строго говоря, итерироваться с помощью foreach нам позволяет интерфейс Traversable, а Iterator является его наследником. Особенность Traversable заключается в том, что его нельзя реализовать напрямую (этакий «абстрактный интерфейс») и пользоваться в своих приложениях нужно всё-таки интерфейсом Iterator или его «младшим братом» IteratorAggregate.

❏ Понимаю и использовал в своей работе ArrayObject (из SPL).
Чтобы объект вёл себя как массив, даёт доступ к данным через квадратные скобки и позволяет делать foreach

❏ Понимаю зачем нужна Reflection и могу привести практический пример применения.

class Child extends Profile {}
$class = new ReflectionClass('Child');
// получаем список всех родителей
print_r($class->getParentClass()); // ['Profile']

❏ Знаю новшества 7.
use Framework\Module{Foo, Bar, Baz};
$bar = $foo ?? ‘default’;
Оператор “космический корабль” <=>
типы скалярных параметров и подсказки (hints)
анонимные классы
и многое другое https://www.php.net/manual/ru/doc.changelog.php

❏ Понимаю зачем нужны анонимные функции и могу привести хотя бы 1 пример использования.

$greet = function($name) { printf("Привет, %s\r\n", $name); };

❏ Понимаю какую проблему решает Autoloading и умею написать свою реализацию.
Автозагрузка классов

function __autoload($className) {
  $filename = $className . ".php";
  if (is_readable($filename)) {
    require $filename;
  }
}

❏ Понимаю какую проблему решает паттерн Front Controller и могу реализовать его на практике.
Один контроллер обрабатывает все запросы к веб-сайту. Фронт-контроллер – это единая точка входа для вашего приложения.
www.example.com/index.php?article=3
www.example.com/index.php?user=4

❏ Понимаю какую проблему решает паттерн Page Controller и могу реализовать его на практике.

Паттерн, в котором один контроллер отвечает за отображение одной логической страницы. Это может быть как отдельная страница, хранящаяся на веб-сервере, так и отдельный объект, который отвечает за страницу.
www.example.com/article.php?id=3
www.example.com/user.php?id=4

❏ Понимаю какую проблему решает паттерн MVC и могу реализовать его на практике.
Модель – вид – контроллер

  • Контролёр указывает модели что нужно сделать.
  • Модель выполняет работу.
  • Вид отображает/отдаёт результат.

❏ Понимаю какую проблему решает паттерн HMVC и могу реализовать его на практике.
Иерархичекий – модель – вид – контроллер

Паттерн Иерархические-Модель-Вид-Контроллер (HMVC) является расширением MVC

❏ Знаю хотя бы один способ реализации роутинга в веб-приложении.
switch $_GET[‘action’] или parse_url

❏ Понимаю как обеспечить безопасную работу с входящим запросом и могу предложить варианты реализации. В частности, как предотвращать CSRF-атаки, XSS фильтр.
CSRF – внедрением токеонов, XSS – шифрование входных данных в сущности

❏ Знаю, что такое SQL-инъекции и могу обеспечить безопасную работу с БД.

Использовать PDO и фильтровать входящие данные

❏ Умею настроить нужный уровень ошибок.

error_reporting(E_ERROR | E_WARNING | E_PARSE | E_NOTICE);

❏ Знаю, как переопределить переменные окружения через htaccess/virt-hosts.

SetEnv Foo "bar"
echo $_SERVER["Foo"];

❏ Смогу найти все ссылки в тексте с помощью reg-выражений.

<a href="(.+?)">(.+?)</a>

❏ Работал с URL-библиотекой.

❏ Знаю, что такое сессия и как с ней работать. Могу реализовать свою ООП-реализацию.
session_set_save_handler('sess_open',
'sess_close',
'sess_read',
'sess_write',
'sess_destroy',
'sess_gb' );
session_start();

❏ Знаю, как дописать содержимое в файл средствами PHP.

file_put_contents($filename, $data, FILE_APPEND);

❏ Умею удалять файлы и директории из PHP.
Файлы — unlink, директории – rmdir

❏ Могу написать обработчик загрузки файла с html формы.

<form enctype="multipart/form-data" action="__URL__" method="POST">
    Отправить этот файл: <input name="userfile" type="file" />
    <input type="submit" value="Отправить файл" />
</form>
move_uploaded_file($_FILES['userfile']['tmp_name'], /dir/to/file.ext)

❏ Знаю как писать консольные скрипты на PHP.

#!/usr/bin/env php
<?php
printf('There were %d arguments passed to PHP:' . PHP_EOL, $argc);
print_r($argv);

❏ Умею построить работу с обработкой ошибок в приложении с использованием Exceptions.

try { } catch (Exception $e) {}

❏ Имею опыт реализации валидации входных данных.
FILTER_VALIDATE_ email domain int float ip Boolean url regexp url

❏ Имею опыт реализации загрузки файлов через форму.

move_uploaded_file($_FILES['userfile']['tmp_name'], /dir/to/file.ext)

❏ Знаю, что такое ACL и хотя бы раз реализовывал
Список управления доступом

❏ Знаю какие драйверы баз данных поддерживаются PHP с коробки.
Без модулией не поддерживает никакие базы данных. С модулями: sqlite, mongodb, myslq, mssql, maxdb, postgresql и другие.

❏ Использовал PDO.

<?php
try {
    $dbh = new PDO('mysql:host=localhost;dbname=test', $user, $pass);
    foreach($dbh->query('SELECT * from FOO') as $row) {
        print_r($row);
    }
    $dbh = null;
} catch (PDOException $e) {
    print "Error!: " . $e->getMessage() . "<br/>";
    die();
}

❏ Понимаю какую проблему решает ActiveRecord и имею опыт реализации.

Active Record обеспечивает объектно-ориентированный интерфейс для доступа и манипулирования данными, хранящимися в базах данных. Класс Active Record соответствует таблице в базе данных, объект Active Record соответствует строке этой таблицы, а атрибут объекта Active Record представляет собой значение отдельного столбца строки. Вместо непосредственного написания SQL-выражений вы сможете получать доступ к атрибутам Active Record и вызывать методы Active Record для доступа и манипулирования данными, хранящимися в таблицах базы данных.

$customer = new Customer();
$customer->name = 'Qiang';
$customer->save();

❏ Знаю плюсы и минусы DataMapper и ActiveRecord.

Оба эти паттерна предназначаются для преобразования данных из реляционного представления в объектное. Разница в том как они это делают и как они организованы, если в вкратце:
ActiveRecord – это объект, который хранит данные и содержит логику взаимодействия с БД.
Преимущества: простота, удобно использовать на небольших проектах.
Недостатки: паттерн нарушает множество принципов в частности Single Responsibility Principle, его использование как правило делает код сильно связанным, из за чего на сложных проектах его использовать невозможно.
DataMapper – объект хранящий логику взаимодействия с БД. Он не хранит данные как ActiveRecord
Преимущества: позволяет построить слабосвязанную архитектуру, разделить приложения на слои.
Недостатки: более сложный

❏ Имею практический опыт разработки на одном из современных фреймворков, таких как Laravel, Symfony, Yii, Zend.
Laravel https://laravel.com

Ответы на вопросы компания MindK на тему Git

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

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

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

Централизованная система контроля версий предназначена для решения основной проблемы локальной системы контроля версий.

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

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

  • Понимаю и использовал основные команды работы с репозиторием GIT (init, clone, commit, push, pull, fetch).
git init // инициализирует проэкт
git clone https://github.com/libgit2/libgit2 // клонирование существующего репозитория
git add * // добавить все файлы к индексированию
git commit // зафиксировать измененные файлы
git push <remote-name> <branch-name> // отправка изменений в удаленный репозиторий
git pull // автоматически получить изменения из удалённой ветки и слить их со своей текущей
git fetch [remote-name] // получение изменений из удалённого репозитория
  • Понимаю предназначение веток и использовал их в своей работе.

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

  • Сливал ветки через merge.

Предположим, вы работаете над проектом и уже имеете несколько коммитов.
Вы решаете, что теперь вы будете заниматься проблемой #53 из вашей системы отслеживания ошибок. Чтобы создать ветку и сразу переключиться на нее, можно выполнить команду git checkout с параметром -b:

$ git checkout -b hotfix
Switched to a new branch "hotfix"

Это то же самое что и:

$ git branch hotfix
$ git checkout hotfix

Вы работаете над своим сайтом и делаете коммиты.

$ git commit -a -m 'Create hotfix'
$ git checkout master
Switched to branch 'master'
git merge hotfix
  • Знаю применение команды stash + использовал её на практике.

Команда git stash позволяет на время «сдать в архив» (или отложить) изменения, сделанные в рабочей копии, чтобы вы могли применить их позже. Откладывание изменений полезно, если вам необходимо переключить контекст и вы пока не готовы к созданию коммита.

git stash    
git stash list    
git stash apply    

Отложенные изменения сохраняются в локальном репозитории Git и не передаются на сервер при выполнении команды push.

  • Реализовывал конфликты.

 Если разработчик A попытается изменить код, который редактирует разработчик B, может произойти конфликт. Основная задача команды git merge заключается в слиянии отдельных веток и разрешении любых конфликтующих правок.

  • Пересаживал цветы коммиты.

Команда git cherry-pick берёт изменения, вносимые одним коммитом, и пытается повторно применить их в виде нового коммита в текущей ветке. Эта возможность полезна в ситуации, когда нужно забрать парочку коммитов из другой ветки, а не сливать ветку целиком со всеми внесенными в нее изменениями.

  • Использовал команду rebase для перезаписи истории.

git rebase — это «автоматизированный» cherry-pick. Он выполняет ту же работу, но для цепочки коммитов, тем самым как бы перенося ветку на новое место.

  • Знаю, как изменить последний коммит.
git commit --amend

Ответы на вопросы компания MindK на тему HTML/CSS

  • Понимаю принцип каскадности таблиц стилей.

Это механизм, благодаря которому к элементу HTML-документа может применяться более чем одно правило CSS

  • Знаю основные HTML-элементы, такие как:span, div, ul, ol, thead, tfoot, p, a, и применял их на практике.
span – строчный элемент
div – блочный элемент
ul – список
ol – нумерованный список
thead – шапка таблицы
tfoot – футер таблицы
p – абзац
a - ссылка
  • Владею CSS-селекторами и понимаю, как они работают, такими как: #id.class; .class + .class; .class ~ div[attr], .div:not(:checked), div[attr*=”lorem”].
#id.class – выбираем в ид такой-то класc
.class + .class – выбрать элементы class внутри первого class
.class ~ div[attr] – выбрать все блоки div[attr] одного родителя class
.div:not(:checked) – выбрать элементы с классом div которые не отмечены &lt;input class=div type=checkbox /&gt;
div[attr*=”lorem”] – выбираем блок с атрибутом который содержит текст lorem
  • Понимаю как определяется приоритетность/вес CSS-селекторов.
*                                 	0-0-0-0 
li                                  0-0-0-1             
li:first-line                     	0-0-0-2             
ul li                              	0-0-0-2             
ul ol+li                          	0-0-0-3 
form + *[type=text]        			0-0-1-1 
table tr td.second         			0-0-1-3             
h2.block.title.               		0-0-2-1 
#xyz                             	0-1-0-0             
style=" "                       	1-0-0-0  
  • Проверял верстку на валидность, знаю основные правила валидного HTML, использовал средства валидации и знаю обязательные атрибуты HTML элементов.

https://validator.w3.org/ . Обязательные атрибуты это !DOCTYPE, html, head, title, body.

  • Применял на практике HTML5 элементы и знаю их назначение, такие как: article, aside, footer, header, nav, section.
article - задает содержание сайта вроде новости, статьи, записи блога, форума или др.
aside - определяет блок сбоку от контента для размещения рубрик, ссылок на архив
footer – определяет подвал сайта
header – определяет шапку сайта
nav – определяет навигацию сайта
section - задаёт раздел документа, может применяться для блока новостей, контактной информации и др.
  • Применял на практике CSS3 свойства, такие как: box-sizing,  animation, transform, translate.

box-sizing – применяется для изменения алгоритма расчета ширины и высоты элемента ( border-box – по границе, content-box – по контенту )

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

translate – одна из функций transform, позволяет перемещать элемент.

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

Это способ борьбы с проблемой контейнера нулевой высоты для плавающих элементов

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
  • Реализовывал тянущуюся верстку, знаю принципы и возможные проблемы.
.col1 { left: 0; right: 50%; margin-right: 100px; }
.col2 { width: 200px; left: 50%; margin-left: -100px; }
.col3 { left: 50%; right: 0; margin-left: 100px; }

Тянущуюся верстку можно делать: таблицами, блоками, гридами, флексами.

  • Работал с адаптивной версткой, знаю принципы, использовал инструменты для тестирования и отладки.

Ctrl+Shift+I

  • Знаю один из markup frame work (Bootstrap CSS / Compass CSS / Foundation CSS Material UI / Semantic UI / Знакомство с LESS, SASS).

https://getbootstrap.com/

sass – препроцессор css

Ответы на вопросы компания MindK на темы Environment Automation and Services

Environment Automation

  • Знаком с базовыми принципами Continuous Integration.
    Это практика разработки ПО, которая заключается в слиянии рабочих копий в общую основную ветвь разработки и выполнении частых автоматизированных сборок проекта выполнении тестов и доставки его на продакт.
  • Знаком с одной из систем Continuous Integration.
    Jenkins, TeamCity, Travis CI
  • Настраивал простую сборку веб-проекта из системы контроля версий (например, GIT) на Linux сервер.
    Hook Pre-commit, post-commit
  • Имею практический опыт работы с Docker.
    Программное обеспечение для автоматизации развёртывания и управления приложениями в средах с поддержкой контейнеризации
  • Знаю как попасть по ssh в Docker контейнер.
    Для этого нужно установить и запустить на докер контейнере sshd
    apt-get install openssh-server
    mkdir /var/run/sshd
    chmod 0755 /var/run/sshd
    /usr/sbin/sshd
    useradd --create-home --shell /bin/bash --groups sudo username ## includes 'sudo'
    passwd username ## Enter a password

    А для выполнения произвольных команд достаточно попасть на баш
    docker ps
    docker exec -it bash
  • Знаю что такое и есть опыт работы с docker-compose.
    Файл compose используется для определения необходимых для приложения сервисов. Пример, подымаем веб = пхп + нджинкс:
version: '3'
services:
  web:
    image: nginx:alpine
    volumes:
      - "./etc/default.conf:/etc/nginx/conf.d/default.conf"
      - ".:/var/www/html"
      - "./etc/default.template.conf:/etc/nginx/conf.d/default.template"
    ports:
      - "80:80"
    environment:
      - NGINX_HOST=${NGINX_HOST}
    command: /bin/sh -c "envsubst '$$NGINX_HOST' < /etc/nginx/conf.d/default.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"
    restart: always
    depends_on:
      - php
  php:
    image: nanoninja/php-fpm:${PHP_VERSION}
    restart: always
    volumes:
      - "./etc/php.ini:/usr/local/etc/php/conf.d/php.ini"
      - .:/var/www/html

Services

  • Знаю сервисы Firebase и есть опыт работы с ними
    Firebase дает инструменты для быстрой разработки приложений
  • Realtime Database
    Облачная NoSQL база данных
  • Cloud Functions
    Выполнение бекенд кода на гугловском облаке
  • Authentication
    Бекенд сервисы (телефон, пароль, провайдеры типа твиттер и фейсбук) SDK для авторизации
  • Cloud Storage
    Облачное хранилище для файлов
  • Знаю сервисы AWS и есть опыт работы с ними.
    https://aws.amazon.com/ru/
  • Есть опыт работы с Google API (e.g. Google Maps API, OAUTH).
    https://developers.google.com/apis-explorer/#p/

Ответы на вопросы компания MindK на тему Client-server Model

– Знаю, что такое DNS и как его переопределить для локального компьютера.
Это система доменных имён, которая связывает названия доменов с IP-адресами компьютеров

– Знаю и понимаю предназначение HTTP протокола.
Протокол прикладного уровня передачи данных изначально — в виде гипертекстовых документов в формате «HTML»

– Знаю, что такое cookies.
Фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя. Веб-клиент всякий раз при попытке открыть страницу сайта пересылает этот фрагмент данных веб-серверу в составе HTTP-запроса

– Знаю что такое URI/URL и из каких фрагментов он состоит.
Символьная строка, позволяющая идентифицировать какой-либо ресурс: документ, изображение, файл, службу, ящик электронной почты и т. Состоит из: схема, источник, путь, запрос, фрагмент.

– Знаю и работал на практике с GET и POST запросами, понимаю их отличие и специфику применения.
GET запрашивает представление указанного ресурса
POST передает данные, подлежащие обработке (например, из формы) в идентифицированный ресурс

– Знаю предназначение HEAD запроса.
Тот же GET только не возвращает тело ответа

– Знаю и использовал на практике запросы типа DELETE, PUT, UPDATE.
DELETE удаляет указанный ресурс, PUT заменяет все текущие представления ресурса данными запроса
UPDATE – такого нету

– Знаю основные коды состояний ответов (1XX, 2XX, 3XX, 4XX, 5XX).
1xx – информационные ( 00 Continue, 01 Switching Protocols, 02 Processing)
2хх – успешные ответы ( 00 OK, 01 Created, 02 Accepted )
3хх – редиректы ( 01 Moved Permanently, 07 Temporary Redirect, 02 Found, 02 Moved Temporarily )
4хх – ошибки ответа ( 00 Bad Request, 01 Unauthorized, 02 Payment Required, 03 Forbidden, 04 Not Found, 05 Method Not Allowed )
5хх – ошибки обработки сервера ( 00 Internal Server Error, 01 Not Implemented, 02 Bad Gateway, 03 Service Unavailable, 04 Gateway Timeout)

– Знаю структуру HTTP-запроса и обязательные параметры заголовков.

  1. строка запроса (Request Line)
  2. заголовки (Message Headers)
    Пустая строка (разделитель)
  3. тело сообщения (Entity Body) – необязательный параметр
    Обязательные параметры это GET(POST и тд) И Host

– Знаю отличия HTTP- и HTTPS-протоколов.
HTTPS надстройка над HTTP и позволяет передавать зашифрованные данные SSL или TLS

– Понимаю REST-подход к разработке веб-приложений и применял его на практике.
REST (RESTful) – это общие принципы организации взаимодействия приложения/сайта с сервером посредством протокола HTTP
GET – получить, POST – добавить, PUT – обновить, DELETE – удалить

– Понимаю предназначение и использовал на практике кросс-доменные запросы.
Это запрос с одного хоста на другой. Обычно запрещен браузером. Для разрешения используют заголовок Access-Control-Allow-Origin содержащий домен запроса.

Scroll Up