Frontend | Вопросы собесов

Что такое прототипы ? Спросят с вероятностью 13% Прототипы — это механизм, с помощью которого объекты наследуют свойства и методы от другого объекта. Это основной способ реализации наследования и повторного использования кода. Они являются частью прототипного наследования, которое отличается от классического наследования. Каждый объект имеет внутреннее и неизменяемое свойство, известное как [[Prototype]], которое может быть ссылкой на другой объект. Этот объект, на который он ссылается, называется "прототипом". Когда вы пытаетесь получить доступ к свойству или методу объекта, и это свойство или метод не найдены в самом объекте, JavaScript автоматически ищет это свойство или метод в его прототипе. Этот процесс продолжается рекурсивно вверх по цепочке прототипов, пока свойство или метод не будут найдены или не будет достигнут конец цепочки прототипов. Создание и использование прототипов Можно задать или изменить с помощью Object.create(), Object.setPrototypeOf(), или просто установив свойство proto (хотя последний способ не рекомендуется к использованию из-за вопросов производительности и совместимости). Пример:

const animal = {
  type: 'Animal',
  describe() {
    return Это ${this.type};
  }
};

const dog = Object.create(animal);
dog.type = 'Собака';
console.log(dog.describe()); // Это Собака

В этом примере объект dog наследует метод describe от объекта animal через прототипную цепочку. Значение this Важно отметить, что когда метод наследуется и вызывается на объекте-потомке, ключевое слово this внутри метода ссылается на объект-потомок, а не на объект-прототип, в котором метод был определен. Прототипы — это механизм, который позволяет объектам наследовать свойства и методы от других объектов. Это основа для реализации наследования и повторного использования кода в языке. Прототипы играют ключевую роль в структуре и поведении объектов, позволяя создавать более модульный и поддерживаемый код. Другими словами, прототипы позволяют объектам "наследовать" свойства и методы от других объектов, облегчая повторное использование кода и организацию структуры программ. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Как поменять контекст функции ? Спросят с вероятностью 10% Контекст выполнения функции (значение this внутри функции) может быть изменён несколькими способами. Это позволяет более гибко управлять тем, как функции вызываются, особенно в объектно-ориентированном программировании. Вот основные способы изменения контекста функции: 1️⃣ call() и apply() Позволяют вызывать функцию с явным указанием объекта, который должен быть использован в качестве this, и с передачей аргументов в эту функцию. ✅ call(thisArg, arg1, arg2, ...): Вызывает функцию с указанным контекстом thisArg и аргументами arg1, arg2, ... ✅ apply(thisArg, [argsArray]): Аналогичен call, но принимает аргументы в виде массива.

function greet() {
  console.log(Привет, ${this.name});
}

const person = { name: 'Алексей' };

greet.call(person);  // Привет, Алексей
greet.apply(person); // Привет, Алексей

2️⃣ bind() (thisArg[, arg1[, arg2[, ...]]]) создаёт новую функцию с привязанным контекстом thisArg и начальными аргументами arg1, arg2, ... function greet() { console.log(Привет, ${this.name}); } const person = { name: 'Мария' }; const greetPerson = greet.bind(person); greetPerson(); // Привет, Мария 3️⃣ Стрелочные функции (() => {}) не имеют собственного контекста this. Вместо этого они заимствуют this из окружающего лексического контекста. Это значит, что this внутри стрелочной функции будет таким же, как и в её родительском контексте, что упрощает работу с контекстом, особенно в колбэках и обработчиках событий.

const person = {   name: 'Иван',   greet: function() {     // Стрелочная функция заимствует thisиз методаgreet     window.setTimeout(() => console.log(Привет, ${this.name}`), 1000);
  }
};

person.greet(); // Привет, Иван (после задержки в 1 секунду)

Использование контекста в классах ES6 для методов, которые вы хотите передать в качестве колбэков и при этом сохранить контекст класса, часто используется .bind(this) в конструкторе или определение метода через стрелочную функцию в свойстве класса. Изменение контекста функции — мощный механизм, позволяющий более гибко управлять выполнением кода. call(), apply(), и bind() дают возможность явно указать контекст this для функций, в то время как стрелочные функции позволяют наследовать контекст из родительского лексического окружения, делая код более чистым и понятным. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Свойство display - основное значение и как оно работает ? Спросят с вероятностью 10% Свойство display является одним из ключевых свойств для управления макетом страницы. Оно определяет, как должен отображаться элемент и его потомки в документе. Оно может принимать различные значения, каждое из которых меняет поведение элемента в потоке документа, его видимость или способ взаимодействия с другими элементами. Основные значения свойства display: -block: Элемент отображается как блочный. Блочные элементы занимают всю доступную ширину контейнера, независимо от своего содержимого, и начинаются с новой строки. -inline: Элемент отображается на той же строке, что и соседние элементы, и занимает только столько места, сколько необходимо для содержимого. Высота и ширина не применяются. -inline-block: Элемент отображается как inline, но позволяет задавать ширину и высоту, как у block элементов. -none: Элемент полностью убирается из потока документа, и его не видно на странице. Важно отличать от visibility: hidden, где элемент не виден, но занимает место в макете. -flex: Элемент становится flex-контейнером, и его непосредственные потомки становятся flex-элементами, что позволяет использовать гибкую систему выравнивания и распределения пространства между элементами внутри контейнера. -grid: Элемент становится grid-контейнером, и его непосредственные потомки становятся grid-элементами, что позволяет создавать сложные макеты с помощью двумерной сетки размещения элементов. Как работает свойство display: ✅ Влияет на то, как элемент взаимодействует с потоком документа (то есть, как он размещается среди других элементов) и какие CSS-свойства к нему применимы (например, ширина, высота, отступы). ✅ Изменение его значения может изменить поведение элемента от блочного к инлайновому и наоборот, что влияет на расположение соседних элементов и на возможность применения определённых свойств к элементу. ✅ Например, блочный элемент (display: block;) будет пытаться занять всю доступную ширину контейнера и вытолкнет другие элементы на новую строку, в то время как инлайновый элемент (display: inline;) расположится на той же строке с другими инлайновыми или текстовыми элементами. ✅ Значение flex или grid превращает элемент в контейнер, который использует гибкую или сеточную модель для расположения своих потомков, соответственно, предоставляя мощные инструменты для создания адаптивных макетов. Свойство display определяет, как элемент будет отображаться в документе, влияя на его расположение и взаимодействие с другими элементами. Изменяя значение этого свойства, можно управлять макетом страницы, использовать различные модели макета (блочную, инлайновую, flex, grid и др.), а также скрывать элементы без удаления их из DOM. Это делает display одним из самых мощных и важных инструментов. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Какие методы массивов есть ? Спросят с вероятностью 13% Массивы являются одними из наиболее важных и часто используемых типов данных, и они имеют множество методов для выполнения различных операций, таких как итерация, преобразование, сортировка, поиск и т.д. Вот некоторые из наиболее часто используемых методов массивов: Итерация - forEach(): Выполняет заданную функцию один раз для каждого элемента в массиве. Преобразование - map(): Создаёт новый массив с результатом вызова указанной функции для каждого элемента массива. - filter(): Создаёт новый массив со всеми элементами, прошедшими проверку, заданной в передаваемой функции. - reduce(): Применяет функцию к аккумулятору и каждому значению массива (слева-направо), сводя его к одному значению. - reduceRight(): Аналогично методу reduce, но проходит по массиву справа налево. Поиск - find(): Возвращает значение первого элемента в массиве, который удовлетворяет предоставленной функции проверки. - findIndex(): Возвращает индекс первого элемента в массиве, который удовлетворяет предоставленной функции проверки. - indexOf(): Возвращает первый индекс, по которому данный элемент может быть найден в массиве, или -1, если такого индекса нет. - lastIndexOf(): Возвращает последний индекс, по которому данный элемент может быть найден в массиве, или -1, если такого индекса нет. Добавление/Удаление элементов - push(): Добавляет один или более элементов в конец массива и возвращает новую длину массива. - pop(): Удаляет последний элемент из массива и возвращает его значение. - shift(): Удаляет первый элемент из массива и возвращает его значение. - unshift(): Добавляет один или более элементов в начало массива и возвращает новую длину массива. Сортировка - sort(): Сортирует элементы массива на месте и возвращает отсортированный массив. - reverse(): Инвертирует порядок элементов в массиве на месте. Срез и соединение - slice(): Возвращает поверхностную копию части массива в новый массив. - concat(): Объединяет два или более массивов/значений и возвращает новый массив. Преобразование массива - join(): Объединяет все элементы массива (или массивоподобного объекта) в строку. Это лишь основные методы, доступные для работы с массивами. Каждый из них имеет свои особенности и случаи использования. Например, map может использоваться для преобразования элементов массива, filter для выборки подмножества элементов по определённому критерию, а reduce для свёртки массива в одно значение. Использование этих методов облегчает манипуляцию данными и делает код более читаемым и эффективным. Методы массивов предоставляют мощные инструменты для обработки и манипуляции массивами данных, включая итерацию, поиск, сортировку, преобразование и многое другое. Знание и понимание этих методов является ключевым для эффективной работы с массивами. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Ребят, в начале или середине своего пути вам часто нужно смотреть на примеры кода и реализацию разных возможностей ⚠️ Это повышает вашу насмотренность, понимание кода, да и вы всегда можете сохранить заготовки себе на будущие проекты Существует множество интересных сайтов. Но теперь есть специальный канал для этого: @code_ready У вас будет все под рукой, с оформленным кодом, примерами, шпаргалками и без занудства ➡️ Так что подписываемся

Что такое псевдоклассы ? Спросят с вероятностью 10% Псевдоклассы — это ключевые слова, добавляемые к селекторам, которые указывают на специальное состояние выбранного элемента. Псевдоклассы позволяют стилизовать элементы на основе их состояния в документе, без необходимости добавления дополнительных классов или ID напрямую в HTML-код. С их помощью можно, например, изменить внешний вид ссылок при наведении курсора, стилизовать четные и нечетные элементы списка, изменять стиль элементов при получении фокуса и многое другое. - :hover — применяется к элементу, когда на него наводят курсор мыши.

a:hover {
  color: red; /* Ссылка станет красной при наведении /
}

- :focus — применяется к элементу, когда он получает фокус (например, при переходе на элемент с помощью клавиатуры или при клике мыши).

input:focus {
  border-color: blue; / Граница инпута станет синей при фокусе /
}

-:active — применяется к элементу в момент его активации пользователем (например, во время клика по кнопке).

button:active {
  transform: scale(0.98); / Кнопка немного уменьшится при клике /
}

- :nth-child() — позволяет стилизовать элементы в зависимости от их порядка среди детей родительского элемента.

li:nth-child(odd) {
  background-color: gray; / Заливка каждого нечетного элемента списка /
}

- :not() — исключает из выборки элементы, соответствующие указанному селектору.

div:not(.special) {
  color: green; / Применяется к каждому div, который не имеет класса special */
}

Зачем нужны псевдоклассы: Они делают CSS более мощным и гибким, позволяя разработчикам применять стили к элементам на основе их состояния или положения в документе, без изменения HTML-структуры. Это особенно полезно для создания интерактивных и реактивных пользовательских интерфейсов, где визуальное состояние элемента должно меняться в ответ на действия пользователя. Псевдоклассы улучшают пользовательский опыт, делая интерфейс более отзывчивым и интуитивно понятным, а также облегчают поддержку и обновление стилей, минимизируя необходимость в добавлении и управлении классами и идентификаторами. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Что такое двустороннее связывание ? Спросят с вероятностью 13% Двустороннее связывание данных (Two-way data binding) — это паттерн проектирования, используемый в разработке пользовательских интерфейсов, при котором пользовательский интерфейс автоматически обновляется при изменении данных, и наоборот, данные автоматически изменяются при модификации пользовательским интерфейсом. Это означает, что модель и представление (view) синхронизированы в реальном времени: изменение в модели немедленно отражается в представлении, и любое изменение в представлении немедленно обновляет модель. Как это работает У вас есть текстовое поле в форме (представление) и переменная (модель), которая хранит значение этого текстового поля. С двусторонним связыванием, если пользователь изменяет значение в текстовом поле, переменная в модели будет автоматически обновлена соответствующим образом. Аналогично, если переменная изменяется программно (например, в результате какой-то логики приложения), изменение отразится в текстовом поле. Оно широко используется в фреймворках и платформах для разработки одностраничных приложений (SPA), таких как Angular. В Angular, например, это достигается с помощью директивы [(ngModel)], которая связывает значение HTML элемента формы (например, <input>) с свойством компонента.

<input [(ngModel)]="user.name">

В этом примере, user.name — это свойство компонента, которое связано с текстовым полем. Любое изменение в поле ввода немедленно обновит user.name, и любое изменение user.name будет немедленно отражено в поле ввода. Преимущества: ✅ Упрощение разработки, поскольку не нужно вручную обновлять представление или модель при изменении другой части. ✅ Улучшение пользовательского опыта, обеспечивая немедленное отображение изменений без дополнительных действий пользователя или дополнительного кода. Недостатки: ❌ Сложность отладки, поскольку автоматическое обновление значений в обе стороны может привести к неожиданным эффектам и затруднить трассировку потока данных. ❌ Производительность, особенно в больших и сложных приложениях, где непрерывная синхронизация данных между моделью и представлением может повлиять на быстродействие. Двустороннее связывание данных — это мощный инструмент в руках разработчика, позволяющий создавать интерактивные и реактивные пользовательские интерфейсы, но его использование требует понимания возможных компромиссов между удобством разработки и производительностью приложения. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

В чем разница между margin и padding ? Спросят с вероятностью 10% margin и padding являются свойствами, используемыми для создания пространства вокруг элементов, но они служат разным целям и применяются к различным частям элемента: Margin (внешний отступ) - Определение: Обозначает внешнее пространство вокруг элемента, то есть пространство между границей элемента и соседними элементами. - Особенности: ✅ Может быть отрицательным, позволяя элементам перекрываться. ✅ Внешние отступы элементов могут "сливаться" (margin collapsing), когда вертикальные отступы двух соседних элементов объединяются в один, равный максимальному из этих двух отступов. - Использование: Используется для создания пространства между элементами и их контейнерами или между самими элементами. Не влияет на размер самого элемента. Padding (внутренний отступ) - Определение: Обозначает внутреннее пространство элемента, то есть пространство между содержимым элемента и его границей. - Особенности: ✅ Увеличивает общий размер элемента, если размер задан явно. Например, если у элемента есть ширина 100px и padding 10px с каждой стороны, общая ширина элемента будет 120px. ✅ Внутренний отступ всегда положителен и не может "сливаться" как внешние отступы. - Использование: Используется для создания пространства вокруг содержимого внутри элемента, влияя на восприятие и читаемость содержимого. Визуальное различие Если представить элемент как коробку, то padding будет располагаться внутри коробки, увеличивая её внутреннее пространство, но не изменяя размер самой коробки. Margin располагается снаружи коробки, увеличивая пространство между этой коробкой и другими объектами вокруг неё, но не влияя на размеры самой коробки.

.box {
  width: 100px;
  height: 100px;
  margin: 20px;
  padding: 20px;
  border: 5px solid black; /* Для наглядности границы */
}

В этом примере элемент с классом .box будет иметь внутреннее пространство (padding) в 20px вокруг содержимого внутри границы и внешнее пространство (margin) в 20px вокруг границы, отделяющее его от других элементов. Margin и padding являются фундаментальными CSS-свойствами для стилизации веб-страниц, позволяя контролировать пространство вокруг и внутри элементов. Их правильное использование важно для создания желаемого макета и влияет на внешний вид и пользовательский опыт веб-проекта. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Какие бывают значения у свойства position ? Спросят с вероятностью 13% Свойство position определяет, как элемент будет позиционироваться в документе. Есть несколько ключевых значений, которые можно присвоить этому свойству: 1️⃣ static: Это значение по умолчанию. Элементы с position: static располагаются в обычном потоке документа, и свойства top, right, bottom, left и z-index на них не влияют. 2️⃣ relative: Элемент позиционируется относительно его обычного положения в потоке документа. Указание top, right, bottom и left приведет к смещению элемента относительно того места, где он находился бы, если бы был static. Элемент с position: relative остается в нормальном потоке документа и может смещаться от своей обычной позиции. 3️⃣ absolute: Элемент удаляется из обычного потока документа, и его позиция определяется относительно его ближайшего позиционированного (не static) предка, если таковой имеется; в противном случае относительно начальной контейнерной области. Свойства top, right, bottom и left определяют его точное положение. 4️⃣ fixed: Элемент удаляется из обычного потока документа и позиционируется относительно окна браузера. Он остается на том же месте даже при прокрутке страницы. Свойства top, right, bottom и left также определяют его позицию. 5️⃣ sticky: Элемент является гибридом между relative и fixed. Он ведет себя как relative до тех пор, пока элемент не достигнет определенной точки при прокрутке страницы, после чего он становится "застрявшим" и ведет себя как fixed, пока не будет достигнута противоположная граница его контейнера. Каждое из этих значений позволяет разработчику точно управлять расположением элементов на странице, делая возможным создание сложных макетов и интерактивных интерфейсов. Выбор конкретного значения position зависит от задачи, которую нужно решить, и желаемого визуального эффекта. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Что такое inline стили, и какой они имеют приоритет ? Спросят с вероятностью 10% Inline стили — это способ применения CSS-правил непосредственно к HTML-элементу через атрибут style. Этот метод позволяет задать стили индивидуально для конкретного элемента, напрямую внутри его тега, без использования внешних или внутренних стилевых листов.

<p style="color: red; font-size: 20px;">Этот текст будет красного цвета и с размером шрифта 20px.</p>

Приоритетность inline стилей Они имеют более высокий приоритет, чем стили, заданные через внешние или внутренние стилевые листы. Это означает, что если для одного и того же элемента заданы стили через CSS-классы или идентификаторы и через inline атрибут style, то они будут применены. Порядок приоритетов CSS: 1️⃣ Inline стили (наивысший приоритет) 2️⃣ ID селекторы 3️⃣ Классы, псевдоклассы и атрибуты 4️⃣ Элементы и псевдоэлементы (наименьший приоритет) Стоит отметить, что существует способ переопределить даже их с помощью правила !important в CSS, однако его использование следует минимизировать, поскольку это может усложнить дальнейшее управление и обслуживание стилей. Преимущества: ✅ Позволяют быстро протестировать и применить стили к конкретному элементу без необходимости редактирования стилевых листов. ✅ Полезны для стилей, которые должны быть применены к одному элементу и не повторяются в других частях веб-страницы. Недостатки: ❌ Усложняют HTML-разметку и делают её менее читаемой. ❌ Затрудняют поддержку и обновление стилей, особенно при большом количестве inline стилей. ❌ Снижают возможность повторного использования CSS-правил и нарушают принцип разделения структуры и оформления. Использование inline стилей может быть оправдано в определённых ситуациях, например, при динамическом изменении стилей или для уникальных стилей, специфичных для одного элемента. Однако для обеспечения лучшей организации кода и его поддержки рекомендуется использовать внешние или внутренние стилевые листы. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Для чего нужен eventloop ? Спросят с вероятностью 17% Event Loop (цикл событий) — это фундаментальная концепция, особенно в контексте JavaScript и его выполнения в браузере и Node.js. Основная его задача — обеспечить выполнение асинхронного кода, такого как обработка событий, выполнение обратных вызовов (callbacks) и промисов, не блокируя при этом выполнение остального кода. Как работает Event Loop JavaScript — это однопоточный язык программирования, что означает, что он может выполнять только одну операцию за раз. Однако, благодаря Event Loop, он способен обрабатывать асинхронные операции, такие как запросы к серверу, таймеры и взаимодействие с пользователем, не останавливая основной поток выполнения кода. Процесс работы Event Loop включает в себя несколько ключевых компонентов: 1️⃣ Call Stack (Стек вызовов): Здесь хранятся все функции, которые нужно выполнить. Добавляет функции в стек вызовов и выполняет их по порядку, сначала завершая выполнение функций, которые находятся на вершине стека. 2️⃣ Callback Queue (Очередь обратных вызовов): Когда асинхронная операция завершается (например, приходит ответ от сервера), соответствующий обратный вызов помещается в очередь обратных вызовов. 3️⃣ Event Loop: Следит за стеком вызовов и очередью обратных вызовов. Если стек вызовов пуст, он переносит первую функцию из очереди обратных вызовов в стек вызовов, чтобы она была выполнена. Зачем это нужно Event Loop позволяет JavaScript быть асинхронным и неблокирующим, что критически важно для создания отзывчивых приложений. Без него асинхронные операции, такие как загрузка данных с сервера или ожидание завершения таймера, заблокировали бы выполнение всего скрипта, делая веб-страницы и приложения медленными и неотзывчивыми. Пример: Представьте, что вы пишете код, который запрашивает данные с сервера и затем обновляет веб-страницу этими данными. Без асинхронности и Event Loop вам пришлось бы ждать, пока не придет ответ от сервера, прежде чем пользователь сможет взаимодействовать со страницей. С ним пользователь может продолжать взаимодействовать со страницей, пока данные загружаются в фоновом режиме. Event Loop обеспечивает асинхронное выполнение кода, позволяя приложениям оставаться отзывчивыми и эффективно обрабатывать длительные или отложенные операции, не блокируя при этом основной поток выполнения. Это достигается за счет циклического мониторинга стека вызовов и переноса обратных вызовов из очереди обратных вызовов в стек вызовов, когда это возможно. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Устроиться фронтендером в Яндекс за выходные 18–19 мая устраиваем Weekend Offer Frontend. До 15 мая решите одну задачу в Контесте, 18-го пройдите два собеседования, а 19 мая познакомьтесь с командами и получите офер. В мероприятии участвуют 13 команд: Поиск, E-com Поиска, Реклама, Бизнес, Cloud, 360, Игры, Умный дом, Путешествия, Аренда, Недвижимость, Авто.ру и Авто.ру Бизнес. Вы сможете пообщаться с менеджерами и выбрать проект, который покажется самым интересным. Нанимаем в офисы по всей России, помогаем релоцироваться внутри страны. Узнать подробности и зарегистрироваться можно здесь. Реклама. ООО "Яндекс". ИНН 7736207543

Как отцентровать блок по горизонтали и по вертикали ? Спросят с вероятностью 10% Центрирование блока по горизонтали и вертикали можно выполнить несколькими способами, в зависимости от контекста и требований к верстке. Вот несколько популярных методов: 1️⃣ Использование Flexbox Это мощный инструмент для управления макетом, который позволяет легко центрировать элементы.

.parent {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали /
  align-items: center; / Центрирование по вертикали /
  height: 100vh; / Высота родительского блока /
}

<div class="parent">
  <div class="child">Центрированный блок</div>
</div>

Использование Grid Также позволяет легко центрировать элементы как по горизонтали, так и по вертикали.

.parent {
  display: grid;
  place-items: center; / Центрирование по горизонтали и вертикали /
  height: 100vh;
}

<div class="parent">
  <div class="child">Центрированный блок</div>
</div>

2️⃣ Использование абсолютного позиционирования Этот метод подходит для центрирования элемента внутри родительского блока с относительным позиционированием.

.parent {
  position: relative;
  height: 100vh;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="parent">
  <div class="child">Центрированный блок</div>
</div>

3️⃣ Использование свойства margin Для горизонтального центрирования блочного элемента его можно использовать с автоматическим расчетом слева и справа.

.child {
  width: 50%; / Желаемая ширина блока /
  margin: 0 auto; / Автоматический отступ слева и справа */
}

Однако, для вертикального центрирования этот метод работает только при фиксированной высоте родителя и требует дополнительных расчетов. Выбор метода зависит от конкретных требований к макету и поддержки браузерами. Flexbox и Grid являются современными и предпочтительными способами для создания адаптивных макетов, в то время как абсолютное позиционирование и использование margin могут пригодиться в более специфических ситуациях. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Что такое дженерик ? Спросят с вероятностью 17% Дженерики (Generics) — это мощный инструмент, позволяющий создавать компоненты (как правило, функции, классы и интерфейсы), работающие с любым типом данных. Основная цель — обеспечение строгой типизации при работе с различными типами данных, не теряя при этом гибкости и переиспользуемости кода. Как это работает Вместо указания конкретного типа данных при создании компонента, используется параметр типа — переменная, которая затем заменяется на реальный тип данных при использовании компонента. Это позволяет компоненту работать с различными типами данных без изменения его исходного кода. Преимущества: ✅ Безопасность типов: Позволяют проверить тип данных на этапе компиляции, предотвращая возможные ошибки, связанные с неправильным использованием типов данных. ✅ Переиспользуемость кода: С помощью можно создать универсальные алгоритмы и структуры данных, работающие с любыми типами данных, что сокращает дублирование кода. ✅ Читаемость кода: Использование их делает код более понятным, поскольку намерения разработчика становятся очевидными благодаря явному указанию типов данных. В нем дженерики активно используются для повышения безопасности типов.

function identity<T>(arg: T): T {
    return arg;
}

let output1 = identity<string>("myString");  // тип T становится string
let output2 = identity<number>(100);  // тип T становится number

Дженерики — это концепция в программировании, позволяющая компонентам работать с разными типами данных, при этом сохраняя строгую типизацию. Это достигается за счет использования параметров типа, которые заменяются на конкретные типы данных при использовании компонента, улучшая тем самым безопасность, переиспользуемость и читаемость кода. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Что такое специфичность селекторов ? Спросят с вероятностью 10% Специфичность селекторов — это механизм, по которому браузер определяет, какие CSS-правила применять к элементу, в случае конфликта между несколькими правилами. Специфичность определяется на основе вида селектора и его вложенности. Это ключевой аспект для понимания того, как CSS применяется к HTML-документу и как разрешаются конфликты стилей. Как рассчитывается специфичность: Специфичность рассчитывается по четырём компонентам (A, B, C, D), которые можно представить в виде чисел в четырёхколоночном значении: ✅ А: Если стиль прописан в атрибуте style у элемента, то A = 1 (инлайновые стили). ✅ B: Количество ID селекторов в правиле. ✅ C: Количество классов, селекторов атрибутов и псевдоклассов в правиле. ✅ D: Количество типов элементов и псевдоэлементов в правиле. При этом важно понимать, что селектор с более высоким уровнем специфичности переопределит селектор с более низким уровнем специфичности, независимо от порядка их объявления. Примеры: 1️⃣ Инлайновый стиль (A=1, B=0, C=0, D=0): Наивысшая специфичность.

      <div style="color: red;"></div>
   

2️⃣ ID селектор (A=0, B=1, C=0, D=0): Высокая специфичность.

      #header { color: blue; }
   

3️⃣ Классы, селекторы атрибутов, псевдоклассы (A=0, B=0, C=1, D=0):

      .button.active { color: green; }
   

4️⃣ Типы элементов и псевдоэлементы (A=0, B=0, C=0, D=1):

      div::before { content: ">>"; }
   

Исключения и особые случаи: ✅ Универсальный селектор (*), комбинаторы (например, +, >, ~) и отрицание (:not()) не влияют на специфичность. ✅ Важность (!important): Если к правилу применён !important, это правило переопределяет другие правила, независимо от специфичности (использовать с осторожностью). Понимание специфичности селекторов помогает избежать конфликтов стилей и делает код более предсказуемым и управляемым. Это основа для эффективной разработки стилей и помогает избежать излишнего использования !important, что может усложнить дальнейшую поддержку кода. Специфичность — это важный инструмент для управления каскадом стилей и обеспечения того, чтобы правильные стили применялись к правильным элементам. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Что такое области видимости ? Спросят с вероятностью 13% Область видимости (Scope) в программировании определяет контекст выполнения кода, в котором переменные, функции и объекты доступны для использования. Области видимости играют ключевую роль в структуре и безопасности кода, позволяя разграничивать доступ к данным и избегать конфликтов имен. Виды областей видимости: 1️⃣ Глобальная область видимости: Переменные, объявленные вне всех функций или блоков кода, находятся в глобальной области видимости. Они доступны из любой части кода в том же контексте выполнения. 2️⃣ Локальная (или функциональная) область видимости: Переменные, объявленные внутри функции, доступны только в пределах этой функции и вложенных в неё функций. 3️⃣ Блочная область видимости: Введена в ES6 с помощью ключевых слов let и const, позволяет ограничить область видимости переменной блоком кода (например, циклом или условным оператором). Глобальная область видимости:

var globalVar = "Я глобальная переменная";

function exampleFunction() {
  console.log(globalVar); // Доступ к глобальной переменной внутри функции
}

console.log(globalVar); // Доступ к глобальной переменной вне функции

Локальная область видимости:

function exampleFunction() {
  var localVar = "Я локальная переменная";
  console.log(localVar); // Доступна только внутри функции
}

exampleFunction();
console.log(localVar); // Ошибка: localVar не определена

Блочная область видимости:

if (true) {
  let blockVar = "Я переменная блочной видимости";
  console.log(blockVar); // Доступна только внутри блока
}

console.log(blockVar); // Ошибка: blockVar не определена

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

function outerFunction() {
  var outerVar = "Я внешняя переменная";

  function innerFunction() {
    console.log(outerVar); // Доступ к переменной из внешней области видимости
  }

  return innerFunction;
}

var myFunction = outerFunction();
myFunction(); // Вывод: "Я внешняя переменная"

Область видимости важна для структурирования и организации кода, она помогает избегать конфликтов имен и обеспечивает безопасность данных, ограничивая доступ к переменным из разных частей программы. Понимание областей видимости и замыканий жизненно важно для разработки надёжных и эффективных приложений. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🔐 База собесов | 🔐 База тестовых

Материалы из этого канала дают на платных курсах Frontend Portal — настоящий портал для тех кто хочет стать востребованным frontend-разработчиком. Полезные ресурсы, шпаргалки, разбор вопросов с собеседований, задачи, викторины и многое другое 👉 Присоединяйтесь к @FrontendPortal и станьте частью дружного frontend-комьюнити!

Что такое методолгия bem ? Спросят с вероятностью 13% Методология BEM (Block, Element, Modifier) — это популярный подход к организации CSS классов и структуры HTML. Эта методология направлена на упрощение разработки и поддержки больших и масштабируемых проектов за счет введения строгой структуры для классов CSS. Компоненты BEM: 1️⃣ Блок (Block): Независимый компонент страницы, который может быть повторно использован. В нем описывает сущность, которая имеет смысл сама по себе (например, кнопка, меню). 2️⃣ Элемент (Element): Часть блока, которая не может использоваться отдельно от него. Элементы связываются с блоками через двойное подчеркивание (__). Например, пункт меню (menu__item) является элементом блока меню. 3️⃣ Модификатор (Modifier): Свойство, которое изменяет внешний вид или поведение блока или элемента. Модификаторы обозначаются двойным дефисом (--). Например, активное состояние кнопки может быть представлено как button--active. Преимущества: ✅ Модульность: Благодаря независимости блоков, их легко переиспользовать в разных частях проекта или даже в разных проектах. ✅ Ясность и понятность: Структура классов становится более очевидной, что облегчает понимание структуры проекта новыми разработчиками. ✅ Упрощение масштабирования: Методология облегчает добавление новых функций и стилей без страха нарушить существующие. ✅ Уменьшение каскадирования: Использование уникальных имен классов для блоков и элементов сокращает вероятность конфликтов и неожиданного наследования стилей.

<div class="menu">
  <div class="menu__item menu__item--active">Главная</div>
  <div class="menu__item">Новости</div>
</div>

В этом примере menu является блоком, menu__item — элементом этого блока, а menu__item--active — модификатором элемента, указывающим на его активное состояние. Методология BEM предлагает систематический подход к структурированию классов CSS и HTML-разметки, который помогает создавать масштабируемые и легко поддерживаемые веб-проекты. Это достигается за счет разделения интерфейса на независимые блоки, что упрощает разработку, отладку и тестирование веб-приложений. 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

В чём разница между foreach и map ? Спросят с вероятностью 17% forEach и map — это два метода массивов, предназначенные для итерации по элементам массива, но они используются в разных целях и работают по-разному. forEach - Назначение: Используется для выполнения заданной функции один раз для каждого элемента в массиве. Основное назначение — выполнение побочных эффектов (например, вывод в консоль, запись в файл и т.д.). - Возвращаемое значение: Не возвращает никакого значения (то есть возвращает undefined). Это означает, что результат его работы нельзя присвоить переменной. - Изменение оригинального массива: Может изменять оригинальный массив, если внутри функции-коллбэка производятся изменения его элементов.

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// Выводит каждый элемент в консоль

map - Назначение: Используется для создания нового массива, заполненного результатами вызова предоставленной функции на каждом элементе исходного массива. Основное назначение — трансформация данных. - Возвращаемое значение: Возвращает новый массив, который содержит результаты применения функции к каждому элементу исходного массива. Это позволяет использовать его в цепочках вызовов и присваивать результат его работы переменной. - Изменение оригинального массива: Не изменяет оригинальный массив, что делает его предпочтительным в функциональном программировании.

const array2 = [1, 4, 9];
const map1 = array2.map(x => x * 2);
console.log(map1);
// Выводит новый массив [2, 8, 18]

Основные различия - Цель использования: forEach для выполнения операций или побочных эффектов на каждом элементе массива; map для создания нового массива на основе обработки каждого элемента исходного массива. - Возвращаемое значение: forEach возвращает undefined, в то время как map возвращает новый массив. - Изменение исходного массива: forEach может изменять исходный массив, если это предусмотрено логикой коллбэка; map не изменяет исходный массив, а создаёт новый. forEach используется для выполнения функции на каждом элементе массива без создания нового массива. Он идеален для ситуаций, когда вам нужно применить какой-либо побочный эффект. map применяется для трансформации исходного массива в новый, без изменения исходного массива 👉 Можно посмотреть Примеры как отвечают люди на этот вопрос, или перейти к Списку всех вопросов на Frontend Developer. Ставь 👍 если нравится контент. 🧩 Идущий | 🔐 Собесы | 🔐 Тестовые

Хочешь освоить или улучшить свои навыки JavaScript? Отличные новости — тебе теперь есть где тренироваться! В канале @codewars_js публикуют задачи разной сложности по JavaScript Подписывайся и развивайся, всего за 5-10 минут в день!