YakovSPb

Vue nuxt
================
1.
npm i -g create-nuxt-apps

2.
create-nuxt-app project

3. Запуск приложения
npm run dev

YakovSPb

Телефон ссылка phone
=================

//Fix phone link
function fixPhoneLink(){
const phoneElements = document.querySelectorAll('.phone a');

phoneElements.forEach((e)=>{
let newLink = 'tel:+7' + e.textContent.replace(/-/g, "").replace(/ /g, "").slice(1)
e.href = newLink;

YakovSPb

Закрытие окна при клике вне его или по нему JS
================


document.addEventListener('click', function(e) {
	const mobileMenu = document.querySelector('.sub-menu')
	if (e.target.hasClass !== 'sub-menu' && (!e.target.matches('.menu-item-has-children') && !e.target.parentElement.matches('.menu-item-has-children'))) {
		mobileMenu.classList.remove('open-menu')
	}
})

YakovSPb

React
==============

Компонент - это самостоятельная часть приложения (функция)в, содежит часть логики , описывает свой вид. Можно использовать много раз.
Компонент - это функция, которая принимается Props и возращает разметку jsx.
Компоненты называются с большой буквы.
Селектор - это фукнция, которая принимает на вход state и возращает какой-то значение
SPA - single page application. Одна страница с небольшим html, куда приходит много JS

Настройка окружения

YakovSPb

Google Speed
=======

Создаем таблицу и мерем Gtmetrix
----


Настройка кеша
----
1) Устанавливаем плагин WP Fastest Cache

YakovSPb

.button - общий клас
.button .button_red - модификатор (например добавляется клас background-color: red)


1) Несколько слов в одном названии разделяются дефисом (например, блок main-page или my-super-main-list)

2) Элементы отделяются от блоков с использованием двух символов подчеркивания, например main-page__header или my-syper-main-list__item
3) Модификаторы отделяются одним символом подчеркивания "_" (main-page__header_strong или my-super-main-list_blue)

Префиксы

YakovSPb

css last child nth :not()
==================

.post:not(:last-of-type) {
	border-bottom: 1px solid #efff;
}

YakovSPb

Как удалить дубликаты из массива
=================

1. Set
const array  = ['Alex', 1, 'mark', 1, 'Mellisa', 1];

const uneqArray = [... new Set(array)];
const uneqArray2 = Array.from(new Set(array));

2. indexOf(находит первый элемент)

YakovSPb

JS как объединить свойства двух объектов
==================

1. spread

const obj1 = {
	food: 'pizza',
	beverage: 'orange fresh',
	coffe: 'late'
}

YakovSPb

JS найти, что строка содержит подстроку
========================

1. Первый вариант includes
let string = 'crossroad';
let substring = 'roads';

let result1 = string.includes(substing);