aria-roledenoscription

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

Пример

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

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

👉 @frontendInterview

👉 @frontendInterview

Pro Angular: Build Powerful and Dynamic Web Apps, 5th Edition (2022)

Angular - это библиотека JavaScript с открытым исходным кодом, поддерживаемая компанией Google. Она имеет множество отличных возможностей для разработки на стороне сервера и используется в некоторых из самых крупных и сложных веб-приложений в мире для улучшения HTML в браузере. Ее краеугольным камнем является способность создавать приложения, которые можно расширять, поддерживать, тестировать и стандартизировать. Знание основ Angular и понимание его применения - это актив в арсенале любого разработчика.

👉 @frontendInterview

Разделите по типам

Вам дан массив значений с разными типами данных. Напишите функцию, которая вернет объект с отсортированными значениями.

Пример:
Входное значение
['a', 1, 2, false, 'b']
Выходное значение

 {
   number: [1, 2],
   string: ['a', 'b'],
   boolean: [false]
 }

👉 @frontendInterview

::marker

Это псевдоэлемент, отвечающий за маркерное поле. В нём находятся, например, маркеры списка.

Пример
Создадим ненумерованный список <ul> и установим синий цвет точки для каждого элемента <li>:
<ul>
<li>Цвет точек</li>
<li>этого ненумерованного списка</li>
<li>#2e9aff</li>
</ul>

li::marker {
color: #2e9aff;
}

Псевдоэлемент ::marker работает только на элементах списка.

👉 @frontendInterview

​area

С помощью тега <area> можно сделать красивую навигацию, разметив обычную картинку областями и указав для них ссылки.
<area> не знает как жить без тега-контейнера <map>

Элементарная навигация по трём разделам:
<map name="doka">
<area shape="rect" coords="47,4,319,64" href="/html/" target="_blank" alt="HTML">
<area shape="rect" coords="46,69,318,129" href="/css/" target="_blank" alt="CSS">
<area shape="rect" coords="46,133,318,193" href="/js/" target="_blank" alt="JS">
</map>
<img usemap="#doka">

Тег <area> помещаем внутрь <map> и прописываем два обязательных атрибута:
- shape определяет форму области. Можно указать circle для круга, poly для произвольной формы или rect для прямоугольника (он же форма <area> по умолчанию);
- coords задаёт координаты области. Для круга проще всего: x, y, R, где R — радиус круга, для прямоугольника формат x1, y1, x2, y2, а для произвольной формы x1, y1, x2, y2, ... , xn, yn. Поскольку у произвольной формы может быть много точек, будьте готовы к длинному коду
Но пока что область «мёртвая», то есть её нельзя выбрать.

Чтобы исправить это, добавим следующие атрибуты:
- href для адреса ссылки;
- target для способа эту ссылку открыть;
- alt для альтернативной подписи.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

perspective

Свойство perspective определяет расстояние от пользователя до задней стенки экрана по оси z. Таким образом можно придать глубину элементу, к которому применяется свойство transform. Эффект заметен только при 3D-трансформациях.

Свойство perspective влияет на вложенные элементы контейнера, для которого указано, а не на сам контейнер.

Пример
.parent {
perspective: 50px;
}

.child {
transform: rotateX(10deg);
}

👉 @frontendInterview

Узнать математическую операцию

Вы должны создать функцию calcType, которая принимает три аргумента: 2 числа и результат неизвестной операции, произведенной над этими числами. Функция должна вернуть название операции, произведенной над числами.

Возможные операции: "addition", "subtraction", "multiplication", "division"

Пример:
calcType(1, 2, 3) --> 1 ? 2 = 3 --> "addition"

👉 @frontendInterview

Real-World Next.js: Build scalable, high-performance, and modern web applications using Next.js, the React framework for production (2022)

Next.js - это масштабируемый и высокопроизводительный фреймворк поверх React.js для современной веб-разработки, предоставляющий большой набор функций, таких как гибридный рендеринг, предварительная выборка маршрутов, автоматическая оптимизация изображений и интернационализация. Если вы хотите создать блог, сайт электронной коммерции или простой веб-сайт, эта книга покажет вам, как можно использовать многоцелевой фреймворк Next.js для создания впечатляющего пользовательского опыта.

👉 @frontendInterview

​Объясните, как this работает в JavaScript

Говоря максимально простым языком, значение this зависит от того, как вызывается функция.
Применяются следующие правила:

1. Если ключевое слово new используется при вызове функции, this внутри функции является совершенно новым объектом.

2. Если для вызова/создания функции используются apply, call или bind, то this внутри функции — это объект, который передается в качестве аргумента.

3. Если функция вызывается как метод, например, obj.method(), то this — это объект, к которому принадлежит функция.

4. Если функция вызывается без контекста, то есть она вызывается без условий, описанных в пунктах выше, то this является глобальным объектом. В браузере это объект window. В строгом режиме (’use strict’), this будет undefined вместо глобального объекта.

5. Если применяются несколько из вышеперечисленных правил, то правило, которое выше выигрывает и устанавливает значение this.

6. Если функция является стрелочной функцией, то она игнорирует все вышеописанные правила и получает значение this из лексического окружения во время ее создания.

👉 @frontendInterview

👉 @frontendInterview

Расскажите, как работает прототипное наследование

Этот вопрос очень часто задают на собеседованиях. Все объекты в JavaScript имеют свойство prototype, которое является ссылкой на другой объект. Когда происходит обращение к свойству объекта, и если свойство не найдено в этом объекте, то механизм JavaScript просматривает прототип объекта, затем прототип прототипа и т.д. До тех пор, пока не найдет определенное свойство на одном из прототипов или до тех пор, пока он не достигнет конца цепочки прототипов. Такое поведение имитирует классическое наследование, но на самом деле это скорее делегирование, чем наследование.

👉 @frontendInterview