База знаний: вопросы с собеседований
Вопросы, которые задают на frontend-собеседованиях, с подробными ответами. Выберите тему.
Асинхронность и Event Loop
- Что такое Event Loop?
- Что такое Promise?
- Какие статические методы Promise важны на практике и чем они отличаются?
- Что такое асинхронность?
- Чем отличаются состояния Promise и какие переходы между ними возможны?
- Как работает и реализован Async/Await?
- Что такое micro task?
- Что такое Promise.all?
- Что такое Promise.allSettled в JavaScript?
- В чем разница между async и defer в JavaScript?
- Сравни способы реализации асинхронности и объясни, когда выбирать каждый вариант.
- Что такое Promise.race?
- Что такое requestAnimationFrame?
- Что такое setTimeout?
- Что относится к macrotask?
- Для чего нужен async?
- Какие задачи решает Promise?
- Для чего нужна асинхронность в JavaScript?
- Как выполнить несколько Promise одновременно?
- Как работает setInterval?
- Что такое Macrotask?
- В чем разница между micro task и macro task?
- Что будет при ошибке выполнения одного из Promise переданного в метод Promise.all?
- Что такое микрозадача?
- Какие задачи обрабатываются в Event Loop?
- Когда сработает созданный Promise?
- Что возвращает асинхронная функция?
- Что выполняется первым: Promise или setTimeout?
- Функция setState синхронная или асинхронная?
- Что такое Макрозадача в JavaScript?
- Какие асинхронные операции важны на практике и как их применять?
- Как можно остановить интервал?
- Что такое RunLoop?
- Что такое макрозадачи?
- Что такое промисы в JS?
- Что такое событийный цикл?
- console.log() - синхронная или асинхронная операция?
- Всегда ли в асинхронном коде лежит синхронный?
- В чем разница между асинхронностью, многопоточностью (multithreading) и многопроцессингом (multiprocessing)
- В чем разница между Микрозадачей и Макрозадачей в JavaScript?
- В чем разница между синхронным кодом с циклом while и асинхронным кодом?
- Где хранится таймер?
- Для чего используются промисы?
- Если микрозадача создает новую микрозадачу, в какую очередь она уходит?
- Зачем нужен defineAsyncComponent?
- Как асинхронность влияет на несовпадение результата в консоли и вызванного кода?
- Как дождаться результата выполнения асинхронной операции?
- Какие были проблемы с анимацией до requestAnimationFrame?
- Чем отличаются состояния промиса и какие переходы между ними возможны?
- Сравни способы реализовать таймер чтобы было точное время и объясни, когда выбирать каждый вариант.
- Какие таймеры важны на практике и как их применять?
- Как может асинхронный код выполняться параллельно с синхронным?
- Как отлавливать исключения в Promise?
- Как отловить ошибки через async/await?
- Как отработает вложенный Async/Await?
- Как подождать выполнения десяти Promise?
- Как получить результат первого выполнившегося Promise, запущенного через Promise.all()
- Как получить результат трех параллельных асинхронных запросов?
- Как понять является ли операция асинхронной в коде JavaScript?
- Как поставить микрозадачу в очередь?
- Как избежать гонки запросов (race condition) при повторных асинхронных запросах?
- Зачем нужно ключевое слово async перед функцией?
Функции
- Что такое замыкание?
- Чем отличаются стрелочные функции от обычных функций в JavaScript?
- Что такое чистая функция?
- В чем разница между Function Declaration и Function Expression?
- Как работает контекст в функции?
- Что такое стрелочная функция?
- Что такое apply в JavaScript?
- Что такое bind?
- Что такое call?
- Что такое рекурсия?
- Что такое IIFE?
- Что такое Function Expression?
- Сравни способы объявления функции и объясни, когда выбирать каждый вариант.
- Когда появляется контекст у функции?
- Что такое Function Declaration?
- Что такое замыкание со стороны функции и переменных?
- Зачем нужно замыкание?
- Чем отличаются типы функций и как это влияет на код?
- Что такое каррирование функции?
- В чем особенность взаимодействия this и стрелочной функции?
- Для чего нужен bind в JavaScript?
- Сравни способы создания функций и объясни, когда выбирать каждый вариант.
- Разбери, можно ли поменять контекст в стрелочной функции: при каких условиях и какие ограничения.
- Разбери, можно ли применить bind к стрелочной функции: при каких условиях и какие ограничения.
- Зачем нужна функция в качестве аргумента в setState?
- Как получить все аргументы у стрелочной функции?
- Какие способы создания функций есть в JavaScript и чем они отличаются?
Рендеринг и производительность
- Что такое Virtual DOM?
- Сравни способы оптимизации в React и объясни, когда выбирать каждый вариант.
- Что такое React.memo?
- Что вызывает перерендер компонента?
- Какие причины повторного рендеринга компонента встречаются чаще всего и как их диагностировать?
- В чем разница между обычным и Virtual DOM?
- Как React понимает что нужно что-либо перерендерить?
- Какие плюсы и минусы Virtual DOM?
- Как оптимизировать рендеринг компонента в React?
- Что такое рендеринг компонента в React?
- В чем разница между Shadow DOM и Virtual DOM?
- За счет чего Virtual DOM более эффективен?
- Зачем нужен Virtual DOM в React?
- Зачем нужен атрибут key для рендера массива элементов в React?
- Зачем нужна мемоизация в React?
- Как оптимизировать React-приложение?
- Что такое React Reconciliation?
- Для чего нужен React Suspense?
- Какие плюсы и минусы компонентного рендеринга в React.js?
- Что такое React.lazy?
- Объясни, будет ли перерисовка компонента, если в setState передать тот же state: от чего это зависит и почему.
- Какая последовательность render в React?
- Какие могут быть проблемы с оптимизацией React?
- Как избежать ререндер компонента?
- Как происходит перерисовка в React?
- Как реализовать мемоизацию в классовых компонентах?
- Когда в React ререндерится компонент?
- Когда вызывается функция Render в React?
- Перерендерится ли компонент при изменении current в ref?
- Сколько аргументов в React.memo?
- Актуален ли в данное время Virtual DOM?
- В каких случаях useSelector будет вызывать перерисовку компонента?
- В каком порядке будут рендерится компоненты со вложенностью?
- В чем особенность рендеринга React?
- Где рендерятся серверные компоненты?
- Есть ли в React оптимизация навешивания handler на элементы?
- Зачем React ожидает выполнения всех действий пользователя для рендера?
- Как React вносит правки в Real DOM?
- Как Virtual DOM оптимизирует рендеринг?
- Какая ключевая особенность в React render?
- Как в React происходит согласование деревьев?
- Какие библиотеки которые рендерят React кроме ReactDOM подходят для разных задач и чем они отличаются?
- Сравни варианты оптимизации компонентов и объясни, когда выбирать каждый вариант.
- Сравни способы применения React.Suspense и объясни, когда выбирать каждый вариант.
- Какие проблемы решает Virtual DOM?
- Как изменение states в одном месте в React влияло на рендеринг?
- Как искать утечку памяти в React?
- Как обрабатываются изменения в Virtual DOM?
- Как оптимизировать React приложение, если страница подвисает при действиях пользователя?
- Как оптимизировать загрузку страницы на React?
- Как оптимизировать компонент в React?
- Как оптимизировать перерендер компонентов?
- Как оптимизировать работу с DOM без React?
- Как оптимизируешь рендер на React частичной выдачи карточек пользователю?
- Когда не нужно использовать memo?
- Memo проверяет равенство props по значению или по референсу?
- Какие параметры есть у Memo?
- Как разделить React-приложение на чанки и по какому принципу это делать?
Основы языка
- Чем отличаются типы данных в JavaScript и как это влияет на код?
- В чем разница между var, let и const?
- В чем разница между null и undefined?
- В чем разница между == и === в JS?
- Что такое JavaScript?
- Что такое область видимости?
- Сравни способы объявления переменных в JavaScript и объясни, когда выбирать каждый вариант.
- На какие группы делятся типы данных в JavaScript?
- Что такое const?
- Что такое let в JavaScript?
- Что такое ссылочные типы?
- Что такое Hoisting?
- Что такое лексическое окружение?
- Что такое Typeof?
- Что такое var?
- Что вернет typeof для null?
- Что можно изменить в const?
- Что такое use strict?
- Где доступна переменная, объявленная через let?
- В чем разница между for..in и for..of?
- Какие примитивные типы данных важны на практике и как их применять?
- Чем отличаются типы переменных и как это влияет на код?
- Что такое динамическая типизация?
- Какая типизация у языка JavaScript?
- Что такое статическая типизация?
- Где доступна переменная, объявленная через const?
- В чем разница между типами данных в JavaScript?
- Для чего используется JavaScript?
- Сколько потоков в JS?
- Что такое интерпретируемый язык программирования?
- Где можно запустить JavaScript?
- Как выполняется JS?
- Какие логические операторы важны на практике и как их применять?
- Какие области видимости есть в JS?
- Какие переменные всплывают?
- Когда нужно использовать тернарный оператор?
- Что такое for?
- Что такое Temporal Dead Zone?
- Что такое передача по значению?
- Что такое примитив?
- Что такое стандарт языка JavaScript?
- Что такое типизация?
- Является ли JavaScript кроссплатформенным?
- В чем разница между for и while?
- В чем разница между while и do-while?
- В чем разница между интерпретируемым и компилируемым языком?
- В чем разница между логическими операторами && и ||?
- В чем разница между операторами && и ??
- Где используются логические операторы && и ||?
- Для чего нужно значение key в v-for?
- Есть ли конструкция "else if" в JS?
- Зачем нужен оператор ?.
- Зачем нужен цикл while?
- Какая фича JavaScript используется под капотом у MobX?
- Какая цель у оператора присваивания?
- Как заблокировать поток в JS?
- Как запустить выполнение кода по нажатию на кнопку с помощью JS?
- Какие методы поиска в JS важны на практике и чем они отличаются?
- Какие ограничения for of важно учитывать и как они влияют на решение?
- Какие особенности логических операторов важно учитывать на практике и почему?
- Какие особенности оператора && важно учитывать на практике и почему?
- Какие параметры в v-for важны на практике и как их применять?
- Какие циклы в JS важны на практике и как их применять?
- Как методы появляются у примитива?
- Как называется оператор ??
- Как не сломать цикл while?
- Как объявить цикл?
- Как однопоточность влияет на скорость выполнения кода JS?
- Как определить когда использовать цикл for...in?
- Как подключить JavaScript к странице?
- Как получить доступ к узлу с помощью JS?
- Как получить рандомное число от 0 до 255?
- Что такое явное и неявное приведение типов в JavaScript?
- Что такое NaN и как его можно получить?
DOM и браузер
- Что такое CORS?
- В чем разница между cookie, localStorage и sessionStorage?
- В чем разница между GET и POST?
- Сравни способы хранения данных в браузере и объясни, когда выбирать каждый вариант.
- Что такое SSR?
- Что происходит при запросе в браузере?
- Что такое cookie?
- Что такое DOM?
- Что такое REST API?
- Из каких частей состоит HTTP-запрос?
- Что происходит после введения адреса в браузере?
- Что такое HTTP?
- Что такое localStorage?
- Что такое всплытие события?
- Какие методы HTTP-запроса важны на практике и чем они отличаются?
- Сравни способы решения проблемы CORS и объясни, когда выбирать каждый вариант.
- Какие хранилища в браузере важны на практике и как их применять?
- Что такое Shadow DOM?
- Как остановить всплытие события?
- Как происходит отрисовка сайта в браузере?
- Что такое preventDefault?
- Что такое sessionStorage?
- Какие плюсы и минусы SSR?
- Что такое принцип REST?
- JavaScript в браузере однопоточный или многопоточный?
- В чем разница между HTTP и HTTPS?
- Для чего нужен метод stopPropagation?
- Как устроен протокол HTTP?
- Разбери, можно ли отправить запрос GET с body: при каких условиях и какие ограничения.
- Что такое HTTP запрос?
- Что такое Websocket?
- В чем разница между currentTarget и target?
- В чем разница между stopPropagation и preventDefault?
- В чем разница между браузерными хранилищами?
- Для чего нужны Cookies?
- Какие есть методы в REST API?
- Какие основные статус-коды HTTP важно понимать и почему?
- Сравни способы обхода CORS и объясни, когда выбирать каждый вариант.
- Чем отличаются фазы распространения событий и что происходит на каждой фазе?
- Что такое DNS?
- Что такое HttpOnly cookie?
- Что такое HTTP-методы?
- Что такое JWT?
- Что такое Long Polling?
- Что такое XSS (Cross-Site Scripting)
- Какие HTTP-запросы важны на практике и как их применять?
- Какие плюсы и минусы GraphQL?
- Когда используются cookie?
- Что такое CSP?
- Что такое CSRF уязвимость?
- Что такое OAuth 2.0?
- Что такое Refresh Token?
- В каких случаях возникает CORS?
- В чем разница между AJAX, XMLHttpRequest, Fetch и Axios?
- В чем разница между REST, SOAP и GraphQL?
- В чем разница между методами HTTP запросов?
- Зачем нужен запрос OPTIONS в HTTP?
- Как бороться с XSS-атакой?
- Какие основные уязвимости в вебе важно понимать и почему?
- Сравни способы передачи данных в HTTP-запросе и объясни, когда выбирать каждый вариант.
- Как устроить процесс авторизации во frontend-приложении?
- Когда применяется REST?
- Разбери, можно ли закэшировать POST-запрос: при каких условиях и какие ограничения.
- Разбери, можно ли хранить токен в Cookies: при каких условиях и какие ограничения.
- Что такое Access Token?
- Что такое IndexedDB?
- Что такое Intersection Observer?
- Что такое Service Worker?
- В чем разница между fetch и axios?
- Где лучше хранить refresh token?
- Как CORS обрабатывается на сервере?
- Как будешь работать с параллельными запросами?
- Какие уязвимости важны на практике и как их применять?
- Чем отличаются фазы жизненного цикла события и что происходит на каждой фазе?
- Какие хранилища данных на фронте важны на практике и как их применять?
- Какие плюсы и минусы fetch?
- Как настраивается CORS?
- Как настроить CSP?
- Как настроить доступ к домену при использовании CORS?
- Как реализовать JWT авторизацию?
- Когда использовать GraphQL?
- Кого пытается защитить CORS?
- Почему CORS нормально работает в браузере, а в Postman нет?
- Сколько уровней у OSI?
- С помощью чего отменяется fetch запрос в JavaScript?
- Что произойдет после клика пользователя по кнопке?
- Что такое Content Security Policy?
- Что такое CSRF токен?
- Что такое GraphQL?
- Что такое onClick?
- Что такое распространение события?
- Что такое синтетические события?
- Что такое событийная модель?
- Объясни, будет ли работать CORS при отправке формы: от чего это зависит и почему.
- Видны ли сторонним лицам данные из localStorage?
- Видны ли сторонним лицам данные из sessionStorage?
- Всплывает ли событие focus?
- В чем безопасность CORS?
- В чем недостатки GraphQL для бизнеса?
- В чем плюсы и минусы слушания события OnScroll?
- В чем разница между CORS и CSP?
- В чем разница между GET, POST, PATCH, DELETE и UPDATE?
- В чем разница между Polling и Long Polling?
- В чем разница между stopPropagation и stopImmediatePropagation?
- В чем разница между идентификацией, аутентификацией и авторизацией?
- В чем разница между получением браузером JSON от API и картинки?
- В чем разница между токеном и JWT-токеном?
- В чем разница между фазами событий?
- Где будешь хранить токен пользователя?
- Где лежит шина событий?
- Где лучше хранить данные для авторизации?
- Где хранил JWT Token?
- Где хранить токен с ограниченным permission?
- Для чего используется Context API?
- Для чего нужен local storage?
- Для чего нужно всплытие событий?
- Есть ли в браузере ограничение по количеству параллельных запросов?
- Есть ли методы запросов в GraphQL?
- Есть ли условия, мешающие прохождению проверки службой безопасности?
- Есть ли уязвимость связанная с target="_blank"?
- Есть ли что-либо выше window?
- За счет чего масштабируется REST?
- Зачем нужно погружение события?
- Зачем нужны три фазы событий?
- Какая категория запросов не будет проверяться в CORS?
- Как бороться с уязвимостями внутри браузеров?
- Как браузер защищает в CORS?
- Как будет выполняться MutationObserver?
- Как была устроена Аутентификация в Frontend приложении?
- Как заканчивается распространение события?
- Как закешировать файл через Service Worker?
- Как закрывал уязвимости?
- Как запретить сливать токен с ограниченным permission?
- Как защититься от CSRF-атаки?
- Как защитить уязвимость чтобы она эксплуатировалась но злоумышленник не мог ничего сделать?
- Какие важные элементы REST знаешь?
- Какие есть ограничения по объему у хранилищ?
- Какие запросы нужны для авторизации?
- Какие CORS-заголовки важны на практике и как их применять?
- Какие есть альтернативы Long Polling и в каких случаях их выбирать?
- Чем отличаются виды сущностей GraphQL схемы и где они применяются?
- Чем отличаются виды токенов и где они применяются?
- Чем отличаются виды уязвимостей Frontend и где они применяются?
- Какие методы авторизации важны на практике и чем они отличаются?
- Какие методы для слушания событий важны на практике и чем они отличаются?
- Какие методы защиты от веб-уязвимостей важны на практике и чем они отличаются?
- Какие особенности хранилищ важно учитывать на практике и почему?
- Какие очереди в событийном цикле важны на практике и как их применять?
- Какие проблемы связанные с CORS встречаются на практике и как их решать?
- Какие протоколы Аутентификации важны на практике и как их применять?
- Какие события Web Socket важны на практике и как их применять?
- Сравни способы аутентификации пользователя и объясни, когда выбирать каждый вариант.
- Сравни способы отслеживания события и объясни, когда выбирать каждый вариант.
- Какие стадии события важны на практике и как их применять?
- Какие плюсы и минусы storage?
- Какие плюсы и минусы авторизации OAuth 2.0?
- Какие плюсы и минусы авторизации через пароль?
- Какие плюсы и минусы использования stopPropagation?
- Какие плюсы и минусы кэширования через Service Worker?
- Какие события обрабатывают Document?
- Какие события отлавливают фокус?
- Какие уязвимости возникают при запрете кросс-доменных запросов?
- Какие элементы содержатся в DOM, и не находятся в Render Tree?
- Как можно повесить событие на узел с помощью JS?
- Как называется метод, снимающий событие с узла?
- Как написать API для авторизации?
- Как организовать запросы к API во frontend-приложении?
- Какое ограничение места в IndexedDB?
- Как отловить событие клика в JavaScript?
- Как отловить событие прокрутки в JavaScript?
- Как отменить запрос?
- Как отследить клик по элементу?
- Как передать токен авторизации в каждом запросе?
- Как повесить Event чтобы он отрабатывал событие на стадии Capturing?
- Как подписаться на событие нажатия на кнопку?
- Как подсказать браузеру что какие-либо ресурсы будут загружены?
- Как подтверждается безопасность данных?
- Как получить JSON из fetch запроса?
- Как понять что запрос пришел от SEO-робота или от пользователя?
- Как понять, что первый шаг двухфакторной аутентификации прошел успешно?
- Как посчитать вероятность события?
- Какие данные браузер кеширует по умолчанию?
- Что такое критический путь рендеринга и из каких этапов он состоит?
- Блокируют ли скрипты и стили загрузку и отрисовку страницы?
- Что такое PWA и из чего оно состоит?
- В чём разница между событиями DOMContentLoaded и load?
Типы и интерфейсы
- В чем разница между типом и интерфейсом в TypeScript?
- Что такое интерфейсы в TypeScript?
- Возможно ли сделать конструкцию с помощью интерфейса в TypeScript?
- Когда использовать type в TypeScript?
- В каких случаях применяются интерфейсы в TypeScript?
- Возможно ли записывать не обязательные поля в type в TypeScript?
- Дублируют ли друг друга type и interface в TypeScript?
- Как восстановить переданный из одной TypeScript программы в другую объект в JSON чтобы сохранить метаданные?
- Какие плюсы и минусы написания всего на interface в TypeScript?
- Как описать объект в TypeScript?
Продвинутые темы
- Что такое Generics?
- Что такое Redux?
- Что такое WebPack?
- Что такое семантика?
- Что такое KISS?
- Что такое Utility type?
- Что такое DRY?
- Что такое специфичность селекторов?
- Зачем нужен state management?
- Что такое псевдоэлемент?
- Что такое семантическая верстка?
- Из чего состоит Redux?
- Что такое any?
- Что такое batching?
- Какие state manager важны на практике и как их применять?
- Чем отличаются типы тестирования и как это влияет на код?
- Что такое Fiber?
- Что такое Server-Side Rendering?
- Что такое доступность сайта?
- Что такое семантические теги?
- Что такое сложность алгоритма?
- В чем разница между MobX и Redux?
- Для чего нужен тип any?
- Какие паттерны для Frontend применяются на практике и какие проблемы они решают?
- Какие псевдоэлементы важны на практике и как их применять?
- Какие плюсы и минусы FSD?
- Что делает Babel?
- Что такое FSD?
- Что такое Middleware?
- Что такое props?
- Что такое Ref?
- Что такое SPA?
- Что такое Type Guard?
- Что такое атрибут defer у скрипта?
- Что такое Внедрение зависимости (Dependency injection)
- Что такое изоляция стилей?
- Что такое паттерн Observer?
- Что такое полифил?
- В чем плюсы и минусы Redux?
- В чем разница между блочными, строчными и блочно-строчными элементами?
- Для чего нужны ключи?
- Для чего нужны псевдоэлементы?
- Для чего нужны фреймворки?
- Зачем нужны препроцессоры?
- Сравни алгоритмы сортировки по идее, сложности и применению.
- Какие принципы программирования важны на практике и как их применять?
- Сравни способы рендеринга и объясни, когда выбирать каждый вариант.
- Разбери, можно ли использовать индекс как ключ: при каких условиях и какие ограничения.
- Что такое BEM?
- Что такое PureComponent?
- В чем разница между state и props?
- Что такое Axios?
- Что такое Flux-архитектура?
- Что такое Keyof?
- Что такое дженерики?
- Что такое условный тип?
- В чем разница между Redux и Redux Toolkit?
- В чем разница между тегами aside, article и section?
- Для чего нужны HOC?
- Зачем нужен MobX в проекте?
- Как работает memo?
- Что такое flux?
- Что такое MobX?
- Что такое never?
- Что такое useTransition?
- Что такое бинарный поиск?
- Что такое порталы?
- Когда использовать unit-тесты?
- В чем разница между фреймворком и библиотекой?
- Где будешь хранить данные на клиенте?
- Для чего нужен Proto?
- Для чего нужны ARIA-атрибуты?
- Зачем инвертировать зависимости?
- Зачем нужен UPDATE?
- Зачем нужен атрибут Key?
- Зачем нужен сборщик?
- Зачем нужны props?
- Из чего состоит JSON?
- Какая сложность бинарного поиска?
- Сравни алгоритмы поиска по идее, сложности и применению.
- Какие менеджеры состояния важны на практике и как их применять?
- Какие конфиги frontend-сборки важно понимать?
- Какие виды тестов нужны frontend-приложению?
- Как можно использовать refs?
- Как определить сложность задачи?
- Как организована сборка приложения?
- Как отличить плохой код от хорошего?
- Как подходишь к выбору инструментов и технологий для решения задач?
- Как понять что элемент скрыт?
- Как реализовать пагинацию?
- Как создать анимацию в приложении?
- Разбери, можно ли использовать Key вне списка: при каких условиях и какие ограничения.
- Нужен ли стейт-менеджер?
- Что такое Context?
- Что такое CRUD?
- Что такое Defer?
- Что такое GRASP?
- Что такое minor версия?
- Что такое MVC?
- Что такое nextTick?
- Что такое refs?
- Что такое useExisting?
- Что такое useFactory?
- Что такое алгоритм?
- Что такое Линтер?
- Что такое оценка сложности O(n)
- Что такое принцип открытости/закрытости (Open-Closed Principle)
- Что такое связывание?
- Что такое сессия?
- Блокируется ли поток при sync?
- Объясни, будет ли работать focus навешанный на форму: от чего это зависит и почему.
- Объясни, будет ли убывать сложность алгоритма с бинарным поиском: от чего это зависит и почему.
- Бывают ли state manager только глобальными?
- Когда SPA не подходит для ecommerce и какие альтернативы выбрать?
- В каком state будешь хранить данные?
- В каком варианте будет представлено время в Date.now?
- В каком порядке выполняются скрипты?
- В каком случае нужно прописывать id для элемента?
- Всегда ли загружаются скрипты синхронно?
- Всегда ли нужно указывать key?
- Всегда ли у дочернего элемента применяется тот цвет который ему указан?
- В чем нюанс vh на мобильных устройствах?
- В чем особенность конкатенации?
- В чем плюсы и минусы Translate относительно абсолютного позиционирования?
- В чем польза state-менеджеров?
- В чем различия Service Locator и Dependency Injection?
- В чем разница между Cohesion и Coupling?
- В чем разница между :focus и :focus-within?
- В чем разница между i++ и ++i?
- В чем разница между Listener и Observer?
- В чем разница между MobX и другими системами управления state?
- В чем разница между Observer и Publisher Subscriber?
- В чем разница между Origin и Host?
- В чем разница между POST и UPDATE?
- В чем разница между scroll и click?
- В чем разница между state managers?
- В чем разница между Task runner и сборщиком?
- В чем разница между внешней и глобальной областями видимости?
- В чем разница между двойным и односторонним связыванием у элемента?
- В чем разница между двунаправленным и однонаправленным связыванием?
- В чем разница между значением и идентичностью?
- В чем разница между разными видами позиционирования?
- В чем разница между сборщиками?
- Где брать дополнительные размеры для записи Infinity если закончились биты и байты?
- Где посмотреть скорость исполнения кода?
- Для каких задач лучше использовать список?
- Для чего делается минификация?
- Для чего использовать void?
- Для чего нужен &&?
- Для чего нужен JIT?
- Для чего нужен Key в списках?
- Для чего нужен Next?
- Для чего нужен StoryBook?
- Для чего нужен тип never?
- Для чего нужна Асимметричная криптография?
- Для чего нужно использовать разные теги?
- Для чего нужно разделение кода?
- Для чего нужно свойство Will-Change?
- Для чего нужны линтеры?
- Для чего нужны префиксы свойств?
- Должны ли микрофронтенды использовать общие данные?
- Есть ли библиотека для роутинга state manager?
- Есть ли временные ограничения на поиск работы?
- За счет чего можно открыть бургер меню?
- За счет чего при разработке всегда показана свежая версия кода?
- Зачем в State Manager класть карточки товара?
- Когда нужен Command Query Separation?
- Зачем нужен after?
- Зачем нужен Autoprefixer?
- Зачем нужен before?
- Зачем нужен dependency injection?
- Зачем нужен ESLint?
- Зачем нужен manifest.json?
- Зачем нужен prop key?
- Зачем нужен provide-inject?
- Зачем нужен Sass?
- Зачем нужен State Manager для вынесения бизнес-логики?
- Зачем нужен Yarn.lock?
- Зачем нужно двунаправленное связывание?
- Зачем нужно не блокировать поток выполнения кода?
- Зачем нужны алгоритмы во Frontend?
- За что отвечает тег title?
- Используется ли MVC в JQuery?
- Как устроено cache management во frontend?
- Используются ли плагины для сборщиков?
- Как Autoprefixer понимает где нужно поставить префикс?
- Как commit добавить в ветку?
- Как state попадает в Redux?
- Как адаптер связан с Cohesion?
- Как адаптер связан с Coupling?
- Какая алгоритмическая сложность быстрой сортировки?
- Какая временная сложность у Binary Search?
- Какая сложность сортировки пузырьком?
- Какая сложность сортировки списка?
- Как будет работать динамический импорт после сборки без использования сборщика?
- Как возможно выполнение двух параллельных синхронных операций?
- Как вредоносный код может начать отправлять данные на сервисе?
- Как выглядит CRUD для списка пользователей?
- Как добавить элемент в конец списка?
- Как должен вести себя Popup в разрезе доступности?
- Как достигается доступность?
- Как забивается память?
- Как заблокировать выполнение кода?
- Как задать значение по умолчанию у define props?
- Как задаются props?
- Как заставить элемент всегда быть выше остальных?
- Как заставить элемент выйти на передний план?
- Как заставить элемент уйти на задний план?
- Как зафиксировать элемент вверху "контейнера" при скролле?
- Какие данные лучше не хранить в LocalStorge?
- Какие UI-библиотеки важны на практике и как их применять?
- Какие алгоритмы важны на практике и как их применять?
- Чем отличаются виды микрофронтендов и где они применяются?
- Какие группы статус-кодов важны на практике и как их применять?
- Какие методы CRUD важны на практике и чем они отличаются?
- Какие области видимости бинов важны на практике и как их применять?
- Какие основные концепции flux важно понимать и почему?
- Какие особенности свойства color у элемента важно учитывать на практике и почему?
- Какие особенности фокусирования на элементе важно учитывать на практике и почему?
- Сравни подходы для доступа к базе данных из прикладного кода и объясни, когда какой подход выбрать.
- Сравни подходы к скорости памяти алгоритма и объясни, когда какой подход выбрать.
- Какие правила хорошего кода важно соблюдать и что ломается при нарушении?
- Какие сборщики важны на практике и как их применять?
- Какие сборщики мусора важны на практике и как их применять?
- Какие сложности алгоритмов кроме линейной встречаются чаще всего и как с ними работать?
- Сравни способы выравнивания элемента и объясни, когда выбирать каждый вариант.
- Сравни способы достучаться из консоли до кода собранного сборщиком и объясни, когда выбирать каждый вариант.
- Сравни способы модификации цвета и объясни, когда выбирать каждый вариант.
- Сравни способы поворота элемента и объясни, когда выбирать каждый вариант.
- Сравни способы позиционирования элемента и объясни, когда выбирать каждый вариант.
- Сравни способы реализации Web-анимации и объясни, когда выбирать каждый вариант.
- Сравни способы централизации элементов и объясни, когда выбирать каждый вариант.
- Какие стандарты написания кода важны на практике и как их применять?
- Какие стратегии чтобы сделать кнопку ярче важны на практике и как их применять?
- Чем отличаются типы сложности алгоритмов и как это влияет на код?
- Какие требования к Pull Request важны и чем они обоснованы?
- Сравни фреймворки для анимации по назначению и типичным сценариям применения.
- Сравни Vite, Webpack и Rollup.
- Какие минусы у JSON.stringify?
- Какие плюсы и минусы Dependency Injection?
- Какие плюсы и минусы Flux?
- Какие плюсы и минусы force push?
- Какие плюсы и минусы sprite?
- Какие плюсы и минусы Storybook?
- Какие плюсы и минусы многопоточности (multithreading)
- Какие плюсы и минусы написания кода в разных редакторах?
- Какие плюсы и минусы написания чата на Socket на PHP?
- Какие плюсы и минусы подхода с immutable state?
- Какие плюсы и минусы сброса фона у элемента?
- Какие проблемы Frontend решает сборщик кроме склеивания файлов в один?
- Какие проблемы решают state manager?
- Какие свойства нужно найти чтобы определить место где происходит scroll?
- Какие свойства позиционируют и не влияют на поток?
- Какие свойства регулируют прозрачность элемента?
- Какие подходы использовать для разделения монолита на микрофронтенды?
- Какие требования к разработчику чтобы сделать страницу accessible?
- Какие форматы данных есть в JSON?
- Как из Unknown получить другой тип?
- Как избежать утечек памяти при размонтировании?
- Как изменить сообщение коммита когда он находится в ветке?
- Как измерить рост популярности библиотеки?
- Каким условиям должен отвечать key?
- Как использовать overflow если нужен scroll?
- Как код из main попадает в ветку release?
- Как коммитишь код?
- Как можно не допустить batching?
- Как можно подменить скрипт?
- Как мутируется state в MobX?
- Как называется самый популярный алгоритм сборки мусора?
- Как называются оси в flexbox?
- Как найти идентификатор в каком-либо месте кода?
- Как не обрезать текст в несколько строк если он не вмещается в элемент?
- Как обращаться к криптографическому сервису чтобы бизнес-логика знала как можно меньше о процессе шифрования?
- Какое свойство позволяет спрятать элемент, но сохранить занимаемое им пространство?
- Какое сравнение в PureComponent?
- Как определить какие теги можно вкладывать?
- Как остановить Bubbling после click?
- Как отменить не последний commit?
- Как отменить последний коммит?
- Как отобразить пользователю большое количество данных приходящих с Backend?
- Как отцентрировать блочный элемент по вертикали?
- Как отцентрировать блочный элемент по горизонтали?
- Как перевернуть строку?
- Как перемещать элемент не задевая остальные элементы?
- Как позиционируется элемент со свойством relative?
- Как поймешь что библиотека популярна?
- Как получить доступ к размеру элемента?
- Как получить разницу во времени между тем которое прислал сервер и Date.now?
- Как понять что загрузились все ресурсы?
- Как посмотреть весь список свойств?
- Как посчитать когда пользователь находится на нужном моменте при scroll?
- Как по шагам логическое отрицание работает для строки?
- В чем разница между Server Rendering и SPA?
- Как Server-Side Rendering решает минусы SPA?
- Что такое Module Federation и как с его помощью строят микрофронтенды?
- Почему для пагинации предпочитают курсор, а не offset?
- Что такое циклические зависимости между модулями и как их устранять?
Хуки
- Что такое useCallback?
- В чем разница между useEffect и useLayoutEffect?
- Зачем нужен хук useMemo?
- В чем разница между useMemo и useCallback?
- Что такое useEffect?
- Зачем нужен хук useRef?
- Что такое useState?
- Зачем нужен массив зависимостей в useEffect?
- Какие вариации использования useEffect важны на практике и как их применять?
- Какие проблемы решает useCallback?
- Что такое useContext?
- В чем разница между useState и useRef?
- Как работает return в useEffect?
- Как реализовать жизненные циклы компонентов с помощью useEffect?
- Как работает хук UseState?
- Приведи примеры использования useRef.
- Для чего нужен callback в useEffect?
- Какие аргументы принимает useEffect?
- Для чего нужно писать кастомные Hook?
- Какие hook для оптимизации применяются на практике и какие задачи они решают?
- Что если передать пустой массив в useEffect?
- useEffect выполняется синхронно или асинхронно?
- Всегда ли достаточно useCallback и useMemo для перерендеринга?
- В чем разница между Redux и useContext?
- В чем разница между useRef и forwardRef?
- В чем разница между useState и useReducer?
- Вызывает ли изменение useRef перерисовку компонента?
- Для чего нужен второй callback в useMemo?
- Зачем нужен hook useLayoutEffect?
- Какие данные можно хранить в useState?
- Чем отличаются виды зависимостей Hooks и где они применяются?
- Какие нюансы в работе React Hooks важны на практике и как их применять?
- Какие особенности зависимостей useEffect важно учитывать на практике и почему?
- Как реализовать unmount через useEffect?
- Разбери, может ли useState принять callback: в каких случаях и от чего это зависит.
- Почему классовые компоненты заменили на React Hooks?
- Что возвращает useState?
- Что нужно useCallback для избежания лишних рендеров?
- Объясни, будет ли вызван useEffect, если у него в зависимостях изменился Ref: от чего это зависит и почему.
- Быстрее работает React Hook Form или Formik?
- В чем проблема использования useCallback, useMemo, React memo?
- В чем разница между React Context и useContext?
- В чем разница между useEffect и useCallback?
- В чем разница между useMemo и useEffect?
- В чем разница между useState и state manager?
- В чем разница между useState и useCallback?
- В чем разница между работой внутри в React Hook Form и в Formik?
- Вызовется ли рендер при изменении свойства объекта записанного в useState?
- Выполнится ли перерисовка при изменении свойства объекта записанного в useState?
- Где нельзя использовать hooks?
- Где применяется Hook в State Manager?
- Для чего нужна cleanup у useEffect?
- Для чего передавать функцию в UseState?
- Добавляются ли какие-либо хуки к компоненту если подключен роутер в приложении?
- Если сохранить input в useRef, будет ли он считаться контролируемым?
- Есть ли бизнес-логика в useContext?
- Есть ли в React аналоги useEffect?
- Зачем нужны deps в useCallback?
- За что отвечает второй параметр в useMemo?
- За что отвечает массив зависимостей в useEffect?
- Изменится ли переменная из UseState при перерендеринге?
- Как hook useState сохраняет состояние между перерендерами?
- Как React Hooks сравнивают deps между собой?
- Как useCallback помогает оптимизировать дочерние компоненты?
- Как useMemo сверяет пропсы?
- Как useRef взаимодействует с DOM?
- Как useRef используется с useImperativeHandle?
- Как в useEffect в React снять обработчик при размонтировании компонента?
- Как в useState сохранить первоначальное состояние чтобы компонент не перерендовался?
- Как выполнить функцию перед монтированием компонента с помощью useEffect?
- Как добиться срабатывания useEffect при мутировании объекта в зависимостях?
- Как затриггерить useEffect?
- Какие агрументы передаются в UseMemo?
- Какие возможности дает useEffect в React?
- Какие данные помимо DOM можно хранить в useRef?
- Какие hooks для работы с API применяются на практике и какие задачи они решают?
- Какие hooks помимо useState и useEffect применяются на практике и какие задачи они решают?
- Какие нюансы useEffect важны на практике и как их применять?
- Какие особенности зависимостей useCallback важно учитывать на практике и почему?
- Какие особенности зависимостей useMemo важно учитывать на практике и почему?
- Чем отличаются состояния useEffect и какие переходы между ними возможны?
- Какие классовые компоненты заменяет useEffect?
- Какие параметры принимает useState?
- Какие плюсы и минусы React Hook Form?
- Какие плюсы и минусы useEffect?
- Какие проблемы решает useMemo?
- Как использовать useEffect помимо запросов на сервер?
- Как использовать с UseRef?
- Какое условие, чтобы React распознал функцию как хук?
- Как оптимизировать без useMemo?
- Как отправить запрос в useEffect?
- Как очистить состояние в useEffect?
- Как писать пользовательский hook?
- Как подключить состояние в компоненте с помощью useState?
- Вызывает ли ререндер страницы useEffect?
- Для чего используется хук useSelector?
- Какие Hooks позволяют оптимизировать React?
- Зачем нужны правила хуков и что будет при нарушении порядка их вызова?
Объекты и прототипы
- Что такое this?
- Что такое глубокое копирование объекта?
- Что такое контекст?
- Что такое прототип?
- Что такое прототипное наследование?
- Сравни способы копирования объектов и объясни, когда выбирать каждый вариант.
- В чем разница между глубоким (deep copy) и поверхностным (shallow copy) копированием?
- Как правильно сравнивать объекты?
- Как клонировать объект в JavaScript?
- В чем разница между свойствами __proto__ и prototype?
- Что такое поверхностная копия (shallow copy)
- Какие плюсы и минусы глубокого копирования через JSON.stringify?
- Что такое наследование?
- В чем разница между объектом и примитивными типами данных?
- Как настроить контекст?
- Как проверить, что поле в объекте существует?
- Как сделать копию объекта?
- Как создать иммутабельный объект?
- Разбери, можно ли запретить изменять объект: при каких условиях и какие ограничения.
- Что такое ключ объекта в JavaScript?
- В чем разница между областью видимостью и контекстом?
- Как предотвратить потерю контекста?
- Что такое контекст выполнения?
- Всегда ли Window является главным контекстом?
- В чем разница между использованием state-менеджеров и контекстным написанием?
- В чем разница между окружением и контекстом?
- В чем разница между стейт-менеджером и контекстом?
- Где доступен контекст?
- Для чего нужен провайдер контекста?
- Зачем нужно наследование?
- Из каких основных элементов состоит контекст?
- Какая сложность алгоритма итерации по новому объекту и добавления туда данных?
- Какая сложность вставки элемента в объект?
- Как в JS устроено наследование?
- Как вызывается контекст?
- Как глубоко знаешь MobX?
- Как запретить изменение через дескриптор?
- Как запретить изменять контекст?
- Какие плюсы и минусы контекста?
- Какие проблемы могут возникнуть с неверным использованием контекста?
- Как использовать оператор Keyof для объекта?
- Как можно работать с контекстом в JS?
- Как отслеживать изменения в объекте?
- Как подписаться на контекст?
- Как получить значения объекта в JavaScript?
- Как получить прототип?
- Почему не стоит переопределять и расширять встроенные прототипы?
- В чём разница между оператором in и методом hasOwnProperty?
Классы
- Что такое SOLID?
- Какие основные принципы объектно-ориентированного программирования (ООП) ты знаешь?
- Что такое объектно-ориентированное программирование (ООП)
- Что такое полиморфизм?
- Какие есть принципы SOLID?
- Что такое инкапсуляция?
- В чем разница между абстрактным классом и интерфейсом?
- В чем разница между классом и объектом?
- В чем разница между функциями классическими и стрелочными?
- Как классы наследуются друг от друга?
- Какое знаешь наследование кроме классового?
Массивы и структуры данных
- Что такое Map?
- Какие методы массива важны на практике и чем они отличаются?
- В чем разница между forEach и map?
- Что такое Set?
- В чем разница между Map и Object?
- Какие методы массива мутирующие?
- Как проверить, является ли объект массивом?
- В чем разница между Map и Set?
- Какие структуры данных важны на практике и как их применять?
- Что такое useReducer?
- Относится ли Map к коллекциям?
- В чем разница между стеком и очередью?
- Для чего нужен reduce?
- Какие методы массива не мутируют исходный массив?
- Когда нужно применять Map?
- В чем разница между WeakMap и Map?
- В чем разница между методами массива slice и splice?
- В чем разница между методом массива forEach и циклом for?
- Какая сложность операций с хеш-таблицей?
- Что такое стек вызовов?
- Slice или splice мутирует массив?
- Бесконечно ли растет очередь задач?
- В чем разница между some и every?
- Для чего используется WeakMap?
- Если первым пришел в стек то каким выйдешь?
- Если пришел первым в очередь то каким выйдешь?
- Как будешь действовать, если стек вызовов будет заполнен?
- Какие стек менеджеры важны на практике и как их применять?
- Какие элементы являются узлами дерева?
- Как комбинировать хеш-таблицы?
- Как оставить в массиве уникальные значения?
- Как отработает очередь из микро и макротасков?
- Как получить сразу первый и последний элементы массива не зная его длины?
- Как получить элемент массива по индексу?
- Как поменять порядок всех элементов массива на обратный?
- Чем Map отличается от обычного объекта, а Set от массива?
Слияние, rebase и конфликты
- В чем разница между git rebase и git merge?
- Что такое cherry-pick в Git?
- Что такое git rebase?
- Как в Git объединить два коммита в один?
- Как перенести commit из одной git ветки в другую?
- Что такое git merge?
- В чем разница между merge и cherry-pick?
- Для чего нужен base commit в rebase?
- Как в feature ветку добавить изменения из dev ветки в Git?
- Как в Git выполнить слияние веток?
- Какой командой в Git можно скопировать коммит в branch?
- Как работает функция merge?
- Как решить конфликт слияния веток в Git?
Компоненты
- Что такое JSX?
- Что такое key в React?
- В чем разница между классовыми и функциональными компонентами в React?
- Для чего нужно использовать ключи в React?
- Что такое React Portal?
- В каких случаях перерисовывается компонент в React?
- Что такое компонент?
- Сравни способы стилизации компонентов и объясни, когда выбирать каждый вариант.
- Как родительские и дочерние компоненты обмениваются данными?
- Что такое управляемый компонент в React?
- Какие возможности React доступны только в классовых компонентах?
- Какие компоненты в React нужны в типичном решении и за что они отвечают?
- Разбери, можно ли в key в React использовать индекс массива: при каких условиях и какие ограничения.
- Что такое React.Fragment?
- Что такое неконтролируемый компонент?
- В чем разница между контролируемыми и неконтролируемыми компонентами?
- Как в Vue компоненты коммуницируют между собой?
- Как взаимодействовать с жизненным циклом компонента?
- Сравни способы общения между компонентами и объясни, когда выбирать каждый вариант.
- Как передаются данные в компоненты React?
- Почему отказались от классовых компонентов в React?
- Приведи пример использования React Portal.
- Что такое компонент высшего порядка?
- Что такое контролируемый компонент?
- Что такое неуправляемый компонент в React?
- В чем разница между серверным компонентом и клиентским?
- Чем отличаются состояния React компонента и какие переходы между ними возможны?
- Как происходит сравнение props в React?
- Разбери, может ли функциональный компонент повторить весь функционал классового: в каких случаях и от чего это зависит.
- Почему JSX используется в React?
- Чего не было в функциональных компонентах что было в классовых в React?
- Что такое Prop Drilling в React?
- Что такое классовые компоненты?
- Будут ли перерисовываться дочерние компоненты, если у родительского изменилось состояние?
- В чем заключается ускорение разработки при использовании React?
- В чем может быть проблема при получении данных двумя компонентами из одного action?
- В чем разница между PureComponent и обычным компонентом?
- В чем разница между функциональным и простым компонентом?
- Где хранится состояние компонента?
- Делишь ли Vue компоненты на глупые и умные?
- Зачем использовать Slot в Select компоненте React?
- Зачем нужен key при создании списка данных в JSX?
- Зачем нужна разбивка на компоненты?
- Как JSX-разметка попадает в JavaScript?
- Как JSX трансформируется в DOM?
- Какая область видимости у компонентов?
- Как в Vue пробросить свойства через несколько компонентов?
- Как взять компонент из одного репозитория для использования в другом?
- Как вынести компоненты чтобы использовать их в другом проекте?
- Каких антипаттернов избегать при создании таблицы с подкомпонентами?
- Какие антипаттерны стараешься не использовать при написании React компонентов?
- Какие есть Ref в классовых компонентах?
- Какие есть Ref в функциональных компонентах?
- Чем отличаются виды компонентов и где они применяются?
- Какие встроенные типы React для Props важно знать и когда их применять?
- Какие компоненты браузера нужны в типичном решении и за что они отвечают?
- Какие минусы JSX важны на практике и как их применять?
- Какие ограничения клиентских компонентов важно учитывать и как они влияют на решение?
- Какие ограничения серверных компонентов важно учитывать и как они влияют на решение?
- Сравни подходы к написанию переиспользуемых компонентов и объясни, когда какой подход выбрать.
- Какие проблемы работы с классовыми компонентами встречаются на практике и как их решать?
- Какие пропсы у React.Fragment важны на практике и как их применять?
- Сравни способы задокументировать компонент и объясни, когда выбирать каждый вариант.
- Сравни способы обновления компонента в React и объясни, когда выбирать каждый вариант.
- Сравни способы создания динамических компонентов на Vue и объясни, когда выбирать каждый вариант.
- Чем отличаются типы Vue.js компонентов и как это влияет на код?
- Какие исключения есть в Bundle React?
- Какие плюсы и минусы jsx?
- Какие плюсы и минусы декомпозиции компонента в React?
- Какие плюсы и минусы неуправляемого компонента?
- Как изменить из родительского компонента свойства дочернего?
- Как кеширование влияет на дочерний компонент?
- Как компонент понимает, перерисовались ли пропсы?
- Как контролировать компонент при кешировании?
- Как коспоненты узнают об изменениях параметров в соседних компонентах?
- Как обработать форму с неуправляемыми компонентами?
- Как определить находится ли компонент в области видимости экрана?
- Как отобразить список в компоненте?
- Как передавать что-либо между компонентами на одном уровне?
- Как передается функция в дочерний компонент?
- Как передать что-либо через вложенность в несколько компонентов?
- Как по коду компонента определяешь что он хорошо читается?
- Как получить данные из дочернего компонента?
- Как понять что компонент самодостаточен?
- Как попадают стили из одного компонента в другой без Scope?
- Чем Composition API отличается от Options API?
- Как передавать данные между компонентами во Vue: props и emits?
- В чём разница между v-if и v-show и зачем нужен key в v-for?
- Что такое слоты (slots) во Vue и какие они бывают?
- Как работают provide и inject во Vue?
- Что такое composables и чем они лучше mixins?
Жизненный цикл
- Что такое жизненный цикл компонента в React?
- Какие методы жизненного цикла в React важны на практике и чем они отличаются?
- В чем разница между created и mounted?
- Какая функция срабатывает при размонтировании компонента?
- Какие методы жизненного цикла Vue важны на практике и чем они отличаются?
- Из каких этапов состоит жизненный цикл компонента во Vue и что происходит на каждом этапе?
- Зачем нужно размонтирование в React?
- Как в функциональном компоненте можно реализовать Unmount?
- Какие жизненные циклы компонента в Angular важны на практике и как их применять?
- Какие компоненты жизненного цикла нужны в типичном решении и за что они отвечают?
- Как отследить размонтирование функционального компонента?
- Как очистить подписку при размонтировании компонента?
- Зачем нужен Should Component Update?
- Какие хуки жизненного цикла есть во Vue 3 Composition API?
- Чем constructor отличается от ngOnInit в Angular?
- Зачем нужен ngOnDestroy и как правильно отписываться от Observable?
Flexbox
- В чем разница между Grid и Flex?
- Что такое flex?
- Что такое Flex-Grow?
- Когда для таблицы использовать CSS Grid, Flexbox или HTML table?
- Как отцентровать блок с помощью Flex?
- Как поменять направление Flex?
- Что означает flex: 1 и как работают flex-grow, flex-shrink и flex-basis?
- В чём разница между justify-content, align-items и align-content?
- Почему flex-элемент не сжимается меньше содержимого и как это исправить?
- Как работает flex-wrap и когда его использовать?
- Как центрировать элемент по горизонтали и вертикали в CSS?
Современный JS ES6+
- Что такое rest оператор?
- Что такое spread оператор?
- Что такое деструктуризация в JavaScript?
- В чем разница между spread и rest операторами?
- Зачем нужны модули?
- Какие нововведения были в ES6?
- Как работают модули?
- ECMAScript и JavaScript это одно и то же или нет?
- Где используют spread оператор в JavaScript?
- Зачем нужен оператор nullish coalescing `??`?
- Зачем нужно знать что используется старая версия ECMAScript?
- Как взаимодействовать с модулем не находясь внутри него?
- Какие особенности у ES модулей?
- Какие технологии написаны на основе Proxy?
- Как можно применять proxy в Frontend?
- Для чего нужен тип Symbol в JavaScript и чем он отличается от строки?
- Что такое итератор в JavaScript и как работает метод next()?
Позиционирование элементов
- Какие свойства position в CSS важны на практике и как они влияют на поведение?
- Как в CSS избежать переполнения контента?
- Какие свойства CSS для управления переполнением контента важны на практике и как они влияют на поведение?
- Сравни системы раскладки HTML в CSS и объясни их назначение.
- Как исправить переполнение контентом в CSS?
- Как можно располагать элементы в CSS?
- Какое значение position выбрать для фиксированного header?
- Как поведет себя элемент, если задать ему параметры Position: Absolute, Top: 5px?
- Как поведет себя элемент с параметрами Position: Relative, Top: 5px?
Производительность в JS
- Сравни способы мемоизации и объясни, когда выбирать каждый вариант.
- Что такое мемоизация?
- Как работает сборщик мусора?
- Что такое reflow?
- Что такое repaint?
- Сравни подходы для оптимизации загрузки сайта и объясни, когда какой подход выбрать.
- Как оптимизировать изображения?
- Когда нужно использовать мемоизацию?
- Что такое GarbageCollector?
- Сравни способы решения утечки памяти и объясни, когда выбирать каждый вариант.
- Что такое сборщик мусора (Garbage Collector)
- Объясни, будет ли вызван Reflow при изменении размера элемента: от чего это зависит и почему.
- Для чего нужен Garbage collector?
- Как Garbage Collector чистит память?
- Как запускается Garbage Collection?
- Какие причины перерисовки элемента встречаются чаще всего и как их диагностировать?
- Какие плюсы и минусы reflow?
- Какие плюсы и минусы утечки памяти?
- Какие свойства вызывают reflow?
- Как избежать reflow?
- Как отлавливал утечки памяти?
- В чём разница между debounce и throttle и где их применяют?
- Как выполнить тяжёлую задачу в JavaScript, не блокируя интерфейс?
- Что такое Core Web Vitals и как улучшить эти метрики?
- Что такое виртуализация списков и как она реализуется?
Селекторы и специфичность
- Что такое специфичность в CSS?
- Какие селекторы в CSS важны на практике и как их применять?
- Что такое !important в CSS?
- Как браузер ищет CSS селекторы?
- Как будет выглядеть Workflow поиска селектора при баге в CSS коде?
- Как влияет на Relayout селектор на родителя в CSS?
- Как вычисляется CSS Specificity?
- Какие нестандартные случаи специфичности в CSS важны на практике и как их применять?
- Как можно увеличить вес у CSS селектора?
- Как повысить приоритет CSS Selector?
Базовые типы
Состояние
Основы React
- Какие особенности React важно учитывать на практике и почему?
- Какие проблемы решает React?
- Чем является React фреймворком или библиотекой?
- В чем разница между React и JQuery?
- В чем разница между React и ReactDOM?
- Как React узнает об изменениях?
- Как обратиться к DOM из React?
- Как работает React под капотом?
- Как тестировать React приложение?
- После каких нововведений поменялась версия React?
- Что такое Strict Mode в React?
- Всегда ли React быстрее JavaScript?
- В чем декларативность в React?
- В чем разница работы Event в React и в DOM?
- Где нужно использовать классы в React?
- Данные в React передаются однонаправленно или разнонаправленно?
- Есть ли Shadow DOM в React?
- За счет чего React улучшает продуктивность работы с DOM деревом?
- Зачем библиотека React делится на пакеты ReactDOM и React?
- Зачем бывает нужен import React?
- Зачем нужно всегда импортировать React в scope модуля?
- Зачем нужно связывание в React?
- Зачем переходить с JQuery на React?
- Как React защищает от XSS?
- Как React определяет, какие DOM узлы нужно менять?
- Как React сравнивает 2 узла?
- Как React сравнивает значения?
- Как в гексагональной архитектуре разместить клиентское приложение на React?
- Как в одном приложении связать React, GraphQL и гексагональный сервер?
- Чем отличаются виды React приложений и где они применяются?
- Сравни подходы к разработке проекта на React и объясни, когда какой подход выбрать.
- Какие основные подходы в написании кода в React?
- Какие плюсы и минусы Create React App?
- Какие проблемы возникают при бесконечном scroll на React?
- Какие проблемы со сбросом формы в React?
- Какие самые частые проблемы с формами в React?
- Как на React очистить поля после отправки формы?
- Какое самое важное обновление было в React?
- Какое свойство нужно указывать спискам в React?
- Что такое Wrapper Component?
Box Model
Основы TypeScript
- Чем отличаются типы в TypeScript и как это влияет на код?
- В чем разница между JavaScript и TypeScript?
- Как заменить TypeScript на JavaScript?
- Какую типизацию имеет TypeScript?
- Что такое TypeScript?
- Что такое восклицательный знак в TypeScript?
- Что такое пространства имен TypeScript?
- Что такое тип в TS?
- Объясни, будет ли TypeScript строгой проверкой типизации: от чего это зависит и почему.
- В чём особенность TypeScript?
- В чем разница между паттернами в TypeScript и в других языках?
- Зачем нужен TypeScript?
- Зачем нужен TypeScript, если есть PropTypes и JSDoc?
- Какая иерархия типов в TypeScript?
- Какие аналоги TypeScript важны на практике и как их применять?
- Какие кейсы использования только TypeScript важны на практике и как их применять?
- Какие парадигмы в TypeScript важны на практике и как их применять?
- Какие плюсы TypeScript для бизнеса важны на практике и как их применять?
- Какие плюсы TypeScript для разработчика важны на практике и как их применять?
- Какие плюсы и минусы конфигурации TypeScript?
- Какие преимущества PropTypes перед TypeScript?
- Как можно отключить строгую типизацию в TS для определенных мест?
- Как переопределять типы в TypeScript?
- Что такое утверждение типа (type assertion) в TypeScript?
Модели ветвления и командная работа
- Что такое GitFlow?
- Как строится командная разработка с помощью GitFlow?
- В чем разница между Git Flow и GitHub Flow?
- В чем разница между Git Flow и GitHub Flow от создания фичи до попадания в production?
- Есть ли ветка develop в Git Flow?
- Как выглядит Git Flow от создания фичи до попадания в production?
- Как заливали фичи в Git?
- Для чего используется Branching Strategy?
- В чем разница между Pull Request и Merge Request?
- В чем разница между Trunk-based и Feature Branch?
- Какие модели ветвления в Git важны на практике и как их применять?
Псевдоклассы и псевдоэлементы
Теги и их категории
- Какие теги в HTML важны на практике и как их применять?
- В каком порядке сработают обработчики клика на div с вложенной кнопкой?
- В чем особенность тега div?
- В чем проблема создания дополнительного div элемента?
- Где используется тег div?
- Как div повернуть на 45 градусов?
- Как версткой на div сделать над элементом слева круг с количеством ошибок?
- Сравни способы позиционирования Div и объясни, когда выбирать каждый вариант.
- Какие плюсы и минусы написания всего на div?
- Какие свойства есть у div?
- Какими способами можно центрировать Div внутри Div?
- Какое значение свойства display у div по умолчанию?
- Как отцентрировать div через абсолютные свойства?
Дженерики
Паттерны и подходы
Основы CSS
- В чем разница между display: block и display: inline?
- В чем разница между display: none и visibility: hidden?
- Для чего нужны CSS module?
- Какие CSS-препроцессоры важны на практике и как их применять?
- Какие значения свойства display важны на практике и как их применять?
- Сравни способы подключение CSS к HTML и объясни, когда выбирать каждый вариант.
- В чем разница между rem и em?
- Как работает Request Animation Frame?
- Что такое CSS-in-JS?
- Что такое Tailwind CSS?
- В чем разница между CSS in JS и CSS модулей?
- В чем разница между значениями величин в CSS?
- В чем разница между стилями для id и для class в CSS?
- Для чего нужен CSS препроцессор?
- Зачем нужен CSS Reset?
- Зачем нужна изоляция в CSS?
- Зачем нужна семантика в CSS классах?
- Как еще можно скрыть элемент кроме display: none и visibility: hidden?
- Какие плюсы и минусы Atomic CSS?
- Как изменить inline-style в CSS?
- Как оптимизировать CSS стили?
- Как расшифровывается CSS?
- Почему есть три разные технологии для HTML, CSS и JavaScript?
- Что такое CSS Reset?
- Что такое критический CSS?
- Будут ли в render tree присутствовать элементы с display: none?
- В каком случае нужно прописывать CSS class для элемента?
- Воздействует ли text-align: center на элемент с display: block?
- В чем опасность импортов в самом CSS?
- В чем разница между HTML и CSS?
- В чем разница между Reset.css и Normalize.css?
- В чем разница между директивой import в CSS и import в препроцессоре?
- Для чего нужен БЭМ в CSS?
- Для чего нужно написание CSS класса через амперсанд в Sass?
- Для чего нужны модульные стили в CSS?
- Для чего подходят разные виды изоляции в CSS?
- Если в процессе рендеринга поменять CSS свойства, какие этапы рендеринга будут перезапущены?
- Есть ли import в CSS?
- Есть ли модульность в CSS?
- Есть ли семантика в CSS классах?
- Зачем нужен CSS для создания Web приложений?
- Зачем скрывать элемент не используя display: none?
- За что отвечает CSS?
- Как CSS может блокировать рендер страницы?
- Какая конструкция помогает реализовать перестройку элементов в CSS?
- Какие проблемы бывают при использовании стилей в CSS?
- Как браузер определяет необходимость запроса CSS и JavaScript при загрузке страницы?
- Как браузер читает CSS?
- Как в CSS настроить стили для разных браузеров?
- Как в CSS определяется приоритетность стилей?
- Какие CSS свойства влияют на размеры блочного элемента?
- Какие величины в CSS важны на практике и как их применять?
- Чем отличаются виды CSS Reset и где они применяются?
- Какие единицы измерения в CSS важны на практике и как их применять?
- Какие значения величин в CSS важны на практике и как их применять?
- Какие проблемы CSS-in-JS встречаются на практике и как их решать?
- Какие плюсы и минусы CSS процессора?
- Какие плюсы и минусы объединения CSS классов?
- Какие плюсы и минусы объектно-ориентированного процесса в CSS?
- Какие плюсы и минусы отсутствия изоляции в CSS?
- Какие плюсы и минусы при написании одного большого класса в CSS?
- Какие подводные камни при импорте на чистом CSS?
- Какие свойства CSS влияют на последний этап отрисовки компонента?
- Какие свойства CSS самые тяжёлые для браузера?
- Как избежать пересечения идентификаторов CSS?
- Как изменить background у изображения в CSS?
- Как изменить количество колонок через Props в CSS-in-JS?
- Как измеряется производительность CSS модулей?
- Каким свойством CSS скрыть блок чтобы он остался доступен для поисковых движков?
- Каких особенностей препроцессоров нет в CSS?
- Как лучше реализовать disabled состояние кнопки: через CSS или JavaScript и почему?
- Как между собой связаны HTML, CSS и JavaScript?
- Как оптимизировать медленную страницу, написанную на HTML, CSS, JS?
- В чем разница между использованием BEM и Scoped-стилей?
- Какие архитектурные стили применяются на практике и какие trade-off у них есть?
- Заблокирует ли большой файл со стилями render Веб-страницы?
Семантика
Контекст и State managers
- Зачем нужна библиотека React Context?
- Какие плюсы и минусы MobX в React?
- Когда лучше использовать React Context?
- Что такое state manager в React?
- В чем разница между Redux и React Context?
- Какие плюсы и минусы React Context?
- В чем разница между изменением Context и State в React?
- Дает ли использование React Context выигрыш с точки зрения производительности?
- Зачем нужен менеджер состояния в React?
- Как выглядит поток данных в приложении React с Redux?
- Какие есть альтернативы React контекста и в каких случаях их выбирать?
- Как обойтись без менеджера состояния в React?
- Что такое Redux Toolkit и какие проблемы Redux он решает?
- Чем Zustand отличается от Redux и когда его выбирать?
- Что такое серверное состояние и зачем нужен TanStack Query (React Query)?
- Почему Context API не подходит для часто меняющегося состояния?
- Что такое оптимистичное обновление и как его реализовать?
Union и Intersection типы
CSS Grid
- Что такое grid?
- Что такое fr в CSS Grid и чем он отличается от процентов?
- Как работают grid-template-areas?
- В чём разница между auto-fit и auto-fill в repeat()?
- Что такое minmax() и как его использовать в Grid?
- Что такое subgrid и какую проблему он решает?
- Как работает grid-auto-flow и auto-размещение элементов?
- Как позиционировать элементы в Grid по линиям и использовать именованные линии?
- Чем gap отличается от margin и почему его лучше использовать в Grid и Flex?
Utility Types
- Что такое Record в TypeScript?
- Что такое Partial в TypeScript?
- Что такое Pick в TypeScript?
- Что делают Partial, Required, Readonly и Pick в TypeScript?
- В чём разница между Omit, Exclude и Extract в TypeScript?
- Как работают Record, ReturnType, Parameters и Awaited?
- Что такое mapped types и как написать свой utility-тип?
Основы HTML
- Что делает браузер при получении HTML?
- Объясни, будет ли одинаково работать HTML разделенный с JavaScript без React и с React: от чего это зависит и почему.
- В чем разница между JSX и HTML?
- Где найти и как использовать коды специальных символов в HTML?
- Как готовая HTML-разметка помогает поисковым системам?
- Как вставить произвольный HTML в React?
- Как отрендерить HTML в JSX?
Server Side Rendering
- Что такое Next.js?
- В чем особенность React SSR?
- Какие режимы рендеринга есть в Next.js: SSR, SSG, ISR и CSR?
- Что такое гидрация в SSR и какие проблемы с ней возникают?
- Чем App Router в Next.js отличается от Pages Router?
- В чём разница между Server Components и Client Components в Next.js?
- Что такое ISR и как работает revalidate в Next.js?
- Как устроено кеширование в Next.js App Router?
- Что такое Server Actions в Next.js?
- Как работают streaming и Suspense в Next.js?
- Чем getServerSideProps отличается от getStaticProps в Next.js?
- Как работает компонент next/image и зачем он нужен?
- Что такое middleware в Next.js и для чего его используют?
- Как работают динамические маршруты и generateStaticParams в Next.js?
Состояние и Pinia
Реактивность
- В чем разница между computed и watch?
- Что такое computed?
- В чем разница между props, data и computed?
- В чём разница между ref и reactive?
- В чём разница между методами и Computed свойствами?
- Вызывается ли watchEffect только при изменении?
- Для чего используется Composition API во Vue?
- Следит ли watch во Vue за вложенными свойствами объекта?
- В чём разница между ref и reactive во Vue 3?
- Чем computed отличается от watch и методов во Vue?
- В чём разница между watch и watchEffect?
- Как устроена реактивность Vue 3 и чем она отличается от Vue 2?
Основы Git
- В чем разница между git pull и git fetch?
- Есть ли ссылка на GitHub?
- Зачем нужен GitHub?
- Зачем нужен Git, если есть FTP и FTPs?
- Какие плюсы и минусы работы с Git?
- В чем разница между git clone и git init?
- Для чего нужна команда git config?
- Сравни способы клонирования репозитория в Git и объясни, когда выбирать каждый вариант.
- Как работает git clone?
- Чем отличаются git commit и git push?
Обработка ошибок
Ошибки и отладка
- Что такое CORS ошибка?
- Как дебажишь код?
- Какие бывают коды ошибок?
- Сравни способы отслеживания и обработки ошибок и объясни, когда выбирать каждый вариант.
- Как обрабатывать исключения?
- Когда использовать инструменты debugging кроме console.log?
- В чем разница между componentDidCatch и getDerivedStateFromError?
- В чем разница между Debugger и консолью?
- Дебажил ли MobX state?
- Какие критерии для выявления причины ошибки 500 важны и как по ним оценивать решение?
- Сравни способы перехвата ошибок в WEB и объясни, когда выбирать каждый вариант.
- Какие ошибки у статусов кода 400?
- Какие плюсы и минусы debugging через консоль?
- Как искать ошибку, найденную у конкретного пользователя?
- Как найти ошибку в алгоритме при погрешности в больших значениях?
- Как обработать ошибку при изменении данных?
Формы и контролы
API и асинхронность
История и отмена изменений
- Зачем нужна команда git stash?
- В каких случаях используется stash в git?
- Зачем нужна команда git bisect?
- Зачем нужна команда git reflog?
- Какая структура запроса git diff?
- Как временно сохранять изменения в коде в локальном хранилище Git?
- Как заставить Git что-либо забыть?
- Как получить последнюю версию файла в Git?
- Сравни способы отмены коммита в Git и объясни, когда выбирать каждый вариант.
- Что такое git revert?
- Как найти коммит, в котором не было проблемы с утечкой памяти в Git?
- Какой инструмент в Git поможет найти коммит с багом?
Ветки
Роутинг
React 18+
Продвинутые типы
- Что такое Enum в TypeScript?
- Что такое infer в TypeScript?
- В чем разница между Literal Types и Enum в TypeScript?
- Есть ли ограничение в приведении типов через as в TypeScript?
- Зачем нужны конструкции с помощью extends в TypeScript?
- Как влияет на оптимизацию использование Enum или Object в TypeScript?
- Как проверять данные с сервера, если TypeScript проверяет типы только при компиляции?
- Какой тип у ошибки в блоке catch в TypeScript?
- Что делает оператор satisfies в TypeScript и когда он нужен?
- Что делает конструкция as const в TypeScript?
Type Narrowing и Guards
- Во что компилируется type guard в TypeScript?
- Что такое сужение типов (type narrowing) в TypeScript?
- Что такое пользовательские type guards и assertion functions?
- Что такое дискриминированные объединения (discriminated unions) в TypeScript?
- Чем отличаются unknown, any и never и как они связаны с сужением типов?
Современные возможности
Responsive дизайн (адаптивность)
- В чем разница между подходами к адаптивности в CSS?
- Для чего нужен @media screen в CSS?
- Какие свойства у @media в CSS важны на практике и как они влияют на поведение?
- Что такое mobile-first подход в CSS?
- Что такое container queries и чем они отличаются от media queries?
- Как работает функция clamp() и где её применять?
- Чем отличаются единицы vh, svh, lvh и dvh?
Типизация функций
Цвета, шрифты и текст
Анимации и переходы
Антипатерны в TS
Типизация классов и ООП
Изображения и медиа
Сортировки и поиск
- Зачем нужен Merge Sort?
- Как работает бинарный поиск и какие у него граничные случаи?
- Сравните QuickSort и MergeSort: сложность и когда что выбрать.
- Что такое стабильность сортировки и какие сортировки стабильны?
- Какие сортировки работают за линейное время и когда они применимы?
- Как работает пирамидальная сортировка (HeapSort) и когда она уместна?
- Как найти k-й по величине элемент массива?
- Что такое бинарный поиск по ответу и когда его применять?
- Как отсортировать данные, которые не помещаются в память (внешняя сортировка)
Основы Docker
Dockerfile и образы
- Чем инструкция COPY отличается от ADD в Dockerfile?
- В чём разница между CMD и ENTRYPOINT в Dockerfile?
- Что такое multi-stage сборка в Docker и зачем она нужна?
- Что такое multi-stage build и зачем он нужен?
- Как работает кеш слоёв Docker и в каком порядке писать инструкции?
- Как уменьшить размер и повысить безопасность Docker-образа?
Контейнеры, volumes и сети
Docker Compose
Сложность алгоритмов
- Что такое нотации Big O, Omega и Theta?
- Что такое амортизированный анализ сложности?
- Как соотносятся временная и пространственная сложность алгоритма?
- Как оценить сложность рекурсивного алгоритма: рекуррентные соотношения и мастер-теорема?
- Почему сортировку сравнением нельзя сделать быстрее O(n log n)
- Что такое классы P и NP, NP-полные задачи и что с ними делать на практике?
Рекурсия, жадные алгоритмы и ДП
- Как рекурсия использует стек вызовов и чем опасна глубокая рекурсия?
- Чем мемоизация отличается от табуляции в динамическом программировании?
- Когда жадный алгоритм даёт оптимальное решение?
- Что такое метод двух указателей и скользящее окно?
- Как решить задачу о рюкзаке 0/1 динамическим программированием?
- Что такое поиск с возвратом (backtracking) на примере генерации перестановок?
- Что такое принцип «разделяй и властвуй» и какие алгоритмы на нём построены?
- Как найти наибольшую общую подпоследовательность (LCS)
- Что такое префиксные суммы и какие задачи они решают?
Строки и графы
- Как работают алгоритм Кнута-Морриса-Пратта и префикс-функция?
- Чем BFS отличается от DFS при обходе графа?
- Как работает алгоритм Дейкстры и какие у него ограничения?
- Как работает топологическая сортировка и как найти цикл в ориентированном графе?
- Как построить минимальное остовное дерево: алгоритмы Прима и Краскала?
- Как устроена система непересекающихся множеств (Union-Find)
- Чем алгоритм Беллмана–Форда отличается от Флойда–Уоршелла?
- Как работает алгоритм Рабина–Карпа и полиномиальное хеширование строк?
Массивы и списки
- Чем массив отличается от связного списка?
- Как устроен динамический массив и что происходит при ресайзе?
- Чем односвязный список отличается от двусвязного?
- Как развернуть односвязный список и найти его середину?
- Как обнаружить цикл в связном списке: алгоритм Флойда «черепаха и заяц»?
- Что такое кольцевой буфер и где он применяется?
- Как устроены массивы в JavaScript под капотом: packed, holey и elements kinds в V8?
Стеки, очереди и хеш-таблицы
- Чем стек отличается от очереди и дека и как их реализуют?
- Как устроена хеш-таблица и как разрешаются коллизии?
- Что такое load factor и rehash в хеш-таблице?
- Как реализовать очередь на двух стеках и какова амортизированная сложность?
- Что такое монотонный стек и как решить задачу «следующий больший элемент»?
- Как устроено множество (Set) и чем хеш-множество отличается от упорядоченного?
- Что делает хеш-функцию хорошей и что такое атака HashDoS?
- Как спроектировать хеш-ключ для составного объекта и почему важны equals/hashCode?
- Как устроена хеш-таблица внутри?
Деревья и кучи
- Как устроено бинарное дерево поиска и зачем нужна балансировка?
- Что такое куча и приоритетная очередь?
- Что такое префиксное дерево (trie) и где его применяют?
- Какие бывают обходы бинарного дерева: pre-order, in-order, post-order, level-order?
- Чем красно-чёрное дерево отличается от АВЛ-дерева?
- Что такое B-дерево и почему оно используется в базах данных и файловых системах?
- Что такое дерево отрезков и дерево Фенвика и когда они нужны?
- Как проверить, что бинарное дерево является деревом поиска?
Графы и прочие структуры
- Как представить граф в памяти: списки и матрица смежности?
- Как выбрать структуру данных под задачу?
- Как реализовать LRU-кэш и почему это комбинация структур данных?
- Что такое фильтр Блума и где он применяется?
- Как устроен список с пропусками (skip list)
- Что такое персистентные (иммутабельные) структуры данных и structural sharing?
Модели OSI и TCP/IP
- Чем модель OSI отличается от модели TCP/IP?
- Чем TCP отличается от UDP?
- Как происходит установка и завершение TCP-соединения?
- Что такое MTU и фрагментация пакетов?
- Что происходит в сети, когда вы открываете URL в браузере?
- Как TCP управляет потоком и перегрузкой?
- Что такое NAT и зачем он нужен?
- Чем IPv4 отличается от IPv6?
- Что такое порт и сокет и как ОС различает соединения?
HTTP и HTTPS
- Какие методы HTTP существуют и что такое идемпотентность?
- Что означают классы кодов ответов HTTP от 1xx до 5xx?
- Чем HTTP/1.1 отличается от HTTP/2 и HTTP/3?
- Как работает TLS handshake и что такое сертификаты?
- Как работает HTTP-кеширование: Cache-Control, ETag и Last-Modified?
- Какие заголовки безопасности стоит выставлять в HTTP-ответах?
- Как работает сжатие HTTP-ответов: gzip, brotli и Content-Encoding?
- Как устроены cookie-сессии и токены в Authorization с точки зрения HTTP?
- Что такое keep-alive, пул соединений и head-of-line blocking?
- Что даёт HTTPS помимо шифрования трафика?
- Какие HTTP-коды ответа ожидать при создании, обновлении и замене ресурса?
- Чем отличается метод POST от PUT?
DNS, WebSocket и другие протоколы
- Чем cookies отличаются от localStorage с точки зрения сети?
- Что такое CORS и preflight-запрос?
- Как работает DNS и какие типы записей существуют?
- Чем WebSocket отличается от long polling и SSE?
- Чем прямой прокси отличается от обратного?
- Как работает WebRTC и зачем нужны STUN и TURN?
- Как устроена электронная почта: SMTP, IMAP и POP3?
- Что такое handshake в протоколе WebSocket?
Порождающие паттерны
- Что такое паттерн проектирования и зачем он нужен?
- Что такое Singleton и какие у него проблемы?
- Чем Factory Method отличается от Abstract Factory?
- Чем Builder отличается от Prototype?
- Чем DI-контейнер отличается от Service Locator?
- Что такое Object Pool и когда он оправдан?
- Фабричные функции или классы в JavaScript и TypeScript: когда что выбрать?
Структурные паттерны
- Чем Adapter отличается от Facade и Proxy?
- Что такое Decorator и чем он отличается от наследования?
- Что такое Composite и когда его применяют?
- Чем MVC отличается от MVVM?
- Что такое паттерн Bridge и чем он отличается от Adapter?
- Что такое Flyweight и как он экономит память?
- Как устроен паттерн «Модуль» в JavaScript: инкапсуляция через замыкания и ES-модули?
- Как HOC, render props и хуки в React соотносятся с паттернами Decorator и Strategy?
Поведенческие паттерны
- Что такое паттерн Observer и где он используется?
- Чем Strategy отличается от State и Template Method?
- Что такое паттерн Command и что даёт упаковка запроса в объект?
- Что такое паттерн Iterator и зачем он нужен?
- Как устроен Chain of Responsibility на примере middleware?
- Чем Mediator отличается от Observer?
- Как паттерн Memento помогает реализовать undo и redo?
- Что такое Visitor и double dispatch?
- Чем Pub/Sub отличается от Observer?
Принципы S.O.L.I.D
- Что такое SOLID и зачем нужны эти принципы?
- Что такое принцип единственной ответственности (SRP): пример нарушения?
- Что такое принцип открытости и закрытости (OCP)
- Что такое принцип подстановки Лисков (LSP) на примере прямоугольника и квадрата?
- Что такое принцип разделения интерфейсов (ISP)
- Что такое принцип инверсии зависимостей (DIP) и как он связан с внедрением зависимостей?
- Как принципы SOLID связаны между собой?
- Когда следование SOLID становится избыточным?
- Как применять SOLID в динамических языках?
- По каким признакам в коде видно нарушение принципов SOLID?
- Какие ещё бывают нарушения принципа подстановки Лисков, кроме примера с прямоугольником?
- Как пошагово отрефакторить код, нарушающий SOLID?
- Как SOLID соотносится с функциональным программированием?
- Как SOLID влияет на тестируемость кода?
Производительность и безопасность сети
- Что такое CDN и как он ускоряет доставку контента?
- Чем балансировщик L4 отличается от L7?
- Какие сетевые атаки нужно знать разработчику: MITM, DDoS, DNS-спуфинг?
- Латентность, пропускная способность и RTT: как измерять и что влияет на скорость загрузки?
- Какие HTTP-заголовки важны для производительности фронтенда?
- Что такое Same-Origin Policy (SOP)?
Архитектурные паттерны
- Зачем нужны Repository и Unit of Work и какие проблемы они решают?
- В чём суть CQRS и Event Sourcing и какова их цена?
- Что такое Flux и Redux как архитектурный паттерн с однонаправленным потоком данных?
- Какие антипаттерны встречаются чаще всего: God Object, Golden Hammer, спагетти-код и другие?
- Чем слоистая архитектура отличается от гексагональной (Ports & Adapters)
SOLID во фронтенде
- Как применять принцип единственной ответственности к React-компонентам и хукам?
- Как соблюдать принцип открытости/закрытости в UI: расширять компонент без изменения его кода?
- Как принцип разделения интерфейсов помогает проектировать пропсы и типы в TypeScript?
- Как применить принцип инверсии зависимостей во фронтенде: абстракция над API-клиентом и хранилищем?
Смежные принципы проектирования
- Что означают DRY, KISS и YAGNI и как они конфликтуют между собой?
- Когда дублирование лучше неправильной абстракции: подходы AHA и WET?
- Почему часто советуют предпочитать композицию наследованию?
- Что такое закон Деметры?
- Что такое принцип «Tell, Don't Ask»?
- Какие шаблоны GRASP стоит знать?
- Что такое связность (cohesion) и зацепление (coupling) модулей?
Атрибуты HTML
Метаданные и <head>
Ссылки и навигация
Таблицы и списки
Accessibility, a11y
- Что такое семантическая вёрстка и как она помогает доступности?
- Как сделать форму доступной: label, ошибки и фокус?
- Что такое первое правило ARIA и когда ARIA действительно нужна?
- Как управлять фокусом и порядком табуляции в интерфейсе?
- Как писать альтернативный текст для изображений (alt)?
- Как сообщать скринридеру об изменениях на странице через aria-live?
- Какие требования WCAG предъявляют к цветовому контрасту?
- Как правильно связать подпись с полем формы?
Наследование и каскад
Массивы и коллекции
TypeScript в React
Change Detection
Signals и RxJS
- Что такое сигналы (Signals) в Angular?
- Чем отличаются операторы switchMap, mergeMap, concatMap и exhaustMap в RxJS?
- Какие виды Subject существуют в RxJS?
- Чем отличаются холодные и горячие Observable?
- Чем signal отличается от BehaviorSubject и когда что использовать?
- Чем Observable отличается от Promise в Angular?