hackyourfuture / javascript3

This repository contains all the material for the HackYourFuture module "JavaScript 3: Object-Oriented Programming and working with APIs"

DEPRECATED - JavaScript 3

This module has been replace with the Using API's module, find it here

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!

## 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

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)

The style guide we'll be using is the one from Airbnb:

- [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 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
"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
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
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)

<a href="https://www.youtube.com/playlist?list=PLVYDhqbgYpYVchJ9QQ3rC2WxYKrOiceYX" target="_blank"><img src="./assets/stasel.png" width="600" height="350" alt="HYF Video" /></a>

## Planning

| Week | Topic                                                                                       | Reading Materials              | Homework                        | Lesson Plan                            |
| ---- | ------------------------------------------------------------------------------------------- | ------------------------------ | ------------------------------- | -------------------------------------- |
| 1.   | Application Programming Interface (API), AJAX, Modules & Libraries                          | [Reading W1](/Week1/README.md) | [Homework W1](/Week1/MAKEME.md) | [Lesson Plan W1](/Week1/LESSONPLAN.md) |
| 2.   | Promises, Fetch API, JavaScript Versions, 'this' keyword, Arrow functions                   | [Reading W2](/Week2/README.md) | [Homework W2](/Week2/MAKEME.md) | [Lesson Plan W1](/Week2/LESSONPLAN.md) |
| 3.   | Object-Oriented Programming (OOP), ES6 Classes, Async/await, Thinking like a programmer III | [Reading W3](/Week3/README.md) | [Homework W3](/Week3/MAKEME.md) | [Lesson Plan W1](/Week3/LESSONPLAN.md) |
| 4.   | Final JavaScript Test                                                                       | [Details](test.md)             | -                               | -                                      |

## Finished?

Did you finish the module? High five!

If you feel ready for the next challenge, click [here](https://www.github.com/HackYourFuture/Node.js) to go to Node.js!

_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 :)_

<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.```

javascript3's Issues

Prereadings

One thing that I sometimes found confusing is that the prereading for a lecture is to be found in the README/MAKEME of the previous lecture (hence the need for a Week 0). Can't we just have the prereading in the README of the corresponding lecture?

Week1 reading materials

The link 'JavaScript Modules in 100 Seconds' under 'What's a module?' section, it's not working.

Week 3 Reading Material

There are 2 very helpful youtube video series for the Object Oriented Programming. I think it is wise to have both in the JS3 Week3 curriculum. Here are the links.

1 - https://www.youtube.com/playlist?list=PL0zVEGEvSaeHBZFy6Q8731rcwk0Gtuxub
2 - https://www.youtube.com/playlist?list=PL4cUxeGkcC9i5yvDkJgt60vNVWffpblB7

publishing Week2 homework

According to week2 homework instruction. students weren't able to publish the homework on github pages. that's because github publishes only from master or a branch called gh-pages.
so there is a solution by letting students make a branch for each week from master (week1, week2, week3) and this extra branch (gh-pages) need to be created for publishing purpose only.
But then homework needs to be added twice once in week branch and once in gh-pages.
My question is: is this needed?
Making a branch for each week if yes then the solution is to submit homework twice. If not then homework can be submitted to one branch gh-pages that gets updated each week.

Homework week 1 - Image blob data

In exercise 3, the image gallery data the students receive binary image data. Is the purpose of the exercise that they convert the blob data to image data which can be displayed?

Or should they use XMLHttpRequest.responseURL (which most of them have been doing now)? Which doesn't make too much sense though, they could also just put the request url straight into an image (except that they get twice the same image then).

Week 2 Reading Material

The reading material about understanding the syncronious and asyncronious in Javascript refers only the part1 of the reading. And when clicked on the link, it is seen that in that page there is no link for the part2 even though the part2 exists. So, I add here the link of part2 to make its access easier for hackyourfuturers:D

Understanding Synchronous and Asynchronous in JavaScript – Part 2
https://www.hongkiat.com/blog/synchronous-asynchronous-javascript-part2/

Files Standardization

Week 3 / MAKEME.md

Hi,
In section 3.1 Preparation,
The external links of:

• try...catch
• async/await
  are missing.

Change order of lectures?

If I would teach this module again, I would consider moving OOP to week 3. This will leave more opportunity for practising async callbacks and promises in homework and will directly benefit the subsequent Node module. OOP / ES classes is a relatively stand-alone topic and isn't needed until later in the React module.

One thing missing in JS3 is probably error handling and try-catch.

I'm not clear on what we should teach for '(re)writing data structures (in JSON)'.

missing correction

In the instructions of JS3 week1 homewrk, No. 1, it says; "Create this application in the week1 folder of your hyf-javascript1 repo."
The "hyf-javascript1 repo" needs to be corrected into "JavaScript3 forked repo".
Thanks - Mudar