Каркас интерфейса: семантика, раскладка, формы и доступность.
- HTML5
- cascade
- box model
- responsive
useState() => {}O(n log n)async===map(){ }</>
Роадмап
Frontend
Двенадцать уровней: от вёрстки и JavaScript до system design.
12 уровней67 тем
0
Уровень 0
ВЕРСТКА
7 тем
Каркас интерфейса: семантика, раскладка, формы и доступность.
- flex
- grid
- alignment
- layout
Каркас интерфейса: семантика, раскладка, формы и доступность.
- landmarks
- headings
- ARIA
Каркас интерфейса: семантика, раскладка, формы и доступность.
- labels
- validation
- autocomplete
Каркас интерфейса: семантика, раскладка, формы и доступность.
- keyboard
- focus
- screen readers
Каркас интерфейса: семантика, раскладка, формы и доступность.
- stacking
- z-index
- containing block
Каркас интерфейса: семантика, раскладка, формы и доступность.
- transform
- opacity
- reduced motion
1
Уровень 1
JS CORE
12 тем
Язык, runtime и асинхронность, на которых держится весь фронт.
- primitives
- coercion
- equality
Язык, runtime и асинхронность, на которых держится весь фронт.
- this
- closure
- bind/call/apply
Язык, runtime и асинхронность, на которых держится весь фронт.
- descriptors
- copy
- mutation
Язык, runtime и асинхронность, на которых держится весь фронт.
- prototype chain
- new
- inheritance
Язык, runtime и асинхронность, на которых держится весь фронт.
- class syntax
- private fields
- extends
Язык, runtime и асинхронность, на которых держится весь фронт.
- map/reduce
- iterables
- sets/maps
Язык, runtime и асинхронность, на которых держится весь фронт.
- events
- delegation
- layout reads
Язык, runtime и асинхронность, на которых держится весь фронт.
- microtasks
- macrotasks
- render tick
Язык, runtime и асинхронность, на которых держится весь фронт.
- then/catch
- async/await
- errors
Язык, runtime и асинхронность, на которых держится весь фронт.
- immutability
- compose
- custom methods
Язык, runtime и асинхронность, на которых держится весь фронт.
- ESM
- tree-shaking
- dynamic import
Язык, runtime и асинхронность, на которых держится весь фронт.
- reachability
- leaks
- WeakMap
2
Уровень 2
TYPESCRIPT
5 тем
Типовая модель приложения и контрактов между слоями.
- interfaces
- unions
- narrowing
Типовая модель приложения и контрактов между слоями.
- conditional
- mapped
- infer
Типовая модель приложения и контрактов между слоями.
- constraints
- variance
- API design
Типовая модель приложения и контрактов между слоями.
- Pick/Omit
- Record
- ReturnType
Типовая модель приложения и контрактов между слоями.
- guards
- discriminants
- asserts
3
Уровень 3
REACT И РЕНДЕРИНГ
11 тем
Компонентная модель, состояние, роутинг и серверный React.
- JSX
- props
- composition
Компонентная модель, состояние, роутинг и серверный React.
- useEffect
- memoization
- custom hooks
Компонентная модель, состояние, роутинг и серверный React.
- reconciliation
- keys
- fiber
Компонентная модель, состояние, роутинг и серверный React.
- local state
- server state
- store
Компонентная модель, состояние, роутинг и серверный React.
- compound
- render props
- controlled
Компонентная модель, состояние, роутинг и серверный React.
- memo
- virtualization
- splitting
Компонентная модель, состояние, роутинг и серверный React.
- routes
- loaders
- navigation
Компонентная модель, состояние, роутинг и серверный React.
- CSR
- SSR
- SSG
- ISR
Компонентная модель, состояние, роутинг и серверный React.
- routing
- data fetching
- cache
Компонентная модель, состояние, роутинг и серверный React.
- mismatch
- streaming
- islands
Компонентная модель, состояние, роутинг и серверный React.
- server components
- boundaries
- actions
4
Уровень 4
СЕТЬ И БЕЗОПАСНОСТЬ
6 тем
HTTP, realtime, auth и защита клиентского периметра.
- methods
- headers
- cache
HTTP, realtime, auth и защита клиентского периметра.
- resources
- status codes
- pagination
HTTP, realtime, auth и защита клиентского периметра.
- connection
- events
- reconnect
HTTP, realtime, auth и защита клиентского периметра.
- escaping
- CSP
- sanitization
HTTP, realtime, auth и защита клиентского периметра.
- origin
- preflight
- credentials
HTTP, realtime, auth и защита клиентского периметра.
- claims
- storage
- refresh
5
Уровень 5
БРАУЗЕРНАЯ ПЛАТФОРМА
5 тем
Как страница парсится, рисуется, работает и живёт в фоне.
- DOM
- CSSOM
- paint
Как страница парсится, рисуется, работает и живёт в фоне.
- layout
- paint
- composite
Как страница парсится, рисуется, работает и живёт в фоне.
- Intersection
- Resize
- Mutation
Как страница парсится, рисуется, работает и живёт в фоне.
- threads
- messages
- offload
Как страница парсится, рисуется, работает и живёт в фоне.
- cache
- offline
- updates
6
Уровень 6
ПРОИЗВОДИТЕЛЬНОСТЬ
4 тем
Метрики, доставка кода и оптимизация тяжёлых ресурсов.
- LCP
- INP
- CLS
Метрики, доставка кода и оптимизация тяжёлых ресурсов.
- routes
- images
- prefetch
Метрики, доставка кода и оптимизация тяжёлых ресурсов.
- chunks
- tree-shaking
- analyze
Метрики, доставка кода и оптимизация тяжёлых ресурсов.
- formats
- sizes
- lazy
7
Уровень 7
ИНСТРУМЕНТЫ
5 тем
Сборка, пакеты, качество кода и delivery pipeline.
- Vite
- Webpack
- plugins
Сборка, пакеты, качество кода и delivery pipeline.
- lockfile
- semver
- scripts
Сборка, пакеты, качество кода и delivery pipeline.
- ESLint
- Prettier
- CI
Сборка, пакеты, качество кода и delivery pipeline.
- branches
- rebase
- bisect
Сборка, пакеты, качество кода и delivery pipeline.
- pipeline
- Docker
- deploy
8
Уровень 8
АРХИТЕКТУРА
3 тем
Границы модулей, зависимости и поддерживаемость React-кода.
- layers
- slices
- public API
Границы модулей, зависимости и поддерживаемость React-кода.
- SRP
- DIP
- React boundaries
Границы модулей, зависимости и поддерживаемость React-кода.
- adapter
- facade
- state
9
Уровень 9
SYSTEM DESIGN
3 тем
Продуктовые требования, API и компонентная декомпозиция.
- constraints
- tradeoffs
- scope
Продуктовые требования, API и компонентная декомпозиция.
- client
- cache
- errors
Продуктовые требования, API и компонентная декомпозиция.
- contracts
- slots
- ownership
10
Уровень 10
ТЕСТИРОВАНИЕ
3 тем
Проверка поведения от unit до пользовательского сценария.
- unit
- mocks
- timers
Проверка поведения от unit до пользовательского сценария.
- queries
- user events
- a11y
Проверка поведения от unit до пользовательского сценария.
- flows
- fixtures
- flakiness
11
Уровень 11
SOFT SKILLS
3 тем
Как объяснять решения, ревьюить и работать в команде.
- situation
- task
- action
- result
Как объяснять решения, ревьюить и работать в команде.
- diffs
- risks
- feedback
Как объяснять решения, ревьюить и работать в команде.
- handoff
- alignment
- ownership