webpurple / external-courses

WebPurple JS external courses "pattern" repo

External Front-End course

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

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

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

• NodeJS (LTS);
• Git.

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

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, что означает сдачу практической работы.

Подробнее про работу с Github тут - Как создать ветку, коммит, pull request с домашней работой в Github

Style-guide

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

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

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

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

• Eslint
• CSS Formatter
• Prettier

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

• Git lens
• Live server
• TabNine - AI Assistant
• Code runner

Далее установите следующую конфигурацию 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 в этом репозитории.

external-courses's Issues

CSS validation failed if there are any @import's in css bundle that are not situated at the top of the bundle

Example

change ex11 description

Обновить описание задания по поводу - "изменения/смены" градиента

Clarify ex5 (calculator)

Travis CI: problem with the yarn.lock

yarn.lock was update today

Travis fails due to 'jump-' keywords in steps() value of animation property

I'm experiencing an issue with the pre-commit test in ex11:

1. “jump-both” is not a “animation” value : in .pizza
2. “jump-start” is not a “animation” value : in .pizza-fadeout

I'm aware that jump-start and jump-both are experimental features of animation-timing-function but I need them in my preloader to synchronize two animations. Could you, please, consider it some kind of progressive enhancement and add an exception to the test?

Arrow functions in class methods do not work

class Class {
constructor() {
...
}

someMethod = () => {
...
}

}

Linter error - Parsing error: Unexpected token =

✖ 1 problem (1 error, 0 warnings)

Ex5 fix task description

5-е задание. Кальлулятор. Надо в описании уточнить, что нужно использовать именно замыкания. Половина пытается использовать контекст

Problem with a test

Test for the first ex. won't pass due to name of the file must be named as "task-01.js" but it's said in description that if there is only one task to complete the file must be named as "task.js".

change ex13 decription

Необходимо скорректировать информацию в readme ex13_js_events.

Сейчас:
5. Если задач в списках Backlog, In progress, Ready - нет, кнопку нужно задизейблить (убрать возможность клика).

Правильный вариант:
5. Если задач в списках In progress, Ready, Finished - нет, кнопку нужно задизейблить (убрать возможность клика).

Кнопка в Backlog не должна дизейблится, так как именно в этот список добавляются новые задачи. В Finished - должна.

Update and review tests

Необходимо просмотреть текущие тесты, что можно там улучшить,

• убрать тесты на валидацию html

Travis test gives an error after commit stage

Cannot read property 'addExpectationResult' of undefined. Crashes at ex8
//////
const {task, css, html} = require('~utils')('ex8_html-css-basics', true, 'html');

describe('Ex8. HTML & CSS Basics', () => {
const tasks = Array.from({length: 4}).map((_, i) => 0${i + 1});

tasks.forEach(t =>
    task(t, markup => {
        it('html should be valid', html(markup));
        it('css should be valid', css(markup));
    }),
);

});
//////
jestjs/jest#5922

Simplify ex10

Configure stylelint

Можно попробовать установить и сконфигурировать style-lint:

https://stylelint.io/

можно будет протестировать на тасках по канбану

Fix test for ex4 task 6

В тесте для 4-ой практической работы при тестировании 6-ого задания опечатка во входных данных в 51-ой строке
expect(code('I Аm cool')).toBe('I Am Cool');
(В первом случае А - русская буква с кодом 1040, во втором случае - английская (65)), из-за опечатки падает тест.

--expect(code('I Аm cool')).toBe('I Am Cool');
++expect(code('I Am cool')).toBe('I Am Cool');

Horisontal scroll on desctop(1800px width)

https://learn.webpurple.net/externals/topic7_js-array-methods/js-array-methods#%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D1%8B

https://drive.google.com/file/d/1_xGtww3l1JibPzJ6e0sJ43_SsT7GQxCn/view?usp=drivesdk

Fix link in README.md

travis-ci.org will be closed soon. Change the link to https://travis-ci.com or choose a new testing service. Thanks

Add deploy to netlify / share replit code instructions

Добавить инструкцию для netlify / replit
обновить в заданиях что нужно прикладывать ссылку с результатом (особенно для kanban)
replit возможно пока стоит ввести опцианально для некоторых заданий

Incomplete job information

In ex4_js-objects-part2 > README.md > ## Задание 11 > "Написать функцию, которая посчитает сколько раз каждый символ встречается в строке."
The test of this task, unlike the tests of the rest of the task, checks the output to the "console.log", and not "return" like the others.

Typo in the text of the task

In ex3_js-objects-part1 > README.md > ## Задание №4 > "Написать функцию, которая принимает строку и объект, проверяет есть ли у переданного объекта свойство с данным именем, если такое свойство отсутствует, до добавляет его и устанавливает значение 'new'. Функция должна возвращать исходный модифицированный объект."

In ex4_js-objects-part2 > README.md > ## Задание 3 > "Написать функцию, которая удаляет первый и последний пробел с строке и возвращает строку без начального и завершающего пробела."

In ex4_js-objects-part2 > README.md > ## Задание 4 > "Написать функцию, которая принимает строку и возвращает эту же строку, на с заглавным первым символом."

Git manual

Надо написать мануал - последовательность как правильно обновлять все, как правильно пушить, как реквесты делать. Или видосик записать и выложить

Update ES-lint and review/update rules

Необходимо обновить ES-lint, в некоторых заданиях у ребят возникали проблемы с линтом + добавить новые правила (неиспользуемые переменные / мутация аргументов и т.п.)

Clarify ex4 task

not use trim

Fix ex3 - task 4 criteria or linter rules.

Ссылка на таску
Текст таски:

Написать функцию, которая принимает строку и объект, проверяет есть ли у переданного объекта свойство с данным именем, если такое свойство отсутствует, то добавляет его и устанавливает значение 'new'. Функция должна возвращать модифицированный исходный объект.

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

Wrong link in ex8_html-css-basics

Ex 4, point 3: Измените настройки текста - link was broken

Move 14 15 16 themes

Add evaluation criteria for tasks

добавить в задачи evaluation criteria для объективности оценки

Уточнить задание ex4 №9

В задании не совсем очевидно как считать слова строке 0 или 1 первое слово.
Можно добавить просто пример. Что бы всем было понятно.

Add unit tests ex_12, ex_13 hometasks

Need to add unit tests for ex_12, ex_13 hometasks. If it's possible, for 15 homework too

Ex14_js-context.

Some tips for README.md.

1. "...hangman.startAgain('webpurple')
   .guess(w) // "w________" ..."
   fix ".guess('w')"
2. Add description for .getStatus() method, mentioned in the end of file;
3. " Если игрок назвал назвал неправильную букву,"
4. "...hangman.getWrongSymbols(); // [a,k]"
   fix hangman.getWrongSymbols(); // ["a","k"]
5. if it's possible, we can hint, how to use module.exports for task2 (module.exports = new Hangman('webpurple');).

LECTION: Describe more detailed github flow

Это ишуя касается только лекции по гиту:

На занятии по гиту рассказывать про весь флоу. Кроме технических действий типа клон и пуш.
Про комменты, например. Кто их резолвит и что надо сначала запушить исправления, а потом отвечать на комменты.
Но если есть вопросы, то сразу писать ответный коммент. В целом о культуре код ревью. Мёрж конфликты

fix readme for ex4_js-objects-part2

Исправить критерии оценки: поменять количества заданий для определенного балла. Заданий должно быть 14, а в readme написано 5

Fix eslint problem in package.json

Падают проверки Travis CI из-за ошибки Value for 'ext' of type '[String]' required.
В файле package.json в 7-ой строке изменил
"lint": "eslint --ext --cache .js ./ --fix",
на
"lint": "eslint --ext .js --cache ./ --fix",
проверки Travis CI перестали падать.

P. S. Также небольшая поправка по Readme - Начало работы - можно немного поправить 4-ый пункт:

-- 4. В настройках репозитория добавляем к репозиторию тренеров (Settings -> Collaborators);
++ 4. В настройках репозитория добавляем к репозиторию тренеров (Settings -> Manage access -> Invite a collaborator);

Fix ex7 task

No task 7

Add lesson or video "git - implementation"

Проблемы:

1. У немалой части студентов наблюдается проблема с гитом. А именно использование. Это и невнимательность студентов и непонимание сущностей (некоторые проводят аналогию ветки с папкой; понимание пул реквеста не сразу приходит что куда откуда). В попытках исправить самостоятельно набредают на проблемы, распутать которые нужно потратить много своего(преподавательского) времени.

2. Нет решения об использовании единой системы управления версиями. Есть студенты, которые уже когда-то пользовались гитом и использовали какие-то отдельные инструменты, и если вдруг они столкнутся с проблемой - преподавателю либо нужно будет вникнуть в эту tool либо объяснять студенту на примере того, с чем привык работать преподаватель, а это растягивается, так как студент непривыкший.

Решения:

1. По первому пункту:
   а). Предлагаю либо посвятить отдельное занятие (добавить в расписание или заменить одну практику) по гиту.
   А именно, нужно показать действия студентов при работе с гитом.
   .
   б). Предлогаю либо создать запись на видео где будут показаны примеры
   "Форк репозитория"
   "Клонирование репозитория"
   "Создание новой ветки"
   "Создание коммита + пуш в удалённый"
   "Создание пулл реквеста"
   "Чтение замечаний в ПР - исправление - создание нового коммита - пуш в ту же ветку"
   "Переход на ветку мастер и создание новой ветки для нового упражнения"

2. Необходимо принять решение об использовании во время обучения чего то одного для работы с гит (Если консоль, то пусть все через консоль работают, если встроенный в VSCode Source control то его пусть все используют)

Configure Github Actions for tests and lint

Add config yaml and build bage https://docs.github.com/en/actions/monitoring-and-troubleshooting-workflows/adding-a-workflow-status-badge