diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 000000000..c92897fc3 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,13 @@ +{ + "extends": ["airbnb", "prettier"], + "plugins": ["prettier"], + "env": { + "browser": true + }, + "rules": { + "prettier/prettier": ["error"], + "class-methods-use-this": "off", + "strict": "off", + "no-plusplus": "off" + } +} diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 000000000..5e1bae462 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,6 @@ +language: node_js +node_js: + - '10' + +script: + - npm run lint diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 76498c97d..eed3987c8 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -7,21 +7,15 @@ Topics discussed this week: • API calls ``` ->[Here](/Week3/README.md) you find the readings you have to complete before the ninth lecture. - -## Step 1: Feedback - -**_Deadline Monday_** - -Please provide feedback on last week's homework from a fellow student as a GitHub issue. - -## Step 2: Single Page Application :sweat_drops: +## Step 1: Single Page Application :sweat_drops: **_Deadline Thursday_** _This homework is more extensive and challenging than previous homework! Please read the instructions below carefully and follow them with great attention to detail. Start this homework as soon as you can and allow time for discussion and questions (slack!)._ -### 2.1 Introduction +### 1.1 Introduction + +> In this assignment you will built upon some existing code that is already pre-written by your teachers. Your homework consist of writing the code to make the application work as requested per week. You are going to write a _Single Page Application_ (SPA) that uses the [GitHub API](https://developer.github.com/guides/getting-started/). @@ -36,15 +30,13 @@ Figure 1 below shows an example of what your application could look like. Note t ![UI Example](./assets/hyf-github.png) -In this assignment you will built upon some existing code that is already pre-written by your teachers. Your homework consist of writing the code to make the application work as requested per week. - Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles. A live version of this application can be found here: http://hyf-github.netlify.com/ -### 2.2 The GitHub API +### 1.2 The GitHub API -#### 2.2.1 Get a list of HYF repositories +#### 1.2.1 Get a list of HYF repositories You can fetch a list of HYF repositories through this API endpoint ([What is an API Endpoint?](https://teamtreehouse.com/community/what-is-an-api-endpoint)): @@ -58,25 +50,33 @@ If you open this URL in the browser (_try it!_) you will receive JSON data about The returned JSON data contains some basic information about each repository, such as `name`, `full_name`, `description` etc. There are also many properties that contain URLs that can be used to obtain detail information about certain aspects of the repository. -#### 2.2.2 Get contributor information for a repository +#### 1.2.2 Get contributor information for a repository The JSON data that is returned from the initial request to get repository information includes a property named `contributors_url`. Use the value of this property to fetch a list of contributors. -#### 2.2.3 GitHub API documentation +#### 1.2.3 GitHub API documentation You can find detailed information about the GitHub API by means of the link listed below. However, the documentation is very extensive and not easy to digest. For this homework it is not necessary to study the GitHub API documentation. We provide the link here for completeness. > GitHub API documentation: https://developer.github.com/v3/ -### 2.3 Preparation +### 1.3 Coding Style -You will be working on this same application during the next three weeks. For each week you will need to create a new Git branch, as listed in the Table 1 below. +In this homework we will be introducing a preferred coding style and supporting tools to help you write _"clean code"_. A number of popular [_JavaScript Style Guides_](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa) have recently emerged of which the one developed by [Airbnb](https://github.com/airbnb/javascript) has been chosen for this homework and is recommended for subsequent use during the HYF curriculum. It is documented here: -| Week | Branch | Assignment | -|:----:|--------|------------| -| 1 | `week1` | Create a basic application using callbacks to handle network requests. | -| 2 | `week2` | - Refactor the callbacks to promises.
- Make the UI responsive.| -| 3 | `week3` | - Refactor the application to use ES6 Classes and async/await.
- Make the app ARIA-compliant. | +- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) + +While you do not need to read this guide in detail, it is recommended that you review sections 1-8, 12-13, 15-21 and 23. The tools installed during the project preparation step below will help you to implement these guidelines in your code. You will see error and warning messages in the VSCode editor when your code deviates from the recommended style. An additional check will be done when you submit your homework as a pull request on GitHub. + +### 1.5 Preparation + +You will be working on the same application during the next three weeks. For each week you will need to create a new Git branch, as listed in the Table 1 below. + +| Week | Branch | Assignment | +| :--: | ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| 1 | `week1` | - Create a basic application using callbacks to handle network requests. | +| 2 | `week2` | Based on the `week1` branch:
- Refactor the callbacks to promises.
- Make the UI responsive. | +| 3 | `week3` | Based on the `week2` branch:
- Refactor the application to use ES6 Classes and async/await.
- Make the app ARIA-compliant. | Table 1. Homework schedule @@ -84,64 +84,79 @@ You will be working on this same application during the next three weeks. For ea 1. Fork the JavaScript3 repository (_this repository_) to your own GitHub account. 2. Clone the fork to your laptop. -3. Open the `homework` folder inside the cloned repository in VSCode. -4. Create a new branch for the week 1 homework with the following command: +3. Open the newly created `JavaScript3` folder from the cloned repository in VSCode. +4. Install the following extension in VSCode: + + **Prettier - Code formatter**. + +5. Open a Terminal window in VSCode and type the following command to install Prettier and ESLint tools as required for the homework: - ``` - git checkout -b week1 - ``` + ``` + npm install + ``` -### 2.4 Code Overview +6. Create a new branch for the week 1 homework with the following command: -The files that make up the application are located in the `src` folder. It contains the following files: + ``` + git checkout -b week1 + ``` -| Filename | Description | -|------------------|-------------| -| ~~`App.js`~~ | Not used in week 1 and 2. | -| ~~`Contributor.js`~~ | Not used in week 1 and 2. | +### 1.5 Code Overview + +The files that make up the application are located in the `homework` folder. It contains the following files: + +| Filename | Description | +| -------------------- | --------------------------------- | +| ~~`App.js`~~ | Not used in week 1 and 2. | +| ~~`Contributor.js`~~ | Not used in week 1 and 2. | | `hyf.png` | Contains the HackYourFuture logo. | -| `index.html` | The application's HTML file. | -| `index.js` | A starter JavaScript file. | -| ~~`Repository.js`~~ | Not used in week 1 and 2. | -| `style.css` | A starter CSS file. | -| ~~`Util.js`~~ | Not used in week 1 and 2. | +| `index.html` | The application's HTML file. | +| ~~`index2.html`~~ | Not used in week 1 and 2. | +| `index.js` | A starter JavaScript file. | +| ~~`Repository.js`~~ | Not used in week 1 and 2. | +| `style.css` | A starter CSS file. | +| ~~`Util.js`~~ | Not used in week 1 and 2. | In week 1, you should only modify `index.js` and `style.css`. _**Do not modify any other files at this time!**_ -#### 2.4.1 A first examination +Although you should only modify files in the `homework` folder, we recommend that you always open the `JavaScript3` folder rather than directly opening the `homework` folder in VSCode. The `JavaScript3` folder contains the actual git repository and the configuration files required by the installed tools. + +_**Do not change or delete any files outside of the `homework` folder!**_ + +#### 1.5.1 A first examination 1. Open `index.html` and examine its contents (but don't modify anything). Notice that the HTML `body` looks like this: - ```html - -
- - - ``` + ```html + +
+ + + ``` - The `body` tag contains a single `div` to which you will need to dynamically append HTML elements through your JavaScript code in `index.js`. + The `body` tag contains a single `div` to which you will need to dynamically append HTML elements through your JavaScript code in `index.js`. 2. Open `index.js`. This file contains a starter set of code for you to expand. It contains the following three functions: - | Function | Description | - |----------|-------------| - | `fetchJSON` | Uses `XMLHttpRequest` to fetch JSON data from an API end point. This function uses an asynchronous callback. | - | `createAndAppend` | A utility function for easily creating and appending HTML elements. | - | `main` | Contains the start-up code for the application. | - - `index.js` also contains a constant with the URL for the HYF repositories as listed in section 2.2.1: + | Function | Description | + | ----------------- | ------------------------------------------------------------------------------------------------------------ | + | `fetchJSON` | Uses `XMLHttpRequest` to fetch JSON data from an API end point. This function uses an asynchronous callback. | + | `createAndAppend` | A utility function for easily creating and appending HTML elements. | + | `main` | Contains the start-up code for the application. | + + `index.js` also contains a constant with the URL for the HYF repositories as listed in section 2.2.1: - ```js - const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; - ``` + ```js + const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100'; + ``` 3. Open the `index.html` file in your browser. Notice that it produces the same JSON output that you saw previously when you opened the URL directly in the browser. 4. Review the `main()` function in `index.js` and examine how this code renders the JSON output in the browser by means of a `pre` HTML element (for demonstration purposes). -### 2.5 Week 1 Assignment +### 1.6 Week 1 Assignment The assignment is to produce an application similar to the one illustrated in Figure 1 above. @@ -151,7 +166,7 @@ It should include the following components: 2. A left-hand column that displays basic information about the selected repository. 3. A right-hand column that displays a list of contributors to the repository. - >In case you run out of time, you can also do the contributors list in week 2. + > In case you run out of time, you can also do the contributors list in week 2. **Functional Requirements:** @@ -181,37 +196,45 @@ It should include the following components: - Add one `option` element per repository to the `select` element, where each `option` element has the array index of the repository as its `value` attribute and the name of the repository as its text content: - ```html - - ``` + ```html + + ``` +* To sort the list repositories use [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) and [`.localeCompare()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare). -- To sort the list repositories use [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) and [`.localeCompare()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare). +* Use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive. -- Use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive. +* To force a `404` network error so that you can test the rendering of errors, change the URL to make an invalid GitHub request, e.g. append an `x` to `orgs`: `orgsx`. -- To force a `404` network error so that you can test the rendering of errors, change the URL to make an invalid GitHub request, e.g. append an `x` to `orgs`: `orgsx`. +### 1.7 Handing in your homework +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. -### 2.5 Handing in your homework +To test whether your code will be accepted when you submit your homework as a pull request you need to ensure that it does not contain ESLinr errors. Open a terminal window in VSCode and type the following command: + +``` +npm test +``` + +If any errors or warnings are reported by this command you need to fix them before submitting a pull request. + +In addition, check for the following: - Have you removed all commented out code (should never be present in a PR)? -- Have you used `const` and `let` and avoided `var`? - Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)? - Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/code_formatting.md))? -- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)? -If the answer is 'yes' to all preceding questions you are ready to follow these instructions: +If the answer is 'yes' to the preceding questions you are ready to follow these instructions: 1. Push your `week1` branch to GitHub: - ``` - git push -u origin week1 - ``` + ``` + git push -u origin week1 + ``` 2. Create a pull request for your `week1` branch. @@ -221,8 +244,7 @@ _BONUS_ : Code Kata Race - [Codewars](https://www.codewars.com/collections/hyf-homework-number-2) - -## Step 3: Read before next lecture +## Step 2: Read before next lecture _Deadline Sunday morning_ diff --git a/Week1/README.md b/Week1/README.md index bd82e7722..6756bb92d 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -20,3 +20,15 @@ Here are resources that we like you to read as a preparation for the first lectu ### XMLHttpRequests - [Making HTTP Requests in JavaScript](https://www.kirupa.com/html5/making_http_requests_js.htm) + +### Clean Code + +- [How to write clean code? Lessons learnt from “The Clean Code” — Robert C. Martin](https://medium.com/mindorks/how-to-write-clean-code-lessons-learnt-from-the-clean-code-robert-c-martin-9ffc7aef870c). + + > Note that this article includes some code examples writte in Java, but the same principles can equally be applied to JavaScript. + +- [Clean Code concepts adapted for JavaScript](https://github.com/ryanmcdermott/clean-code-javascript) + +### Handing in homework using GitHub pull requests + +- [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 04c09b4da..e35660898 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -13,12 +13,11 @@ Topics discussed this week: - If you are still not completely clear on promises, here are some additional resources :ring: - - [Google's post about Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises) - - [A nice article from David Walsh](https://davidwalsh.name/promises) - - [A real life example](https://github.com/mdn/js-examples/blob/master/promises-test/index.html) - - [stackoverflow](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript) - - YouTube: [promises](https://www.youtube.com/watch?v=WBupia9oidU) - + - [Google's post about Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises) + - [A nice article from David Walsh](https://davidwalsh.name/promises) + - [A real life example](https://github.com/mdn/js-examples/blob/master/promises-test/index.html) + - [stackoverflow](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript) + - YouTube: [promises](https://www.youtube.com/watch?v=WBupia9oidU) ## Step 2: Implement requested PR changes @@ -35,9 +34,9 @@ The homework for week 2 will build on the work you did in week 1. You will creat 1. Make sure that you committed all changes in the week 1 version of your homework. 2. Create a new `week2` branch: - ``` - git checkout -b week2 - ``` + ``` + git checkout -b week2 + ``` ### 3.2 Assignment @@ -50,19 +49,29 @@ You will continue to work on the files `index.js` and (possibly) `style.css`. ### 3.3 Handing in your homework +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. + +To test whether your code will be accepted when you submit your homework as a pull request you need to ensure that it does not contain ESLinr errors. Open a terminal window in VSCode and type the following command: + +``` +npm test +``` + +If any errors or warnings are reported by this command you need to fix them before submitting a pull request. + +In addition, check for the following: + - Have you removed all commented out code (should never be present in a PR)? -- Have you used `const` and `let` and avoided `var`? - Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)? -- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md))? -- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)? +- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/code_formatting.md))? -If the answer is 'yes' to all preceding questions you are ready to follow these instructions: +If the answer is 'yes' to the preceding questions you are ready to follow these instructions: 1. Push your `week2` branch to GitHub: - ``` - git push -u origin week2 - ``` + ``` + git push -u origin week2 + ``` 2. Create a pull request for your `week2` branch. @@ -74,4 +83,3 @@ Note: ## Step 4: Read before next lecture Go through the reading material in the [README.md](../Week3/README.md) to prepare for your next class. - diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index ad6e7286e..ab57382f2 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -7,7 +7,6 @@ Topics discussed this week: • call, apply, bind ``` - ## Step 1: Fix requested changes _Deadline Monday_ @@ -25,15 +24,14 @@ _Deadline Monday_ - [try...catch](../../../../fundamentals/blob/master/fundamentals/try_catch.md) - [async/await](../../../../fundamentals/blob/master/fundamentals/async_await.md) - The homework for week 3 will build on the work you did in week 2. You will create a new branch based on the `week2` branch. 1. Make sure that you committed all changes in the week 2 version of your homework. 2. Create a new `week3` branch: - ``` - git checkout -b week3 - ``` + ``` + git checkout -b week3 + ``` ### 2.2 Assignment @@ -43,7 +41,6 @@ This week you will work with all JavaScript files in the `src` folder. The assig 2. Make your app ARIA-compliant (see below). 3. Refactor your application to use ES6 classes. - #### 2.2.1 async/await **Instructions:** @@ -52,7 +49,6 @@ This week you will work with all JavaScript files in the `src` folder. The assig 2. Make sure that your error handling code still works. See the week2 MAKEME on how to force an error response from GitHub. - #### 2.2.2 ES6 Classes **_Deadline Saturday_** @@ -61,12 +57,13 @@ This final assignment requires you to go the extra mile and master Object Orient In this assignment you need to redistribute and adapt the code from `index.js` to the files `App.js`, `Repository.js` and `Contributor.js`. You do not need to modify `Util.js`. -| File | Description | -|------------------|-------------| -| `App.js` | The `App` class contains the start-up code and manages the overall orchestration of the app. | -| `Repository.js` | The `Repository` class holds code and data for a single repository. | -| `Contributor.js` | The `Contributor` class holds code and data for a single contributor. | -| `Util.js` | The `Util` class contains static helper methods for use in the other classes. | +| File | Description | +| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `index2.html` | You should load this HTML file in your browser instead of `index.html` to work with the classes version of your homework. It loads the following JavaScript files through ` - - - - - ``` - #### 2.2.3 ARIA-compliance (BONUS) Please review the material from the HTML/CSS module: [Get familiar with Accessible Rich Internet Applications (ARIA)](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1#get-familiar-with-accessible-rich-internet-applications-aria). @@ -97,19 +80,29 @@ For the GitHub application ARIA-compliance means that the Contributors list shou #### 2.2.4 Handing in your homework +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. + +To test whether your code will be accepted when you submit your homework as a pull request you need to ensure that it does not contain ESLinr errors. Open a terminal window in VSCode and type the following command: + +``` +npm test +``` + +If any errors or warnings are reported by this command you need to fix them before submitting a pull request. + +In addition, check for the following: + - Have you removed all commented out code (should never be present in a PR)? -- Have you used `const` and `let` and avoided `var`? - Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)? -- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md))? -- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)? +- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/code_formatting.md))? -If the answer is 'yes' to all preceding questions you are ready to follow these instructions: +If the answer is 'yes' to the preceding questions you are ready to follow these instructions: 1. Push your `week3` branch to GitHub: - ``` - git push -u origin week3 - ``` + ``` + git push -u origin week3 + ``` 2. Create a pull request for your `week3` branch. @@ -124,12 +117,14 @@ Go trough the reading material in the [README.md](https://github.com/HackYourFut If you haven't already join our clan: "Hack Your Future" in codewars Solve the following problems: + - [Problem 1](https://www.codewars.com/kata/keep-up-the-hoop) - [Problem 2](https://www.codewars.com/kata/find-the-first-non-consecutive-number) - [Problem 3](https://www.codewars.com/kata/negation-of-a-value) - Some more [Homework](https://www.codewars.com/collections/hyf-homework-1) _Hints_ + - Hint for Q1: split your code into two parts, one part for the case that one of the two strings has an extra letter at the start or the end but is otherwise identical & one part for the case that the strings are the same length but one character is different in one of the strings - Also for Q1 this function on strings might be useful: [JavaScript String slice() method](https://www.w3schools.com/jsref/jsref_slice_string.asp) - Also potentially useful: [JavaScript String charAt() Method](https://www.w3schools.com/jsref/jsref_charat.asp) diff --git a/homework/.eslintrc b/homework/.eslintrc deleted file mode 100644 index ae8189517..000000000 --- a/homework/.eslintrc +++ /dev/null @@ -1,47 +0,0 @@ -{ - "env": { - "browser": true, - "commonjs": true, - "es6": true, - "node": true - }, - "parserOptions": { - "ecmaVersion": 2017, - "ecmaFeatures": { - "jsx": true - }, - "sourceType": "module" - }, - "extends": [ - "eslint:recommended" - ], - "rules": { - "no-const-assign": "warn", - "no-this-before-super": "warn", - "no-undef": "warn", - "no-unreachable": "warn", - "no-unused-vars": "warn", - "constructor-super": "warn", - "valid-typeof": "warn", - "no-var": "warn", - "prefer-const": "warn", - "no-multiple-empty-lines": "warn", - "eol-last": [ - "error", - "always" - ], - "no-console": "off", - "camelcase": "warn", - "eqeqeq": [ - "error", - "always", - { - "null": "ignore" - } - ], - "semi": [ - "warn", - "always" - ] - } -} \ No newline at end of file diff --git a/homework/src/App.js b/homework/App.js similarity index 88% rename from homework/src/App.js rename to homework/App.js index 3e0660ccc..32b71e34b 100644 --- a/homework/src/App.js +++ b/homework/App.js @@ -17,13 +17,13 @@ class App { // 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your