├── .gitignore
├── 3.1 Accessibility.md
├── 3.2 Focus.md
├── 3.5 ARIA.md
├── 3.6 Style.md
├── 3.7 Objects in Depth JS.md
├── 4.1 Changing Expectations (MVO-model).md
├── 4.2 Refactoring with Separation of Concerns.md
├── 4.3 Creating Promises.md
├── 5.1 React-What is React.md
├── Bootstrap.md
├── BuildingWithReact.md
├── CSS.md
├── Cat Clicker README.md
├── Closure.md
├── Code-Notes-master.zip
├── Commenting Best Practices.md
├── Compiler vs Transpiler.md
├── DebugWebinar.md
├── Default Function Parameters.md
├── ES6 Built-ins.md
├── ES6 Course.md
├── ES6 Functions.md
├── ES6.md
├── Expressive Live Editing.md
├── Git CheatSheet.md
├── GitHubMarkdown.md
├── Google Challenge Scholarship part1 (HTML, CSS, JS, jQuery) .pdf
├── Gulp file.md
├── GulpTutorial.md
├── HTML elements.md
├── HTML5 Sectioning Elements.md
├── HTML5 canvas.md
├── How to prevent Disasters.md
├── Image Compression.md
├── Immediately Invoked Function Expression.md
├── Introducing Web Tooling and Automation.md
├── JS SourceMaps.md
├── Jasmine Testing.md
├── JavaScript Array.md
├── JavaScript DataTypes.md
├── JavaScript- Intro.md
├── JavaScript-DOM.md
├── LICENSE
├── MarkdownCheatSheet.md
├── Memory management.md
├── Navigating Content.md
├── Object Iteration.md
├── Object-oriented programming in JavaScript.md
├── Polyfills.md
├── Powerful Builds.md
├── Productive Editing.md
├── Project4Plan.md
├── README.md
├── React.md
├── Resilient CSS.md
├── Responsive Images.md
├── Rethinking Testing.md
├── Semantics Basics.md
├── Symbols.md
├── This.md
├── WeLoveOptimization.md
├── WebTooling and Automation Conclusion.md
├── Write README´s.md
├── Writing Test Suites.md
├── img
    ├── Async.png
    ├── CSS1.gif
    ├── document.readyState.jpg
    ├── future_of_js_2018_progress.pdf
    └── reacts-data-flow.png
├── index.html
└── meme-maker.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/3.1 Accessibility.md:
--------------------------------------------------------------------------------
 1 | # Accessibility- [A11y Overview](#1-a11y-overview)
 2 | _Source: Accesibility - Udacity Front End Web Development Nanodegree_
 3 | 
 4 | ### Table Of Contents:
 5 | ## 1. A11y Overview
 6 | __GOALS:__
 7 | - a. __Accessibility__: What is accessibility?
 8 | - b. __User experience:__ Explore diversity of user experience with web and apps.
 9 | - c. __Screen readers:__ How to use screen readers practically?
10 | - d. __Inclusive webexperiences:__ How to build webexperiences for all users?
11 | 
12 | ### a. __DEFINITION__: What is accessibility?
13 | - `Good accessibility`("a11y"):`_to ensure all users can access the content in web and apps_`.
14 | - Site _**content**_ needs to be `available` to everyone.
15 | - Site _**functionality**_ needs to be `operable` to everyone.
16 | __`Acessibility`__= to make sure "content" and "websites" created are `usable` to people with _various imparements or abilities._
17 | - __Note:__ 
18 | - `"a11y"` is a shorten word for `"accessibility"`(=there's 11 letters between the "A" and "Y" in the word "Accessibility"). 
19 | - `"i18n"`is a shorten word for `"internationalization"`.
20 | - `" l10n"`is a shorten word for `"localization"`.
21 | 
22 | ### b. __USER EXPERIENCE:__ _Explore diversity of user experience with web and apps_
23 | - Consider accessibility (`"a11y"`) from the start of your process, as it `affects all users`:
24 | 
25 | 1) __Users with `_disabilities_`:__ (issues due to `human disability`.) 
26 | - a. `Vision impairment`
27 |   - __vision disability:__ (_blind or have significant difficulty seeing even with glasses_)
28 |   - __refractive error:__ (_a visual impairment which may be corrected with glasses if mild enough_)
29 |   - __color vision deficiency:__(_difficulty to distinguish colors_)
30 | - b. `Hearing impairment`  
31 |   - __hearing disability:__(_deaf or have significant difficulty hearing even with hearing devices_)
32 | - c. `Cognitive impairment`
33 |   - __cognitive disability:__ (_difficulty remembering, concentrating, or making decisions_)
34 | - d. `Motor impairment`
35 |   - __physical disability:__ (_part of the body does not work optimal_)
36 | - __Note:__ These impairments can be `Temporary`, `Permanent`, or `Situational`.)  
37 | 
38 | 2) __Users `_without disabilities_`:__ (issues due to `bad design`) 
39 | - __unresponsive design__ 
40 | - __lack of__ `color contrast` 
41 | - __lack of__ `keyboard navigation`
42 | - __lack of__ `visual or sound alternative`
43 | - __lack of__ `zoom-in option`
44 | - __lack of__ `minimal design`(_to minimize distraction_)
45 | 
46 | #### Sources:
47 |   - [Disability Compendium](https://disabilitycompendium.org/)
48 |   - ["The Perception of Color"](https://www.ncbi.nlm.nih.gov/books/NBK11538/)
49 |   - ["Prevalence of Refractive Error in the United States, 1999-2004"](https://jamanetwork.com/journals/jamaophthalmology/fullarticle/420707)
50 | 
51 | ### c. SCREEN READERS/VIEWERS 
52 | A __Screen viewer__ = `software that allows blind people to hear the information displayed on a screen, via text-to-speach-syntiziser.`
53 | 
54 | - __How to use a Screenreader?__
55 | - Enable `ChromeVox Lite` via the "Enable ChromeVox Lite" button or press `TAB` once.
56 | - The controls for ChromeVox Lite will appear once it is enabled:
57 | - `"Voice"` drop-down: to choose alternate voices
58 | - `"Speech rate"` drop-down: to make speech faster or slower
59 | - `"Navigate"`buttons: to move ChromeVox's focus to non-focusable items on the page (e.g. Headers)
60 | - `"Volume control"`: to fine-tune ChromeVox's volume. 
61 | 
62 | #### Sources:
63 |   - **[Screen Reader example](http://udacity.github.io/ud891/lesson1-overview/06-experiencing-screen-reader/)**
64 |   - [Chromevox extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en)
65 |   - [Chromevox extension shortcuts](http://www.chromevox.com/keyboard_shortcuts.html)
66 | 
67 | ### d. Web Content Accessibility Guidelines: 
68 | _Web Content Accessibility Guidelines_ make your website and app 
69 | - __"POUR"__ (4 core principles):
70 | - `Percievable`: to make sure ALL users can "percieve" content. (_Is the content "visual, audio, text, keyboard, touch!- ready?_)
71 | - `Operable`: to make sure users can "work" with the content. (_Can users use your components and navigate the content?_) 
72 | - `Understandable`: to make sure users "understand" the content & the interface. (_Can users understand your content?_) 
73 | - `Robust`: to make sure ALL users (_Is the content "robust" enought be be consumed by a wide variety of ages?_)
74 | - __Note:__ Although the below guidelines are a great resource, what actually matters is `"the users experience"`.
75 | 
76 | #### Sources:
77 |   - [WCAG](https://www.w3.org/TR/WCAG20/) (_Web Content Accessibility Guidelines 2.0_)
78 |   - [Web Aim Checklist WCAG 2.0](https://webaim.org/standards/wcag/checklist): checklist to _`ensure web meet WCAG guidelines`_.
79 | 
80 | ## Cheatsheets
81 | - [ARIA Cheatsheet](https://codepen.io/matchboxhero/post/aria-cheatsheet)
82 | 
83 | #### Cources:
84 | - [Udacity Free course about Accessibility](https://eu.udacity.com/course/web-accessibility--ud891)
85 | - [Screen reader ChromeVox Google Chrome extension(https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn)
86 | 
87 | 
88 | 


--------------------------------------------------------------------------------
/3.2 Focus.md:
--------------------------------------------------------------------------------
  1 | # Accessibility- [FOCUS](#2-focus)
  2 | _Source: Accesibility - Udacity Front End Web Development Nanodegree_
  3 | 
  4 | ## 2. FOCUS
  5 | ### Table Of Contents:
  6 | - a. __FOCUS (MANAGEMENT):__ What is focus (management)? 
  7 | - b. __DOM ORDER__  
  8 | - c. __TABINDEX ATTRIBUTE__ 
  9 | - d. __SKIP LINKS__ 
 10 | - e. __MANAGE FOCUS__ 
 11 | - f. __KEYBOARD DESIGN PATTERNS__ 
 12 | - g. __OFF-SCREEN CONTENT__
 13 | - h. __MODALS & KEYBOARD TRAPS__
 14 | 
 15 | ### a. __DEFINITION__:  focus (management)
 16 | __FOCUS__= `the location on a page that receives input from the keyboard`. It shows _where keyboard events go in a page_.
 17 | - An __HTML user interface(UI)__ consists of _multiple interactive widgets_ (__input__, __buttons__ & __select__ elements), 
 18 | - Such as:`form controls`, `scrollable regions`, `links`, `dialog boxes`, `browser tabs`, that form a `hierarchy` of `automatic tab order + built-in keyboard event handling`. They are __implicitely focussable__.
 19 | - Yet, __NOT all elements are focussable__. Examples are `header`, `paragraphs`and `images`. 
 20 | 
 21 | __FOCUS MANAGEMENT__= Move focus around the page using your [keyboard](https://www.w3.org/TR/html5/editing.html#focus-management) to interact with the interface.
 22 | - __TAB ORDER__:  _key input_ is channeled from the system, through a hierarchy of interactive widgets, to the "active(= focused) widget:
 23 | - ```TAB```: move focus forward
 24 | - ```SHIFT  TAB```: move focus backwards
 25 | - ```Arrow keys```: to navigate inside a component
 26 | ```
 27 | Don't add focus to any content a user can Not interact with.
 28 | ```
 29 | #### Sources:
 30 | - [Focus Management](https://www.w3.org/TR/html5/editing.html#focus-management)
 31 | - Exception: [add focus to non-interactionable content](https://www.youtube.com/watch?time_continue=155&v=ifW_oy9hajU)
 32 | 
 33 | ### b. DOM ORDER
 34 | The DOM order matters for FOCUS MANAGEMENT: `element.tabIndex;`
 35 | ```
 36 | Tab order = same as DOM order, even if  `visual` order is changed (with CSS).
 37 | Changing the  `visual` order can cause confusion among `screen readers` and `keyboard users`, who depend on keyboard navigation. 
 38 | ```
 39 | - Work with native elements is good practice for __FOCUS behaviour__, because they are automatically be inserted into the __TAB ORDER__, based on their __DOM POSITION__.
 40 | ```
 41 | <button> I should </button>
 42 | <button> Be Focussed </button>
 43 | <button> Last! </button>
 44 | ```
 45 | - If Visual order is changed (with CSS), it can cause confusion:
 46 | ```
 47 | <button style= "float: right;"> 
 48 | I should </button>
 49 | <button> Be Focussed </button>
 50 | <button> Last! </button>
 51 | ```
 52 | - To prevent confusion, the __Reading__ and __navigation order__ (code order) SHOULD BE _logical_ and _intuïtive_.
 53 | 
 54 | #### Sources: 
 55 | - [WebAIM checklist items](http://webaim.org/standards/wcag/checklist#sc1.3.2)
 56 | 
 57 | ### c. TABINDEX ATTRIBUTE
 58 | - Control __FOCUS BEHAVIOUR__ with __TABINDEX ATTRIBUTE__: `element.tabIndex;` (_tabindex value of an element_)
 59 | - __NOTE:__ `ONLY NEEDED` for `Interactional elements` (__input__, __buttons__ & __select__ elements)
 60 | - These elements Must have __FOCUS__:
 61 |   - `Header links`
 62 |   - `Call to Action button`
 63 |   - `Search Input`
 64 |   - `Form Elements`
 65 |   - `Footer Links`
 66 | - __NOT__ needed for `non-interactional elements` (__HTML-tags__, such as: _headers, paragraphs or images_)
 67 | - These elements should __NOT have FOCUS__, instead use __SEMANTICS__:
 68 |   - `Header`
 69 |   - `Block of text (paragraph)`
 70 |   - `Image`
 71 |   
 72 | ##### 1) __tabindex = "-1"__
 73 | _ [.] __NOT__ in tab order.
 74 | - [.] focus programmatically by `focus()`
 75 | - [.] Used for __Off screen content, that appear in response to a user event()__ (ex. modals).
 76 | ```
 77 | HTML: <dialog id="modal" tabindex="-1"></dialog>
 78 | JS: document.querySelector(´#modal´).focus()
 79 | ```
 80 | ##### 2) __tabindex = "0"__
 81 | - [.] to insert __Unfocusable element__ in tab order.
 82 | - [.] focus programmatically by `focus()`
 83 | - [.] So, `keyboard events` get directed to it.
 84 | ```
 85 | HTML: <div id="dropdown" tabindex="0">Settings</div>
 86 | JS: document.querySelector(´#modal´).focus()
 87 | ```
 88 | ##### 3) __tabindex > 0__ 
 89 | - [.] Jump to the (__IN__) front of the tab order.
 90 | - [.] If multiple elements, `lowest value`= first (in tab order).
 91 | - [.] This practice is discouraged and seen as an __anti-pattern!__
 92 | 
 93 | - __NOTE__: never remove the `focus indicator` from an _interactive element_ unless you're going to replace it. 
 94 | - Otherwise a keyboard user might not know which element is focused!
 95 | 
 96 | #### Sources: 
 97 | - [tabindex on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)
 98 | - [focus navigation and tabindex attribute](https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute)
 99 | 
100 | ### d. SKIP LINKS
101 | - Allow `screen reader, keyboard, and switch devices users` to __navigate__ towards main pagecontent.
102 | - It bypasses all the following elements before the main content: `navigation bar`, `sublists`, `sitebars`, `hamburger menus`.
103 | - Skip links makes all links __hidden until focus().__
104 | ```
105 | <!--html code-->
106 | <a href="#main-content" class="skip-link">Skip to main content</a>
107 | <nav>
108 | .
109 | .
110 | .
111 | </nav>
112 | <main id="main-content" tabindex="-1">
113 | .
114 | .
115 | .
116 | </main>
117 | ```
118 | ```
119 | /*CSS code*/
120 | .skip-link {
121 |   position: absolute;
122 |   top: -40px;
123 |   left: 0;
124 |   background: red;
125 |   color: white;
126 |   padding: 8px;
127 |   z-index: 100;
128 |   }
129 | .skip-link:focus {
130 |   top: 0;
131 |   }
132 |   ```
133 | #### Sources: 
134 | - [skip links](https://webaim.org/techniques/skipnav/)
135 | - [Focus Start point](https://developers.google.com/web/updates/2016/03/focus-start-point?hl=en)
136 | - **[Alternate way to skip to main content.](https://webaim.org/techniques/skipnav/#headings)**
137 | 
138 | ### e. MANAGE FOCUS
139 | - To manage `Focus in Complex Components`, use the [WAI-Aria guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/).
140 | -  The __ARIA Authoring Practices__ ("_ARIA Design Patterns doc_") provides guidance in selecting which `keyboard interaction` is appropriate for complex component ("actions", such as `drop down menu`, `tree view component`. 
141 |  
142 | ### f. KEYBOARD DESIGN PATTERNS 
143 | - Use `keyboard design patterns` to implement __focus inside of a component__.
144 | - EXAMPLE: __Radio pattern__`Implement Keyboard Event Listeners`
145 | - Use __ROVING FOCUS__( `"roving tabindex"`) to make changes in: `radiogroup.js`file.
146 |  - __first radio button__: 
147 |  1. tabindex="0" 
148 |  2. checked 
149 |  3. focus()
150 | ```
151 | <li tabindex="0" checked> //set tab index to 0 on the currently active item
152 | <li tabindex="-1"> //set tab index to -1 for all children
153 | <li tabindex="-1">
154 | <li tabindex="-1">
155 | <li tabindex="-1">
156 | ```
157 | - The component uses a `keyboard event listener` to know which keyboard the user pressed.
158 | - to know on which component to set next tabindex to 0
159 | - when moving to the next element => first element: 
160 | 1. tabindex="-1" 
161 | 2. remove checked 
162 | 3. unfocus :: 
163 | ```
164 | <li tabindex="-1"> //change tabindex to -1, remove checked
165 | <li tabindex="0"> checked //add focus(), later remove focus() and add checked
166 | <li tabindex="-1">
167 | <li tabindex="-1">
168 | <li tabindex="-1">
169 | ```
170 | Next element: 1. tabindex="0" / 2. checked / 3. focus()
171 |   - If  __last__ element `tab` move to __first__ element.
172 |   - If  __first__ element `shift` + `tab` move to __last__ element.
173 | 
174 | #### Sources: 
175 | - [ARIA Authoring Best Practices 1.0 (Radio Button)](https://www.w3.org/TR/wai-aria-practices/#radiobutton)
176 | - [ARIA Authoring Best Practices 1.1 (Radio Group)](https://www.w3.org/TR/wai-aria-practices-1.1/#radiobutton)
177 | - [Example](https://www.w3.org/TR/wai-aria-practices-1.1/examples/radio/radio-1/radio-1.html)
178 | - [ARIA- Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
179 | - [Video](https://www.youtube.com/watch?v=uCIC2LNt0bk)
180 | 
181 | ### g. OFF-SCREEN CONTENT
182 | - A drawer panel can lead __focus__ to `visually disappear`. 
183 | - Overcome it by setting `display: none;` or `visibility: hidden;`
184 | 
185 | ####__How to check if `OFF-SCREEN CONTENT` is `ACCESSIBLE`?__
186 | 1) __Track focus:__ to find `missing focus`, type into console: `document.activeElement;`
187 |     - this gives a reference to the current focussed item
188 | 2) Use the __Chrome Accessibility Developer Tools Extension__ to quickly find __accessibility issues__ in your page:
189 |     - to add an `Accessibility Properties panel` to __Elements__ inspector
190 |     - to add an `Accessibility option` to __audits__ panel. 
191 | #### Sources: 
192 | - [document.activeElement](https://developer.mozilla.org/en-US/docs/Web/API/DocumentOrShadowRoot/activeElement)
193 | - [Chrome Accessibility Developer Tools Extension](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en)
194 | 
195 | ### h. KEYBOARD TRAP & MODAL
196 | -  __KEYBOARD TRAP:__ keyboard focus is `locked or trapped at one particular page element`. 
197 | - The user __CAN NOT__ `navigate` to and from all navigable page elements, using only a keyboard.
198 | - Prevent a `permanent keyboard trap`.
199 | 
200 | __EXCEPTION:__ use a `temporary keyboard trap` for a __MODAL__
201 | - Use __WebAim__ in `Modals` to _trap keyboard focus inside the modal_ until modal is closed.
202 | - It => return focus to `last focused element` before modal open.
203 | __HTML__:
204 | ```
205 | <button class="modal toggle"> Open Modal </button>
206 | 
207 | <div class="modal">
208 |   <h1> Join our newsletter </h1>
209 |   <p> short description about the newsletter & why to join? 
210 |   </p>
211 |   <div class="field">
212 |   <label for="fullname"> Full Name </label>
213 |   <input id="fullname" type= "text">
214 | </div>
215 |  <div class="field">
216 |   <label for="email"> E-mail address </label>
217 |   <input id="email" type= "text">
218 | </div>
219 | <button id="signup"> Sign me up!</button>
220 | </div>
221 | 
222 | <div class="modal overlay"></div>
223 | ```
224 | __JAVASCRIPT__:
225 | ```
226 | //hold previosly focussed element
227 | let focusedElementBeforeModal;
228 | 
229 | //find the modal and its overlay
230 | const modal document.querySelector(´modal´);
231 | const modalOverlay document.querySelector(´modalOverlay´);
232 | 
233 | //add EventListener "click" on ModalToggle to openModal
234 | let modalToggle document.querySelector(´modalToggle´);
235 | modalToggle.addEventListener(´click´, openModal);
236 | 
237 | //create function openModal
238 | function openModal(){
239 | //save current focus
240 | focusedElementBeforeModal= document.activeElement;
241 | 
242 | //Listen for and trap the keyword
243 | modal.addEventListener(´keydown´, trapTabKey);
244 | 
245 | //Listen to indicators to close the modal
246 | modalOverlay.addEventListener(´click´, closeModal);
247 | //Sign-up button
248 | let signupBtn.addEventListener(´click´, closeModal);
249 | 
250 | //Find all focusable children
251 | const focusableElementString = ´a[href], area[href],
252 | input:not([disabled]), select:not([disabled]),
253 | textarea:not([disabled]), button:not([disabled]), iframe, object,
254 | embed, [tabindex=´0´]), [contenteditable]´;
255 | 
256 | let focusableElements = 
257 | modal.querySelectorAll(´focusableElementString´);
258 | 
259 | //Convert Nodelist to Array
260 | focusableElements= Array.prototype.slice.call(focusableElements);
261 | 
262 | //Figure out first and last element in group of focusableElements
263 | let firstTabStop = focusableElements[0];
264 | let secondTabStop = focusableElements[focusableElements.length -1];
265 | 
266 | //Show the modal and overlay
267 | modal.style.display = ´block´;
268 | modalOverlay.style.display = ´block´;
269 | 
270 | //Focus firstTabStop
271 | firstTabStop.focus();
272 | 
273 | function TapKeyPress()
274 | //Check for TapKeyPress
275 | if (e.keyCode === 9) {
276 | 
277 | //shift + TAB
278 | if (e.shiftKey) {
279 | if document.activeElement=== firstTabStop) {
280 | e.preventDefault();
281 | lastTabStop.focus();
282 | }
283 | //TAB
284 | } else {
285 | if document.activeElement=== lastTabStop) {
286 | e.preventDefault();
287 | firstTabStop.focus();
288 |     }
289 |   }
290 | }
291 | 
292 | //Escape
293 | if (e.keyCode ===27) {
294 | closeModal();
295 |     }
296 |   }
297 | }
298 | 
299 | function closeModal(){
300 | //Hide the Modal and Overlay
301 | modal.style.display = ´none´;
302 | modalOverlay.style.display = ´none´;
303 |   
304 | //Set focus back to element before modalOpen
305 | focusedElementBeforeModal.focus();
306 | }
307 | ```
308 | #### Sources: 
309 | - [WebAIM checklist items](http://webaim.org/standards/wcag/checklist#sc2.1.2)
310 | - [dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
311 | - [Example](https://github.com/udacity/ud891/tree/gh-pages/lesson2-focus/07-modals-and-keyboard-traps)
312 | - [Slug](https://developer.mozilla.org/en-US/docs/Glossary/Slug)
313 | 


--------------------------------------------------------------------------------
/3.5 ARIA.md:
--------------------------------------------------------------------------------
  1 | # Accessibility- [ARIA](#5-aria)
  2 | _Source: Accesibility - Udacity Front End Web Development Nanodegree_
  3 | 
  4 | #### Goals:
  5 | - What is ARIA?
  6 | - How to modify the role attribute?
  7 | - How to use the ARIA spec to dive into the WAI-ARIA information for the attribute? 
  8 | - How to add specific information for a particular ARIA property?
  9 | - How to use ARIA extended labeling options (to provide screenreader only label string)?
 10 | - How ARIA can specify semantic relationships beyond the label? (Ex: `ARIA owns` to modify accesibility three)
 11 | - Examine the Default Semantics of Native HTML elements. Not all are override by ARIA.
 12 | - ARIA has a set of landmark and document structured roles to help users navigate and understand the page structure.
 13 | - How to hide things from Assistence Technology (`aria-hidden`)?
 14 | - How to show thinkgs only for Assistence Technology (`aria-hidden true`)?
 15 | - How to explore ARIA-live regions?
 16 | 
 17 | ### Table Of Contents: ARIA
 18 | - a. WAI-ARIA: ARIA DO´s and DONT´s
 19 | - b. Role
 20 | - c. ARIA labelling
 21 | - d. Landmarks and ARIA roles
 22 | - e. ARIA realtionships 
 23 | - f. Visible and Hidden content
 24 | - g. ARIA live
 25 | - h. ARIA relevant  (Atomic Relevant Busy)
 26 | 
 27 | #### Resources 
 28 | - [ARIA 1.0 spec](https://www.w3.org/TR/wai-aria/)
 29 | - [ARIA 1.1 spec](https://www.w3.org/TR/wai-aria-1.1/)
 30 | - [Example](http://udacity.github.io/ud891/lesson5-semantics-aria/02-why-aria/index.html)
 31 | 
 32 | ### a. ARIA DO´s and DONT´s:
 33 | - **WAI-ARIA**: `Web Accessibility Initiative` - `Accessible Rich Internet Application.`
 34 | - ARIA attributes need to have __explicit values__ (NO _"empty values"_).
 35 | 
 36 | #### ARIAS DO´s 
 37 |   - modify Accessibility tree.
 38 |   - give semantic meaning to non-semantic elements.
 39 |   - give new semantic meaning to native semantic element (role, name, elements).
 40 |   - __Example:__
 41 |   ```
 42 |   <button role="switch" aria-checked="true" class="toggle">
 43 |     Enable
 44 |   </button>
 45 |   ```
 46 |   -Express UI-patterns (not existing in HTML).
 47 |   Example: `tree widget`
 48 |   -Add labels (only accessible to assistive technology).
 49 |   -Provide semantic Relationship.
 50 |   -Provide live updates (aria-live).
 51 |   -[video](https://youtu.be/7vz1aakYHtw?t=50s).
 52 | 
 53 | #### ARIAS DONT´s 
 54 |   -  Modify element behaviour.
 55 |   -  Modify element appearance.
 56 |   -  Add focus.
 57 |   -  Add event handling.
 58 |   
 59 | ### b. Role 
 60 | - __Role__ = particular `UI pattern`.
 61 | -  The `role attribute`= in __same element as__ `tabindex attribute`.
 62 | ```
 63 | <div tabindex="0" role="checkbox" aria-checked="true" class="checkbox" checked>check me</div>
 64 | ```
 65 | #### Resources 
 66 |  - [ARIA 1.0 roles](https://www.w3.org/TR/wai-aria-1.0/#roles).
 67 |  - [ARIA 1.1 roles (draft)](https://www.w3.org/TR/wai-aria-1.1/#roles).
 68 |  - [ARIA 1.1 practices guide (draft)](https://www.w3.org/TR/wai-aria-practices-1.1/).
 69 | 
 70 | ### c. ARIA labelling
 71 | - **aria-label** _attribute_
 72 |   - Used for element with `visual appearance` only. 
 73 |   - Override other labelling (`<label>`) or text content (`button `) except **aria-labelledby** _attribute_.
 74 |   - Add click behaviour to `<label>` 
 75 |  
 76 | - **aria-labelledby** _attribute_
 77 |   - Overcome all other labelling methods.
 78 |   - Refers to another element (`label`), by using an id-value of labelling element.
 79 |   - More than one element id (`multiple labels`).
 80 |   - Refer to `hidden elements` for __assistive technologies__(`hidden`).
 81 |   - __NO__ click behaviour like `<label>` and `aria-label`.
 82 |   
 83 | #### Name the Elements
 84 | - Provides the label for the first (`outer`) element.
 85 | - To `hide` element from the accessibility tree, choose `"No label"`.
 86 | - `HTML labelling techniques`, `ARIA roles` and `ARIA attributes`, only work effective, if used correctly.
 87 | 
 88 | ### d. Landmarks and ARIA roles
 89 | - Landmarks are __NOT supported__ in _older Browser versions_. 
 90 | - Instead, use `role attribute`:
 91 | -Examples: 
 92 |   ```
 93 |   <header role="banner">
 94 |   <nav role="navigation">
 95 |   <main role="main">
 96 |   <aside role="complementary">
 97 |   <footer role="contentinfo">
 98 |   <dialog role="dialog">
 99 |   ```
100 | ### e. ARIA relationships  
101 | - **ARIA relationship attributes**
102 |   - Refer to one/more elements on a page (to make a link between them).
103 |   - The difference is: 1. _What does the link mean_.
104 |                        2. _How the link is represented to users_.       
105 | - __Attributes:__ 
106 |   - `aria-labelledby`
107 |   - `aria-describedby`
108 |   - `aria-owns`
109 |   - `aria-activedescendant`
110 |   - `aria-posinset`
111 |   - `aria-setsize`
112 | 
113 | #### Resources 
114 | - [Video ARIA Attributes](https://youtu.be/e1ZmfmnB6v8?t=40s).
115 | - [Collection of relationship attr](https://www.w3.org/TR/wai-aria-1.1/#attrs_relationships)
116 | 
117 | ### f. Visible and Hidden content
118 | - __Goal:__ finetune the user experience of users using assistive technology, to ensure that certain parts of the DOM is either: 
119 | - __Hidden:__
120 |   ```
121 |   <button style="visibility: hidden;">
122 |   <div style="display: none;">
123 |   <span hidden>
124 |   ```  
125 | Or
126 | - __Only visible to assistive tech:__
127 | `aria-hidden="true"`
128 | 1. element positioned absolute far off the screen. `position: absolute; left: -1000;`
129 | 2. `aria-label`
130 | 3. `aria-labelledby` or `aria-describedby` reference a hidden element.
131 | 
132 | ### g. ARIA live
133 | for in time alerts to user.
134 | - ARIA live has three important values:
135 | - `aria-live="off"(default)`: updates to region is not represented to user, unless assistence technology is currently focused to that region.  
136 | - `aria-live="polite"` : (background change) alert = important, not urgent.
137 | ```
138 | <div class="chat-history" arialive="polite">
139 | We are head of in...!
140 | </div>
141 | ```
142 | - `aria-live="assertive"`: alert = important & urgent.
143 | ```
144 | <div class="alertbar" arialive="assertive">
145 | Could not connect!
146 | </div>
147 | ```
148 | - __Include ARIA live attributes in initial Page load__
149 | - Try different type of changes to see what works on different platforms (screen readers).
150 | 
151 | #### Resources 
152 | - [Example ARIA Live](http://udacity.github.io/ud891/lesson5-semantics-aria/19-aria-live/)
153 | 
154 | ### h. ARIA relevant: (Atomic Relevant Busy)
155 | - The following __attributes__ work with `aria-live`:
156 | - They finetune _what is communicated to the user when the live region changes_:
157 | 
158 | #### 1) __ARIA-ATOMIC:__ true assistive tech presents the _entire region as a whole_.( `aria-atomic`)
159 | ```
160 | <span  aria-labelledby= "birthdayLbL" 
161 |        aria-live= "polite" 
162 |        aria-atomic= "true">
163 | <input type="number" id="day" value="18"> 
164 | <input type="number" id="month" value="10">
165 | <input type="number" id="year" value="1983">
166 | </span>
167 | ```        
168 | - __NOTE:__ Only need to be specified if __true__, if false= by default.
169 | 
170 | #### 2) __ARIA-RELEVANT:__indicates _type of changes needed to be presented_ to the user. ( `aria-relevant`)
171 |   - `aria-relevant="additions"` ==> _any element added to live region_ .
172 |   - `aria-relevant="text"` ==> _any text content added to any descendant element_.
173 |   - `aria-relevant="removals"` ==> _removal of any text/ element within the live region_.
174 |   - `aria-relevant="additions text"` _(default)_.
175 |   - `aria-relevant="all"` ==> _text additions or -removals_. (All is relevant)
176 | 
177 | #### 3) __ARIA-BUSY:__
178 |   - `aria-busy` ==> _temporarily ignore changes to the element_.
179 |   
180 | ARIA is to make the job as web developer easier and to include as many users as posible. 
181 | 
182 | Check this [ARIA CHEETSHEET](https://codepen.io/matchboxhero/post/aria-cheatsheet)
183 | 


--------------------------------------------------------------------------------
/3.6 Style.md:
--------------------------------------------------------------------------------
  1 | # Accessibility- [Style](#6-style)
  2 | _Source: Accesibility - Udacity Front End Web Development Nanodegree_
  3 | 
  4 | #### Goals 
  5 | - How frequently is this piece of User Interface (UI) used?
  6 | - How badly does this accessibility issue affect users?
  7 | - How expensive is going to be to fix the issue?
  8 | 
  9 | ### a. Working with focus styles
 10 | - The pseudo code `focus` only matchend when an element has __focus__:
 11 | ```
 12 | :focus {
 13 | //Use the "outline " property to change the appeareance of the focus ring
 14 | outline: 1 pc dotted #fff; 
 15 | }
 16 | ```
 17 | __NOTE__: This is a __MAJOR__ _anti-pattern_
 18 | - Without a focus indicator, a user does not know which keyboard element to interact with.
 19 | 
 20 | ```
 21 | :focus {
 22 | outline: 0; 
 23 | }
 24 | ```
 25 | Alternatives are:
 26 | 1) __Give your element the same hover focussed styles__
 27 | ```
 28 | button:hover,
 29 | button: focus {
 30 | background: #e91e63;
 31 | color: #fff;
 32 | text-decoration: underline;
 33 | }
 34 | ```
 35 | 2) __Use a specific focus pseudo class in CSS__ 
 36 | (to get a consistent indicator across browsers)
 37 | ```
 38 | button: focus {
 39 | outline: 0;
 40 | box-shadow: 0 0 8px 3 px;
 41 | rgba (255, 255, 255, 0.8);
 42 | }
 43 | ```
 44 | 3) Delete default focus indicator, use focus style
 45 | ```
 46 | .radio:focus {
 47 | outline: 0;
 48 | }
 49 | 
 50 | .radio:focus::before {
 51 | box-shadow: 0 o 1px 2 px #5b9dd9;
 52 | }
 53 | ```
 54 | - Leave the default focus ring in place.
 55 | - If you want to change, use the :focus pseudo class to create your own styled focus indicator.
 56 | - [Exercice](https://github.com/udacity/ud891)
 57 | 
 58 | #### Resources 
 59 | - [WebAim-2.4.7 checklist](https://webaim.org/standards/wcag/checklist#sc2.4.7).
 60 | - [:focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
 61 | - [outline](https://developer.mozilla.org/en-US/docs/Web/CSS/outline)
 62 | - [:hover-pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover)
 63 | - [::before-pseudo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/::before)
 64 | - [video- Styling for focus :focus pseudo selector](https://youtu.be/ZooEnrj8aMc).
 65 | 
 66 | ### b. Input Modality:
 67 | ```
 68 | <div class="btn"
 69 | role= "button"
 70 | tabindex="0">
 71 | Click me!
 72 | </div>
 73 | ```
 74 | #### Resources 
 75 | - [`:moz-focusring` pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring). __Only supported in Firefox!__
 76 | - [Proposing CSS input modality article](http://radar.oreilly.com/2015/08/proposing-css-input-modailty.html).
 77 | - [Input modality shim](https://github.com/alice/modality)(https://github.com/WICG/focus-visible).
 78 | - [video_ Styling native/non-native buttons](https://youtu.be/bfPGicTGBTI).
 79 | 
 80 | ### c. Styling with Aria
 81 | - Styling with ARIA ==> use ARIA attribute as an attribute selector. To set the aria state properly, so it is visually reflected.
 82 | - When building custom controls be sure to include tabindex so keyboard users can easily interact with the elements.
 83 | - A huge benefit to styling with ARIA: it provides visual feedback, which can act as a safeguard when testing and debugging code.
 84 | 
 85 |  - __HTML not toggled:__
 86 | ```
 87 | <div class="toggle"
 88 | role= "button"
 89 | aria-labelledby="muteLbl"
 90 | aria-pressed="false"
 91 | tabindex="0">
 92 | Mute
 93 | </div>
 94 | ```
 95 |  - __HTML toggled:__
 96 | ```
 97 | <div class="toggle pressed"
 98 | role= "button"
 99 | aria-labelledby="muteLbl"
100 | aria-pressed="true"
101 | tabindex="0">
102 | Mute
103 | </div>
104 | ```
105 |  - __CSS toggled:__
106 |  ```
107 | .toggle.pressed{
108 | // transition to
109 | // pressed state
110 | }
111 |  ```
112 |   - __CSS toggled- with aria attr:__
113 |  ```
114 | .toggle[aria-pressed= "true"]{
115 | // transition to
116 | // pressed state
117 | }
118 |  ```
119 |  #### Resources 
120 | - [CSS attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) 
121 | - [Exercise](https://github.com/udacity/ud891)
122 | 
123 | ### d. Responsive design for multiple-devices:
124 | - On older browsers (Mobile Safari) developers would add user-scaleable=no because it disables the 350ms click delay in that browser.  - As of Safari 9.1 this is no longer the case, and using `width=device-width` in your viewport will handle removing that click delay.
125 | - Meta viewport tag: `<meta name="viewport" content="width=device-width, initial-scale=1">`
126 | - In meta viewport tag: don't use `user-scalable=no` ==> prevent user from zooming the screen.
127 | - Use relative CSS units.
128 | - Use appropriate size touch targets:
129 |     - Minimum touch target size: 48 px.
130 |     - If touch target (`icons`) <48 px, add padding.
131 |     - To avoid overlapping, leave margin around touch target. Minimum 32px.
132 | 
133 | #### Resources 
134 |   - [WebAim](https://webaim.org/standards/wcag/checklist#sc1.4.4).
135 |   - [Udacity course on Responsive Web Design Fundamentals](https://eu.udacity.com/course/responsive-web-design-fundamentals--ud893)
136 |   - [Responsive web design basics on Web Fundamentals](https://developers.google.com/web/fundamentals/design-and-ux/responsive/#set-the-viewport)
137 |   - [Material Design Accessibility recommendations for touch targets](https://material.io/guidelines/usability/accessibility.html#accessibility-layout)
138 |  
139 | ### e. Mobile Screen Readers: 
140 | - [Exercise Mobile Screen Readers](http://udacity.github.io/ud891/lesson6-styling/04-mobile-screenreader/index.html)
141 | 
142 | ### f. Color & Contrast Requierements
143 | -  Don't convey info with color alone, as 1 of 20 men and 1 in 200 women suffer from some sort of color blindness.
144 | - Use `color` together with `text`, `underline`, `audio`, and `aria-live`.
145 | 
146 | - __Color Contrast:__ 
147 |    - Body text (less than 18.66px) ==> Contrast ratio minimum `4.5:1`
148 |    - Large Text (more than 18.66px) or (24px) ==> Contrast ratio minimum `3:1`  
149 | #### Resources 
150 |    - [WebAim 1.4.3 Minimum](https://webaim.org/standards/wcag/checklist#sc1.4.3).
151 | 
152 |  - __Color Contrast ratio:__ 
153 |    - Body text (less than 18.66px) ==> Contrast ratio minimum `7:1`
154 |    - Large Text (more than 18.66px) or (24px) ==> Contrast ratio minimum `4.5:1`  
155 |  #### Resources 
156 |    - [WebAim1.4.6 Enhanced](https://webaim.org/standards/wcag/checklist#sc1.4.6).
157 | 
158 |  - __Accessibility Audit:__ 
159 |    - Check contrast ratios/see recommendations/try Live at Dev tools 
160 |    - Experience color blindness vision, enhance use of color to convey info 
161 |    - Check how UI appear for high contrast users 
162 | #### Resources 
163 |   - [Exercise](https://github.com/udacity/ud891)
164 |     - [Chrome Accessibility Extension](https://chrome.google.com/webstore/detail/accessibility-developer-t/fpkknkljclfencbdbgkenhalefipecmb?hl=en)   
165 |     - [WebAim](https://webaim.org/standards/wcag/checklist#sc1.4.1).
166 |     - [Nocoffee chrome extension](https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl?hl=en-US). 
167 |     - [High Contrast chrome extension](https://chrome.google.com/webstore/detail/high-contrast/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=en)
168 |     - [Color Blindness](http://www.colourblindawareness.org/colour-blindness/)
169 | 


--------------------------------------------------------------------------------
/3.7 Objects in Depth JS.md:
--------------------------------------------------------------------------------
  1 | # JavaScript-[JS-OOP](Object-in-depth) :scream_cat: 
  2 | _Source: JS Object-in-depth JavaScript - Udacity Front End Web Development Nanodegree_
  3 | 
  4 | ### Table Of Contents:
  5 | Object-in-Depth JavaScript
  6 | - a. JavaScript object fundamentals
  7 | - b. Objects: Create, access, and modify objects.
  8 | - c. Firs-class functions (JavaScript functions = first-class functions)
  9 | - d. Abstactions (over traditional classes and inheritance.)
 10 |  
 11 | #### Goals:
 12 | - JavaScript object fundamentals
 13 | - Object 
 14 | - First-class functions
 15 | - JavaScript's abstractions 
 16 | 
 17 | ### Table Of Contents:
 18 | - a. JavaScript object fundamentals
 19 | - b. Objects: Create, access, and modify objects.
 20 | - c. Firs-class functions (JavaScript functions = first-class functions)
 21 | - d. Abstactions (over traditional classes and inheritance.)
 22 | 
 23 | 1. [Objects In Depth](#objects-in-depth).
 24 | 2. [Functions at runtime](#functions-at-runtime).
 25 | 3. [Classes and Objects](#classes-and-objects).
 26 | 
 27 | 
 28 | WORKING ON IT!!
 29 | 
 30 | 
 31 | ### a. JavaScript object fundamentals
 32 | In JavaScript, an `object`= an _unordered collection of properties._ 
 33 | Each property consists of a `key/value pair`, and can `refer`to:
 34 | 1) a __primitive__ 
 35 | - string
 36 | - number
 37 | - booleans
 38 | 
 39 | 2) another __object__. 
 40 | Unlike elements in an array[], which are accessed by a numeric index, 
 41 | properties in objects are accessed by their key name using either {}square bracket notation or . dot notation.
 42 | 
 43 | ### b. Objects in Depth
 44 | __Object Definition:__  a collection of associated unordered (opposite to arrays) key/value pairs. 
 45 | It is defined with curly brackets `{}`. 
 46 | Key/value pairs are called properties. 
 47 | They (key/value) is connected using colon `:` 
 48 | Properties separated from each other using comma `,` 
 49 | 
 50 | - Syntax: 
 51 | const course = { courseId: 711 }; 
 52 | const course = { 'courseId': 711 }; 
 53 | const course = { "courseId": 711 };
 54 | 
 55 | As you see the key string can be with or without quotes. 
 56 | Mostly without quotes but are essential in certain cases: 
 57 | - reserved word (e.g., for, if, let, true, etc.).
 58 | - Contains spaces or special characters that cannot appear in a variable name.
 59 | - Accessing object properties values:
 60 | 
 61 |   - Using `dot notation` : `course.courseId;`
 62 |   Limitations:
 63 |   1. When the key is a number.
 64 |   2. When the key is stored in a variable and we want to access this property by the variable.
 65 |   - Using `bracket notation` : `course['courseId'];`
 66 |   
 67 | - Accessing nested object properties values:
 68 | 
 69 | ```
 70 | const bicycle = {
 71 |   color: 'blue',
 72 |   type: 'mountain bike',
 73 |   wheels: {
 74 |     diameter: 18,
 75 |     width: 8
 76 |   }
 77 | };
 78 | 
 79 | bicycle.wheels.width;
 80 | ```
 81 | 
 82 | ### c. Firs-class functions (JavaScript functions = first-class functions)
 83 | ### d. Abstactions (over traditional classes and inheritance.)
 84 | 
 85 | #### Resources 
 86 | - [Further Research]()
 87 | - [Intro to JavaScript](https://eu.udacity.com/course/intro-to-javascript--ud803)
 88 | - [Unquoted property names / object keys in JavaScript](https://mathiasbynens.be/notes/javascript-properties)
 89 | - [Valid JavaScript variable names in ECMAScript 5](https://mathiasbynens.be/notes/javascript-identifiers)
 90 | - [Valid JavaScript variable names in ECMAScript 6](https://mathiasbynens.be/notes/javascript-identifiers-es6)
 91 | 
 92 | 
 93 | - How to read existing properties in an object? 
 94 | - How to modifying existing properties?
 95 | - How to add and remove properties?
 96 | 
 97 | 
 98 | ### Creating and modifying objects
 99 | - [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).
100 | - Create: 
101 | ```
102 | // Using literal notation:
103 | const myObject = {};
104 | 
105 | // Using the Object() constructor function (slower):
106 | const myObject = new Object();
107 | 
108 | //Using constructor function:
109 | function MyObjectConstructor() {
110 |   }
111 | const myObject = new MyObjectConstructor();
112 | ```
113 | 
114 | - Modifying object properties
115 | ```
116 | const cat = {
117 |   age: 2,
118 |   name: 'Bailey'
119 | }
120 | cat.age += 1;
121 | 
122 | cat.age;
123 | // 3
124 | 
125 | cat.name = 'Bambi';
126 | 
127 | cat.name;
128 | // 'Bambi'
129 | ```
130 | 
131 | - Adding Object properties
132 | ```
133 | const printer = {};
134 | 
135 | printer.on = true;
136 | printer.mode = 'black and white';
137 | printer.print = function () {
138 |   console.log('The printer is printing!');
139 | };
140 | ```
141 | 
142 | - Removing Object properties
143 | ```
144 | delete printer.mode;
145 | // true
146 | ```
147 | 
148 | - Since Objects are passed by reference, making changes to an original object make the same change to its copy
149 | ```
150 | const iceCreamOriginal = {
151 |   Andrew: 3,
152 |   Richard: 15
153 | };
154 | 
155 | const iceCreamCopy = iceCreamOriginal;
156 | 
157 | iceCreamCopy.Richard;
158 | // 15
159 | 
160 | iceCreamCopy.Richard = 99;
161 | 
162 | iceCreamCopy.Richard;
163 | // 99
164 | 
165 | iceCreamOriginal.Richard;
166 | // 99
167 | ```
168 | 
169 | - Comparing an Object with Another Object
170 | 
171 | ```
172 | const object1 = {
173 |   name: bird}
174 | const object2 = {
175 |   name: bird}
176 | object1 === object2;//false
177 | 
178 | const object = object1;
179 | object;//{name: bird}
180 | 
181 | object === object1;//true. Also any change in object1 will make the same change in object.
182 | object === object2;//false.
183 | ```
184 | ### Invoke object method
185 | - Invoke methods different ways:
186 | ```
187 | const developer = {
188 |   sayHello: function () {
189 |     console.log('Hi there!');
190 |   }
191 | };
192 | developer.sayHello();//Hi there!
193 | developer['sayHello']();//Hi there!
194 | ```
195 | - Pass arguments into methods:
196 | 
197 | ```
198 | const developer = {
199 |   name: 'Andrew',
200 |   favoriteLanguage: function (language) {
201 |     console.log(`My name is ${this.name} and my favorite programming language is ${language}.`);
202 |   }
203 | };
204 | 
205 | developer.favoriteLanguage('JavaScript');//My name is Andrew and my favorite programming language is JavaScript.
206 | ```
207 | - Naming properties functions (rather than using anonymous functions) is valid and is useful for debugging.
208 | 


--------------------------------------------------------------------------------
/4.1 Changing Expectations (MVO-model).md:
--------------------------------------------------------------------------------
 1 | # Changing Expectations- the MVO model
 2 | 
 3 | ### The MVO-modal consists of:
 4 | - __Modal__ (=DATA)
 5 | - __Octopus__ (=Functionality, Filtering)
 6 | - __View__ (=DOM)
 7 | 
 8 | 
 9 | ### Modal
10 | A `Modal` = code the __object + properties__ inside.
11 | 
12 | ### Octopus
13 | An `Octopus`= bind the `Modal` and `View`code together.
14 | In here you find the code logic (
15 | 1) functionality 
16 | 2) filtering of Modal code into View
17 | 
18 | ### View
19 | A `view`code = code the __object + methods__
20 | 
21 | __NOTE:__ The View code NEVER changes the Modal directly. All changes related to code functionality are made within the octopus.
22 | 
23 | This is to:
24 | 1) not mess up the code
25 | 2) leave actual data unchanged
26 | 3) in this way the modal gives the view only the code functionality it needs.
27 | 
28 | In short: The `octopus`code, is the __BINDER CODE__, to get the data from the Modal to the VIEW code.
29 | - Always separate Modal and View, and use the Octopus to connect the functionality and filtering of the Modal into the View Code Part.
30 | 


--------------------------------------------------------------------------------
/4.2 Refactoring with Separation of Concerns.md:
--------------------------------------------------------------------------------
 1 | # Refactoring Code with Separation of Concerns
 2 | Restructure your code and learn the best ways to improve its structure.
 3 | 
 4 | ## Ways to improve Spagetti Code
 5 | 
 6 | 1) __The Refactor in Place Method__ (= to improve existing code that looks _salvageable_).
 7 | 
 8 | 2) __The BurnIt Method__ (=start from scratch with new code).
 9 | 
10 | 
11 | ## Code Improvement
12 | - Create a TODO list 
13 | - Plan your method 
14 | 
15 | __NOTE:__ Although, web developers often use organizational frameworks for seperation of concerns. 
16 | - They are truly __NOT__ needed. It can be done with plain Vanilla JavaScript or jQuery.
17 | 


--------------------------------------------------------------------------------
/4.3 Creating Promises.md:
--------------------------------------------------------------------------------
  1 | # Callback, Promises & Async
  2 | 
  3 | __Callback__ = `the default JS technique for Asynchronous work`: 
  4 | - Passes a `function`() into another function 
  5 | - Calls the `call back`() function at some time later, when some conditions have been met.
  6 | - __EXAMPLE:__
  7 | ```
  8 | function loadImage(scr, parent, callback) {
  9 |  var img = document.createElement('img');
 10 |  img.src = src;
 11 |  img.onload = callback;
 12 |  parent.appendChild(img);
 13 | };
 14 | ```
 15 | - __NOTE:__ Althoug a `callback() function` works fine, it is not a solution for everything:
 16 | 
 17 | ## Callbacks vs Thens
 18 | Remaining questions are: __Any operation could fail at any time__
 19 | 
 20 | 1) __How to handle errors?__ 
 21 | - JavaScript error: `undefined is not a function`.
 22 | - Network error: `network request error`.
 23 | __NOTE:__ Althoug Node.js makes Async obligatory, but it is still the full responsibility of the coder to __define and implement a code error strategy__.
 24 | 
 25 | 2) __How to create a work sequence?__
 26 | 
 27 | - Instead of creating a function into another function into another callback function, - known as the __Paramid of DOOM__, 
 28 | - it is better to create a good work sequence.
 29 | - __EXAMPLE: Paramid of DOOM__
 30 | ```
 31 | loadImage('above-the-fold.jpg', imgContainer, function() {
 32 |   loadImage('just-below-the-fold.jpg', imgContainer2, function() {
 33 |    loadImage('further-down-fold.jpg', imgContainer3, function() {
 34 |     loadImage('this-is-ridiculous.jpg', imgContainer4, function() {
 35 |      loadImage('abstract-art.jpg', imgContainer5, function() {
 36 |       loadImage('egyptian-pyramids.jpg', imgContainer6, function() {
 37 |        loadImage('last-below-the-fold.jpg', imgContainer7, function() {
 38 |         })
 39 |        })
 40 |       })
 41 |      })
 42 |     })
 43 |    })
 44 |   })
 45 |  })
 46 | })
 47 | ```
 48 | # Promises 
 49 | - Now see the same kind of code written with Promises.
 50 | 
 51 | - __EXAMPLE: Promises__
 52 | ```
 53 | var sequence = get('example.json')
 54 |  .then(doSomething)
 55 |  .then(doSomethingElse);
 56 | ```
 57 | - This is so much easier!
 58 | 
 59 | __PROMISES Course Stages:__
 60 | 1. Wrapping stage= `the syntax of constructing promises`.
 61 | 2. Thening stage = `How to react to the resolution of a promise`: __ACTIONS__ TO TAKE.
 62 | 3. Catching stage = `If something breaks, catch the error`: __RECOVERY__ TO MAKE.
 63 | 4. Chaining stage =  `Create a long sequences of asynchronous work`: __ASYNC__ TO MAKE. 
 64 | 
 65 | __PROMISES States:__
 66 | 1. Fulfilled (Resolved). => The action related to `the promise succeeded`.  __RESOLVED__: It works.
 67 | 2. Rejected. => The action related to `the promise failed`.  __REJECTED__: It DOES NOT work.
 68 | 3. Pending. => Promise has `not yet fulfilled or rejected`.  __PENDING__: It is still waiting.
 69 | 4. Settled. => Promise has `either fulfilled or rejected`.  __SETTLED__: Something happened.
 70 | 
 71 | 
 72 | __EXAMPLE__: Promises
 73 | - First the Event fires
 74 | - Second set The Event listerer
 75 | ```
 76 | new Promise(function(resolve, reject) {
 77 |   resolve('hi'); // works
 78 |   resolve('bye');// can´t happen a second time
 79 | });
 80 | ```
 81 | __Promise resolves__
 82 | - First: Promise created
 83 | - Second: Promis settled
 84 | - Set action for resolution value = //on main thread and potentially "blocking"
 85 | Promise
 86 | ```
 87 | Try{
 88 | }.....{
 89 | ....
 90 | }
 91 | ```
 92 | ### Create first Promise
 93 | EXAMPLE: 1  Wrapping stage= `the syntax of constructing promises`.
 94 | ```
 95 | function wait(ms) {
 96 | /*Your code goes here!
 97 | Instructions:
 98 | (1) Wrap this setTimeout in a Promise. resolve() in setTimeout's callback.
 99 | (2) console.log(this) inside the Promise and observe the results.
100 | (3) Make sure wait returns the Promise too!
101 | */
102 | window.setTimeout(function() {}, ms);
103 | };
104 | /* Uncomment these lines when you want to test! You'll know you've done it right when the message on the page changes.*/
105 | // var milliseconds = 2000;
106 | // wait(milliseconds).then(finish);
107 | 
108 | // This is just here to help you test.
109 | function finish() {
110 | 	var completion = document.querySelector('.completion');
111 | 	completion.innerHTML = "Complete after " + milliseconds + "ms.";
112 | };
113 | ```
114 | ANSWER:
115 | ```
116 |  function wait(ms) {
117 |  	return new Promise(function(resolve) {
118 | 	console.log(this);
119 | 	window.setTimeout(function() {
120 | 	resolve();
121 | 	}, ms);
122 |     });
123 | };
124 | 
125 | 	var milliseconds = 2000;
126 | 	wait(milliseconds).then(finish);
127 | 
128 | 	function finish() {
129 | 	var completion = document.querySelector('.completion');
130 | 	completion.innerHTML = "Complete after " + milliseconds + "ms.";
131 | };	
132 | ```
133 | __NOTE:__ The Scope of this inside the promise is the `global object`.
134 | 
135 | ### __Async Scenarios: When to use Promises__
136 | When and where Promises are useful: 
137 | EXAMPLE 1: Promises = useful
138 | ```
139 | var data = get ('data.json');
140 | data.onload = fucntion (){
141 | analyze(this.responseText);
142 | };
143 | ```
144 | EXAMPLE 2: Promises = __NOT NEEDED__
145 | ```
146 | hugeArrayOfImages.forEach(function(i) {
147 |   makeSepia(i);
148 |   });
149 | ```
150 | EXAMPLE 3: Promises = __NOT NEEDED__
151 | ```
152 | data.forEach(function(d) {
153 |  var div = createDiv(d);
154 |  body.appendChild(div);
155 | });
156 | ```
157 | EXAMPLE 4: Promises = useful
158 | ```
159 | var worker = new Worker ('worker.js');
160 |  worker.postMessage/data);
161 |  worker.onmmessage = doSomething;
162 | ```
163 | - __EXAMPLE: Promises= UNDEFINED__
164 | ```
165 | new Promise(function(resolve) {
166 |   console.log('first');
167 |   resolve();
168 |   console.log('second');
169 | }).then(function() {
170 |   console.log('third');
171 | });
172 | ```
173 | Promise {<resolved>: undefined}
174 | 
175 | - You'll notice that `'first'`, `'second'` and `'third'` all get logged. 
176 | - `'second'` gets logged despite that it comes after `resolve()`.
177 | - Pass a value or `undefined` through `resolve()` and `reject()` to `.then` and `.catch.` 
178 | - The values aren't being passed to `.then` or `.catch`, but to __the functions called by__ `.then` or `.catch`.
179 | 
180 | ## Async/Await
181 |  ![Async](https://github.com/dianavile/Code-Notes/blob/master/img/Async.png)
182 | 
183 | __PROMISES Course Stages:__
184 | ## readyState()
185 | - __Thening stage__ = `How to react to the resolution of a promise`: __ACTIONS__ TO TAKE.
186 | The readyState() in the document can be `loading`, `interactive`, `complete`. 
187 |  ![readyState](https://github.com/dianavile/Code-Notes/blob/master/img/document.readyState.jpg)
188 | - [Network throttling](https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/network-conditions)to test.
189 | - More info [Google Dev Network Conditions](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#network-conditions)
190 | - MDN [document.readyState()](https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState)
191 | 
192 |  ``` 
193 |  switch (document.readyState) {
194 |   case "loading":
195 |     // The document is still loading.
196 |     break;
197 |   case "interactive":
198 |     // The document has finished loading. We can now access the DOM elements.
199 |     // But sub-resources such as images, stylesheets and frames are still loading.
200 |     var span = document.createElement("span");
201 |     span.textContent = "A <span> element.";
202 |     document.body.appendChild(span);
203 |     break;
204 |   case "complete":
205 |     // The page is fully loaded.
206 |     console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
207 |     break;
208 | }
209 |  ```
210 | ## TEST readyState()  
211 | ```
212 | function ready() {
213 | // Credit to Jake Archibald
214 | // https://github.com/jakearchibald/svgomg/blob/master/src/js/page/utils.js#L7
215 | return new Promise(function(resolve) {
216 | 	function checkState() {
217 | 	if (document.readyState !== 'loading') {
218 | 	resolve();
219 |    }
220 | }
221 | 	document.addEventListener('readystatechange', checkState);
222 | 	checkState();
223 |    });
224 | };
225 | 	ready().then(wrapperResolved);
226 | ```
227 | It checks the readyState() twice: 
228 | 1) when the readyState() event fires
229 | 2) immediately
230 | 
231 | ## Wrap an XML
232 | - __Catching stage__ = `If something breaks, catch the error`: __RECOVERY__ TO MAKE.
233 | ```
234 | function get(url) {
235 | return new Promise(function(resolve, reject) {
236 | 	function checkState() {
237 | 	var req = new XMLHttpRequest();
238 | 	req.open('GET?, url);
239 | 	req.onload = function() {
240 | 	if (req.status == 200) {
241 | 	resolve(req.response);
242 | 	} else {
243 | 	reject(Error(re.statusText));
244 | 	};
245 |       };
246 |       req.send();
247 |    });
248 |  });
249 |  
250 |  windows.addEventListehner(?WebComponentsReady?, function() {
251 |  home = document.querySelector('section-data-route="home"]');
252 |  
253 |  get('http://udacity.github.io/exoplanet-explorer/site/app/data/earth-like-results.json´)
254 |  .then(function(response) {
255 |    addSearchHeader(response);
256 |    })
257 |  .catch(function(error) {
258 |    addSearchHeader('unknown');
259 |    console.log(error);
260 |    	});
261 |     });
262 | }) (document);   
263 | ```
264 | 
265 | ## WebTechnologies
266 | __Chaining stage__ = `Create a long sequences of asynchronous work`: __ASYNC__ TO MAKE.
267 | In 2015 `jQuery Promises` are safe to use in every browser except for internet explorer and Operamini.
268 | - Include a `polyfill`or other `fallback`on your production site.
269 | - New APIs are taking advantage of  `promises` as well, like Service Worker API. They allow you to add a powerful control between your APP and the network. In this way you can make `APPS that work offline`.
270 | - the `FETCH API` uses native to simplify `XML HTTP query requests`.
271 | 
272 | ### Summary
273 | - Create Promises
274 | - Change Promises: create a `Get() function`, use `.Then` to do _something_ with the retrieved data. 
275 | - Include `Catches` to ensure proper error handling.
276 | - With the Promis API `.Then` __also returns promises__.
277 | - You can .then after 1) an `initial promise`, and .then after 2) `.then`.
278 | - Developers use the term `thenable`to describe `promises` & `.then`´s.
279 | - Any object that returns `.then` = __thenable__.
280 | - Anything __thenable__ can become part of a chain of `asynchronous work`.
281 | - Promises are  __thenable__ as `.then` and `.catches`.
282 | - All the JS Libraries include __thenable__ objects.
283 | - When creating a `chain` of  `asynchronous work`, each subsequent link in the chain receives:
284 | 1) the __fulfilled__ value of the __previous promise__ OR
285 | 2) the __return__ value of the __previous .then() function__ .
286 | - In this way, you can collect work from one asynchronous method to the next.
287 | - Being able to change __thenable´s__ is a powerful technique to __simplify complex sequences of asynchronous work__.
288 | 
289 | #### Resources Callback, Promises & Async:
290 | - [Getting to know asynchronous JavaScript: Callbacks, Promises and Async/Await](https://medium.com/codebuddies/getting-to-know-asynchronous-javascript-callbacks-promises-and-async-await-17e0673281ee)
291 | - [JavaScript Promises](https://davidwalsh.name/promises)
292 | - [Google Developers- JavaScript Promises: an Introduction](https://developers.google.com/web/fundamentals/primers/promises)
293 | - [JavaScript Promises for Dummies](https://scotch.io/tutorials/javascript-promises-for-dummies)
294 | - [Asynchronous vs synchronous execution, what does it really mean?](https://stackoverflow.com/questions/748175/asynchronous-vs-synchronous-execution-what-does-it-really-mean)
295 | - [The Future of JavaScript](https://github.com/dianavile/Code-Notes/blob/master/img/future_of_js_2018_progress.pdf)
296 | - [Asynchronous JavaScript #1 - What is Asynchronous JavaScript?](https://www.youtube.com/watch?v=YxWMxJONp7E&list=PL4cUxeGkcC9jAhrjtZ9U93UMIhnCc44MH)
297 | 
298 | #### Resources Web Technologies:
299 | - [Issues with jQuery Promises: 10 June 2016 update! With the 3.0 release, jQuery promises now satisfy Promises/A+ compliance!](https://blog.jquery.com/2016/06/09/jquery-3-0-final-released/)
300 | - [You're Missing the Point of Promises - Domenic Denicola (Pre-jQuery 3.0)](https://blog.domenic.me/youre-missing-the-point-of-promises/)
301 | - [jQuery Deferred Broken - Valerio Gheri (Pre-jQuery 3.0)](https://thewayofcode.wordpress.com/tag/jquery-deferred-broken/)
302 | - __Q Style Promises__
303 | - They're an implementation of the [Promises/A+ spec.](https://promisesaplus.com/)
304 | - [$q service Documentation](https://docs.angularjs.org/api/ng/service/$q)
305 | - __Browser Implementation__
306 | - [Can I Use... - Promises](https://caniuse.com/#search=promises)
307 | - [ES2015 Promises Polyfill](https://github.com/stefanpenner/es6-promise)
308 | - [Q Library](https://github.com/kriskowal/q)
309 | - [Bluebird Promises](https://github.com/stefanpenner/es6-promise)
310 | - __APIs that Use Promises()__
311 | - [Service Worker API](https://developers.google.com/web/fundamentals/primers/service-workers/)
312 | - [Fetch API](https://davidwalsh.name/fetch)
313 | - [Fetch API Walkthrough](https://davidwalsh.name/fetch)
314 | - ["Thenable" used in context of promises on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise#Methods)
315 | 


--------------------------------------------------------------------------------
/Bootstrap.md:
--------------------------------------------------------------------------------
  1 | # **Responsive Images**
  2 | 
  3 | A course by [Udacity](https://classroom.udacity.com/courses/ud882).
  4 | 
  5 | ----------------------------------------------------------------------------------------------
  6 | 
  7 | ## **Introduction**
  8 | 
  9 | - More than 60% of Bytes per page is # **Bootstrap**
 10 | --------------------------------------------------------
 11 | 
 12 | ## :point_right: **div classes**
 13 | 
 14 | 1. `container-fluid`
 15 | 2. `row`
 16 | 3. `col-xs-*`
 17 | 4. `col-sm-*`
 18 | 5. `col-md-*`
 19 | 6. `col-lg-*`
 20 | 7. `container`
 21 | 
 22 | :musical_note: The Bootstrap grid system has four classes:
 23 | - xs (for phones - screens < 768px wide)
 24 | - sm (for tablets - screens => 768px wide)
 25 | - md (for small laptops - screens => 992px wide)
 26 | - lg (for laptops and desktops - screens=> 1200px wide)
 27 | 
 28 | 8. `well`
 29 | -------------------------------------------------------
 30 | ## :point_right: **img classes**
 31 | 
 32 | 
 33 | 1. `img-responsive`
 34 | ------------------------------------------------------
 35 | ## :point_right: **text classes**
 36 | 
 37 | 1. `text-center`
 38 | 2. `text-danger`
 39 | 3. `h1` to `h6`
 40 | 4. `text-muted`
 41 | 5. `display-1` to `display-4`
 42 | 6. `lead`
 43 | 7. `blockquote`
 44 | 8. `blockquote-reverse`
 45 | 9. `blockquote-footer`
 46 | -----------------------------------------------------
 47 | ## :point_right: **button classes**
 48 | 
 49 | 1. `btn`
 50 | 2. `btn-block`
 51 | 3. `btn-primary`
 52 | 4. `btn-info`
 53 | 5. `btn-danger`
 54 | 6. `btn-default`
 55 | ---------------------------------------------------
 56 | ## :point_right: **input type: text**
 57 | 
 58 | 1. `form-control`
 59 | `images.
 60 | 
 61 | <figure>
 62 | <img src="http://chart.googleapis.com/chart?chs=400x225&cht=p&chco=007099&chd=t:1556,47,77,386,86,175,10&chds=0,1556&chdlp=b&chdl=total%202350%20kB&chl=Images+-+1556+kB%7CHTML+-+47+kB%7CStylesheets+-+77+kB%7CScripts+-+386+kB%7CFonts+-+86+kB%7CVideo+-+175+kB%7COther+-+10+kB&chma=|5&chtt=Average+Bytes+per+Page+by+Content+Type">
 63 |   <figcaption>
 64 |     Average Bytes Per Page Per Content Type. A diagram from <a href="http://httparchive.org">http://httparchive.org</a>.
 65 |   </figcaption>
 66 | <figure>
 67 | 
 68 | 
 69 | ## **Bits & Pixels**
 70 | 
 71 | #### bits = pixels * bits per pixel (bpp)
 72 | 
 73 | 
 74 | ## **Relative Sizing**
 75 | 
 76 | - **Fixed image size in for example pixels would create Unresposive image that will not resize.**
 77 | - **If you make `width : 100%;` It will resize as broswer resize but it will lead to pixelation of the image when it resizes to larger of its natural width.**
 78 | - **But if you make `max-width: 100%` It will resize to a maximum width of its natural width only and will not pixelate.**
 79 | - **If you want 2 images to fit side by side you can change to `max-width: 50%;`.**
 80 | 
 81 | ## **Quiz: calc()**
 82 | 
 83 | - **Using `Calc` is very important when we want the size (width for example) to take the remaining area after a fixed area is taken (for a maring for example).**
 84 | 
 85 | **_This is a [quiz](https://classroom.udacity.com/courses/ud882/lessons/3520939843/concepts/37391188270923)._**
 86 | 
 87 | ## **vh vw vmin vmax CSS Units**
 88 | 
 89 | - **vh: viewport height   vw: viewport width.  vmin: viewport minimum   vmax: viewport maximum.**
 90 | 
 91 | - **You can set the height of an image to 100% but this only works if the html and body elements are set to 100%.**
 92 | 
 93 | - **Alternatively, you can set **
 94 | ```
 95 | width: 100vw;
 96 | height: 100vh;
 97 | ```
 98 | **
 99 | 
100 | - **Take care of the aspect ratio in this case if you want to keep it.**
101 | 
102 | - **It is better to view vmin and vmax with examples to understand.**
103 | 
104 | ## **Raster vs Vector**
105 | 
106 | ### **Raster images**
107 | 
108 |    - **is a grid of individual dots of color.**
109 |      
110 |    - **Source:**
111 |      
112 |       - Camera.
113 |       - Scanner.
114 |       - HTML canvas.
115 |         
116 |    - **Example:** photographs.
117 |    
118 |    
119 |    
120 | ### **Vector images**
121 |  
122 |    - **is a set of curves, lines, shapes, fill colors, and gradients.**
123 |        
124 |    - **Source:**
125 |       - Adobe Illustrator.
126 |       - Inkscape.
127 |       - Using a vector format such as SVG.
128 |    - **Examples:** Logos, Line art.
129 |        
130 |    - **Browser can render vector images at any size.**
131 |        
132 | ## **General Rules:**
133 | 
134 | 1. Use JPEG for Photographs.
135 | 2. Use  WebP for Photographs(better than JPEG) (supported by chrome).
136 | 3. Use SVG for vector images, solid color graphics, logos, line art.
137 | 4. Use PNG for the same as above if you can't use SVG.
138 | 
139 | ### Some useful links:
140 | - [Image Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization).
141 | 
142 | - [About WebP](https://developers.google.com/speed/webp/?csw=1).
143 | 
144 | ####  **IMPORTANT :heavy_exclamation_mark: [Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/)**
145 | 
146 | 
147 | ## **Performance**
148 | 
149 | ### **Latency:** is the delay between request & response.
150 | 
151 | - **The latency affects Page loading times more than bandwidth.**
152 | 
153 | - **So to increase performance you need to _compress  images_ and _decrease the no of requests_.**
154 | 
155 | - **It is better to use text overlaying an image than to use a text as an image.**
156 | 
157 | 
158 | ## **Background images**
159 | 
160 | - **background-size: _cover_ or _contain_**
161 | - **Background images are responsive.**
162 | 
163 | ## **Symbol characters**
164 | 
165 | - **You can write symbols instead of images by using unicode.**
166 | - **They are more than 110000 characters.**
167 | - **They are responsive.**
168 | 
169 | 
170 | ## **Icon Fonts**
171 | 
172 | - **They are treated as text.**
173 | - **Scalable (responsive) as it is a vector without a decrease in quality with minimum downloads (less requests). Indeed only one request**
174 | 
175 | - **You can style it easily using CSS like shadow, size, color, etc. And you also add it by CSS clases.**
176 | 
177 | - **They are lots of them.**
178 | 
179 | - **Examples: 
180 | 
181 |     - **[Font Awesome](https://fontawesome.com/).**
182 |     - **[Zocial](http://zocial.smcllns.com/).**
183 | 
184 | 
185 | ## **SVG & Data Uri**
186 | 
187 | - **Maximum scalability.**
188 | 
189 | - **Very low size.**
190 | 
191 | - **Can be implemented using HTML, OR CSS.**
192 | 
193 | 
194 | ## **Accessibility**
195 | 
196 | - **Some advices for using alt attribute with img element:**
197 | 
198 |     - `alt` attributes should be set on every image.
199 |     - `alt` attributes should be descriptive for important images.
200 |     - `alt` attributes should be empty for images that are just decorations.\
201 |     
202 | - **ChromeVox is a free screen reader.**    


--------------------------------------------------------------------------------
/BuildingWithReact.md:
--------------------------------------------------------------------------------
  1 | # Building with React
  2 | 
  3 | ## 1. Why React?
  4 | Why `React` is so popular at the moment?
  5 | 
  6 | - 1) __Composition__: it combines easy functions to create complex functions.
  7 | 
  8 | - 2) __Declarative__ (Not imperative): you tell JS what you want to do. 
  9 | It takes care of the steps itself, without you worrying about it.
 10 | 
 11 | - 3) __Unidirectional data flow__
 12 | The data flows through a component in one direction only (Not 2 way data binding).
 13 | => from parent to children 
 14 | __NOTE:__ the data update ONLY occurs in parent component.
 15 | 
 16 | - 4) React is __just JavaScript__.
 17 | 
 18 | ### Virtual DOM 
 19 | The `Virtual DOM`=  a tree in which each node is an HTML element. 
 20 | - React is able to traverse and carry out operations on this Virtual DOM, 
 21 | - saving our app from having "costly" activity on the actual DOM.
 22 | [Virtual DOM](https://reactjs.org/docs/optimizing-performance.html#avoid-reconciliation) 
 23 | 
 24 | ### Diffing Algorithm
 25 | `Diffing`= to make efficient changes to the DOM. 
 26 | - With diffing, old DOM nodes are taken out and replaced only when necessary. 
 27 | - This way, our app doesn't perform any unnecessary operations to figure out when to render content.
 28 | [Diffing Algorithm](https://reactjs.org/docs/reconciliation.html#the-diffing-algorithm)
 29 | 
 30 | ## 2. React Rendering
 31 | Normally, when you code, the render process will both 
 32 | "Decide what data to render" &  "Render the data" at the same time.
 33 | 
 34 | In React this process is decoupled:
 35 | Render component onto root div
 36 | ReactDOM takes 2 arguments:
 37 | 
 38 | - 1) What data to render (=React component)
 39 | - 2) Where to render the data (=DOM element)
 40 | NOTE: ReactDom is used, because we work in the browser.
 41 | 
 42 | This makes it possible to RENDER on:
 43 |   - native devices.
 44 |   - server.
 45 |   - VR environments.
 46 | 
 47 | ## CREATE A REACT COMPONENT
 48 | EXAMPLE - index.html
 49 | ```
 50 | 
 51 | <!DOCTYPE html>
 52 | <html>
 53 |   <head>
 54 |     <meta charset="UTF-8" />
 55 |     <title>Add React in One Minute</title>
 56 |   </head>
 57 |   <body>
 58 | 
 59 |     <h2>Add React in One Minute</h2>
 60 |     <p>This page demonstrates using React with no build tooling.</p>
 61 |     <p>React is loaded as a script tag.</p>
 62 | 
 63 |     <!-- We will put our React component inside this div. -->
 64 |     <div id="like_button_container"></div>
 65 | 
 66 |     <!-- Load React. -->
 67 |     <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
 68 |     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 69 |     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 70 | 
 71 |     <!-- Load our React component. -->
 72 |     <script src="like_button.js"></script>
 73 | 
 74 |   </body>
 75 | </html>
 76 | 
 77 | ```
 78 | EXAMPLE - like_button.js
 79 | ```
 80 | 'use strict';
 81 | 
 82 | const e = React.createElement;
 83 | 
 84 | class LikeButton extends React.Component {
 85 |   constructor(props) {
 86 |     super(props);
 87 |     this.state = { liked: false };
 88 |   }
 89 | 
 90 |   render() {
 91 |     if (this.state.liked) {
 92 |       return 'You liked this.';
 93 |     }
 94 | 
 95 |     return e(
 96 |       'button',
 97 |       { onClick: () => this.setState({ liked: true }) },
 98 |       'Like'
 99 |     );
100 |   }
101 | }
102 | 
103 | const domContainer = document.querySelector('#like_button_container');
104 | ReactDOM.render(e(LikeButton), domContainer);
105 | ```
106 | 
107 | ## RESOURCES: Install React
108 | There are three ways to install REACT:
109 | 1) REACT COMPONENT (see above)
110 | [REACT COMPONENTS-Add React to a website](https://reactjs.org/docs/add-react-to-a-website.html#try-react)
111 | 2) REACT WITH JSX (BABEL NEEDED)
112 | [New App](https://reactjs.org/docs/add-react-to-a-new-app.html)
113 | [Existing App](https://reactjs.org/docs/add-react-to-an-existing-app.html)
114 | 3) REACT WITHOUT JSX (__NO__BABEL NEEDED)
115 | [REACT withouth jsx](https://reactjs.org/docs/react-without-jsx.html)
116 | [REACT cdn links](https://reactjs.org/docs/cdn-links.html)
117 | 
118 | 
119 | 
120 | 


--------------------------------------------------------------------------------
/CSS.md:
--------------------------------------------------------------------------------
 1 | # CSS Guide
 2 | ![Spacing](https://github.com/dianavile/Code-Notes/blob/master/img/CSS1.gif)
 3 | 
 4 | ## Naming elements
 5 | - [Get BEM](http://getbem.com/naming/)
 6 | - [Semantic HTML & CSS](https://internetingishard.com/html-and-css/semantic-html/)
 7 | 
 8 | ## **Overriding in CSS** 
 9 | - **Overriding in a _descending_ order**
10 | **!important** (_override all_) > **Inline Style** > **id** > **Subsequent Selector**
11 | - **Basically, the closer the style rule is to an element, the more specific it is. **
12 | 
13 | 
14 | 


--------------------------------------------------------------------------------
/Cat Clicker README.md:
--------------------------------------------------------------------------------
1 | # Cat Clicker Premium Vanilla
2 | 
3 | Here's Ben's solution for Cat Clicker Premium from [Udacity's Javascript Design Patterns course](https://www.udacity.com/course/javascript-design-patterns--ud989).
4 | 
5 | Clone the repo and open up `index.html` in your browser of choice.
6 | 


--------------------------------------------------------------------------------
/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 | ### Definition: 
11 |   - Closure = 
12 | `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 | ```


--------------------------------------------------------------------------------
/Code-Notes-master.zip:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dianavile/Code-Notes/d05d9823e1a7891a44efb29d4eb93107c38def6e/Code-Notes-master.zip


--------------------------------------------------------------------------------
/Commenting Best Practices.md:
--------------------------------------------------------------------------------
 1 | # Commenting Best 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 | ```


--------------------------------------------------------------------------------
/Compiler vs Transpiler.md:
--------------------------------------------------------------------------------
 1 | # Compiler vs Transpiler
 2 | 
 3 | - ## Compiler:
 4 |   - Source Code (Human readable code) ===> 
 5 |   - **_Compiler_** ===> target code (machine runnable code) (=lower level code language).
 6 |   - Compiler changes the code language level of "**abstraction**".
 7 |   
 8 |   
 9 | - ## Transpiler:
10 |   - Source Code ===> 
11 |   - **Transpiler** ===> target code (same level code lnguage).
12 |   - Transpiler does _NOT_ change code language level of "**abstraction**"
13 | 
14 |   - Example: 
15 |   Transpilers (ex.[Babel](https://babeljs.io/)) to convert ES6 to ES5 code (=to run on older browsers that don't support ES6).
16 | 


--------------------------------------------------------------------------------
/DebugWebinar.md:
--------------------------------------------------------------------------------
 1 | # Everything you need to know about _Front End problem-solving & debugging skills_ by Cameron Pittman from [Udacity.com](http://www.Udacity.com)
 2 | Check the video [here](https://youtu.be/vftSDWcA6to).
 3 | 
 4 | Source: __Code Notes__ thanks to [Thijs Waalders](https://github.com/ThijsWaalders)
 5 | 
 6 | ## Debugging [Front End] - Tips, Tricks and Advice
 7 | A lot of tips can also be used for other development (that's why there are these [brackets].
 8 | 
 9 | ## Truths of Debugging Any Application
10 | 1. **DON'T PANIC**
11 | 2. Try to relax
12 | 3. Try to focus
13 | 4. As found on https://goo.gl/qZr2bE
14 | 5. You're a scientist collecting evidence and hypothesizing
15 | 6. TEST ONE CHANGE AT A TIME (think control groups) **You only make one change at a time and then you test it before you go too the next change**
16 | 7. Simple explanations > complex explanations: Don't think too complicated right away. First you should check all small things like typo's, missing semicolons, brackets on the wrong place, (traling white spaces). Second you should check for bigger issues. Most of the time there is a simple explanation.
17 | 8. Examine values and control flow: Is a string really a string? It maybe an array or a number. (there is code to check this out). Also check you control flow (if, else, for, functions, etc.) _because control flow can influence/change values_.
18 | 9. Test every assumption and belief: Be 100% sure something is working. Don't assume it is working.
19 | 10. Search for key, unique phrases in any errors that pop up - Always search and ask after that for errors _especially unique phrases_.
20 | 
21 | ## Better debugger options:
22 | 1. Trying the same thing over and over again, if you run code and you get a result, if you run the exect same code without any changes, you won't get any other results (normally). Don't run you code again if it works, try to learn why it works (or doesn't). _Go through the steps above_.
23 | 2. When testing control flow and I don't have the option for a good debugger, just keep it super simple, throw 1 `console.log` and move it to the next (_Don't keep it there_).
24 | 3. In any JavaScript code you can throw the word debugger so it will pauze/executing (in dev tools) that code on that line and you'll be given the sources panel/tab Wich will let you inspect the variables and call stack at that point (this way you can learn better how and why).
25 | 4. Use VScode + extensions! They are the best way for easy fast and simple workflow.
26 | 5. When you're totally stuck.. ([at +/-22 min](https://www.youtube.com/watch?v=vftSDWcA6to&feature=youtu.be))
27 |     - Take a break! Sleep on it!
28 |     - Talk it out. In detail, explain to someone why the bug might be X or why it couldn't possibly be Y.
29 |     - Work forwards and backwards - ensure the control flow before and after where your bug might be is working correctly.
30 |     - If you really don't know where the bug lives, maybe delete large swaths of code or maybe files (one at a time!) or run the code.
31 | 6.  - Remember, this is a learning experience. Get excited! You're about to learn something new!
32 |     - Make the bug worthwhile - learn from the mistake you or someone else has made and take action to make sure this same bug doesn't occur again the next time.
33 | 
34 | 
35 | ## Extra tips from live questions:
36 | 1. Tips for debugging other peoples codes:
37 |     - Code that you write a while ago and forgotten about is a also someone elses code.
38 |     - CTRL + F a ```function``` (in VScode) to search for that function to find it somewhere else or find the definition.
39 | 2. Don't comment a lot, only if it is really nessecarely. (So don't if this is that and if that is this then do that..)
40 | 3. How should I write unit tests for my code?
41 |     - Unit tests: (and this an awnser for a lot of questions) **_"There is no wrong or right approach, there are a lot of different mindsets."_** Any kind of unit test is better then no unit test. Don't wait until you need to test!
42 |     The trick there _**if you wan't to make your life easier then setting up your test is the first thing you should do when you start a project!**_
43 | 
44 | 
45 |     ended at 30 minutes https://www.youtube.com/watch?v=vftSDWcA6to&feature=youtu.beg
46 | 


--------------------------------------------------------------------------------
/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('Diana', 'Hi');//Hi Diana
 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 Diana
20 | sayHi('Monica', 'Hello');//Hello Monica
21 | ```
22 | 
23 | So you can write this instead:
24 | ```
25 | function sayHi (name = 'Diana', greeting = 'Hi') {
26 |   return `${greeting} ${name}`;}
27 |   
28 | sayHi();// Hi Diana
29 | sayHi('Monica', 'Hello');//Hello Monica
30 | ```
31 | 
32 | This is `default function parameters`= __Assigning a default values for function parameters__ in case __no values are assigned__ when invoking the function. 
33 | 


--------------------------------------------------------------------------------
/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 | 
10 | # symbols: 
11 | - A new JS primitive data type.(number, string, boolean, null, undefined, symbol)
12 | - is "unique, and immutable data type that is used to identify object properties".
13 | - created by invoking Symbol() function.
14 | - Symbol('description') function can have an optional string description that is used for _debugging_.
15 | - 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.
16 | - syntax:
17 |   ```javascript
18 |   
19 |   const bowl = {
20 |   [Symbol('apple')]: { color: 'red', weight: 136.078 },
21 |   [Symbol('banana')]: { color: 'yellow', weight: 183.15 },
22 |   [Symbol('orange')]: { color: 'orange', weight: 170.097 },
23 |   [Symbol('banana')]: { color: 'yellow', weight: 176.845 }
24 |   };
25 |   console.log(bowl);//{Symbol(apple): {…}, Symbol(banana): {…}, Symbol(orange): {…}, Symbol(banana): {…}}
26 |   
27 |   # Object Iteration
28 | 
29 | ### Table of Contents:
30 | 
31 | 1. [Description](#description).
32 | 2. [Iterable Protocol](#iterable-protocol).
33 | 
34 | ### Description:
35 | 
36 | - This will show us "**How to iterate over an object**".
37 | 
38 | ### Iterable Protocol
39 | 
40 | - **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.
41 | - Using `[Symbol.iterator]()`
42 | 
43 | 
44 | ### Iterator Protocol
45 | 
46 | - **Definition**: define a standard way that an object produces a sequence of values (how an object will iterate).
47 | - Using `next()`
48 | 
49 | ----------------------------
50 | 
51 | 
52 | - So for an object to be iterable ---must implement---> iterator method(define how object will be iterated).
53 | - Our iterator method here is `[Symbol.iterator]()`
54 | - `[Symbol.iterator]()` is a zero argument method ---returns---> iterator object (which is an object that conforms to iterator protocol).
55 | - On iterator object, you can call method `next()`
56 | - `next()` method is a zero argument method that returns an object with 2 properties:
57 |     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).
58 |     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).
59 | 
60 | 
61 | ```javascript
62 | const digits = [0, 1, 2];
63 | const arrayIterator = digits[Symbol.iterator]();
64 | 
65 | console.log(arrayIterator.next());//Object {value: 0, done: false}
66 | console.log(arrayIterator.next());//Object {value: 1, done: false}
67 | console.log(arrayIterator.next());//Object {value: 2, done: false}
68 | console.log(arrayIterator.next());//Object {value: undefined, done: true}
69 | ```


--------------------------------------------------------------------------------
/ES6 Course.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 | ```


--------------------------------------------------------------------------------
/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('Diana', 'Hi');//Hi Diana
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 : 'Diana';
159 | greeting = (greeting !== undefined)? greeting : 'Hi'
160 |   return `${greeting} ${name}`;}
161 |   
162 | sayHi();// Hi Diana
163 | sayHi('Violeta', 'Hello');//Hello Violeta
164 | ```
165 | How verbose this is! So you can instead write
166 | ```
167 | function sayHi (name = 'Diana', greeting = 'Hi') {
168 |   return `${greeting} ${name}`;}
169 |   
170 | sayHi();// Hi Diana
171 | sayHi('Violeta', 'Hello');//Hello Violeta
172 | sayHi('Violeta');//Hi Violeta
173 | sayHi(undefined, 'Hello');//Hello Diana
174 | ```
175 | 
176 | ## Destructuring with Default Function Parameters:
177 | 
178 | 1. **Destructuring Arrays with Default Function Parameters**
179 | 
180 |   - Example
181 |   ```
182 |   function createGrid([width = 5, height = 5] = []) {
183 |   return `Generates a ${width} x ${height} grid`;
184 | }
185 | createGrid(); // Generates a 5 x 5 grid
186 | createGrid([]); // Generates a 5 x 5 grid
187 | createGrid([2]); // Generates a 2 x 5 grid
188 | createGrid([2, 3]); // Generates a 2 x 3 grid
189 | createGrid([undefined, 3]); // Generates a 5 x 3 grid
190 | ```
191 | 
192 | 2. **Destructuring Objects with Default Function Parameters**
193 | 
194 |   - Example:
195 |   ```
196 |   function createSundae({scoops = 1, toppings = ['Hot Fudge']} = {}) {
197 |   const scoopText = scoops === 1 ? 'scoop' : 'scoops';
198 |   return `Your sundae has ${scoops} ${scoopText} with ${toppings.join(' and ')} toppings.`;
199 | }
200 | 
201 | createSundae(); // Your sundae has 1 scoop with Hot Fudge toppings.
202 | createSundae({}); // Your sundae has 1 scoop with Hot Fudge toppings.
203 | createSundae({scoops: 2}); // Your sundae has 2 scoops with Hot Fudge toppings.
204 | createSundae({scoops: 2, toppings: ['Sprinkles']}); // Your sundae has 2 scoops with Sprinkles toppings.
205 | createSundae({toppings: ['Cookie Dough']}); // Your sundae has 1 scoop with Cookie Dough toppings.
206 | ```
207 | 
208 | 3. **Array defaults vs. object defaults**
209 |  - Always use Objects defaults over array ones whenever possible because object defaults handle skipped parameter in a better way.
210 |  - 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. 
211 |  
212 | 
213 |  ## JS Classes:
214 |  
215 |  1. Introduction:
216 |   - JavaScript is not :x: a _class-based language_.
217 |   - JavaScript uses _functions_ to create objects.
218 |   - JavaScript links object together by prototypal _inheritance_.
219 |   - JavaScript Classes are just a way to write a cleaner easier to read code.
220 |   
221 | 2. ES5 Class -to-> ES6 Class conversion
222 | 
223 | ES5
224 | ```
225 | //ES5
226 | function Plane(numEngines) {
227 |   this.numEngines = numEngines;
228 |   this.enginesActive = false;
229 | }
230 | 
231 | // methods "inherited" by all instances
232 | Plane.prototype.startEngines = function () {
233 |   console.log('starting engines...');
234 |   this.enginesActive = true;
235 | };
236 | 
237 | const richardsPlane = new Plane(1);
238 | 
239 | const jamesPlane = new Plane(4);
240 | ```
241 | ES6
242 | ```
243 | //ES6
244 | class Plane {
245 |   constructor(numEngines) {
246 |     this.numEngines = numEngines;
247 |     this.enginesActive = false;
248 |   }
249 | 
250 |   startEngines() {
251 |     console.log('starting engines…');
252 |     this.enginesActive = true;
253 |   }
254 | }
255 | 
256 | const richardsPlane = new Plane(1);
257 | 
258 | const jamesPlane = new Plane(4);
259 | ```
260 | 
261 | 3. `static` method
262 | 
263 | - written by adding key word `static` before method.
264 | - 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.
265 | - A real life example is `Math.floor()`, `Math.random()`, `Math.ceil()` where `floor()`, `random()`, and `ceil()` are all static methods on Math constructor function.
266 | - accessed on constructor function directly
267 | - Example:
268 | ```
269 | class Plane {
270 |   constructor(numEngines) {
271 |     this.numEngines = numEngines;
272 |     this.enginesActive = false;
273 |   }
274 |   static badWeather(planes) {
275 |     for (plane of planes) {
276 |       plane.enginesActive = false;
277 |     }
278 |   }
279 |   startEngines() {
280 |     console.log('starting engines…');
281 |     this.enginesActive = true;
282 |   }
283 | }
284 | ```
285 | ## Subclasses with extends, and super:
286 | 
287 | 1. `extends`
288 |   - Definition: used in class declarations or class expressions to create a class which is a child (subclass) of another class (parent class).
289 | 
290 | 2. `super`
291 |   - Definition: used to access and call functions on an object's parent.
292 | 


--------------------------------------------------------------------------------
/Expressive Live Editing.md:
--------------------------------------------------------------------------------
 1 | ## TEST: Expressive Live Editing(Lesson 17)
 2 | 
 3 | ### Description
 4 | - Step up your environment for live editing.
 5 | - Live editing will cause any connected browser to automatically reload if you change any file.
 6 | 
 7 | ### Different Approaches for Live Editing
 8 | - [Takana plugin on PackageControl](https://packagecontrol.io/packages/Takana)
 9 | - [Chrome Dev Workspaces](https://developers.google.com/web/tools/setup/setup-workflow)
10 | - [Browser Sync](https://www.browsersync.io/)
11 | 
12 | ### Using Browser-Sync
13 | - 1. Install browser-sync.
14 | - 2. Create a browser-sync object and initialize the server.
15 | 
16 | ```
17 | var browserSync = require('browser-sync').create();
18 |  browserSync.init({
19 |      server: "./"
20 |  });
21 |  browserSync.stream();
22 |  ``` 
23 |  
24 | - 3. Run gulp in Terminal, see how browser opens with the page open.


--------------------------------------------------------------------------------
/Git CheatSheet.md:
--------------------------------------------------------------------------------
 1 | # Git Cheat Sheet
 2 | - Source: [Git Cheat Sheet](http://rogerdudler.github.io/git-guide/files/git_cheat_sheet.pdf)
 3 | 
 4 | ### Create & Clone
 5 | - __create new__ repository    = _`git init`_
 6 | - __clone local__ repository   = _`git init`_
 7 | - __clone remote__ repository  = _`git clone username@host:/path/to/repository`_
 8 | 
 9 | ### Add & Remove
10 | - __add__ changes to INDEX     = _`git add <filename>`_
11 | - __add all__ changes to INDEX = _`git add*`_
12 | - __remove/delete__            = _`git rm <filename>`_
13 | 
14 | ### Commit & Synchronize
15 | - commit changes                    = _`git commit -m *Commit message*`_
16 | - push changes to remote repo       = _`git push origin master`_
17 | - __connect__ local to remote repo  = _`git remote add origin <server>`_
18 | - __update__ local with remote repo = _`git pull`_
19 | 
20 | ### Branches
21 | - __Create__ new branch          = _`git checkout -b <branch>`_
22 | - __Switch to__ master branch    = _`git checkout master`_
23 | - __Delete__ branch              = _`git branch -d <branch>`_
24 | - __Push__ branch to remote repo = _`git branch -d <branch>`_
25 | 
26 | ### Merge
27 | - __Merge changes__ from another branch = _`git merge <branch>`_
28 | - __View__ changes between two branches = _`git diff <source_branch> <target_branch>`_ e.g. git diff feature_x feature_y
29 |    
30 | ### Tagging
31 | - __Create__ tag                 = _`git <tag> <commit ID>`_ e.g git tag 1.o.o 1b2e1d63ff
32 | - __Get commit IDs_              = _`git log`_
33 | 
34 | ### Restore
35 | - __Replace__ working copy with latest from HEAD = _`git checkout --<filename>`_
36 | 
37 | #### Resources
38 | -  [Learn Git](https://www.atlassian.com/git/tutorials/learn-git-with-bitbucket-cloud)
39 | -  [Version Control for Beginners](https://www.atlassian.com/git/tutorials/what-is-version-control)
40 | -  [Git Get Started](https://www.atlassian.com/git/tutorials/setting-up-a-repository)
41 | -  [Git Collaboration](https://www.atlassian.com/git/tutorials/syncing)
42 | -  [Git Migration](https://www.atlassian.com/git/tutorials/svn-to-git-prepping-your-team-migration)
43 | -  [Advanced Git Tutorials](https://www.atlassian.com/git/tutorials/advanced-overview)
44 | 
45 | 
46 | 


--------------------------------------------------------------------------------
/GitHubMarkdown.md:
--------------------------------------------------------------------------------
 1 | # Markdown- [Markdown Cheatsheet](#2-GitHub-markdown)
 2 | _Source: __GitHub Hacknight__ - [WWCode Barcelona](https://github.com/WomenWhoCode/WWCodeBarcelona)_
 3 | 
 4 | ### Table Of Contents: :rocket:
 5 | ## 1. GitHub Markdown 
 6 | - GitHub uses its own version of the Markdown syntax. 
 7 | - It provides an _additional set of usefull features_, that make it easier to work with content on GitHub.com:
 8 | 
 9 | __GOALS:__
10 | - a. __USERNAME @MENTIONS__
11 | - b. __ISSUE REFERENCES__ 
12 | - c. __TASK LISTS__ 
13 | - d. __FENCED CODE BLOCKS__ 
14 | - e. __TABLES__ 
15 | - f. __EMOJI__ 
16 | 
17 | ## a. USERNAME @MENTIONS 
18 | - Type a @ symbol followe by a username to notify the person to view the comment.
19 | - This is called an "@mention", as you are mentioning an `individual`.
20 | - You can also "@mention" `teams` within an _organization_.
21 | 
22 | ## b. ISSUE REFERENCES 
23 | Any number refering to an `Issue` or `Pull Request` is automatically converted into a link:
24 | - #1
25 | - defunkt#1
26 | - defunkt/github-flavored-markdown#1
27 | 
28 | ## c. TASK LISTS 
29 | - [x] @mentions, #refs, [links](),]]formatting]], and <del>tags</del> supported.
30 | - [x] list syntax required (any unordered list or ordered list supported).
31 | - [x] this is a complete item.
32 | - [] this is an incomplete item.
33 | 
34 | ## d. FENCED CODE BLOCKS
35 | - You can create a code block with ` ``` `to create a code block without the leading spaces.
36 | ```
37 | javascript
38 | function test(){
39 | console.log("look ma`,  no spaces");
40 | }
41 | ```
42 | - Add an optional language identifier and your code with get syntax highlighting.
43 | ```
44 | function test (){
45 | console.log("look ma`, no spaces");
46 | }
47 | ```
48 | 
49 | ## e. TABLES
50 | In GitHub you can create a table by 
51 | - assembling a list of words 
52 | - divide them with hyphens (-) for first row 
53 | - separate each column with a pipe `I`
54 | ```
55 | | Tables   |      Are      |  Cool |
56 | |----------|:-------------:|------:|
57 | | col 1 is |  left-aligned | $1600 |
58 | | col 2 is |    centered   |   $12 |
59 | | col 3 is | right-aligned |    $1 |
60 | ```
61 | ## f. EMOJI
62 | GitHub supports emoji!
63 | :+1: :sparkles: :camel: :tada:
64 | :rocket: :metal: :octocat:
65 | 
66 | #### Resources
67 | - [Markdown Tables](https://www.tablesgenerator.com/markdown_tables)
68 | - [Emoji](http://www.emoji-cheat-sheet.com)
69 | 


--------------------------------------------------------------------------------
/Google Challenge Scholarship part1 (HTML, CSS, JS, jQuery) .pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dianavile/Code-Notes/d05d9823e1a7891a44efb29d4eb93107c38def6e/Google Challenge Scholarship part1 (HTML, CSS, JS, jQuery) .pdf


--------------------------------------------------------------------------------
/Gulp file.md:
--------------------------------------------------------------------------------
 1 | Gulp file
 2 | 
 3 | var gulp = require('gulp');
 4 | var uglify = require('gulp-uglify');
 5 | var sass = require('gulp-sass');
 6 | var plumber = require('gulp-plumber');
 7 | var imagemin = require('gulp-imagemin');
 8 | var autoprefixer = require('gulp-autoprefixer')
 9 | 
10 | gulp.task('scripts', function() {
11 |     gulp.src('js/*.js')
12 |     .pipe(plumber())
13 |     .pipe(uglify())
14 |     .pipe(gulp.dest('dist/minjs'));
15 | });
16 | 
17 | gulp.task('styles', function() {
18 |     gulp.src('sass/**/*.scss')
19 |     .pipe(sass(
20 |         {outputStyle: 'compressed'}
21 |     ).on('error', sass.logError))
22 |     .pipe(autoprefixer({
23 |         browsers: ['last 2 versions']
24 |     }))
25 |     .pipe(gulp.dest('css'));
26 | });
27 | 
28 | 
29 | gulp.task('image', function() {
30 |     gulp.src('img/*')
31 |     .pipe(imagemin())
32 |     .pipe(gulp.dest('img/build'));
33 | }); 
34 | 
35 | gulp.task('watch', function() {
36 |     gulp.watch('js/*.js', ['scripts']);
37 |     gulp.watch('sass/**/*.scss', ['styles']);
38 | });
39 | gulp.task('default', ['scripts', 'styles', 'watch']);


--------------------------------------------------------------------------------
/GulpTutorial.md:
--------------------------------------------------------------------------------
 1 | # gulp tutorial
 2 | 
 3 | ## Install gulp:
 4 | 
 5 | 1. *globally*:
 6 | 
 7 | ```
 8 | npm install -g gulp
 9 | ```
10 | 2. locally (on your project main directory:
11 | 
12 | ```
13 | npm install --save-dev gulp
14 | ```
15 | 
16 | ## gulpfile.js
17 | 
18 | - In this JS file you will write tasks that gulp will run.
19 | - Save it in the project main directory.
20 | ```
21 | var gulp = require('gulp');
22 | 
23 | gulp.task('default', function() {
24 |   console.log('Hello gulp!'); 
25 | });
26 | ```
27 | 
28 | - On terminal:
29 | ```
30 | gulp
31 | ```
32 | ## Uglify JS files
33 | 
34 | - Install gulp-uglify package.
35 | - Go to https://gulpjs.com/plugins/
36 | - Search for gulp-uglify. Click it. To see tha install syntax.
37 | - In your terminal at the root of your project:
38 | ```
39 | npm install --save-dev gulp-uglify
40 | ```
41 | - In gulpfile.js:
42 | 
43 | ```javascript
44 | var gulp = require('gulp');
45 | var uglify = require('gulp-uglify);
46 | 
47 | gulp.task('scripts'/*name of task. you can put whatever name you want*/, function() {
48 |   gulp.src('js/**/*.js')
49 |   .pipe(uglify())
50 |   .pipe(gulp.dest('minjs'));
51 | }
52 | ```
53 | 
54 | - On terminal:
55 | ```
56 | gulp scripts
57 | ```
58 | 
59 | #### Gulp Resources
60 | - [Gulp for Beginners](https://css-tricks.com/gulp-for-beginners/)
61 | - [Gulp JS Tutorial Beginners](https://appdividend.com/2018/03/09/gulp-js-tutorial-beginners/)
62 | 


--------------------------------------------------------------------------------
/HTML elements.md:
--------------------------------------------------------------------------------
1 | # HTML elements
2 | 
3 | 1. `<mark>` => highlight text.
4 | 2. `<blockquote>` => for blockquote. Can have the cite attribute.
5 | 3. `<q>` => inline quote. Most browser will add quotation marks around text inside <q> tags. Can have the cite attribute.
6 | 4. `<footer>` => inside a blockquote element at the end of it will add the blockquote footer preceded by a wide hyphen.
7 | 5. `<cite>` 


--------------------------------------------------------------------------------
/HTML5 Sectioning Elements.md:
--------------------------------------------------------------------------------
  1 | # **HTML5 Sectioning Elements**
  2 | 
  3 | :exclamation: **Importance:**
  4 | 
  5 | - gives more semantic meaning to your pages, allowing computer programs to better understand your content, enhance accessibility, and SEO friendly.
  6 | 
  7 | ```
  8 | <main>
  9 | ```
 10 |   
 11 |   - **contain the main content for your web page.**
 12 |   - **content should be unique to the individual page.**
 13 |   - **content should NOT appear elsewhere on the site.**
 14 |   - **should NOT have any content that is repeated on multiple pages (logos, search boxes, footer links, etc.)**
 15 |   - **should NOT be placed within `<article>`, `<aside>`, `<header>`, `<footer>`, or `<nav>` elements.**
 16 |   - **Only ONE `<main>` element for each page.**
 17 | 
 18 | 
 19 | ```
 20 | <article>
 21 | ```
 22 | 
 23 | - **contain a piece of self-contained content that could be distributed outside the context of the page.**
 24 | - **like news articles, blog posts, or user comments.**
 25 | - **could be _Nested_ inside each other. And this means that the nested one relate to the outer one.**
 26 | 
 27 | 
 28 | ```
 29 | <section>
 30 | ```
 31 | 
 32 | - **contain a group of related content. **
 33 | - **content doesn’t necessarily need to make sense out of the context of the page.(the main diff from `<article>`).**
 34 | - **It’s advisable to use a heading element `<h1>` to `<h6>` to define the topic of the section.**
 35 | - **If you just need to group content together for styling purposes you should use `<div>` instead.**
 36 | 
 37 | 
 38 | ```
 39 | <nav>
 40 | ```
 41 | 
 42 | - **used to:** 
 43 |     - **contain a collection of links to external pages or sections within the current page.**
 44 |     - **table of contents.**
 45 |     - **blogroll.**
 46 |     - **It is better to mark up the links within list elment but this is not necessary with `<nav>`.**
 47 | 
 48 | ```
 49 | <nav>
 50 |   <ul>
 51 |     <li><a href="#chapter-one">Chapter One</a>
 52 |     <li><a href="#chapter-two">Chapter Two</a>
 53 |     <li><a href="#chapter-three">Chapter Three</a>
 54 |   </ul>
 55 | </nav>
 56 | ```
 57 | 
 58 | 
 59 | ```
 60 | <aside>
 61 | ```
 62 | 
 63 | - **for content that is not directly related to the content surronding it and could be considered separate.
 64 | - **like sidebars, `<nav>` elements.
 65 | 
 66 | ```
 67 | <article>
 68 |   <header>
 69 |     <h1>Google Buys Nest</h1>
 70 |     <p>Posted at 11:34am 13th January 2014</p>
 71 |   </header>
 72 |   <p>...</p>
 73 |   <p>...</p>
 74 | 
 75 |   <aside>
 76 |     <h1>Google (GOOG)</h1>
 77 |     <p>Google was founded in 1998 by Larry Page and Sergey Brin. The company...</p>
 78 |   </aside>
 79 | </article>
 80 | ```
 81 | 
 82 | ```
 83 | <header>
 84 | ```
 85 | 
 86 | - **represent the introductory content to an article or web page. **
 87 | - **contains:**
 88 |     - **a heading element like `<h1>`.** 
 89 |     - **some metadata that’s relevant to the content, such as the post date.**
 90 |     - **table of contents (within `<nav>`).**
 91 | - **associated with the nearest sectioning element.**
 92 | 
 93 | 
 94 | ```
 95 | <footer>
 96 | ```
 97 | 
 98 | - **represent information about a section such as _author, copyright information, or links to related web pages._**
 99 | - **associated with the nearest sectioning element.**
100 | 
101 | 
102 | ```
103 | <address>
104 | ```
105 | 
106 | - **NOT for marking up postal address.**
107 | - **represent contact information for an article or web page.**
108 | - **like author’s website or their email address.**
109 | - **often used within `<footer>`.
110 | 
111 | ```
112 | <article>
113 |   <header>
114 |     <h1>Google buys Nest</h1>
115 |     <p>Posted at 11:34am 13th January 2014</p>
116 |   </header>
117 |   <p>...</p>
118 |   <p>...</p>
119 |   <footer>
120 |     <address>
121 |       By <a href="mailto:matt@example.com">Matt West</a>
122 |     </address>
123 |     <p>Copyright Matt West 2014</p>
124 |   </footer>
125 | </article>
126 | ```
127 | 
128 | 
129 | :blue_book: Source: [How to Use The HTML5 Sectioning Elements](http://blog.teamtreehouse.com/use-html5-sectioning-elements).


--------------------------------------------------------------------------------
/HTML5 canvas.md:
--------------------------------------------------------------------------------
  1 | # HTML5 canvas
  2 | 
  3 | - Contents:
  4 |   1. [Description](#description).
  5 |   2. [Create a canvas](#create-a-canvas).
  6 |   3. [Loading Images Code](#loading-images-code).
  7 |   4. [Drawing Rectangle](#drawing-rectangle).
  8 |   5. [Clear Rectangle](#clear-rectangle).
  9 |   6. [Paths](#paths).
 10 |   7. [save() & restore()](#save--restore).
 11 |   8. [Moving Objects in a Canvas](#moving-objects-in-a-canvas).
 12 |   9. [Color Objects](#color-objects).
 13 |   10. [Draw Text](#draw-text).
 14 |   11. [Grayscale Conversion Algorithms](#grayscale-aconversion-algorithms).
 15 |   12. [Resources](#resouces).
 16 |   
 17 |   ## Description:
 18 |   - A Udacity HTML5 canvas course. [Here is its link](https://classroom.udacity.com/courses/ud292).
 19 |   - I will try to make notes on the  important things of the course.
 20 |   - The `<canvas>`  is just a container for drawing withthe use of JavaScript.
 21 |   
 22 |   
 23 |   
 24 |   ## Create a canvas:
 25 |   
 26 |   - HTML Syntax:  `<canvas id="canvas" width="500" height="500"></canvas>`
 27 |   - Attributes: `width` ==> Width of the canvas in CSS pixels (Default 150).
 28 |                 `height` ==> Height of the canvas in CSS pixels (Default 150).
 29 |                 
 30 |                 
 31 |   - JavaScript Syntax: 
 32 |   ```javascript
 33 |   const canvas = document.getElementById('canvas');//to select the canvas element
 34 |   const ctx = canvas.getContext('2d');//to get the context of the 2d canvas. It can also be 3d but this course is about 2d.
 35 |   ```
 36 |   
 37 |   - In case we want an obaque canvas you can write:
 38 |   
 39 |   ```javascript
 40 |   const ctx = canvas.getContext('2d', {alpha: false});
 41 |   ```
 42 |   
 43 |   - After setting the context and assign it a variable `ctx`. We will use it to draw on the canvas like in the following examples.
 44 |   
 45 |   
 46 |   ## Loading Images Code
 47 |   
 48 |   - Using method drawImage()
 49 |   - It is called on the CanvasRenderingContext2D interface.
 50 |   - Syntax:
 51 |   
 52 |     It can contain either 3, 5, or 7 parameters:
 53 |     
 54 |   `ctx.drawImage(image, dx, dy);`
 55 |   
 56 |   `ctx.drawImage(image, dx, dy, dWidth, dHeight);`
 57 |   
 58 |   `ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);`
 59 |   
 60 |   Parameters:
 61 |   
 62 |   `image`: the image url.
 63 |   
 64 |   `dx`: the x coordinate of image.
 65 |   
 66 |   `dy`: the y coordinate of image.
 67 |   
 68 |   `sx`: The x coordinate where to start clipping.
 69 |   
 70 |   `sy`: The y coordinate where to start clipping.
 71 |   
 72 |   `dWidth`: The width to draw the image in the destination canvas. This allows _scaling_ of the drawn image. If not specified, the image is NOT scaled in width when drawn.
 73 |   
 74 |   `dHeight`: The height to draw the image in the destination canvas. This allows _scaling_ of the drawn image. If not specified, the image is not scaled in height when drawn.
 75 |   
 76 |   `sWidth`: The width of the clipped image.
 77 |   
 78 |   `sHeight`: The height of the clipped image.
 79 |   
 80 |   
 81 |   - Example:
 82 | ```html
 83 | <canvas id="canvas" width="300" height="350"></canvas>
 84 | <script>
 85 |   const canvas = document.getElementById('canvas');
 86 |   const ctx = canvas.getContext('2d');
 87 |   const image = new Image();
 88 |   image.src = '/*imageUrl*/';
 89 |   image.onload = function() {
 90 |     ctx.drawImage(image, 0, 0, canvas.width, canvas.height);//the width and height of the image will be the canvas's width and height.
 91 |   }
 92 | </script>  
 93 | ```
 94 |   
 95 |   ## Drawing Rectangle:
 96 |   
 97 |   - Syntax:
 98 |   ```javascript
 99 |   ctx.fillRect(x,y,width,height);//draws a colored rectangular.
100 |   ```
101 |   ```javascript
102 |   ctx.strokeRect(x,y,width,height);//draws an empty rectangular.
103 |   ```
104 |   
105 |   
106 |   ## Clear Rectangle:
107 |   
108 |   - Synatx:
109 |   ```javascript
110 |   ctx.clearRect(x, y, width, height);
111 |   ```
112 |   
113 |  
114 |   
115 |   ## Paths:
116 |   
117 |   - This [link](http://www.w3.org/TR/2dcontext/#building-paths) explains it in details.
118 |   
119 |   
120 |   
121 |  ## save() & restore():
122 |  
123 |  - `save()`:
124 |   [o] saves the most current state to be called after with `restore()`
125 |   [o] If called in the before a current state it saves the default on. An example from MDN(https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/save#Examples).
126 |   [o] Syntax:
127 |   ```javascript
128 |   ctx.save();//called after the state was declared.
129 |   ```
130 |   
131 |  - `restore()`:
132 |   [o] restores the most recently saved canvas state.
133 |   [o] Syntax:
134 |   ```javascript
135 |   ctx.restore();//called before drawing the object we want to restore the state on.
136 |   ```
137 |   
138 |   
139 |   ## Moving Objects in a Canvas:
140 |   
141 |   `ctx.scale(x, y);`
142 |   
143 |   `ctx.translate(x, y);`
144 |   
145 |   `ctx.rotate(angleRadians);`: anglaeRadian = degrees * (Math.PI/180)
146 |   
147 |   - Order of operations: 1. scale
148 |                          2. rotate
149 |                          3. translate
150 |           
151 |           
152 |   ## Color Objects:
153 |   
154 |   `ctx.strokeStyle = "someColor";//color can be a named color (140 named color in HTML), or a hexadecimal color.`
155 |   
156 |   `ctx.fillStyle = "someColor";`
157 |   
158 |   `ctx.fill();
159 |   //can be used for example if we draw a rectangle by rect() instead of fillRect(), or to color path with the fillStyle color specified.`
160 |   
161 |   
162 |   ## Draw Text:
163 |   
164 |   `ctx.strokeText(x, y, [optional max-width]);`
165 |   
166 |   `ctx.fillText(x, y, [optional max-width]);`
167 |   
168 |   - You can combine both `strokeText` and `fillText`
169 |   
170 |   - Here is the [meme-maker](https://github.com/Islam888/Study-Notes/blob/master/HTML/meme-maker.html) exercise app by udacity.
171 |   
172 |   
173 |   
174 |   ## Grayscale Conversion Algorithms:
175 |   
176 |   - [Here is the link to the article](http://www.tannerhelland.com/3643/grayscale-image-algorithm-vb6/).
177 |   
178 |   
179 |   ## Resources:
180 |   
181 |   - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas
182 |   - https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API
183 |   - https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage
184 |   - https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
185 |   - https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
186 |   - https://www.w3schools.com/tags/canvas_drawimage.asp
187 |   - http://diveintohtml5.info/canvas.html#text
188 |   - http://html5gamedevelopment.com/2013-12-developing-html5-games-1hr-video-presentation/
189 |   - https://www.udemy.com/how-to-program-games/
190 |   - https://www.udemy.com/courses/search/?q=html%20canvas&src=ukw&sort=most-reviewed
191 |   - [A good youtube course](https://www.youtube.com/watch?v=EO6OkltgudE&list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL).
192 |   


--------------------------------------------------------------------------------
/How to prevent Disasters.md:
--------------------------------------------------------------------------------
 1 | ## TEST: How to Prevent Disasters(Lesson 18)
 2 | 
 3 | ### Description
 4 | - How to use tooling as a safety net for your code.
 5 | - Use it automatically to check the code you write
 6 | - And automatically run tests.
 7 | 
 8 | 
 9 | ### Linting
10 | - _LINTING_ = `a way to automatically check JavaScript code for errors.`
11 | - This can be done via your:
12 | - 1) editor (live linting)
13 | - 2) build process
14 | - 3) pre-commit hook in version control
15 | 
16 | There is a difference of `CodeStyle Linting` vs `Syntax Linting`.
17 | - 1) __Syntax (Structural) Linting__= checks for `JavaScript Anti-patterns`, like: `unreachble statements` and forget a `strict comparison against null`.
18 | - 2) __Code Style Linting__ = to know errors regarding
19 | - incorrect camel cases of `variables 
20 | - particular incorrect `braces {}[] for functions.
21 | 
22 | __NOTE:__ The linting ONLY checks for intentional errors. 
23 | - YET, it doesn´t have any idea of what you are trying to accomplish with your code.
24 | 
25 | - A linter helps your code to:
26 | - 1) uncover code style problems
27 | - 2) help eliminate dead code or variables
28 | 
29 | ### Popular JavaScript Linters
30 | - 1) [JSHINT](http://jshint.com/)
31 | - 2) [JSCS](https://www.npmjs.com/package/jscs)
32 | - 3) [ESLint](https://eslint.org/)
33 | 
34 | ### Unit Test
35 | - Use `Unit Test` to test the __functionality of your project.__
36 | - To test the Front-End code in the browser.
37 | 
38 | 
39 | #### Resources
40 | - [Comparison of JavaScript linting tools](sitepoint.com/comparison-javascript-linting-tools/)
41 | - [ESLint](https://eslint.org/)
42 | - [Sublime Linter](http://www.sublimelinter.com/en/latest/)
43 | - [gulp-eslint on npm](https://www.npmjs.com/package/gulp-eslint)
44 | - [How to Use Git and Github course](https://eu.udacity.com/course/how-to-use-git-and-github--ud775)
45 | - [Udacity JavaScript Testing course](https://eu.udacity.com/course/javascript-testing--ud549)
46 | - [PhantomJS gulp plugin on npm](https://www.npmjs.com/package/gulp-jasmine-phantom)
47 | - [Jasmin Documentation](https://jasmine.github.io/)
48 | 
49 | 
50 | 


--------------------------------------------------------------------------------
/Image Compression.md:
--------------------------------------------------------------------------------
 1 | ## Image Compression
 2 | Our build can help us optimize our images in many different ways, the most obvious of which is for file size. I’ve gone ahead and created a task that copies images to our distribution directory. We’re then piping that output into our optimization plugins. We can compress images with either lossless or lossy compression algorithms. Lossless compression reduces a file in such a way that the original can be recreated from the compressed version. You can think of it as reducing the file size but not throwing away any information.
 3 | 
 4 | ### Imagemin
 5 | - [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin) 
 6 | - can `lossless` compress JPEGs, GIFS, PNGs and SVGs out of the box. 
 7 | - Lossless means that even though the file size will end up being smaller, special care is taken to not cause any visual changes whatsoever, meaning that original visual information stays exactly the same.
 8 | 
 9 | - After you’ve grabbed the plugin you can simply add a pipe between the new crunch-images task and call imagemin() in there. 
10 | - There are a few extra options such as generating progressive images, but even without any configuration this will take all of your images and do any safe optimizations.
11 | 
12 | ### Lossy Compression
13 | `Lossy compression`, on the other hand, can only recreate an approximation of the original. 
14 | - Lossy compression can give you really small file sizes at the expense of image quality. 
15 | - But there are a few lossy optimizations that are truly smart, and PNG quantization is one of them. 
16 | - PNG quantization takes images with or without alpha transparency and converts them to 256 or less colored 8-bit pngs.
17 | - Now if you do this manually and just convert a 16-bit image to a 8-bit image, you won’t like the results. 
18 | - It’ll end up...well..like a crappy gif, with unnatural, limited colors.
19 | 
20 | ### PNG Quantization
21 | - `PNG quantization` benefits from the fact that there are colors that our vision and brain perceives as very similar, even though they’re technically completely different. 
22 | - The quantization algorithm aims to understand which colors actually matter and remaps them to new, optimized colors.
23 | 
24 | - A cool thing about pngquant, the plugin we’re going to use, is that it automatically exits and will not save if a certain quality threshold isn’t passed.
25 | 
26 | ### Let's Try It
27 | - Download and require the [imagemin-pngquant plugin](https://www.npmjs.com/package/imagemin-pngquant) in addition to gulp-imagemin.
28 | - Create a config object for imagemin. These are the directives that imagemin will use when you pipe images to it. The following snippet instructs imagemin to use progressive rendering for JPEG images and PNG quant for well, PNGs.
29 | 
30 | ```
31 | gulp.task('default', function() {
32 |     return gulp.src('src/images/*')
33 |         .pipe(imagemin({
34 |             progressive: true,
35 |             use: [pngquant()]
36 |         }))
37 |         .pipe(gulp.dest('dist/images'));
38 | });
39 | ```
40 | 
41 | - Progressive rendering loads an image in layers where each layer makes the image more detailed. 
42 | - It can make a page feel faster than typical rendering line by line. 
43 | - If you like, you can now configure pngquant as well by adding quality or speed options. Read more about these on the plugin homepage.
44 | 
45 | - Now you’ve got automatic image crunching in place and working for you but pro-tip, for anything important, take the time to see what will work, even if that means putting in a bit of elbow grease and checking things manually.
46 | 
47 | ### Even better compression options
48 | Smaller images can tolerate more aggressive lossy compression. 
49 | - You might want to try other things like converting images to SVG where applicable. 
50 | - `SVG` stands for __Scalable Vector Graphics__ and uses a XML-based format to describe an image and can in most cases be scaled infinitely without any increase in file size or loss of image quality. 
51 | - If you’d like to further explore techniques to work with your images, head to the notes for a few advanced topics. 
52 | - This includes stuff such as automatically resizing your images to become responsive and fit retina and non-retina screens, or inlining your images into your CSS or into a sprite to save a couple more HTTP requests.
53 | 
54 | 
55 | 
56 | 


--------------------------------------------------------------------------------
/Immediately Invoked Function Expression.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).


--------------------------------------------------------------------------------
/Introducing Web Tooling and Automation.md:
--------------------------------------------------------------------------------
1 | ## TESTING: Introducing Web Tooling and Automation (Lesson 14)
2 | 
3 | How automation and tooling: 
4 | - 1) can make you __more productive__ as a developer
5 | - 2) allow you to work __more faster__ and __more efficiently__
6 | 
7 | 
8 | 


--------------------------------------------------------------------------------
/JS SourceMaps.md:
--------------------------------------------------------------------------------
 1 | ## JavaScript Source Maps (Lesson 19)
 2 | - Imagine you’re running your page now and there’s a bug in your JavaScript. 
 3 | - So you head over to the Sources panel to set a breakpoint, only to realize you’re looking at Spaghetti instead of source code.
 4 | 
 5 | - After all the optimizations, none of your code is particularly readable anymore.
 6 | - That's a major rationale for _source maps_.
 7 | 
 8 | - `Source maps`= files that associate line numbers from the processed file to the original. 
 9 | - This way the browser can lookup the current line number in the sourcemap and open the right source file at the correct line when debugging. 
10 | - In Chrome for instance, the DevTools support source maps both for CSS and JavaScript.
11 | - Read more about the source map specification.
12 | 
13 | ### Setup
14 | - Source maps in gulp are easy to setup. 
15 | - It’s a use case where pipes really shine.
16 | 
17 | ### Install the gulp-sourcemaps plugin.
18 | - Require the gulp-sourcemaps plugin and in your scripts-dist or scripts (or styles) task, 
19 | - add a pipe to sourcemaps.init() after you get the source but before you send the source files through any pipes that transform them materially. 
20 | - After all plugins and pipes have been applied but before you save to the destination, pipe through sourcemaps.write() with an optional location parameter if you don't want the source maps to be inlined.
21 | 
22 | ```
23 | var sourcemaps = require('gulp-sourcemaps');
24 | 
25 |  gulp.task('scripts-dist', function() {
26 |    gulp.src('js/**/*.js')
27 |     .pipe(sourcemaps.init())
28 |     .pipe(concat('all.js'))
29 |     .pipe(uglify())
30 |     .pipe(sourcemaps.write())
31 |     .pipe(gulp.dest('dist/js'));
32 | });
33 | ```
34 | 
35 | - All of the pipes between init and write must have support. 
36 | - Check the list here to verify. 
37 | - In the developer console, the output of app should automically link errors in the generated code to their line numbers in the original source.
38 | 
39 | ### Source map Support for other languages
40 | - In addition to things like concatenation and minification, source maps also support some languages/extensions that transpile to JavaScript like Typescript, CoffeeScript and ES6 /JSX.
41 | 
42 | - Read more technical aspects of Source Maps on HTML5Rocks.
43 | 


--------------------------------------------------------------------------------
/Jasmine Testing.md:
--------------------------------------------------------------------------------
  1 | ## Jasmine-Testing (Lesson 22)
  2 | - Javascript doesn´t have `unix test` functions by default. 
  3 | - Therefore the _popular, easy to use_ [Jasmine Library](https://jasmine.github.io/)(version 2.2) is needed.
  4 | - The way to organize a test is up to you and your preferences. No right or wrong way.
  5 | 
  6 | ## Jasmine Syntax:
  7 | - __EXAMPLE CODE:__
  8 | ```
  9 | describe("A suite", function() {
 10 |   it("contains spec with an expectation", function() {
 11 |     expect(true).toBe(true);
 12 |   });
 13 | });
 14 | ```
 15 | - 1) `Describe()` calls = colored __black__
 16 | _describe()_ calls are black, they are used to identify a suite which is a group of related specs.
 17 | ```
 18 | describe("Player", function() {
 19 |   var player;
 20 |   var song;
 21 | ```
 22 | - 2) `It()` calls= colored _green!_
 23 | _it()_ calls are green, they are used to identify a **spec**ification
 24 |                         just a container for a test
 25 |                         _if all expectations within a spec are **true**, then that spec passes, else it will **fail**_
 26 | ```
 27 |   it(´should be able to play a Song´, function() {
 28 |     player.play(song);
 29 |     expect(player.currentlyPlayingSong).toEqual(song);
 30 | ```
 31 | ## Organize a test: Introducing Specs and Suites
 32 | `Describe` and `It` are used to create an __outline__ to __ORGANIZE information__.
 33 | 
 34 | ### Specs 
 35 | - `It` = used to create a __specification(SPEC)__. 
 36 | - A `spec` = a _container_ for a __test__, to identify the exact feature to test.
 37 | -  `Spec passes`=__If all exceptations(spec) within a spec return "TRUE"__.
 38 | -  `Spec fails`=__If any of the exceptations(spec) within a spec returns "FALSE"__.
 39 | - `It`= to define the _boundry to its test._
 40 | 
 41 | ### Suites 
 42 | - `Describe` = used to identify a __suite(SUITE)__. 
 43 | - a `Suite`= a __group of related specs__.
 44 | - Everything contained within this block of code is related to the Suite (e.g.´Player´).
 45 | - It is a level of `indentation`.
 46 | 
 47 | ## Write a test:
 48 | Start with _a call to expect_ - **expect()**
 49 | Follow a comparison method / _matcher_ - **toBe()** or **not.toBe()**
 50 | 
 51 | `expect(add(0.1, 0.2)).toBe(0.3);`
 52 | 
 53 | - (1) The __launching point__ of any test to _start the test process_: each test start with a call to `expect`. 
 54 | - (2) The __process function__ excepts a _single value_, called the `actual`, to test.
 55 | - (3) The __comparision method__ called the `matcher`, it is chained after the call to expect. 
 56 |       Example: `.toBe` = equivalant to "strict=comparison".
 57 | - (4) The __expected value__ what you expect the process function with the comparision methd to `return`.
 58 | 
 59 | 
 60 | - If this expression returns `true`= Test `passes`:
 61 | `expect(add(0.1, 0.2)).toBe(0.3);`
 62 | = `(add(0.1, 0.2)) === (0.3);` 
 63 | 
 64 | - If this expression returns `false`= Test `do NOT pass`. 
 65 | Or to __negate a test__ (test expression = `false`)
 66 | ```
 67 | expect(add(0.1, 0.2)).not.toBe(0.1);
 68 | ```
 69 | ## Quiz: Would this spec pass or fail?
 70 | - A spec can contain multiple test, but each test must return `true` for the spec to `pass` the test.
 71 | ```
 72 |  it(´should consider this spec´.function() {
 73 |     expect(true).toBe(true);
 74 |     expect(false).not.toBe(false); 
 75 | ```
 76 | - This spec would `fail` because our second test is returning `false`.
 77 | 
 78 | ## Error handling - Getting Started with Red-Green-Refactor-cycle
 79 | _**It is important to write your test before you begin to code!**_
 80 | 
 81 | ```
 82 | function add(x, y) {
 83 |     if (typeof x && typeof y !== 'number') {
 84 |         trhow new Error('Param must be a number');
 85 |     }
 86 |     return x + y;
 87 | }
 88 | ```
 89 | - Write your test first.
 90 | - They all fail, since there is no code to make them pass.
 91 | - Then you go write your code to make your test pass.
 92 | - Once that is complete, you can safely refactor your code, as you continue to add new features.
 93 | 
 94 | ```
 95 | describe('Address Book', function() {
 96 | 	it('should be able to add a contact', function() {
 97 | 		var addressBook = new AddressBook();
 98 | 			thisContact = new Contact();
 99 | 
100 | 			addressBook.addContact(thisContact);
101 | 
102 | 			expect(adressBook.getContact(0)).toBe(thisContact);
103 | 	}); 
104 | });
105 | ```
106 | ## Writing our Implementation
107 | - raise exceptions: 1 spec, 1 failure
108 | - Address Book should be able to add a contact
109 | - __Error:__ Address Book is not defined
110 | 
111 | __In what file would i write my implementation?__
112 | - [] spec/AddressBookSpec.js = __TEST FILE__
113 | - [] src/Contact.js          = __implementation of TEST in a ContactSpec.js__
114 | - [x] src/AddressBook.js     = 
115 | 
116 |  - Write all of our application code within the `src/ directory` 
117 |  - Name it `AddressBook.js` since that's the most accurate name for the functionality contained within.
118 | 
119 | ## Another Spec
120 | 
121 | ## Async JavaScript Testing
122 | - Since JavaScript is the language of the web, there are some functions that by necessity are going to take a decent amount of time to complete, such as fetching data from a server to display on your site. 
123 | - For this reason, JavaScript includes support for 
124 | - `asynchronous functions` = _functions that can happen in the background while the rest of your code executes._
125 | 
126 | ### Callbacks
127 | - This was most commonly handled with `callbacks`. This is still used a lot in certain circumstances.
128 | - A `callback` function() = _a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action._[Callback function- MDN](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function)
129 | 
130 | - `Callbacks`= functions that get passed into other functions. 
131 | For example:
132 | ```
133 | myDiv.addEventListener("click", function(){
134 |   // do something!
135 | })
136 | ```
137 | - The __function__ `addEventListener()` takes a __callback__ `the “do something” function)` and __calls it when__ `myDiv` gets clicked.
138 | 
139 | - Unfortunately, though they are useful in situations like the above example, using callbacks can get out of hand, especially when you need to chain several of them together in a specific order. 
140 | 
141 | #### Resources Callback
142 | - [Callback-Hell](http://callbackhell.com/)
143 | - [Article](https://github.com/maxogden/art-of-node#callbacks)
144 | - [Video](https://www.youtube.com/watch?v=QRq2zMHlBz4)
145 | 
146 | ### Promises
147 | - A `promise`= an _object that might produce a value at some point in the future._ 
148 | 
149 | Example:
150 | - getData() is a function that fetches some data from a server 
151 | - And returns it as an object that we can use in our code:
152 | ```
153 | const getData = function() {
154 |   // go fetch data from some API...
155 |   // clean it up a bit and return it as an object:
156 |   return data
157 | }
158 | ``` 
159 | __NOTE:__ The issue with this example = it  __takes time to fetch the data__, but unless we tell our code that, it assumes that everything in the function happens essentially instantly. 
160 | So, this will give a problem, because when we try to extract pieceOfData out of the returned data, the function getData() will most likely still be fetching, so myData will not be the expected data, but will be __undefined__:
161 | ```
162 | const myData = getData()
163 | const pieceOfData = myData['whatever']
164 | ```
165 | To solve this problem:
166 | - tell the code to wait until the data is done fetching to continue. 
167 | - This can be done with `Promises`. It allows you to do this:
168 | ```
169 | const myData = getData() // if this is refactored to return a Promise...
170 | 
171 | myData.then(function(data){ // .then() tells it to wait until the promise is resolved
172 |   const pieceOfData = data['whatever'] // and THEN run the function inside
173 | })
174 | ```
175 | - [Jasmine Documentation](https://jasmine.github.io/2.1/introduction.html)
176 | - [Test-driven development](https://en.wikipedia.org/wiki/Test-driven_development)
177 | 


--------------------------------------------------------------------------------
/JavaScript DataTypes.md:
--------------------------------------------------------------------------------
 1 | # JavaScript-[Data Types-JS](-Data-Types-JavaScript)
 2 | _Source: Data Types JavaScript - Udacity Front End Web Development Nanodegree_
 3 | 
 4 | WORKING ON IT!
 5 | ### Table Of Contents:
 6 | - a. Data and Data Types
 7 | - b. Define and manipulate data types
 8 | - c. Numbers
 9 | - d. Booleans
10 | - e. Undefined
11 | - f. Null
12 | - g. 
13 | - h. 
14 | 
15 | ### a. DATA and Data Types
16 | - `Data` and `Data Types` are the _building blocks of every programming language_.
17 |   1) They help to __organize information__.
18 |   2) They determine __how programs will run__.
19 |   
20 | ### b. Define and manipulate data types
21 | 
22 | ### c. Numbers
23 | 
24 | ### d. Booleans
25 | 
26 | ### e. Undefined
27 | 
28 | ### f. Null
29 | 
30 | #### Resources 
31 | - []()
32 | 


--------------------------------------------------------------------------------
/JavaScript- Intro.md:
--------------------------------------------------------------------------------
  1 | # JavaScript-[Intro-JS](-Intro-to-JavaScript) :scream_cat: 
  2 | _Source: Intro to JavaScript - Udacity Front End Web Development Nanodegree_
  3 | 
  4 | ### Table Of Contents:
  5 | - __a. What is JavaScript?__
  6 | - __b. The JavaScript Console__
  7 | - __c. Developer Tools on Different Browsers__
  8 | - __d- Console.log__
  9 | 
 10 | ### a. What is JavaScript?
 11 | - __HTML__ and __CSS__ are `markup languages`, that _describe and define elements within a document_. 
 12 | - __JavaScript__ is a `programming language`, used to _communicate instructions to a machine_ to:
 13 |     1) _control the behavior of a machine_ 
 14 |     2) _express algorithms_.
 15 | 
 16 | ### b. The JavaScript Console
 17 | The __JavaScript Console__ is a development tools to `iterate`, `debug` and `profile` JavaScript code directly into the web browser.
 18 | ```
 19 | "Diana"
 20 | alert("Hello "Diana"! How are you?!");
 21 | ```
 22 | This creates a _JavaScript alert box_ in the web browser, on the current web page.
 23 | 
 24 | ### c. Developer Tools on Different Browsers
 25 | Every modern web browser includes its own set of developer tools:
 26 | 
 27 | #### 1 [Google Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/)
 28 | - The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome. 
 29 | - Use the DevTools to `iterate`, `debug` and `profile` a site. 
 30 | - __Open Chrome DevTools:__
 31 |   1) `right-click` on any page element, select `Inspect`. 
 32 |   2) open the `Chrome settings menu` in the top-right corner of your browser window and select `More Tools > Developer Tools`. 
 33 |   3) Use shortcuts: `Command + Option + i` (Mac) OR `Ctrl + Shift + i`/ `F12` (Windows/Linux).
 34 | 
 35 | #### 2 [Mozilla Firefox](https://developer.mozilla.org/en-US/docs/Tools)
 36 | - Firefox Developer Tools allow to examine, edit, and debug HTML, CSS, and JavaScript on the desktop and on mobile. 
 37 | - Download a version of Firefox called `Firefox Developer Edition` tailored for developers, featuring the latest Firefox features and experimental developer tools. 
 38 | - __Open Firefox Developer Tools:__
 39 |   1) `right-click` on any page element, select `Inspect`. 
 40 |   2) open the `Firefox settings menu` in the top-right corner of your browser window and select `Developer`. 
 41 |   3) Use shortcuts: `Command + Option + i` (Mac) OR `Ctrl + Shift + i`/ `F12` (Windows/Linux).
 42 | 
 43 | #### 3 Internet Explorer
 44 | - The features vary between versions, but starting at Internet Explorer 8 remain pretty consistent.
 45 | - [Internet Explorer 8](https://msdn.microsoft.com/en-us/library/dd565628.aspx)
 46 | - [Internet Explorer 9](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589512(v=vs.85))
 47 | - [Internet Explorer 10](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh673549(v=vs.85))
 48 | - [Internet Explorer 11](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/bg182636(v=vs.85))
 49 | - __Open Internet Explorer Developer Tools:__`F12`
 50 | 
 51 | #### 4 [Microsoft Edge]( https://docs.microsoft.com/en-gb/microsoft-edge/devtools-guide)
 52 | - __Microsoft Edge__ introduces improvements to the F12 developer tools in Internet Explorer. 
 53 | - The new tools are built in `TypeScript`, and are always running, so no reloads are required. 
 54 | - F12 developer tools documentation available on [GitHub](https://github.com/MicrosoftDocs/edge-developer). 
 55 | - __Open Microsoft Edge Developer Tools:__`F12`
 56 | 
 57 | #### 5 [Safari Web Inspector](https://developer.apple.com/safari/tools/)
 58 | For any Mac users, Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize a website for peak performance and compatibility on both platforms. 
 59 | - __Safari's Web Development Tools:__
 60 |   1) Enable the Develop menu in `Safari’s Advanced preferences`. Then  `right-click` on any page element, select `Inspect Element`. 
 61 |   2) Use shortcuts: `Command + Option + i` (Mac).
 62 | 
 63 | #### 6 [Opera Dragonfly](https://www.opera.com/dragonfly/)
 64 | - Fast, lean and powerful, Opera comes pre-packed with a fully-featured suite of developer tools. 
 65 | - Opera Dragonfly is designed to make your job easier. 
 66 | - __Open Opera Dragonfly:__
 67 |   1) `right-click` on any page element, select `Inspect Element`. 
 68 |   2) Use shortcuts: `Command + Option + i` (Mac) OR `Ctrl + Shift + i`/ `F12` (Windows/Linux).
 69 | 
 70 | ### d. Console.log
 71 | `console.log` is used to display content to the JavaScript console. 
 72 | __Perform the log action on the debugging console:__
 73 | - Run the following code in the console:
 74 | ```
 75 | console.log("hiya friend!");
 76 | ```
 77 | - __Prints:__ "hiya friend!"
 78 | - The __message logged__ is "hiya friend!". 
 79 | - hiya friend! is a `string` (=a _sequence of characters_).
 80 | 
 81 | - Write a block of JavaScript code that __`loops`__ through the numbers 0 through 9 and prints them out to the console:
 82 | ```
 83 | for (var i = 0; i < 10; i++) {
 84 |   console.log(i);
 85 | }
 86 | ```
 87 | - __Prints:__ 
 88 | "0
 89 | 1
 90 | 2
 91 | 3
 92 | 4
 93 | 5
 94 | 6
 95 | 7
 96 | 8
 97 | 9"
 98 | - This means: any code written inside the __curly brackets__ `{...}` will be repeated 10 times. 
 99 | -  In this case, `console.log` is printing out the value of `i` each time the loop runs.
100 | 
101 | __How to use the console as a sandbox to test a new line of JavaScript in the browser?__
102 | - Open [this site](https://daringfireball.net/projects/markdown/) in Dev Tools.
103 | - Paste the following code: `document.getElementsByTagName("h1")[0].style.color = "#ff0000";`
104 | - __What happened when you ran that line of code in the JavaScript console?__
105 | - The heading changed to RED.
106 | - Styling elements on the page is great, can also be don by modifying the CSS. 
107 | 
108 | __What makes JavaScript so special in this case?__ 
109 | - Refresh the page, then paste this line of code in the JavaScript console.
110 | `document.body.addEventListener('click', function () {
111 |      var myParent = document.getElementById("Banner"); 
112 |      var myImage = document.createElement("img");
113 |      myImage.src = 'https://thecatapi.com/api/images/get?format=src&type=gif';
114 |      myParent.appendChild(myImage);
115 |      myImage.style.marginLeft = "160px";
116 | });`
117 | - When you click, an image (cat gif)is added to the webpage 🐱! An image is added to the page.
118 | 
119 | #### Resources 
120 | - [Chrome Dev Tools Keyboard Shortcuts](https://developers.google.com/web/tools/chrome-devtools/shortcuts)
121 | - [Google Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/)
122 | - [Mozilla Firefox](https://developer.mozilla.org/en-US/docs/Tools)
123 | - [Internet Explorer 8](https://msdn.microsoft.com/en-us/library/dd565628.aspx)
124 | - [Internet Explorer 9](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589512(v=vs.85))
125 | - [Internet Explorer 10](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh673549(v=vs.85))
126 | - [Internet Explorer 11](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/bg182636(v=vs.85))
127 | - [Microsoft Edge]( https://docs.microsoft.com/en-gb/microsoft-edge/devtools-guide)
128 | - [Safari Web Inspector](https://developer.apple.com/safari/tools/)
129 | - [Opera Dragonfly](https://www.opera.com/dragonfly/)
130 | 
131 | 
132 | #### Take Away
133 | - All mayor web browsers come with __build-in JavaScript Engines__
134 | - This allows browsers to `run`and `execute Javascript code`
135 | - The __JavaScript Console__ allows to use `strings`, and `execute Javascript code lines` in real time directly in the browser.
136 | - With JavaScript in JavaScript Console, you can add __styles and animations__ to a web page.
137 | 


--------------------------------------------------------------------------------
/JavaScript-DOM.md:
--------------------------------------------------------------------------------
 1 | # JavaScript DOM- [DOM](#2.19-DOM)
 2 | __Source:__ _Accesibility - Udacity Front End Web Development Nanodegree_
 3 | - __Created with__ [@ArtNerdnet](https://github.com/artnerdnet)
 4 | 
 5 | #### Goals:
 6 | - What is the Document Object Model (DOM)?
 7 | - How the DOM gets created? 
 8 | - How to access the DOM with JavaScript?
 9 | 
10 | ### Table Of Contents
11 | - a) __The DOM__ 
12 | - b) __Create the DOM__ 
13 | - c) __Access the DOM__ 
14 | 
15 | ### a) THE DOM: What is the Document Object Model (DOM)?
16 | - The __DOM__= `"Document Object Model"` 
17 | - It is _`provided by the browser`_
18 | - It is a __tree-like structure__ _`representation of the HTML document`_. 
19 | - It contains all __nodes__ `relationship between elements`,  (=the element `content` and `properties`).
20 | 
21 | - :exclamation: __NOTE:__  The DOM is __NOT__ _part of the JavaScript language_. It __ONLY__ reference the _document object model in one place_, the `"Global Object"` section. __ECMAScript__ is the language specification JavaScript is based on. 
22 | 
23 | ### b) Create the DOM: How the DOM gets created? 
24 | - When you request a website, it responds with HTML: 
25 | - The received bytes run through a `parsing process` 
26 | - `characters` ===> (eg., start tag character, atribute) 
27 | - `tags` ===> it shows the HTML tags used (DOCTYPE, start tag, end tag, comments) 
28 | - `tokens` ===> it convert these tags into tokens 
29 | - `nodes` ===> it convert these tokens into nodes (HTML content and properties elements)
30 | - `DOM` ===> it convert nodes into the DOM (a tree structure, that captures HTML content and properties and relationships between the nodes)
31 | 
32 | ### c) Access the DOM: How to access the DOM with JavaScript?
33 | _ There are various ways to access the DOM with JavaScript:
34 | 
35 | 1) SELECT AN ELEMENT BY ID
36 | ```
37 | document.getElementById();
38 | ```
39 | If we ran the code above in the console, we wouldn't get anything, because we did not tell it the ID of any element to get! We need to pass a string to .getElementById() of the ID of the element that we want it to find and subsequently return to us:
40 | ``` 
41 | document.getElementById('footer');
42 | ```
43 | 
44 | 2) SELECT MULTIPLE ELEMENTS 
45 | The next two DOM methods that we'll be looking at that both return multiple elements are:
46 | `.getElementsByClassName()`
47 | `.getElementsByTagName()`
48 | 
49 | Accessing Elements By Their Tag
50 | After looking at both .getElementById() and .getElementsByClassName(), the new .getElementsByTagName() method should seem quite easy on the eyes:
51 | 
52 | ```
53 | document.getElementsByTagName('p');
54 | ```
55 | __Important things to keep in mind:__
56 | 1) both methods use the `document object`
57 | 2) both `return multiple items`
58 | 3) the __returned list__=`__NOT__ an array[]`
59 | 
60 | __Node__
61 | A Node acts like a blueprint containing all the data (properties) and the functionality (methods). This is called an interface. Based on the interface we know the properties and methods that are going to be applied to the individual items, which we call nodes.
62 | 
63 | __ELEMENT INTERFACE__
64 | The element interface inherits all properties AND methods from the Node. It is a descendent iself of the node, as well as its elements.
65 | 
66 | Example:
67 | 
68 | #### Resources
69 | - [JavaScript Closure, SetOutTime, Scopes](https://medium.com/coderbyte/a-tricky-javascript-interview-question-asked-by-google-and-amazon-48d212890703)
70 | 
71 | #### Take Away
72 | - The DOM is: `document object modal`, constructed __from the browser__ 
73 | - globally accessible by JavaScript code using the `document object`
74 | 
75 | Creating Content with JavaScript
76 | Working with Browser Events
77 | Performance
78 | 
79 | 
80 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 @dianavile
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/MarkdownCheatSheet.md:
--------------------------------------------------------------------------------
 1 | # Markdown- [Markdown Cheatsheet](#1-markdown-syntax)
 2 | _Source: GitHub Hacknight - Woman Who Code_
 3 | 
 4 | ### Table Of Contents:
 5 | ## 1. Markdown Syntax
 6 | __GOALS:__
 7 | - a. __Markdown__: What is markdown?
 8 | - b. __HEADERS:__ Which headers exist in markdown style?
 9 | - c. __EMPHASIS:__ How to emphasize text in markdown?
10 | - d. __LIST:__ How to create lists in markdown?
11 | - e. __IMAGES:__ How to add images in markdown?
12 | - f. __LINKS:__ How to add links in markdown?
13 | - g. __BLOCKQUOTES:__ How to add blockquotes in markdown?
14 | - h. __BACKSLASH ESCAPES:__ How to add backslash escapes in markdown?
15 | 
16 |  ## a. What is Markdown?
17 | - Markdown =  regular text with non-alphabetic characters to style text on the web.
18 | 
19 | ## b. HEADERS
20 | #      This is an `<h1>` tag
21 | ##     This is an `<h2>` tag
22 | ###    This is an `<h3>` tag
23 | ####   This is an `<h4>` tag
24 | #####  This is an `<h5>` tag
25 | ###### This is an `<h6>` tag
26 | 
27 | ## c. EMPHASIS
28 | To emphasize a text in markdown, use the following:
29 | _ITALIC_:
30 | - *:  *This text is italic* 
31 | - _: _This text is italic__
32 | __BOLD__:
33 | - **: **This text is bold**
34 | - __: __This text is bold__
35 | (**NOTE:** Combine them as __you__ like**)
36 | 
37 | ## d. LIST
38 | - Create an unordered list `<ul>`
39 | * Item 1
40 | * Item 2
41 |   * Item 2a
42 |   * Item 2b
43 | - Create an ordered list `<ol>`
44 | 1. Item 1
45 | 2. Item 2
46 | 3. Item 3
47 |    * Item 3a
48 |    * Item 3b
49 |    
50 | ## e. IMAGES
51 | - Format: ![Alt text]()
52 | - |[Github logo](/images/logo.png)
53 | 
54 | ## f. LINKS
55 | - http://github.com - automatic!
56 | - |[Github](http://github.com)
57 | 
58 | ## g. BLOCKQUOTES
59 | As Steve Jobs said:
60 | > Every one should learn to code.
61 | > It learns you to think!
62 | 
63 | ## h. BACKSLASH ESCAPES
64 | Markdown allows to use backslash escapes to generate literal characters which would otherwise have special meaning in Markdown´s formatting syntax. It provides backslash escapes for the following characters:
65 | - `*literal asterisk*`= *\literal askerisk\*
66 | - `\`= backslash
67 | - ` `= backtick
68 | - `*`= asterisk
69 | - `_`= underscore
70 | - `{}`= curly braces
71 | - `[]`= square brackets
72 | - `()`= parenthesis
73 | - `#`= hash mark
74 | - `+` = plus sign
75 | - `-` = minus sign (hyphen)
76 | - `.` = dot
77 | - `!` = exclamation mark.
78 | 
79 | 
80 | 
81 | 


--------------------------------------------------------------------------------
/Memory management.md:
--------------------------------------------------------------------------------
  1 | # Memory management
  2 | 
  3 | - Description:
  4 |     _Explanation of a garbage collection algorithm_ [MDN-Garbage Collection](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management#Garbage_collection).
  5 |         
  6 | ### Table of contents:
  7 | 
  8 | 1. [Introduction](#introduction).
  9 | 2. [Memory Life Cycle](#memory-life-cycle).
 10 | 3. [Garbage Collection](#garbage-collection).
 11 | 4. [Reference Counting Garbage Collection algorithm](#reference-counting-garbage-collection-algorithm).
 12 | 5. [Mark and sweep algorithm](#mark-and-sweep-algorithm).
 13 | 
 14 | ## Introduction
 15 | 
 16 | - 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**).
 17 | - Unlike JavaScript, when for example objects are not used any more they are automatically "garbage collected" to free memory.
 18 | - This gives a _**wrong**_ impression to JS developers to not care about memory management.
 19 | 
 20 | 
 21 | ## Memory Life Cycle
 22 | 
 23 | - Regardless of the programming language, memory life cycle is pretty much always the same:
 24 |     1. Allocate the memory you need. (_explicit in low-level languages implicit in high-level languages like JS_)
 25 |     2. Use the allocated memory. (read, write) (_explicit in all languages_)
 26 |     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)_)
 27 | 
 28 | ```
 29 | Allocate the memory in JS
 30 | ```
 31 |  ===> JavaScript does it alongside with declaring values.
 32 |  
 33 |  ```
 34 | Use the allocated memory
 35 |  ```
 36 |  ===> By reading or writing the value of a variable or an object property or even passing an argument to a function.
 37 | 
 38 | ```
 39 | Release the allocated memory
 40 | ```
 41 | ===>
 42 | - 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_. 
 43 | - 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).
 44 | 
 45 | ## Garbage Collection
 46 | 
 47 | - The algorithms of garbage collection depends on "reference"
 48 | 
 49 | 
 50 | ## Reference Counting Garbage Collection Algorithm
 51 | 
 52 | - Description:
 53 |     _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).
 54 | - Definition: One of algorithms of JS Grabage Collection Algorithms.
 55 | - The most naive Garbage Collection algorithm.
 56 | - 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". 
 57 | - MDN Example with a more clear explanation:
 58 | 
 59 | ```javascript
 60 | var o = { 
 61 |   a: {
 62 |     b: 2
 63 |   }
 64 | }; 
 65 | ```
 66 | 2 objects are created:
 67 | 
 68 | ```javascript
 69 | { 
 70 |   a: {
 71 |     b: 2
 72 |   }
 73 | }
 74 | ```
 75 | And 
 76 | ```javascript
 77 | {
 78 |     b: 2
 79 |   }
 80 | ```
 81 | The first one is referenced by being assigned to variable `o`. The second is referenced by the first one as a property of it.
 82 | 
 83 | ```javascript
 84 | var o2 = o; 
 85 | ```
 86 | Now the first object has a second reference `o2`
 87 | ```javascript
 88 | o = 1;     
 89 | ```
 90 | 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`.
 91 | ```javascript
 92 | var oa = o2.a; 
 93 | ```
 94 | The second object now has a reference `oa` by assigning the `o2` object `a` property to `oa`
 95 | ```javascript
 96 | o2 = 'yo';
 97 | ```
 98 | Now the first object loses its last reference `o2`. So it can be garbage collected.
 99 | ```javascript
100 | oa = null; 
101 | ```
102 | Now the second object loses its reference `oa`. So it can also be garbage collected.
103 | 
104 |            
105 | - Another example: _trapped reference_ Or _circularReference_
106 | ```javascript
107 | var div;
108 | window.onload = function() {
109 |   div = document.getElementById('myDivElement');
110 |   div.circularReference = div;// the div references itself. It will continue in memory even if it is removed from DOM tree.
111 |   div.lotsOfData = new Array(10000).join('*');//the div carries a lot of data. Memory consumed by this data will never be released.
112 | };
113 | ```
114 | 
115 | 
116 | ## Mark and sweep algorithm
117 | 
118 | - 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". 
119 | - 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. 
120 | - 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:
121 | ```javascript
122 | function f() {
123 |   var o = {};
124 |   var o2 = {};
125 |   o.a = o2; // o references o2
126 |   o2.a = o; // o2 references o
127 |   return 'hi';
128 | }
129 | 
130 | f();
131 | ```


--------------------------------------------------------------------------------
/Navigating Content.md:
--------------------------------------------------------------------------------
 1 | # Accessibility- [Navigating Content](#1-navigating-content)
 2 | _Source: Accesibility - Udacity Front End Web Development Nanodegree_
 3 | 
 4 | ### Table Of Contents: Navigating Content
 5 | - a. Headings
 6 | - b. Links
 7 | - c. Form Controls
 8 | - d. Landmarks
 9 | 
10 | ## 4. Navigating Content
11 | - Screen Reader can make you navigate through headings, links, form controls, and landmarks.
12 | 
13 | ###Screen Reader Shortcuts (OS X)
14 | - `CMD+F5`: turn on VoiceOver 
15 | - `TAB, Shift+TAB, arrow keys` (keyboard operation): work with VoiceOver running
16 | - `CMD+L`: jump to address bar
17 | - `CTRL+Option+U`: open Web Rotor / Type search term with Web Rotor open to search within Web Rotor
18 | - `CTRL + Option + ← ↑ ↓ → `: explore content
19 | - `CTRL + Option + CMD + H`: move __forward by heading__
20 | - `CTRL + Option + CMD + Shift + H`: move __backward by heading__
21 | 
22 | #### Resources
23 | - [Web AIM VoiceOver](https://webaim.org/articles/voiceover/)-full VoiceOverintroduction, including most keyboard commands available.
24 | - __Screen Reader Shortcuts (Windows)__ [NVDA](https://www.nvaccess.org/)-open source screen reader for Windows. 
25 | - [Web AIM Introduction to NVDA](https://webaim.org/articles/nvda/)- the basics of using NVDA to check accessibility.
26 | _ __Screen Reader Shortcuts (Linux)__ [Orca](https://help.gnome.org/users/orca/stable/)-Gnome desktop-manager for Linux. 
27 | 
28 | #### a. Headings
29 | - Use __meaningful headings__ and __links names__.
30 | - Use a good heading structure from `<h1>...<h6>`(for long complex content).
31 | - in __DEV TOOL:__ Look through the HTML of a page and identify each heading's number: `<h#>`
32 | 
33 | __JavaScript headings snippet:__
34 | ```
35 | var hs = document.querySelectorAll('h1,h2,h3,h4,h5,h6');
36 | for (var i = 0; i < hs.length; i++) {
37 |    console.log(hs[i].textContent.trim() + " " +  
38 |                hs[i].tagName,
39 |                hs[i]);
40 | }
41 | ```
42 | #### Resources (WebAIM checklist items)
43 | - [Writing Usefull Alt Text](https://webaim.org/techniques/alttext/), [1.3.2](http://webaim.org/standards/wcag/checklist#sc1.3.2),[2.4.10](http://webaim.org/standards/wcag/checklist#sc2.4.10), [1.3.1](http://webaim.org/standards/wcag/checklist#sc1.3.1), [2.4.1](http://webaim.org/standards/wcag/checklist#sc2.4.1), [2.4.6](http://webaim.org/standards/wcag/checklist#sc2.4.6)
44 | 
45 | -Besides `Headers`, also take into account `Screen Readers` and `VoiceControl`.
46 | - Other navigational options are: `links`, `form controls`and `landmarks`.
47 | 
48 | #### b. Links
49 | - Use descriptive link text 
50 | __Example:__ instead of using _"learn more"_ links text use `:learn more about bla bla".`
51 | - Most of the time, a link just needs to be a link! [2.4.9](http://webaim.org/standards/wcag/checklist#sc2.4.9)
52 | 
53 | #### c. Form Controls
54 | - [link Anti-patterns video](https://youtu.be/SiblO4dfYBg)
55 | 
56 | #### d. Landmarks
57 | - Navigate by landmarks:
58 | `<header>`
59 | `<nav>`
60 | `<main>`
61 | `<section>`
62 | `<article>`
63 | `<aside>`
64 | `<footer>`
65 | - Using the proper semantic elements helps assistive technology understand how elements relate to one another.
66 | 
67 | #### Takeaway
68 | - Make sure to use __meaningful headers, link text and page structure__.
69 | - Do not try to control the experience of a screen reader user. It will need to more confusion and less positive user experience. Besides, they will use the available information and their tools.
70 | 


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


--------------------------------------------------------------------------------
/Object-oriented programming in JavaScript.md:
--------------------------------------------------------------------------------
  1 | # Object-oriented programming in JavaScript
  2 | 
  3 | ### What is an object and how do I create it?
  4 | - __Array__ `[ ]`: ordered collection of elements, referenced by indexes
  5 | - __Object__ `{ }`: unordered collection of key/value pairs, referenced explicitly
  6 |     - Accessing an object's properties is _not entirely the same as in Python,_ as keys in Javascript don't need to be hashable (strings, numbers, floats). You access them either by
  7 |         - dot notation: `object.key`, or
  8 |         - bracket notation: `object['key']`
  9 |     - Both can be extended for nested objects.
 10 | 
 11 | ##### Creating objects
 12 |     const myobject = { }; // or
 13 |     const myObject = new Object();
 14 | 
 15 | ##### Adding or changing properties
 16 | Simply specify property name and give it a value. _We can also add methods (i.e. functions) to objects!_
 17 | 
 18 | ##### Removing properties
 19 |     `delete object['key'];` 
 20 |     // or
 21 |     `delete object.key;`
 22 | 
 23 | Primitives (string, number, boolean, float) are immutable, meaning they only change inside a function. Objects are reference-based and thus are mutable, meaning values change both inside and outside a function. Changes in a copy will thus also change the original. Thus, when comparing (===) objects, what matters is the reference.
 24 | 
 25 | ##### Calling methods
 26 |     `object['method']();` 
 27 |     // or
 28 |     `object.method();`
 29 | 
 30 | ##### Returning keys and values in an array
 31 |     `Object.keys(objectName);` 
 32 |     // and
 33 |     `Object.values(objectName);`
 34 | - If desired, an argument can be passed inside the brackets. 
 35 | 
 36 | ### The 'this' keyword
 37 | We use `this` to refer to the object at hand.
 38 | How a function is invoked determines the value of `this` inside the function.
 39 | - When invoked from a constructor function, the value of `this` is the newly created object (see _'Constructor functions'_).
 40 | - When invoked as a method, the value of `this`is whatever is left of the dot at invocation (i.e. the object).
 41 | - When invoked as a regular function, the value of `this` is the global `window` object.
 42 |     - Every `var` (__not__ `let` and `const`!) declaration made at the global level, i.e. outside of a function, becomes a property on the `window` object.
 43 |     - Likewise, every global function declaration becomes a method on the `window` object.
 44 |         - Global variables and functions are not ideal (tight coupling, name collisions), so only write them as a last resort!
 45 | 
 46 | ### Functions at runtime
 47 | 
 48 | JavaScript functions are _first-class objects_, and can be ...
 49 | - stored in a variable,
 50 | - passed in as an argument in another function (we call the passed-in argument the _callback function_),[*] and
 51 | - returned from another function (the so-called _higher-order function_)
 52 |     - It can be called using double parentheses.
 53 | ___
 54 | [*] Example array methods:
 55 | 1. `forEach()` takes in a callback function and invokes that functoin for each element in the array,
 56 |     `array.forEach(callbackFunc);`
 57 | 
 58 | 2. `map()` does the same, but returns a new array based on what's returned from the callback function, and
 59 |     ```    
 60 |     array.map(function(arrayitem) {
 61 |         return arrayitem.length;
 62 |     });
 63 |     ```
 64 | 3. `filter()` does the same as `map()`, but is used as a test: only the items that pass are included in the new array.
 65 |     ```
 66 |     array.filter(function(arrayitem) {
 67 |         return arrayitem.length < 6;
 68 |     });
 69 |     ```
 70 | ___
 71 |     
 72 | __Note:__ Functions can be invoked by (), objects can __NOT__.
 73 | 
 74 | Besides global scope and function scope, there is _runtime scope_. This is the context of the function, i.e. the set of variables available for the function to use.
 75 | A function has acces to: _function's arguments, local variables, variables from parent function scope, and global variables._
 76 | 
 77 |     const a = 'a'; // global variable
 78 |     function parent() {
 79 |         const b = 'b'; // variable from parent scope
 80 |         function child() {
 81 |             const c = 'c'; // local variable within function
 82 |         }
 83 |     };
 84 | 
 85 | CHILD > PARENT > GLOBAL _SCOPE CHAIN_: start sequence thoughts from innermost function and work outwards from there, building what innermost needs all the way to global window.
 86 | 
 87 | Functions will retain the scope chain plus access even if they're invoked somewhere else than where it was declared.
 88 | 
 89 | __Note:___ if two variables have the same name, the one that is found 'first' by the JavaScript engine prevails (_variable shadowing_).
 90 | 
 91 | ### Closure
 92 | The process of a function retaining access to its scope. Every function has closure.
 93 | 
 94 | ### Immediately-Invoked Function Expressions (IIFEs)
 95 | Functions that are called immeciately after they're defined.
 96 | 
 97 | Type | Code
 98 | --- | ---
 99 | Declaration | `function logger() {console.log('Hello!')};`
100 | Expression | `(function logger() {console.log('Hello!')});`
101 | IIFE | `(function logger(x) {console.log('Hello!')})();`
102 | 
103 | IIFEs can also wrap around nested functions. They create a private scope that protects variables and methods from being used, because the function is called immediately and thus variables are called immediately. This prevents from unwanted mutations or side-effects because of external access. The returned functions are still publicly accessible, but the variables defined within them are not.
104 | 
105 | ### Classes
106 | Classes are categories of objects.
107 | - __Object__: properties and methods
108 | - __Class__: blueprint for an object
109 | 
110 | ##### Constructor functions
111 | Start with a capital letter; Must be called with `new`; Has object created automatically
112 | 
113 | 
114 |     new SoftwareDev() {
115 |         this.favLang = 'JS'; // this refers to SoftwareDev
116 |     }; // no return statement!
117 | 
118 | 
119 | From here, you can create a new object (_an instance_) - as many as you like.
120 | 
121 | 
122 |     let developer = new SoftwareDeveloper();
123 | 
124 | 
125 | __Constructor functions accept arguments!__ We could update the previous as follows:
126 | 
127 | 
128 |     function SoftwareDeveloper (name) {
129 |         this.favLang = 'JS';
130 |         this.name = name;
131 |         this.introduce = function() {
132 |             console.log(`I'm ${this.name}!`);
133 |         }
134 |     };
135 | 
136 | 
137 | To instantiate a new object from here:
138 | 
139 | ```
140 |     let myself = new SoftwareDeveloper('Diana');
141 | ```
142 | If we would then invoke `myself.name`, it would yield Diana.
143 | 
144 | __So:__
145 | Define:
146 | 
147 | 
148 |     new FuncName();
149 | 
150 | 
151 | Add properties:
152 | 
153 | 
154 |     function FuncName(arg1, arg2) {
155 |         this.arg1 = arg1;
156 |         this.arg2 = arg2;
157 |         this.prop3 = x;
158 |         this.prop4 = function() {
159 |             console.log(`Hello ${arg2}!`);
160 |         };
161 |     };
162 | 
163 | 
164 | Assign to variable to instantiate new object __or__ start with 2. and then add:
165 | 
166 | 
167 |     const objName = new FuncName(arg1, arg2);
168 | 
169 | 
170 | To check if objName was created with FuncName: `objName instanceof FuncName`.
171 | 
172 | ### Setting the value of `this` ourselves
173 | 1. `call()`
174 | 2. `apply()`
175 | 3. `bind()`
176 | 
177 | ### Prototypal inheritance
178 | We can add methods to the constructor function's __prototype__ property. The prototype property is an object. All objects created by that construcor are linked to this prototype object.
179 | 
180 | 
181 |     Object.prototype.method = function() {
182 |         if (this.canTalk) {
183 |             console.log('Hi, I am ' + this.name);
184 |         }
185 |     };
186 | 
187 | ##### Prototype chain
188 | * Objects own properties and methods ˅
189 | * Constructor prototype ˅
190 | * Object() object (top level parent) ˅
191 | * Still not found? `Undefined`
192 | 
193 | ##### Check where property comes from
194 | 1. `hasOwnProperty();`
195 | 2. `isPrototypeOf();`
196 | 3. `Object.getPrototypeOf();`
197 | 
198 | Every time an object is created, a special property is assigned to it under the hood: constructor. It returns a reference to the constructor function that created that object (`object.constructor`).
199 | 
200 | ##### Subclasses
201 | To set up the prototype of an object ourselves, we use `Object.create()`. This is a clean method to establish prototypal inheritance.
202 | 


--------------------------------------------------------------------------------
/Polyfills.md:
--------------------------------------------------------------------------------
 1 | # Polyfills
 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 |   "idiana".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 |   "diana".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 | 


--------------------------------------------------------------------------------
/Powerful Builds.md:
--------------------------------------------------------------------------------
 1 | ## TEST: Powerful Builds(Lesson 16)
 2 | 
 3 | ### Gulp and Grunt
 4 | Leverage the power of build tools liek Gulp and Grunt 
 5 | - to automate the process of converting your development code into streamlined production-ready
 6 | 
 7 | ### Gulp 
 8 | - [Installation Instructions](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md)
 9 | 
10 | ###  Installing Gulp and Course Code
11 | _Note_: if you have not installed NodeJS or NPM you will need to install these first before installing Gulp. You can download and install NodeJS and NPM by going to [Nodes official site](https://nodejs.org/en/) and downloading the latest version of NodeJS.
12 | 
13 | - 1. Take a few moments and install Gulp. 
14 | The instructions are listed in the [link](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md).
15 | 
16 | - 2. Grab the course code from Github.
17 | - [Gulp- course on Github](https://github.com/udacity/ud892) 
18 | 
19 | 
20 | Make CSS Suck less with Sass
21 | - [SASS](http://sass-lang.com/)
22 | 
23 | 
24 | #### Resources 
25 | - [Gulp Installation](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md)
26 | - [Nodes JS](https://nodejs.org/en/)
27 | - [Gulp- course on Github](https://github.com/udacity/ud892) 
28 | - [SASS](http://sass-lang.com/)
29 | - [Gulp Autoprefixer plugin on npm](https://www.npmjs.com/package/gulp-autoprefixer)
30 | 


--------------------------------------------------------------------------------
/Productive Editing.md:
--------------------------------------------------------------------------------
 1 | ## TEST: Productive Editing (Lesson 15)
 2 | 
 3 | Use keyboard shortcuts and code editor extensions to 
 4 | - speed up your development process
 5 | - help to avoid repetitive typing tasks
 6 | 
 7 | ### TEXT EDITOR
 8 | In the first couple of days of using a new editor, try out lots of build-in shortcuts and features, even if they seem overkill. 
 9 | - Try them all out and observe yourself. 
10 | - Which shortcuts stick?
11 | - Which do you have to force yourself to use?
12 | 
13 | ### Extending your Editor
14 | - Open the Sublime console with View -> Show Console or Ctrl + `
15 | - _[Package Control](https://packagecontrol.io/)_: The Sublime Text package manager
16 | - _[Emmet](https://emmet.io/)_ home page
17 | - _[Emmet](https://packagecontrol.io/packages/Emmet)_ on Package Control
18 | - _[SideBarEnhancements](https://packagecontrol.io/packages/SideBarEnhancements)_ on Package Control
19 | - _[ColorPicker](https://packagecontrol.io/packages/ColorPicker)_ on Package Control
20 | - _[ColorHighlighter](https://packagecontrol.io/packages/Color%20Highlighter)_ on Package Control
21 | 
22 | #### Resources 
23 | - [Sublime Text Editor](http://www.sublimetext.com/)
24 | A`symlink`= a shortcut for the time being. Read more on Wikipedia.
25 | - [Symbolic link](https://en.wikipedia.org/wiki/Symbolic_link)
26 | 
27 | 


--------------------------------------------------------------------------------
/Project4Plan.md:
--------------------------------------------------------------------------------
 1 | ### Project 4 Planning:
 2 | 
 3 | ### LEARN
 4 |   1. [HTML5 Canvas course](https://classroom.udacity.com/courses/ud292).==> Take [notes](https://classroom.udacity.com/nanodegrees/nd001/parts/4942f4d7-a48d-4794-9eb0-404b3ed3cfe1/modules/269645859775463/lessons/2696458597239847/concepts/e23270c3-149f-45f6-803c-ff7162d10649).
 5 |   - [HTML5 Canvas Basics](https://www.w3schools.com/Tags/ref_canvas.asp)
 6 |   - From Pixel to Animation
 7 |   - [Canvas Rendering](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D)
 8 |   2. [OOP course](https://classroom.udacity.com/courses/ud292).==> Take [notes](https://docs.google.com/document/d/1F9DY2TtWbI29KSEIot1WXRqqao7OCd7OOC2W3oubSmc/pub?%20embedded=true#h.x3l4yzzbeosv).
 9 |   - Scopes
10 |   - Closures
11 |   - The ´this´keyword
12 |   - Prototype Chain
13 |   - Object Decorator Pattern
14 |   - Functional Classes
15 |   - Prototypal Classes
16 |   - Pseudoclassical Patterns
17 |   - Superclass and Subclasses
18 |   - Pseudoclassical Subclasses
19 | 
20 | ### READ
21 |   3. Read [Project Guidelines]() carefully ==> Take notes.
22 |   4. Read [project rubric](https://review.udacity.com/#!/projects/2696458597/rubric) carefully ==> Take notes.
23 |   5. Read JS files comments carefully ==> Take notes.
24 |   6. Read [Trello road map](https://trello.com/b/LhvG0w4X/fend-help-board) ==> Take notes.
25 |   7. Read [Understanding the project-Davide](https://github.com/davide2894/frontend-nanodegree-arcade-game/blob/master/understanding-the-project.md)==> Take notes.
26 | 
27 | ### CREATE A PLAN & MAKE A TODOLIST
28 |   7. Collect and organize all your notes in one file.
29 |   
30 | ### DEBUG STARTERCODE
31 |   8. Before starting project debug it in concole. ==> Complete the missing.
32 | 
33 | ### START TO CODE  
34 |   9. Start the project.
35 |   - JS1
36 |   - JS2
37 |   - JS3
38 |   - HTML
39 |   - CSS
40 | 
41 | ### DEBUG CODE
42 |   10. Download [StartersCode](https://github.com/udacity/frontend-nanodegree-arcade-game).
43 |   11. Debug the code.
44 | 
45 | ### REVIEW CODE CODE
46 |   12. Review the code: [Review JavaScript code](http://udacity.github.io/frontend-nanodegree-styleguide/javascript.html)
47 |   
48 | #### RESOURCES
49 | VIDEOS:
50 | - [Office Hours: P3: Understanding the engine.js](https://www.youtube.com/watch?v=oLSu3zc2jSA)
51 | - [Arcade Game Demo](https://www.youtube.com/watch?v=SxeHV1kt7iU&feature=youtu.be)
52 | - [Frogger Clone Game Completion](https://www.youtube.com/watch?v=cvF55i4Pb9M)
53 | - [Udacity: Classic Arcade Game like Frogger](https://www.youtube.com/watch?v=7PHhRrjgTDA)
54 | - [HTML5 Canvas Game](http://www.lostdecadegames.com/how-to-make-a-simple-html5-canvas-game/)
55 | - [Collision](https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection)
56 | 
57 | EXAMPLE GAME GitHub:
58 | - [Frontend Nanodegree Arcade Game](https://github.com/JayBtrdgrd/frontend-nanodegree-arcade-game/blob/gh-pages/README.md)
59 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Code-Notes
  2 | Here I put all things I am learning per subject, in order to keep track:)
  3 | 
  4 | ## Content
  5 | - __1) WEBFOUNDATION__
  6 | - __2) WEBPROGRAMMING-JAVASCRIPT__
  7 | - __3) EXPLORE JAVASCRIPT-OBJECTS-TOOLS & TESTING__
  8 | - __4) FRONT END APPLICATIONS__
  9 | - __5) BUILD WITH REACT__
 10 | - __6) EXTRA__
 11 | - __7) CAREER__
 12 | 
 13 | ### __1) WEBFOUNDATION__
 14 | 
 15 | __HTML__
 16 | - [x] 1.1 HTML Syntax
 17 | - [x] 1.2 HTML Syntax Problem Set
 18 | - [x] 1.3 PROJECT: Article to Mockup
 19 | 
 20 | __CSS__
 21 | - [x] 1.4 CSS Syntax
 22 | - [x] 1.5 CSS Syntax Problem Set
 23 | 
 24 | __CODE TRICKS__
 25 | - [x] 1.6 Write Code Fast
 26 | - [x] 1.7 PROJECT: Animal Trading Card
 27 | 
 28 | __RESPONSIVE DESIGN__
 29 | - [x] 1.8 Responsive Design
 30 | - [x] 1.9 Starting Small (from small devices (mobile) to large devices (desktop)
 31 | - [x] 1.10 Building up (Media Queries)
 32 | - [x] 1.11 Common Responsive Patterns
 33 | - [x] 1.12 Optimizations
 34 | 
 35 | __READme´s__
 36 | - [x] 1.13 Writing READme´s
 37 | - [x] 1.14 PROJECT: Build a Portfolio Website (responsive design)
 38 | 
 39 | ### __2) WEBPROGRAMMING-JAVASCRIPT__
 40 | __JAVASCRIPT__
 41 | - [x] 2.1 JS What is JavaScript?
 42 | - [x] 2.2 JS Datatypes & Variables
 43 | - [x] 2.3 Js Conditionals
 44 | - [x] 2.4 JS Loops
 45 | - [x] 2.5 JS Functions
 46 | - [x] 2.6 JS Arrays
 47 | - [x] 2.7 Js Objects
 48 | - [x] 2.8 JS Syntax
 49 | 
 50 | __VERSION CONTROL__
 51 | - [x] 2.9 Shell Workshop
 52 | - [x] 2.10 Version Control
 53 | - [x] 2.11 Create a Git Repo
 54 | - [x] 2.12 Review Repo history
 55 | - [x] 2.13 Add Commits to repo
 56 | - [x] 2.14 Tagging, Branching & Merging 
 57 | - [x] 2.15 Undoing Changes
 58 | - [x] 2.16 Working with Remotes
 59 | - [x] 2.17 Working on anothers Dev. repository
 60 | - [x] 2.18 Staying in Sync with a remote repository
 61 | 
 62 | __The DOM (Document Object Modal)__
 63 | - [x] 2.19 the DOM
 64 | - [x] 2.20 Creating Content with JavaScript
 65 | - [x] 2.21 Working with Browser Events
 66 | - [x] 2.22 PROJECT: Pixel Art Maker
 67 | - [x] 2.23 Performance
 68 | - [x] 2.24 Project: Memory Game
 69 | 
 70 | ### __3) EXPLORE JAVASCRIPT-OBJECTS-TOOLS & TESTING__
 71 | __ACCESIBILITY__
 72 | - [x] 3.1 Accessibility Overview
 73 | - [x] 3.2 Focus
 74 | - [x] 3.3 Semantics Basics
 75 | - [x] 3.4 Navigating Content
 76 | - [x] 3.5 ARIA
 77 | - [x] 3.6 Style
 78 | 
 79 | __JS Intermediate__
 80 | - [x] 3.7 Objects in Depth
 81 | - [x] 3.8 Functions in Runtime
 82 | - [x] 3.9 Classes & Objects
 83 | - [x] 3.10 Functions
 84 | - [x] 3.11 Built-ins
 85 | - [x] 3.12 Professional Developer-Fu
 86 | - [x] 3.13 PROJECT: Classical Arcade Game Clone
 87 | 
 88 | ### __4) FRONT END APPLICATIONS__
 89 | - [x] 4.1 Changing Expectations
 90 | - [x] 4.2 Refactoring with Separation of Concerns
 91 | - [x] 4.3 Creating Promises
 92 | - [x] 4.4 Chaining Promises
 93 | - [x] 4.5 Ajax with XHR
 94 | - [x] 4.6 Ajax with jQuery
 95 | - [x] 4.7 Ajax with Fetch
 96 | - [x] 4.8 Features of Single Page Apps
 97 | - [x] 4.9 Examine a Framework's Source
 98 | - [x] 4.10 Angular
 99 | - [x] 4.11 Ember
100 | - [x] 4.12 The Benefits of Offline First
101 | - [x] 4.13 Introducing the Service Worker
102 | - [x] 4.14 Project: Restaurant Reviews App—Stage 1
103 | 
104 | ### __5) BUILD WITH REACT__
105 | - [x] 5.1 Why React?
106 | - [x] 5.2 Rendering UI with React
107 | - [] 5.3 State Management
108 | - [] 5.4 Render UI with External Data
109 | - [] 5.5 Managing App Location with React Router
110 | - [] 5.6 Project: MyReads Project Workspace
111 | - [] 5.7 Getting Started with the APIs
112 | - [] 5.8 Understanding API Services
113 | - [] 5.9 Using the APIs in Practice
114 | - [] 5.10 Project: Neighborhood Map (React)
115 | 
116 | ### __6) EXTRA__
117 | - [x] 6.1 Efficient Inputs Part 1
118 | - [x] 6.2 Efficient Inputs Part 2
119 | - [] 6.3 Fast Forms
120 | - [] 6.4 Touch Support
121 | - [x] 6.5 The Basics: the DOM, $, and Selectors
122 | - [x] 6.6 The Tricks: DOM Manipulation
123 | - [x] 6.7 Event Listeners with jQuery
124 | - [] 6.8 HTTP's Request/Response Cycle
125 | - [] 6.9 HTTP/1
126 | - [] 6.10 HTTPS
127 | - [] 6.11 HTTP/2
128 | - [x] 6.12 Security
129 | 
130 | ### __7) CAREER__
131 | - [] 7.1
132 | - [] 7.2
133 | - [] 7.3
134 | - [] 7.4
135 | - [] 7.5
136 | - [] 7.6
137 | - [] 7.7
138 | - [] 7.8
139 | - [] 7.9
140 | - [] 7.10
141 | - [] 7.11
142 | - [] 7.12
143 | - [] 7.13
144 | - [] 7.14
145 | - [Linkedin Profile](https://blog.udacity.com/2015/01/essential-tips-stand-linkedin-profile.html)
146 | 


--------------------------------------------------------------------------------
/React.md:
--------------------------------------------------------------------------------
  1 | # React- summary
  2 | This summary is made from LessonMaterial from @Nicolas Marcora.
  3 | 
  4 | `React`= a `JavaScript library for creating user interfaces. 
  5 | Its core principles are declarative code, efficiency, and flexibility.`
  6 | 
  7 | ## Intro: The power of React
  8 | 
  9 | 1) Define things ONLY once
 10 | 2) Work with your data
 11 | 3) React does the rest: everything else falls into place without you having to worry about it. 
 12 | 4) It is fast!
 13 | 
 14 | ## React Syntax:
 15 | 
 16 | TO RENDER
 17 | ```
 18 | ReactDOM.render(
 19 |   <App />,
 20 |   document.querySelector('#root')
 21 | )
 22 | ```
 23 | ### Styling
 24 | Just like with regular HTML, we can give our React elements attributes. For example, you easily target your element with CSS by giving it a class or an id attribute.
 25 | 
 26 | __NOTE__: Since the class keyword is already taken in JavaScript, className is used instead.
 27 | Also note: Attributes in React are camelCased. i.e. onClick instead of onlick.
 28 | ```
 29 | const App = () => <h1 className='title' id='hello'>Hello</h1>;
 30 | ```
 31 | 
 32 | ### Interpolation
 33 | Since we're not actually using HTML, but JSX, we have the power to use JavaScript directly inside our components. All you have to do wrap your JavaScript code around {}.
 34 | ```
 35 | const App = () => <h1>{3 + 5}</h1>;
 36 | const App = () => <h1>{'hello'.toUpperCase()}</h1>;
 37 | const name = 'Diana';
 38 | 
 39 | const App = () => <h1>{name}</h1>;
 40 | const name = 'Diana';
 41 | 
 42 | const App = () => <h1>{name.length > 4 && name}</h1>;
 43 | const name = 'Diana';
 44 | 
 45 | const App = () =>
 46 |   <h1>{name.length > 4 ? name : 'Your name is too short.'}</h1>;
 47 | ```
 48 |   
 49 | ### Props
 50 | Every React component gets passed a props object. 
 51 | This object has all data passed to a component 
 52 | and is how a parent component can send things to a child component.
 53 | Since props are not directly owned by a component, you should avoid modifying them.
 54 | 
 55 | ```
 56 | const App = props => <h1>{`Hello, ${props.name}!`}</h1>;
 57 | 
 58 | ReactDOM.render(
 59 |   <App name='Diana' />,
 60 |   document.querySelector('#root')
 61 | )
 62 | Composition
 63 | You can render React components within other React components.
 64 | 
 65 | const Title = () => 'Hello';
 66 | 
 67 | const App = () => (
 68 |   <div>
 69 |     <Title />
 70 |   </div>
 71 | );
 72 | ```
 73 | 
 74 | ### Class components
 75 | Sometimes just having props and rendering elements is not enough. 
 76 | Class components allow you to more logic (lifecycle methods) and state.
 77 | 
 78 | ```
 79 | class App extends React.Component {
 80 |   render() {
 81 |     return <div>App</div>;
 82 |   }
 83 | }
 84 | State
 85 | Sometimes, just having data passed down by a parent component is not enough, and we need the component to have some data of its own. This is called a component's state.
 86 | 
 87 | class App extends React.Component {
 88 |   state = {
 89 |     name: 'Diana'
 90 |   }
 91 | 
 92 |   render() {
 93 |     return <div>{this.state.name}</div>;
 94 |   }
 95 | }
 96 | ```
 97 | or
 98 | ```
 99 | class App extends React.Component {
100 |   constructor() {
101 |     this.state = state = {
102 |       name: 'Diana'
103 |     }
104 |   }
105 | 
106 |   render() {
107 |     return <div>{this.state.name}</div>;
108 |   }
109 | }
110 | ```
111 | 
112 | ### Modifying state
113 | We said before that props don't belong to a component, so we should avoid modifying them. But state totally belongs to a component, so it's perfectly ok to change it. However, you should never change it directly. 
114 | Instead, class components give you a handy method called setState.
115 | ```
116 | class App extends React.Component {
117 |   state = {
118 |     name: 'Diana'
119 |   }
120 | 
121 |   capitalizeName = () => {
122 | 
123 |     this.state.name = this.state.name.toUpperCase(); // AVOID THIS
124 |     this.setState({name: this.state.name.toUpperCase()}); // DO THIS INSTEAD
125 | 
126 |   }
127 | 
128 |   render() {
129 |     return <div>
130 | 
131 |       {this.state.name}
132 | 
133 |     </div>;
134 |   }
135 | }
136 | ```
137 | 
138 | ### Events
139 | Like in regular HTML, you can add events to your React elements. 
140 | This allows you to "react" to things like a button click or a form submission.
141 | The list is long, but you can learn more about what events are available here.
142 | ```
143 | class App extends React.Component {
144 | 
145 |   // ...
146 | 
147 |   render() {
148 |     return <div>
149 | 
150 |       {this.state.name}
151 |       <button onClick={this.capitalizeName}>CAPITALIZE</button>
152 |     </div>;
153 |   }
154 | }
155 | ```
156 | 
157 | ### Resources
158 | [React](https://s3.eu-west-2.amazonaws.com/nmarcora/react-from-scratch.html)
159 | 


--------------------------------------------------------------------------------
/Resilient CSS.md:
--------------------------------------------------------------------------------
 1 | # Resilient CSS-Description
 2 | 
 3 | A video series ( 7 episodes) on how resilient CSS is and how to use new properties on every browser on the earth to make most of our users have similar or even the same experience with your websites.
 4 | It is presented by [Jen Simmons](https://twitter.com/jensimmons?lang=en).
 5 | 
 6 | Initial notes:
 7 | 
 8 | 1. Can I use
 9 | 2. It is ok for some property being ignored by some unspported browsers.
10 | 3. override
11 | 4. feature query
12 | 5. feature query support / "not"
13 | 6. working another way out. / doesn't deserve any of the above and there are another way out.


--------------------------------------------------------------------------------
/Responsive Images.md:
--------------------------------------------------------------------------------
  1 | # **Responsive Images**
  2 | 
  3 | A course by [Udacity](https://classroom.udacity.com/courses/ud882).
  4 | 
  5 | ----------------------------------------------------------------------------------------------
  6 | 
  7 | ## **Introduction**
  8 | 
  9 | - More than 60% of Bytes per page is images.
 10 | 
 11 | <figure>
 12 | <img src="http://chart.googleapis.com/chart?chs=400x225&cht=p&chco=007099&chd=t:1556,47,77,386,86,175,10&chds=0,1556&chdlp=b&chdl=total%202350%20kB&chl=Images+-+1556+kB%7CHTML+-+47+kB%7CStylesheets+-+77+kB%7CScripts+-+386+kB%7CFonts+-+86+kB%7CVideo+-+175+kB%7COther+-+10+kB&chma=|5&chtt=Average+Bytes+per+Page+by+Content+Type">
 13 |   <figcaption>
 14 |     Average Bytes Per Page Per Content Type. A diagram from <a href="http://httparchive.org">http://httparchive.org</a>.
 15 |   </figcaption>
 16 | <figure>
 17 | 
 18 | 
 19 | ## **Bits & Pixels**
 20 | 
 21 | #### bits = pixels * bits per pixel (bpp)
 22 | 
 23 | 
 24 | ## **Relative Sizing**
 25 | 
 26 | - **Fixed image size in for example pixels would create Unresposive image that will not resize.**
 27 | - **If you make `width : 100%;` It will resize as broswer resize but it will lead to pixelation of the image when it resizes to larger of its natural width.**
 28 | - **But if you make `max-width: 100%` It will resize to a maximum width of its natural width only and will not pixelate.**
 29 | - **If you want 2 images to fit side by side you can change to `max-width: 50%;`.**
 30 | 
 31 | ## **Quiz: calc()**
 32 | 
 33 | - **Using `Calc` is very important when we want the size (width for example) to take the remaining area after a fixed area is taken (for a maring for example).**
 34 | 
 35 | **_This is a [quiz](https://classroom.udacity.com/courses/ud882/lessons/3520939843/concepts/37391188270923)._**
 36 | 
 37 | ## **vh vw vmin vmax CSS Units**
 38 | 
 39 | - **vh: viewport height   vw: viewport width.  vmin: viewport minimum   vmax: viewport maximum.**
 40 | 
 41 | - **You can set the height of an image to 100% but this only works if the html and body elements are set to 100%.**
 42 | 
 43 | - **Alternatively, you can set **
 44 | ```
 45 | width: 100vw;
 46 | height: 100vh;
 47 | ```
 48 | **
 49 | 
 50 | - **Take care of the aspect ratio in this case if you want to keep it.**
 51 | 
 52 | - **It is better to view vmin and vmax with examples to understand.**
 53 | 
 54 | ## **Raster vs Vector**
 55 | 
 56 | ### **Raster images**
 57 | 
 58 |    - **is a grid of individual dots of color.**
 59 |      
 60 |    - **Source:**
 61 |      
 62 |       - Camera.
 63 |       - Scanner.
 64 |       - HTML canvas.
 65 |         
 66 |    - **Example:** photographs.
 67 |    
 68 |    
 69 |    
 70 | ### **Vector images**
 71 |  
 72 |    - **is a set of curves, lines, shapes, fill colors, and gradients.**
 73 |        
 74 |    - **Source:**
 75 |       - Adobe Illustrator.
 76 |       - Inkscape.
 77 |       - Using a vector format such as SVG.
 78 |    - **Examples:** Logos, Line art.
 79 |        
 80 |    - **Browser can render vector images at any size.**
 81 |        
 82 | ## **General Rules:**
 83 | 
 84 | 1. Use JPEG for Photographs.
 85 | 2. Use  WebP for Photographs(better than JPEG) (supported by chrome).
 86 | 3. Use SVG for vector images, solid color graphics, logos, line art.
 87 | 4. Use PNG for the same as above if you can't use SVG.
 88 | 
 89 | ### Some useful links:
 90 | - [Image Optimization](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization).
 91 | 
 92 | - [About WebP](https://developers.google.com/speed/webp/?csw=1).
 93 | 
 94 | ####  **IMPORTANT :heavy_exclamation_mark: [Page Speed Insights](https://developers.google.com/speed/pagespeed/insights/)**
 95 | 
 96 | 
 97 | ## **Performance**
 98 | 
 99 | ### **Latency:** is the delay between request & response.
100 | 
101 | - **The latency affects Page loading times more than bandwidth.**
102 | 
103 | - **So to increase performance you need to _compress  images_ and _decrease the no of requests_.**
104 | 
105 | - **It is better to use text overlaying an image than to use a text as an image.**
106 | 
107 | 
108 | ## **Background images**
109 | 
110 | - **background-size: _cover_ or _contain_**
111 | - **Background images are responsive.**
112 | 
113 | ## **Symbol characters**
114 | 
115 | - **You can write symbols instead of images by using unicode.**
116 | - **They are more than 110000 characters.**
117 | - **They are responsive.**
118 | 
119 | 
120 | ## **Icon Fonts**
121 | 
122 | - **They are treated as text.**
123 | - **Scalable (responsive) as it is a vector without a decrease in quality with minimum downloads (less requests). Indeed only one request**
124 | 
125 | - **You can style it easily using CSS like shadow, size, color, etc. And you also add it by CSS clases.**
126 | 
127 | - **They are lots of them.**
128 | 
129 | - **Examples: 
130 | 
131 |     - **[Font Awesome](https://fontawesome.com/).**
132 |     - **[Zocial](http://zocial.smcllns.com/).**
133 | 
134 | 
135 | ## **SVG & Data Uri**
136 | 
137 | - **Maximum scalability.**
138 | 
139 | - **Very low size.**
140 | 
141 | - **Can be implemented using HTML, OR CSS.**
142 | 
143 | 
144 | ## **Accessibility**
145 | 
146 | - **Some advices for using alt attribute with img element:**
147 | 
148 |     - `alt` attributes should be set on every image.
149 |     - `alt` attributes should be descriptive for important images.
150 |     - `alt` attributes should be empty for images that are just decorations.\
151 |     
152 | - **ChromeVox is a free screen reader.**    


--------------------------------------------------------------------------------
/Rethinking Testing.md:
--------------------------------------------------------------------------------
  1 | ## Rethinking Testing (Lesson 21)
  2 | 
  3 | ### Description
  4 | - Why writing test is an important part of any project
  5 | - Get started writing your own tests.
  6 | 
  7 | ### What is a Test?
  8 | - `Test driven development`.
  9 | - `Test`= validating an expectation.
 10 | 
 11 | ### Always Failing
 12 | - A test that can not be passed, for a test give only results, is the test fails.
 13 | - Failure is the only option= validation an expectation about something.
 14 | - Failing a test is NOT BAD. 
 15 | - Test failure help you build bug-free apps with confidence. 
 16 | 
 17 | ### Quiz: Validating an Opinion
 18 | - What expectation was the teacher testing?
 19 | -[] A) Students were studying for the test
 20 | -[X] B) Teacher taught material sufficiently
 21 | -[] C) Student attended class each day.
 22 | - Answer: Thanks for completing that!
 23 | The teacher expects they had taught the material sufficiently and is testing that expectation.
 24 | 
 25 | ### Identifying Expectations
 26 | - A test is based around _EXPECTATIONS_.
 27 | - Start identifying AREAS in your code in which you are setting _expectations_.
 28 | - By doing this, you know what kind of test you need to run.
 29 | 
 30 | ```
 31 | function add(x, y) {
 32 |    return x + y;
 33 | }
 34 | ```
 35 | - It would be called like this:
 36 | - `add(2,3);  -----// 5`
 37 | 
 38 | Expectations about this function:
 39 | - When calling the function: 
 40 | - __Expectation 1__= `add()function has been defined` and it `exists`.
 41 | - __Expectation 2__= the function is accomplishing the `intended task`.
 42 | - __Expectation 2__= the function will always be `called as intended`.
 43 | 
 44 | ### Quiz: Defining Expectations
 45 | _ _What Expectations apply to my Function?_
 46 | ```
 47 | function add(x, y) {
 48 |    return x + y;
 49 | }
 50 | ```
 51 | -[x] Expect 2+3= 5 
 52 | -[x] Expect error if non-numbers are used
 53 | -[x] Expect 0.2 + 0.2 = 0.3 
 54 | - __Answer__: All of these expectations apply to my function! Surprisingly, one of them is actually incorrect at this time - let's see which one that is.
 55 | 
 56 | - [StackOverflow: Is JavaScript's Floating Point Math Broken?](https://stackoverflow.com/questions/588004/is-floating-point-math-broken)
 57 | 
 58 | - NOTE: the 3rd expectation would be 0.1 + 0.2 = 0.300000...4
 59 | - Computers perform Float Math differently.
 60 | 
 61 | ### Refactoring add()
 62 | - How to `refactor a function`, based on the `Identified Expectations`:
 63 | 
 64 | - FUNCTION:
 65 | ```
 66 | function add(x, y) {
 67 |    return x + y;
 68 | }
 69 | ```
 70 | - EXPECTATIONS:
 71 | - 1) Expect 2+3= 5
 72 | - 2) Expect error
 73 | - 3) Expect 0.1 + 0.2= 0.3
 74 | 
 75 | - This proces= the "RED-GREEN-Refactor-cycle".
 76 | 
 77 | ```
 78 | function add(x, y) {
 79 |    if (typeof x ¬¬ typeof y) 1== ´number´){
 80 |     throw new Error(´Params must be a number.´);
 81 |    }
 82 |    
 83 |    return x + y;
 84 | }
 85 | ```
 86 | - This function passes expectation 1 & 2.
 87 | 
 88 | ```
 89 | function add(x, y) {
 90 |    if (typeof x ¬¬ typeof y) 1== ´number´){
 91 |     throw new Error(´Params must be a number.´);
 92 |    }
 93 |    result 0 x + y;
 94 |    if parseInt(result) !==result) {
 95 |         result = parseFloat(result.toFixed(1));
 96 |    }
 97 |    return x + y;
 98 | }
 99 | ```
100 | - This function passes expectation 1,2 & 3
101 | - So this function acts exactly, like before, but this time ERROR free.
102 | 
103 | ### Quiz: Writing Expectations in Code
104 | //Example:
105 | //Expect add(2,3) to equal 5
106 | `expect(add(2,3)).toBe(5);`
107 | 
108 | //Example:
109 | //Expect add() to throw an error if x/y are not numbers
110 | `expect(add(2, ´test´)).toThrow();`
111 | 
112 | //Example:
113 | //Expect add(0.1, 0.2) to equal 0.3
114 | `expect(add(0.1, 0.2)).toBe(0.3);`
115 | 
116 | - Congrats! You just wrote your very first test!
117 | 
118 | #### Take Away
119 | - Now you 
120 | - 1) understand the importance of testing.
121 | - 2) identify problems with the first version of the add() function.
122 | - 3) refactor your code to solve those issues.
123 | - 4) can be confident not to break anything during refactoring, because the test will always tell you what went wrong.
124 | 
125 | 
126 | 
127 | 
128 | 
129 | 


--------------------------------------------------------------------------------
/Semantics Basics.md:
--------------------------------------------------------------------------------
  1 | # Accessibility- [Semantics Basics](#3-semantics-basics)
  2 | 
  3 | - __How to create websites for users with visual disabilities?__
  4 | - __How to use HTML effectively to create a good experience for all users?__
  5 | 
  6 | ## 3. Semantics Basics
  7 | - a. [Semantics & Assistent Technology](#3-assistent-technology)
  8 | - b. [Affordances](#3-affordances)
  9 | - c. [Role Name State Value](#3-role-name-state-value)
 10 | - d. [The Accessibility Tree](#3-the-accessibility-tree)
 11 | - e. [Semantics in Native HTML](#3-semantics-in-native-HTML)
 12 | - f. [Naming Labeling and Alternative text](#3naming-labeling-and-alternative-text)
 13 | 
 14 | 
 15 | ### a. Assistent Technology 
 16 | __Assistent Technology__ =  all `devices`, `software`, and `tools`, that _help any person with a disability complete a task_.
 17 | - __Examples:__ _screen reader, braille display, magnification,voice controll, switch access, sip & puff, eyetracking, but also
 18 | robotic devices, browser zoom, customed designed game controller and add-on chrome extension._ 
 19 | - For all these technologies, __programmatic expressed semantics__ are needed.
 20 | 
 21 | ### b. Affordances
 22 | - __Affordances:__ the qualities (`properties`) of an object, that defines its use.
 23 | - __Examples:__ _buttons, sliders, sroll-downs, playback controls, price limites_ 
 24 | - `Choose an option`
 25 | - `Enter a line of text`
 26 | - `Enter a specific date`
 27 | - `Yes/No option`
 28 | - `Perform an action`
 29 | 
 30 | ### c. Role, Name, Value
 31 | __How to access the visual information of the User Interface (UI)?__ 
 32 | - Information need to be expressed in such a way that it is _accesible programmatically by assistence technology_.
 33 | - Markup is used in a way that `facilitates accesibility`, so a _Screen reader can provide info for __Elements___': 
 34 | - __ROLE__= _What type? ex. Edit Text
 35 | - __NAME__= What name(label)? ex. your e-mail address
 36 | - __STATE__ = What state?
 37 | - __VALUE__= What value?
 38 | 
 39 | #### SOURCES: [WebAim](https://www.w3.org/TR/UNDERSTANDING-WCAG20/ensure-compat-rsv.html)
 40 | 
 41 | ### d. The Accessibility Tree
 42 | - Considering the A11y tree when writing your HTML will help in making your sites more accessible.
 43 | - The browser transforms __DOM tree__ (`natively semantic elements` or `othered with ARIA`) into the __Accessibility tree__ (=all information for screenreader: `Name`, `Role`, `State` and `Value`). 
 44 | - It can be done, for much of the __DOM__ has `implicit semantic meaning`. It uses __standard HTML native elements__ that are automatically recognized by browsers on a variety of platforms.
 45 | -Using the __proper semantic elements__ will make your life much easier when addressing accessibility concerns.
 46 | 
 47 | - __Example__: 
 48 | - `Main`
 49 | - `Form`
 50 | - `Radio Button`: name= "round trip", state= "selected"
 51 | - `Edit Text`: name = "full name"
 52 | - `Combo box`:  value= "no preference", name: "Seat type", state= "collapsed"
 53 | - `Button`: name= "search"
 54 | ```
 55 | <main>
 56 | //<div class= "card">
 57 | <form>
 58 |   //<div class= "trip selector">
 59 |   //<div class= "row">
 60 |   //<div class= "inline control col-2">
 61 |   <label for="seatType"> SteatType </label>
 62 |   <select name="seatType" id= "seatType">
 63 |   <option value="0">No preference</option>
 64 |   <option value="1">Aisle seat</option>
 65 |    <option value="2">Window seat</option>
 66 |   </select>
 67 | //</div>
 68 | 
 69 |    //<div class= "inline control submit-form col-1">
 70 |     <button type= "submit" id= "submitBtn">Search</button>
 71 |     //</div>
 72 |   //</div>
 73 |   //</div>
 74 |   </form>
 75 | //</div>
 76 | </main>
 77 | ```
 78 | __NOTE:__ information will be _reduced to the most important information only_: `Name`, `Role`, `State` and `Value`.
 79 | 
 80 | ### e. Semantics in Native HTML
 81 | ```
 82 | <label>
 83 | <input type="radio" checkedName= "tType"  value= "0">
 84 | Round Trip
 85 | </Label>
 86 | ```
 87 | #### SOURCES:
 88 | - [WebAIM Guideline 1.1](http://webaim.org/standards/wcag/checklist#g1.1)
 89 | - [label](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label) demonstrates two !label" options with it's labelling.
 90 | - [label](https://www.w3.org/TR/html5/forms.html#category-label) The W3C list of types of elements for a "label" tag.
 91 | 
 92 | ### f. Naming, Labeling and Alternative text
 93 | - Using proper labeling not only helps accessibility but it makes the element easier to target for all users!
 94 | - There are 2 ways of __labeling form inputs__.
 95 | - Element could have a: 
 96 | 1. `visual label (name)` _name="radio button"_ or a
 97 | ```
 98 | <label>
 99 |   <input type="radio">
100 |   Check me
101 | </label>
102 | ```
103 | 2. `text alternative` _images_.
104 | ```
105 | <input type="radio" id="radio-button">
106 | <label for="radio-button">Check me</label>
107 | ```
108 | - Using these labeling allows users to `toggle the input element` by also _clicking the label_.
109 | 
110 | __Alt text:__ 
111 | 1. Use an alternative text to the image, if not loaded.
112 | 2. Describe what the image about for screen reader.
113 | 3. Logos =  assign the company name.
114 | 4. Search icon = empty alt. (This will skip it from accessibility tree.)
115 | 5. Any image meant for decoration = empty alt.
116 | 6.  Specify each image's alt attribute in full, e.g. `alt="bees"`.
117 | 
118 | #### Takeaway
119 | - Check this [SEMANTIC HTML](https://internetingishard.com/html-and-css/semantic-html/)
120 | 


--------------------------------------------------------------------------------
/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): {…}}


--------------------------------------------------------------------------------
/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).


--------------------------------------------------------------------------------
/WeLoveOptimization.md:
--------------------------------------------------------------------------------
 1 | ## We love Optimization (Lesson 19)
 2 | 
 3 | ### Browser Rendering Optimization
 4 |  - [Browser Rendering Optimization](https://eu.udacity.com/course/browser-rendering-optimization--ud860)
 5 | 
 6 | ### Web Performance Optimization
 7 | - [Web Performance Optimization](https://www.udacity.com/course/website-performance-optimization--ud884)
 8 | 
 9 | ### Responsive Web Design
10 | - [Responsive Web Design](https://eu.udacity.com/course/responsive-web-design-fundamentals--ud893)
11 | 
12 | ### Responsive Images
13 | - [Responsive Images](https://classroom.udacity.com/courses/ud882)
14 | 
15 | 


--------------------------------------------------------------------------------
/WebTooling and Automation Conclusion.md:
--------------------------------------------------------------------------------
 1 | ## Web Tooling and Automation Conclusion (Lesson 20)
 2 | 
 3 | ### Overview
 4 | - Automate automation tools.
 5 | - Tooling to scaffold entire projects.
 6 | 
 7 | ### Scaffolding
 8 | - [HTML5boilerplate](https://html5boilerplate.com/)
 9 | - [Web Starter Kit](https://developers.google.com/web/tools/starter-kit/)
10 | - [Yeoman](http://yeoman.io/)
11 | 
12 | 
13 | 
14 | 
15 | 


--------------------------------------------------------------------------------
/Write README´s.md:
--------------------------------------------------------------------------------
 1 | # **WRITE READMEs**
 2 | Source:  _Udacity Front End Nanodegree program_.
 3 | ---------------------------------------------------------------------------------------------------------------------
 4 | 
 5 |  ## **Who Is Your Documentation For?**
 6 | 
 7 | #### Documentation is for:
 8 | - **Future YOU.**
 9 | - **Co-workers, or Contributers.**
10 | - **End User.**
11 | _Therefore, Documentations should be **clear, descriptive and easy to follow**._
12 | 
13 | ## **Anatomy Of A README**
14 | 
15 | 1. **Title & Description.**
16 |    - a sentece or two may be enough but be sure to provide clear explanation.
17 |    
18 | 2. **Information for undersanding your code/project.**
19 |    This may include:
20 |    - _Installation instructions._
21 |    - _Dependencies on other libraries, frameworks._
22 |    - _Usage._
23 |    - _Known bugs._
24 |    - _Issues._
25 |    - _Examples._
26 |    
27 | 3. **License.**  
28 | 
29 | ## **Markdown**
30 | - a light markup language often used for READMEs (though you'll find other use cases for it, too!). 
31 | - Here is [Markdown documentaion](https://help.github.com/articles/getting-started-with-writing-and-formatting-on-github/).
32 | 
33 | ## **HTML**
34 | You can still use HTML in markdown when you could not accomplish something using markdown.
35 | 
36 | ## **Dillinger**
37 | - Markdown files use **.md** extension. It needs to be opened by specific software like [**Dillinger**](https://dillinger.io/).
38 | - You can also open it in your text editors using some plugin or extension.
39 | - For VS Code you can install [Markdown All In One extension](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one).
40 | 


--------------------------------------------------------------------------------
/Writing Test Suites.md:
--------------------------------------------------------------------------------
1 | ## Writing Test Suites (Lesson 22)
2 | 
3 | #### Correctiong Asynchronous Test
4 | - _[OPTIONAL]_If you are curious to see what happens in each combination of passing in vs. calling done, one of our students tried all of them to see what would happen. The results in this [thread](https://discussions.udacity.com/t/async-tests-why-the-second-done-call/40751/6?u=durant) are illuminating and go beyond the [demos for Jasmine 2.1.2.](https://jasmine.github.io/2.1/introduction.html).
5 | 
6 | - Take special note of the case where if you pass in the done function as an argument, you must call it (=otherwise things break!). 
7 | - The Jasmine team might accept a pull request to update [this information](https://discussions.udacity.com/t/async-tests-why-the-second-done-call/40751/4) for all students.
8 | - If you _test async_, NO NEED to pass in and call `done`.
9 | 


--------------------------------------------------------------------------------
/img/Async.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dianavile/Code-Notes/d05d9823e1a7891a44efb29d4eb93107c38def6e/img/Async.png


--------------------------------------------------------------------------------
/img/CSS1.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dianavile/Code-Notes/d05d9823e1a7891a44efb29d4eb93107c38def6e/img/CSS1.gif


--------------------------------------------------------------------------------
/img/document.readyState.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dianavile/Code-Notes/d05d9823e1a7891a44efb29d4eb93107c38def6e/img/document.readyState.jpg


--------------------------------------------------------------------------------
/img/future_of_js_2018_progress.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dianavile/Code-Notes/d05d9823e1a7891a44efb29d4eb93107c38def6e/img/future_of_js_2018_progress.pdf


--------------------------------------------------------------------------------
/img/reacts-data-flow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dianavile/Code-Notes/d05d9823e1a7891a44efb29d4eb93107c38def6e/img/reacts-data-flow.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <title>Cat Clicker</title>
 6 | </head>
 7 | <body>
 8 |     <ul id="cat-list"></ul>
 9 |     <div id="cat">
10 |         <h2 id="cat-name"></h2>
11 |         <div id="cat-count"></div>
12 |         <img id="cat-img" src="" alt="cute cat">
13 |     </div>
14 |     <script src="js/app.js"></script>
15 | </body>
16 | </html>


--------------------------------------------------------------------------------
/meme-maker.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <!-- This is an exercise app. Code from UDACITY HTML5 CANVAS COURSE.-->
  3 | <html>
  4 | <head>
  5 |   <title>MemeMaker-Simple</title>
  6 |     
  7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  8 |   <meta name="mobile-web-app-capable" content="yes">
  9 |   <meta name="apple-mobile-web-app-capable" content="yes">
 10 |   <style>
 11 |     #image-container {
 12 |       display: flex;
 13 |     }
 14 |   </style>
 15 | </head>
 16 | 
 17 | <body>
 18 | 
 19 |   <div>
 20 |     <input type="file" id="file" />  
 21 |   </div>
 22 |   <div id="image-container">
 23 |     <canvas width="500" height="500"></canvas>
 24 |     <div>
 25 |       <span>Top Line:</span><br/>
 26 |       <input id="topLineText" type="text"><br/>
 27 |       <span>Bottom Line:</span><br/>
 28 |       <input id="bottomLineText" type="text"><br/>
 29 |       <button id="saveBtn">Save</button>
 30 |     </div>
 31 |   </div>
 32 |   <script>
 33 |     function textChangeListener (evt) {
 34 |       var id = evt.target.id;
 35 |       var text = evt.target.value;
 36 |       
 37 |       if (id == "topLineText") {
 38 |         window.topLineText = text;
 39 |       } else {
 40 |         window.bottomLineText = text;
 41 |       }
 42 |       
 43 |       redrawMeme(window.imageSrc, window.topLineText, window.bottomLineText);
 44 |     }
 45 |     
 46 |     function redrawMeme(image, topLine, bottomLine) {
 47 |       // Get Canvas2DContext
 48 |       var canvas = document.querySelector('canvas');
 49 |       var ctx = canvas.getContext("2d");
 50 |       // Your code here
 51 |       ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
 52 |       ctx.font = "36pt impact";
 53 |       ctx.textAlign = "center";
 54 |       ctx.fillStyle = "white";
 55 |       ctx.strokeStyle = "black";
 56 |       if (topLine != null) {
 57 |         ctx.fillText(topLine, canvas.width/2, 40);
 58 |         ctx.strokeText(topLine, canvas.width/2, 40);
 59 |       }
 60 |       if (bottomLine != null) {
 61 |         ctx.fillText(bottomLine, canvas.width/2, 460);
 62 |         ctx.strokeText(bottomLine, canvas.width/2, 460);
 63 |       }  
 64 |     }
 65 |     
 66 |     function saveFile() {
 67 |       window.open(document.querySelector('canvas').toDataURL());
 68 |     }
 69 |     
 70 |     function handleFileSelect(evt) {
 71 |       var canvasWidth = 500;
 72 |       var canvasHeight = 500;
 73 |       var file = evt.target.files[0];
 74 |       
 75 |       
 76 |       
 77 |       var reader = new FileReader();
 78 |       reader.onload = function(fileObject) {
 79 |         var data = fileObject.target.result;
 80 |         
 81 |         // Create an image object
 82 |         var image = new Image();
 83 |         image.onload = function() {
 84 |           
 85 |           window.imageSrc = this;
 86 |           redrawMeme(window.imageSrc,  window.topLineText, window.bottomLineText);
 87 |         }
 88 |         
 89 |         // Set image data to background image.
 90 |         image.src = data;
 91 |         console.log(fileObject.target.result);
 92 |       };
 93 |       reader.readAsDataURL(file)
 94 |     }
 95 |     
 96 |     window.topLineText = "";
 97 |     window.bottomLineText = "";
 98 |     var input1 = document.getElementById('topLineText');
 99 |     var input2 = document.getElementById('bottomLineText');
100 |     input1.oninput = textChangeListener;
101 |     input2.oninput = textChangeListener;
102 |     document.getElementById('file').addEventListener('change', handleFileSelect, false);
103 |     document.querySelector('button').addEventListener('click', saveFile, false);
104 |   </script>
105 | 
106 | </body>
107 | </html>


--------------------------------------------------------------------------------