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

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Какое свойство CSS используется для управления загрузкой шрифта?
Anonymous Poll
26%
font-loading
36%
font-display
38%
font-style
0%
font-weight
🤔 Что такое DNS?

Это система доменных имен, которая переводит домены, понятные человеку (например, example.com), в IP-адреса серверов.

Ставь 👍 если знал ответ, 🔥 если нет.
🤔 Почему скрипты подключают в самом конце?

Подключение скриптов в конце позволяет:
- Загружать HTML-контент в первую очередь, что обеспечивает быструю отрисовку.
- Избежать блокировки загрузки страницы, так как браузер обрабатывает JavaScript синхронно.
- Позволяет скриптам работать с уже загруженным DOM.
Лучший вариант – использовать атрибут defer в теге script, чтобы скрипт загружался параллельно с HTML.

Ставь 👍, если знал ответ, 🔥 если нет.
🤔 Какое свойство и значение CSS используются для создания скроллбара в элементе, если его контент переполняет размер?
Anonymous Poll
59%
overflow: scroll;
4%
overflow: hidden;
41%
overflow: auto;
2%
overflow: visible;
🤔 Как свойства box-sizing влияют на размеры элемента?

- content-box – ширина и высота не учитывают отступы и границы.
- border-box – размер элемента включает отступы и границы, что делает верстку более предсказуемой.

Ставь 👍 если знал ответ, 🔥 если нет.
🤔 Какое CSS свойство позволяет контролировать интерполяцию значений свойств во время анимации для создания более плавного перехода эффектов?
Anonymous Poll
50%
transition-timing-function
16%
animation-timing
13%
frame-rate-control
25%
smooth-transition
🤔 Какое свойство CSS используется для установки внешних отступов элемента?
Anonymous Poll
13%
padding
2%
border
87%
margin
0%
spacing
🤔 Почему происходит перенаследование селекторов?

CSS-селекторы перенаследуются по следующим причинам:
- Каскадность – приоритет определяется порядком в файле.
- Специфичность – ID имеет больший приоритет, чем класс, а класс – больше, чем тег.
- Наследование – дочерние элементы могут унаследовать свойства своих родителей.

Ставь 👍 если знал ответ, 🔥 если нет.
🤔 Что вернёт следующий код: console.log("5" * 2);?
Anonymous Poll
63%
10
4%
"10"
14%
"52"
19%
Ошибка
Что такое state manager и с какими приходилось работать?

State manager — это инструмент или библиотека для управления состоянием приложения, особенно в сложных проектах с большим количеством взаимозависимых данных. Популярные state manager’ы включают Redux, MobX и Zustand для React-приложений, обеспечивающие централизованное хранение и управление состоянием. Они помогают структурировать данные, отслеживать их изменения и синхронизировать их между компонентами.

Ставь 👍 если знал ответ, 🔥 если нет.
🤔 Какое CSS свойство позволяет анимировать переходы состояний SVG-фильтров на элементе?
Anonymous Poll
22%
filter-animation
44%
transition-filter
25%
animate-filter
9%
filter
🤔 Какое CSS свойство позволяет элементу быть позиционированным в трехмерном пространстве?
Anonymous Poll
8%
transform-style
26%
perspective
41%
3d-transform
28%
transform
🤔 Как функционируют вычисляемые свойства?

- При первом запросе запускается функция, и результат сохраняется.
- Если изменяются зависимости, свойство помечается как «грязное», и при следующем запросе происходит пересчет.
- Это используется для оптимизации, чтобы не выполнять вычисления каждый раз, как в случае с методами.
Важно: вычисляемые свойства не вызывают побочных эффектов, их задача — вычислять значения, а не «что-то делать».

Ставь 👍, если знал ответ, 🔥 если нет. Забирай 📚
🤔 Какое свойство CSS используется для добавления тени к тексту?
Anonymous Poll
83%
text-shadow: 2px 2px 2px #000;
15%
font-shadow: 2px 2px #000;
5%
text-outline: 2px #000;
0%
letter-shadow: 2px 2px #000;
🤔 Какой метод JavaScript API позволяет асинхронно запрашивать доступ к медиа устройствам, таким как камеры или микрофоны?
Anonymous Poll
18%
navigator.getMedia()
50%
navigator.mediaDevices.getUserMedia()
26%
MediaStream.requestAccess()
9%
DeviceRequest.getAccess()
🤔 Почему необходим Redux?

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

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой оператор выполняет побитовое ИЛИ в JavaScript?
Anonymous Poll
2%
&
91%
|
5%
^
2%
~
🤔 Какой метод JavaScript позволяет отменить действие, назначенное ранее с setTimeout()?
Anonymous Poll
76%
clearTimeout()
4%
undoTimeout()
16%
resetTimeout()
4%
stopTimeout()
🤔 Как выровнять блок по центру как по горизонтали, так и по вертикали?

Можно применить flexbox (justify-content: center и align-items: center), grid или использовать свойства position с transform: translate.

Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚
🤔 Какое свойство CSS используется для определения пространства между границей и контентом элемента?
Anonymous Poll
82%
padding;
11%
margin;
4%
border-space;
5%
content-spacing;