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

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Зачем в HTML5 введены события Server-Sent Events?

SSE (Server-Sent Events) позволяют одностороннюю передачу данных от сервера к клиенту через открытое соединение. Это альтернатива WebSocket'ам, когда клиенту нужно просто "слушать" события от сервера.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой тип CSS-свойства background-clip определяет, что фон будет ограничен контентом элемента?
Anonymous Poll
24%
border-box
5%
padding-box
71%
content-box
0%
margin-box
🤔 Какие есть способы центрирования через inline-block?

Можно задать text-align: center родителю и сделать элемент display: inline-block. Это работает как с текстом, так и с визуальными элементами.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript используется для удаления первого элемента из массива?
Anonymous Poll
3%
push()
19%
pop()
41%
shift()
38%
unshift()
🤔 Как происходит взаимодействие клиентов и сервера?

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

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

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

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

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой атрибут у <input> указывает на то, какой тип данных ожидается в поле?
Anonymous Poll
85%
type
3%
inputmode
0%
format
12%
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
62%
Math.round(7.25);
15%
Math.floor(7.25);
8%
Math.ceil(7.25);
15%
Number.round(7.25);
🤔 Что делает и для чего нужна функция Function.prototype.bind?

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

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

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

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

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript может быть использован для асинхронной загрузки скрипта и возврата промиса, когда скрипт выполнен?
Anonymous Poll
25%
import()
4%
System.import()
54%
require.async()
17%
loadScript()
🤔 Какое значение будет в переменной e после выполнения следующего кода?
let e = "JavaScript"; e = e.replace(/a/g, "o");
Anonymous Poll
27%
"JavaScript"
53%
"JovoScript"
13%
"JavoScript"
7%
"JovaScript"