👉 @frontendInterview

Сборка мусора в JS

Управление памятью в JavaScript выполняется автоматически и незаметно. Мы создаём примитивы, объекты, функции… Всё это занимает память.

Основной концепцией управления памятью в JavaScript является принцип достижимости.
Если упростить, то «достижимые» значения – это те, которые доступны или используются. Они гарантированно находятся в памяти.
Любое другое значение считается достижимым, если оно доступно из корня по ссылке или по цепочке ссылок.

В интерпретаторе JavaScript есть фоновый процесс, который называется сборщик мусора. Он следит за всеми объектами и удаляет те, которые стали недостижимы.

Простой пример

 // в user находится ссылка на объект
 let user = {
   name: "John"
 };

Глобальная переменная user ссылается на объект {name: "John"}
Если перезаписать значение user, то ссылка потеряется:
user = null;
Теперь объект John становится недостижимым. К нему нет доступа, на него нет ссылок. Сборщик мусора удалит эти данные и освободит память.

Pro MERN Stack: Full Stack Web App Development with Mongo, Express, React, and Node (2017)

Соберите полный стек, необходимый для создания современного веб-приложения, используя React: MongoDB (база данных NoSQL) и Express (фреймворк для серверов веб-приложений), который работает на Node (JavaScript на стороне сервера), очень хорошо дополняют React. В этой книге также будут рассмотрены многие другие инструменты, необходимые для создания полноценного веб-приложения: React Router, React-Bootstrap, Redux, Babel и webpack.

👉 @frontendInterview

Найти пропавшую букву

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

Примеры:
["a","b","c","d","f"] -> "e"
["O","Q","R","S"] -> "P"

👉 @frontendInterview

Как работать с датами и временем в JavaScript?

В JS есть встроенный объект: Date. Он содержит дату и время, а также предоставляет методы управления ими.

Например, его можно использовать для хранения времени создания/изменения, для измерения времени или просто для вывода текущей даты.

Для создания нового объекта Date нужно вызвать конструктор new Date()
Без аргументов – создать объект Date с текущими датой и временем:
let now = new Date();
alert( now ); // показывает текущие дату и время

Существуют методы получения года, месяца и т.д. из объекта Date:

 getFullYear()

Получить год (4 цифры)

 getMonth()

Получить месяц, от 0 до 11.

 getDate()

Получить день месяца, от 1 до 31, что несколько противоречит названию метода.

 getHours(), getMinutes(), getSeconds(), getMilliseconds()

Получить, соответственно, часы, минуты, секунды или миллисекунды.

Больше про объект Date можно узнать в статье.

👉 @frontendInterview

👉 @frontendInterview

​Почему не стоит использовать краткую запись свойств CSS?

Существует небольшая, но на удивление важная проблема, которую я часто замечал в коде других людей — это использование краткой записи свойств CSS.

Когда мы пишем что-то вроде этого:

 .btn {
   background: red;
 }

Мы всего лишь хотим, чтобы у нашей кнопки был красный фоновый цвет. Но на самом деле мы задаем целый набор правил:
CSS
.btn {
background-image: initial;
background-position-x: initial;
background-position-y: initial;
background-size: initial;
background-repeat-x: initial;
background-repeat-y: initial;
background-attachment: initial;
background-origin: initial;
background-clip: initial;
background-color: red;
}

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

Почти все проблемы, баги и регрессии в CSS происходят из-за того, что мы делаем слишком многое слишком рано, а через некоторое время сталкиваемся с последствиями этого. Из этого факта следует один простой вывод: в CSS вам нужно делать лишь то, что нужно и ничего более.

👉 @frontendInterview

👉 @frontendInterview

​Почему стоит использовать семантические теги в верстке?

Семантическая вёрстка — подход к разметке, который опирается не на внешний вид сайта, а на смысловое предназначение каждого блока и логическую структуру документа.

Почему семантика важна?

Чтобы сделать сайт доступным. Для незрячих людей основной инструмент для просмотра сайтов не браузер, который отрисовывает страницу, а скринридер, который читает текст со страницы вслух.
Этот инструмент «зачитывает» содержимое страницы, и семантическая структура помогает ему лучше определять, какой сейчас блок, а пользователю понимать, о чём идёт речь.

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

Семантика прописана в стандартах. Многие разработчики по старинке пользуются конструкциями типа <div id="nav"> для обозначения навигации или других структурных элементов страницы. Тем временем в стандарте HTML есть несколько семантических тегов, которые рекомендуется использовать для разметки страниц вместо <div> и <span>. В спецификации для каждого семантического элемента описана его роль.

👉 @frontendInterview

jаvanoscript для начинающих, 6-е издание

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

👉 @frontendInterview

Smart Sum

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

Примеры:
smartSum(1,2,3,[4,5],6); // returns 21
smartSum(1,2,[[3,4],5],6); // returns 21

👉 @frontendInterview

Что такое кортеж в TypeScript?

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

// определение кортежа - кортеж состоит из двух элементов - строки и числа
let userInfo: [string, number];

// инициализация кортежа

 userInfo = ["Tom", 28];

// Неправильная инициализация - переданные значения не соответствуют типам по позиции

 userInfo = [28, "Tom"]; // Ошибка

// использование кортежа
console.log(userInfo[1]); // 28
userInfo[1] = 37;

👉 @frontendInterview

👉 @frontendInterview

Что такое GraphQL?

Это язык запросов и интерфейс для получения данных, который был разработан Facebook в 2012 году. Он предлагает универсальный способ запрашивать и получать данные из различных источников, таких как REST API или базы данных.

Он отличается от REST тем, что в ответ на запрос можно получить только необходимые данные, а не всю сущность. Например, если вам нужны только имя и возраст пользователя, вы можете отправить запрос с этими полями, а не получить всю сущность пользователя.
Пример запроса, который запрашивает имя и возраст пользователя с ID 1:

 query {
   user(id: 1) {
     name
     age
   }
 }

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

👉 @frontendInterview