👉 @frontendInterview

Learning React (2020)

Если вы хотите научиться создавать эффективные веб-приложения на React, данная книга для вас. Эта обновленная версия также идеально подходит для веб-разработчиков и инженеров-программистов, которые знают основы JavaScript, CSS и HTML. В ней представлены передовые практики и шаблоны для написания современного кода на React. Никаких предварительных знаний о React или функциональном JavaScript не требуется.

👉 @frontendInterview

Number of Decimal Digits

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

Например, в числе 9 одна цифра, в числе 66 - 2 цифры.

👉 @frontendInterview

Как добавить HTML элементу обработчик события?

addEventListener() Добавляет элементу действие, которое будет выполнено после срабатывания события. Например, на клик мышки или нажатие клавиши.

Найдём первую кнопку на странице и будем выводить сообщение в консоль, когда произошёл клик по этой кнопке.
const element = document.querySelector('button')

element.addEventListener('click', function (event) {
console.log('Произошло событие', event.type)
})

При вызове функции, в неё передаётся специальный объект (в примере выше — event), который у разных типов событий разный. Например, у событий нажатия клавиши есть код клавиши, а у событий перемещения мыши — координаты.

👉 @frontendInterview

Расскажите про свойство display в CSS.

По умолчанию все элементы в HTML бывают блочными и строчными. Но в вёрстке часто бывает, что нам нужно сделать элемент не строчным, а блочным. И наоборот.

Тут на помощь приходит свойство display ✨

Помимо значений block (блочное отображение) и inline (строчное отображение) существует смешанное значение inline-block (строчно-блочное отображение).

Значения свойства, которые встречаются в работе чаще всего:
none — полностью скрывает элемент со страницы, не удаляя его при этом из HTML-разметки.
block — элемент ведёт себя как блочный.
inline-block — элемент ведёт себя снаружи как строчный, а внутри как блочный.
flex — элемент становится флекс-контейнером, ведёт себя как блочный, а вложенные элементы становятся флекс-элементами.
grid — элемент становится грид-контейнером. Снаружи грид-контейнер ведёт себя как блок. Дочерние элементы такого контейнера начинают подчиняться правилам грид-раскладки.
Остальные значения можно посмотреть в спецификации.

👉 @frontendInterview

Что такое скринридеры?

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

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

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

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

👉 @frontendInterview

👉 @frontendInterview

Эволюционная архитектура. Поддержка непрерывных изменений

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

👉 @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

👉 @frontendInterview

События 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