Frontend | Вопросы собесов
18.2K subscribers
39 photos
3 videos
1.47K links
Сайт: https://easyoffer.ru/
Все каналы: t.me/+xGeAw6ckJ4liYzQy

Контакт для рекламы: @easyoffer_adv
Download Telegram
🤔 Что можно использовать при написании JS-кода в рамках JSX?

- Переменные и выражения;
- Вызовы функций;
- Условные конструкции через тернарный оператор;
- Метод .map() для вывода списков;
- Логические выражения (&&).


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍5🔥3
🤔 Как реализовать адаптивную верстку?

Адаптивная верстка (responsive design) – это метод создания веб-страниц, которые корректно отображаются на разных устройствах (телефон, планшет, ноутбук, ПК).

🟠Гибкие сетки (Flexbox, Grid, `max-width`)
Использование max-width вместо width
.container {
width: 100%; /* Контейнер занимает всю ширину */
max-width: 1200px; /* Но не больше 1200px */
margin: auto; /* Центрирование */
}


Использование Flexbox
.container {
display: flex;
flex-wrap: wrap; /* Перенос элементов, если не влезают */
justify-content: space-between;
}

.item {
width: 48%; /* Два элемента в ряд */
}

@media (max-width: 768px) {
.item {
width: 100%; /* Один элемент в ряд на маленьких экранах */
}
}


Использование CSS Grid
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}


🟠Медиа-запросы (`@media`)
Изменяют стили в зависимости от ширины экрана.
/* Десктоп (от 1024px) */
body {
font-size: 18px;
}

/* Планшеты (768px – 1023px) */
@media (max-width: 1023px) {
body {
font-size: 16px;
}
}

/* Телефоны (до 767px) */
@media (max-width: 767px) {
body {
font-size: 14px;
}
}


🟠Адаптивные изображения (`srcset`, `sizes`)
Позволяет загружать разные изображения в зависимости от устройства.
<img 
src="image-400.jpg"
srcset="image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="Адаптивное изображение">


🟠Viewport (`meta viewport`)
Управляет масштабированием на мобильных устройствах.
<meta name="viewport" content="width=device-width, initial-scale=1">


🟠CSS-фреймворки (Bootstrap, Tailwind)
Фреймворки содержат готовые адаптивные классы.
Bootstrap (грид-система)
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12">Контент</div>
<div class="col-md-6 col-sm-12">Контент</div>
</div>
</div>


Tailwind CSS
<div class="grid grid-cols-2 md:grid-cols-3 sm:grid-cols-1 gap-4">
<div class="bg-blue-500">1</div>
<div class="bg-green-500">2</div>
<div class="bg-red-500">3</div>
</div>


Ставь 👍 и забирай 📚 Базу знаний
👍8
🤔 Зачем нужен хеш в названиях файлов (на примере Vue CLI)?

- Например: app.4f3e1a.js
- Если файл меняется — хеш меняется.
- Браузер получает новый файл, обходит кеш.
Это способ кеш-инвалидации — позволяет пользователям всегда получать актуальные файлы.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍3🔥1🤔1
🤔 Что произойдет если мы напишем невалидную разметку?

Если в HTML-документе будет невалидная разметка, браузер всё равно попытается её обработать и отобразить страницу, но возможны различные неожиданные ошибки и баги. Давайте разберём, что может пойти не так.

🚩Что делает браузер с невалидным HTML?

Когда браузер сталкивается с ошибками в разметке, он использует механизм исправления ошибок (HTML Parser Error Handling). Это означает, что:
Браузер автоматически исправит некоторые ошибки (например, добавит закрывающий тег).
Некоторые элементы могут быть проигнорированы или отображены некорректно.
CSS и JavaScript могут работать неправильно из-за ошибки в DOM-структуре.

🚩Примеры ошибок и их последствия

Отсутствие закрывающего тега
<p>Привет, мир!
<p>Это новый абзац?


Вложенность тегов в неправильных местах
<p>Текст <div>Блок внутри абзаца</div></p>


По спецификации <div> нельзя вкладывать в <p>, браузер может вынести <div> за пределы абзаца.
Итоговый HTML может быть таким:
<p>Текст </p>
<div>Блок внутри абзаца</div>


🟠Отсутствие `DOCTYPE`

Если не указать <!DOCTYPE html>, браузер может перейти в режим совместимости (Quirks Mode), что приведёт к некорректному отображению стилей.
Неправильные атрибуты в тегах
<img src="image.jpg" alt="Картинка" wrongAttr="что это?">


Незакрытые теги в таблице
<table>
<tr>
<td>Ячейка 1
<td>Ячейка 2
</tr>
</table>


Ставь 👍 и забирай 📚 Базу знаний
👍7
🤔 Что такое inline-block?

Это значение CSS-свойства display, при котором элемент ведёт себя как строчный, но сохраняет возможность задавать ширину и высоту, как блочный. Это удобно для создания адаптивных интерфейсов.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍11
🤔 Как общаться между iframe и самой страницой?

Общение между iframe и родительской страницей может происходить с помощью:
Метода postMessage (лучший способ)
Доступа к window.frames или window.parent (если тот же домен)
Передачи данных через localStorage или cookies

🟠`postMessage` – безопасный способ для разных доменов
Метод window.postMessage() позволяет передавать сообщения между разными окнами (iframe, popup, другие вкладки) даже если они на разных доменах.

🚩Передача данных из `iframe` в родительскую страницу

*Код в iframe (child.html)
// Отправляем сообщение родительскому окну
window.parent.postMessage({ type: "hello", data: "Привет, родитель!" }, "*");


Код в родительской странице (index.html)
window.addEventListener("message", (event) => {
console.log("Получено сообщение от iframe:", event.data);
});


* в postMessage означает, что сообщение отправляется любому домену. Лучше указывать конкретный, например:
window.parent.postMessage({ type: "hello" }, "https://example.com");


🚩Передача данных из родителя в `iframe`

Код в родительской странице (index.html)
const iframe = document.getElementById("myIframe");

// Ждём, когда iframe загрузится
iframe.onload = () => {
iframe.contentWindow.postMessage({ type: "greeting", data: "Привет, iframe!" }, "*");
};


Код в iframe (child.html)
window.addEventListener("message", (event) => {
console.log("Получено сообщение от родителя:", event.data);
});


🚩Доступ к `window.frames` и `window.parent` (только если тот же домен!)

Если iframe и основная страница находятся на одном домене, можно обращаться к их window напрямую.
Родительская страница → iframe
const iframe = document.getElementById("myIframe");

// Получаем объект `window` внутри `iframe`
iframe.contentWindow.document.body.style.backgroundColor = "lightblue";


iframe → Родительская страница
console.log(window.parent.document.title); // Доступ к заголовку страницы


🚩`localStorage` или `cookies` (если оба окна на одном домене)

Можно сохранять данные в localStorage или cookies, а другая сторона будет их читать.
Запись в localStorage из iframe
localStorage.setItem("message", "Привет от iframe!");


Чтение localStorage в родительской странице
console.log(localStorage.getItem("message")); // "Привет от iframe!"


Ставь 👍 и забирай 📚 Базу знаний
👍6🔥1💊1
🤔 Как между собой связаны HTML, CSS и JS

HTML задаёт структуру, CSS отвечает за внешний вид, JS — за динамическое поведение. Они взаимодействуют через DOM: JS может читать и изменять HTML и CSS.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍14💊5
🤔 К какой категории относятся промисы?

Промисы (Promise) относятся к асинхронным объектам, реализующим паттерн "Promise". Они позволяют работать с отложенными и асинхронными операциями (например, сетевые запросы, таймеры, операции с файлами).

Категория: Асинхронные программные конструкции (Async Objects / Async Patterns)
Тип: Объект (Promise Object)*
Используются в: Асинхронном программировании (Async/Await, then/catch)

🚩Почему промисы – асинхронная конструкция?

Промисы не выполняются сразу, а ждут завершения операции, после чего выполняют код в .then() или .catch().
const fetchData = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Данные загружены!"); // Успех
}, 2000);
});

fetchData.then(data => console.log(data));


🚩Promise – это не просто колбэк

До появления Promise в JavaScript использовались колбэки, но они приводили к "callback hell".
function fetchData(callback) {
setTimeout(() => {
callback("Данные загружены!");
}, 2000);
}

fetchData(data => console.log(data));


Решение с Promise
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));


Ставь 👍 и забирай 📚 Базу знаний
👍6💊1
🤔 Что такое falsy значения?

Это значения, которые при приведении к булевому типу становятся false.
1. Примеры: 0, '' (пустая строка), null, undefined, NaN, false.
2. Они полезны для проверки в логических операциях и условиях.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍12🔥1
🤔 Как передать данные из родительского компонента в дочерний?

Передача данных из родительского компонента в дочерний компонент — это одна из основных задач в работе с компонентами в React. Это делается с помощью пропсов (props). Пропсы — это способ передачи данных и событий от родительского компонента к дочернему.

🚩Шаги для передачи данных из родительского компонента в дочерний

1⃣Создание родительского компонента
В родительском компоненте мы создаем состояние или просто определяем данные, которые хотим передать.
Затем передаем эти данные в дочерний компонент через пропсы.

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

Родительский компонент (ParentComponent.js)
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
const message = "Привет, дочерний компонент!";

return (
<div>
<h1>Родительский компонент</h1>
<ChildComponent message={message} />
</div>
);
}

export default ParentComponent;


Дочерний компонент (ChildComponent.js)
import React from 'react';

function ChildComponent(props) {
return (
<div>
<h2>Дочерний компонент</h2>
<p>{props.message}</p>
</div>
);
}

export default ChildComponent;


🚩Пояснение

1⃣В родительском компоненте `ParentComponent`:
Создаем переменную message, содержащую строку "Привет, дочерний компонент!".
В JSX разметке мы рендерим дочерний компонент ChildComponent, передавая ему пропс message со значением переменной message.

2⃣В дочернем компоненте ChildComponent:
Принимаем пропс message через параметр props.
Используем props.message для отображения переданной строки внутри тега <p>.

🚩Дополнительные примеры

Родительский компонент (ParentComponent.js)
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
const user = {
name: "Иван",
age: 25
};

return (
<div>
<h1>Родительский компонент</h1>
<ChildComponent user={user} />
</div>
);
}

export default ParentComponent;


Дочерний компонент (ChildComponent.js)
import React from 'react';

function ChildComponent(props) {
return (
<div>
<h2>Дочерний компонент</h2>
<p>Имя: {props.user.name}</p>
<p>Возраст: {props.user.age}</p>
</div>
);
}

export default ChildComponent;


Ставь 👍 и забирай 📚 Базу знаний
👍9
🤔 Что такое CDN?

CDN (Content Delivery Network) — это сеть распределённых серверов, которая хранит копии статических ресурсов (изображения, стили, скрипты) и предоставляет их пользователям с ближайшего к ним узла.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🔥8👍4
🤔 Как браузер понимает что ресурс нужно закешировать?

Браузер использует HTTP-заголовки и механизмы кэширования, чтобы решить, нужно ли сохранять ресурс (HTML, CSS, JS, изображения) и как долго его хранить.

🚩Как браузер решает, кешировать ресурс или нет?

Когда браузер загружает ресурс, сервер может сказать браузеру, как его кешировать, с помощью HTTP-заголовков.
HTTP/1.1 200 OK
Cache-Control: max-age=3600, public
ETag: "abc123"


🚩Как работают заголовки кэширования?

🟠`Cache-Control` – главный заголовок
Определяет, как долго ресурс должен храниться в кэше.
Cache-Control: max-age=86400, public


🟠`Expires` – устаревший, но ещё используется
Определяет конкретную дату, до которой браузер может использовать кэшированный ресурс.
Expires: Wed, 26 Feb 2025 12:00:00 GMT


🟠`ETag` – проверка обновлений ресурса
Позволяет браузеру узнать, изменился ли файл на сервере.
ETag: "abc123"


Если браузер снова запрашивает ресурс, он отправляет заголовок
If-None-Match: "abc123"


🟠`Last-Modified` – альтернатива `ETag`
Дата последнего изменения ресурса.
Last-Modified: Tue, 25 Feb 2025 15:30:00 GMT


Браузер может отправить запрос с
If-Modified-Since: Tue, 25 Feb 2025 15:30:00 GMT


Ставь 👍 и забирай 📚 Базу знаний
👍3
🤔 Какой метод запускает проигрывание аудио-файла?

Для воспроизведения используется метод play(), вызываемый на элементе <audio> или объекте, созданном через JavaScript.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🔥5👍3
🤔 Как определить что состояние является глобальным?

Глобальное состояние – это данные, которые должны быть доступны в разных частях приложения. Чтобы определить, является ли состояние глобальным, нужно задать себе несколько вопросов:

🚩Используется ли это состояние в нескольких независимых компонентах?

Если одно и то же состояние необходимо сразу нескольким компонентам, расположенным в разных частях дерева компонентов, скорее всего, его стоит сделать глобальным. В React, если в разных компонентах нужна информация о текущем пользователе (user), лучше хранить её в глобальном состоянии (например, в Context или Redux).
// Глобальное состояние (например, Context API)
const UserContext = createContext();

function App() {
const [user, setUser] = useState({ name: "Иван", isLoggedIn: true });

return (
<UserContext.Provider value={user}>
<Navbar />
<Profile />
</UserContext.Provider>
);
}

function Navbar() {
const user = useContext(UserContext);
return <div>Привет, {user.name}!</div>;
}

function Profile() {
const user = useContext(UserContext);
return <div>Профиль пользователя: {user.name}</div>;
}


🚩Должно ли состояние сохраняться при переходе между страницами?

Если данные должны оставаться неизменными при смене страниц, лучше использовать глобальное хранилище (например, Redux, Zustand или React Context). Корзина товаров в интернет-магазине
Авторизация пользователя
Темная/светлая тема приложения
Если данные теряются при смене страницы – это сигнал, что их нужно вынести в глобальное хранилище.

🚩Может ли состояние изменяться в одном месте, а использоваться в другом?

Если одно состояние обновляется в одном компоненте, но влияет на работу нескольких других компонентов, оно должно быть глобальным. В чате, если новое сообщение приходит в одном компоненте (ChatInput), а отображается в другом (ChatList), логично хранить все сообщения в глобальном состоянии.
const ChatContext = createContext();

function ChatProvider({ children }) {
const [messages, setMessages] = useState([]);

const sendMessage = (text) => {
setMessages([...messages, { text, id: Date.now() }]);
};

return (
<ChatContext.Provider value={{ messages, sendMessage }}>
{children}
</ChatContext.Provider>
);
}

function ChatList() {
const { messages } = useContext(ChatContext);
return messages.map((msg) => <p key={msg.id}>{msg.text}</p>);
}

function ChatInput() {
const { sendMessage } = useContext(ChatContext);
const [text, setText] = useState("");

return (
<input
value={text}
onChange={(e) => setText(e.target.value)}
onKeyPress={(e) => {
if (e.key === "Enter") {
sendMessage(text);
setText("");
}
}}
/>
);
}


🚩Зависит ли состояние от URL (адресной строки)?

Иногда состояние можно не делать глобальным, а просто хранить его в URL (в query-параметрах или path).
ID открытого товара: /products/123
Фильтры товаров: /shop?category=shoes&sort=price
Страница чата с пользователем: /chat?user=ivan

Ставь 👍 и забирай 📚 Базу знаний
👍7
🤔 Дай пояснение, для какой цели добавлены следующие элементы.

article, aside, audio, canvas, figcaption, figure, footer, header, hgroup, output, section, video
- article — самодостаточный, независимый фрагмент контента (пост, новость).
- aside — боковое или дополнительное содержимое (сайдбар, заметка).
- audio — встроенный аудиоплеер, проигрывает звук.
- canvas — холст для динамической графики, рисования.
- figcaption — подпись к изображению или другой визуализации в <figure>.
- figure — контейнер для самостоятельного медиаконтента с подписью (графики, схемы).
- footer — нижний блок страницы или раздела, часто содержит навигацию, контакты.
- header — верхний блок, заголовки, логотип, меню.
- hgroup — группировка заголовков (например, h1 и h2 вместе как один логический блок).
- output — отображение результата (например, вычислений в формах).
- section — логический блок документа (тема, раздел).
- video — встроенный видеоплеер, воспроизводит видео.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
💊7👍3🔥3
🤔 Что такое элемент datalist в html 5?

<datalist> — это тег в HTML5, который позволяет создать выпадающий список вариантов для <input>. Он помогает пользователям быстрее вводить данные, предлагая автодополнение, но в отличие от <select>, список остаётся необязательным — пользователь может ввести своё значение.

🚩Как работает `<datalist>`?

Пример: автодополнение города
<label for="city">Выберите город:</label>
<input list="cities" id="city" name="city">

<datalist id="cities">
<option value="Москва">
<option value="Санкт-Петербург">
<option value="Казань">
<option value="Новосибирск">
</datalist>


🚩Можно ли использовать с `type="number"`?

Нет, <datalist> не работает с type="number".
Но с type="text" и type="email" — работает отлично.
<input type="number" list="numbers">
<datalist id="numbers">
<option value="10">
<option value="20">
</datalist>


Рабочий вариант
<input type="text" list="numbers">


Ставь 👍 и забирай 📚 Базу знаний
👍6🔥1
🤔 Примеры того, что можно использовать в useEffect помимо запросов на сервер:

- Слежение за размерами окна (event listener);
- Установка таймера или интервала;
- Работа с локальным хранилищем (localStorage);
- Изменение мета-тегов или заголовков документа;
- Анимации, интеграции с библиотеками (например, chart.js).


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
🔥3👍1
🤔 Является ли, drag and drop частью спецификации?

Да! Drag and Drop (перетаскивание) — это часть спецификации HTML5. В браузерах есть встроенный API, который позволяет делать перетаскивание элементов без дополнительных библиотек.

🚩Как работает Drag and Drop API?

В HTML5 можно сделать элемент перетаскиваемым, добавив ему атрибут draggable="true". Затем срабатывают специальные события, такие как dragstart, drop, dragover и другие.
<div id="drag-item" draggable="true">Перетащи меня</div>
<div id="drop-zone">Сюда можно сбросить</div>

<script>
const dragItem = document.getElementById("drag-item");
const dropZone = document.getElementById("drop-zone");

dragItem.addEventListener("dragstart", (event) => {
event.dataTransfer.setData("text/plain", "Данные элемента");
});

dropZone.addEventListener("dragover", (event) => {
event.preventDefault(); // Нужно, чтобы разрешить сброс
});

dropZone.addEventListener("drop", (event) => {
event.preventDefault();
const data = event.dataTransfer.getData("text/plain");
alert("Элемент сброшен: " + data);
});
</script>


🚩Какие события есть в Drag and Drop?

Основные события:
dragstart — когда начали тянуть элемент.
drag — когда элемент двигается (срабатывает много раз).
dragenter — когда курсор заходит в зону сброса.
dragover — когда элемент находится над зоной (нужно preventDefault()).
dragleave — когда курсор покидает зону сброса.
drop — когда элемент отпущен в зоне сброса.
dragend — когда перетаскивание завершено (даже если не сбросили).

🚩Где используется Drag and Drop?

- Перетаскивание файлов в <input type="file"> (например, загрузка изображений).
- Канбан-доски, как в Trello.
- Онлайн-редакторы, как Figma.
- Игры, где можно перемещать предметы.

🚩Можно ли сделать Drag and Drop без HTML5 API?


Да, можно использовать другие методы:
Через события мыши (mousedown, mousemove, mouseup).
Через CSS position: absolute и transform.
Через JS-библиотеки (Sortable.js, React DnD, Draggable.js).
Например, в мобильных браузерах стандартный Drag and Drop API плохо работает, и там лучше использовать события touchstart, touchmove, touchend.

Ставь 👍 и забирай 📚 Базу знаний
👍3
🤔 Что мы можем делать с помощью DevTools браузера?

- Инспектировать и изменять DOM/CSS;
- Смотреть сетевые запросы (Network);
- Отлаживать JS-код (Sources, breakpoints);
- Анализировать производительность;
- Проверять доступность и рендеринг;
- Смотреть localStorage, cookies и др.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍4
🤔 Как понимают изменение состояния 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"


Ставь 👍 и забирай 📚 Базу знаний
👍2
🤔 Какие методы HTTP-запросов есть?

1. GET: Получение данных с сервера.
2. POST: Отправка данных на сервер.
3. PUT: Полное обновление ресурса.
4. PATCH: Частичное обновление ресурса.
5. DELETE: Удаление ресурса.
6. HEAD: Получение заголовков ответа без тела.
7. OPTIONS: Получение информации о поддерживаемых методах.
8. CONNECT, TRACE: Используются реже для специальных задач.


Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний
👍6🔥1