Как убрать фокус с DOM-элемента?

Вызов метода blur на DOM-элементе снимает фокус с элемента. Порождает событие blur, которое можно обработать с помощью addEventListener.

Метод blur не принимает аргументов:
const input = document.getElementById('myInput')
input.blur()

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

👉 @frontendInterview

👉 @frontendInterview

Как программно прокрутить окно до определённого элемента вне зависимости от положения элемента в окне?

Для этого можно использовать метод scrollIntoView.

 element = document.querySelector("#about") // в element должен быть любой DOM-элемент на странице
element.scrollIntoView()

У scrollIntoView может быть аргумент типа boolean:
- Если указать true, то скролл будет перемещён чтобы верхняя граница элемента совпала с верхней границей окна.
- Если указать false, то скролл остановится так, чтобы нижняя граница элемента была вровень с нижней границей окна.

Использовать scrollIntoView наиболее полезно в случаях длинных веб-страниц, где нужен скролл к определённым частям, а использования ссылок с якорями (например, <a href="#about">О нас</a>) недостаточно.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers (2019)

Visual Studio Code, бесплатный кросс-совместимый редактор исходного кода с открытым исходным кодом, является одним из самых популярных вариантов для веб-разработчиков. Он быстрый, легкий, настраиваемый и содержит встроенную поддержку расширений JavaScript, Typenoscript и Node.js для других языков, включая C++, Python и PHP. Такие функции, как возможность отладки, встроенный элемент управления Git, выделение синтаксиса, сниппеты кода и поддержка интеллектуального автозавершения кода IntelliSense помогают сделать Visual Studio Code впечатляющим готовым решением. Данная книга поможет вам освоиться и стать наиболее продуктивным в работе с VS Code.

👉 @frontendInterview

Сумма массивов

Вам даны два массива чисел. Необходимо просуммировать все числа этих двух массивов.

Примеры:
arrayPlusArray([1, 2, 3], [4, 5, 6]) => 21
arrayPlusArray([-1, -2, -3], [-4, -5, -6]) => -21
arrayPlusArray([0, 0, 0], [4, 5, 6]) => 15
arrayPlusArray([100, 200, 300], [400, 500, 600]) => 2100

👉 @frontendInterview

Как можно скрыть элемент разметки не используя CSS и JS?

Железобетонный способ скрыть элемент в тех случаях, когда не подходят opacity или visibility. В отличие от двух других способов этот применяется прямо в HTML-разметке. Не лучшая практика: влиять на внешний вид страницы через разметку, но иногда именно это и нужно. По сути, это display: none — именно так он описан в браузерных стилях.

<p hidden>
Этот текст будет невиден на странице. Хотя элемент в разметке будет!
</p>

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

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

👉 @frontendInterview

👉 @frontendInterview

Как семантически верно сверстать навигационное меню сайта?

Вот так выглядит простой блок <nav> со ссылками на разные разделы сайта. Мы использовали его с тегом <ul>, поскольку элементы меню однотипные по смыслу и связаны между собой:
<nav class="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О нас</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</nav>

В контейнер <nav> помещаются основные ссылки, по которым пользователь сможет быстро перейти на нужный раздел сайта.

<nav> — это один из ориентиров (landmark), которые скринридеры могут использовать для навигации по странице. То есть можно перейти прямо в блок навигации по сайту, это очень удобно.

👉 @frontendInterview

👉 @frontendInterview

Что такое History API в браузере?

History API даёт доступ к управлению историей браузера в рамках текущей сессии. Браузер создаёт новую сессию, когда пользователь открывает новую вкладку или новое окно браузера.

С помощью History API можно переходить по истории вперёд, назад и управлять содержимым истории. Доступ к API осуществляется с помощью объекта window.history.

Основные методы:
- back перемещает пользователя по истории на страницу назад
- forward перемещает пользователя по истории на страницу вперёд
- go универсальный метод для перемещения по истории вперёд или назад
- pushState добавляет новую запись в истории сессии
- replaceState изменяет текущую запись в истории сессии

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Micro Frontends in Action (2020)

Программное обеспечение на фронтенде может быстро стать сложным и трудным в обслуживании, особенно когда оно реализовано в виде большого одностраничного приложения. Приняв подход с использованием микро-интерфейсов и создавая свои веб-приложения как системы функций, вы можете ускорить разработку фич, упростить обновление и выбрать технологию, которую вы используете в своем стеке. Micro Frontends in Action - это ваш путеводитель по упрощению громоздких интерфейсов.

👉 @frontendInterview