Frontend | Вопросы собесов
19.1K subscribers
33 photos
1 video
1.02K links
Download Telegram
🤔 Какие псевдоклассы есть?

Псевдоклассы позволяют стилизовать элементы в определённом состоянии. Примеры:
- :hover — при наведении;
- :active — при нажатии;
- :focus — при получении фокуса;
- :first-child, :last-child — для первого/последнего дочернего элемента;
- :nth-child(n) — выбор по порядку;
- :not() — отрицание условия;
- :disabled, :checked, :required — состояния форм.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥3
🤔 Что такое относительная ссылка?

Это ссылка, которая указывает путь к ресурсу относительно текущей страницы или корневого каталога веб-сайта, вместо указания полного пути (абсолютной ссылки).

Относительная ссылка
<a href="../contact.html">Контакты</a>


Абсолютная ссылка
<a href="https://example.com/contact.html">Контакты</a>


🚩Типы относительных ссылок

🟠Простые относительные ссылки
Указывают путь к ресурсу, который находится в текущем каталоге или подкаталоге.
<a href="page.html">Страница</a> <!-- Ресурс в текущем каталоге -->


🟠Ссылки с подъемом вверх по дереву файловой структуры
Используются два символа точки (..) для перехода на уровень выше.

   <a href="../folder/page.html">Страница</a> <!-- Подъем на один уровень вверх -->


🟠Корневые ссылки
Указывают путь относительно корня веб-сайта, начиная с /.
<a href="/images/photo.jpg">Фото</a> <!-- Начало пути от корня сайта -->


🚩Зачем нужны относительные ссылки?

🟠Удобство при локальной разработке
Относительные ссылки работают независимо от домена. Если вы разрабатываете сайт локально (например, через localhost), вам не нужно указывать абсолютный путь с доменом.

🟠Проще поддерживать сайт
Если домен или структура сайта меняется, относительные ссылки автоматически адаптируются, если структура каталогов остается прежней.

🟠Экономия времени
Меньше текста в коде, особенно если проект содержит множество ссылок.

🚩Примеры использования относительных ссылок

Ссылка на файл в текущей папке
<a href="file.html">Файл в текущей папке</a>


Ссылка на файл в подкаталоге
<a href="subfolder/file.html">Файл в подкаталоге</a>


Ссылка на файл в родительской папке
<a href="../file.html">Файл в родительской папке</a>


Ссылка на файл относительно корня сайта
<a href="/folder/file.html">Файл в папке от корня</a>


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9
🤔 Объясните "JavaScript Module Pattern" и где он применяется?

Module Pattern — это способ инкапсулировать логику и данные внутри функции, скрывая внутренние детали и открывая только нужное API. Применяется для:
- организации кода;
- избежания глобальных переменных;
- создания приватных и публичных методов.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9
🤔 Почему методы жизненного цикла нельзя писать через прилоченную функцию?

В Vue 2 и Vue 3 (Options API) методы жизненного цикла (mounted, created, beforeDestroy и др.) должны быть обычными функциями, а не стрелочными (() => {}).

🟠Как работает `this` в Vue?
Когда Vue вызывает метод жизненного цикла, он автоматически привязывает this к экземпляру компонента.
export default {
data() {
return { message: "Привет!" };
},
mounted() {
console.log(this.message); // Работает, this = { message: "Привет!" }
}
};


🟠Почему стрелочная функция не работает?
Стрелочные функции не создают свой собственный this, а берут this из внешнего контекста (того, что было при их создании).
export default {
data() {
return { message: "Привет!" };
},
mounted: () => {
console.log(this.message); // Ошибка: this === undefined
}
};


🟠Как стрелочные функции всё-таки можно использовать?
Хотя стрелочные функции нельзя использовать для методов жизненного цикла, их можно применять внутри обычных методов:
export default {
data() {
return { message: "Привет!" };
},
mounted() {
setTimeout(() => {
console.log(this.message); // Работает, this берётся из `mounted()`
}, 1000);
}
};


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
🤔 Что такое прототипы в JavaScript

- Прототипы позволяют объектам в JavaScript наследовать свойства и методы друг от друга.
- Прототипное наследование является механизмом, позволяющим объектам использовать свойства и методы, определенные в других объектах.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🔥2
🤔 Что такое делегирование?

Делегирование событий (Event Delegation) — это техника, при которой мы не навешиваем обработчик на каждый элемент, а ставим один обработчик на родителя и отслеживаем события его потомков.

🚩Как работает делегирование?

Обычный способ (без делегирования)
Если у нас есть 10 кнопок, мы можем повесить обработчик на каждую
document.querySelectorAll("button").forEach((btn) => {
btn.addEventListener("click", () => {
console.log("Кнопка нажата");
});
});


Если кнопок 1000, это создаст 1000 обработчиков, что неэффективно.
Если кнопки добавляются динамически (например, из API), обработчик на новые кнопки не сработает.

🟠Делегирование событий (оптимальный способ)
Вместо того чтобы вешать обработчик на каждую кнопку, ставим один обработчик на родительский элемент и проверяем, кто вызвал событие:
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.tagName === "BUTTON") {
console.log("Кнопка нажата:", event.target.textContent);
}
});


🟠Пример с динамическими элементами
Если мы добавляем кнопки динамически, обработчик все равно будет работать
document.getElementById("container").addEventListener("click", (event) => {
if (event.target.classList.contains("btn")) {
console.log("Нажата кнопка:", event.target.textContent);
}
});

// Добавляем новую кнопку динамически
setTimeout(() => {
const newButton = document.createElement("button");
newButton.classList.add("btn");
newButton.textContent = "Новая кнопка";
document.getElementById("container").appendChild(newButton);
}, 2000);


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
🤔 Для чего необходимы HTML, CSS, JS в вебе?

- HTML — структура контента.
- CSS — внешний вид, стилизация.
- JavaScript — интерактивность, логика, обработка событий.
Все три языка образуют основу фронтенд-разработки.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10💊5🤔1
Forwarded from easyoffer
Новая фича на easyoffer Автоотлики

Вы автоматически откликаетесь на подходящие вам вакансии. Попробуйте её бесплатно и начните получать больше предложений о работе.

🚀 Запуск занимаем всего 3 минуты, а экономит очень много времени
🛡 Это безопасно: easyoffer официально одобрен HeadHunter и прошел его модерацию.
🥷🏻 Автоотклик незаметен для рекртера. Автоотклик ничем не отличается от обычного отклика, который вы делаете вручную

Рекрутеры давно используют автоматизацию для поиска кандидатов. Так почему вы должны откликаться вручную?

💡Совет – Добавьте шаблон сопроводительного письма, чтобы откликаться на большее количество вакансий (на некоторые вакансии нельзя откликнуться без сопроводительного)

Попробовать бесплатно → https://easyoffer.ru/autoapply
🤔 Какие преимущества у di?

Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне.

🚩Почему DI полезен?

🟠Уменьшает связность кода (Loose Coupling)
Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи.
class UserService {
constructor() {
this.db = new Database(); // Прямо создаем зависимость
}

getUser(id) {
return this.db.findUserById(id);
}
}


С DI (гибкость)
class UserService {
constructor(db) {
this.db = db; // DI передает зависимость извне
}

getUser(id) {
return this.db.findUserById(id);
}
}

// Передаем нужную зависимость
const database = new Database();
const userService = new UserService(database);


🟠Улучшает тестируемость (Unit-тесты проще)
С DI можно подменять зависимости на заглушки (mock, fake, stub).
const userService = new UserService(); // Всегда использует реальную Database
userService.getUser(1); // Как протестировать без реальной БД? 🤔


С DI (можно подменить зависимость)
class FakeDatabase {
findUserById(id) {
return { id, name: "Тестовый пользователь" };
}
}

const fakeDb = new FakeDatabase();
const userService = new UserService(fakeDb);

console.log(userService.getUser(1)); // Тест без реальной БД


🟠Улучшает расширяемость (легко менять зависимости)
Допустим, сначала использовали MySQLDatabase, но решили перейти на MongoDatabase.
class UserService {
constructor() {
this.db = new MySQLDatabase(); // Нужно менять здесь
}
}


С DI (добавляем новую зависимость без изменения кода UserService)
const db = new MongoDatabase(); // Просто передаем другую зависимость
const userService = new UserService(db);


🟠Упрощает управление зависимостями (через DI-контейнеры)
В крупных приложениях удобно использовать DI-контейнер (например, InversifyJS для JavaScript/TypeScript).
import "reflect-metadata";
import { Container, injectable, inject } from "inversify";

@injectable()
class Database {
findUserById(id) {
return { id, name: "База данных" };
}
}

@injectable()
class UserService {
constructor(@inject(Database) db) {
this.db = db;
}

getUser(id) {
return this.db.findUserById(id);
}
}

// Настраиваем DI-контейнер
const container = new Container();
container.bind(Database).toSelf();
container.bind(UserService).toSelf();

// Получаем объект с нужными зависимостями
const userService = container.get(UserService);
console.log(userService.getUser(1));


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6💊1
🤔 В чём отличие атрибутов от свойств в HTML-тегах?

Атрибуты — это то, что написано в HTML (<input value="hello">). Свойства — это то, что доступно в объекте DOM (input.value). Атрибут задаёт начальное значение свойства, но при изменении свойства атрибут не меняется автоматически.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6💊2
🤔 Расскажи про области видимости

В JavaScript область видимости (scope) определяет доступность переменных, функций и объектов в разных частях кода. Это фундаментальная концепция, которая управляет тем, какие данные могут быть доступны или недоступны в различных частях программы.

🚩Глобальная область видимости

Переменные и функции, объявленные вне любых функций или блоков, находятся в глобальной области видимости. Они доступны из любой части программы.
var globalVar = 'Я глобальная переменная';

function testFunction() {
console.log(globalVar); // Доступно
}

testFunction();
console.log(globalVar); // Доступно


🚩Функциональная область видимости

Переменные, объявленные с помощью var внутри функции, имеют область видимости, ограниченную этой функцией. Они недоступны за её пределами.
function testFunction() {
var functionVar = 'Я внутри функции';
console.log(functionVar); // Доступно
}

testFunction();
console.log(functionVar); // Ошибка: переменная functionVar недоступна


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

Переменные, объявленные с помощью let и const, имеют область видимости, ограниченную ближайшим блоком {}.
if (true) {
let blockVar = 'Я внутри блока';
console.log(blockVar); // Доступно
}

console.log(blockVar); // Ошибка: переменная blockVar недоступна


🚩Область видимости модуля (Module Scope)

При использовании модулей (например, import и export в ES6), все переменные и функции в модуле имеют собственную область видимости. Они не попадают в глобальную область видимости.
export const myVar = 'Я переменная из модуля';


import { myVar } from './module1.js';
console.log(myVar); // "Я переменная из модуля"


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11
🤔 В чём отличие синхронного кода от асинхронного?

Синхронный код выполняется пошагово. Асинхронный — может запускаться и завершаться позже, с использованием callback, promise или async/await.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍2
🤔 Как понимают изменение состояния mobxvue?

MobX в Vue работает с реактивностью (как и Vue), но использует свою систему отслеживания изменений. Он понимает, что состояние изменилось, с помощью прокс (Proxy) и геттеров/сеттеров (get/set).

🚩Как MobX делает состояние реактивным?

В MobX основная функция для создания реактивного состояния — observable(). Она превращает объект в реактивный Proxy, который отслеживает чтение (get) и изменение (set) свойств.
import { observable } from "mobx";

const store = observable({
count: 0,
increment() {
this.count++;
},
});

console.log(store.count); // MobX "запоминает", что это свойство использовалось
store.increment(); // MobX "замечает", что свойство изменилось


🚩Как MobX понимает, что нужно обновить компонент Vue?

Vue-компоненты подписываются на реактивные свойства, когда они рендерятся внутри observer().
import { defineComponent } from "vue";
import { observer } from "mobx-vue-lite";

export default observer(defineComponent({
setup() {
return {
store,
};
},
template: `<div>{{ store.count }}</div>`,
}));


🚩Как MobX понимает зависимости? (Track & Re-run)

MobX автоматически отслеживает зависимости во время рендера.
Когда компонент использует store.count, MobX **"запоминает", что он зависит от count.
Когда count изменяется, MobX перерисовывает только этот компонент.
import { computed } from "mobx";

const store = observable({
count: 1,
get doubleCount() {
return this.count * 2;
},
});

console.log(store.doubleCount); // 2
store.count = 2;
console.log(store.doubleCount); // 4 (MobX понимает, что зависимость изменилась)


🚩Как MobX оптимизирует обновления? (Reactions)

MobX не просто перерисовывает всё — он оптимизирует рендеринг.
🟠autorun
запускается сразу и при изменении любого используемого свойства.
🟠reaction
запускается только когда меняется конкретное наблюдаемое свойство.
🟠when
выполняется один раз, когда условие становится true.
import { autorun } from "mobx";

const store = observable({ count: 0 });

autorun(() => {
console.log("Count изменился:", store.count);
});

store.count = 1; // "Count изменился: 1"
store.count = 2; // "Count изменился: 2"


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4
🤔 Если рассматривать HTML5 как открытую web-платформу, на чём она строится, из каких компонентов состоит?

HTML5 включает:
- Разметку и семантику (новые теги: article, nav, section);
- API (Canvas, Geolocation, Drag-and-Drop);
- Мультимедиа (<video>, <audio>);
- Storage (LocalStorage, SessionStorage, IndexedDB);
- Сетевые возможности (WebSocket, SSE, Fetch);
- Offline (Service Workers, Cache API);
- Формы и валидация (input types, pattern, required и т.д.).


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8💊3🤔2
🤔 Зачем нам разбивать приложение отдельно на backend и frontend?

Разделение на Frontend (клиент) и Backend (сервер) – это стандартный подход в современной веб-разработке. Это делает приложение гибче, масштабируемее и удобнее в разработке.

🚩Почему лучше разделять?

🟠Гибкость и масштабируемость
Можно менять Frontend и Backend независимо.
Можно использовать разные технологии (например, Vue.js + Django).
Можно легко разделить команды разработчиков.

🟠Повышенная безопасность
Frontend не имеет доступа к базе данных.
Все важные вычисления, авторизация, хранение данных происходят на сервере.
API можно защитить токенами (JWT, OAuth).

🟠Уменьшение нагрузки на клиент
Логика обработки данных выполняется на сервере.
Клиент получает уже готовые данные, а не загружает огромные файлы.

🟠Легче разрабатывать и тестировать
Можно разрабатывать Frontend и Backend независимо.
Можно подменять сервер на mock-данные во время разработки.

🚩Как они общаются? (REST API & GraphQL)
Разделённые приложения общаются через API:
REST API (GET, POST, PUT, DELETE)
GraphQL API (запросы только нужных данных)
WebSockets (реальное время, чаты, онлайн-игры)
GET https://api.example.com/users


Ответ от Backend
[
{ "id": 1, "name": "Alice" },
{ "id": 2, "name": "Bob" }
]


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
🤔 Если у нас есть CSS, зачем существуют теги strong, center, etc?

Некоторые теги (strong, em) имеют семантический смысл — важны для SEO и доступности. Например, strong указывает на важность, а не только жирный стиль.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13👍4
🤔 Когда брать абсолютные величины а когда относительные?

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

🚩Абсолютные величины (например, px, pt, cm, in)

Имеют фиксированные размеры и не зависят от других элементов или размеров экрана. Они всегда остаются одинаковыми, независимо от контекста.

🚩Когда использовать

1⃣Пиксели (`px`)
Точные размеры: Когда вам нужно задать точные размеры элементов, например, для пиксельной точности в дизайне.
Фиксированные элементы: Для элементов, размеры которых не должны изменяться в зависимости от экрана или родительского элемента (например, логотипы или иконки).
Маленькие декоративные элементы: Когда размеры элементов настолько малы, что относительные единицы могут привести к неконтролируемому результату.
.logo {
width: 100px;
height: 50px;
}


🚩Относительные величины (например, %, em, rem, vw, vh)

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

🟠Проценты (`%`)
Адаптивные макеты: Когда нужно, чтобы элемент занимал определенный процент от размера родительского элемента.
Контейнеры и блоки: Для ширины и высоты блоков, которые должны изменяться вместе с размерами родителя.
.container {
width: 80%;
height: 50%;
}


🟠Эм (`em`)
Шрифты: Когда нужно задавать размер шрифта относительно размера шрифта родителя.
Внутренние отступы и поля: Для создания элементов, которые масштабируются вместе с текстом.
.text {
font-size: 1.2em;
margin: 1em;
}


🟠Рем (`rem`):
Глобальная консистентность: Когда нужно задавать размер относительно корневого элемента (обычно <html>), что обеспечивает более предсказуемое масштабирование.
Шрифты и отступы: Для элементов, которые должны быть пропорциональны базовому размеру шрифта
body {
font-size: 16px;
}

.header {
font-size: 2rem; /* 32px */
margin: 1rem; /* 16px */
}


🟠Вьюпорт (`vw`, `vh`):
Адаптивные размеры: Когда размеры элементов должны быть пропорциональны размеру вьюпорта (окна браузера).
Фоновые изображения и видео: Для элементов, которые должны занимать определенный процент от экрана.
.hero {
width: 100vw;
height: 100vh;
}


🚩Комбинированное использование

Иногда можно комбинировать абсолютные и относительные единицы для достижения наилучшего результата.
.container {
width: 80%; /* Относительная ширина */
padding: 20px; /* Абсолютный внутренний отступ */
}

.text {
font-size: 1.5rem; /* Относительный размер шрифта */
margin: 2em; /* Относительный внешний отступ */
}


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍12💊1
🤔 Что такое мутации (mutations) в Vuex?

Мутации — это единственный способ изменить данные в state. Они должны быть синхронными и простыми. Каждый раз, когда нужно поменять что-то в хранилище — например, добавить элемент в массив или изменить флаг — это делается через вызов мутации.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6
🤔 Что такое нечистая функция?

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

🚩Признаки нечистой функции

Зависит от внешнего состояния
Изменяет глобальные переменные
Вызывает побочные эффекты (запросы, изменения DOM, логирование, изменение переданных аргументов и т. д.)

🚩Примеры нечистых функций

Использует внешнюю переменную (зависит от внешнего состояния)
let count = 0;

function increment() {
count += 1;
return count;
}

console.log(increment()); // 1
console.log(increment()); // 2 (результат меняется при каждом вызове)


Модифицирует переданный аргумент
function addElement(arr, item) {
arr.push(item); // изменяет оригинальный массив
return arr;
}

let numbers = [1, 2, 3];
console.log(addElement(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3, 4] (исходный массив изменён)


Выполняет побочные эффекты (например, изменяет DOM)
function changeTitle(newTitle) {
document.title = newTitle;
}

changeTitle("Новая страница");
console.log(document.title); // "Новая страница"


Генерирует случайное значение
function getRandomNumber() {
return Math.random();
}

console.log(getRandomNumber()); // 0.37485647 (разный результат при каждом вызове)


🚩Чем отличается от чистой функции?
Чистая функция (pure function) всегда возвращает один и тот же результат при одинаковых входных данных и не изменяет внешние состояния.

Чистый вариант функции addElement() (не меняет исходный массив)
function addElementPure(arr, item) {
return [...arr, item]; // создаёт новый массив, не изменяя старый
}

let numbers = [1, 2, 3];
console.log(addElementPure(numbers, 4)); // [1, 2, 3, 4]
console.log(numbers); // [1, 2, 3] (исходный массив не изменился)


Ставь 👍 и забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8
🤔 Для чего нужны props?

Props — это механизм передачи данных между компонентами. Родитель передаёт данные дочернему компоненту через props.
Они позволяют:
- Делать компоненты гибкими и переиспользуемыми.
- Управлять поведением дочерних компонентов.
- Разделять логику отображения и данные.
Props неизменяемы — это защита от случайных изменений внутри компонентов.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥3