32 |
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------
/JS/Closure.md:
--------------------------------------------------------------------------------
1 | # Closure
2 |
3 | ### Table of Contents:
4 | - [Definition](https://github.com/Islam888/Study-Notes/blob/master/JS/Closure.md#definition).
5 | - [Example 1](https://github.com/Islam888/Study-Notes/blob/master/JS/Closure.md#example-1).
6 | - [Example 2](https://github.com/Islam888/Study-Notes/blob/master/JS/Closure.md#example-2).
7 | - [Example 3](https://github.com/Islam888/Study-Notes/blob/master/JS/Closure.md#example-3).
8 |
9 |
10 |
11 | ### Definition:
12 | - Simply is a function that has a reference ( can access ) a private variable.
13 |
14 |
15 | ### Example 1:
16 |
17 | ```
18 | function Person(pName) {
19 | this.name = pName;
20 | }
21 | const me = new Person('Islam');
22 | me.name;//'Islam'
23 | ```
24 | Now let's do it another way
25 | ```
26 | function Person(pName) {
27 | var name = pName;
28 | }
29 | const me = new Person('Islam');
30 | me.name;//undefined
31 | ```
32 | Instead we could use a closure to have a reference to this private name variable.
33 | ```
34 | function Person(pName) {
35 | var name = pName;
36 | return function() {
37 | return this.name = pName;
38 | }
39 | }
40 | const obj = Person('Islam');
41 | const me = new obj();
42 | me.name;//'Islam'
43 | ```
44 |
45 | ### Example 2
46 |
47 | ```
48 | function counterFunction() {
49 | var counter = 0;
50 | return function () {return counter += 1;}
51 | }
52 | const add = counterFunction();
53 | add();//1
54 | add();//2
55 | add();//3
56 | ```
57 | The add() refer to the returned anonymous function which has reference to the private counter variable and increment it by 1 each time the add() invoked.
58 | If you wrote `add;` in console it will return the returned anonymous function.
59 | ```
60 | add;//ƒ () {return counter += 1;}
61 | ```
62 |
63 |
64 | ### Example 3
65 |
66 | ```
67 | function invokeTwice(callback) {
68 | callback();
69 | callback();
70 | }
71 |
72 | const dog = {
73 | age: 5,
74 | growOneYear: function () {
75 | this.age += 1;
76 | }
77 | };
78 | ```
79 | Invoking the function `invokeTwice(dog.growOneYear);//undefined` will not increment age property of the dog object. This is because _this_ inside a regular function is scoped to the global object `window` when the function is invoked.
80 | A solution to that is using a closure function to have a refernce to age property inside the dog object and then the method can increment its value.
81 | ```
82 | invokeTwice(function() {
83 | dog.growOneYear()});
84 | dog.age;//7
85 | ```
86 |
--------------------------------------------------------------------------------
/JS/Default Function Parameters.md:
--------------------------------------------------------------------------------
1 | # Default Function Parameters
2 |
3 | In case of:
4 | ```
5 | function sayHi (name, greeting) {
6 | return `${greeting} ${name}`;}
7 |
8 | sayHi('Islam', 'Hi');//Hi Islam
9 | sayHu();//Uncaught ReferenceError: sayHu is not defined at ...
10 | ```
11 |
12 | You can write
13 | ```
14 | function sayHi (name, greeting) {
15 | name = (name !== undefined)? name : 'Islam';
16 | greeting = (greeting !== undefined)? greeting : 'Hi'
17 | return `${greeting} ${name}`;}
18 |
19 | sayHi();// Hi Islam
20 | sayHi('Hazem', 'Hello');//Hello Hazem
21 | ```
22 |
23 | How verbose this is!
24 | So you can instead write
25 | ```
26 | function sayHi (name = 'Islam', greeting = 'Hi') {
27 | return `${greeting} ${name}`;}
28 |
29 | sayHi();// Hi Islam
30 | sayHi('Hazem', 'Hello');//Hello Hazem
31 | ```
32 |
33 | This is what is meant by default function parameters. Assigning a default values for function parameters in case no values are assigned when invoking the function.
34 |
35 |
36 |
--------------------------------------------------------------------------------
/JS/ES6 Built-ins.md:
--------------------------------------------------------------------------------
1 | # ES6 Built-ins
2 |
3 | Description: _This is an index for the files notes of Built-ins lesson of Udacity Front End Nanodegree course._
4 |
5 | ### Table of Contents:
6 |
7 | 1. [symbols](https://github.com/Islam888/Study-Notes/blob/master/JS/symbols.md).
8 | 2. [Object Iteration](https://github.com/Islam888/Study-Notes/blob/master/JS/Object%20Iteration.md).
9 |
--------------------------------------------------------------------------------
/JS/ES6 Functions.md:
--------------------------------------------------------------------------------
1 | # ES6 Functions
2 |
3 | ## Table of contents:
4 | - [Introduction](#introduction).
5 | - [Arrow Functions](#arrow-functions).
6 | - [Arrow Functions and this key word](#arrow-functions-and-this-key-word).
7 | - [Default Function Parameter](#default-function-parameters).
8 | - [Destructuring with Default Function Parameters](#destructuring-with-default-function-parameters).
9 | - [JS Classes](#js-classes).
10 | - [Subclasses with extends, and super](#subclasses-with-extends-and-super).
11 |
12 | ## Introduction:
13 |
14 | ES6 has changed how we write _**functions**_, adding _**default parameters**_ and introduced a new way of presenting _**classes and subclasses**_. All for being more easier syntax.
15 |
16 |
17 | ## Arrow Functions`=>`:
18 |
19 | 1. They are similar to regular functions in behavior, but are quite different _**syntactically**_.
20 | 2. Its full name is "**_Arrow Function Expressions_**". So they can be ONLY :heavy_check_mark: a **function expression** NOT :x: function declaration.
21 | 3. This includes being:
22 | - variable stored.
23 | - passed as an argument to a function.
24 | - stored in an object's property.
25 | 4. **Syntax:**
26 | - One parameter.
27 | ```
28 | //Regular Function
29 | const greet = function(name) { return `Hello ${name}!`};
30 |
31 | //Arrow Function
32 | const greet = name => `Hello ${name}!`;
33 | ```
34 | - No parameter.
35 | ```
36 | //Regular Function
37 | const greet = function() { return `Hello student!`};
38 |
39 | //Arrow Function
40 | const greet = () => `Hello student!`;
41 | //Or
42 | const greet = _ => `Hello student!`;
43 | ```
44 | - More Than one parameter.
45 | ```
46 | //Regular Function
47 | const greet = function(name1, name2) { return `Hello ${name1} and ${name2}!`};
48 |
49 | //Arrow Function
50 | const greet = (name1, name2) => `Hello ${name1} and ${name2}!`;
51 | ```
52 | 5. **Concise body syntax:**
53 | - The function body contain one line of code ( which is a returned value).
54 | - No need to add `return` key word.
55 | - No :x: curly braces `{}` needed.
56 | ```
57 | const greet = () => `Hello student!`;
58 | ```
59 | 6. **Block body syntax:**
60 | - The function body contain more than one line of code.
61 | - If you want to return a specific value you would have to add `return` key word by yourself.
62 | - Need curly braces `{}`.
63 | ```
64 | const func1 = (x, y) => {x++; return x + y;};
65 |
66 | //don't want to return a specific value
67 | const func2 = (x, y) => {x++; console.log(x + y);};
68 |
69 | //this last one return undefined when invoking function.
70 | const func3 = (x, y) => {x++; x + y;};
71 | ```
72 |
73 |
74 | ## Arrow Functions and `this` key word:
75 |
76 | 1. In regular function value of `this` depends on how the function is called. [More on this here](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch1.md), and [even more on `this` here](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch2.md).
77 | 2. In Arrow function value of `this` depends on the function's surrounding context. In more simple words, "**Value of _this_ inside an arrow function is the same like value of _this_ outside this function.**"
78 | 3. Example:
79 | ```
80 | // constructor
81 | function IceCream() {
82 | this.scoops = 0;
83 | }
84 |
85 | // adds scoop to ice cream
86 | IceCream.prototype.addScoop = function() {
87 | setTimeout(function() {
88 | this.scoops++;
89 | }, 500);
90 | };
91 |
92 | const dessert = new IceCream();
93 | dessert.addScoop();
94 | dessert.scoops; //0
95 | dessert.scoops; //0
96 | ```
97 | Value of `this` inside the regular function of setTimeout is the global object. This is because this function has not invoked using new, call, or apply.
98 | To solve this issue we could add _**closure**_ to `this` to close over the `this` value outside the setTimeout function to the outer addScoop method. So when invoking the constructor function with new in `const dessert = new IceCream();` the value of `this` would be the new `dessert` object.
99 | ```
100 | // constructor
101 | function IceCream() {
102 | this.scoops = 0;
103 | }
104 |
105 | // adds scoop to ice cream
106 | IceCream.prototype.addScoop = function() {
107 | const cone = this; // sets `this` to the `cone` variable
108 | setTimeout(function() {
109 | cone.scoops++; // references the `cone` variable
110 | }, 0.5);
111 | };
112 |
113 | const dessert = new IceCream();
114 | dessert.addScoop();
115 | dessert.scoops; //0
116 | dessert.scoops; //1
117 | ```
118 | What happened is the same to what `this` value would be in an arrow function without needing this closure variable.
119 |
120 | ```
121 | // constructor
122 | function IceCream() {
123 | this.scoops = 0;
124 | }
125 |
126 | // adds scoop to ice cream
127 | IceCream.prototype.addScoop = function() {
128 | setTimeout(() => { // an arrow function is passed to setTimeout
129 | this.scoops++;
130 | }, 0.5);
131 | };
132 |
133 | const dessert = new IceCream();
134 | dessert.addScoop();
135 | dessert.scoops; //0
136 | dessert.scoops; //1
137 | ```
138 |
139 | Note: If we change the addScoope function to an arrow one the value of this will be the global object again.
140 |
141 |
142 | ## Default Function Parameters:
143 |
144 | 1. Definition: Assigning a default values for function parameters in case no values are assigned when invoking the function.
145 | 2. Examples:
146 |
147 | In case of:
148 | ```
149 | function sayHi (name, greeting) {
150 | return `${greeting} ${name}`;}
151 |
152 | sayHi('Islam', 'Hi');//Hi Islam
153 | sayHi();//Uncaught ReferenceError: sayHi is not defined at ...
154 | ```
155 | You can write
156 | ```
157 | function sayHi (name, greeting) {
158 | name = (name !== undefined)? name : 'Islam';
159 | greeting = (greeting !== undefined)? greeting : 'Hi'
160 | return `${greeting} ${name}`;}
161 |
162 | sayHi();// Hi Islam
163 | sayHi('Hazem', 'Hello');//Hello Hazem
164 | ```
165 | How verbose this is! So you can instead write
166 | ```
167 | function sayHi (name = 'Islam', greeting = 'Hi') {
168 | return `${greeting} ${name}`;}
169 |
170 | sayHi();// Hi Islam
171 | sayHi('Hazem', 'Hello');//Hello Hazem
172 | sayHi('Hazem');//Hi Hazem
173 | sayHi(undefined, 'Hello');//Hello Islam
174 | ```
175 |
176 |
177 | ## Destructuring with Default Function Parameters:
178 |
179 | 1. **Destructuring Arrays with Default Function Parameters**
180 |
181 | - Example
182 | ```
183 | function createGrid([width = 5, height = 5] = []) {
184 | return `Generates a ${width} x ${height} grid`;
185 | }
186 | createGrid(); // Generates a 5 x 5 grid
187 | createGrid([]); // Generates a 5 x 5 grid
188 | createGrid([2]); // Generates a 2 x 5 grid
189 | createGrid([2, 3]); // Generates a 2 x 3 grid
190 | createGrid([undefined, 3]); // Generates a 5 x 3 grid
191 | ```
192 |
193 | 2. **Destructuring Objects with Default Function Parameters**
194 |
195 | - Example:
196 | ```
197 | function createSundae({scoops = 1, toppings = ['Hot Fudge']} = {}) {
198 | const scoopText = scoops === 1 ? 'scoop' : 'scoops';
199 | return `Your sundae has ${scoops} ${scoopText} with ${toppings.join(' and ')} toppings.`;
200 | }
201 |
202 | createSundae(); // Your sundae has 1 scoop with Hot Fudge toppings.
203 | createSundae({}); // Your sundae has 1 scoop with Hot Fudge toppings.
204 | createSundae({scoops: 2}); // Your sundae has 2 scoops with Hot Fudge toppings.
205 | createSundae({scoops: 2, toppings: ['Sprinkles']}); // Your sundae has 2 scoops with Sprinkles toppings.
206 | createSundae({toppings: ['Cookie Dough']}); // Your sundae has 1 scoop with Cookie Dough toppings.
207 | ```
208 |
209 | 3. **Array defaults vs. object defaults**
210 | - Always use Objects defaults over array ones whenever possible because object defaults handle skipped parameter in a better way.
211 | - While you will have to set the skipped parameters to `undefined` value in arrays arguments( except the last element in the array) you don't have to do the same for object. This is because arrays are order (position based) while objects are not.
212 |
213 |
214 |
215 | ## JS Classes:
216 |
217 | 1. Introduction:
218 | - JavaScript is not :x: a _class-based language_.
219 | - JavaScript uses _functions_ to create objects.
220 | - JavaScript links object together by prototypal _inheritance_.
221 | - JavaScript Classes are just a way to write a cleaner easier to read code.
222 |
223 | 2. ES5 Class -to-> ES6 Class conversion
224 |
225 | ES5
226 | ```
227 | //ES5
228 | function Plane(numEngines) {
229 | this.numEngines = numEngines;
230 | this.enginesActive = false;
231 | }
232 |
233 | // methods "inherited" by all instances
234 | Plane.prototype.startEngines = function () {
235 | console.log('starting engines...');
236 | this.enginesActive = true;
237 | };
238 |
239 | const richardsPlane = new Plane(1);
240 |
241 | const jamesPlane = new Plane(4);
242 | ```
243 | ES6
244 | ```
245 | //ES6
246 | class Plane {
247 | constructor(numEngines) {
248 | this.numEngines = numEngines;
249 | this.enginesActive = false;
250 | }
251 |
252 | startEngines() {
253 | console.log('starting engines…');
254 | this.enginesActive = true;
255 | }
256 | }
257 |
258 | const richardsPlane = new Plane(1);
259 |
260 | const jamesPlane = new Plane(4);
261 | ```
262 |
263 | 3. `static` method
264 |
265 | - written by adding key word `static` before method.
266 | - Can be used for "utility classes". When you want an object to be a bag of methods. And for performance reasons when you don't want to reference every object itself.
267 | - A real life example is `Math.floor()`, `Math.random()`, `Math.ceil()` where `floor()`, `random()`, and `ceil()` are all static methods on Math constructor function.
268 | - accessed on constructor function directly
269 | - Example:
270 | ```
271 | class Plane {
272 | constructor(numEngines) {
273 | this.numEngines = numEngines;
274 | this.enginesActive = false;
275 | }
276 | static badWeather(planes) {
277 | for (plane of planes) {
278 | plane.enginesActive = false;
279 | }
280 | }
281 | startEngines() {
282 | console.log('starting engines…');
283 | this.enginesActive = true;
284 | }
285 | }
286 | ```
287 |
288 |
289 | ## Subclasses with extends, and super:
290 |
291 | 1. `extends`
292 | - Definition: used in class declarations or class expressions to create a class which is a child (subclass) of another class (parent class).
293 |
294 | 2. `super`
295 | - Definition: used to access and call functions on an object's parent.
296 |
--------------------------------------------------------------------------------
/JS/ES6 Syntax.md:
--------------------------------------------------------------------------------
1 | # **ES6 COURSE**
2 |
3 | ## **Names :**
4 | - **ES6**
5 | - **ES2015**
6 | - **Harmony**
7 |
8 | -----------------------------------------------------------------------------------------
9 |
10 | ## **let and const :**
11 | - **Variables declared with let and const eliminate this specific issue of hoisting because they’re scoped to the block, not to the function.**
12 | - **Variables declared with var are either scoped globally or locally the function scope.**
13 | - **Rules for using let and const :**
14 | - Variables declared with **_let_**:
15 |
16 | - [ ] can be reassigned.
17 | - [ ] can't be redeclared in the same scope.
18 | - Variables declared with **_const_**:
19 |
20 | - [ ] must be assigned an initial value.
21 | - [ ] can't be reassigned.
22 | - [ ] can't be redeclared in the same scope.
23 |
24 | - **Use Cases (when to use what) :**
25 | - **_let_** when you plan to `reassign` new values to a variable.
26 | - **_const_** when you _don’t_ plan on reassigning new values to a variable.
27 |
28 | **As a general rule _always_ declare your variables using `const` except if you plan to reassign new values to variable.**
29 |
30 | **It is a _GOOD PRACTICE_ to not using `var` any more.**
31 |
32 | ----------------------------------------------------------------------------------------
33 |
34 | ## **Template Literals :**
35 |
36 | **string literals that include embedded expressions.**
37 |
38 | ### Syntax:
39 |
40 | - Single line string (with embeded expressions or _expression interpolation_)
41 | ```
42 | const student = {
43 | name: 'Richard Kalehoff',
44 | guardian: 'Mr. Kalehoff'
45 | };
46 |
47 | const teacher = {
48 | name: 'Mrs. Wilson',
49 | room: 'N231'
50 | }
51 |
52 | let message = `${student.name} please see ${teacher.name} in ${teacher.room} to pick up your report card.`; //Richard Kalehoff please //see Mrs. Wilson in N231 to pick up your report card.
53 | ```
54 | ```
55 | var a = 5;
56 | var b = 10;
57 | console.log(`Fifteen is ${a + b} and not ${2 * a + b}.`);
58 | // "Fifteen is 15 and not 20."
59 | ```
60 | - Multi-line string.
61 |
62 | instead of:
63 | ```
64 | console.log('string text line 1\n' +
65 | 'string text line 2');
66 | // "string text line 1
67 | // string text line 2"
68 | ```
69 | you can write this:
70 | ```
71 | console.log(`string text line 1
72 | string text line 2`);
73 | // "string text line 1
74 | // string text line 2"
75 | ```
76 |
77 |
78 | -----------------------------------------------------------------------------
79 |
80 | ## **Destructuring**
81 |
82 | **Extract data from arrays and objects into different variables.**
83 | **allow you to specify the elements you want to extract from an array or object on the left side of an assignment.**
84 |
85 | ### **Arrays**
86 |
87 | - **Instead of :**
88 |
89 | ```
90 | const point = [10, 25, -34];
91 |
92 | const x = point[0];
93 | const y = point[1];
94 | const z = point[2];
95 |
96 | console.log(x, y, z); //10 25 -34
97 | ```
98 |
99 | - **You can do this:**
100 |
101 | ```
102 | const point = [10, 25, -34];
103 | const [x, y, z] = point;
104 |
105 | console.log(x, y, z); //10 25 -34
106 | ```
107 |
108 | ### **Objects**
109 |
110 | - **Instead of:**
111 |
112 | ```
113 | const gemstone = {
114 | type: 'quartz',
115 | color: 'rose',
116 | carat: 21.29
117 | };
118 |
119 | const type = gemstone.type;
120 | const color = gemstone.color;
121 | const carat = gemstone.carat;
122 |
123 | console.log(type, color, carat); ////quartz rose 21.29
124 | ```
125 |
126 | - **You can do this:**
127 |
128 | ```
129 | const gemstone = {
130 | type: 'quartz',
131 | color: 'rose',
132 | carat: 21.29
133 | };
134 | const {type, color, carat} = gemstone;
135 | console.log(type, color, carat); //quartz rose 21.29
136 | ```
137 | **achieve the same result as before, but with much _less code_; and it's still easy to _understand_.**
138 |
139 |
140 | --------------------------------
141 |
142 | ## **Object literal shorthand**
143 |
144 | ### **initializing objects**
145 |
146 | If the properties names are the same like values names assigned to them, then ni=o need to re-write the same name as the value of property.
147 |
148 | - **Instead of that:**
149 |
150 | ```
151 | let type = 'quartz';
152 | let color = 'rose';
153 | let carat = 21.29;
154 |
155 | const gemstone = {
156 | type: type,
157 | color: color,
158 | carat: carat
159 | };
160 |
161 | console.log(gemstone);
162 | ```
163 |
164 | - **You can write that:**
165 |
166 | ```
167 | let type = 'quartz';
168 | let color = 'rose';
169 | let carat = 21.29;
170 |
171 | const gemstone = {
172 | type,
173 | color,
174 | carat
175 | };
176 |
177 | console.log(gemstone);
178 | ```
179 |
180 | ### **methods names shorthand**
181 |
182 | **Since _anonymous function_ is being assigned to a property.**
183 |
184 | - **Instead of that:**
185 |
186 |
187 | ```
188 | let type = 'quartz';
189 | let color = 'rose';
190 | let carat = 21.29;
191 |
192 | const gemstone = {
193 | type,
194 | color,
195 | carat,
196 | calculateWorth: function() {
197 | //code here
198 | }
199 | };
200 | ```
201 |
202 | - **You can write that:**
203 |
204 |
205 | ```
206 | let gemstone = {
207 | type,
208 | color,
209 | carat,
210 | calculateWorth() { //code here }
211 | };
212 | ```
213 |
214 |
215 | --------------------------------------------------------------------
216 |
217 | ## :point_right: **for Loops**
218 |
219 | - **for loop**
220 | - **for in loop**
221 | - **for of loop**
222 |
223 | ### **for loop**
224 | - _**Weakness**_:
225 | Having to keep track of: **Counter** , and **Exit Condition**.
226 |
227 | ### **for in loop**
228 |
229 | ```
230 | const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
231 |
232 | for (const index in digits) {
233 | console.log(digits[index]);
234 | }
235 | ```
236 | - _**Adv**_:
237 | Eliminates **Counter** , and **Exit Condition**.
238 |
239 | - _**Weakness**_:
240 | Use of index to access values of the array.
241 | If you add any properties or methods to the array prototype they will appear in the loop.
242 |
243 | ```
244 | Array.prototype.decimalfy = function() {
245 | for (let i = 0; i < this.length; i++) {
246 | this[i] = this[i].toFixed(2);
247 | }
248 | };
249 |
250 | const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
251 |
252 | for (const index in digits) {
253 | console.log(digits[index]);
254 | }
255 | ```
256 | ```
257 | Prints:
258 | 0
259 | 1
260 | 2
261 | 3
262 | 4
263 | 5
264 | 6
265 | 7
266 | 8
267 | 9
268 | function() {
269 | for (let i = 0; i < this.length; i++) {
270 | this[i] = this[i].toFixed(2);
271 | }
272 | }
273 | ```
274 |
275 | ### **for of loop**
276 |
277 | - _**Adv**_:
278 | Eliminates **Counter** , and **Exit Condition**.
279 | _Don't_ use **index** but it loops over each value without use of index.
280 | _only_ loop over the **values** in the object. So you don't worry about any new properties like in for in loop.
281 | Can be **stopped** at any time.
282 |
283 | ```
284 | const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
285 |
286 | for (const digit of digits) {
287 | if (digit % 2 === 0) {
288 | continue;
289 | }
290 | console.log(digit);
291 | }
292 | ```
293 |
294 | ```
295 | prints:
296 | 1
297 | 3
298 | 5
299 | 7
300 | 9
301 | ```
302 |
303 | ```
304 | Array.prototype.decimalfy = function() {
305 | for (i = 0; i < this.length; i++) {
306 | this[i] = this[i].toFixed(2);
307 | }
308 | };
309 |
310 | const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
311 |
312 | for (const digit of digits) {
313 | console.log(digit);
314 | }
315 | ```
316 |
317 | ```
318 | Prints:
319 | 0
320 | 1
321 | 2
322 | 3
323 | 4
324 | 5
325 | 6
326 | 7
327 | 8
328 | 9
329 | ```
330 | :musical_note: **A good practice:** **_plural names_ for objects conatin values** and **_singular names_ for referencing individual values.**
331 |
332 | ```for (const button of buttons) {...}```
333 |
334 | ----------------------------------------------------------------------------
335 |
336 | ## :point_right: **Spread Operator**
337 |
338 | - **expand, or spread, iterable objects into multiple elements.**
339 |
340 | ```
341 | const primes = new Set([2, 3, 5, 7, 11, 13, 17, 19, 23, 29]);
342 | console.log(...primes);\\ 2 3 5 7 11 13 17 19 23 29
343 | ```
344 |
345 | - **One of its uses is to concatenate 2 or more iterable objects.**
346 |
347 | - Example:
348 | - instead of using ```concat()``` an Array's method
349 |
350 | ```
351 | const fruits = ["apples", "bananas", "pears"];
352 | const vegetables = ["corn", "potatoes", "carrots"];
353 | const produce = fruits.concat(vegetables);
354 | console.log(produce);
355 | ```
356 |
357 | - You can use spread operator
358 |
359 |
360 | ```
361 | const fruits = ["apples", "bananas", "pears"];
362 | const vegetables = ["corn", "potatoes", "carrots"];
363 |
364 | const produce = [...fruits, ...vegetables];
365 |
366 | console.log(produce);
367 | ```
368 |
369 |
370 | -------------------------------------------------------
371 |
372 | ## :point_right: **Rest Parameter**
373 |
374 | - **represent an indefinite number of elements as an array.**
375 | - **Uses:**
376 |
377 | 1. **Assign certain values of an array to another array.**
378 |
379 | ```
380 | const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
381 | const [total, subtotal, tax, ...items] = order;
382 | console.log(total, subtotal, tax, items);// 20.17 18.67 1.5 ["cheese", "eggs", "milk", "bread"]
383 | ```
384 | 2. **In Variadic Functions**
385 |
386 | - **Variadic functions: functions that take an indefinite number of arguments.**
387 | - **You can use argument object for that but it is misleading anf confusing.**
388 | - **Instead use Rest parameter.**
389 |
390 | ```
391 | \\Using argument object
392 | function sum() {
393 | let total = 0;
394 | for(const argument of arguments) {
395 | total += argument;
396 | }
397 | return total;
398 | }
399 | ```
400 |
401 | ```
402 | //Using rest parameter
403 | function sum(...nums) {
404 | let total = 0;
405 | for(const num of nums) {
406 | total += num;
407 | }
408 | return total;
409 | }
410 | ```
411 |
412 | :musical_note: **_argument object_**: Array-like object corresponding to the arguments passed to a function.
413 | available as a local variable inside all functions.
414 | contains a value for each argument being passed to the function starting at 0 for the first argument, 1 for the second argument, and so on.
415 |
416 | Example:
417 |
418 | ```
419 | function func1(a, b, c) {
420 | console.log(arguments[0]);
421 | // expected output: 2
422 |
423 | console.log(arguments[1]);
424 | // expected output: 5
425 |
426 | console.log(arguments[2]);
427 | // expected output: 0
428 | }
429 |
430 | func1(2, 5, 0);
431 | ```
432 |
433 |
434 |
435 |
--------------------------------------------------------------------------------
/JS/Good Commenting Practices.md:
--------------------------------------------------------------------------------
1 | # Good Commenting Practices
2 |
3 | ### Contents:
4 |
5 | - [Source](#source).
6 | - [The 5 tips](#the-5-tips).
7 | 1. [Comments are not subtitles](#1-comments-are-not-subtitles).
8 | 2. [Comments are not an art project](#2-comments-are-not-an-art-project).
9 | 3. [Header Blocks](#3-header-blocks).
10 | 4. [Comments are not source control](#4-comments-are-not-source-control).
11 | 5. [Comments are a code smell](#5-comments-are-a-code-smell).
12 |
13 |
14 | ## Source:
15 |
16 | - https://improvingsoftware.com/2011/06/27/5-best-practices-for-commenting-your-code/
17 |
18 |
19 | ## The 5 tips:
20 |
21 | ### 1. Comments are not subtitles
22 |
23 | - You are writting comments for both the future you, and others programmers who would be building over your code or maintain it.
24 | - So no need to write every simple detail. As not far from now you will read code as your native language.
25 | - Example:
26 | ```javascript
27 | // Loop through all bananas in the bunch
28 | foreach(banana b in bunch) {
29 | monkey.eat(b); //make the monkey eat one banana
30 | }
31 | ```
32 | - For people who are used to write pseudo code first before the real code, don't forget to replace pseudo with real code and not just add it to the former.
33 | - Exceptions:
34 | 1. Code examples used to teach a concept or new programming language.
35 | 2. Programming languages that aren’t human readable (Assembly, Perl).
36 |
37 |
38 | ### 2. Comments are not an art project
39 | ```
40 | /*
41 | _ _ _ _ _ _ _ _ _ _ _ _
42 | (c).-.(c) (c).-.(c) (c).-.(c) (c).-.(c) (c).-.(c) (c).-.(c)
43 | / ._. \ / ._. \ / ._. \ / ._. \ / ._. \ / ._. \
44 | __\( Y )/__ __\( Y )/__ __\( Y )/__ __\( Y )/__ __\( Y )/__ __\( Y )/__
45 | (_.-/'-'\-._)(_.-/'-'\-._)(_.-/'-'\-._)(_.-/'-'\-._)(_.-/'-'\-._)(_.-/'-'\-._)
46 | || M || || O || || N || || K || || E || || Y ||
47 | _.' `-' '._ _.' `-' '._ _.' `-' '._ _.' `-' '._ _.' `-' '._ _.' `-' '._
48 | (.-./`-'\.-.)(.-./`-'\.-.)(.-./`-'\.-.)(.-./`-'\.-.)(.-./`-'\.-.)(.-./`-'\.-.)
49 | `-' `-' `-' `-' `-' `-' `-' `-' `-' `-' `-' `-'
50 |
51 | -It's Monkey Business Time! (Version 1.5)
52 | */
53 | ```
54 | ```
55 | +------------------------------------------------------------+
56 | | Module Name: classMonkey |
57 | | Module Purpose: emulate a monkey |
58 | | Inputs: Bananas |
59 | | Outputs: Grunts |
60 | | Throws: Poop |
61 | +------------------------------------------------------------+
62 | ```
63 |
64 | - The first example is very silly to do in your comments and you are not do silly things, are you?
65 | - The second example will get developers tired while they are maintaing your code just to try to fix the unsymmetric border. Because they like consistency and every other method in the project has one.
66 |
67 |
68 | ### 3. Header Blocks
69 |
70 | - They are enablers for badly named objects/methods. Just to think that he reader will understand what the object/method do after reading the header, excuse you not to put extra work to find a good descriptive names.
71 |
72 | - They never get updated. And also rarely get read. So why wasting your time with something won't help.
73 |
74 |
75 | ### 4. Comments are not source control
76 |
77 | _I am trying to understand this part. If anyone could contribute, it is welcomed._
78 |
79 |
80 | ### 5. Comments are a code smell
81 |
82 | - "Things generally need signs because their affordances have failed." This means that "**when you add a comment you are admitting that you have written code that doesn’t communicate its purpose well.**".
83 | - Whenever you think, “This code needs a comment” follow that thought with, “How could I modify the code so its purpose is obvious?”
84 | Talk with your code, not your comments.
85 | - One of the ways to do so is to Use meaningful identifiers (even if they are single use).
86 | ```
87 | // Before
88 | // Calculate monkey's arm length
89 | // using its height and the magic monkey arm ratio
90 | double length = h * 1.845; //magic numbers are EVIL!
91 |
92 | // After - No comment required
93 | double armLength = height * MONKEY_ARM_HEIGHT_RATIO;
94 | ```
95 |
--------------------------------------------------------------------------------
/JS/IIFE.md:
--------------------------------------------------------------------------------
1 | # Immediately Invoked Function Expression
2 |
3 | - A good [article to introduce IIFE](http://adripofjavascript.com/blog/drips/an-introduction-to-iffes-immediately-invoked-function-expressions.html).
4 |
--------------------------------------------------------------------------------
/JS/JS OOP.md:
--------------------------------------------------------------------------------
1 | # JS OOP
2 |
3 | JS Object-Oriented Programing at Udacity. A part of Udacity Front end Nanodegree courses.
4 |
5 | Course lessons:
6 |
7 | 1. [Objects In Depth](#objects-in-depth).
8 | 2. [Functions at runtime](#functions-at-runtime).
9 | 3. [Classes and Objects](#classes-and-objects).
10 |
11 | ## 1. Objects in Depth
12 |
13 | ### Introduction
14 |
15 | - Object Definition: a collection of associated unordered (opposite to arrays) key/value pairs. It is defined with curly brackets `{}`. Key/value pairs are called properties. And they (key/value) are connected using colon `:` and properties separated from each other using comma `,` .
16 |
17 | - Syntax:
18 | const course = { courseId: 711 };
19 | const course = { 'courseId': 711 };
20 | const course = { "courseId": 711 };
21 |
22 | As you see the key string can be with or without quotes. Mostly without quotes but are essential in certain cases:
23 | - reserved word (e.g., for, if, let, true, etc.).
24 | - Contains spaces or special characters that cannot appear in a variable name.
25 |
26 | - Accessing object properties values:
27 |
28 | - Using `dot notation` : `course.courseId;`
29 | Limitations:
30 | 1. When the key is a number.
31 | 2. When the key is stored in a variable and we want to access this property by the variable.
32 | - Using `bracket notation` : `course['courseId'];`
33 |
34 | - Accessing nested object properties values:
35 |
36 | ```
37 | const bicycle = {
38 | color: 'blue',
39 | type: 'mountain bike',
40 | wheels: {
41 | diameter: 18,
42 | width: 8
43 | }
44 | };
45 |
46 | bicycle.wheels.width;
47 | ```
48 |
49 |
50 | ### Creating and modifying objects
51 |
52 | - [A link to the course page](https://classroom.udacity.com/nanodegrees/nd001/parts/4942f4d7-a48d-4794-9eb0-404b3ed3cfe1/modules/7e56389b-50d8-4e3a-84a0-eb3fd45456b2/lessons/504843ae-ba16-4573-a859-94da7a7d1dd4/concepts/2bbcfed5-e683-431b-ace2-b67c091400d2).
53 | - Create:
54 | ```
55 | // Using literal notation:
56 | const myObject = {};
57 |
58 | // Using the Object() constructor function (slower):
59 | const myObject = new Object();
60 |
61 | //Using constructor function:
62 | function MyObjectConstructor() {
63 | }
64 | const myObject = new MyObjectConstructor();
65 | ```
66 |
67 | - Modifying object properties
68 | ```
69 | const cat = {
70 | age: 2,
71 | name: 'Bailey'
72 | }
73 | cat.age += 1;
74 |
75 | cat.age;
76 | // 3
77 |
78 | cat.name = 'Bambi';
79 |
80 | cat.name;
81 | // 'Bambi'
82 | ```
83 |
84 | - Adding Object properties
85 | ```
86 | const printer = {};
87 |
88 | printer.on = true;
89 | printer.mode = 'black and white';
90 | printer.print = function () {
91 | console.log('The printer is printing!');
92 | };
93 | ```
94 |
95 | - Removing Object properties
96 | ```
97 | delete printer.mode;
98 | // true
99 | ```
100 |
101 | - Since Objects are passed by reference, making changes to an original object make the same change to its copy
102 | ```
103 | const iceCreamOriginal = {
104 | Andrew: 3,
105 | Richard: 15
106 | };
107 |
108 | const iceCreamCopy = iceCreamOriginal;
109 |
110 | iceCreamCopy.Richard;
111 | // 15
112 |
113 | iceCreamCopy.Richard = 99;
114 |
115 | iceCreamCopy.Richard;
116 | // 99
117 |
118 | iceCreamOriginal.Richard;
119 | // 99
120 | ```
121 |
122 | - Comparing an Object with Another Object
123 |
124 | ```
125 | const object1 = {
126 | name: bird}
127 | const object2 = {
128 | name: bird}
129 | object1 === object2;//false
130 |
131 | const object = object1;
132 | object;//{name: bird}
133 |
134 | object === object1;//true. Also any change in object1 will make the same change in object.
135 | object === object2;//false.
136 | ```
137 | ### Invoke object method
138 |
139 | - invoke methods different ways
140 |
141 | ```
142 | const developer = {
143 | sayHello: function () {
144 | console.log('Hi there!');
145 | }
146 | };
147 | developer.sayHello();//Hi there!
148 | developer['sayHello']();//Hi there!
149 | ```
150 |
151 | - passing arguments into methods
152 |
153 | ```
154 | const developer = {
155 | name: 'Andrew',
156 | favoriteLanguage: function (language) {
157 | console.log(`My name is ${this.name} and my favorite programming language is ${language}.`);
158 | }
159 | };
160 |
161 | developer.favoriteLanguage('JavaScript');//My name is Andrew and my favorite programming language is JavaScript.
162 | ```
163 | - Naming properties functions ( rather than using anonymous functions) is valid and is useful for debugging.
164 |
165 |
--------------------------------------------------------------------------------
/JS/JS Promises.md:
--------------------------------------------------------------------------------
1 | # Promises Course Stages:
2 |
3 | 1. Wrapping.
4 | 2. Thening.
5 | 3. Catching.
6 | 4. Chaining.
7 |
8 | # Promises States:
9 |
10 | 1. Fulfilled (Resolved). => The action related to the promise succeeded.
11 | 2. Rejected. => The action related to the promise failed.
12 | 3. Pending. => Promise has not yet fulfilled or rejected.
13 | 4. Settled. => Promise has either fulfilled or rejected.
14 |
--------------------------------------------------------------------------------
/JS/Memory management.md:
--------------------------------------------------------------------------------
1 | # Memory management
2 |
3 | - Description:
4 | _This is just an explanation of a garbage collection algorithm presented in_ [MDN-Garbage Collection](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management#Garbage_collection).
5 |
6 |
7 | ### Table of contents:
8 |
9 | 1. [Introduction](#introduction).
10 | 2. [Memory Life Cycle](#memory-life-cycle).
11 | 3. [Garbage Collection](#garbage-collection).
12 | 4. [Reference Counting Garbage Collection algorithm](#reference-counting-garbage-collection-algorithm).
13 | 5. [Mark and sweep algorithm](#mark-and-sweep-algorithm).
14 |
15 | ## Introduction
16 |
17 | - Low-level language (eg. C language) have low level memory management primitives like `free()`. ( this is not important to us now but we mention that to say that memory management must be done **explicitly**).
18 | - Unlike JavaScript, when for example objects are not used any more they are automatically "garbage collected" to free memory.
19 | - This gives a _**wrong**_ impression to JS developers to not care about memory management.
20 |
21 |
22 | ## Memory Life Cycle
23 |
24 | - Regardless of the programming language, memory life cycle is pretty much always the same:
25 | 1. Allocate the memory you need. (_explicit in low-level languages implicit in high-level languages like JS_)
26 | 2. Use the allocated memory. (read, write) (_explicit in all languages_)
27 | 3. Release the allocated memory when it is not needed anymore. (_explicit in low-level languages implicit in high-level languages like JS (GARBAGE COLLECTION)_)
28 |
29 | ```
30 | Allocate the memory in JS
31 | ```
32 | ===> JavaScript does it alongside with declaring values.
33 |
34 | ```
35 | Use the allocated memory
36 | ```
37 | ===> By reading or writing the value of a variable or an object property or even passing an argument to a function.
38 |
39 | ```
40 | Release the allocated memory
41 | ```
42 | ===>
43 | - High-level languages embed a piece of software called "**garbage collector**" whose job is to track memory allocation and use in order to find when a piece of allocated memory is not needed any longer in which case, it will automatically _free it_.
44 | - This process is an approximation (knowing whether some piece of memory is needed is undecidable. This means it can not be solved by an algorithm).
45 |
46 | ## Garbage Collection
47 |
48 | - The algorithms of garbage collection depends on "reference"
49 |
50 |
51 | ## Reference Counting Garbage Collection Algorithm
52 |
53 | - Description:
54 | _This is just an explanation of a garbage collection algorithm presented in_ [MDN-Garbage Collection](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management#Garbage_collection).
55 | - Definition: One of algorithms of JS Grabage Collection Algorithms.
56 | - The most naive Garbage Collection algorithm.
57 | - It reduces the definition of "an object is not needed anymore so Garbage collect it" to "an object has no other object referencing to it so Garbage collect it".
58 | - MDN Example with a more clear explanation:
59 |
60 | ```javascript
61 | var o = {
62 | a: {
63 | b: 2
64 | }
65 | };
66 | ```
67 | 2 objects are created:
68 |
69 | ```javascript
70 | {
71 | a: {
72 | b: 2
73 | }
74 | }
75 | ```
76 | And
77 | ```javascript
78 | {
79 | b: 2
80 | }
81 | ```
82 | The first one is referenced by being assigned to variable `o`. The second is referenced by the first one as a property of it.
83 |
84 | ```javascript
85 | var o2 = o;
86 | ```
87 | Now the first object has a second reference `o2`
88 | ```javascript
89 | o = 1;
90 | ```
91 | But now one of its references `o` variable are being re assigned to a different value. So the first object now has one reference `o2`.
92 | ```javascript
93 | var oa = o2.a;
94 | ```
95 | The second object now has a reference `oa` by assigning the `o2` object `a` property to `oa`
96 | ```javascript
97 | o2 = 'yo';
98 | ```
99 | Now the first object loses its last reference `o2`. So it can be garbage collected.
100 | ```javascript
101 | oa = null;
102 | ```
103 | Now the second object loses its reference `oa`. So it can also be garbage collected.
104 |
105 |
106 | - Another example: _trapped reference_ Or _circularReference_
107 | ```javascript
108 | var div;
109 | window.onload = function() {
110 | div = document.getElementById('myDivElement');
111 | div.circularReference = div;// the div references itself. It will continue in memory even if it is removed from DOM tree.
112 | div.lotsOfData = new Array(10000).join('*');//the div carries a lot of data. Memory consumed by this data will never be released.
113 | };
114 | ```
115 |
116 |
117 | ## Mark and sweep algorithm
118 |
119 | - It reduces the definition of "an object is not needed anymore so Garbage collect it" to "an object is not reachable so Garbage collect it".
120 | - This algorithm starts from the root object ( global object) and find all objects that are referenced from these roots, then all objects referenced from these, etc. Then the unreachable objects will be garbage collected.
121 | - This algorithm is better than the previous one since "an object has zero references" leads to this object being unreachable. The opposite is not true as in this example:
122 | ```javascript
123 | function f() {
124 | var o = {};
125 | var o2 = {};
126 | o.a = o2; // o references o2
127 | o2.a = o; // o2 references o
128 | return 'hi';
129 | }
130 |
131 | f();
132 | ```
133 |
--------------------------------------------------------------------------------
/JS/Object Iteration.md:
--------------------------------------------------------------------------------
1 | # Object Iteration
2 |
3 | ### Table of Contents:
4 |
5 | 1. [Description](#description).
6 | 2. [Iterable Protocol](#iterable-protocol).
7 |
8 | ### Description:
9 |
10 | - This will show us "**How to iterate over an object**".
11 |
12 | ### Iterable Protocol
13 |
14 | - **Definition**: define and customize the iteration behavior of objects (which are not iterables). This means that now we have the flexibility of defining and customizing this iteration behavior for objects.
15 | - Using `[Symbol.iterator]()`
16 |
17 |
18 | ### Iterator Protocol
19 |
20 | - **Definition**: define a standard way that an object produces a sequence of values (how an object will iterate).
21 | - Using `next()`
22 |
23 | ----------------------------
24 |
25 |
26 | - So for an object to be iterable ---must implement---> iterator method(define how object will be iterated).
27 | - Our iterator method here is `[Symbol.iterator]()`
28 | - `[Symbol.iterator]()` is a zero argument method ---returns---> iterator object (which is an object that conforms to iterator protocol).
29 | - On iterator object, you can call method `next()`
30 | - `next()` method is a zero argument method that returns an object with 2 properties:
31 | 1. `value`: value returned by the iterator. `undefined` when the iterator past the end of the iterated sequence (past the last value of the object).
32 | 2. `done`: (boolean) which can be true or false. `true` if the iterator past the end of the iterated sequence (past the last value of the object). `false` if the iterator was able to produce the next value in the sequence (still there is a value or values to produce).
33 |
34 |
35 | ```javascript
36 | const digits = [0, 1, 2];
37 | const arrayIterator = digits[Symbol.iterator]();
38 |
39 | console.log(arrayIterator.next());//Object {value: 0, done: false}
40 | console.log(arrayIterator.next());//Object {value: 1, done: false}
41 | console.log(arrayIterator.next());//Object {value: 2, done: false}
42 | console.log(arrayIterator.next());//Object {value: undefined, done: true}
43 | ```
44 |
45 |
46 |
--------------------------------------------------------------------------------
/JS/polyfills.md:
--------------------------------------------------------------------------------
1 | # Pollyfills
2 |
3 |
4 | ## 1. for startsWith() method:
5 |
6 | ```javascript
7 | if (!String.prototype.startsWith) {
8 | String.prototype.startsWith = function (searchString, position) {
9 | position = position || 0;
10 | return this.substr(position, searchString.length) === searchString;
11 | };
12 | }
13 | ```
14 | - Explanation:
15 |
16 | - We will start by showing how the method startsWidth() work.
17 | ```javascript
18 | "islam".startsWith("la", 2);//true
19 | ```
20 | `string.startsWith(searchString[, position]);`
21 |
22 | _searchString_ argument:
23 |
24 | The character(s) to be searched for at the start of this string or at the start point defined by `position` argument.
25 |
26 | _position_ argument:
27 |
28 | The position in this string at which to begin searching for searchString. It is optional and defaults to 0.
29 |
30 | -The conditional is checking if the method is on String object prototype (supported by the browser). If it is not on String object prototype (String.prototype.startsWith == undefined) ===> falsy so (!String.prototype.startsWith) will be true and excutes what code after it.
31 |
32 | -This code will declare a startWidth method to String prototype which value is an anonymous function with 2 arguments ( same like the original startsWidth method). position will be either the value we pass in calling the method of if not passes will be equal to 0 ( same like the original method. Default is 0) `position = position || 0;`
33 | - Then the function returns substr() Method.
34 | - `str.substr(start[, length])`
35 | returns the part of a string between the start index and a number of characters after it.
36 | - So the function will return true or false depending on wether the string value from `subStr(position, searchString.length) === searchString` or not
37 | - So for example in
38 | ```javascript
39 | "islam".startsWith("la", 2);
40 | ```
41 | this will return `subStr(2, 2) === la` start at position 2 which is character "l" to 2 characters which is "la" and this is eaqual to "la". So it returns true.
42 |
43 |
--------------------------------------------------------------------------------
/JS/symbols.md:
--------------------------------------------------------------------------------
1 | # symbols:
2 | - A new JS primitive data type.(number, string, boolean, null, undefined, symbol)
3 | - is "unique, and immutable data type that is used to identify object properties".
4 | - created by invoking Symbol() function.
5 | - Symbol('description') function can have an optional string description that is used for _debugging_.
6 | - Description is a way to describe the created symbol. It can not access the symbol or affect its value. That's why the symbols with the same description are not equal.
7 | - syntax:
8 | ```javascript
9 |
10 | const bowl = {
11 | [Symbol('apple')]: { color: 'red', weight: 136.078 },
12 | [Symbol('banana')]: { color: 'yellow', weight: 183.15 },
13 | [Symbol('orange')]: { color: 'orange', weight: 170.097 },
14 | [Symbol('banana')]: { color: 'yellow', weight: 176.845 }
15 | };
16 | console.log(bowl);//{Symbol(apple): {…}, Symbol(banana): {…}, Symbol(orange): {…}, Symbol(banana): {…}}
17 |
18 |
--------------------------------------------------------------------------------
/JS/this.md:
--------------------------------------------------------------------------------
1 | # `this`
2 |
3 | - An interesting reading about `this` is [here](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20%26%20object%20prototypes/ch1.md).
4 |
--------------------------------------------------------------------------------
/JavaScript DOM.md:
--------------------------------------------------------------------------------
1 | # **JavaScript DOM**
2 |
3 |
4 | - ### When you request a website, it will respond with HTML. These bytes recieved are run through complicated and documented parsing process
5 | ===> determine different characters (eg., start tag character, an atrrbute and so on) ===> tokenizer ===> tokens (DOCTYPE, start tag, end tag, comment, and so on) ===> DOM (a tree structure that captures the content and properties of the HTML and all the relationships between the nodes)
6 |
--------------------------------------------------------------------------------
/Plagiarism .md:
--------------------------------------------------------------------------------
1 | ### Notes:
2 |
3 |
4 | # Writing Cleanroom
5 | - **The Basic Tenant of a Writing Cleanroom**
6 |
7 | ### **"_No unoriginal text should be pasted or otherwise enter into a work in progress without immediate citation being applied._"**
8 |
9 | 1. The act of copying and pasting (or simply retyping) text into your work should be treated with extreme reverence. If the text is not yours, it needs to be cited immediately after pasting.
10 |
11 | 2. Even if you intend to go back and rewrite a copied section or remove it altogether, time or memory might prevent that from happening.
12 |
13 | 3. This approach is **“write and cite”**, others take a “write first, cite later” approach. The problem with the latter is that it’s easy to _forget_ what needs to be done.
14 |
15 | ----------
16 |
17 | - **How to use a Writing Cleanroom**
18 |
19 | 1. Never mix unoriginal and original text in the same document.
20 |
21 | 2. When pasting text into your work, decide first if it’s text that needs to be copied. Would this information be better or equally-well presented as a paraphrase? If so, put it away and paraphrase the information instead. After you’re done, be sure to cite the source of the information immediately.
22 |
23 | 3. If you decide copying the text is appropriate, do so but immediately put it in either quotes or block-quotes as appropriate and add other needed citations.
24 |
25 | 4. Be careful to not remove any citation marks through reformatting or editing of the document. This can be especially problematic if you use block-quotes but convert the document to a format that doesn’t support it.
26 |
27 | -----------
28 |
29 | - **Paraphrasing**
30 |
31 | 1. **Paraphrasing** is not about changing the words someone else wrote, but rather, writing the information in your own words.
32 |
33 | 2. The easiest way to achieve this is to read the information you want to paraphrase and then _put it away_. Don’t copy it and don’t look at it. From there, just write the information in _your words_.
34 |
35 |
36 |
37 |
--------------------------------------------------------------------------------
/Projects road map/P4: Classic Arcade Game.md:
--------------------------------------------------------------------------------
1 | ### First Steps:
2 | 1. Take [HTML5 Canvas course](https://classroom.udacity.com/courses/ud292).:heavy_check_mark:
3 | 2. Revise OOP course.:heavy_check_mark:
4 | 3. Read project instructions carefully ==> Take notes.:heavy_check_mark:
5 | 4. Read project rubric carefully ==> Take notes.:heavy_check_mark:
6 | 5. Read JS files comments carefully ==> Take notes.:heavy_check_mark:
7 | 6. Collect and organize all your notes in one file.:heavy_check_mark:
8 | 7. Before starting project debug it in concole. ==> Complete the missing.:heavy_check_mark:
9 | 8. Start the project.:heavy_check_mark:
10 |
11 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Study-Notes
2 | ## **Books, courses, articles, and tutorials study notes.**
3 |
4 | - **This repo will contain different text files for different source's study notes.**
5 |
6 | - **Every file represents a book, course, article, or tutorial.**
7 |
8 | - **Every file will carry the name of the source.**
9 |
10 | ## **License**
11 | This project is licensed under the terms of the MIT license.
12 |
--------------------------------------------------------------------------------
/React/intro.md:
--------------------------------------------------------------------------------
1 | # Intro.
2 |
3 | 1. What makes React SPECIAL?:
4 | - its compositional model. (composition: combining simple functions together to create complex functions.)/ ( A good function should follow the "DOT" rule)
5 | - its declarative nature.(Not imperative) (you tell JS what you want to do and it takes care of the steps to do it itself).
6 | - the way data flows through a component.(unidirectional data flow => from parent to children and also data update occurs only in parent component).(Not 2 way data binding).
7 | - it is just JavaScript.
8 |
9 | --------
10 |
11 | - In React the process of deciding what to render is decoupled from actually rendering it.
12 | - This decoupling makes it possible to render stuff on:
13 | - native devices.
14 | - server.
15 | - VR environments.
16 |
17 | - We use ReactDom because we are working on the browser.
18 |
--------------------------------------------------------------------------------
/ServiceWorker/notes.md:
--------------------------------------------------------------------------------
1 | ```javascript
2 | self.skipWaiting()
3 | ```
4 |
5 | ```javascript
6 | reg.installing.postMessage({...});
7 | ```
8 |
9 | ```javascript
10 | self.addEventListener('message', function(event) {
11 | event.data;
12 | });
13 | ```
14 |
15 | ```javascript
16 | navigator.serviceWorker.addEventListener('controllerchange', function() {
17 | //fires when service worker changes.
18 | });
19 | ```
20 |
--------------------------------------------------------------------------------
/ServiceWorker/steps.md:
--------------------------------------------------------------------------------
1 | # Steps:
2 |
3 | ## Register a service worker:
4 |
5 | - In the main.js:
6 |
7 | ```javascript
8 | if (navigator.serviceWorker) {
9 | navigator.serviceWorker.register('/sw.js').then(function() {
10 | console.log('SW registered');
11 | });
12 | }
13 | ```
14 |
15 | - In this case you should have `sw.js` in the main directory. Here the scope of the service worker is the default scope (any thing in the same level or deeper than `sw.js` file level.
16 |
17 | - To hijack a request with a custom response:
18 |
19 | ```javascript
20 | //In sw.js file
21 |
22 | self.addEventListener('fetch', function(event) {
23 | event.respondWith(
24 | new Response('