👉 @frontendInterview

Как TypeScript и статическая типизация помогают писать код?

В JavaScript слабая динамическая типизация. Это означает две вещи:
1. Любая переменная может произвольно менять свой тип во время выполнения программы.
2. При операциях с переменными разных типов они будут автоматически приведены к одному типу.

Эти свойства языка часто мешают создавать большие надёжные приложения. Поэтому появились решения, которые расширяют язык, добавляя в него строгую статическую типизацию. «Строгая» означает запрет автоматического приведения типов, «статическая» значит, что переменные не меняют свой тип. Самое популярное решение в этой области — TypeScript. Другие, менее популярные — Flow, Hegel.

👉 @frontendInterview

Поток документа

Поток — одно из важнейших базовых понятий в вёрстке. Это принцип организации элементов на странице при отсутствии стилей: если мы напишем HTML и не напишем CSS, то отображение в браузере будет предсказуемо благодаря тому, что мы абсолютно точно знаем, как браузер располагает элементы в потоке.

Даже если к странице не подключено никаких стилей, к каждому элементу всё равно будут применяться CSS-правила, «зашитые» в движке браузера. Благодаря этим правилам заголовок <h1> крупнее заголовка <h2>, а ссылки — синие и подчёркнутые. На основании этих правил условно все элементы на странице можно разделить на две категории: блочные (block) и строчные (inline). Например, <div> будет блочным, а <span> или <a> — строчным. Поменять стандартное поведение можно при помощи CSS-свойства display.

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

👉 @frontendInterview

👉 @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