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

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Какой метод объекта Document в JavaScript создает новый элемент с указанным именем тега?
Anonymous Poll
85%
createElement()
5%
appendChild()
3%
newElement()
8%
createNode()
🤔 Для чего нужен Vue?

Vue.js — это фреймворк для разработки пользовательских интерфейсов. Он облегчает взаимодействие с DOM, обеспечивает реактивность данных, дает возможность создавать компоненты и разрабатывать одностраничные приложения (SPA). Легок для освоения, гибок и эффективен.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой CSS-селектор выбирает элементы, у которых есть атрибут title, содержащий слово "flower"?
Anonymous Poll
49%
[title*=flower]
14%
[title^=flower]
16%
[title$=flower]
22%
[title=flower]
🤔 Почему существует async/await?

- Упрощает код, делает его более понятным по сравнению с .then()
- Избавляет от "адских колбеков"
- Позволяет писать асинхронный код, как если бы он был синхронным

Ставь 👍 если знал ответ, 🔥 если нет Забирай 📚
🤔 Какие известные методы были разработаны для Redux?

Методы, такие как Redux Toolkit, были созданы для упрощения работы с Redux, уменьшения количества шаблонного кода и повышения производительности. Также широко используются middleware, такие как Redux Thunk и Redux Saga, для управления побочными эффектами.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какие преимущества у инкрементального DOM по сравнению с виртуальным?

Инкрементальный DOM (например, в Svelte):
- Менее абстрактен — ближе к реальному DOM.
- Быстрее монтируется — нет необходимости в полной виртуальной копии.
- Меньше памяти и меньше промежуточных структур.
В отличие от виртуального DOM:
- он не сравнивает деревья, а прямо вставляет нужные изменения.

Ставь 👍 если знал ответ, 🔥 если нет. Забирай 📚
🤔 Какое свойство CSS используется для изменения стиля маркеров списка?
Anonymous Poll
53%
list-style-type
30%
list-decoration
3%
list-style-image
15%
list-marker-style
🤔 Какие существуют альтернативы SSR?

- SPA с пререндерингом (Scully, React Static, Nuxt generate) — подходит для статического контента.
- JAMStack с CDN — готовая сборка без использования сервера.
- Edge рендеринг — через функции CDN (например, Cloudflare Workers).
- Гибридный рендеринг (ISR/SSG) — как в Next.js, где некоторые страницы используют SSR, а другие — SSG.

Ставь 👍 если знал ответ, 🔥 если нет. Забирай 📚
🤔 Какой метод JavaScript используется для сортировки элементов массива на месте, позволяя задать собственную функцию сортировки?
Anonymous Poll
85%
Array.sort
8%
Array.order
5%
Array.arrange
3%
Array.organize
🤔 Какие селекторы ты знаешь?

CSS-селекторы включают:
Простые: селекторы тегов (div), классов (.class), ID (#id), атрибутов ([type="text"]).
Комбинаторы: потомок (A B), прямой потомок (A > B), сосед (A + B), все последующие (A ~ B).
Псевдоклассы: :hover, :nth-child(n), :first-of-type.
Псевдоэлементы: ::before, ::after, ::placeholder.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой атрибут в HTML определяет видимую подпись для элемента ввода?
Anonymous Poll
7%
label="Name"
90%
placeholder="Enter Your Name"
2%
title="Name"
0%
name="name"
🤔 Что представляют собой inline стили и каков их уровень приоритета?

Inline стили используются в атрибуте style HTML элемента. Они имеют более высокий приоритет по сравнению со стилями, заданными внутри тегов или во внешних CSS файлах, но ниже, чем стили, отмеченные через !important.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое свойство CSS используется для задания толщины шрифта?
Anonymous Poll
93%
font-weight;
5%
font-style;
2%
font-size;
0%
font-stretch;
🤔 Что можно рассказать о memo в React?

React.iss.onemo — это компонент высшего порядка, который помогает избежать ненужного рендера, если пропсы остались прежними. React.iss.onemo сравнивает старые и новые пропсы (поверхностное сравнение) и обновляет компонент только при их изменении. Можно передать свою функцию сравнения в качестве второго аргумента для более точной настройки.

Ставь 👍 если знал ответ, 🔥 если нет. Забирай 📚
🤔 Какое значение flex-direction устанавливает главную ось контейнера flexbox так, чтобы дочерние элементы располагались слева направо?
Anonymous Poll
75%
row
11%
column
14%
row-reverse
2%
column-reverse
🤔 Каков результат работы асинхронных функций?

Асинхронная функция (async) всегда возвращает Promise, даже если явно указан return.

Ставь 👍 если знал ответ, 🔥 если нет. Забирай 📚
👍1
🤔 Какой CSS-селектор выбирает элементы, чьи атрибуты начинаются с указанного значения?
Anonymous Poll
47%
[attr^=value]
21%
[attr*=value]
16%
[attr$=value]
18%
[attr=value]
🤔 Что представляют собой паттерны проектирования?

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

Ставь 👍 если знал ответ, 🔥 если нет. Забирай 📚
🤔 Что вернёт следующий код: console.log("Test".toLowerCase());?
Anonymous Poll
77%
"test"
3%
"Test"
8%
"TEST"
12%
Ошибка
🤔 Какой метод JavaScript позволяет установить свойство объекта как неперечисляемое?
Anonymous Poll
22%
Object.defineProperties()
54%
Object.defineProperty()
7%
Object.create()
29%
Object.assign()
🤔 Когда целесообразно использовать TypeScript в проекте?

- При реализации проектов среднего и большого масштаба.
- Если над проектом трудится команда разработчиков.
- Когда применяется модульная структура и предполагается многократное использование кода.
- Если необходима автоматическая проверка типов, подсказки в IDE и уменьшение количества ошибок.

Отмечай 👍, если был в курсе, 🔥 — если узнал что-то новое.
Забирай 📚