​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

👉 @frontendInterview

👉 @frontendInterview

​Объясните, почему это не является IIFE: `function foo(){ }();`. Что необходимо изменить, чтобы это стало IIFE??

IIFE расшифровывается как Immediately Invoked Function Expression — немедленно вызываемое функциональное выражение. Синтаксический анализатор JavaScript читает function foo(){ } (); как function foo(){ } и ();, где первое выражение — это объявление функции, а второе (пара скобок) — попытка вызова функции, но так как имя не указано, он выдает ошибку Uncaught SyntaxError: Unexpected token.

Вот два способа исправить это, которые заключаются добавление дополнительных скобок: (function foo(){ })() и (function foo(){ }()). Выражения, начинающиеся с function, считаются объявлениями функций. Оборачивая эту функцию внутри (), она становится функциональным выражением, которое затем может быть выполнено с последующим (). Подобные функции не отображаются в глобальной области видимости, и вы можете даже не указывать им имя, если вы не будете на них ссылаться.

Вы также можете использовать оператор void — void function foo(){ }(). К сожалению, с таким подходом есть одна проблема. Выполнение данного выражения всегда возвращает undefined, поэтому, если ваше IIFE возвращает что-либо, вы не можете его использовать.
Пример:
const foo = void function bar() { return ‘foo’; }();
console.log(foo); // undefined

👉 @frontendInterview

Грокаем функциональное мышление

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

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

👉 @frontendInterview