Skip to content

WebPurple JS external courses "pattern" repo

License

Notifications You must be signed in to change notification settings

WebPurple/external-courses

Repository files navigation

External Front-End course

Задания и теоретическая база

Все необходимые материалы с примерами кода, а также задания размещены в соответствующих разделах на WebPurple-Learn.

Необходимое ПО

Начало работы

  1. Создаем аккаунт в github, логинимся;
  2. Fork'аем репозиторий с помощью кнопки "Fork" справа вверху;
  3. Переходим на страницу Fork'нутого репозитория на своем аккаунте;
  4. В настройках репозитория добавляем к репозиторию тренеров (Settings -> Collaborators);
  5. Открываем терминал git bash в директории на локальном компьютере, где будет располагаться проект;
  6. Клонируем свою копию репозитория на компьютер с помощью команды в терминале git clone <url репозитория.git> (url репозитория можно скопировать из адресной строки или, нажав кнопку "clone or dowload", скопировать оттуда);
  7. Устанавливаем модули с помощью команды npm install.

Flow

В директории src размещены каталоги соответствующие темам практических работ. Каждая практическая работа выполняется в отдельной ветке.

Внутри директории, соответствующей теме практической работы, должны размещаться .js, .html, .css-файлы с выполненным заданием. Изначально директория содержит только файл README.md, в котором содержится описание для практической работы.

Каждое задание в практической работе должно быть выполнено в отдельном файле, который называется по имени задания, прим. task-01.js(task-01.html), где 01 - номер задания.

Если практическая работа подразумевает выполнение только одного задания, файл следует назвать task.js(task.html).

Для заданий .js:

Функция, являющаяся решением задания, должна быть экспортирована из файла решения с помощью инструкции module.exports = <имя_функции>.

Для заданий .html/.css:

HTML и CSS тестируется без каких-либо изменений.

Для того, чтобы протестировать CSS нужно описать его в теге <style /> и/или подключить .css-файл(ы) в HTML-документ соответствующего задания.

Для выполнения практической работы необходимо создать ветку (название соответствует теме практической работы) с помощью команды git checkout -b <название ветки> (переход в ветку осуществляется той же командой без ключа -b).

После выполнения задания необходимо выполнить commit изменений с помощью команды git commit -a -m "<комментарий>", после чего отправить изменения на GitHub с помощью команды git push origin <название ветки>.

На GitHub необходимо сделать pull request ветки задания в ветку master, а также запросить ревью у тренера (request review).

В случае подтверждения от тренера и успешного выполнения тестов тренеру необходимо подтвердить перенос кода из задания в ветку master. Успешно влитое ревью означает успешно завершённое задание. Таким образом, к концу обучения в репозитории должно быть 14 закрытых pull request, а также код всех выполненных заданий, распределённый по директориям, соответствующим темам, должен находиться в ветке master.

Тесты и линтер

Для предварительной проверки правильности выполнения заданий используется система тестов, а для проверки правильности форматирования и оформления кода используется линтер. Тесты (если они есть) и линтер запускаются локально при выполнении commit, а также на стороне GitHub при создании pull request.

Для самопроверки тесты можно запустить из корневой папки командой npm test, линтер - npm run lint

В случае, если необходимо игнорировать замечания линтера, можно воспользоваться директивой отключения линтера eslint-disable-line (не рекомендуется). Директива оформляется в виде комментария в конце необходимой строки, после директивы лучше указать конкретное правило, которое нужно отключить, чтобы не упустить других замечаний.

console.log(a); // eslint-disable-line
console.log(b); // eslint-disable-line no-console

Дополнения

Все интересующие вопросы могут быть заданы тренеру, ниже представлено дополнение к некоторым моментам руководства в виде пошагового алгоритма.

Создание и работа с Pull request и добавление тренера

Необходимо перейти на страницу своего репозитория на GitHub, кликнуть по пункту "Pull Request" в верхнем меню, далее нажать на кнопку "New pull request".

Слияние веток происходит по направлению, указанному стрелками в интерфейсе создания pull request, слева должна быть выбрана ветка "master" вашего репозитория, справа - ветка с практической работой, отправляемой на проверку.

После выбора веток в интерфейсе и нажатия кнопки Create pull request будет представлена форма создания pull request, в которой необходимо задать заголовок, соответствующий теме практической работы, а в поле комментария необходимо более развёрнуто описать проделанную работу и/или добавить текст задания. После заполнения формы необходимо нажать кнопку "Create pull request", после чего браузер выполнит перенаправление на страницу созданного pull request.

В случае, если тренер оставил замечания к pull request и не зачёл практическую работу, необходимо исправить замечания и выполнить push изменений в соответствующую ветку, после чего ответить на комментарии тренера, где описать результат проделанной работы.

Когда тренер зачёл практическую работу и все проверки тестов и линтера были выполнены, становится активной (зелёной) кнопка "Merge pull request", по нажатию на которую можно влить изменения из ветки практической работы в ветку master, что означает сдачу практической работы.

Style-guide

Хорошая практика, особенно на начальных этапах, - придерживаться руководству по стилю программирования. Одним из таких руководств является Airbnb JavaScript Style Guide, с ним необходимо ознакомиться перед началом курса. Так же в заданиях установлен линтер от Airbnb, который будет проверять код на соответствие данным правилам и подсказывать что необходимо исправить.

Среда разработки

Для разработки вам понадобится VS Code.

Необходимо установить следующие расширения:

Опционально:

Далее установите следующую конфигурацию VS Code: (F1 -> начните вводить Open setting (JSON)) и вставьте/добавьте конфигурацию ниже:

{
  "files.autoSave": "onFocusChange",
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "[css]": {
      "editor.formatOnSave": true,
      "editor.defaultFormatter": "aeschli.vscode-css-formatter",
  },
  "[html]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": true,
  },
}

Feedback

Замечания и пожелания можно оформить в виде Issues в этом репозитории.

About

WebPurple JS external courses "pattern" repo

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages