Frontend-разработка — контент-трекер

Трек ведёт от веб-платформы и языковых основ к архитектуре интерфейсов, доступности, производительности, безопасности и эксплуатации frontend.

Статусы

• [ ] — тема запланирована;
• ~ — черновик статьи;
• * — статья на ревью;
• [x] — опубликована и прошла критерии готовности.

Сводка

Раздел	Готово	Всего	%
01. Веб-платформа	0	24	0%
02. HTML и семантика	0	22	0%
03. Основы CSS	0	30	0%
04. Компоновка и адаптивность	0	24	0%
05. JavaScript	0	32	0%
06. Среда выполнения браузера	0	25	0%
07. TypeScript	0	24	0%
08. Архитектура интерфейсов	0	26	0%
09. Фреймворки и отрисовка	0	28	0%
10. Состояние и данные	0	24	0%
11. Формы	0	18	0%
12. Доступность	0	24	0%
13. Производительность	0	26	0%
14. Безопасность	0	22	0%
15. Тестирование	0	24	0%
16. Инструменты и доставка	0	22	0%
17. Дизайн-системы	0	22	0%
18. Эксплуатация frontend	0	24	0%
Итого	0	441	0%

---

01. Веб-платформа

• [ ] Путь запроса от URL до страницы
• [ ] URL и URI
• [ ] DNS для Frontend
• [ ] TCP и QUIC
• [ ] TLS и сертификаты
• [ ] В браузере и интерфейсах: HTTP Semantics
• [ ] В браузере и интерфейсах: HTTP/1.1, HTTP/2 и HTTP/3
• [ ] HTTP Methods
• [ ] HTTP Status Codes
• [ ] HTTP Headers
• [ ] Content Types
• [ ] В браузере и интерфейсах: Content Negotiation
• [ ] HTTP Caching
• [ ] В браузере и интерфейсах: Cookies
• [ ] В браузере и интерфейсах: Same-Origin Policy — раздел «Веб-платформа»
• [ ] В браузере и интерфейсах: CORS
• [ ] В браузере и интерфейсах: Content Security Policy — раздел «Веб-платформа»
• [ ] В браузере и интерфейсах: Browser Architecture
• [ ] Navigation Lifecycle
• [ ] Rendering Pipeline
• [ ] Web Standards
• [ ] Progressive Enhancement
• [ ] Feature Detection
• [ ] Browser Compatibility

02. HTML и семантика

• [ ] HTML Document Structure
• [ ] Parsing HTML
• [ ] Content Categories
• [ ] Semantic Elements
• [ ] Headings и Document Outline
• [ ] Landmarks
• [ ] Links и Navigation
• [ ] Images
• [ ] Responsive Images
• [ ] Audio и Video
• [ ] Lists
• [ ] В браузере и интерфейсах: Tables
• [ ] Forms
• [ ] Buttons
• [ ] Dialog
• [ ] Details и Summary
• [ ] Metadata
• [ ] Open Graph Metadata
• [ ] Structured Data
• [ ] Native Validation
• [ ] Custom Elements
• [ ] HTML Anti-patterns

03. Основы CSS

• [ ] CSS Syntax
• [ ] Selectors
• [ ] Specificity
• [ ] Cascade
• [ ] Inheritance
• [ ] Initial, Inherit, Unset и Revert
• [ ] Values и Units
• [ ] Custom Properties
• [ ] Box Model
• [ ] Normal Flow
• [ ] Display
• [ ] Positioning
• [ ] Stacking Context
• [ ] Z-index
• [ ] Overflow
• [ ] Containing Block
• [ ] Formatting Contexts
• [ ] Typography
• [ ] Fonts и Font Loading
• [ ] Colors
• [ ] Backgrounds
• [ ] Borders и Outlines
• [ ] Pseudo-classes
• [ ] Pseudo-elements
• [ ] Generated Content
• [ ] Transforms
• [ ] Transitions
• [ ] Animations
• [ ] Cascade Layers
• [ ] CSS Architecture Fundamentals

04. Компоновка и адаптивность

• [ ] Intrinsic и Extrinsic Sizing
• [ ] Block и Inline Layout
• [ ] Flexbox
• [ ] CSS Grid
• [ ] Subgrid
• [ ] Multi-column Layout
• [ ] Logical Properties
• [ ] Writing Modes
• [ ] Media Queries
• [ ] Container Queries
• [ ] Responsive Breakpoints
• [ ] Mobile-first Design
• [ ] Fluid Typography
• [ ] Fluid Spacing
• [ ] Aspect Ratio
• [ ] Object Fit и Object Position
• [ ] Responsive Images Layout
• [ ] Viewport Units
• [ ] Safe Areas
• [ ] Scroll Containers
• [ ] Sticky Positioning
• [ ] Layout Debugging
• [ ] Print Styles
• [ ] Responsive UI Patterns

05. JavaScript

• [ ] Values и Types
• [ ] Type Coercion
• [ ] Equality
• [ ] Variables и Scope
• [ ] Lexical Environment
• [ ] Closures
• [ ] В браузере и интерфейсах: Functions — раздел «JavaScript»
• [ ] this
• [ ] Arrow Functions
• [ ] Objects
• [ ] Property Descriptors
• [ ] Prototypes
• [ ] Classes
• [ ] В браузере и интерфейсах: Arrays
• [ ] Map и Set
• [ ] Iterables и Iterators
• [ ] Generators
• [ ] Destructuring
• [ ] Rest и Spread
• [ ] В браузере и интерфейсах: Modules
• [ ] В браузере и интерфейсах: Error Handling — раздел «JavaScript»
• [ ] Promises
• [ ] Async/Await
• [ ] В браузере и интерфейсах: Cancellation — раздел «JavaScript»
• [ ] Regular Expressions
• [ ] Dates и Time Zones
• [ ] Internationalization API
• [ ] Memory Management
• [ ] В браузере и интерфейсах: Garbage Collection
• [ ] Immutability
• [ ] Functional Programming Basics
• [ ] JavaScript Anti-patterns

06. Среда выполнения браузера

• [ ] В браузере и интерфейсах: DOM
• [ ] В браузере и интерфейсах: CSSOM
• [ ] Render Tree
• [ ] Style Calculation
• [ ] Layout
• [ ] Paint
• [ ] Compositing
• [ ] Event Loop
• [ ] Tasks и Microtasks
• [ ] Event Propagation
• [ ] Event Delegation
• [ ] Custom Events
• [ ] MutationObserver
• [ ] ResizeObserver
• [ ] IntersectionObserver
• [ ] Fetch API
• [ ] AbortController
• [ ] Web Storage
• [ ] IndexedDB
• [ ] В браузере и интерфейсах: Service Workers
• [ ] Web Workers
• [ ] Shared Workers
• [ ] BroadcastChannel
• [ ] Page Lifecycle
• [ ] Browser DevTools

07. TypeScript

• [ ] TypeScript Mental Model
• [ ] Type Inference
• [ ] Primitive и Literal Types
• [ ] Union и Intersection Types
• [ ] Narrowing
• [ ] Interfaces и Type Aliases
• [ ] В браузере и интерфейсах: Functions — раздел «TypeScript»
• [ ] Generics
• [ ] Generic Constraints
• [ ] keyof и Indexed Access
• [ ] Mapped Types
• [ ] Conditional Types
• [ ] Template Literal Types
• [ ] Utility Types
• [ ] Discriminated Unions
• [ ] Type Guards
• [ ] unknown, never и any
• [ ] Structural Typing
• [ ] Variance
• [ ] Declaration Files
• [ ] Module Resolution
• [ ] Runtime Validation
• [ ] Type-safe API Contracts
• [ ] TypeScript Anti-patterns

08. Архитектура интерфейсов

• [ ] UI Architecture Drivers
• [ ] Component Boundaries
• [ ] В браузере и интерфейсах: Component Composition — раздел «Архитектура интерфейсов»
• [ ] Presentational и Container Components
• [ ] Controlled и Uncontrolled Components
• [ ] Smart и Dumb Components
• [ ] Dependency Direction
• [ ] Feature-based Structure
• [ ] Layered Frontend Architecture
• [ ] Modular Frontend
• [ ] Micro-frontends
• [ ] Design by Contract
• [ ] UI State Machines
• [ ] Separation of UI и Domain Logic
• [ ] Ports and Adapters for Frontend
• [ ] В браузере и интерфейсах: Dependency Injection
• [ ] Error Boundaries
• [ ] Loading и Empty States
• [ ] Optimistic UI
• [ ] Offline-first UI
• [ ] Internationalization Architecture
• [ ] Permissions in UI
• [ ] Frontend Configuration
• [ ] В браузере и интерфейсах: Feature Flags — раздел «Архитектура интерфейсов»
• [ ] В браузере и интерфейсах: Architecture Decision Records
• [ ] UI Architecture Review

09. Фреймворки и отрисовка

• [ ] Framework Mental Model
• [ ] Declarative UI
• [ ] Reactivity
• [ ] Virtual DOM
• [ ] Fine-grained Reactivity
• [ ] Component Lifecycle
• [ ] Hooks и Composables
• [ ] Context и Dependency Provision
• [ ] Client-side Rendering
• [ ] Server-side Rendering
• [ ] Static Site Generation
• [ ] Incremental Static Regeneration
• [ ] Hydration
• [ ] Partial Hydration
• [ ] Islands Architecture
• [ ] Streaming Rendering
• [ ] Server Components
• [ ] В браузере и интерфейсах: Routing
• [ ] Nested Routing
• [ ] В браузере и интерфейсах: Code Splitting — раздел «Фреймворки и отрисовка»
• [ ] Lazy Loading
• [ ] Suspense
• [ ] В браузере и интерфейсах: Error Handling — раздел «Фреймворки и отрисовка»
• [ ] Head и Metadata Management
• [ ] React
• [ ] Vue
• [ ] Angular
• [ ] Choosing a Framework

10. Состояние и данные

• [ ] Types of UI State
• [ ] Local State
• [ ] Shared State
• [ ] Server State
• [ ] URL State
• [ ] Form State
• [ ] State Normalization
• [ ] Derived State
• [ ] State Machines
• [ ] Event-driven State
• [ ] Immutable Updates
• [ ] Data Fetching
• [ ] Request Deduplication
• [ ] Client Cache
• [ ] Stale-while-revalidate
• [ ] Optimistic Updates
• [ ] В браузере и интерфейсах: Pagination
• [ ] Infinite Scroll
• [ ] Real-time Data
• [ ] WebSocket State
• [ ] Race Conditions
• [ ] В браузере и интерфейсах: Cancellation — раздел «Состояние и данные»
• [ ] Error и Retry Policy
• [ ] State Management Selection

11. Формы

• [ ] Form Semantics
• [ ] Input Types
• [ ] Labels и Descriptions
• [ ] Controlled Forms
• [ ] Uncontrolled Forms
• [ ] Client Validation
• [ ] Server Validation
• [ ] Validation Schema
• [ ] Error Presentation
• [ ] Async Validation
• [ ] Dependent Fields
• [ ] Dynamic Forms
• [ ] File Upload
• [ ] Multi-step Forms
• [ ] Autosave
• [ ] Form Accessibility
• [ ] Form Security
• [ ] Form Testing

12. Доступность

• [ ] Accessibility Mental Model
• [ ] WCAG Principles
• [ ] Semantic HTML
• [ ] Accessible Name
• [ ] Accessibility Tree
• [ ] Keyboard Navigation
• [ ] Focus Management
• [ ] Focus Order
• [ ] Skip Links
• [ ] Screen Readers
• [ ] ARIA
• [ ] Live Regions
• [ ] Accessible Forms
• [ ] Accessible Tables
• [ ] Accessible Dialogs
• [ ] Accessible Navigation
• [ ] Color Contrast
• [ ] Motion и Reduced Motion
• [ ] Touch Target Size
• [ ] Zoom и Reflow
• [ ] Inclusive Content
• [ ] В браузере и интерфейсах: Accessibility Testing — раздел «Доступность»
• [ ] Automated и Manual Audits
• [ ] Accessibility Governance

13. Производительность

• [ ] Frontend Performance Model
• [ ] Critical Rendering Path
• [ ] Core Web Vitals
• [ ] Largest Contentful Paint
• [ ] Interaction to Next Paint
• [ ] Cumulative Layout Shift
• [ ] Time to First Byte
• [ ] Resource Loading
• [ ] Preload, Prefetch и Preconnect
• [ ] JavaScript Bundle Cost
• [ ] Tree Shaking
• [ ] В браузере и интерфейсах: Code Splitting — раздел «Производительность»
• [ ] Image Optimization
• [ ] Font Optimization
• [ ] CSS Performance
• [ ] Rendering Performance
• [ ] Layout Thrashing
• [ ] Long Tasks
• [ ] Memory Leaks
• [ ] List Virtualization
• [ ] Web Workers for Performance
• [ ] Caching Strategy
• [ ] В браузере и интерфейсах: Performance Budgets
• [ ] В браузере и интерфейсах: Real User Monitoring — раздел «Производительность»
• [ ] В браузере и интерфейсах: Performance Profiling
• [ ] Performance Regression Prevention

14. Безопасность

• [ ] Frontend Threat Model
• [ ] Trust Boundaries in Browser
• [ ] В браузере и интерфейсах: Same-Origin Policy — раздел «Безопасность»
• [ ] Cross-Origin Resource Sharing
• [ ] Cross-Site Scripting
• [ ] DOM XSS
• [ ] Cross-Site Request Forgery
• [ ] В браузере и интерфейсах: Content Security Policy — раздел «Безопасность»
• [ ] Trusted Types
• [ ] В браузере и интерфейсах: Subresource Integrity
• [ ] Secure Cookies
• [ ] Token Storage
• [ ] Authentication UI
• [ ] Authorization и UI
• [ ] В браузере и интерфейсах: Open Redirect
• [ ] В браузере и интерфейсах: Clickjacking
• [ ] postMessage Security
• [ ] Dependency Security
• [ ] Supply-chain Attacks
• [ ] Secrets in Frontend
• [ ] В браузере и интерфейсах: Security Headers
• [ ] Frontend Security Review

15. Тестирование

• [ ] Frontend Testing Strategy
• [ ] Testing Pyramid
• [ ] В браузере и интерфейсах: Unit Testing
• [ ] Component Testing
• [ ] В браузере и интерфейсах: Integration Testing
• [ ] В браузере и интерфейсах: End-to-End Testing
• [ ] Visual Regression Testing
• [ ] В браузере и интерфейсах: Accessibility Testing — раздел «Тестирование»
• [ ] Contract Testing
• [ ] Mocking
• [ ] Stubs и Fakes
• [ ] Testing DOM
• [ ] Testing User Behavior
• [ ] Testing Async UI
• [ ] Testing Network Errors
• [ ] Testing State
• [ ] Testing Forms
• [ ] Testing Routing
• [ ] Testing SSR и Hydration
• [ ] Cross-browser Testing
• [ ] Test Data
• [ ] Flaky Tests
• [ ] Test Performance
• [ ] Testing Anti-patterns

16. Инструменты и доставка

• [ ] Package Managers
• [ ] В браузере и интерфейсах: Semantic Versioning
• [ ] Dependency Resolution
• [ ] Bundlers
• [ ] Transpilers
• [ ] Module Formats
• [ ] Source Maps
• [ ] Linting
• [ ] Formatting
• [ ] В браузере и интерфейсах: Type Checking
• [ ] В браузере и интерфейсах: Git Hooks
• [ ] Build Modes
• [ ] В браузере и интерфейсах: Environment Variables
• [ ] Asset Pipeline
• [ ] Bundle Analysis
• [ ] Monorepo
• [ ] CI for Frontend
• [ ] В браузере и интерфейсах: Preview Environments
• [ ] Deployment Strategies
• [ ] CDN Deployment
• [ ] В браузере и интерфейсах: Rollback
• [ ] Release Automation

17. Дизайн-системы

• [ ] Design System Goals
• [ ] Design Tokens
• [ ] Color System
• [ ] Typography System
• [ ] Spacing System
• [ ] Component API
• [ ] В браузере и интерфейсах: Component Composition — раздел «Дизайн-системы»
• [ ] Variants
• [ ] Theming
• [ ] Dark Mode
• [ ] Responsive Components
• [ ] Accessible Components
• [ ] Headless Components
• [ ] CSS Strategy
• [ ] Icon System
• [ ] В браузере и интерфейсах: Documentation
• [ ] Storybook
• [ ] Visual Regression
• [ ] В браузере и интерфейсах: Versioning
• [ ] Adoption и Migration
• [ ] Governance
• [ ] Design System Metrics

18. Эксплуатация frontend

• [ ] Frontend Observability
• [ ] Error Tracking
• [ ] Session Replay
• [ ] В браузере и интерфейсах: Real User Monitoring — раздел «Эксплуатация frontend»
• [ ] Structured Frontend Logs
• [ ] Correlation IDs
• [ ] Source Map Security
• [ ] В браузере и интерфейсах: Feature Flags — раздел «Эксплуатация frontend»
• [ ] Experimentation
• [ ] A/B Testing
• [ ] Analytics Architecture
• [ ] Privacy и Consent
• [ ] Browser Compatibility Monitoring
• [ ] Performance Monitoring
• [ ] В браузере и интерфейсах: Incident Response
• [ ] Frontend Runbooks
• [ ] В браузере и интерфейсах: Graceful Degradation
• [ ] Offline Resilience
• [ ] Deployment Safety
• [ ] Rollback Strategy
• [ ] Dependency Upgrades
• [ ] Frontend Platform
• [ ] В браузере и интерфейсах: Developer Experience
• [ ] В браузере и интерфейсах: Production Readiness Review

---

Правила ведения

1. Фундаментальная статья объясняет browser/platform mechanics, а не только framework API.
2. UI-пример проверяется keyboard navigation, accessibility и responsive behavior.
3. Интерактивный тест содержит scenario, misconception и data/rendering flow.
4. Tracker проверяется командой pnpm content:validate.