Frontend Interview - собеседования по Javanoscript / Html / Css – Telegram
Frontend Interview - собеседования по Javanoscript / Html / Css
11.4K subscribers
2.1K photos
118 videos
319 files
530 links
Канал для подготовки к собеседованиям по фронтенду

Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/frontendinterview

Канал в реестре РКН:
https://rknn.link/su
Download Telegram
Что такое скринридеры?

Сайтами и приложениями пользуются разные люди. Кто-то может это делать с любого устройства, а другим нужны вспомогательные технологии (assistive technology). Это такие программы и устройства, которые упрощают взаимодействие пользователей с особыми потребностями с контентом. К примеру, выносные кнопки, трекболы, брайлевские дисплеи, экранные лупы и скринридеры.

Скринридер (screen reader) — программа, которая превращает контент интерфейсов в речь или шрифт Брайля. Другие названия — программа экранного доступа или чтения, программа чтения с экрана и экранное считывающее устройство.

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

Слабовидящие пользователи могут сочетать скринридеры с другой вспомогательной технологией — экранной лупой (screen magnification). Она увеличивает контент на экране и тоже его озвучивает, если это нужно.
Эволюционная архитектура. Поддержка непрерывных изменений

Пора по-новому взглянуть на постулаты, остававшиеся неизменными на протяжении многих лет. Динамично меняющийся мир диктует свои правила, в том числе и в компьютерной архитектуре. Происходящие изменения требуют новых подходов, заставляют жесткие системы становиться гибкими и подстраиваться под новые условия. Возможно ли долгосрочное планирование, если всё непрерывно меняется? Как предотвратить постепенное ухудшение архитектурного решения с течением времени?
Здесь вы найдете ответы и рекомендации, которые позволят защитить самые важные характеристики проекта в условиях непрерывных изменений.

👉 @frontendInterview
Peak array index

Вам дан массив, состоящий из чисел. Напишите функцию, которая вернет индекс элемента, суммы чисел слева и справа от которого равны. Если такого элемента нет, то верните -1.

Примеры:
peak([1,2,3,5,3,2,1]) => 3
peak([1,12,3,3,6,3,1]) => 2
peak([10,20,30,40]) => -1


👉 @frontendInterview
Как сделать так, чтобы стандартные HTML элементы отображались одинаково во всех браузерах?

Некоторые элементы форм имеют уникальный внешний вид в каждой операционной системе. Например, выпадающий список в macOS внешне выглядит совсем не так, как такой же выпадающий список в Windows.

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

В настоящее время используется в основном appearance: none для сброса системных стилей, остальные значения не работают практически ни в одном браузере.

👉 @frontendInterview
Что выведется в консоль, если кликнуть на кнопку с id "btn"?
Anonymous Quiz
12%
10
62%
20
9%
undefined
16%
Ошибка
События scroll и wheel в браузере

scroll — это событие на HTML-элементе. Событие происходит, когда страница или элемент не входит на экран и пользователь её прокручивает. Способ прокрутки может быть любым — колесом мыши, кнопками клавиатуры, с помощью полосы прокрутки на экране.

Событие wheel происходит, когда пользователь прокручивает колесо мыши. При этом реального прокручивания может не происходить. Например, наша страница полностью помещается на экран, но пользователь пытается её прокрутить. В этом случае событие wheel будет происходить, а событие scroll — нет.

// обрабатываем скролл на всей странице
document.addEventListener('scroll', function(event) {
// реагируем на событие
console.log(event);
});

// отловим все случаи, когда пользователь крутит колесо мыши
// при наведенном на элемент курсоре
let div = document.getElementsByTagName('div')[0];
div.addEventListener('wheel', function(event) {
console.log(event);
});


👉 @frontendInterview
Что выведется в консоль?
Anonymous Quiz
58%
0
9%
1
12%
4
21%
5
Расскажите про HTML тег <meta>

В теге <meta> хранится краткое описание страницы, ключевые слова и другие данные, которые могут понадобиться браузерам и поисковым системам.

Таких метатегов может быть любое количество. Все они размещаются внутри тега <head>, желательно в самом начале.

Пример
<head>
<meta name="denoscription" content="Краткое описание страницы">
<meta
name="keywords"
content="ключевое слово 1, ключевое слово 2, ключевое слово 3"
>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>


👉 @frontendInterview
JavaScript. Обработка событий на примерах.

Книг по программированию на JavaScript написано много. Однако подавляющее большинство из них рассказывают об основах и синтаксисе языка. И непропорционально мало книг, которые бы позволили читателю перейти от теории к практике. А такой переход бывает очень непростым. Восполнить этот пробел призвана книга "JavaScript. Обработка событий на примерах". В ней рассказывается о различных событиях, происходящих на страницах сайтов, об обработчиках этих событий, о многообразии вариантов их применения, о технологии создания сценариев на JavaScript.

👉 @frontendInterview
Incrementer

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

Примеры:
[1, 2, 3] --> [2, 4, 6]
// [1+1, 2+2, 3+3]

[4, 6, 9, 1, 3] --> [5, 8, 2, 5, 8]
// [4+1, 6+2, 9+3, 1+4, 3+5]


👉 @frontendInterview