Sum of two lowest positive integers

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

Например, когда массив передается как [19, 5, 42, 2, 77] вывод должен быть 7.

👉 @frontendInterview

​Что такое Test Double и Fake? В чём отличие от Mock и Stub?

Test Double
Это обобщенное обозначение для всех видов замен (заглушек) настоящих объектов в тестах. Он включает в себя такие термины, как Dummy, Fake, Stub, Mock и другие, которые представляют собой замены для реальных объектов во время тестирования.

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

Отличие между Mock и Stub:
- Stub - это тип "заглушки", который предоставляет заранее определенные ответы на вызовы методов или функций.
- Mock - это тип "заглушки", который также предоставляет заранее определенные ответы, но также содержит утверждения (assertions), которые проверяют, были ли вызваны определенные методы или функции и сколько раз они были вызваны.

Итак, в чем их отличие:
- Fake представляет собой упрощенную реализацию с реальным поведением.
- Stub предоставляет заранее определенные ответы на вызовы методов или функций.
- Mock также предоставляет заранее определенные ответы, но содержит также утверждения о вызовах методов или функций.

👉 @frontendInterview

👉 @frontendInterview

​Что такое серверный/клиентский/изоморфный рендеринг? Каковы их отличия?

Серверный рендеринг:
Серверный рендеринг означает, что HTML страница сначала генерируется на сервере, а затем отправляется на клиент. Клиент получает готовый HTML и начинает отображение страницы. Такой подход применяется в традиционных веб-приложениях.

Клиентский рендеринг:
В клиентском рендеринге HTML, CSS и JavaScript отправляются клиенту, и отображение содержимого происходит непосредственно на стороне клиента при помощи JavaScript. Один из примеров такого подхода - использование фреймворков, таких как React или Vue, где основная часть отображения происходит на стороне клиента.

Изоморфный (или универсальный) рендеринг:
Изоморфный рендеринг сочетает в себе серверный и клиентский рендеринг. При этом страница рендерится как на сервере, так и на клиенте, и последующие запросы на сервер могут обрабатываться клиентским кодом. Такой подход обеспечивает инициализацию страницы на сервере, что положительно сказывается на SEO и начальной загрузке страницы. После загрузки страницы JavaScript-код берет на себя управление и обеспечивает интерактивность.

Отличия:
1. Время инициализации: Серверный рендеринг и изоморфный рендеринг предоставляют начальное содержимое на сервере, в то время как клиентский рендеринг инициализируется на стороне клиента.
2. SEO: Серверный рендеринг и изоморфный рендеринг являются лучшими вариантами для SEO, так как поисковые системы могут проиндексировать контент на этапе загрузки страницы.
3. Производительность: Клиентский рендеринг может обеспечить лучшую интерактивность, но серверный и изоморфный рендеринг обычно демонстрируют более быструю первоначальную загрузку страницы.

👉 @frontendInterview

👉 @frontendInterview

​Как сделать изоморфное приложение?

Что такое изоморфное приложение?
Изоморфное веб-приложение (также известное как универсальное) представляет собой приложение, которое выполняется как на сервере, так и на клиенте, обеспечивая возможность генерировать контент на сервере и динамически обновлять его на клиенте. Это позволяет улучшить производительность на этапе загрузки страницы, а также иметь преимущества для SEO.

Преобразование обычного приложения в изоморфное:
1. Выбор фреймворка/библиотеки: Выберите фреймворк или библиотеку, которая поддерживает изоморфный рендеринг, такие как Next.js. или Nuxt.js. Эти инструменты предоставляют средства для создания изоморфных приложений.

2. Разделяемый код: Один из ключевых аспектов изоморфного приложения - это возможность использования одного и того же кода как на серверной стороне (Node.js), так и на клиентской стороне. Это позволяет переиспользовать код и логику между сервером и клиентом.

3. Серверный рендеринг: Создайте серверную часть приложения, которая будет отвечать за генерацию HTML контента на сервере. Это обычно делается с помощью специальных методов рендеринга.

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

👉 @frontendInterview

Svelte и Sapper в действии

Многие веб-фреймворки замедляют работу приложений, загружая сотни строк кода «на всякий случай». Svelte позволяет компилировать приложения в эффективные крошечные пакеты с минимальным временем загрузки. Объединение Svelte с фреймворком Sapper облегчает маршрутизацию страниц, генерирование на стороне сервера, разработку статических сайтов и решение многих других задач.

Хотите научиться создавать быстрые и элегантные веб-приложения?

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

👉 @frontendInterview

Incrementer

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

Пример:
[1, 2, 4] --> [2, 4, 7]
#[1+1, 2+2, 4+3]

[4, 6, 9, 1, 3] --> [5, 8, 2, 5, 8]
# [4+1, 6+2, 9+3, 1+4, 3+5]
# 9+3 = 12 --> 2

👉 @frontendInterview

​<dialog>

Тег создаёт всплывающее окно или диалог. По умолчанию не показывается на странице.

Может открываться в двух режимах:
1. Всплывающее окно — не блокирует взаимодействие со страницей.
2. Модальное окно — откроется поверх страницы, имеет фоновое затемнение, остальной контент не доступен для взаимодействия.

Как и у элемента <details>, по умолчанию содержимое окна скрыто от пользователя, но его можно отобразить через атрибут open.
<dialog open>
Я виден. Привет! 👋
</dialog>

<dialog>
Я скрыт от пользователя 🥷
</dialog>

Также окно можно открыть с помощью JavaScript-методов:
1. show() — добавляет атрибуты open и aria-modal="false".
2. showModal() — открывает в режиме «модального окна». Добавляет атрибуты open и aria-modal="true". Появляется подложка в виде псевдоэлемента ::backdrop, который можно стилизовать.
<button type="button" onclick="window.myDialog.show()">
Просто открыть
</button>
<button type="button" onclick="window.myDialog.showModal()">
Открыть как модалку
</button>
<dialog id="myDialog">🖖 Живи долго и процветай!</dialog>

👉 @frontendInterview

👉 @frontendInterview

​Что означает ошибка TypeError: JSON.stringify cannot serialize cyclic structures?

Ситуация: мы готовим данные для отправки на сервер из браузера. Чтобы было проще, используем JSON (JavaScript Object Notation). Можно перевести как «способ записи объектов в JavaScript». Формат оказался настолько удобен, что его стали поддерживать практически все популярные языки программирования.

На старте мы знаем, что данные будут иметь двумерную вложенность. Для этого мы создаём пустой объект, а потом на основе него создаём пару «ключ: значение», чтобы было это удобно было потом перевести в JSON:

 var a = { };
 var b = { a: a };

После этого мы создаём первый элемент нашей структуры и пробуем отправить данные на сервер, предварительно переведя их в JSON-формат:Как отправить JSON-данные на сервер

 a.b = b;
 JSON.stringify(a);

Но когда мы пробуем выполнить этот код в браузере, то получаем ошибку:
❌ TypeError: JSON.stringify cannot serialize cyclic structures.

Что это значит: JavaScript не может перевести в JSON-формат вложенные цикличные структуры данных.
Когда встречается: когда мы собираем объект из разных частей, каждая из которых ссылается на другую — использует её в качестве параметра или значения.

Чтобы избавиться от ошибки TypeError: JSON.stringify cannot serialize cyclic structures, достаточно убрать вложенную структуру, когда объекты циклично ссылаются друг на друга. В нашем случае объект a содержит объект b, который, в свою очередь, состоит из объектов a.
Лучше всего сделать так: заведём новую переменную, которую и будем потом переводить в JSON-формат:
var a = { };
var b = { a: a };
var c = {};
c[1] = b;
JSON.stringify(c);

👉 @frontendInterview

👉 @frontendInterview