👉 @frontendInterview

Многопоточный jаvanoscript

Прочитав данную книгу, jаvanoscript-разработчик среднего уровня узнает о сильных и слабых сторонах API веб-исполнителей в браузерах и рабочих потоков в Node.js.
Авторы рассказывают о двух подходах к построению многопоточных приложений: на основе передачи сообщений и на основе разделяемой памяти. Описываются API для обоих случаев, объясняется, когда использовать тот или другой, а когда – их сочетание. Вы также увидите, как реализуются высокоуровневые паттерны на базе этих подходов.

👉 @frontendInterview

Custom sort function

Создайте свою функцию sort, которая будет сортировать цифры в порядке возрастания.

Пример:
sort([1,3,2]) // should return [1,2,3]

👉 @frontendInterview

:placeholder-shown

Псевдокласс :placeholder-shown выбирает на странице все <input> или <textarea>, у которых показывается подсказка (плейсхолдер).

Пример:
<input placeholder="Введите ваше имя">

input {
border: 1px solid black;
}

input:placeholder-shown {
border-color: teal;
}

Псевдокласс :placeholder-shown — это не то же самое, что псевдоэлемент ::placeholder. Псевдокласс применит стили к самому полю ввода. А стили, применённые к псевдоэлементу ::placeholder, изменят внешний вид текста-подсказки, но никак не затронут само поле ввода.

👉 @frontendInterview

👉 @frontendInterview

​Поверхностное и глубокое копирование

При копировании объектов или массивов JavaScript копирует данные только на один уровень вглубь. Этот тип копирования называется поверхностным (shallow).
Если необходимо полностью скопировать сложную структуру данных, например, массив с объектами, то нужно делать глубокое (deep) или полное копирование данных.

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

Можно написать функцию глубокого копирования вручную. Скорее всего ваша функция будет рекурсивной, и она будет работать только для конкретных данных — написать универсальную функцию не так-то просто.

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

import cloneDeep from 'lodash.clonedeep'

const deep = cloneDeep(itemsInCart)
console.log(itemsInCart[1] === deep[1])
// false

👉 @frontendInterview

👉 @frontendInterview

Событие beforeunload

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

Есть страницы, на которых выполняется некоторая работа. Если эта работа не сохраняется, например, в localStorage, стоит защитить пользователя от фрустрации при возможной потере. В этом нам поможет обработка события beforeunload.

Обработка с помощью addEventListener:
window.addEventListener('beforeunload', function (event) {
// Отменяем поведение по умолчанию
event.preventDefault();

// Chrome требует наличия returnValue
event.returnValue = '';
})

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

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

TypeScript быстро

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

👉 @frontendInterview

String insert values

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

Примеры:
var s = 'Hello {foo} - make me a {bar}';
var o = {
foo : 'Jack',
bar : 'sandwich'
};

format(s, o); // "Hello Jack - make me a sandwich"

var s = 'Hello {0} - make me a {1}';
var a = ['Jack', 'sandwich'];

format(s, a); // "Hello Jack - make me a sandwich"

👉 @frontendInterview

​Что такое гриды?

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

Основные термины:
- Грид-контейнер: родительский элемент, к которому применяется свойство display: grid.

- Грид-элемент: дочерний элемент, прямой потомок грид-контейнера. Подчиняется правилам раскладки гридов.

- Грид-линия: разделительная линия, формирующая структуру грида. Может быть как вертикальной (грид-линия колонки), так и горизонтальной (грид-линия ряда). Располагается по обе стороны от колонки или ряда.

- Грид-ячейка: пространство между соседними грид-линиями. Единица грид-сетки.

- Грид-полоса: пространство между двумя соседними грид-линиями. Может быть проще думать о грид-полосе как о ряде или колонке.

- Грид-область: область, ограниченная четырьмя грид-линиями. Может состоять из любого количества ячеек как по горизонтали, так и по вертикали.

👉 @frontendInterview

👉 @frontendInterview