FrontendQuiz - задачи с собеседований по фронтенду
1.72K subscribers
244 photos
2 videos
2 files
161 links
Задачки для фронтендщиков:
алгоритмы, регулярные выражения, вопросы с интервью, задачи для Junior Frontend и разбор их решения.

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Как происходит взаимодействие клиентов и сервера?

Клиент отправляет HTTP-запрос на сервер. Сервер обрабатывает запрос, возможно, обращается к базе данных или другим сервисам, и возвращает ответ. Веб-браузеры, мобильные и другие приложения работают по такому принципу.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Что такое псевдоклассы?

Псевдоклассы в CSS используются для определения специальных состояний элементов. Например, :hover применяется к элементам, когда пользователь наводит на них курсор, а :first-child выбирает первый дочерний элемент в своем контейнере.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript используется для создания нового объекта на основе существующего прототипа?
Anonymous Poll
59%
Object.create
14%
Object.extend
36%
Object.fromPrototype
5%
Object.base
🤔 Разным ролям нужно по-разному предоставить dataset. Как бы это сделал?

- Через разграничение прав (RBAC) — фильтровать данные на сервере в зависимости от роли пользователя.
- Использовать view-модели или DTO, в которых отфильтровано содержимое.
- Настроить фильтрацию SQL-запросов (например, WHERE role = ?).
- В UI можно скрывать/показывать поля, но не полагаться только на фронт.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой атрибут у <input> указывает на то, какой тип данных ожидается в поле?
Anonymous Poll
88%
type
3%
inputmode
0%
format
9%
datatype
🤔 Что такое прогрессивный рендеринг?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой CSS селектор наиболее подходит для выбора первого <p> элемента в каждом <section>, который следует непосредственно за заголовками <h2>?
Anonymous Poll
14%
h2 + p
10%
section > p
29%
h2 + section > p
48%
section h2 + p
🤔 Что такое Composition API в Vue 3?

Новый способ работы с состоянием и логикой в Vue 3. Он использует setup() вместо data, methods и computed. Позволяет лучше структурировать код, переиспользовать логику (через composables) и удобнее работать с TypeScript.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое CSS свойство позволяет элементу занимать максимально доступное пространство по вертикали?
Anonymous Poll
12%
height: auto
24%
max-height: 100%
56%
height: 100%
8%
flex-grow: 1
🤔 Как в JavaScript правильно округлить число 7.25 до ближайшего целого числа?
Anonymous Poll
60%
Math.round(7.25);
16%
Math.floor(7.25);
8%
Math.ceil(7.25);
16%
Number.round(7.25);
🤔 Что делает и для чего нужна функция Function.prototype.bind?

Метод bind позволяет создать новую функцию с жёстко привязанным контекстом (this) и при необходимости — предустановленными аргументами. Полезен при передаче методов в колбэки, где может потеряться контекст.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой JavaScript API предоставляет методы для манипуляции размерами и положением окон браузера?
Anonymous Poll
36%
Document Object Model (DOM)
48%
Browser Object Model (BOM)
16%
Console API
0%
XMLHttpRequest
🤔 Какой метод массива JavaScript создает новый массив с результатами вызова указанной функции для каждого элемента массива?
Anonymous Poll
15%
filter()
70%
map()
19%
reduce()
0%
reduce()
🤔 Какие теги практически обязательно должны быть в ?

- — кодировка;
- — адаптивность;
- — название страницы;
- — стили;
- — описание страницы;
- — управление индексацией.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Назови инструменты, которые использовал для написания асинхронных вызовов.

- Promise
- async/await
- Fetch API
- Axios
- setTimeout / setInterval
- WebSocket — для real-time;
- AbortController — для отмены.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript может быть использован для асинхронной загрузки скрипта и возврата промиса, когда скрипт выполнен?
Anonymous Poll
27%
import()
5%
System.import()
50%
require.async()
18%
loadScript()
🤔 Какое значение будет в переменной e после выполнения следующего кода?
let e = "JavaScript"; e = e.replace(/a/g, "o");
Anonymous Poll
23%
"JavaScript"
54%
"JovoScript"
15%
"JavoScript"
8%
"JovaScript"
🤔 В чём разница между JS и Python?

- JS работает в браузере, Python — нет (но применяется на сервере);
- Синтаксис и принципы ООП разные;
- JS однопоточен (с Event Loop), Python — с GIL;
- JS популярен для frontend, Python — в data science, ML, backend.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое свойство CSS позволяет элементам не учитывать определенные границы при позиционировании?
Anonymous Poll
18%
margin-collapse
27%
border-ignore
18%
outline-offset
36%
margin-offset
🤔 Как происходит работа с задачами в проекте?

Обычно работа с задачами организуется через систему управления проектами (например, Jira, YouTrack, Trello, GitLab Issues). Основные этапы:
1. Постановка задачи — задача формализуется, описывается бизнес-требование, сценарии, критерии приёмки.
2. Груминг — задача уточняется командой, разбивается на подзадачи, оценивается по трудозатратам (story points, часы).
3. Разработка — задача берётся в работу, создаётся ветка в Git, ведётся разработка.
4. Код-ревью и тестирование — изменения проверяются через pull/merge request, автоматические и ручные тесты.
5. Деплой и закрытие — задача закрывается после успешного тестирования и релиза.
Также может использоваться Scrum или Kanban: с планированием спринтов, доской задач и ежедневными стендапами.

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