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

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Что такое экшен?

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

Ставь 👍 если знал ответ, 🔥 если нет.
🤔 Какой JavaScript метод предоставляет возможность выполнения асинхронных запросов к серверу, отправляя данные без необходимости перезагрузки страницы?
Anonymous Poll
27%
XMLHttpRequest.send()
64%
fetch()
2%
navigator.sendBeacon()
11%
asyncRequest()
🤔
Какое свойство CSS задаёт пространственное поведение скроллируемых элементов, позволяя создать "прилипающий" или "плавающий" эффект при прокрутке?
Anonymous Poll
9%
overflow-behavior
12%
scroll-behavior
76%
position: sticky
3%
float-scroll
🤔 Какие существуют способы реализации двустороннего связывания для input?

Двустороннее связывание можно осуществить:
- В React: с помощью useState и onChange.
- В Vue 2: используя v-model, что упрощает работу с input.
- В Vue 3: также с v-model, но с возможностью именованных привязок.
- В Angular: через [(ngModel)].
- В чистом JavaScript: с использованием addEventListener и value.
Это нужно для синхронизации пользовательского ввода с состоянием.

Ставь 👍 если знал ответ, 🔥 если нет.
🤔 Какое свойство CSS задает минимальный размер содержимого элемента?
Anonymous Poll
42%
min-size
38%
min-content
9%
content-size
11%
min-length
🤔 Какой HTML атрибут устанавливает контроль над способностью элемента к получению фокуса?
Anonymous Poll
44%
focusable
49%
tabindex
13%
focus-index
0%
accesskey
🤔 Что представляет собой Composition API в Vue 3?

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

Ставь 👍 если знал ответ, 🔥 если нет.
🤔 Какое свойство CSS задает границу вокруг элементов без изменения размера бокса?
Anonymous Poll
40%
border
62%
outline
2%
edge
2%
frame
🤔 Какие есть методы, которые изменяют массив?

Методы, которые изменяют массив:
- push(), pop() – добавляют или удаляют элементы в конце.
- shift(), unshift() – добавляют или удаляют элементы в начале.
- splice() – удаляет, добавляет или заменяет элементы.
- sort() – сортирует массив на месте.
- reverse() – меняет порядок элементов.
- fill() – заполняет массив одинаковыми значениями.
Методы, которые не изменяют массив (map(), filter(), slice(), concat(), reduce()), возвращают новый массив.

Ставь 👍, если знал ответ, 🔥 если нет.
🤔 Что такое event loop?

Event loop — это механизм в JavaScript, который обеспечивает выполнение кода асинхронно, несмотря на то что JavaScript является однопоточным языком. Он управляет порядком выполнения задач, отложенных вызовов и операций ввода-вывода, позволяя работать без блокировок. Принцип работы event loop заключается в циклическом извлечении задач из очереди и их выполнении, пока очередь не станет пустой. Таким образом, даже продолжительные операции не мешают работе страницы, что позволяет интерфейсу оставаться отзывчивым.

Ставь 👍 если знал ответ, 🔥 если нет.
🤔 Какое свойство 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