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