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

Что такое 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

👉 @frontendInterview

Что такое SyntheticEvent в React?

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

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

👉 @frontendInterview

👉 @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% в файлах, которые изменяются в дальнейшем.

👉 @frontendInterview

​Для чего нужны лоадеры и плагины в Webpack? В чем отличие между ними?

Основной задачей лоадеров, как следует из их названия, является предоставление вебпаку возможности работать не только с JS и JSON-файлами.

Лоадеры могут использоваться не только для импорта файлов, но и для их преобразования. Самым популярным является преобразование JavaScript следующего поколения в современный JavaScript с помощью Babel. Для этого используется babel-loader.

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

👉 @frontendInterview

👉 @frontendInterview

Удобно, когда все самые актуальные новости можно найти на одном ресурсе, не чекая миллионы пабликов, статей, каналов и подкастов.

И это реально — недавно наш коллега Саша завёл Telegram-канал «Быстрый Фронтенд», где собирает самые актуальные новости из мира фронтенд-разработки со ссылками на первоисточник.

Подписывайся на «Быстрый Фронтенд» — будь в курсе самых полезных новостей в кратком формате 📲

​Что такое REST API

Так называют сокращение английской аббревиатуры, которая переводится как передача состояния представления. Web-службы, которые пользуются этой системой, применяют термин RESTful. Единого стандарта у нее нет — не протокол, а целый архитектурный стиль. Этим она отличается от многих аналогичных. При этом допустимо использовать XML, HTTP, JSON и URL.

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

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

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

В качестве примера стоит привести кнопку Facebook, которая умеет задействовать соцсеть, или видео на Youtube, его тоже запускает веб-версия API.

👉 @frontendInterview

👉 @frontendInterview