|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "17b8ec8e85d99e27dcb3f73842e583be",
|
|
|
"translation_date": "2025-10-22T22:13:19+00:00",
|
|
|
"source_file": "1-getting-started-lessons/1-intro-to-programming-languages/assignment.md",
|
|
|
"language_code": "ru"
|
|
|
}
|
|
|
-->
|
|
|
# Задание: Изучение современных инструментов веб-разработки
|
|
|
|
|
|
## Инструкции
|
|
|
|
|
|
Экосистема веб-разработки включает сотни специализированных инструментов, которые помогают разработчикам эффективно создавать, тестировать и поддерживать приложения. Ваша задача — изучить и понять инструменты, дополняющие те, которые были рассмотрены в этом уроке.
|
|
|
|
|
|
**Ваша миссия:** Выберите **три инструмента**, которые **не были рассмотрены в этом уроке** (избегайте выбора редакторов кода, браузеров или инструментов командной строки, уже перечисленных). Сосредоточьтесь на инструментах, которые решают конкретные задачи в современных рабочих процессах веб-разработки.
|
|
|
|
|
|
**Для каждого инструмента предоставьте:**
|
|
|
|
|
|
1. **Название инструмента и его категорию** (например, "Figma - инструмент для дизайна" или "Jest - фреймворк для тестирования")
|
|
|
2. **Назначение и преимущества** - Объясните в 2-3 предложениях, почему веб-разработчик использует этот инструмент и какие проблемы он решает
|
|
|
3. **Ссылка на официальную документацию** - Укажите ссылку на официальную документацию или сайт инструмента (не на обучающие сайты)
|
|
|
4. **Контекст использования** - Упомяните один способ, как этот инструмент вписывается в профессиональный рабочий процесс
|
|
|
|
|
|
## Рекомендуемые категории инструментов
|
|
|
|
|
|
Рассмотрите возможность изучения инструментов из следующих категорий:
|
|
|
|
|
|
| Категория | Примеры | Что они делают |
|
|
|
|-----------|---------|----------------|
|
|
|
| **Инструменты сборки** | Vite, Webpack, Parcel, esbuild | Собирают и оптимизируют код для продакшена с быстрыми серверами разработки |
|
|
|
| **Фреймворки для тестирования** | Vitest, Jest, Cypress, Playwright | Обеспечивают корректную работу кода и помогают находить ошибки до развертывания |
|
|
|
| **Инструменты для дизайна** | Figma, Adobe XD, Penpot | Создают макеты, прототипы и системы дизайна совместно |
|
|
|
| **Платформы для развертывания** | Netlify, Vercel, Cloudflare Pages | Хостят и распространяют сайты с автоматическим CI/CD |
|
|
|
| **Системы контроля версий** | GitHub, GitLab, Bitbucket | Управляют изменениями кода, совместной работой и рабочими процессами проекта |
|
|
|
| **CSS-фреймворки** | Tailwind CSS, Bootstrap, Bulma | Ускоряют стилизацию с помощью библиотек готовых компонентов |
|
|
|
| **Менеджеры пакетов** | npm, pnpm, Yarn | Устанавливают и управляют библиотеками кода и зависимостями |
|
|
|
| **Инструменты доступности** | axe-core, Lighthouse, Pa11y | Тестируют инклюзивный дизайн и соответствие стандартам WCAG |
|
|
|
| **Разработка API** | Postman, Insomnia, Thunder Client | Тестируют и документируют API в процессе разработки |
|
|
|
|
|
|
## Требования к формату
|
|
|
|
|
|
**Для каждого инструмента:**
|
|
|
```
|
|
|
### [Tool Name] - [Category]
|
|
|
|
|
|
**Purpose:** [2-3 sentences explaining why developers use this tool]
|
|
|
|
|
|
**Documentation:** [Official website/documentation link]
|
|
|
|
|
|
**Workflow Integration:** [1 sentence about how it fits into development process]
|
|
|
```
|
|
|
|
|
|
## Руководство по качеству
|
|
|
|
|
|
- **Выбирайте актуальные инструменты**: Выбирайте инструменты, которые активно поддерживаются и широко используются в 2025 году
|
|
|
- **Сосредоточьтесь на ценности**: Объясните конкретные преимущества, а не просто то, что делает инструмент
|
|
|
- **Профессиональный контекст**: Учитывайте инструменты, используемые командами разработчиков, а не только индивидуальными энтузиастами
|
|
|
- **Разнообразие выбора**: Выбирайте инструменты из разных категорий, чтобы показать широту экосистемы
|
|
|
- **Современная актуальность**: Отдавайте предпочтение инструментам, которые соответствуют текущим тенденциям и лучшим практикам веб-разработки
|
|
|
|
|
|
## Критерии оценки
|
|
|
|
|
|
| Отлично | Хорошо | Требует улучшения |
|
|
|
|---------|--------|-------------------|
|
|
|
| **Четко объяснено, почему разработчики используют каждый инструмент и какие проблемы он решает** | **Объяснено, что делает инструмент, но упущен контекст его ценности** | **Перечислены инструменты, но не объяснены их назначение или преимущества** |
|
|
|
| **Предоставлены ссылки на официальную документацию для всех инструментов** | **Предоставлены в основном официальные ссылки с 1-2 обучающими сайтами** | **В основном использованы обучающие сайты вместо официальной документации** |
|
|
|
| **Выбраны актуальные, профессионально используемые инструменты из разных категорий** | **Выбраны хорошие инструменты, но ограниченное разнообразие категорий** | **Выбраны устаревшие инструменты или только из одной категории** |
|
|
|
| **Продемонстрировано понимание того, как инструменты вписываются в рабочие процессы разработки** | **Показано некоторое понимание профессионального контекста** | **Сосредоточено только на функциях инструмента без контекста рабочего процесса** |
|
|
|
|
|
|
> 💡 **Совет по исследованию**: Ищите инструменты, упомянутые в вакансиях для веб-разработчиков, изучайте популярные опросы разработчиков или исследуйте зависимости, используемые успешными проектами с открытым исходным кодом на GitHub!
|
|
|
|
|
|
---
|
|
|
|
|
|
**Отказ от ответственности**:
|
|
|
Этот документ был переведен с использованием сервиса автоматического перевода [Co-op Translator](https://github.com/Azure/co-op-translator). Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода. |
