Add JS3 Week 2 prep content MOVED TO SPRINT 3

assets/styles/04-components/columns.scss

@@ -0,0 +1,7 @@
+// put anything side by side
+
+.c-columns {
+  display: grid;
+  gap: var(--theme-spacing--gutter);
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+}

content/en/js3/blocks/asynchrony/index.md

@@ -0,0 +1,75 @@
++++
+title = '⏳ Asynchrony : outside time'
+headless = true
+time = 40
+facilitation = false
+emoji= '🧩'
+[objectives]
+1="Define asynchrony"
+2="Explain why we need asynchrony"
+3="Identify an asynchronous method we have already used"
++++
+
+We can handle latency using {{<tooltip title="asynchronous execution">}}run code in a different order.{{</tooltip>}} To understand asynchrony we first need to be clear about {{<tooltip title="synchronous execution">}}run code in the order it is written.{{</tooltip>}}.
+
+We have written a lot of JavaScript programs that execute sequentially. This means that each line of code is run in order, one after the other.
+{{<columns>}}
+
+#### For example:
+
+```js
+console.log("first");
+console.log("second");
+console.log("third");
+```
+
+<--->
+
+#### Outputs:
+
+```console
+first
+second
+third
+```
+
+{{</columns>}}
+Each line of code is run in order. This is synchronous execution. We do this because JavaScript is {{<tooltip title="single threaded">}}
+A single thread can do one thing at a time. JavaScript is a single threaded language.
+{{</tooltip>}}.
+
+When we call a function, the function will run to completion before the next line of code is executed. But what if we need to wait for something to happen? What if we need to wait for our data to arrive before we can show it? In this case, we can use **asynchronous execution**.
+
+{{<tabs name="Event Loop">}}
+{{<tab name="Event Listener">}}
+We have already used asynchronous execution. We have defined `eventListener`s that _listen_ for events to happen, _then_ execute a callback function. But here's a new idea: eventListeners are part of the [Event API](https://developer.mozilla.org/en-US/docs/Web/API/Event). They are not part of JavaScript! 🤯 This means you can't use them in a Node REPL, but they are implemented in web browsers. The core of JavaScript is the same everywhere, but different contexts may add extra APIs.
+
+When you set an eventListener you are really sending a call to a Web API and asking it do something for you.
+
+```js
+const search = document.getElementById("search");
+search.addEventListener("input", handleInput);
+```
+
+The callback `handleInput` cannot run until the user types. With `fetch`, the callback function cannot run until the data arrives. In both cases, we are waiting for something to happen before we can run our code.
+
+We use a function as a way of wrapping up the code that needs to be run later on. This means we can tell the browser _what_ to do when we're done waiting.
+{{</tab>}}
+{{<tab name="Visualise the Event Loop">}}
+
+<iframe src="http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIGNvbnNvbGUubG9nKCdZb3UgY2xpY2tlZCB0aGUgYnV0dG9uIScpOyAgICAKfSk7Cgpjb25zb2xlLmxvZygiSGkhIik7Cgpjb25zb2xlLmxvZygiV2VsY29tZSB0byB0aGUgZXZlbnQgbG9vcCIpOw%3D%3D!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D" width="100%" height="480px"></iframe>
+{{</tab>}}
+{{</tabs>}}
+
+### 🧠 Recap our concept map
+
+```mermaid
+graph LR
+    TimeProblem[🗓️ Time Problem] --> |caused by| SingleThread[🧵 Single thread]
+    SingleThread --> |send tasks to| ClientAPIs
+    TimeProblem --> |solved by| Asynchrony[🛎️ Asynchrony]
+    Asynchrony --> | delivered with | ClientAPIs{💻 Client APIs}
+    ClientAPIs --> |like| setTimeout[(⏲️ setTimeout)]
+    ClientAPIs --> |like| eventListener[(🦻🏾 eventListener)]
+    ClientAPIs --> |like| fetch[(🐕 fetch)]
+```

content/en/js3/blocks/callbacks/index.md

@@ -0,0 +1,57 @@
++++
+title = '🪃 Callbacks'
+headless = true
+time = 20
+facilitation = false
+emoji= '🧩'
+[objectives]
+1='Define a callback'
+2="Sketch the event loop"
+3="Predict the order of logged numbers using the event loop model"
++++
+
+Consider this visualisation of an asynchronous program:
+
+<iframe title="code running out of order and off the thread" src="http://latentflip.com/loupe/?code=c2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIjEiKTsKfSwgMjAwMCk7CnNldFRpbWVvdXQoZnVuY3Rpb24gdGltZW91dCgpIHsKICAgIGNvbnNvbGUubG9nKCIyIik7Cn0sIDUwMCk7CnNldFRpbWVvdXQoZnVuY3Rpb24gdGltZW91dCgpIHsKICAgIGNvbnNvbGUubG9nKCIzIik7Cn0sIDApOwo%3D!!!" width="100%" height="480px"></iframe>
+
+When we call [`setTimeout`](https://developer.mozilla.org/en-US/docs/Web/API/setTimeout) we send **a function call** to a client side Web API. The code isn't executing in our single thread any more, so we can run the next line. The countdown _is_ happening, but it's not happening _in our thread_.
+
+When the time runs out, our Web API sends a message to our program to let us know. This is called an {{<tooltip title="event">}}An event is a signal that something has happened.{{</tooltip>}}. Our API sends its message to our {{<tooltip title="event loop">}}The event loop is a JavaScript mechanism that handles asynchronous callbacks.{{</tooltip>}}. And what message does the event loop send? It sends a **callback**. It sends _our_ call _back_. It tells our thread to run the code in that function.
+
+{{<note type="tip" title="Our call is back">}}
+A callback is our function call, sent back to us through the event loop, for us to run.
+{{</note>}}
+
+{{<tabs name="Event Loop">}}
+{{<tab name="Sketch your mental model">}}
+**With a pen and paper**, draw a diagram of your mental model of the event loop.
+
+Use your model to predict the order of logged numbers in the following code snippet:
+
+```js
+setTimeout(function timeout() {
+  console.log("1");
+}, 2000);
+setTimeout(function timeout() {
+  console.log("2");
+}, 500);
+setTimeout(function timeout() {
+  console.log("3");
+}, 0);
+```
+
+{{</tab>}}
+{{<tab name="Compare your model">}}
+
+```mermaid
+graph
+  Callbacks{{🪃 Callbacks}} --> |run on| SingleThread[🧵 Single thread]
+    SingleThread --> |handled by| EventLoop[🔁 Event Loop]
+    EventLoop --> |queues| Callbacks
+    SingleThread --> |send tasks to| ClientAPIs{💻 Client APIs}
+    ClientAPIs --> | send| Callbacks
+```
+
+Did yours look different? There are many ways to visualise the event loop. Work on building your own mental model that helps you predict how code will run.
+{{</tab>}}
+{{</tabs>}}

content/en/js3/blocks/chaining/index.md

@@ -0,0 +1,8 @@
++++
+title = 'Chaining Promises'
+headless = true
+time = 20
+facilitation = false
+emoji= '🧩'
+[objectives]
++++

content/en/js3/blocks/fetch/index.md

@@ -0,0 +1,29 @@
++++
+title = 'fetch API'
+headless = true
+time = 20
+facilitation = false
+emoji= '🧩'
+[objectives]
++++
+
+Let's suppose we have a remote API hosted at the following url: "https://api-film-data.com".
+
+We can use applications like Postman to make requests to APIs. However, we want to make a request for the film data using JavaScript. We can use `fetch` to make network requests in JavaScript. Let's take a look at how we can do this:
+
+```js
+const filmData = fetch("https://api-film-data.com/films");
+```
+
+`fetch` is a JavaScript function. We call `fetch` using the url of the remote API we wish to fetch data from. Once `fetch` has got the data then we want to store it in a variable so we can then use it in our application. Let's log this data:
+
+```js
+const filmData = fetch("https://api-film-data.com/films");
+console.log(filmData);
+```
+
+However, if we log this variable we don't get an array of data. We get:
+
+```console
+Promise <pending>
+```

content/en/js3/blocks/fetching-data/index.md

@@ -0,0 +1,69 @@
++++
+title = '🐕 Fetching data'
+headless = true
+time = 20
+facilitation = false
+emoji= '🧩'
+[objectives]
+    1='Define a client side Web API'
+    2='Define a server side API'
++++
+
+So far we have displayed film data stored in our JavaScript code. But real applications fetch data from servers over the internet. We can restate our problem as follows:
+
+> _Given_ an **API that serves** film data
+> _When_ the page first loads
+> _Then_ the page should `fetch` and display the list of film data, including the film title, times and film certificate
+
+### 💻 Client side and 🌐 Server side APIs
+
+We will use [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch), a {{<tooltip title="client side Web API">}}
+A client side [Web API](https://developer.mozilla.org/en-US/docs/Web/API) lives in the browser. They provide programmatic access _to_ built-in browser functions _from_ JavaScript. {{</tooltip>}}. Fetch will fetch our data from the {{<tooltip title="server side API">}}
+A server side API lives on a server. They provide programmatic access _to_ data or functions stored on the server _from_ JavaScript. {{</tooltip>}}.
+
+APIs are useful because they let us get information which we don't ourselves know. The information may change over time, and we don't need to update our application. When we ask for the information, the API will tell us the latest version.
+
+We also don't need to know how the API works in order to use it. It may be written in a different programming language. It may talk to other APIs we don't know about. All we need to know is how to talk to it. This is called the **interface**.
+
+_Using_ fetch is simple. But we want to understand what is happening more completely. So let's take ourselves on a journey through time.
+
+<details> 
+<summary>👉🏾 Unfurl to see the journey (we will explain this in little pieces)</summary>
+
+```mermaid
+graph TD
+    fetch[(🐕 fetch)] --> |sends a| Request{📤 Request}
+    Request --> |has a latency| TimeProblem[🗓️ Time Problem]
+    Request --> |to| ServerAPIs
+    fetch --> |is a| ClientAPIs
+
+    TimeProblem --> |caused by| SingleThread[🧵 Single thread]
+    Callbacks{{🪃 Callbacks}} --> |run on| SingleThread
+    SingleThread --> |handled by| EventLoop[🔁 Event Loop]
+    EventLoop --> |queues| Callbacks
+    SingleThread --> |send tasks to| ClientAPIs
+    SingleThread --> |handled by| Asynchrony
+
+    TimeProblem --> |solved by| Asynchrony[🛎️ Asynchrony]
+    Asynchrony --> |delivered with| Promise{{🤝 Promises}}
+    Asynchrony --> | delivered with | ClientAPIs
+    Promise --> |resolve to a| Response{📤 Response}
+    Promise --> |join the| EventLoop{{Event Loop 🔁}}
+    Promise --> |syntax| async{{🏃‍♂️ async}}
+    async --> |syntax| await{{📭 await}}
+    await --> |resolves to| Response
+    Response ---> |sequence with| then{{✔️ then}}
+
+
+    APIs((🧰 APIs)) --> |live in your browser| ClientAPIs{💻 Client side APIs}
+    ClientAPIs --> |like| setTimeout[(⏲️ setTimeout)]
+    ClientAPIs --> |like| eventListener[(🦻🏾 eventListener)]
+    APIs --> |live on the internet| ServerAPIs{🌐 Server side APIs}
+    ServerAPIs --> |serve our| Data[(💾 Data)]
+    Data --> |as a| Response
+
+```
+
+😵‍💫 This is a lot to take in. Let's break it down and make sense of it.
+
+</details>

content/en/js3/blocks/internet/index.md

@@ -0,0 +1,26 @@
++++
+title = 'How the internet works'
+headless = true
+time = 20
+facilitation = false
+emoji= '🧩'
+[objectives]
+  1='Describe what happens when a user enters a url into a browser'
+  2='Explain the purpose of the HTTP protocol'
+  3='Define a GET request in the HTTP protocol'
++++
+
+We've been using the internet for years, but how does it actually work? What happens when you type a URL into a browser? How does the browser know where to go? How does it know what to show? How does it know how to show it?
+
+{{<tabs name="How the internet works playlist">}}
+{{<tab name="What is the internet">}}
+{{<youtube>}}https://www.youtube.com/watch?v=Dxcc6ycZ73M
+{{</youtube>}}
+{{</tab>}}
+{{<tab name="Understanding networks">}}
+{{<youtube>}}https://www.youtube.com/watch?v=ZhEf7e4kopM{{</youtube>}}
+{{</tab>}}
+{{<tab name="HTTPS & HTML">}}
+{{<youtube>}}https://www.youtube.com/watch?v=kBXQZMmiA4s{{</youtube>}}
+{{</tab>}}
+{{</tabs>}}

content/en/js3/blocks/latency/index.md

@@ -0,0 +1,25 @@
++++
+title = '🗓️ Latency'
+headless = true
+time = 5
+facilitation = false
+emoji= '🧩'
+[objectives]
+  1='Define latency'
++++
+
+```mermaid
+graph LR
+    fetch[(🐕 fetch)] --> |sends a| Request{📤 Request}
+    Request --> |has a latency| TimeProblem[🗓️ Time Problem]
+```
+
+Instead of already having our data, we are now sending a request over the network to another computer, and then waiting for that computer to send us a response back. Now that our data is going on a journey over a network, we introduce the problem of **latency**.
+
+Latency is the time taken for a request to traverse the network.
+
+> 💡 Network latency is travel time.
+
+Why is latency a problem? Because it means we need to **wait** for our data. But our program can only do one thing at a time - if we stopped our program to wait for data, then we wouldn't be able to do anything else. We need to handle this time problem.
+
+Programming often involves time problems, and latency is just one of them.

content/en/js3/blocks/using-fetch/index.md

@@ -0,0 +1,43 @@
++++
+title = '🌐 Requesting from a server side API'
+headless = true
+time = 20
+facilitation = false
+emoji= '🧩'
+[objectives]
+1="List 5 preceding concepts of asynchronous programming in JavaScript"
+2="Identify 2 unknown concepts still to be learned"
+3="Fetch data from a server side API using a client side Web API"
++++
+
+So now we have these pieces of our giant concept map
+
+1. 📤 we know that we can [send a request](#fetching-data) using `fetch()`
+1. 🐕 we know that `fetch` is a [💻 client side 🧰 Web API](#fetching-data)
+1. 🗓️ we know that sending 📤 requests over a network takes [time](#latency)
+1. 🧵 we know that we should [not stop our program](#asynchrony) to wait for data
+1. 🪃 we know that we can [use callbacks](#callbacks) to manage events
+
+But we still don’t know how to use `fetch` to get data from a server side API. Let’s find this out now. In [our filterFilms code](https://curriculum.codeyourfuture.io/filterfilms), replace the films array with data fetched from a server.
+
+```js
+// Begin with an empty state
+const state = {
+  films: [],
+};
+// Data
+const endpoint = "//curriculum.codeyourfuture.io/dummy-apis/films.json";
+
+const fetchFilms = async () => {
+  const response = await fetch(endpoint);
+  return await response.json();
+}; // our async function returns a Promise
+
+fetchFilms().then((films) => {
+  render(filmContainer, films); // when
+});
+```
+
+🐕 `fetch` returns a 🫱🏿‍🫲🏽 ‍`Promise`; the 🫱🏿‍🫲🏽 `Promise` fulfils itself with a 📥 response; the response contains our 💾 data.
+
+We will dig into this syntax: `Promises`, `async`, `await`, and `then` in our next sprint and complete our concept map.

content/en/js3/prep/index.md

@@ -7,6 +7,9 @@ menu_level = ['module']
 weight = 1
 backlog= 'Module-JS3'
 [[blocks]]
+name="How the internet works"
+src="js3/blocks/internet"
+[[blocks]]
 name="Technical Writing 101"
 src="https://github.com/CodeYourFuture/Module-JS3/issues/243"
 +++

content/en/js3/sprints/3/prep/index.md

@@ -6,7 +6,21 @@ menu_level = ['sprint']
 weight = 1
 backlog= 'Module-JS3'
 backlog_filter= 'Week 3'
-
+[[blocks]]
+name="Fetching data"
+src="js3/blocks/fetching-data"
+[[blocks]]
+name="Latency"
+src="js3/blocks/latency"
+[[blocks]]
+name="Asynchrony"
+src="js3/blocks/asynchrony"
+[[blocks]]
+name="Callbacks"
+src="js3/blocks/callbacks"
+[[blocks]]
+name="Using .fetch()"
+src="js3/blocks/using-fetch"
 [[blocks]]
 name="Product MVP and features"
 src="https://cyf-pd.netlify.app/blocks/define-your-products-mvp/readme/"