​<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

Power of 4

Напишите функцию, который возвращает true, если заданный параметр является степенью 4, и false, если не является. Если параметр не является целым числом (например, строкой, массивом), метод также должен возвращать false.

Пример:
powerOf4(16) = return true; "4^4 = 16"

👉 @frontendInterview

Ищем новичков во фронтенд-разработке и вёрстке сайтов.

Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.

А именно:

- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.

Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.

Такой опыт можно получить на бесплатном практикуме 16-22 февраля с поддержкой от опытных кураторов на каждом этапе.

👉 Приходи на бесплатное обучение и зови с собой друзей

Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.

Array.copyWithin()

Метод copyWithin() копирует последовательную часть элементов массива из одного места в другое. Длина массива при этом не меняется. Метод использует поверхностное копирование (shallow copy) элементов.

Пример
Скопируем два последних элемента в начало массива:
const workDays = ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ']
console.log(workDays.copyWithin(0, 3))
// ['ЧТ', 'ПТ', 'СР', 'ЧТ', 'ПТ']

Скопируем два первых элемента в конец массива:
const workDays = ['ПН', 'ВТ', 'СР', 'ЧТ', 'ПТ']
console.log(workDays.copyWithin(-2, 0))
// ['ПН', 'ВТ', 'СР', ПН', 'ВТ']

👉 @frontendInterview