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

Сотрудничество: @cyberJohnny
Download Telegram
🤔 Как мы можем порождать классы динамически в runtime?

Через функции-конструкторы, которые возвращают новые классы, или с использованием class extends внутри функций. Также можно использовать Object.create, прокси-объекты, и динамически формировать классы из шаблонов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое CSS свойство используется для динамического управления глубиной уровней локального или глобального стека в контексте композитных слоев?
Anonymous Poll
22%
composite-layer
13%
stacking-context
61%
z-index-complex
4%
isolation
👩‍💻 Знаете JavaScript, но хотите углубить свои знания и освоить серверную разработку?

🔥 Пора выйти на новый уровень с курсом «Node.js Developer» от OTUS!
Это повышение квалификации для тех, кто хочет научиться разрабатывать мощные серверные приложения на Node.js с использованием Express, TypeScript, GraphQL, Apollo и Nest.js. Вы получите знания, которые востребованы на рынке, и навыки, которые можно сразу применять в реальных проектах.

🦾 Практические занятия, опытные преподаватели и поддержка на протяжении всего обучения — вот что делает курс уникальным. Вы освоите работу с базами данных MongoDB и PostgreSQL, научитесь строить архитектуру приложения и создавать серверные решения с нуля.

➡️ Пройдите вступительное тестирование и присоединяйтесь к группе: https://clck.ru/3NFCdT

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
🤔 Как в JavaScript обработать событие, когда пользователь нажимает клавишу на клавиатуре?
Anonymous Poll
25%
window.onkeydown = function() { ... }
50%
document.onkeypress = function() { ... }
5%
body.onkeyup = function() { ... }
25%
document.onkeydown = function() { ... }
🤔 Что такое селектор?

Селектор определяет, к каким элементам HTML применяется стиль.
1. Примеры простых селекторов: h1 (по тегу), .class (по классу), #id (по идентификатору).
2. Примеры сложных селекторов: [type="text"] (по атрибуту), div > p (по вложенности).
Селекторы позволяют точно настраивать оформление элементов на странице.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой компонент жизненного цикла React вызывается непосредственно перед удалением компонента из DOM?
Anonymous Poll
14%
componentDidMount
7%
componentDidUpdate
79%
componentWillUnmount
0%
shouldComponentUpdate
🤔 Какой CSS свойство позволяет элементу игнорировать плавающие элементы?
Anonymous Poll
52%
clear: both;
22%
float: none;
4%
ignore: float;
22%
float: ignore;
🤔 Можно ли использовать CSS Grid и Flexbox вместе?

Да. Flexbox и Grid дополняют друг друга:
- Grid — отлично подходит для макетов и секций;
- Flex — для внутреннего выравнивания элементов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какое свойство CSS используется для установления прозрачности элемента, включая его содержимое?
Anonymous Poll
83%
opacity
13%
visibility
3%
clear
7%
filter
🤔 Сколько есть способов что-то сделать асинхронно?

В JS основные способы работы с асинхронностью:
1. Callbacks – передача функции в аргумент (старый подход).
2. Promises – .then() / .catch() для управления асинхронным кодом.
3. Async/Await – более удобный синтаксис для работы с промисами.
4. Event Loop + Web APIs – механизм обработки асинхронных операций.
5. Web Workers – выполнение кода в отдельных потоках.
6. setTimeout / setInterval – отложенный запуск кода.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
👍1
🤔 Какой JavaScript API позволяет программно контролировать кэш браузера, управляя сохраненными ресурсами для быстрой загрузки страниц и оффлайн функциональности?
Anonymous Poll
48%
CacheStorage
8%
sessionStorage
36%
localStorage
8%
databaseAPI
🤔 Зачем нужны хуки в React?

Хуки появились, чтобы использовать состояние и жизненные циклы в функциональных компонентах. До них это было возможно только в классовых компонентах.
С помощью хуков можно:
- Хранить состояние (useState)
- Работать с эффектами (useEffect)
- Использовать контексты (useContext)
- Мемоизировать значения и функции (useMemo, useCallback)
- Использовать собственные хуки для переиспользуемой логики
Хуки сделали функциональные компоненты более мощными и удобными.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
👍1
🤔 Как в HTML5 создать поле для ввода пароля, которое также показывает надпись внутри поля, пока пользователь не начал ввод?
Anonymous Poll
50%
;
75%
;
25%
;
25%
;
🤔 Что такое computed-свойства?

Это реактивные свойства, которые зависят от других реактивных данных и автоматически пересчитываются, когда зависимости меняются.
Они кешируются до тех пор, пока зависимости не изменятся.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Как понять, что у тебя «кровавый энтерпрайз»?

- Каждое изменение — боль и затраты.
- Отсутствие документации и тестов.
- Бесконечные согласования и сломанный CI.
- Система зависимостей — как джанга.
- Код «держится на одном человеке».
- Внедрение фич занимает месяцы, багфиксы — недели.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Какой CSS-селектор используется для выбора всех элементов, которые являются последними детьми своих родителей?
Anonymous Poll
92%
:last-child
4%
:first-child
0%
:child
4%
:end-child
🤔 Какое свойство CSS предоставляет механизм для условного применения стилей на основе существования, значения или отсутствия определенных атрибутов на элементе?
Anonymous Poll
18%
attribute-exists
47%
[attribute=value]
35%
:has
6%
:attr
🤔 Свойство display - основное значение и как оно работает?

Свойство display в CSS определяет, как элемент должен быть отображен на странице. Основные значения: block, inline, inline-block и none. Например, block создает блочный уровень элемента, который занимает всю доступную ширину, а none полностью скрывает элемент.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚
🤔 Как в CSS задать градиентный фон с диагональным направлением от верхнего левого угла к нижнему правому?
Anonymous Poll
27%
background: linear-gradient(to bottom right, red, blue);
18%
background: gradient-diagonal(red, blue);
0%
background: linear-gradient(red, blue to top left);
55%
background: linear-gradient(from top left, to bottom right, blue to red);
⌨️ Хотите научиться создавать полноценные API-серверы с использованием Node.js и TypeScript?

Приглашаем на открытый урок «Как создать API-сервер с TypeScript и Node.js».

🗓 4 августа в 20:00 МСК
🆓 Бесплатно. Урок в рамках старта курса «Node.js Developer».

На открытом уроке мы покажем, как быстро настроить сервер с помощью Express, создать маршруты для работы с данными и обрабатывать запросы от клиентов. Вы освоите основы TypeScript и API-разработки, получите знания для работы с типами данных и ошибок.

🎯 Погрузитесь в мир востребованной backend-разработки: создайте API-сервер, научитесь писать чистый и безопасный код и откройте для себя возможности Node.js.

🔗 Ссылка на регистрацию: https://clck.ru/3NJ7sQ

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576