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

👉 @frontendInterview

​Что такое линтеры?

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

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

Использование линтера может дать несколько преимуществ:
- Качество кода: Анализаторы кода помогают выявлять и предотвращать потенциальные ошибки, антипаттерны, что приводит к повышению качества кода.
- Согласованность: Линтеры применяют соглашения о кодировании и рекомендации по стилю, обеспечивая единообразное форматирование и структуру кода во всей кодовой базе, даже когда несколько разработчиков работают над одним и тем же проектом.
- Удобство сопровождения: Выявляя проблемы на ранней стадии и продвигая надлежащие методы кодирования, линтеры способствуют сопровождению кода, упрощая понимание, изменение и расширение кодовой базы.
- Эффективность: Линтер может сэкономить время разработчиков, автоматизируя процессы проверки кода и выявляя распространенные ошибки до того, как они могут вызвать проблемы во время разработки или в рабочей среде.

👉 @frontendInterview

Искусство чистого кода

Большинство разработчиков ПО тратят тысячи часов на создание излишне сложного кода. Девять основных принципов книги «Искусство чистого кода» научат вас писать понятный и удобный в сопровождении код без ущерба для функциональности. Главный принцип — это простота: сокращайте, упрощайте и перенаправляйте освободившуюся энергию на самые важные задачи, чтобы сэкономить бесчисленное количество часов и облегчить зачастую очень утомительную задачу поддержки кода. Автор бестселлеров Кристиан Майер помог тысячам людей усовершенствовать навыки программирования и в своей новой книге делится опытом с читателями.

👉 @frontendInterview