diff --git a/README.md b/README.md index e4793a5ad..55310b364 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,19 @@ -> Please help us improve and share your feedback! If you find better tutorials -> or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript3/pulls). +# DEPRECATED - JavaScript 3 +This module has been replace with the Using API's module, find it [here](https://github.com/HackYourFuture/UsingAPIs) -# Module #4 - JavaScript 3: Object-Oriented Programming and working with APIs (Frontend) - -![JavaScript3](./assets/javascript3.png) - -Welcome to JavaScript3! Congratulations on making it this far. You're well on your way to the top! +```Welcome to JavaScript3! Congratulations on making it this far. You're well on your way to the top! A big part of being a programmer means moving data from one place to another. It also means working with other people's software. In this module you'll be learning about one of the core things of what makes a web developer: working with APIs! 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! -## Learning goals - -In order to successfully complete this module you will need to master the following: - -- Learn what an `Application Programming Interface` (API) is -- Catch up on the `history of JavaScript` -- Understand how to write more readable `asynchronous JavaScript` -- Connect with different `public APIs` -- Build a `Single Page Application` (SPA) -- Work with pre-existing code -- Learn about `Object-Oriented Programming` - -## How to use this repository - -This repository consists of 3 essential parts: - -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. -2. `MAKEME`: this document contains the instructions for each week's homework. -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! - -**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). - -If you have any questions or if something is not entirely clear ¯\\\_(ツ)\_/¯, please ask/comment on Slack! - ## Before you start +In the following weeks we will be using a "style guide" to help you write _"clean code"_. Because code is not only meant to be run by computers, but also to be read by humans (your colleagues, and the future version of you), it's best to make your code good. If your code is readable and nicely formatted, you're doing your colleages (and future you) a great service. The idea of a "style guide" comes from visual design, where companies often have a "visual style". For example, watch the following video to get an idea of this: + ### Setup Style Guide -In the following weeks we will be using a front-end `style guide` to help you write _"clean code"_. What is a style guide? Simply put, it's a set of coding standards put into one collection. +Similar to how designers have style guides for their design work, programmers often have "programming style guides". This is set of rules to follow when writing/formatting your code. The styleguide we'll be using is the one from Airbnb: - [Front-end Style Guides](https://fronteers.nl/congres/2015/sessions/front-end-style-guides-anna-debenham) @@ -49,37 +23,93 @@ The style guide we'll be using is the one from Airbnb: While you do not need to read this guide in detail, it is recommended that you look at sections 1-8, 12-13, 15-21 and 23. +We also have tools that can automatically check whether your code is correctly formatted according to a style guide. These tools are called "linters". We will be using the JavaScript linter called "ESLint". The following packages are already added to this repository's `package.json`: + The required packages you need to install before you write code according to the style guide are the following: -```json +`json "eslint" "eslint-config-airbnb-base" "eslint-config-prettier" "eslint-plugin-import" "eslint-plugin-prettier" "prettier" -``` +` They are already in this repository's `package.json` so all you have to do now to prepare is to execute the following command at the root of this module directory: -```md +`md npm install -``` +` ### Forking the right repository Before you start with the homework, make sure you've made a fork of the right repository: [HackYourHomework/JavaScript3](https://www.github.com/hackyourhomework/javascript3)). Once you've cloned it to your computer you can proceed by making GIT branches for each week. Start at the `master` branch and execute the following (note that they're 3 different commands): -```bash +`bash foo@bar:~$ git branch week1-YOURNAME foo@bar:~$ git branch week2-YOURNAME foo@bar:~$ git branch week3-YOURNAME -``` +` Then execute `git checkout week1-YOURNAME` and you can get started! If you have any questions or if something is not entirely clear ¯\_(ツ)\_/¯, please ask/comment on Slack! +## Learning goals + +In order to successfully complete this module you will need to master the following: + +- Learn what an `Application Programming Interface` (API) is +- Catch up on the `history of JavaScript` +- Understand how to write more readable `asynchronous JavaScript` +- Connect with different `public APIs` +- Build a `Single Page Application` (SPA) +- Work with pre-existing code +- Learn about `Object-Oriented Programming` + +## How to use this repository + +### Repository content + +This repository consists of 3 essential parts: + +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 +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. +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! + +### How to study + +Let's say you are just starting out with the JavaScript3 module. This is what you do... + +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 `JavaScript3`, that would be [Week1 Reading](/Week1/README.md) +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 JavaScript2 module) +3. On **Friday** you start with the homework, found in the `MAKEME.md`. For the first week of `JavaScript3`, that would be [Week1 Homework](/Week1/MAKEME.md) +4. You spend **Friday** and **Saturday** playing around with the exercises and write down any questions you might have +5. **DEADLINE 1**: You'll submit any questions you might have before **Saturday 23.59**, in the class channel +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 +7. You spend **Monday** and **Tuesday** finalizing your homework +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 +9. Start the new week by going back to point 1! + +In summary: + +![Weekflow](assets/weekflow.png) + +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! + +### Video lectures + +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! + +You can find out more about him here: + +- [GitHub](https://github.com/Stasel) +- [@Stasel on Slack](https://hackyourfuture.slack.com/team/UQJGC1MSL) + +Learn from Stasel in the following playlist of videos he has made for you! (Click on the image to open the link) + +HYF Video ## Planning @@ -98,4 +128,4 @@ If you feel ready for the next challenge, click [here](https://www.github.com/Ha _The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)_ -Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. +Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.``` diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index f4eaae7d2..6f040f6bc 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -127,7 +127,7 @@ After you've finished your todo list it's time to show us what you got! The home 1. JavaScript exercises 2. PROJECT: HackYourRepo I -Upload both to your forked JavaScript3 repository in GitHub. Make a pull request to your teacher's forked repository. +Upload both to your forked JavaScript3 repository in GitHub. Make a pull request to the HackYourHomework forked repository. > Forgotten how to upload your homework? Go through the [guide](../hand-in-homework-guide.md) to learn how to do this again. diff --git a/Week1/README.md b/Week1/README.md index 1de00dd07..2b9536d3b 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -17,6 +17,12 @@ These are the topics for week 1: - An example of a library - How to use a library +## 0. Video Lectures + +Your teacher Stasel has made video lectures for this week's material. You can find them here: [Videos 1 - 5](https://www.youtube.com/playlist?list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX) + +HYF Video + ## 1. Application Programming Interface (API) 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'); xhr.send(); // 4. This will be called after the response is received -xhr.onload = function () { +xhr.onload = function() { if (xhr.status != 200) { // analyze HTTP status of the response alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found @@ -88,7 +94,7 @@ xhr.onload = function () { } }; -xhr.onprogress = function (event) { +xhr.onprogress = function(event) { if (event.lengthComputable) { alert(`Received ${event.loaded} of ${event.total} bytes`); } else { @@ -96,7 +102,7 @@ xhr.onprogress = function (event) { } }; -xhr.onerror = function () { +xhr.onerror = function() { alert('Request failed'); }; ``` @@ -286,11 +292,11 @@ const axios = require('axios'); // We have to load in the library first // Make a GET request to get user data from the Pokemon API axios .get('https://pokeapi.co/api/v2/pokemon') - .then(function (response) { + .then(function(response) { console.log(response); // Do something with data }) - .catch(function (error) { + .catch(function(error) { console.log(error); // Do something with error }); diff --git a/Week2/README.md b/Week2/README.md index 9dc44c046..78fa718e3 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -14,6 +14,12 @@ These are the topics for week 2: - 'this' keyword 4. Fetch API +## 0. Video Lectures + +Your teacher Stasel has made video lectures for this week's material. You can find them here: [Videos 6 - 8](https://www.youtube.com/playlist?list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX) + +HYF Video + ## 1. JavaScript Versions 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 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: ```js -const promise = new Promise(function (resolve, reject) { +const promise = new Promise(function(resolve, reject) { if (true) { resolve('It has succeeded!'); } else { @@ -82,18 +88,18 @@ When a Promises is executed it will first execute the asynchronous code inside. 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: ```js -new Promise(function (resolve, reject) { +new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // We wait 1 second and then resolve with value 1 }) - .then(function (result) { + .then(function(result) { console.log(result); // Result: 1 return result * 2; }) - .then(function (result) { + .then(function(result) { alert(result); // Result: 2 return result * 2; }) - .catch((error) => { + .catch(error => { console.log(error); }); ``` @@ -137,7 +143,7 @@ const addNum = (num1, num2) => { If you've done some research, you may come to the following conclusions: 1. First of all, the Arrow Function is anonymous by design. If we want to refer to it, we should store it into a variable. -2. Secondly, the way Arrow Functions can be written can differ (while still working the same way). Sometimes you don't need the `()` if there's a single or no parameters. Sometimes you can `return` a value without use for the `return` keyword. +2. Secondly, the way Arrow Functions can be written can differ (while still working the same way). Sometimes you don't need the `()` if there's a single parameter. Sometimes you can `return` a value without use for the `return` keyword. Another big important feature of Arrow Functions (and difference with ES5 functions) is the way they relate to the `this` keyword: instead of creating a new `this` object, it actually inherits it from the parent scope! @@ -165,7 +171,7 @@ However, this isn't the only value `this` can have. The moment we create a new o const wouter = { firstName: 'Wouter', lastName: 'Kleijn', - getFullName: function () { + getFullName: function() { return this.firstName + ' ' + this.lastName; }, }; @@ -174,7 +180,7 @@ const wouter = { In this example `this` refers to the complete `wouter` object. If we execute `wouter.getFullName()`, we get back the value of `wouter.firstName` and `wouter.lastName`. ```js -wouter.getFullName; // Result: Wouter Kleijn +wouter.getFullName(); // Result: Wouter Kleijn ``` As you can imagine, this means that there can be multiple `this` keywords at play: the global `this` keyword (which refers to the `window` object) and a `this` keyword for every object that is created within the application. @@ -195,14 +201,14 @@ One of those features added to browsers is an upgraded version of the XHR object ```js fetch('https://pokeapi.co/api/v2/pokemon') - .then((response) => { + .then(response => { return response.json(); }) - .then((data) => { + .then(data => { console.log('Pokemon data', data); return data; }) - .catch((error) => { + .catch(error => { console.log('err', error); }); ``` diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index fc6d346c2..7e1046f70 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -136,7 +136,7 @@ You might have noticed that when a user selects a repository that has many contr What is pagination? Take a look at this: -![Pagination Example](https://lorisleiva.com/assets/img/pagination_1.1785fc69.png) +![Pagination Example](https://lorisleiva.com/content/images/2020/10/laravel-pagination-with-tailwindcss.png) In the illustration, each number represents a page. You might have seen it before on websites like Amazon, when you're browsing through different products. @@ -154,6 +154,8 @@ Good luck! 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: +1. PROJECT: HackYourRepo III + Upload your homework to your forked JavaScript3 repository in GitHub. Make a pull request to the teacher's forked repository. > Forgotten how to upload your homework? Go through the [guide](../hand-in-homework-guide.md) to learn how to do this again. diff --git a/Week3/README.md b/Week3/README.md index 9f6459ca4..03d8d09ab 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -18,6 +18,12 @@ These are the topics for week 3: - Catching errors with try/catch 4. Thinking like a programmer III +## 0. Video Lectures + +Your teacher Stasel has made video lectures for this week's material. You can find them here: [Videos 9 - 10](https://www.youtube.com/playlist?list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX) + +HYF Video + ## 1. Object-Oriented Programming (OOP) 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: ```js const numbers = [14, 5, 25, 8]; -const filterDoubleDigits = (numbers) => { - return numbers.filter((number) => { +const filterDoubleDigits = numbers => { + return numbers.filter(number => { return number < 10; }); }; @@ -150,7 +156,7 @@ function createPerson(name, age) { var obj = { name: name, age: age, - walk: function () { + walk: function() { console.log(`${this.name} is walking!`); }, }; @@ -247,9 +253,9 @@ Last week you learned about Promises. To recap, here's what we learned: in order At first we learned about callbacks, as a way to do this: ```js -const someFunc(param1, callback) { - const callback(param1); - return; +function someFunc(param1, callback) { + const result = callback(param1); + return result; } ``` @@ -289,7 +295,7 @@ But before we get into that, we should define "catching errors" a little bit. By 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: ```js -Promise.catch(function (error) { +Promise.catch(function(error) { console.log(error); }); ``` @@ -327,6 +333,7 @@ As a great programmer, you always want to be writing clean code. This means: cod 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! Here are already a couple of them to get you started: + - [Top 5 Programming Principles that any software engineer should follow](https://www.youtube.com/watch?v=d-KbEQM0724) - [Programming Terms: DRY (Don't Repeat Yourself)](https://www.youtube.com/watch?v=IGH4-ZhfVDk) - [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) diff --git a/assets/stasel.png b/assets/stasel.png new file mode 100644 index 000000000..0ea55707c Binary files /dev/null and b/assets/stasel.png differ diff --git a/assets/weekflow.png b/assets/weekflow.png new file mode 100644 index 000000000..9da097126 Binary files /dev/null and b/assets/weekflow.png differ