Frontend Interview - собеседования по Javanoscript / Html / Css – Telegram
Frontend Interview - собеседования по Javanoscript / Html / Css
11.4K subscribers
2.1K photos
118 videos
319 files
530 links
Канал для подготовки к собеседованиям по фронтенду

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/frontendinterview

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Что такое Promise? Для чего он нужен?

Promise – это специальный объект, который содержит своё состояние. Вначале pending («ожидание»), затем – одно из: fulfilled («выполнено успешно») или rejected («выполнено с ошибкой»).

Синтаксис создания Promise:
 let promise = new Promise(function(resolve, reject) {
// функция-исполнитель (executor)
// "певец"
});
Функция, переданная в конструкцию new Promise, называется исполнитель (executor). Когда Promise создаётся, она запускается автоматически. Она должна содержать «создающий» код, который когда-нибудь создаст результат. В терминах нашей аналогии: исполнитель – это «певец».

Её аргументы resolve и reject – это колбэки, которые предоставляет сам JavaScript. Наш код – только внутри исполнителя.

Когда он получает результат, сейчас или позже – не важно, он должен вызвать один из этих колбэков:

resolve(value) — если работа завершилась успешно, с результатом value.
reject(error) — если произошла ошибка, error – объект ошибки.
Что значит фраза: "экран с высокой плотностью пикселей"?

CSS-пиксели (CSS pixels) — абстрактная величина, используемая браузерами для точного отображения контента на страницах, вне зависимости от экрана (DIPs: device-independent pixels).
Пример:
 <div height="200" width="300"></div>

Такой блок на обычных экранах будет занимать область 200x300 пикселей, а на Retina-экранах тот же блок получит 400x600 пикселей. Таким образом, на Retina-экранах плотность пикселей в 4 раза больше, чем на обычных.

👉 @frontendInterview
Возможно ли передать ref из компонента одному из его дочерних компонентов в React?
Anonymous Quiz
85%
да
15%
нет
Принципы юнит тестирования.

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

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

👉 @frontendInterview
Short Long Short

Вам даны две строки - короткая и длинная. Создайте функцию, которая преобразует их в одну строку, которая будет состоять из короткой строки + длинной строки + короткой строки.

Примеры:
("1", "22") --> "1221"
("22", "1") --> "1221"


👉 @frontendInterview
Что такое индекс в Git?

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

Понятие индекса в Git появилось не случайно. Даже когда разработчик работает над одной задачей, по пути он натыкается на разные места в коде, которые либо плохо оформлены, либо содержат ошибки, либо должны быть исправлены в соответствии с какими-то новыми требованиями. И в большинстве ситуаций совершенно нормально исправлять эти недочеты, что все и делают. В итоге в рабочей директории появляется множество разных исправлений, которые частично относятся к выполняемой задаче, а частично содержат множественные исправления, напрямую не связанные с основными изменениями. В чём здесь проблема?

Если делать ровно один коммит, включающий в себя и основную задачу и дополнительные исправления, то появляется несколько неприятных побочных эффектов. Во-первых, сложнее смотреть историю. Коммит начинает содержать совершенно несвязанные изменения, которые отвлекают во время ревью (проверки чужого кода).
 # Обычно в таких коммитах встречается условие И в описании
# Показатель того, что в рамках одного коммита сделано несколько изменений
$ git commit -m 'add new feature and fix something'

Во-вторых, что вероятно даже важнее, откат коммита по любым причинам приведет к тому, что откатятся правки, которые всё равно нужно будет делать.

Именно здесь помогает индекс. Его наличие позволяет меньше переживать на тему того, как сформируется коммит.

Стандартный способ работы с индексом — это добавление или изменение файлов и последующий коммит:
$ git add somefile
$ git commit -m 'add somefile'


👉 @frontendInterview
С помощью какой команды можно просмотреть подключения к внешним репозиториям?
Anonymous Quiz
9%
git branch
52%
git remote
22%
git host
17%
git get-remote
Что такое const assertion в TypeScript?

В TypeScript 3.4, кроме прочих новшеств, появилось и понятие const assertion (константное утверждение), предусматривающее использование конструкции as const. Это — упрощённый метод объявления констант, содержащих иммутабельные объекты и массивы.

Такие объявления строятся с помощью добавления as const в конец объявления константы. У этого метода есть и дополнительное преимущество, которое заключается в том, что при его использовании не нужно явным образом указывать тип в утверждении as const.

const person = {
name: 'Will'
} as const;

person.name = 'Diana'; // ошибка!

// С массивами тоже можно использовать as const
const array = [1, 2, 3] as const;
array.push(4); // ошибка!


👉 @frontendInterview
Какое значение свойства color у элемента div?
Anonymous Quiz
53%
red
15%
blue
23%
green
9%
black
Что такое SyntheticEvent в React?

Ваши обработчики событий получают экземпляр SyntheticEvent, это кроссбраузерная обёртка над нативным экземпляром события. У неё такой же интерфейс, как и у нативного события, включая методы stopPropagation() и preventDefault(). Эта обёртка помогает событиям работать одинаково во всех браузерах.

Если вам всё-таки нужно получить нативное браузерное событие, обратитесь к атрибуту nativeEvent. Синтетические события отличаются от нативных событий браузера и непосредственно не связаны с ними. Например, в синтетическом событии onMouseLeave атрибут event.nativeEvent будет указывать на mouseout. Эта деталь реализации не является частью публичного API, поэтому может измениться со временем.

👉 @frontendInterview
Оптимизация производительности

Всем известно (ну, или почти всем) что вся динамика сайта построена на JS. Эта динамика имеет минус – замедление загрузки страницы, важной для маленького отклика ресурса. Книга расскажет о приёмах и секретах, применяемых для устранения слабых мест, несущих просадку производительности. Вы освоите ускорение выполнения загрузки, методы манипулирования с DOM, правильную работу со страницей и массу другой полезной информации.

👉 @frontendInterview
USD => CNY

Создайте функцию, которая будет конвертировать доллары в юань по курсу 1 к 6.75. Результат должен быть строкой, представляющей цифру с двумя знаками после точки.

Примеры:
usdcny(15) => '101.25 Chinese Yuan'
usdcny(465) => '3138.75 Chinese Yuan'


👉 @frontendInterview
Как найти баланс между количеством тестов и покрытием кода? Какие проблемы могут быть из-за излишнего количества юнит-тестов?

Со 100% покрытием вы напишите некоторые тесты, которые вам не нужны. К сожалению, единственный надежный способ определить, какие тесты вам не нужны, - написать все, а затем подождать 10 лет или около того, чтобы узнать, какие из них никогда не заканчивались.

Поддержание большого количества тестов обычно не проблематично. Многие команды имеют автоматизированную интеграцию и системные тесты в дополнение к 100% охвату модульных тестов.

Тем не менее, вы не находитесь в фазе тестирования, вы играете в догонялки. Гораздо лучше иметь 100% ваших занятий с 50% тестовым покрытием, чем 50% ваших классов с 100% тестовым покрытием, и ваш руководитель, похоже, пытается заставить вас распределить свое время соответствующим образом. После того, как у вас есть этот базовый уровень, следующим шагом обычно является увеличение на 100% в файлах, которые изменяются в дальнейшем.