Мосты практики

Эта страница показывает, как превращать материалы LazyOffer в тренировку навыка.

Если нужно понять, какой навык стоит за вопросом или задачей, используйте таксономию интервью-паттернов.

Формула маршрута:

прочитать урок -> ответить exact q-id -> сделать practice action -> пройти readiness-check -> повторить слабое место.

Frontend: базовое покрытие

Навык	Читать	Ответить	Практика	Готовность
JS basics: scope, equality, TDZ	JS lesson 1	Junior JS q-1..q-5	Hoisting/TDZ, Prototype, References; затем Two Sum и объяснение let, const, Map, TDZ в решении	За 60 секунд объясняете отличие var/let/const, ==/===, null/undefined и предсказываете мини-пример
JS functions and objects	JS lesson 1-2	Junior JS q-6..q-8	Closure, this, Prototype; затем Get By Path + 3 примера this и closure	Объясняете lexical scope, this, closure и prototype chain через working code
Async runtime	JS lesson 2	Junior JS q-9..q-11, Middle q-17..q-18	Event Loop и Async Race; затем free-practice: 5 async-log snippets + fetchWithTimeoutAndAbort	Предсказываете порядок sync/microtask/macrotask и называете защиту от stale response
Collections and immutable data	JS lesson 3	Junior JS q-12..q-17	References / Memory; затем Merge Sorted Arrays, Move Zeroes, Group By Field	Выбираете map/filter/reduce, доказываете отсутствие мутации и объясняете shallow/deep boundary
Browser storage and CORS	Security lesson 2, Web lesson 3	Junior JS q-18..q-20, Senior q-11	Free-practice: storage risk table + CORS preflight response for dev/stage/prod	Отличаете XSS, CSRF, CORS, AuthN/AuthZ и объясняете, почему frontend не чинит CORS
HTML, CSS and rendering	HTML/CSS lesson 1-4, Rendering lesson 1-2	Senior q-3, Senior q-9, Next.js q-14	Browser Rendering: layout change, transform composite, layout thrashing; затем audit one page for semantic structure, responsive layout, LCP/INP risk and a11y issue	Показываете конкретный DOM/layout/performance bug и называете проверку в DevTools
React rendering and effects	React lesson 1-2	Middle q-1..q-5	React Effects: cleanup guard, missing dependency; затем component render trace + stale useEffect reproduction; coding drill: First Position	Объясняете reconciliation, key, effect dependencies, controlled forms and memoization risk
React state and performance	React lesson 3-4	Middle q-6..q-10, Senior q-5..q-7	Free-practice: state ownership map for filterable list + optimistic update failure mode	Называете owner state, derived state, Context limits, error boundary limits and rollback strategy
TypeScript boundaries	TypeScript lesson 1-4	Middle q-13..q-16	Free-practice: fetchJson<T>(), DTO -> domain -> UI mapping, discriminated union for async state	Отличаете type safety at compile time from runtime validation at API boundary
Testing frontend	Testing lesson 1-4	Senior q-16..q-17, Playbook q-7	Free-practice: test plan for login form, quality gates, one negative path and one flaky-test hypothesis	Выбираете unit/integration/e2e by risk and умеете объяснить, что защищает каждый тест
Tooling and bundle quality	Package Managers and Bundlers	Bundlers q-1..q-20, Middle q-20	Free-practice: bundle growth incident report + CI cache failure triage	Объясняете lockfile, npm ci, tree shaking, code splitting, env handling and release gates

Backend / SQL

Навык	Читать	Ответить	Практика	Готовность
SQL query basics	Databases lesson 2	Databases q-2, q-8..q-9	Активные клиенты, Три последних заказа	Пишете SELECT/WHERE/ORDER BY/LIMIT, объясняете стабильный порядок и edge-case с одинаковыми датами
Join and row cardinality	Databases lesson 1-2	Databases q-2, q-5, q-11	Клиенты без потери нулевых заказов, Оплаченные заказы без дублей	До запуска предсказываете, какие строки потеряются или размножатся, и выбираете COUNT/COUNT(DISTINCT) осознанно
Aggregation and reporting	Databases lesson 2	Databases q-3, q-10, q-19	Города с выручкой выше порога, Средний оплаченный чек по городам	Отличаете WHERE от HAVING, фильтруете нужные строки до агрегата и не считаете отмененные записи
Cursor and window thinking	Databases lesson 2	Databases q-8..q-10, q-19	Следующая страница заказов, Второй заказ пользователя, Накопительная выручка	Объясняете cursor condition, tie-breaker, ROW_NUMBER и deterministic window order

Backend: интеграция data access

Навык	Читать	Ответить	Практика	Готовность
ORM/query-builder decision	Node lesson 2, Databases lesson 2	Node q-18, Databases q-10, q-19	Города с выручкой выше порога + decision table: ORM include, query builder, raw SQL	Вы называете query count, expected rows, index, transaction boundary and test before choosing abstraction
N+1 diagnosis in service layer	Node lesson 3, Databases lesson 2	Node q-19, Databases q-5, Nest q-11	Оплаченные заказы без дублей + query-count guard: page size 20 must not create 21 SQL queries	До оптимизации показываете 1 + N, после - bounded query count, no duplicate rows and no overfetch
Nest repository transaction boundary	Nest lesson 4, Databases lesson 3	Nest q-11..q-12, Databases q-6, q-15	Free-practice: repository transaction checklist for create order + items + stock reserve; then run Клиенты без потери нулевых заказов to verify join reasoning	Вы отделяете controller/use-case/repository, держите внешние calls вне transaction and define rollback/commit tests
Cache and DB observability loop	Node lesson 3, Nest lesson 4	Node q-15, Nest q-13..q-14, Databases q-16..q-18	Free-practice: cache invalidation table + DB signal map; use Средний оплаченный чек по городам as the expensive read example	Вы связываете cache key, invalidation, query p95, pool usage, hit rate and stale-data risk in one runbook

Как пользоваться картой

1. Выберите одну строку, а не весь раздел сразу.
2. Потратьте 25-40 минут на блок Читать.
3. Ответьте на связанные вопросы до открытия полного ответа.
4. Сделайте точную задачу в песочнице или named free-practice prompt.
5. Отметьте результат как ready, partial или not ready.

Ready / Partial / Not Ready

Состояние	Evidence
Ready	Вы объясняете механизм, называете production failure mode, проходите practice action и отвечаете на два follow-up
Partial	Вы знаете определение, но просите подсказки по edge-cases, поведению кода или production risk
Not ready	Вы повторяете общую формулировку, не предсказываете поведение кода или не можете выбрать practice action

Практика для пробелов

Эти pack'и закрывают места, где пока нет исполняемой песочницы. Делайте их как no-code drills: результатом должен быть конкретный артефакт, который можно проверить по readiness.

DOM/a11y audit pack

Use after: HTML/CSS lesson 1, Rendering lesson 1, Senior q-3, Senior q-9.

Action:

1. Возьмите одну реальную страницу или компонент: форма, карточка товара, таблица, меню, модалка.
2. Проверьте landmarks, heading order, label/name у интерактивных элементов, keyboard path, visible focus, responsive overflow, contrast risk, LCP/INP suspects; для performance-части сверяйтесь с Browser Rendering: text update и layout thrashing.
3. Заполните audit table: area/selector, risk, evidence, fix, verification.
4. Выберите два фикса: один semantic/a11y, один layout/performance.

Ready when: вы показываете минимум 5 наблюдений, каждое связано с пользовательским риском, и для каждого есть проверка в DevTools, keyboard-only walkthrough или accessibility tree.

React effect/state debug pack

Use after: React lesson 2, React lesson 3, Middle q-3, Middle q-6, Senior q-5, Senior q-6.

Action:

1. Опишите компонент с search, filters, items, loading, error и useEffect, который делает запрос при изменении query.
2. Пройдите React Effects: stale response и запишите reproduction: быстрый ввод a -> ab -> abc, медленный ответ на a, быстрый ответ на abc, stale result перетирает экран.
3. Напишите before/after snippet: в fix должны быть cleanup, AbortController или requestId, корректный dependency list и правило, где живет state.
4. Сверьте fix через cleanup guard и добавьте state ownership map: server data, local draft, derived data, UI-only state.

Ready when: вы объясняете stale closure, stale response, cleanup timing, dependency tradeoff и почему конкретный state владеет конкретный компонент.

TypeScript boundary pack

Use after: TypeScript lesson 1, TypeScript lesson 4, Middle q-13, Middle q-14, Middle q-16.

Action:

1. Возьмите API response с минимум одним unknown, null, optional field и enum-like string.
2. Разделите ApiDto, DomainModel, ViewState.
3. Заполните mapping table: field, raw shape, domain shape, fallback/error, runtime check.
4. Опишите fetchJson<T>() как compile-time helper и отдельно runtime guard/decoder как защиту на boundary.
5. Сделайте discriminated union для async UI state: idle, loading, success, error.

Ready when: вы можете назвать, что TypeScript доказывает на compile time, что он не доказывает после сети, и где появляется runtime validation.

Testing strategy pack

Use after: Testing lesson 1, Testing lesson 4, Senior q-16, Senior q-17, Playbook q-7.

Action:

1. Выберите feature: login form, checkout step, search results или settings form.
2. Заполните risk matrix: risk, user impact, unit, integration, e2e, manual/monitoring.
3. Добавьте минимум один negative path, один boundary case, один accessibility assertion и один flaky-test hypothesis.
4. Запишите gate: какие проверки блокируют merge, какие идут nightly, какие остаются ручной smoke-проверкой.

Ready when: каждый тест связан с риском, у каждого есть expected assertion, и вы можете объяснить, что этот слой тестов намеренно не покрывает.

Чего еще нет в исполняемой песочнице

Пока в состоянии missing как исполняемая практика:

1. DOM/a11y sandbox with browser-backed checks.
2. Component sandbox for effect-lifecycle and render-ownership.
3. TypeScript type-checking sandbox for DTO/domain boundary tasks.
4. Test-runner sandbox for quality-gate.

Эта страница намеренно держит эти пункты как no-code drills, пока отдельная задача по песочнице не изменит route behavior and validation.

Следующий шаг

1. Для ежедневного плана используйте 7/14/30-дневные маршруты.
2. Для распознавания паттернов используйте таксономию интервью-паттернов.
3. Для ремонта слабого навыка выберите самую слабую строку на этой карте.
4. Для полировки ответа используйте Playbook ответов.