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

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Какие факты известны об асинхронности в JavaScript?

Асинхронность достигается с помощью:
- Event Loop;
- Callbacks;
- Promises;
- async/await.
JavaScript работает в одном потоке, но способен выполнять операции без блокировки благодаря асинхронной модели и очереди задач. Это особенно важно при работе с сетью, таймерами и вводом-выводом.

Если знаешь ответ, ставь 👍, если нет — 🔥
Забирай 📚
🤔 Какой метод JavaScript используется для преобразования строки в число с плавающей точкой?
Anonymous Poll
10%
parseInt()
6%
Number()
73%
parseFloat()
10%
toFloat()
🤔 Какой метод JavaScript обеспечивает преобразование объектов и массивов в структурированный, строковый формат JSON?
Anonymous Poll
71%
JSON.stringify()
20%
JSON.parse()
4%
JSON.convert()
5%
Object.toJSON()
🤔 В каком месте EventLoop располагаются макро- и микро- задачи?

В JavaScript EventLoop управляет порядком выполнения задач:
- Микротаски (microtasks) выполняются сразу после завершения текущего стека вызовов, перед началом выполнения макротасков. К ним относятся:
- Promise.then
- MutationObserver
- queueMicrotask
- Макротаски (macrotasks) помещаются в очередь и запускаются после выполнения всех микротасков. Сюда входят:
- setTimeout, setInterval
- setImmediate (в Node.js)
- I/O события
- события DOM
Поэтому микротаски имеют более высокий приоритет по сравнению с макротасками.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой HTML атрибут позволяет определить, что элемент должен быть скрыт до тех пор, пока не будет активирован пользовательским действием или программно?
Anonymous Poll
63%
hidden
14%
invisible
21%
display
2%
deferred
🤔 Какой метод JavaScript позволяет создавать массивы с уникальными значениями?
Anonymous Poll
20%
Array.unique()
7%
Array.distinct()
57%
Set()
15%
Map()
🤔Какие шаги необходимо выполнить, чтобы изменить данные в хранилище Redux?

• Создать action, который объясняет, какие изменения должны произойти в состоянии.
• Написать reducer, который принимает текущее состояние и action, а затем возвращает обновлённое состояние.
• Использовать dispatch для отправки action в хранилище, чтобы reducer мог обработать действие и обновить состояние.

Поставь 👍 если знаешь ответ, 🔥 если нет.
Забирай 📚
🤔 Какой метод JavaScript применяется для добавления события к элементу?
Anonymous Poll
91%
addEventListener()
5%
attachEvent()
4%
onEvent()
0%
bindEvent()
🤔 Какое CSS свойство используется для создания маски изображения, определяющей видимость определенных областей элемента?
Anonymous Poll
18%
clipping-mask
42%
mask-image
12%
alpha-mask
27%
image-clip
🤔 Какие преимущества даёт методология BEM?

Она облегчает создание и сопровождение CSS. Благодаря строгой системе имен классов код становится модульным, понятным и легко расширяемым.

Ставь 👍 если ответ знаешь, 🔥 если нет
Забирай 📚
🤔 Какое CSS-свойство используется для создания гибкого контейнера, который автоматически адаптируется к размеру его содержимого?
Anonymous Poll
11%
display: grid
28%
display: inline-block
62%
display: flex
2%
display: block
🤔 Что означает свойство valueAsNumber?

Это свойство используется у элементов input с типом "number", оно позволяет получить или установить значение в виде числа, а не строки. Это удобно при выполнении математических операций с числовыми данными.

Если ты знал ответ, поставь 👍, если нет — 🔥
Забирай 📚
🤔 Какое свойство CSS обеспечивает динамическое изменение макета страницы при изменении условий окружающей среды, таких как ориентация устройства или размер окна, без использования JavaScript или медиа-запросов?
Anonymous Poll
7%
environment-styles
45%
adaptive-layout
21%
env()
28%
container-queries
🤔 Для чего нужна семантика?

Семантическая разметка помогает улучшить:
- SEO – поисковые системы легче воспринимают содержимое (, , и так далее).
- Доступность (Accessibility) – способствует тому, чтобы экранные читалки лучше понимали назначение элементов.
- Читаемость кода – облегчает поддержку и понимание структуры.

Ставь 👍, если знал ответ, 🔥, если не знал.
Забирай 📚
🤔 Какое CSS свойство позволяет создать эффект, при котором текст появляется через плавающее прозрачное окно?
Anonymous Poll
34%
text-reveal
26%
mask-image
34%
clip-path
13%
window-text
🤔 Какое значение свойства CSS animation-timing-function создает анимацию с плавным началом и концом?
Anonymous Poll
14%
linear
67%
ease
17%
ease-in
8%
ease-out
🤔 Что такое вендорные префиксы?

Это специальные добавки к CSS-свойствам, которые применяются для поддержки нестандартных или экспериментальных функций в различных браузерах. Например:
- -webkit- используется в Chrome и Safari;
- -moz- применяется в Firefox;
- -ms- используется в Internet Explorer.

Ставь 👍, если знал ответ, 🔥, если нет.
Забирай 📚
🤔 Какой метод JavaScript используется для создания асинхронного итератора, который позволяет итерироваться по значениям с задержкой?
Anonymous Poll
37%
asyncGenerator()
31%
asyncIterator()
11%
asyncIterable()
20%
asyncSequence()
🤔 Какой атрибут HTML используется для определения программной политики, которая управляет поведением внешних ресурсов на веб-странице?
Anonymous Poll
39%
content-policy
3%
csp
16%
policy-control
45%
content-security-policy
🤔 Какие новые элементы форм появились в HTML5?

- список вариантов для автозаполнения;
- отображение результатов вычислений;
- индикатор выполнения процесса;
- измерительная шкала;
- новые типы input: email, tel, url, number, range, date, color и другие.

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