Все ли документы на руках

Все ли документы на руках - чеклист Frontend разработчика

Введение

Этот вопрос часто задают на собеседованиях для проверки того, насколько кандидат готов к работе и знает, какие документы и ресурсы необходимы для эффективной разработки. Рассмотрим полный чеклист.

Технические документы и спецификации

1. MDN Web Docs (Mozilla Developer Network)

Это основной источник информации для web разработчиков:

• HTML API документация
• CSS спецификации
• JavaScript справка
• Примеры кода

Оффициальный сайт: https://developer.mozilla.org/

// Пример: как найти информацию о методе
// MDN - стандартный ресурс
const array = [1, 2, 3];
array.map(x => x * 2); // MDN -> Array.prototype.map()

2. W3C Спецификации

• HTML Living Standard
• CSS Specifications
• Web API Standards

Сайт: https://www.w3.org/

3. ECMAScript (JavaScript) Спецификация

• Официальная спецификация ECMA-262
• Новые фичи в TC39 процессе
• Полный синтаксис и семантика языка

Сайт: https://tc39.es/

Документация фреймворков

React Документация

// Необходимо знать и иметь под рукой:
// 1. Основные концепции
// 2. Hooks API
// 3. Performance optimization
// 4. Error Boundaries

import { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    // Эффект
  }, []);
  
  return <div>{data}</div>;
}

Официальный сайт: https://react.dev/

Next.js Документация

• App Router vs Pages Router
• Server Components
• API Routes
• Optimization

Сайт: https://nextjs.org/docs

Angular Документация

• Components и Templates
• Dependency Injection
• Services
• RxJS Observables

Сайт: https://angular.io/docs

Vue.js Документация

• Composition API
• Reactivity
• Components

Сайт: https://vuejs.org/

CSS и дизайн системы

Tailwind CSS Документация

<!-- Необходимо знать классы и конфигурацию -->
<div class="flex items-center justify-between gap-4 p-4 bg-white rounded-lg shadow">
  <h1 class="text-2xl font-bold text-gray-900">Title</h1>
  <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
    Click me
  </button>
</div>

Сайт: https://tailwindcss.com/

Bootstrap Документация

• Grid System
• Components
• Utilities

Сайт: https://getbootstrap.com/

Git и контроль версий

Git документация

# Основные команды
git clone <repo>
git add .
git commit -m "message"
git push origin main
git pull
git branch
git merge

Оффициальный гайд: https://git-scm.com/doc

API и Backend интеграция

REST API стандарты

// GET запрос
fetch('/api/users')
  .then(response => response.json())
  .then(data => console.log(data));

// POST запрос
fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Ivan' })
});

OpenAPI/Swagger

• API документация в Machine-readable формате
• Swagger UI для интерактивного тестирования

GraphQL документация

# Пример GraphQL запроса
query GetUsers {
  users {
    id
    name
    email
  }
}

Сайт: https://graphql.org/

Инструменты разработки

Chrome DevTools

• Инспектор Elements
• Network tab
• Console
• Performance
• Application (Local Storage, Cookies)

Firefox Developer Edition

• Аналог Chrome DevTools
• Хорошая поддержка CSS Grid

VS Code документация

• Shortcuts
• Extensions
• Debugging

Сайт: https://code.visualstudio.com/docs

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

Jest документация

// Базовый тест
describe('Calculator', () => {
  it('should add numbers', () => {
    expect(2 + 2).toBe(4);
  });
});

Сайт: https://jestjs.io/

Vitest

• Аналог Jest с лучшей производительностью
• Встроенная поддержка ES modules

Сайт: https://vitest.dev/

Testing Library

import { render, screen } from '@testing-library/react';

test('renders heading', () => {
  render(<MyComponent />);
  const heading = screen.getByRole('heading', { name: /hello/i });
  expect(heading).toBeInTheDocument();
});

Сайт: https://testing-library.com/

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

OWASP Top 10

• SQL Injection
• Cross-Site Scripting (XSS)
• Cross-Site Request Forgery (CSRF)
• Insecure Deserialization

Сайт: https://owasp.org/

Content Security Policy (CSP)

<!-- Защита от XSS -->
<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self'; script-src 'self' 'unsafe-inline'">

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

Web Vitals

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

Сайт: https://web.dev/vitals/

PageSpeed Insights

• Google инструмент для анализа производительности
• Дает рекомендации по оптимизации

Проектные документы

1. Требования (Requirements)

- Функциональные требования
- Нефункциональные требования (performance, security)
- API спецификация
- Дизайн макеты

2. Архитектурная документация

- Структура проекта
- Связь между компонентами
- Паттерны и best practices
- Database schema

3. API документация

{
  "GET /api/users": {
    "description": "Get all users",
    "params": {},
    "response": [
      { "id": 1, "name": "Ivan" }
    ]
  }
}

4. Development Guide

- Как запустить проект
- Код стиль гайд
- Git workflow
- Testing requirements
- Deployment инструкции

Юридические документы

1. NDA (Non-Disclosure Agreement)

• Документ о конфиденциальности
• Защищает компанию и сотрудника

2. Трудовой договор

• Условия работы
• Заработная плата
• Льготы
• Обязанности

3. IP Rights Agreement

• Кому принадлежит код
• Авторские права
• Использование вне работы

Чеклист перед началом разработки

[ ] Прочитал все требования (Requirements)
[ ] Изучил API документацию
[ ] Получил доступ к дизайн макетам
[ ] Знаю структуру проекта
[ ] Пройден onboarding
[ ] Все инструменты установлены и настроены
[ ] Могу запустить проект локально
[ ] Понимаю git workflow
[ ] Знаю как писать тесты
[ ] Документ о конфиденциальности подписан

Полезные ссылки для закладок

- MDN Web Docs: https://developer.mozilla.org/
- Can I Use: https://caniuse.com/ (поддержка браузерами)
- State of JavaScript: https://stateofjs.com/
- Dev.to: https://dev.to/ (статьи)
- Stack Overflow: https://stackoverflow.com/
- GitHub: https://github.com/

Выводы

Хороший Frontend разработчик должен иметь под рукой:

1. Официальные спецификации (MDN, W3C, ECMAScript)
2. Документацию фреймворков (React, Vue, Angular)
3. API документацию проекта
4. Гайды по коду и архитектуре
5. Юридические документы (контракт, NDA)
6. Доступ к инструментам (DevTools, IDE)
7. Best practices для безопасности и производительности

Непрерывное обучение и обновление знаний — обязательная часть профессии Frontend разработчика.