Skip to content

Commit cf3eea6

Browse files
authored
Merge pull request #1 from segersrobbert/master
Homework Week1
2 parents 616bd97 + 4210284 commit cf3eea6

5 files changed

Lines changed: 69 additions & 22 deletions

File tree

‎Week1/MAKEME.md‎

Lines changed: 69 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ You will be working on the same application during the next three weeks. For eac
6363

6464
| Week | Branch | Assignment |
6565
| ---- | ------- | ---------- |
66-
| 1 | `week1` | - By Wednesday: Fetch the HYF repositories and log their display names to the console.<br/>- By Friday: Populate a `<select>` list with the repository names; allow the user to pick one, and display some of its details, like in the example. |
66+
| 1 | `week1` | - Part 1 & 2, by Wednesday: Setup environment, fetch the HYF repositories and log their display names to the console.<br/>- Part 3, by Friday: Populate a `<select>` list with the repository names; allow the user to pick one, and display some of its details, like in the example. |
6767
| 2 | `week2` | Based on the `week1` branch:<br>- When a repository is selected, also load the contributors. Display a loading indicator while loading.<br>- Style the UI, and make it responsive.|
6868
| 3 | `week3` | Based on the `week2` branch:<br>- Refactor the application to use ES6 Classes and async/await.<br>- Make the app ARIA-compliant.<br />- Marvel at your first application. |
6969

@@ -72,30 +72,65 @@ You will be working on the same application during the next three weeks. For eac
7272
## Part 1 - <small>Set-up your environment</small>
7373
**Deadline: Wednesday evening**
7474

75-
- [ ] Fork our class' fork of the JavaScript3 repository to your own GitHub account. Yes, you'll be creating a fork of a fork of a fork:
75+
- [ ] [Fork](https://help.github.com/en/articles/fork-a-repo) our class' fork of the JavaScript3 repository to your own GitHub account. Yes, you'll be creating a fork of a fork of a fork:
7676

77-
```
78-
- Main HYF Javascript 3 repository: https://github.com/HackYourFuture/JavaScript3
79-
- Belgium HYF fork: https://github.com/HackYourFutureBelgium/JavaScript3
80-
- Our class' (Rob's) fork: https://github.com/segersrobbert/JavaScript3
81-
- Your fork here.
82-
```
77+
```
78+
- Main HYF Javascript 3 repository: https://github.com/HackYourFuture/JavaScript3
79+
- Belgium HYF fork: https://github.com/HackYourFutureBelgium/JavaScript3
80+
- Our class' (Rob's) fork: https://github.com/segersrobbert/JavaScript3
81+
- Your fork here.
82+
```
83+
84+
> *Reminder*: A fork is like your own copy of a repository, under your own account, of someone else's repository. Read everything about forking and being social on GitHub [here](https://help.github.com/en/articles/fork-a-repo).
85+
>
86+
> We use forks so that you can later on create [Pull Requests](https://help.github.com/en/articles/about-pull-requests). In short, a pull request (PR) is a way to ask the original owner of a repository (where you forked off from) to merge a change that you did on a branch of your local repository, into the original repository.
87+
>
88+
> A big advantage of PR's is that it allows to **compare code** and **give feedback** directly on the code! This is very handy when reviewing homework!
89+
90+
- [ ] [Clone](https://help.github.com/en/articles/fork-a-repo#step-2-create-a-local-clone-of-your-fork) the fork to your laptop.
8391

84-
- [ ] Clone the fork to your laptop.
8592
- [ ] Open the newly created `JavaScript3` folder from the cloned repository in VS Code *(always open this entire main folder!)*
86-
- [ ] Install the [**ESLint**](https://eslint.org/) extension in VS Code. This extension will highlight and inform you of any violations of the style guide, and allow you to auto-fix a lot of issues. You should probably also already install the [**EditorConfig for VS Code**](https://editorconfig.org/) plugin. Although it's not required in our case because we all use the same editor, it will come in handy when you work on public projects in the future.
93+
94+
> *Tip*: a command line, you can open a folder in VS Code by typing:
95+
>
96+
> ```
97+
> code .
98+
> ```
99+
100+
- [ ] Open a Terminal window in VS Code or in your favorite terminal (like [cmder](https://cmder.net/) or [mingw32](https://gitforwindows.org/)), and **from the main `JavaScript3` folder**, type the following command to install the airbnb style guide and ESLint tools as required for the homework:
101+
102+
```
103+
npm install
104+
```
105+
106+
This should output something like this. If not, contact your coach on Slack!
87107
88-
- [ ] Open a Terminal window in VS Code or elsewhere, and **from the main JavaScript3 folder**, type the following command to install the airbnb style guide and ESLint tools as required for the homework:
108+
```
109+
$ npm install
110+
npm WARN hyf-js3-homework@1.0.0 No repository field.
89111

90-
```
91-
npm install
92-
```
112+
added 188 packages in 19.38s
113+
```
93114
94115
- [ ] Create a new branch for the week 1 homework with the following command:
95116
96-
```
97-
git checkout -b week1
98-
```
117+
```
118+
git checkout -b week1
119+
```
120+
121+
- [ ] Install the [**ESLint**](https://eslint.org/) extension in VS Code. This extension will highlight and inform you of any violations of the style guide, and allow you to auto-fix a lot of issues. You should probably also already install the [**EditorConfig for VS Code**](https://editorconfig.org/) plugin. Although it's not required in our case because we all use the same editor, it will come in handy when you work on public projects in the future.
122+
123+
**Installing ESLint**:
124+
125+
![Installing ESLint](./assets/eslint_install.png)
126+
127+
**Inspecting issues**: Your errors will be highlighted in the editor, and you get an overview in the 'Problems' window; which you access by clicking the little icon in the bottom-left corner. Selecting an error from this list naviates directly to it.
128+
129+
![Inspecting ESLint issues](./assets/eslint_view_errors.png)
130+
131+
**Auto-fix issues**: Press `ctrl+shift+p`, type `eslint` and choose 'Fix all auto-fixable Problems'. You may have to do this a few times.
132+
133+
![Inspecting ESLint issues](./assets/eslint_autofix.png)
99134
100135
## Part 2 - <small>Call the API</small>
101136
**Deadline: Wednesday evening**
@@ -115,6 +150,8 @@ You'll create your application inside the `homework` subfolder of the main `Java
115150
116151
> *Hint*: map.
117152
153+
- [ ] Hand in this first part of your homework. See at the end of this guide for instructions.
154+
118155
## Part 3 - <small>Select list, repo details</small>
119156
**Deadline: Friday evening**
120157
@@ -132,6 +169,8 @@ You'll create your application inside the `homework` subfolder of the main `Java
132169
133170
> We know: creating HTML and modifying the DOM 'manually' is tedious and cumbersome. Later on in your HYF journey, in the [React module](https://github.com/HackYourFuture/React), you'll be modifying the DOM in a much easier and more fun way!
134171
172+
- [ ] That's it for now, time to hand in again!
173+
135174
# Handing in your homework
136175
137176
If necessary, review the instructions how to [Hand in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) using GitHub pull request.
@@ -154,12 +193,20 @@ If the answer is 'yes' to the preceding questions you are ready to follow these
154193
155194
- [ ] Push your `week1` branch to GitHub:
156195
157-
```
158-
git push -u origin week1
159-
```
196+
```
197+
git push -u origin week1
198+
```
199+
200+
This will give you a link that you can follow to immediately create a pull request (see next step).
160201
161202
- [ ] Create a pull request (PR) for your `week1` branch against our class' (Rob's) fork `master` branch.
162203
163-
- [ ] Keep an eye on your notifications: if there are issues with your homework, we'll add comments to your PR. If we don't add comments, that means you've done an excellent job - or we dind't find the time to review it :(.
204+
![Create PR in GitHub](./assets/create_pr.png)
205+
206+
> *Heads up!* Pay close attention to the values in the dropdown lists! Be sure to select `segersrobbert/JavaScript3` as the 'base repository', `master` as the 'base branch', and on the right-hand side, select your fork as the 'head repository' and `week1` (or whatever your homework branch is called) as the 'compare' branch.
207+
208+
- [ ] Keep an eye on your notifications: if there are issues with your homework, your coach will add comments to your PR. If they don't add comments, that means you've done an excellent job - or they dind't find the time to review it :(.
209+
210+
Note that of course the coach will never actually *merge* your PR.
164211
165-
- [ ] You can always amend your homework by pushing more commits to your branch - they'll be included in the pull request. Do this to resolve any remarks we gave in the comments!
212+
- [ ] You can always amend your homework by pushing more commits to your branch - they'll be included in the pull request automatically, and your coach will be notified. Do this to resolve any remarks your coach gave in the comments!

‎Week1/assets/create_pr.png‎

43.3 KB
Loading

‎Week1/assets/eslint_autofix.png‎

7.96 KB
Loading

‎Week1/assets/eslint_install.png‎

35.5 KB
Loading
38 KB
Loading

0 commit comments

Comments
 (0)