FoxMalder

Задание

Необходимо реализовать страницу вывода списка товаров, и возможностью добавления/удаления товаров в списке. Ссылка на макет

Требование к стеку и исполнению

Верстка должна совпадать с макетами.
Проект должен быть выполнен с использованием Vue3
Для реализации допустимо использование сборщика.
При выполнении работы не разрешается использовать никакие UI библиотеки.
В секции template не разрешается использовать HTML препроцессоры.

Почему Mocha, а не Jasmine?

Ниже будут приведены аргументы в пользу выбора Mocha

Высокая популярность:
— 4m против 400k загузок в месяц
Высокая активность:
— 1 890 против 1400 коммитов (всего)
— 171 против 101 коммитов (последний год)

Vue.js: Lodash debounce

<input v-on:input="debounceInput">

methods: {
  debounceInput: _.debounce(function (e) {
    this.filterKey = e.target.value;
  }, 500)
}

Get index in `for of`

for (const [index, value] of ['a', 'b', 'c'].entries()) {
  console.log(index, value)
}

/*
0 "a"
1 "b"

Debounce with promises

// https://stackoverflow.com/questions/35228052/debounce-function-implemented-with-promises

function debounce (inner, ms = 0) {
  let timer = null
  let resolves = []

 return function (...args) {

Первичная настойка Debian Linux/Разворачиваем серверную инфраструктуру на Digital ocean

Для проектов среднего и небольшого размера не всегда оправданно использовать AWS/Kubernetes подобную технологию. Для проектов нуждающихся в нескольких серверах отлично подходит Digital ocean. Который к тому же предоставляет средства вертикального скейлинга(увеличение производительной мощности уже существующих серверов).

SSH cертификат

Создаем сертификат под которым будем логинится на сервера нашего проекта (на локальной машине)

ssh-keygen -t rsa -b 4096 -f /Users/alex/.ssh/myproject_test -C "myproject comment"

Не забываем сделать его бекап

Javascipt. For. Var. Let. Closure. Event loop.

var

for(var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}

Передать ивент из родителя в потомок (Vue.js)

В потомке подписываемся на некое событие через $parent.$on('some-event'). В родителе емитим это событие.

<div id="app">
  <my-component></my-component>
  <button @click="click">Click</button>

	// Файл "tsconfig.json":
	// - устанавливает корневой каталог проекта TypeScript;
	// - выполняет настройку параметров компиляции;
	// - устанавливает файлы проекта.
	// Присутствие файла "tsconfig.json" в папке указывает TypeScript, что это корневая папка проекта.
	// Внутри "tsconfig.json" указываются настройки компилятора TypeScript и корневые файлы проекта.
	// Программа компилятора "tsc" ищет файл "tsconfig.json" сначала в папке, где она расположена, затем поднимается выше и ищет в родительских папках согласно их вложенности друг в друга.
	// Команда "tsc --project C:\path\to\my\project\folder" берет файл "tsconfig.json" из папки, расположенной по данному пути.
	// Файл "tsconfig.json" может быть полностью пустым, тогда компилятор скомпилирует все файлы с настройками заданными по умолчанию.
	// Опции компилятора, перечисленные в командной строке перезаписывают собой опции, заданные в файле "tsconfig.json".

	//
	/******************************************************************************
	* user.js *
	* https://github.com/pyllyukko/user.js *
	******************************************************************************/

	/******************************************************************************
	* SECTION: HTML5 / APIs / DOM *
	******************************************************************************/