👉 @frontendInterview

​Какие есть ограничения у window.close()?

Порой веб-разработчики с удивлением обнаруживают, что команда windows.close() не всегда закрывает окно браузера.

Почему браузеры ограничивают команду?
Иногда такое поведение браузеров объясняют, ссылаясь на некие таинственные «соображения безопасности». Но основная причина ограничений, применяемых к close(), больше связана с тем, что называют «пользовательский опыт». А именно, если скрипты смогут свободно закрывать любые вкладки браузеров, пользователь может потерять важные данные, состояние веб-приложения, работающего во вкладке.

Как поступают браузеры?
В Internet Explorer вкладка или окно браузера закрывается без лишних вопросов в том случае, если для создания этой вкладки или этого окна была использована команда window.open().
Во всех других случаях вкладку (или окно) просто так не закрыть: пользователю показывают одно или два модальных окна, что зависит от того, представлена ли страница единственной вкладкой в окне браузера.

В Chromium 88 команда window.close() выполняется успешно в том случае, если у нового окна или у новой вкладки что-то записано в свойство opener, или в том случае, если стек навигации страницы содержит менее двух записей.
Когда браузер Chrome блокирует команду close(), он выводит в консоль следующее сообщение
Scripts may close only the windows that were opened by them.

Firefox вызывает функцию IsOnlyTopLevelDocumentInSHistory(), а она вызывает функцию IsEmptyOrHasEntriesForSingleTopLevelPage(), которая проверяет историю сессий. Если там больше одной записи, она уточняет, относятся ли они все к одному и тому же объекту Document. Если это так — вызов close() выполняется.

👉 @frontendInterview

JavaScript from Frontend to Backend: Learn full stack JavaScript development using the MEVN stack with quick and easy steps (2022)

Книга начинается с основ переменных и объектов в JavaScript, а затем быстро переходит к созданию компонентов на стороне клиента с помощью Vue.js и простого приложения для управления списками. После этого внимание переключается на серверную сторону и Node.js, где вы рассмотрите модель MVC и изучите модуль Express. После того как вы освоите серверную и клиентскую части, останется только база данных. Вы познакомитесь с MongoDB и модулем Mongoose. В последней главе этого быстрого руководства вы объедините все эти части, чтобы интегрировать приложение Vue.js в сервер Node.js, используя Express для структурирования серверного кода и MongoDB для хранения информации.

👉 @frontendInterview

Dodge The Birds

Герой игры может выполнить две команды. findBirds и jump.

findBirds() возвращает массив из птиц на экране
jump(height) - заставляет героя прыгнуть на определенную высоту.

Напишите функцию controller, которая будет избегать столкновения героя с птицами.

👉 @frontendInterview

window.location

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

Свойства объекта Location:
hash - часть URL, которая идет после символа '#', включая этот символ
host - адрес сайта и порт
href - весь URL страницы
hostname - адрес сайта
pathname - строка пути относительно корня
port - номер порта
protocol - протокол
search - get-параметры, включая символ "?"

Примеры использования

 //Проверить хеш страницы и выполнить код
 if(window.location.hash == '#someHash'){
     doSomething();
 }
 //Перейти по другому адресу
 window.location = "http://javanoscript.ru"
 //перезагрузить страницу
 window.location.reload()

👉 @frontendInterview

👉 @frontendInterview

​URLSearchParams

URLSearchParams — это класс, предоставляющий удобное API для формирования строки поисковых параметров, которую потом можно использовать для формирования полного адреса. Все параметры в строке будут закодированы для безопасной вставки в адрес. Также этот класс можно встретить как часть класса URL.

Пример
Создаём экземпляр класса параметров поиска:
const params = new URLSearchParams({ count: '10' })

Далее мы можем добавлять или удалять параметры:
// добавление
params.append('size', 'lg')
console.log(params.toString())
// 'count=10&size=lg'

// удаление
params.delete('count')
console.log(params.toString())
// 'size=lg'

Повторное добавление параметра с тем же именем добавит ещё одно значение с таким же именем, а получение всех возможных значений вернёт все добавленные значения:
params.append('size', 'xl')
console.log(params.getAll('size'))
// ['lg', 'xl']

Получение параметров в виде строки:
const paramsString = params.toString()
console.log(paramsString)
// 'count=10&size=lg&size=xl'

const url = `/catalog/?${paramsSting}`
console.log(url)
// '/catalog/?count=10&size=lg&size=xl'

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Какие есть способы задания цвета в CSS?

Базовые цвета

 color: aqua

RGB
Самое распространенный вариант, каждое число представляет собой количество красного(Red), зеленого(Green) и голубого(Blue) цвета в смеси.

 #f00 - #rgb
 #ff0000 - #rrggbb
 rgb(255, 0, 0)
 rgb(100%, 0%, 0%)

RGBA
То же самое представление цвета, но с добавлением альфа-канала, который отвечает за прозрачность.

 белый с прозрачностью 50%
 rgba(255, 255, 255, 0.5)
 rgba(100%, 100%, 100%, 0.5)
 #fff8 - #rgba
 #ffffff88 - #rrggbbaa

HSL
Способ указания цвета в зависимости от его тона(Hue) насыщенности (Saturation) и яркости (Lightness ).

 hsl(120, 100%, 25%) - тёмно зеленый
 hsl(120, 100%, 75%) - светло зеленый

HSLA
То же самое, но с альфа-каналом.

 hsla(30, 100%, 50%, 0.1) - очень прозрачный оранжевый

transparent
ключевое слово обозначающее прозрачный цвет, эквивалент rgba(0, 0, 0, 0).

currentColor
ключевое слово обозначающее текущий цвет.

Array.diff

Ваша задача написать функцию, которая будет вычитать один массив из другого.
Она должна убирать все элементы массива b из массива a.

Примеры:
arrayDiff([1,2],[1]) == [2]
arrayDiff([1,2,2,2,3],[2]) == [1,3]

👉 @frontendInterview

Построение пользовательских интерфейсов

Интерфейс — лицо электронного продукта. Лицо успешных сайтов, приложений и программ вызывает у пользователей доверие и симпатию. Построение пользовательских интерфейсов — интересная и многогранная работа. Эта книга будет полезна всем, кто участвует в работе над созданием электронных продуктов. Вы начинающий дизайнер интерфейсов? Книга поможет углубить и расширить знания о профессии. Вы практикующий UI/UX-дизайнер? Из книги вы почерпнёте инструменты и методики, которые позволят увеличить эффективность вашей работы. Вы менеджер, глава студии или стартапа? Эта книга поможет вам наладить и систематизировать процессы в команде.

👉 @frontendInterview

presentation, none

presentation — роль структуры документа, которая удаляет семантику элемента. Другая роль none — это синоним presentation.

Обе роли делают одно и то же, но рекомендуется использовать presentation вместо none. У presentation более стабильная поддержка.

Пример
<h1>Говорящий мангуст Джеф</h1>
<hr role="presentation">
<p>Загадочное существо, обитавшее на ферме Дорлиш Кэшен неподалеку от селения Дэлби на острове Мэн. История о говорящем зверьке в середине 1930-х годов активно обсуждалась на страницах британской прессы.</p>

В этом примере тег <hr> потерял свою семантику и стал просто декоративным разделителем.

👉 @frontendInterview

👉 @frontendInterview