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

Reversed Strings

Создайте функцию, которая развернет строку (выведет символы в обратном порядке).

Примеры:
'world' => 'dlrow'
'word' => 'drow'

👉 @frontendInterview

Как сгенерировать случайное число с помощью JS?

Для этого можно использовать функцию Math.random(). Это одна из самых часто используемых функции объекта Math. Возвращает случайное число в диапазоне от 0 до 1, не включая 1.

На самом деле, функция не генерирует случайное число. Это лишь иллюзия. За генерацию подобных чисел отвечают специальные алгоритмы, которые относятся к категории PRNG — pseudorandom number generator, их также называют генераторами псевдослучайных чисел.
Любой PRNG-алгоритм генерирует числа, которые, в конечном счёте, будут повторяться. Поэтому числа, генерируемые Math.random(), можно предугадать.

Если ваша задача не подразумевает работу с криптографией (например, вычисление кодов аутентичности) — вам будет достаточно псевдослучайных чисел. Но если такая потребность всё же есть — используйте crypto.getRandomValues() вместо Math.random().

👉 @frontendInterview

📱IT Network - первая в России соцсеть для айтишников

Тысячи молодых айтишников уже нашли здесь наставника, работу и просто коллег по цеху для обучения программированию и решению повседневных задач. IT Network помогает находить известных экспертов, работу и быть в курсе всех новостей из мира IT и науки. Не упустите свой шанс стать одним из них!

В приложении вы сможете:
● Обмениваться опытом с коллегами
● Получать интересные предложения о работе
● Расширять круг знакомств в сфере IT
● Следить за новостями из мира IT и науки

Для тех, кто решил расти в кругу успешных айтишников, вот ссылка на приложение в App Store и Google Play.

​Расскажите про координаты в браузере.

Чтобы перемещать и позиционировать элементы на экране в браузере имеется система координат. Оси координат начинаются в левом верхнем углу экрана и идут вправо для оси x и вниз для оси y.

Позиционирование с помощью координат может быть относительно окна браузера или относительно отдельного элемента. Всего существует две системы координат: одна начинается от угла HTML-страницы (документа), а вторая от угла окна браузера. С помощью первой можно определять как элемент расположен относительно всей страницы, а с помощью второй – как элемент расположен относительно окна браузера и того что там находится. Объекты события мыши и тач-события содержат координаты места на экране и в документе, где событие произошло: pageX/pageY – для документа, clientX/clientY – для экрана.

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

👉 @frontendInterview