🐙 Этап 2: Git и GitHub.

Уже было в backend карте, но повторим суть. Мы сверстали сайт, он работает. Но пока он лежит у вас в папке локально и вы кидаете его кенту/такому же энтузиасту, как вы через ТГ или Google Disk - долго это дело не проживет. Нужно со старта учиться делать все хорошо, профессионально. Тем более, на работе/в стартапе вы точно столкнетесь с тем, что над проектом работают 5-10 человек одновременно. Поэтому, учимся системе контроля версий и культуре командной работы.

📱 1. Git и GitHub/GitLab

Еще раз по терминологии. Git - это страховка которая нужна в первую очередь тебе самому (!). GitHub (или GitLab, чаще встречается в коммерции, ибо можно поднять его на своем сервере) - это социальная сеть для кода. Если вашего кода нет в репозитории - его "не существует".

Кстати, недавно выяснил, что существуют некие GUI-клиенты (кнопки в редакторе) для работы с git. Это настолько лажа, что я их называть тут даже не буду - не смотрите туда. Важно понимать как оно все работает, а не просто кнопки нажимать. Учимся работать руками, в терминале. Поэтому, коротко выделю основное:

Три состояния файла:

- Modified
Вы изменили файл, но Git еще не следит за этим изменением.
- Staged (Index)
Вы сказали Git: «Я хочу включить это изменение в следующий снимок».
Команда: git add
- Committed
Снимок сделан и сохранен в истории.
Команда: git commit

Основные команды, нужно знать:

- "git status" - вводите её каждые 5 минут. Она показывает, где вы и что происходит.
- "git add ." - добавить всё (лучше добавлять файлы поштучно).
- "git commit -m "feat: added header"" - зафиксировать изменения.
- "git push origin main" - отправить на сервер.
- "git pull" - забрать чужие изменения.

🔼 2. Ветвление (branching)

В нормальных конторах в ветку main (или master) никто напрямую не пишет. Там всегда рабочий production-код. Поэтому наш рабочий процесс следующий:

1) Создать ветку под задачу: "git checkout -b feature/login-form"
2) Написать код и закоммитить.
3) Отправить ветку: "git push -u origin feature/login-form"
4) Создать Pull Request.
5) Провести Code Review и выполнить Merge.

Где учить:

- Learn Git Branching - визуальный тур, покажет, как команды работают "под капотом";
- Atlassian Git Tutorial - отличный справочник с картинками, объясняющий сложные вещи (rebase, cherry-pick) простым языком.

3. .gitignore и node_modules

Ошибка №1 - залить node_modules в Git. Это норм (пока учитесь, не шарите), но так делать не нужно. Поэтому всегда, ВСЕГДА в корне проекта создаём файл .gitignore:

node_modules/
.env
.DS_Store
dist/

Если в репозитории есть node_modules - это ужас. Также, как и .env, с вашими токенами/ключами, credentials.

🤷‍♂️ 4. Культура коммитов (сonventional commits)

Не пишите в коммитах: "fix", "update" и не дай боже "asd". Даже для своих, а то получите плохую привычку. Используйте стандарт:

- feat: новая фича;
- fix: исправление бага;
- refactor: переписан код без изменения функционала;
- docs: обновлена документация.

🏄‍♂️ 5. Практическое задание по этапу

Берем нашу "Визитку" из первого этапа и превращаем её в репозиторий. Ваше ТЗ:

1) Инициализация:
- Создать репозиторий на GitHub.
- Связать локальную папку:
- git init
- git remote add origin <url>
2) Игнор:
- Создать .gitignore и исключить системные файлы.
3) Ветки:
- Создать develop от main.
- Создать feature/add-animation от develop.
4) Изменения:
- В ветке feature добавить простую CSS-анимацию.
- Закоммитить изменения.
5) Финал:
- Создать Pull Request из feature/add-animation в develop.
- Провести self-review.
- Написать комментарий "Looks good".
- Смерджить ветку.

Следующий пост по этой теме - React и Vue. Почему jQuery умер, и т.д.

#roadmap #fullstack #git #github

⚡️ Возвращаемся к Roadmap, пунктуальность моя сука. У нас на очереди React и Vue. Можно брать оба варианта, но по началу я бы концентрировался на чем-то одном.

Cтатья в Telegra.ph, потому что все, что описываю, в 1 пост в ТГ не помещается уже. Нужно либо лаконичнее, либо я хз.

🚀 Ну и на следующем этапе можно будет переходить к серверной части. Если кого интересует бэкенд именно на Python - вот Roadmap от меня. В этой же сери дальше я рассмотрю альтернативы. На самом деле, 3/4 можно рокировать, особо роли играть не будет. Как удобно. Скоро пост.

#roadmap #fullstack #git #github