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

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Что такое коды ответа и чем они отличаются друг от друга?

Это статусные коды HTTP:
- 2xx — успех;
- 3xx — редиректы;
- 4xx — ошибка клиента;
- 5xx — ошибка сервера.
Они информируют клиента о результате обработки запроса.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод в JavaScript нужен для отслеживания изменений в размерах элемента?
Anonymous Poll
19%
MutationObserver
62%
ResizeObserver
19%
addEventListener
0%
observe
🤔 Какие методы запросов бывают?

- GET — получить данные;
- POST — создать;
- PUT — заменить;
- PATCH — частично изменить;
- DELETE — удалить;
- OPTIONS — узнать поддерживаемые методы;
- HEAD — заголовки без тела.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение свойства CSS will-change оптимизирует будущие изменения свойств элемента?
Anonymous Poll
37%
auto
58%
transform
5%
opacity
5%
contain
🤔 Что делает box-sizing: border-box?

Изменяет модель расчёта размеров элемента:
1. Ширина и высота включают содержимое, padding и border.
2. Это упрощает управление размерами, так как итоговый размер элемента остаётся фиксированным.
Без border-box (по умолчанию content-box), padding и border увеличивают размеры элемента, что усложняет расчёты.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой атрибут тега <a> используется для указания, что ссылка должна быть открыта в новой вкладке браузера?
Anonymous Poll
72%
target="_blank"
3%
rel="external"
6%
open="new"
🤔 Какие drag-события вам известны?

- dragstart — начало перетаскивания;
- drag — во время перетаскивания;
- dragenter — объект входит в зону;
- dragover — объект находится над зоной;
- dragleave — покидает зону;
- drop — объект сброшен;
- dragend — завершение операции.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🔥1
🤔 Какой CSS-свойство используется для создания градиентного фона?
Anonymous Poll
50%
background-color
43%
background-image
3%
border-style
7%
filter
🤔 Как можно ускорить загрузку сайта?

1. Оптимизировать изображения (сжать и использовать современные форматы, например, WebP).
2. Использовать кэширование данных (например, через CDN).
3. Минифицировать CSS, JS и HTML.
4. Асинхронно загружать сторонние скрипты и шрифты.
5. Использовать lazy loading для изображений и компонентов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое свойство CSS позволяет элементу читать и поддерживать его размеры, даже если окно браузера изменяется?
Anonymous Poll
24%
resize
16%
adaptation
44%
fit-content
16%
flex-grow
🤔 Какой атрибут HTML используется для определения стилей, написанных прямо в элементе?
Anonymous Poll
75%
style
4%
class
11%
styles
14%
stylesheet
🤔 Что такое margin collapse и для чего?

Margin collapse — это схлопывание внешних отступов между вертикально соседствующими элементами.
Если один элемент имеет margin-bottom, а следующий — margin-top, будет применён наибольший из них, а не сумма. Это упрощает вертикальные отступы.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой метод JavaScript используется для определения наличия и доступности определенных функций в браузере пользователя, например, API для работы с геолокацией?
Anonymous Poll
58%
navigator.exists()
0%
feature.detect()
0%
Modernizr.check()
47%
navigator.permissions.query()
🤔 Как в JavaScript сделать так, чтобы функция выполнялась каждые 2 секунды?
Anonymous Poll
90%
setInterval(myFunction, 2000);
7%
setTimeout(myFunction, 2000);
3%
repeat(myFunction, 2000);
0%
loop(myFunction, 2000);
🤔 Какие есть типы функций?

Есть обычные именованные функции, анонимные, стрелочные, методы объектов, функции-конструкторы, рекурсивные и колбэки. Каждая из них имеет своё назначение и особенности поведения.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение атрибута target в <a> открывает ссылку в новом окне браузера?
Anonymous Poll
97%
_blank
0%
_self
3%
_top
0%
_parent
🤔 Какое значение будет в переменной n после выполнения следующего кода?
let n = new Set([1, 2, 3, 2, 1]).size;
Anonymous Poll
0%
2
61%
3
15%
4
24%
5
🤔 В чём заключаются недостатки SSR?

- Задержка при первом рендеринге;
- Нагрузка на сервер;
- Сложность интеграции с клиентским SPA-приложением;
- Повышенные требования к инфраструктуре.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое значение будет в переменной h после выполнения следующего кода?
let h = "JavaScript"; h = h.substring(0, 4);
Anonymous Poll
0%
JavaScript
79%
Java
7%
Script
14%
JavaS