Added some Node.js and internet articles

Arwaalanazi · Apr 1, 2021 · 6150219 · 6150219
1 parent 8dbde4f
commit 6150219
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 65 deletions.
diff --git a/_sidebar.md b/_sidebar.md
@@ -26,6 +26,7 @@
   - [What is the DOM?](/the-internet/dom.md)
   - [DOM Manipulation](/the-internet/dom-manipulation.md)
   - [Event Loop](/the-internet/event-loop.md)
+  - [HTTP](/the-internet/http.md)
   - [API](/the-internet/api.md)
     - [Fetch](/the-internet/fetch.md)
 - [HTML & CSS](/html-css/README.md)
@@ -62,6 +63,7 @@
   - [Environmental Variables](/node-js/environmental-variables.md)
   - [Setting up a Project](/node-js/setting-up-a-project.md)
   - [DRY, modular server](/node-js/dry-modular-server.md)
+  - [Getting Started](/node-js/express-js.md)
 - Testing
   - [Assertion](/testing/assertion.md)
 - Tools
@@ -70,4 +72,8 @@
   - [Agile](/software-development/agile.md)
   - [Code Review](/software-development/code-review.md)
   - [Testing](/software-development/testing.md)
-- [Contribution guide](/contributing.md)
+  - Roles
+    - [Backend](/software-development/backend.md)
+- [Contribution guide](/contributing.md)
+- Definitions
+  - [Client-server model](/definitions/client-server-model.md)
diff --git a/definitions/client-server-model.md b/definitions/client-server-model.md
@@ -0,0 +1,21 @@
+# The client-server model
+
+The `client-server model` is one of the most important concepts in web development. The easiest way to explain this concept is by using an analogy.
+
+> Let's say you are hungry and feel like going to a restaurant. The moment you enter the restaurant you are a customer, or in IT terms a `client`. You take a seat and decide to order various things, each order representing a separate `request`: you are requesting an orange juice and requesting a nice, healthy salad. Your requests are heard by the waiter, or in IT terms the `server`. Their job is to listen to your requests and do whatever is necessary to provide you with what you want. The actual services, like cooking the food, making the drinks or doing the dishes are all done by others. However, to the client the end result of these services are all provided by the server. You don't want to know who performs what service, you just want to eat. When the server comes back with whatever you ordered, they provide you with a `response`. This happens whether or not they could fulfill your requests.
+
+In a web application, the process is very similar. The browser, by way of the application user interface, is the `client`. Some computer that has the data and services you want is the `server`.
+
+Let's say you log in to your online bank account:
+
+As the client, you want to see the amount of money you currently have. The browser sends out a request to the server, who then activates the necessary services (in this example, some kind of database) and returns with a response containing the exact amount of money you currently have in the bank.
+
+The video below also explains it well:
+
+{% hyf-youtube src="https://www.youtube.com/watch?v=L5BlpPU_muY" %}
+
+# Extra reading
+If you just can't get enough, here are some extra links that mentors/students have found useful concerning this topic:
+
+- [Client-Server Model & Structure of a Web Application](https://medium.freecodecamp.org/how-the-web-works-part-ii-client-server-model-the-structure-of-a-web-application-735b4b6d76e3)
+- [Fundamentals of Web apps](https://fullstackopen.com/en/part0/fundamentals_of_web_apps)
diff --git a/node-js/README.md b/node-js/README.md
@@ -8,20 +8,18 @@ Node.js is a **JavaScript runtime**  in which JavaScript code is executed.
 
 Computers can't understand human readable programming languages such as JavaScript by themselves. They need a program to translate these high level languages into machine language which can then be executed. Node.js uses the **V8 JavaScript engine** to **translate JavaScript into machine code** which is then executed on your computer.
 
-> TODO: Add diagram JS -> JS Runtime -> Machine code
+<!--- >> TODO: Add diagram JS -> JS Runtime -> Machine code --->
 
 Node.js is more than just the V8 JavaScript engine. It's also a **library with many built-in modules** that can perform **asynchronous I/O operations** to [prevent JavaScript code from blocking](https://nodejs.org/en/docs/guides/blocking-vs-non-blocking/). When Node.js needs to perform an I/O operation, such as reading from the network, accessing a database or the filesystem, instead of blocking the thread and wasting CPU cycles waiting, Node.js will resume operations when a response comes back. This is accomplished through the [event loop](https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick/).
 
-Which application on your computer also has a JavaScript runtime? [Answer](./Questions#browser)
+Which application on your computer also has a JavaScript runtime? [Answer](../the-internet/browser.md)
 
 ## <a name="what-can-node-do">What can Node.js do?</a>
 As mentioned above you already have a JavaScript runtime on your computer. So what can Node.js do that your browser can't?
 
 Browsers are designed to display **web applications** that users can interact with. These web applications run on your own personal device and are often referred to as the **front-end**: they are about what a user can see and interact with, much like a store front.
 
-The opposite of the front-end is the **back-end**, which provides services that your front-end might need to work properly. Back-end computers are called **servers** because they provide a service, whereas front-end computer are called **clients**. This architecture is called the client-server model. Clients communicate with servers through a **request-response cycle**: each time the client needs something it sends a request to the server who will provide a response with the needed information.
-
-Which applications do you know where the client-server model is used? [Answer](./Questions#client-server)
+The opposite of the frontend is the **backend**, which provides services that your front-end might need to work properly. Back-end computers are called **servers** because they provide a service, whereas frontend computer are called **clients**. This architecture is called the client-server model. Clients communicate with servers through a **request-response cycle**: each time the client needs something it sends a request to the server who will provide a response with the needed information.
 
 <img src="https://i.imgur.com/kh2JveL.png" alt="Request-response cycle" width="70%"/>
 
@@ -41,15 +39,23 @@ Another good reason is that Node.js handles I/O such as file access and network
 
 ![Node.js Event Loop](https://user-images.githubusercontent.com/1400753/29651102-37272546-88e2-11e7-91fd-ea8e257a4df6.png)
 
-Node.js comes with, **npm**, the largest ecosystem of open source libraries in the world.
+## npm
+The concept of splitting up code into reusable pieces is called **modularization** and the reusable pieces **modules** (sometimes called _packages_ or _libraries_). The whole modularization in Node.js is performed with the help of a small tool called _Node Package Manager_ (or _npm_ for short), which is the largest ecosystem of open source libraries in the world. The official website for the npm can be found here: [npmjs.org](https://www.npmjs.org)
+
 Many functionalities that you might need such as utility functions, process management or interacting with a database have already been made. They are published as packages on npm and you can import them in your project to get started. Don't reinvent the wheel.
 
+Have a look at the following guide if you have never used npm before: [An Absolute Beginner's Guide to Using npm](https://nodesource.com/blog/an-absolute-beginners-guide-to-using-npm/)
+
+# Extra reading
+If you just can't get enough, here are some extra links that mentors/students have found useful concerning this topic:
+
+- [Introduction into Node.js](https://codeburst.io/the-only-nodejs-introduction-youll-ever-need-d969a47ef219)
+
 
 ## Node.js Tutorials
 
 These tutorials will introduce you to a bunch of new features in Node that you haven't seen in the Browser.  While you're following these tutorials, it's important to remember that at it's core Node.js is still JavaScript.  Everything you've learned so far (except for the DOM & `fetch` :) is still true!  The Event Loop, Classes, Closure, Arrays, Objects, Variables, `this.`, it's all still the same.
 
-
 The tutorials below will introduce to what's new and what's special about Node.  But don't forget to take some time and solve a few of the JavaScript Exercises above to get used to working with plain, vanilla JS in the terminal.
 
 * [Traversy: Node for Absolute Beginners](https://www.youtube.com/watch?v=U8XF6AFGqlc)
@@ -62,8 +68,6 @@ The tutorials below will introduce to what's new and what's special about Node.
 
 * [The inside of the inside of Node.js](http://docs.libuv.org/en/v1.x/guide/introduction.html)
 
-
-
 # Useful links
 
 ## <a name="introduction">Introduction to Node.js</a>

diff --git a/node-js/express-js.md b/node-js/express-js.md
@@ -1,3 +1,19 @@
 # Express.js
 
-- [Traversy Crash Course](https://www.youtube.com/watch?v=L72fhGm1tfE)
+In Node.js it's possible to make a HTTP server, using the native `http` module, as we saw in the Node.js crash course video. However, this is rarely used in practice. Instead, we'll use [Express.js](https://expressjs.com/en/4x/api.html), a backend framework for Node.js that can do what the `http` module does and much more (in a simpler, faster and more readable way).
+
+Practically speaking, what can we do with a web server like `http` or `Express`? All the magic that is needed so we can successfully get what we want from an application:
+
+- Get and store data that comes from the frontend
+- Make API calls to other services
+- Secure data that comes from both the frontend and the database
+- Any other type of calculation or business logic
+
+The following course gives a great introduction to the package:
+
+{% hyf-youtube src="https://www.youtube.com/watch?v=L72fhGm1tfE" %}
+
+# Extra reading
+If you just can't get enough, here are some extra links that mentors/students have found useful concerning this topic:
+
+- [Going out to eat and understanding the basics of Express.js](https://medium.freecodecamp.org/going-out-to-eat-and-understanding-the-basics-of-express-js-f034a029fb66)
diff --git a/software-development/assets/atm.jpg b/software-development/assets/atm.jpg
diff --git a/software-development/backend.md b/software-development/backend.md
@@ -0,0 +1,31 @@
+# Backend
+
+In software development, the code that makes the display is often separated from the code that handles the data traffic. The real world contains many examples of this division: take for example an ATM:
+
+![ATM](./assets/atm.jpg)
+
+What you can interact with, the buttons or the place where you can insert your card, is called the `frontend` (also known as the `user interface`). However, everything that's needed to make it work the way it does, i.e. the software needed to make it do the real work (moving data from one place to another) is called the `backend`.
+
+In web development the term backend can be boiled down to 3 components:
+
+- A `server`: a computer that is connected to other computers, which runs an application (see below) that allows for sharing and managing services (like a calculator or word processor) and resources (like images, text files).
+- A `database`: software that manages and saves sensitive data for later use.
+- An `application`: software that communicates between the database, frontend and other servers. It contains code that allows it to interact with and manipulate the server, database and other types of software services.
+
+For more information, read:
+
+- [Basics of backend development](https://www.upwork.com/hiring/development/a-beginners-guide-to-back-end-development/)
+- [Getting started with backend development](https://codeburst.io/getting-started-with-backend-development-bfd8299e22e8)
+
+When people refer to backend programming, they usually refer to **writing the application** part of the backend: the software that interacts with a server (a computer) and database, and moves data from one computer to the next.
+
+This software is usually a `web server` that serves as an `API`, which can be used to move data to or get data from in order to satisfies client requests.
+
+Why would we need a backend? There are multiple reasons:
+
+- **Security**. We don't want any random user to directly access our sensitive data, without verifying who they are. For example, if you have an online bank account then you need to login to verify it's you. The whole process of login and verification is code written in a place (the backend) that can't be reached so easily.
+- **Performance**. The speed of our user interfaces is greatly dependent upon the server that provides it. The backend contains code that makes sure it optimally makes use of the server's resources (hardware, memory, etc.) to provide the user with the best experience.
+- **Software interactions**. A web application usually makes use of other people's software, web services. The code that communicates with these services and implements it into the frontend is also contained within the backend.
+
+For more information, read:
+[Why do we need the backend?](https://www.quora.com/Why-do-we-need-a-back-end-in-web-development-Cant-the-front-end-directly-send-requests-to-the-database)
diff --git a/the-internet/README.md b/the-internet/README.md
@@ -1,62 +1,26 @@
 ## The Internet
 
-What is it?  As you study, continue to take note of when and how you come across the concepts you learned here.
+There is a great series on how the internet works that explains it better than we could. So have a look at it [here](https://www.youtube.com/playlist?list=PLzdnOPI1iJNfMRZm5DDxco3UdsFegvuB7).
 
-### Index
-* [the internet](#the-internet)
-* [browsers](#browsers)
-* [web apps](#web-apps)
-* [HTTP](#http)
+As web developers we do need to dive a little deeper though as we are going to be working with all these systems. The following two videos explain the nitty-gritty parts for web developers:
 
----
-
-### The internet
-
-* [Foundations of the Web](https://shawnr.gitbooks.io/foundations-of-the-web/)
-* [how it works, 5 min](https://www.youtube.com/watch?v=7_LPdttKXPc)
-* [Khan Academy's Intro](https://www.khanacademy.org/computing/computer-science/internet-intro)
-* [The Odin Project's intro](https://www.theodinproject.com/courses/web-development-101/lessons/how-does-the-web-work)
-* [Time-Lapse Maps of the Internet](https://www.vox.com/a/internet-maps)
-* [internet for webdevs](https://www.youtube.com/watch?v=e4S8zfLdLgQ).  And there's a part two.
-* [OSI model](http://www.webopedia.com/quick_ref/OSI_Layers.asp)
-* Good videos: [part 1](https://www.youtube.com/watch?v=e4S8zfLdLgQ), [part 2](https://www.youtube.com/watch?v=FTAPjr7vgxE)
-* <a href="https://www.youtube.com/watch?v=7_LPdttKXPc" target="_blank">How the Internet Works in 5 Minutes</a>
-* <a href="https://www.youtube.com/watch?v=WjDrMKZWCt0" target="_blank">How Web Browsers Work</a>
-
------------
-
-### Browsers
-
-In the simplest definition, a browser is an application that imports and renders HTML, CSS & JS from anywhere in the internet.  Check out the resources below for a better overview.
-
-* [LifeWire](https://www.lifewire.com/what-is-a-browser-446234)
-* [Foxy Video](https://www.google.com/search?q=what+is+a+web+browser&client=safari&rls=en&source=lnms&tbm=vid&sa=X&ved=0ahUKEwjT_fHmrubbAhWszIMKHYArAKUQ_AUICigB&biw=1280&bih=739)
-* [Browser vs Search Engine](https://www.computer-geek.net/what-is-the-difference-be-va-47.html)
-* [how do they work](https://www.youtube.com/watch?v=WjDrMKZWCt0)
-* [Browsers? 1](https://www.youtube.com/watch?v=TcbhVv9ty44)
-* [Browsers? 2](https://www.youtube.com/watch?v=Ir61LfjYyHk)
-
-
------------------
-
-### Web Apps
-
-In simplest words a web application is just software that its split across the internet.  The part you see runs on your computer, but it talks with other parts anywhere in the world using HTTP.   Those other parts usually do all the hard work.
+{% hyf-youtube src="https://www.youtube.com/watch?v=e4S8zfLdLgQ" %}
 
-* [Being a Web Developer](https://www.theodinproject.com/courses/web-development-101/lessons/introduction-to-web-development)
-* [great video](https://www.youtube.com/watch?v=RsQ1tFLwldY)
-* [another video](https://www.youtube.com/watch?v=_E8qXBHI4cg)
-* [what exactly is a web app](https://www.lifewire.com/what-is-a-web-application-3486637)
-* [what's a web app, how's it work?](https://www.quora.com/What-is-a-web-app-and-how-does-it-work-Please-explain-what-it-is-how-it-works-architecture-wise-and-whatever-else-you-think-is-important-and-in-which-way-it-is-different-than-the-previous-way-of-doing-things)
-* [web-app vs web-site 1](https://stackoverflow.com/questions/8694922/whats-the-difference-between-a-web-site-and-a-web-application)
-* [web-app vs web-site 2](https://www.seguetech.com/website-vs-web-application-whats-the-difference/)
+{% hyf-youtube src="https://www.youtube.com/watch?v=FTAPjr7vgxE" %}
 
 ---
 
-### HTTP
+# Extra reading
+If you just can't get enough, here are some extra links that mentors/students have found useful concerning this topic:
 
-It's sort of like a secret code that everyone knows.  For now you just need to know that it exists, you'll get plenty of time to understand it when you build API's.
+- [Foundations of the Web](https://shawnr.gitbooks.io/foundations-of-the-web/)
+- [how it works, 5 min](https://www.youtube.com/watch?v=7_LPdttKXPc)
+- [Khan Academy's Intro](https://www.khanacademy.org/computing/computer-science/internet-intro)
+- [The Odin Project's intro](https://www.theodinproject.com/courses/web-development-101/lessons/how-does-the-web-work)
+- [Time-Lapse Maps of the Internet](https://www.vox.com/a/internet-maps)
+- [internet for webdevs](https://www.youtube.com/watch?v=e4S8zfLdLgQ).  And there's a part two.
+- [OSI model](http://www.webopedia.com/quick_ref/OSI_Layers.asp)
+- Good videos: [part 1](https://www.youtube.com/watch?v=e4S8zfLdLgQ), [part 2](https://www.youtube.com/watch?v=FTAPjr7vgxE)
+- <a href="https://www.youtube.com/watch?v=7_LPdttKXPc" target="_blank">How the Internet Works in 5 Minutes</a>
+- <a href="https://www.youtube.com/watch?v=WjDrMKZWCt0" target="_blank">How Web Browsers Work</a>
 
-* [http video](https://www.youtube.com/watch?v=eesqK59rhGA)
-* [Easy HTTP](https://www.jmarshall.com/easy/http/)
-* [HTTP Video](https://www.youtube.com/watch?v=eesqK59rhGA)
diff --git a/the-internet/browser.md b/the-internet/browser.md
@@ -37,4 +37,10 @@ Generally speaking, you want to support as many browsers (and browser versions)
 If you just can't get enough, here are some extra links that mentors/students have found useful concerning this topic:
 
 - [Dealing with Cross Browser Compatibility](https://www.youtube.com/watch?v=9tEixRJ3GeI)
-- [Understanding The Stacking Context for Cross Browser Compatibility](https://medium.com/@mattcroak718/understanding-the-stacking-context-for-cross-browser-compatibility-2b21db1cf621)
+- [Understanding The Stacking Context for Cross Browser Compatibility](https://medium.com/@mattcroak718/understanding-the-stacking-context-for-cross-browser-compatibility-2b21db1cf621)
+- [LifeWire](https://www.lifewire.com/what-is-a-browser-446234)
+- [Foxy Video](https://www.google.com/search?q=what+is+a+web+browser&client=safari&rls=en&source=lnms&tbm=vid&sa=X&ved=0ahUKEwjT_fHmrubbAhWszIMKHYArAKUQ_AUICigB&biw=1280&bih=739)
+- [Browser vs Search Engine](https://www.computer-geek.net/what-is-the-difference-be-va-47.html)
+- [how do they work](https://www.youtube.com/watch?v=WjDrMKZWCt0)
+- [Browsers? 1](https://www.youtube.com/watch?v=TcbhVv9ty44)
+- [Browsers? 2](https://www.youtube.com/watch?v=Ir61LfjYyHk)