Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4b11a04

Browse files
committed
Merge branch 'module-revision'
2 parents 39b4b40 + b803ae6 commit 4b11a04

File tree

6 files changed

+91
-42
lines changed

6 files changed

+91
-42
lines changed

README.md

Lines changed: 54 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -11,30 +11,6 @@ A big part of being a programmer means moving data from one place to another. It
1111

1212
On top of that you'll also learn how to think differently about _how_ you write your programs. Like in any field, once you've mastered a particular way of doing things you start thinking about how it could be done in a smarter, different way. In programming we call these `paradigms` and in this module you'll learn one such paradigm: Object-Oriented Programming!
1313

14-
## Learning goals
15-
16-
In order to successfully complete this module you will need to master the following:
17-
18-
- Learn what an `Application Programming Interface` (API) is
19-
- Catch up on the `history of JavaScript`
20-
- Understand how to write more readable `asynchronous JavaScript`
21-
- Connect with different `public APIs`
22-
- Build a `Single Page Application` (SPA)
23-
- Work with pre-existing code
24-
- Learn about `Object-Oriented Programming`
25-
26-
## How to use this repository
27-
28-
This repository consists of 3 essential parts:
29-
30-
1. `README`: this document contains all the required theory you need to understand **before** class. It's also meant as a reference to understand what you're doing while you're coding.
31-
2. `MAKEME`: this document contains the instructions for each week's homework.
32-
3. `LESSONPLAN`: this document is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
33-
34-
**Before** the first class of the module you should start off with the [Week 1 Reading](/Week1/README.md). Study all the concepts and try to get the gist of everything. After your first class, you can get started with the [Week 1 Homework](/Week1/MAKEME.md).
35-
36-
If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack!
37-
3814
## Before you start
3915

4016
### Setup Style Guide
@@ -80,6 +56,60 @@ Then execute `git checkout week1-YOURNAME` and you can get started!
8056

8157
If you have any questions or if something is not entirely clear ¯\_(ツ)\_/¯, please ask/comment on Slack!
8258

59+
## Learning goals
60+
61+
In order to successfully complete this module you will need to master the following:
62+
63+
- Learn what an `Application Programming Interface` (API) is
64+
- Catch up on the `history of JavaScript`
65+
- Understand how to write more readable `asynchronous JavaScript`
66+
- Connect with different `public APIs`
67+
- Build a `Single Page Application` (SPA)
68+
- Work with pre-existing code
69+
- Learn about `Object-Oriented Programming`
70+
71+
## How to use this repository
72+
73+
### Repository content
74+
75+
This repository consists of 3 essential parts:
76+
77+
1. `README`: this document contains all the required theory you need to understand **while** working on the homework. It contains not only the right resources to learn about the concepts, but also lectures done by HackYourFuture teachers. This is the **first thing** you should start with every week
78+
2. `MAKEME`: this document contains the instructions for each week's homework. Start with the exercises rather quickly, so that you can ground the concepts you read about earlier.
79+
3. `LESSONPLAN`: this document is meant for teachers as a reference. However, as a student don't be shy to take a look at it as well!
80+
81+
### How to study
82+
83+
Let's say you are just starting out with the JavaScript2 module. This is what you do...
84+
85+
1. The week always starts on **Wednesday**. First thing you'll do is open the `README.md` for that week. For the first week of `JavaScript2`, that would be [Week1 Reading](/Week1/README.md)
86+
2. You spend **Wednesday** and **Thursday** going over the resources and try to get a basic understanding of the concepts. In the meanwhile, you'll also implement any feedback you got on last week's homework (from the JavaScript1 module)
87+
3. On **Friday** you start with the homework, found in the `MAKEME.md`. For the first week of `JavaScript2`, that would be [Week1 Homework](/Week1/MAKEME.md)
88+
4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have
89+
5. **DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the class channel
90+
6. On **Sunday** you'll attend class. It'll be of the Q&A format, meaning that there will be no new material. Instead your questions shall be discussed and you can learn from others
91+
7. You spend **Monday** and **Tuesday** finalizing your homework
92+
8. **DEADLINE 2**: You submit your homework to the right channels (GitHub) before **Tuesday 23.59**. If you can't make it on time, please communicate it with your mentor
93+
9. Start the new week by going back to point 1!
94+
95+
In summary:
96+
97+
![Weekflow](assets/weekflow.png)
98+
99+
To have a more detailed overview of the guidelines, please read [this document](https://docs.google.com/document/d/1JUaEbxMQTyljAPFsWIbbLwwvvIXZ0VCHmCCN8RaeVIc/edit?usp=sharing) or ask your mentor/class on Slack!
100+
101+
### Video lectures
102+
103+
For each module HackYourFuture provides you with video lectures. These are made by experienced software developers who know what they're talking about. The main teacher for this module will be [Stasel Seldin](https://hackyourfuture.slack.com/team/UQJGC1MSL): senior iOS developer!
104+
105+
You can find out more about him here:
106+
107+
- [GitHub](https://github.com/Stasel)
108+
- [@Stasel on Slack](https://hackyourfuture.slack.com/team/UQJGC1MSL)
109+
110+
Learn from Stasel in the following playlist of videos he has made for you! (Click on the image to open the link)
111+
112+
<a href="https://www.youtube.com/watch?v=j7X0_KwoRD4&list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX" target="_blank"><img src="./assets/stasel.png" width="600" height="350" alt="HYF Video" /></a>
83113

84114
## Planning
85115

Week1/README.md

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@ These are the topics for week 1:
1717
- An example of a library
1818
- How to use a library
1919

20+
## 0. Video Lectures
21+
22+
Your teacher Stasel has made video lectures for this week's material. You can find them here: [Videos 1 - 5](https://www.youtube.com/watch?v=j7X0_KwoRD4&list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX)
23+
24+
<a href="https://www.youtube.com/watch?v=j7X0_KwoRD4&list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX" target="_blank"><img src="../assets/stasel.png" width="600" height="350" alt="HYF Video" /></a>
25+
2026
## 1. Application Programming Interface (API)
2127

2228
Whenever we talk about software development, we'll inevitably end up talking about `Application Programming Interfaces`, or APIs for short. But what is all the fuss about?
@@ -78,7 +84,7 @@ xhr.open('GET', '/article/xmlhttprequest/example/load');
7884
xhr.send();
7985

8086
// 4. This will be called after the response is received
81-
xhr.onload = function () {
87+
xhr.onload = function() {
8288
if (xhr.status != 200) {
8389
// analyze HTTP status of the response
8490
alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found
@@ -88,15 +94,15 @@ xhr.onload = function () {
8894
}
8995
};
9096

91-
xhr.onprogress = function (event) {
97+
xhr.onprogress = function(event) {
9298
if (event.lengthComputable) {
9399
alert(`Received ${event.loaded} of ${event.total} bytes`);
94100
} else {
95101
alert(`Received ${event.loaded} bytes`); // no Content-Length
96102
}
97103
};
98104

99-
xhr.onerror = function () {
105+
xhr.onerror = function() {
100106
alert('Request failed');
101107
};
102108
```
@@ -286,11 +292,11 @@ const axios = require('axios'); // We have to load in the library first
286292
// Make a GET request to get user data from the Pokemon API
287293
axios
288294
.get('https://pokeapi.co/api/v2/pokemon')
289-
.then(function (response) {
295+
.then(function(response) {
290296
console.log(response);
291297
// Do something with data
292298
})
293-
.catch(function (error) {
299+
.catch(function(error) {
294300
console.log(error);
295301
// Do something with error
296302
});

Week2/README.md

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,12 @@ These are the topics for week 2:
1414
- 'this' keyword
1515
4. Fetch API
1616

17+
## 0. Video Lectures
18+
19+
Your teacher Stasel has made video lectures for this week's material. You can find them here: [Videos 6 - 8](https://www.youtube.com/watch?v=j7X0_KwoRD4&list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX)
20+
21+
<a href="https://www.youtube.com/watch?v=j7X0_KwoRD4&list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX" target="_blank"><img src="../assets/stasel.png" width="600" height="350" alt="HYF Video" /></a>
22+
1723
## 1. JavaScript Versions
1824

1925
You are undoubtedly different than when you were a baby. Back then you couldn't do much except crying. That's pretty much it. But as the years pass you increasingly could do more and more: walking, socializing or playing an instrument.
@@ -58,7 +64,7 @@ But what if you want to have callbacks within callbacks... within callbacks? Thi
5864
This is where `Promises` come in. The idea of the `Promise` is a product of the evolution within the JavaScript language. A bunch of JavaScript developers wanted to figure out how to solve the problem of callback hell and this is what they came up with. Here's a basic example:
5965

6066
```js
61-
const promise = new Promise(function (resolve, reject) {
67+
const promise = new Promise(function(resolve, reject) {
6268
if (true) {
6369
resolve('It has succeeded!');
6470
} else {
@@ -82,18 +88,18 @@ When a Promises is executed it will first execute the asynchronous code inside.
8288
What if you need to perform several asynchronous operations, that depend on the result of the one that came before it? For that we can use the `.then()` method: a special function, given to us by the Promise object, that allows us to directly use the return value of the asynchronous operation that happened before. Here's an example:
8389

8490
```js
85-
new Promise(function (resolve, reject) {
91+
new Promise(function(resolve, reject) {
8692
setTimeout(() => resolve(1), 1000); // We wait 1 second and then resolve with value 1
8793
})
88-
.then(function (result) {
94+
.then(function(result) {
8995
console.log(result); // Result: 1
9096
return result * 2;
9197
})
92-
.then(function (result) {
98+
.then(function(result) {
9399
alert(result); // Result: 2
94100
return result * 2;
95101
})
96-
.catch((error) => {
102+
.catch(error => {
97103
console.log(error);
98104
});
99105
```
@@ -165,7 +171,7 @@ However, this isn't the only value `this` can have. The moment we create a new o
165171
const wouter = {
166172
firstName: 'Wouter',
167173
lastName: 'Kleijn',
168-
getFullName: function () {
174+
getFullName: function() {
169175
return this.firstName + ' ' + this.lastName;
170176
},
171177
};
@@ -195,14 +201,14 @@ One of those features added to browsers is an upgraded version of the XHR object
195201

196202
```js
197203
fetch('https://pokeapi.co/api/v2/pokemon')
198-
.then((response) => {
204+
.then(response => {
199205
return response.json();
200206
})
201-
.then((data) => {
207+
.then(data => {
202208
console.log('Pokemon data', data);
203209
return data;
204210
})
205-
.catch((error) => {
211+
.catch(error => {
206212
console.log('err', error);
207213
});
208214
```

Week3/README.md

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ These are the topics for week 3:
1818
- Catching errors with try/catch
1919
4. Thinking like a programmer III
2020

21+
## 0. Video Lectures
22+
23+
Your teacher Stasel has made video lectures for this week's material. You can find them here: [Videos 9 - 10](https://www.youtube.com/watch?v=j7X0_KwoRD4&list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX)
24+
25+
<a href="https://www.youtube.com/watch?v=j7X0_KwoRD4&list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX" target="_blank"><img src="../assets/stasel.png" width="600" height="350" alt="HYF Video" /></a>
26+
2127
## 1. Object-Oriented Programming (OOP)
2228

2329
So far we've learned about various programming concepts. These are the basics of what makes up any application: it's the **WHAT** of writing applications. However, now that you're familiar with them it's time to go to the next level: the **HOW** of writing applications.
@@ -41,8 +47,8 @@ Take this example:
4147
```js
4248
const numbers = [14, 5, 25, 8];
4349

44-
const filterDoubleDigits = (numbers) => {
45-
return numbers.filter((number) => {
50+
const filterDoubleDigits = numbers => {
51+
return numbers.filter(number => {
4652
return number < 10;
4753
});
4854
};
@@ -150,7 +156,7 @@ function createPerson(name, age) {
150156
var obj = {
151157
name: name,
152158
age: age,
153-
walk: function () {
159+
walk: function() {
154160
console.log(`${this.name} is walking!`);
155161
},
156162
};
@@ -289,7 +295,7 @@ But before we get into that, we should define "catching errors" a little bit. By
289295
In the Promise object, we can use the function `catch` to take care of errors. It takes in a callback, which automatically receives an error object. Here's an example:
290296

291297
```js
292-
Promise.catch(function (error) {
298+
Promise.catch(function(error) {
293299
console.log(error);
294300
});
295301
```
@@ -327,6 +333,7 @@ As a great programmer, you always want to be writing clean code. This means: cod
327333
There are many ways to write clean code. Some of them you might have heard: Don't Repeat Yourself (DRY) or Keep It Simple, Stupid (KISS) are two things to keep in mind. There are many others and you are encouraged to do your own research!
328334

329335
Here are already a couple of them to get you started:
336+
330337
- [Top 5 Programming Principles that any software engineer should follow](https://www.youtube.com/watch?v=d-KbEQM0724)
331338
- [Programming Terms: DRY (Don't Repeat Yourself)](https://www.youtube.com/watch?v=IGH4-ZhfVDk)
332339
- [The KISS Principle in Software Development — Everything You Need to Know](https://medium.com/@devisha.singh/the-kiss-principle-in-software-development-everything-you-need-to-know-dd8ea6e46bcd)

assets/stasel.png

320 KB
Loading

assets/weekflow.png

259 KB
Loading

0 commit comments

Comments
 (0)