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

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

Линтер – это инструмент, который анализирует код. Наиболее распространённый – ESLint.
1. Установите:
2. npm install eslint --save-dev
3. Инициализируйте:
4. npx eslint --init
5. Проверьте код:
6. npx eslint script.js

Поставьте 👍, если знали ответ, 🔥 если нет.
🤔 Какое значение box-sizing установлено в браузерах по умолчанию?

По умолчанию в браузерах используется content-box, что означает, что padding и border увеличивают размер элемента.

Ставь 👍 если знал ответ, 🔥 если нет.
🤔 Как свойства box-sizing влияют на размеры элемента?

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

Ставь 👍 если знал ответ, 🔥 если нет.
🤔 Какое значение свойства CSS flex-basis устанавливает начальный размер элемента Flexbox перед распределением оставшегося пространства?
Anonymous Poll
59%
auto
26%
0
7%
content
7%
initial
🤔 Какие значения имеет свойство box-sizing?

CSS-свойство box-sizing может принимать два значения:
- content-box – размер элемента определяется по контенту, не учитывая отступы и рамки.
- border-box – размер включает контент, отступы и рамки, что упрощает расчет ширины и высоты.

Ставь 👍 если знал ответ, 🔥 если нет.
🤔 Какой HTML элемент специально предназначен для динамического отображения статуса или прогресса операций, которые не мгновенно завершаются, например, загрузки файлов или процессов?
Anonymous Poll
93%
<progress>
0%
<meter>
7%
<status>
0%
<status>
Современные фреймворки для веб-разработки включают в себя:

- Фронтенд: React, Vue.js, Angular, Svelte, Solid.js.
- Бэкенд: Next.js, Nuxt.js, NestJS, Fastify, Express, Koa.
- CSS: Tailwind CSS, Bootstrap, Chakra UI.

Выбор фреймворка зависит от конкретных задач. React и Vue отлично подходят для создания интерактивных приложений, Next.js и Nuxt.js – для серверного рендеринга, а NestJS – для масштабируемых API.

Ставь 👍, если знал ответ, 🔥 если нет.
🤔 Какой JavaScript метод позволяет создать многократно используемый шаблон объекта, который можно инстанциировать с различными начальными параметрами?
Anonymous Poll
35%
Object.create()
12%
Function()
40%
Class()
19%
Prototype.clone()
🤔 Что такое редюсер?

Это функция в Redux, которая принимает текущее состояние и действие, а затем возвращает новое состояние. Она определяет, как изменяется хранилище в ответ на вызов dispatch.

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

Это объект в 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-адреса серверов.

Ставь 👍 если знал ответ, 🔥 если нет.