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

Как скрыть содержимое страницы от скринридеров и других вспомогательных технологий?

Можно использовать атрибут aria-hidden со значением true, чтобы скрыть содержимое от программ чтения с экрана, но оставить его видимым на странице.

 <p aria-hidden="true">Этот текст виден на странице, но скрыт от скринридера.</p>

Свойство aria-hidden скрывает элемент от скринридеров и других вспомогательных технологий, но не скрывает его визуально. Если используете этот ARIA-атрибут на неинтерактивном элементе с вложенным интерактивным, то вложенный элемент унаследует этот атрибут. Это тоже приведёт к проблемам с доступностью для вспомогательных устройств.

👉 @frontendInterview

👉 @frontendInterview

aria-roledenoscription

Глобальное свойство из WAI-ARIA для описания ролей элементов своими словами.
Атрибут влияет только на то, как скринридер прочитает роль. Он не изменяет функциональность элемента.

Пример

 <section
   aria-roledenoscription="Слайд"
   aria-labelledby="heading"
 >
   <h2 id="heading">Новый роман Франца К.</h2>
   <!-- Остальное содержимое слайда -->
 </section>

Скринридер прочитает эту разметку примерно так: «Новый роман Франца К., слайд».

👉 @frontendInterview