You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Week1/MAKEME.md
+12-18Lines changed: 12 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -11,7 +11,7 @@
11
11
12
12
This week's concepts can be challenging, therefore let's get an easy introduction using some interactive exercises! Check the following resources out and start practicing:
13
13
14
-
-[Introduction to jQuery](https://www.codecademy.com/learn/learn-jquery)
-[Build a JavaScript & jQuery Movie Info App](https://www.youtube.com/watch?v=YsPqjYGauns)
42
41
43
42
## **4. PROJECT: Hack Your Repo I**
44
43
@@ -81,12 +80,6 @@ The returned JSON data contains some basic information about each repository, su
81
80
82
81
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.
83
82
84
-
#### 1.2.3 GitHub API documentation
85
-
86
-
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.
87
-
88
-
> GitHub API documentation: https://developer.github.com/v3/
89
-
90
83
### 1.3 Coding Style
91
84
92
85
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:
@@ -237,11 +230,9 @@ It should include the following components:
237
230
238
231
* 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`.
239
232
240
-
### 1.7 Handing in your homework
241
-
242
233
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.
243
234
244
-
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:
235
+
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 ESLint errors. Open a terminal window in VSCode and type the following command:
245
236
246
237
```
247
238
npm test
@@ -267,12 +258,15 @@ If the answer is 'yes' to the preceding questions you are ready to follow these
267
258
268
259
---
269
260
270
-
_BONUS_ : Code Kata Race
261
+
## **SUBMIT YOUR HOMEWORK!**
262
+
263
+
After you've finished your todo list it's time to show us what you got! The homework that needs to be submitted is the following:
Copy file name to clipboardExpand all lines: Week1/README.md
+13-15Lines changed: 13 additions & 15 deletions
Original file line number
Diff line number
Diff line change
@@ -10,24 +10,24 @@ These are the topics for week 1:
10
10
2. Asynchronous JavaScript and XML (AJAX)
11
11
- JavaScript Object Notation (JSON)?
12
12
- XMLHttpRequest (XHR)
13
-
3.jQuery
13
+
3.Axios
14
14
- What's a module?
15
15
- What's a library?
16
-
- Using jQuery to make AJAX requests
16
+
- Using Axios to make AJAX requests
17
17
18
18
## 1. Application Programming Interface (API)
19
19
20
20
Whenever we talk development we'll inevitably end up talking about Application Programming Interfaces, or APIs for short. But what is all the fuss about?
21
21
22
-
The first thing we need to understand is that API means different things to different people. Some people use it to refer to a complete application (frontend + backend), others use it to only refer to the server, or there's even people who use it to refer to any
22
+
The first thing we need to understand is that API means different things to different people. Some people use it to refer to a complete application (frontend + backend), others use it to only refer to the server, or there's even people who use it to refer to any part of an application (i.e. "frontend API"/"server API")
23
23
24
24
For our purposes it's useful to stick to one definition, while keeping in mind that others will use it differently. Here's the definition we'll use:
25
25
26
26
```markdown
27
-
An API is that part of the server that is open to requests from the client (whether it's a from a frontend or another server).
27
+
An API is any software that contains a part that's accessible from an outside source: i.e. open to requests from the client (whether it's a from a frontend or another server). That part that's accessible is the "interface" of that software.
28
28
```
29
29
30
-
You can think of an API in the following manner: Imagine you want to rent out a room in your house through Airbnb. Everyone who has a key to this room can freely enter and make use of whatever is inside.
30
+
You can think of an API in the following manner: Imagine you want to rent out a room in your house through Airbnb. Everyone who has a key to this room can freely enter and make use of whatever is inside. In this analogy the house is the API, while the room that's rented out is the "interface".
31
31
32
32
For more research, check out the following resources:
33
33
@@ -43,7 +43,7 @@ Conversely, there are also **private** APIs: software companies that grant acces
43
43
44
44
In reality, there are way more private than public APIs. This is because it's usually in the company's best interest to keep their code base hidden from the public eye: it would be like giving your secret recipe away for nothing.
45
45
46
-
Understand this fundamental truth: programming is a means to serving a business end. In this course you're learning how to program, to make nice-looking functional applications. However, this is always done within a business context. This is to say: does this software lead to making more money?
46
+
Understand this fundamental truth: **programming is a means to serving a business end**. In this course you're learning how to program, to make nice-looking functional applications. However, this is always done within a business context. This is to say: does this software lead to making more money/gaining more popularity/or the achievement of any other business goal?
47
47
48
48
-[The Business Impact of Private, Partner and Public APIs](https://www.youtube.com/watch?v=Bk50AYGvs-g)
49
49
@@ -73,15 +73,15 @@ The name AJAX is actually a misnomer, because XML isn't really used any more. In
73
73
74
74
In AJAX we make a client request to a web server, that in response sends us back information to be used in the frontend. Generally speaking, this data will be send in `JSON` format.
75
75
76
-
So, technically speaking, the term would actually be AJAJ
76
+
So, technically speaking, the term would actually be AJAJ. However, the industry has decided to stick with the term AJAX to refer to these processes.
In order to make an AJAX request we have to make use of a special type of object, called `XMLHttpRequest`(shortened to XHR). It's an object predefined for us by the `window` object in the browser.
83
83
84
-
> The `window` object is the most top-level object available to us in the browser. It contains the `document`, which contains all the HTML/CSS and JavaScript we write. Besides this, the `window` also contains a lot of other things we use when writing frontend code: `setTimeout()`, alert() and it even contains a reference to the `console` (from which we get `console.log()`). Try it out in the console if you want to see for yourself!
84
+
> The `window` object is the most top-level object available to us in the browser. It contains the `document`, which contains all the HTML/CSS and JavaScript we write. Besides this, the `window` also contains a lot of other things we use when writing frontend code: `setTimeout()`, `alert()` and it even contains a reference to the `console` (from which we get `console.log()`). Try it out in the console if you want to see for yourself!
85
85
86
86
By creating a new instance of this object we can start making AJAX requests!
87
87
@@ -94,7 +94,7 @@ Check the following resources to learn more about XHR.
@@ -116,17 +116,15 @@ For more information about this, go through the following:
116
116
117
117
If you've ever written code you know how easy it is to duplicate it: you just copy and paste it.
118
118
119
-
Modules are small blocks of code that introduce a . If you were to add more code and the code base could really solve a particular problem?
119
+
Modules are small blocks of code that make up a functionality. But what if you have a bunch of modules that aklsdnl;asndkl;ansl;dnal;ksnd
120
+
121
+
If you were to add more code and the code base could really solve a particular problem?
120
122
121
123
A `library` is a set of code that a developer (or several developers) has written in order to solve a specific problem within an application. This could be, for example, how to easier select items from the DOM, how to handle [data validation](https://www.techopedia.com/definition/10283/data-validation) or how to more easily create a [Single Page Application](https://en.wikipedia.org/wiki/Single-page_application).
122
124
123
125
At it's most fundamental level it means that others have written functions and other logical processes to make development quicker and easier. If they have published their code, through [npmjs.com](https://www.npmjs.com/) for example, you can legally make use of it in your own code. Almost all applications out there, no matter what language they're written in, contain at least a couple of libraries.
124
126
125
-
### Using jQuery to make AJAX requests
126
-
127
-
One of the most well-known and often used libraries in JavaScript is called `jQuery`. It's a library that was designed to make DOM manipulation, as well as event handling, CSS animation and AJAX operations much easier to perform.
Copy file name to clipboardExpand all lines: Week2/README.md
+29-12Lines changed: 29 additions & 12 deletions
Original file line number
Diff line number
Diff line change
@@ -7,16 +7,24 @@ These are the topics for week 2:
7
7
1. JavaScript Versions
8
8
2. Promises
9
9
- Callback Hell
10
-
- ES6 Update
11
-
3. Fetch API
12
-
4. Thinking Like a Programmer III
10
+
3. Arrow functions
11
+
- 'this' keyword
12
+
4. Fetch API
13
+
5. Thinking Like a Programmer III
13
14
14
15
## 1. JavaScript Versions
15
16
16
-
You are undoubtably different than when you were a baby. Back then you couldn't really do much: crying, laughing and taking dumps. That's pretty much it. But as the years past you increasingly could do more and more: walking, socializing or playing an instrument.
17
+
You are undoubtably different than when you were a baby. Back then you couldn't really do much: crying, laughing and taking dumps. That's pretty much it. But as the years pass you increasingly could do more and more: walking, socializing or playing an instrument.
17
18
18
-
Likewise, so has JavaScript evolved. Back in
19
+
Likewise, so has JavaScript evolved. Throughout the course you have, unknowingly, used syntax from different JavaScript versions. For example, if you've ever declared a function like this:
19
20
21
+
```js
22
+
functionaFunction() {
23
+
// Some magnificent code ...
24
+
}
25
+
```
26
+
27
+
-[The History of JavaScript | Why is JavaScript also called ECMAScript?](https://www.youtube.com/watch?v=JpwxjkpZfhY)
20
28
-[The Weird History of JavaScript](https://www.youtube.com/watch?v=Sh6lK57Cuk4)
21
29
22
30
## 2. Promises
@@ -25,26 +33,35 @@ Likewise, so has JavaScript evolved. Back in
25
33
26
34
By now you should've had some practice using callbacks. To reiterate, we use callbacks **as a way to create asynchronicity** in our application: we want to enable our application to do multiple things simultaneously.
27
35
28
-
But what if you want to have multiple
36
+
But what if you want to have callbacks within callbacks... within callbacks? This will lead to what is known as **callback hell**.
29
37
30
38
-[Callback Hell](http://callbackhell.com/)
31
39
32
40
This is where Promises come in. The concept of a Promise, in execution, doesn't add anything new. It does exactly what callbacks aim to do, which is enabling asynchronous actions: for example, clicking a button to load in an image, while still being able to navigate the webpage.
33
41
34
-
What
42
+
What a Promise does is make writing callbacks more readable for you, the developer. This is its main benefit. In effect, you could call Promises the updated version of callbacks. Callbacks version 2.0.
35
43
36
-
So, in effect, you could call Promises the updated version of callbacks. Callbacks version 2.0.
44
+
Go through the following resources to learn more about Promises:
Last week you learned about making API calls. You learned how to do this using the XHR object, which we can access through the browser's `window` object.
46
59
47
-
## 4. Thinking Like a Programmer III
60
+
As we've learned in the previous sections, JavaScript as a language evolves. But so do browsers!
61
+
62
+
It's a modern way to make API calls. It incorporates Promises. A `fetch` function is now provided in the global `window` scope in the browser. You can check it out by opening your developers tools and searching for `fetch`.
63
+
64
+
-[Fetch() - Working with Data and APIs in JavaScript](https://www.youtube.com/watch?v=tc8DU14qX6I)
This week you will work with all JavaScript files in the `src` folder. The assignment consists of two parts:
21
25
22
26
1. Refactor all `.then()` and `.catch()` methods with `async`/`await` and `try...catch`.
23
-
2. Refactor your application to use ES6 classes.
27
+
2. Refactor your application to use `ES6 classes`.
24
28
25
29
#### 2.2.2 ES6 Classes
26
30
27
-
**_Deadline Saturday_**
28
-
29
31
This final assignment requires you to go the extra mile and master Object Oriented Programming and ES6 classes.
30
32
31
33
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`.
0 commit comments