├── LICENSE
├── Notebooks
    ├── Beginner's Guide to React - Kent C Dodds  - egghead
    │   ├── react-tutorial.html
    │   ├── react-tutorial2.html
    │   ├── react-tutorial3.html
    │   ├── react-tutorial4.html
    │   ├── react-tutorial5-time-rerender.html
    │   ├── react-tutorial6-events.html
    │   ├── react-tutorial7-statefull-stopwatch.html
    │   └── react-tutorial8-dynamic-input.html
    ├── JavaScript & React for Developers - Cassidy Williams - Udemy
    │   ├── ajax example
    │   │   ├── ajax.js
    │   │   └── ajaxExample.html
    │   ├── notes.md
    │   └── toggle theme
    │   │   ├── index.html
    │   │   ├── themes.css
    │   │   └── toggle.js
    └── JavaScript30 - Wes Bos
    │   ├── Array Cardio 2
    │       └── index.html
    │   ├── Array Cardio
    │       ├── index.html
    │       └── script.js
    │   ├── Hold shift to check multiple checkboxes
    │       └── index.html
    │   ├── Konami Key Sequence Detection
    │       └── index.html
    │   └── Slide in on scroll
    │       └── index.html
├── README.md
├── index.html
├── log-index.md
└── log.md


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Syk Houdeib
 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 | 


--------------------------------------------------------------------------------
/Notebooks/Beginner's Guide to React - Kent C Dodds  - egghead/react-tutorial.html:
--------------------------------------------------------------------------------
 1 | <div id="root"></div>
 2 | <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 3 | <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 4 | <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 5 | <script type="text/babel">
 6 | const rootElement = document.getElementById('root')
 7 | // ** This is without react ** //
 8 | // const element = document.createElement('div')
 9 | // element.textContent = 'Hello World'
10 | // element.className = 'container'
11 | // rootElement.appendChild(element)
12 | 
13 | 
14 | // ** This is without JSX ** //
15 | /* const element = React.createElement('div', {
16 |     className: 'container',
17 |     children: 'Hello World',
18 | }) */
19 | 
20 | // ** This is with JSX ** //
21 | // const element = <div className="container">Hello World</div>
22 | 
23 | // ** This is using a variable for the content and className ** //
24 | // const content = 'hello world'
25 | // const myClassName = 'container'
26 | // const element = <div className={myClassName + '-item1'}>{content}</div>
27 | // ^^ this will produce <div class="container-item1">hello world</div>
28 | 
29 | // ** This is using a props object and a react self-closing element ** //
30 | const content = 'hello world'
31 | const myClassName = 'container'
32 | const props = {
33 |     className: 'container',
34 |     children: 'Hello World',
35 | }
36 | const element = (
37 |     <div {...props} />
38 | )
39 | 
40 | ReactDOM.render(element, rootElement)
41 | 
42 | </script>


--------------------------------------------------------------------------------
/Notebooks/Beginner's Guide to React - Kent C Dodds  - egghead/react-tutorial2.html:
--------------------------------------------------------------------------------
 1 | <div id="root"></div>
 2 | <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 3 | <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 4 | <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 5 | <script type="text/babel">
 6 | 
 7 | const rootElement = document.getElementById('root')
 8 | 
 9 | // A simple component
10 | /* const helloWorld = <div>hello world</div>
11 | const element = (
12 |     <div className="container">
13 |         {helloWorld}
14 |         {helloWorld}
15 |     </div>
16 | ) */
17 | 
18 | // using a function to parameterise
19 | /* const message = props => <div>{props.msg}</div>
20 | const element = (
21 |     <div className="container">
22 |         {message({msg: 'Hello World'})}
23 |         {message({msg: 'Goodbye World'})}
24 |     </div>
25 | ) */
26 | 
27 | // using JSX
28 | /* const message = props => <div>{props.msg}</div>
29 | const element = (
30 |     <div className="container">
31 |         {React.createElement(message, {msg: 'Hello World'})}
32 |         {React.createElement(message, {msg: 'Goodbye World'})}
33 |     </div>
34 | ) */
35 | 
36 | // using JSX components (with capital first letter)
37 | /* const Message = props => <div>{props.msg}</div>
38 | const element = (
39 |     <div className="container">
40 |         <Message msg='Hello World' />
41 |         <Message msg='Goodbye World' />
42 |     </div>
43 | ) */
44 | 
45 | // using `children`
46 | const Message = props => <div>{props.children}</div>
47 | const element = (
48 |     <div className="container">
49 |         <Message>Hello World</Message>
50 |         <Message>Goodbye World</Message>
51 |     </div>
52 | )
53 | 
54 | ReactDOM.render(element, rootElement)
55 | 
56 | </script>


--------------------------------------------------------------------------------
/Notebooks/Beginner's Guide to React - Kent C Dodds  - egghead/react-tutorial3.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="root"></div>
 4 |     <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 5 |     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 6 |     <script src="https://unpkg.com/prop-types/prop-types.js"></script>
 7 |     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 8 |     <script type="text/babel">
 9 | 
10 |     function SayHello(props) {
11 |         return (
12 |             <div>
13 |                 Hello {props.firstName}{' '}
14 |                 {props.lastName || 'Unknown'}!
15 |             </div>
16 |         )
17 |     }
18 | 
19 |     // propType implementation to check for the correct property type
20 |     // you don't need this if you are using the React PropType Package
21 |     /* const PropTypes = {
22 |         string(props, propName, componentName) {
23 |             if (typeof props[propName] !== 'string') {
24 |                 return new Error(`You should pass a string for ${propName} in ${componentName}, instead you passed type ${typeof props[propName]}`)
25 |             }
26 |         }
27 |     } */
28 | 
29 |     SayHello.propTypes = {
30 |         firstName: PropTypes.string.isRequired,
31 |         lastName: PropTypes.string.isRequired,
32 |     }
33 | 
34 |     ////////////////////
35 |     // using as class instead of as function
36 |     class SayHello extends React.Component {
37 |         static propTypes = {
38 |             firstName: PropTypes.string.isRequired,
39 |             lastName: PropTypes.string.isRequired,
40 |         }
41 |         render() {
42 |             const {firstName, lastName} = this.props
43 |             return (
44 |                 <div>
45 |                     Hello {firstName} {lastName}!
46 |                 </div>
47 |             )
48 |         }
49 |     }
50 | 
51 | 
52 | 
53 |     ReactDOM.render(
54 |         <SayHello firstName={true} />,
55 |         document.getElementById('root')
56 |     )
57 | 
58 |     </script>
59 | </body>
60 | </html>


--------------------------------------------------------------------------------
/Notebooks/Beginner's Guide to React - Kent C Dodds  - egghead/react-tutorial4.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="root"></div>
 4 |     <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 5 |     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 6 |     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 7 |     <script type="text/babel">
 8 | 
 9 |     // Render {message} or 'no message' if none exist 1
10 |     /* function Message({message}) {
11 |         if (!message) {
12 |             return <div>No Message</div>
13 |         }
14 |         return <div>{message}</div>
15 |     } */
16 | 
17 |     // Render {message} or 'no message' if none exist 2 using react create element
18 |     /* function Message({message}) {
19 |         if (!message) {
20 |             return React.createElement('div', null, 'no message')
21 |         }
22 |         return React.createElement('div', null, message)
23 |     } */
24 | 
25 |     // Render {message} or 'no message' if none exist 3 using ternary operator
26 |     /* function Message({message}) {
27 |         return message
28 |             ? React.createElement('div', null, message)
29 |             : React.createElement('div', null, 'no message')
30 |     } */
31 | 
32 |     // Render {message} or 'no message' if none exist 4 wrap it in a div using JS interpolation
33 |     /* function Message({message}) {
34 |         return (
35 |             <div>
36 |                 {message
37 |                     ? React.createElement(
38 |                         'div',
39 |                         null,
40 |                         message,
41 |                     )
42 |                     :  React.createElement(
43 |                         'div',
44 |                         null,
45 |                         ' no message',
46 | 
47 |                     )
48 |                 }
49 |             </div>
50 |         )
51 |     } */
52 | 
53 |     // Render {message} or 'no message' if none exist 5 refactor in JSX
54 |     function Message({message}) {
55 |         return (
56 |             <div>
57 |                 {message
58 |                     ? (<div>{message}</div>)
59 |                     : (<div>no message</div>)
60 |                 }
61 |             </div>
62 |         )
63 |     }
64 | 
65 |     ReactDOM.render(
66 |         <Message message='Hello World' />, // {null}
67 |         document.getElementById('root'),
68 |     )
69 | 
70 |     </script>
71 | </body>
72 | </html>


--------------------------------------------------------------------------------
/Notebooks/Beginner's Guide to React - Kent C Dodds  - egghead/react-tutorial5-time-rerender.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="root"></div>
 4 |     <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 5 |     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 6 |     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 7 |     <script type="text/babel">
 8 | 
 9 |     const rootElement = document.getElementById('root')
10 | 
11 |     function tick() {
12 |     const time = new Date().toLocaleTimeString()
13 |     const element = <div>It is <input value={time} /> now</div>
14 |     ReactDOM.render(element, rootElement)
15 |     }
16 |     tick()
17 |     setInterval(tick, 1000)
18 |     </script>
19 | </body>
20 | </html>


--------------------------------------------------------------------------------
/Notebooks/Beginner's Guide to React - Kent C Dodds  - egghead/react-tutorial6-events.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="root"></div>
 4 |     <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 5 |     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 6 |     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 7 |     <script type="text/babel">
 8 | 
 9 |     const state = {eventCount: 0, username: ''}
10 | 
11 |     function App() {
12 |         return (
13 |             <div>
14 |                 <p>
15 |                     Number of events: {state.eventCount}
16 |                 </p>
17 |                 <p>
18 |                     <button onClick={increment}>Trigger</button>
19 |                 </p>
20 |                 <p>You Typed: {state.username}</p>
21 |                 <p>
22 |                     <input onChange={updateUsername}/>
23 |                 </p>
24 |             </div>
25 |         )
26 |     }
27 | 
28 |     function increment() {
29 |         setState({
30 |             eventCount: state.eventCount + 1,
31 |         })
32 |     }
33 | 
34 |     function updateUsername(event) {
35 |         setState({
36 |             username: event.target.value,
37 |         })
38 |     }
39 | 
40 |     function setState(newState) {
41 |         Object.assign(state, newState)
42 |         renderApp()
43 |     }
44 | 
45 |     function renderApp() {
46 |         ReactDOM.render(
47 |             <App />,
48 |             document.getElementById('root'),
49 |         )
50 |     }
51 |     renderApp()
52 | 
53 |     </script>
54 | </body>
55 | </html>


--------------------------------------------------------------------------------
/Notebooks/Beginner's Guide to React - Kent C Dodds  - egghead/react-tutorial7-statefull-stopwatch.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="root"></div>
 4 |     <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 5 |     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 6 |     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 7 |     <script type="text/babel">
 8 | 
 9 |     class StopWatch extends React.Component {
10 |         state = {lapse: 0, running: false}
11 |         handleRunClick = () => {
12 |             this.setState(state => {
13 |                 if (state.running) {
14 |                     clearInterval(this.timer)
15 |                 } else {
16 |                     const startTime =
17 |                         Date.now() - this.state.lapse
18 |                     this.timer = setInterval(() => {
19 |                         this.setState({
20 |                             lapse: Date.now() - startTime,
21 |                         })
22 |                     })
23 |                 }
24 |                 return {running: !state.running}
25 |             })
26 |         }
27 |         handleClearClick = () => {
28 |             clearInterval(this.timer)
29 |             this.setState({lapse: 0, running: false})
30 |         }
31 |         // to clear memory leak
32 |         componentWillUnmount(){
33 |             clearInterval(this.timer)
34 |         }
35 |         render() {
36 |             const {lapse, running} = this.state
37 |             const buttonStyles = {
38 |                 border: '1px solid #ccc',
39 |                 background: '#fff',
40 |                 fontSize: '2em',
41 |                 padding: 15,
42 |                 margin: 5,
43 |                 width: 200,
44 |             }
45 |             return (
46 |                 <div style={{textAlign: 'center'}}>
47 |                     <label
48 |                         style={{
49 |                             fontSize: '5em',
50 |                             display: 'block',
51 |                             border: '1px solid #ccc',
52 |                         }}
53 |                     >
54 |                         {lapse} ms
55 |                     </label>
56 |                     <button
57 |                         onClick={this.handleRunClick}
58 |                         style={buttonStyles}
59 |                     >
60 |                         {running ? 'Stop' : 'Start'}
61 |                     </button>
62 |                     <button
63 |                         onClick={this.handleClearClick}
64 |                         style={buttonStyles}
65 |                     >
66 |                         Clear
67 |                     </button>
68 |                 </div>
69 |             )
70 |         }
71 |     }
72 | 
73 |     const element = <StopWatch />
74 |     ReactDOM.render(
75 |         element,
76 |         document.getElementById('root')
77 |     )
78 | 
79 |     </script>
80 | </body>
81 | </html>


--------------------------------------------------------------------------------
/Notebooks/Beginner's Guide to React - Kent C Dodds  - egghead/react-tutorial8-dynamic-input.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <body>
 3 |     <div id="root"></div>
 4 |     <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 5 |     <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 6 |     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 7 |     <script type="text/babel">
 8 | 
 9 |     class NameForm extends React.Component {
10 |         state = {error: this.props.getErrorMessage('')}
11 |         handleSubmit = event => {
12 |             event.preventDefault()
13 |             const value =
14 |                 event.target.elements.username.value
15 |             const error = this.props.getErrorMessage(
16 |                 value,
17 |             )
18 |             if (error) {
19 |                 alert(`error: ${error}`)
20 |             } else {
21 |                 alert(`success: ${value}`)
22 |             }
23 |         }
24 |         handleChange = event => {
25 |             const {value} = event.target
26 |             this.setState({
27 |                 error: this.props.getErrorMessage(value),
28 |             })
29 |         }
30 |         render() {
31 |             const {error} = this.state
32 |             return (
33 |                 <form>
34 |                     <label>
35 |                         Secret Word:
36 |                         <input
37 |                             type="text"
38 |                             onChange={this.handleChange}
39 |                             name="username"
40 |                         />
41 |                     </label>
42 |                     <br />
43 |                     {error ? <div style={{color: 'red'}}>{error}</div> : null}
44 |                     <button disabled={Boolean(error)} type="submit">Submit</button>
45 |                 </form>
46 |             )
47 |         }
48 |     }
49 | 
50 |     ReactDOM.render(
51 |         <NameForm
52 |             getErrorMessage={value => {
53 |                 if (value.length < 10) {
54 |                     return `10 characters minimum`
55 |                 }
56 |                 if (!value.includes('s')) {
57 |                     return `Must include "s"`
58 |                 }
59 |                 return null
60 |             }}
61 |         />,
62 |         document.getElementById('root')
63 |     )
64 | 
65 |     </script>
66 | </body>
67 | </html>


--------------------------------------------------------------------------------
/Notebooks/JavaScript & React for Developers - Cassidy Williams - Udemy/ajax example/ajax.js:
--------------------------------------------------------------------------------
 1 | // The callback method
 2 | /* let a = new XMLHttpRequest();
 3 | 
 4 | a.addEventListener('readystatechange', function(r) {
 5 |   if (r.target.status === 200) {
 6 |     console.log(r.target.response);
 7 |   }
 8 | });
 9 | 
10 | a.open('GET', 'https://api.github.com/users/syknapse', true);
11 | a.send(); */
12 | 
13 | //The promises method
14 | fetch('https://api.github.com/users/syknapse')
15 |   .then(function(r) {
16 |     console.log(r.status);
17 |     return r.json();
18 |   })
19 |   .then(function(j) {
20 |     console.log(j);
21 |   })


--------------------------------------------------------------------------------
/Notebooks/JavaScript & React for Developers - Cassidy Williams - Udemy/ajax example/ajaxExample.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>AJAX Example</title>
 5 |   <script src="ajax.js"></script>
 6 | </head>
 7 | <body>
 8 |   <div class="container">
 9 |     <h1>AJAX Example</h1>
10 |     <p>Open up the console :)</p>
11 |   </div>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/Notebooks/JavaScript & React for Developers - Cassidy Williams - Udemy/notes.md:
--------------------------------------------------------------------------------
  1 | # JavaScript and React for Developers
  2 | 
  3 | ## DOM
  4 | 
  5 | Getting an element
  6 | 
  7 | ```js
  8 | document.getElementById('id')
  9 | document.getElementsByClassName('class')
 10 | document.getElementsByTagName('html tag')
 11 | document.querySelector('css selector') // only first
 12 | document.querySelectorAll('css selector') // all
 13 | ```
 14 | 
 15 | Creating
 16 | 
 17 | ```js
 18 | createElement('element')
 19 | createAttribute('attribute')
 20 | 
 21 | // Example
 22 | let newParagraph = document.createElement('p');
 23 | newParagraph.innerText = 'This text will be added to the new paragraph';
 24 | document.body.appendChild(newParagraph);
 25 | 
 26 | let newAttribute = document.createAttribute('id');
 27 | newAttribute.value = 'newID'; // this will create a new id called newID
 28 | newParagraph.setAttributeNode(newAttribute); // the new paragraph will now have id='newID'
 29 | ```
 30 | 
 31 | How to implement `getElementsByAttribute`?
 32 | 
 33 | ```js
 34 | function getElementsByAttribute(attribute, value) {
 35 |     const allElements = document.getElementsByTagName('*');
 36 |     let matches = [];
 37 | 
 38 |     for (let i = 0; i < allElements.length; i++) {
 39 |         element = allElements[i];
 40 |         if (element.getAttribute(attribute) === value) {
 41 |             matches.push(element);
 42 |         }
 43 |     }
 44 |     return matches;
 45 | }
 46 | ```
 47 | 
 48 | ## Events
 49 | 
 50 | ```js
 51 | //  listener🔽 .... event we're🔽 listening for .. 🔽callback function
 52 | element.addEventListener("event", function() {
 53 |     // do something
 54 | });
 55 | 
 56 | // Example
 57 | document.getElementById('btn').addEventListener("click", function() {
 58 |     console.log('Print this when a button has been clicked');
 59 | });
 60 | ```
 61 | 
 62 | Custom Event
 63 | 
 64 | ```js
 65 | // Creates a custom event
 66 | document.body.addEventListener('customTimeEvent', stateTime);
 67 | 
 68 | function stateTime(e) {
 69 |     alert(`Event time is: ${e.detail}`);
 70 | }
 71 | 
 72 | const myCustomEvent = new CustomEvent('customTimeEvent', {
 73 |     'detail': new Date()
 74 | });
 75 | 
 76 | // Fires the event
 77 | document.body.dispatchEvent(myCustomEvent)
 78 | ```
 79 | 
 80 | ## ES6
 81 | 
 82 | ### Default Values
 83 | 
 84 | ```js
 85 | function someFunction(x = 10, y = 15) {
 86 |     console.log(x + y)
 87 | }
 88 | // If argument is not provided, defaults are used
 89 | someFunction(); // 35
 90 | someFunction(0); // 15 (x=0, y=15)
 91 | someFunction(2, 4); // 6
 92 | ```
 93 | 
 94 | ### Destructuring
 95 | 
 96 | ```diff
 97 | // Object destructuring
 98 | - let person = {
 99 | -    first: 'Alberto',
100 | -    last: 'Jesus-Maria La Luz',
101 | -    city: 'Albacete',
102 | -    job: 'Doblaje de mierda'
103 | - };
104 | - let first = person.first; // then repeat for all the other keys
105 | - first // 'Alberto'
106 | 
107 | + // Destructuring
108 | + let { first, last, city, job } = person
109 | + first // 'Alberto'
110 | ```
111 | 
112 | ```js
113 | // default values can be used too
114 | let { first = 'Alberto', last, city, job} = person
115 | 
116 | // Assign different variable names
117 | let { first: firstName, last: familyName, city, job} = person
118 | ```
119 | 
120 | ```js
121 | // Array destructuring
122 | let arrayExample = [1, 2, 3]
123 | //destructure
124 | let [a, b, c] = arrayExample
125 | a // 1
126 | b // 2
127 | ```
128 | 
129 | ```js
130 | // swapping variable values
131 | [y, z] = [z, y]
132 | ```
133 | 
134 | ### Object literals
135 | 
136 | To initialize an object
137 | 
138 | ```js
139 | let x = 'hello';
140 | let y = 'world';
141 | 
142 | let z = {
143 |     x,
144 |     y
145 | }
146 | 
147 | z // {x: "hello", y: "world"}
148 | 
149 | // also
150 | let z = {
151 |     x() {
152 |         // do things
153 |     },
154 |     y() {
155 |         // do things
156 |     }
157 | }
158 | ```
159 | 
160 | ### Template Literals
161 | 
162 | + Defined by `Back-ticks`
163 | + Use interpolations `${foo}`
164 | + `foo` can be a variable `${fooIsVar}`
165 | + `foo` can be an expression `${a + b}`
166 | + `foo` can be a function `${func()}`
167 | 
168 | ### Arrow Functions
169 | 
170 | ```diff
171 | - function add(x, y) {
172 | -     return x + y;
173 | - }
174 | 
175 | + var add = (x, y) => x + y;
176 | 
177 | // also
178 | + var add = (x, y) => {
179 | +     x + y;
180 | + };
181 | ```
182 | 
183 | + Always function expressions
184 | + Anonymous
185 | + redefine `this`
186 | 


--------------------------------------------------------------------------------
/Notebooks/JavaScript & React for Developers - Cassidy Williams - Udemy/toggle theme/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Theme Toggler</title>
 5 |   <link rel="stylesheet" href="themes.css">
 6 | </head>
 7 | <body>
 8 |   <div class="container">
 9 |     <h1>Variation on a Theme</h1>
10 |     <p class="poem">
11 |       Now this is a story all about how <br>
12 |       My <strong>JavaScript</strong> flipped turned upside down <br>
13 |       And I'd like to take an <strong>event</strong>, just sit right there <br>
14 |       I'll tell you how I became the <strong>queen of the web and software</strong>
15 |     </p>
16 |     <button id="theme">Toggle Theme</button>
17 |   </div>
18 |   <script src="toggle.js"></script>
19 | </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/Notebooks/JavaScript & React for Developers - Cassidy Williams - Udemy/toggle theme/themes.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |   margin: 0;
 3 |   padding: 0;
 4 |   font-family: 'Helvetica', 'Arial', sans-serif;
 5 | }
 6 | 
 7 | .container {
 8 |   max-width: 500px;
 9 |   margin: 20px auto;
10 |   text-align: center;
11 | }
12 | 
13 | h1 {
14 |   color: #21252B;
15 |   font-weight: normal;
16 |   font-size: 3em;
17 |   letter-spacing: 1px;
18 |   margin: 0;
19 |   text-align: center;
20 |   text-shadow: 2px 2px 0 #f5f5f5, 4px 4px 0 #ccc;
21 | }
22 | 
23 | p {
24 |   padding: 20px;
25 |   background: #f5f5f5;
26 |   color: #282C34;
27 |   border-radius: 5px;
28 |   font-weight: 300;
29 |   line-height: 1.8em;
30 |   text-align: justify;
31 | }
32 | 
33 | strong {
34 |   color: #ee4c4c;
35 |   font-weight: 400;
36 |   text-shadow: 1px 1px 0 #f5f5f5, 2px 2px 0 #ccc;
37 | }
38 | 
39 | button {
40 |   padding: 10px;
41 |   background: #ee4c4c;
42 |   color: #fff;
43 |   border: 2px solid #f5f5f5;
44 |   border-radius: 5px;
45 |   font-size: 16px;
46 | }
47 | 
48 | button:hover, button:focus {
49 |   background: #d64444;
50 | }
51 | 
52 | body.theme2 {
53 |   background: #403f4d;
54 |   font-family: 'Courier New', monospace;
55 | }
56 | 
57 | .theme2 h1 {
58 |   color: #ee4c4c;
59 |   text-shadow: 2px 2px 0 #403F4D, 4px 4px 0 #2E2D33;
60 |   text-transform: uppercase;
61 | }
62 | 
63 | .theme2 p {
64 |   background: #4e4d5c;
65 |   color: #fbfafb;
66 | }
67 | 
68 | .theme2 strong {
69 |   color: #ee4c4c;
70 |   font-weight: 400;
71 |   text-shadow: 1px 1px 0 #403F4D, 2px 2px 0 #2E2D33;
72 | }
73 | 
74 | .theme2 button {
75 |   background: #4E4D5C;
76 |   color: #ee4c4c;
77 |   border: 2px solid #2E2D33;
78 |   font-family: 'Courier New', monospace;
79 | }
80 | 


--------------------------------------------------------------------------------
/Notebooks/JavaScript & React for Developers - Cassidy Williams - Udemy/toggle theme/toggle.js:
--------------------------------------------------------------------------------
1 | const btn = document.getElementById('theme');
2 | 
3 | btn.addEventListener('click', toggleTheme);
4 | 
5 | function toggleTheme() {
6 |    document.body.classList.toggle('theme2');
7 | }


--------------------------------------------------------------------------------
/Notebooks/JavaScript30 - Wes Bos/Array Cardio 2/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Array Cardio 💪💪</title>
 6 | </head>
 7 | <body>
 8 |   <p><em>Psst: have a look at the JavaScript Console</em> 💁</p>
 9 |   <script>
10 |     /*jshint esversion: 6*/
11 |     // ## Array Cardio Day 2
12 | 
13 |     const people = [
14 |       { name: 'Wes', year: 1988 },
15 |       { name: 'Kait', year: 1986 },
16 |       { name: 'Irv', year: 1970 },
17 |       { name: 'Lux', year: 2015 }
18 |     ];
19 | 
20 |     const comments = [
21 |       { text: 'Love this!', id: 523423 },
22 |       { text: 'Super good', id: 823423 },
23 |       { text: 'You are the best', id: 2039842 },
24 |       { text: 'Ramen is my fav food ever', id: 123523 },
25 |       { text: 'Nice Nice Nice!', id: 542328 }
26 |     ];
27 | 
28 |     // Some and Every Checks
29 |     // Array.prototype.some() // is at least one person 19 or older?
30 |     
31 |     // A 
32 |     // const isAdult = people.some(function(person){
33 |     //   const currentYear = (new Date()).getFullYear();
34 |     //   if (currentYear - person.year >= 19) {
35 |     //     return true;
36 |     //   }
37 |     // });
38 | 
39 |     // console.log({isAdult});
40 | 
41 |     // B refactored and simpler
42 |     const isAdult = people.some(person => ((new Date()).
43 |       getFullYear()) - person.year >= 19 );
44 | 
45 |     console.log({isAdult});
46 | 
47 |     // Array.prototype.every() // is everyone 19 or older?
48 |     const allAdults = people.every(person => ((new Date()).
49 |       getFullYear()) - person.year >= 19 );
50 | 
51 |     console.log({allAdults});
52 | 
53 | 
54 |     // Array.prototype.find()
55 |     // Find is like filter, but instead returns just the one you are looking for
56 |     // find the comment with the ID of 823423
57 | 
58 |     // A
59 |     // const comment = comments.find(function(comment){
60 |     //   if(comment.id === 823423){
61 |     //     return true;
62 |     //   }
63 |     // });
64 | 
65 |     // console.log(comment);
66 | 
67 |     // B refoactor arrow function with implicit return
68 |     const comment = comments.find(comment => comment.id === 823423 );
69 | 
70 |     console.log(comment);
71 |     
72 |     // Array.prototype.findIndex()
73 |     // Find the comment with this ID
74 |     // delete the comment with the ID of 823423
75 | 
76 |     
77 |     const index = comments.findIndex(comment => comment.id === 823423 );
78 | 
79 |     console.log(index);
80 |     // A
81 |     // comments.splice(index, 1);
82 | 
83 |     // B or
84 |     const newComments = [
85 |       ...comments.slice(0, index),
86 |       ...comments.slice(index + 1)
87 |     ];
88 | 
89 | 
90 |   </script>
91 | </body>
92 | </html>
93 | 


--------------------------------------------------------------------------------
/Notebooks/JavaScript30 - Wes Bos/Array Cardio/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<title>Array cardio 💪</title>
 5 | </head>
 6 | <body>
 7 | <p>console</p>
 8 | 
 9 | <script type="text/javascript" src="script.js"></script>
10 | </body>
11 | </html>


--------------------------------------------------------------------------------
/Notebooks/JavaScript30 - Wes Bos/Array Cardio/script.js:
--------------------------------------------------------------------------------
  1 |     const inventors = [
  2 |       { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 },
  3 |       { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 },
  4 |       { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 },
  5 |       { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 },
  6 |       { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 },
  7 |       { first: 'Nicolaus', last: 'Copernicus', year: 1473, passed: 1543 },
  8 |       { first: 'Max', last: 'Planck', year: 1858, passed: 1947 },
  9 |       { first: 'Katherine', last: 'Blodgett', year: 1898, passed: 1979 },
 10 |       { first: 'Ada', last: 'Lovelace', year: 1815, passed: 1852 },
 11 |       { first: 'Sarah E.', last: 'Goode', year: 1855, passed: 1905 },
 12 |       { first: 'Lise', last: 'Meitner', year: 1878, passed: 1968 },
 13 |       { first: 'Hanna', last: 'Hammarström', year: 1829, passed: 1909 }
 14 |     ];
 15 | 
 16 |     const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black, Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
 17 | 
 18 |     // Array.prototype.filter()
 19 |     // 1. Filter the list of inventors for those who were born in the 1500's
 20 | 
 21 |     // const fifteen = inventors.filter(function(inventor){
 22 |     //   if (inventor.year >= 1500 && inventor.year <= 1599) {
 23 |     //     return true; //keep it
 24 |     //   }
 25 |     // });
 26 |     // console.table(fifteen);
 27 |     // refacotored to this:
 28 |     const fifteen = inventors.filter(inventor => inventor.year >= 1500 && inventor.year <= 1599);
 29 |   
 30 |     console.table(fifteen);
 31 | 
 32 |     // B Filter the list of inventors for those who passed in the 1900's
 33 |     const nine = inventors.filter(inventor => inventor.passed > 1899);
 34 |      
 35 |     console.table(nine);
 36 | 
 37 | 
 38 |     // Array.prototype.map()
 39 |     // 2. Give us an array of the inventors' first and last names
 40 | 
 41 |     const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`);
 42 | 
 43 |     console.log(fullNames);
 44 | 
 45 |     // B Give us an array of the inventors' first names and year of birth
 46 | 
 47 |     const firstAndYear = inventors.map(inventor => `${inventor.first} ${inventor.year}`);
 48 | 
 49 |     console.log(firstAndYear);
 50 | 
 51 | 
 52 |     // Array.prototype.sort()
 53 |     // 3. Sort the inventors by birthdate, oldest to youngest
 54 | 
 55 |     // const orderList = inventors.sort(function(a, b){
 56 |     //   if(a.year > b.year){
 57 |     //     return 1;
 58 |     //   } else {
 59 |     //     return -1;
 60 |     //   }
 61 |     // });
 62 | 
 63 |     // console.table(orderList);
 64 |     // refactored to this:
 65 |     const orderList = inventors.sort((a, b) => a.year > b.year ? 1 : -1);
 66 |     console.table(orderList);
 67 | 
 68 |     // B Sort the inventors by death, earliest to latest
 69 |     const earliestDeath = inventors.sort((a, b) => a.passed > b.passed ? 1 : -1);
 70 |     console.table(earliestDeath);
 71 | 
 72 |     // Array.prototype.reduce()
 73 |     // 4. How many years did all the inventors live?
 74 |     const totalYears = inventors.reduce((total, inventor) => {
 75 |       return total + (inventor.passed - inventor.year);
 76 |     }, 0);
 77 |     console.log(totalYears);
 78 | 
 79 |     // 5. Sort the inventors by years lived
 80 |     const oldest = inventors.sort(function(a, b){
 81 |       const lastGuy = a.passed - a.year;
 82 |       const nextGuy = b.passed - b.year;
 83 |       return lastGuy > nextGuy ? -1 : 1;
 84 |     });
 85 |     console.table(oldest);
 86 | 
 87 |     // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name
 88 |     // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris
 89 | 
 90 |     // const category = document.querySelector('.mw-category');
 91 |     // const links = Array.from(category.querySelectorAll('a'));
 92 |     // const de = links
 93 |     //             .map(link => link.textContent)
 94 |     //             .filter(streetName => streetName.includes('de'));
 95 | 
 96 | 
 97 |     // 7. sort Exercise
 98 |     // Sort the people alphabetically by last name
 99 | 
100 |       const alpha = people.sort((lastOne, nextOne) => {
101 |         const [aLast, aFirst] = lastOne.split(', ');
102 |         const [bLast, bFirst] = nextOne.split(', ');
103 |         return aLast > bLast ? 1 : -1;
104 |       });
105 |       console.log(alpha);
106 | 
107 |     // 8. Reduce Exercise
108 |     // Sum up the instances of each of these
109 |     const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ];
110 | 
111 |     const transportation = data.reduce(function(obj, item){
112 |       if(!obj[item]) {
113 |         obj[item] = 0;
114 |       }
115 |       obj[item]++;
116 |       return obj;
117 |     }, {});
118 | 
119 |     console.log(transportation);


--------------------------------------------------------------------------------
/Notebooks/JavaScript30 - Wes Bos/Hold shift to check multiple checkboxes/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>Hold Shift to Check Multiple Checkboxes</title>
  6 | </head>
  7 | <body>
  8 |   <style>
  9 | 
 10 |     html {
 11 |       font-family: sans-serif;
 12 |       background:#ffc600;
 13 |     }
 14 | 
 15 |     .inbox {
 16 |       max-width:400px;
 17 |       margin:50px auto;
 18 |       background:white;
 19 |       border-radius:5px;
 20 |       box-shadow:10px 10px 0 rgba(0,0,0,0.1);
 21 |     }
 22 | 
 23 |     .item {
 24 |       display:flex;
 25 |       align-items:center;
 26 |       border-bottom: 1px solid #F1F1F1;
 27 |     }
 28 | 
 29 |     .item:last-child {
 30 |       border-bottom:0;
 31 |     }
 32 | 
 33 | 
 34 |     input:checked + p {
 35 |       background:#F9F9F9;
 36 |       text-decoration: line-through;
 37 |     }
 38 | 
 39 |     input[type="checkbox"] {
 40 |       margin:20px;
 41 |     }
 42 | 
 43 |     p {
 44 |       margin:0;
 45 |       padding:20px;
 46 |       transition:background 0.2s;
 47 |       flex:1;
 48 |       font-family:'helvetica neue';
 49 |       font-size: 20px;
 50 |       font-weight: 200;
 51 |       border-left: 1px solid #D1E2FF;
 52 |     }
 53 | 
 54 | 
 55 |   </style>
 56 |    <!--
 57 |    The following is a common layout you would see in an email client.
 58 | 
 59 |    When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
 60 | 
 61 |   -->
 62 |   <div class="inbox">
 63 |     <div class="item">
 64 |       <input type="checkbox">
 65 |       <p>This is an inbox layout.</p>
 66 |     </div>
 67 |     <div class="item">
 68 |       <input type="checkbox">
 69 |       <p>Check one item</p>
 70 |     </div>
 71 |     <div class="item">
 72 |       <input type="checkbox">
 73 |       <p>Hold down your Shift key</p>
 74 |     </div>
 75 |     <div class="item">
 76 |       <input type="checkbox">
 77 |       <p>Check a lower item</p>
 78 |     </div>
 79 |     <div class="item">
 80 |       <input type="checkbox">
 81 |       <p>Everything inbetween should also be set to checked</p>
 82 |     </div>
 83 |     <div class="item">
 84 |       <input type="checkbox">
 85 |       <p>Try do it with out any libraries</p>
 86 |     </div>
 87 |     <div class="item">
 88 |       <input type="checkbox">
 89 |       <p>Just regular JavaScript</p>
 90 |     </div>
 91 |     <div class="item">
 92 |       <input type="checkbox">
 93 |       <p>Good Luck!</p>
 94 |     </div>
 95 |     <div class="item">
 96 |       <input type="checkbox">
 97 |       <p>Don't forget to tweet your result!</p>
 98 |     </div>
 99 |   </div>
100 | 
101 | <script>
102 | 
103 |   const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]');
104 |   let lastChecked;
105 | 
106 |   function handleCheck(e){
107 |     let inBetween = false;
108 |     if (e.shiftKey && this.checked){
109 |       checkboxes.forEach(checkbox => {
110 |         if (checkbox === this || checkbox === lastChecked){
111 |           inBetween = !inBetween;
112 |         }
113 |         if (inBetween){
114 |           checkbox.checked = true;
115 |         }
116 |       });
117 |     }
118 | 
119 |     lastChecked = this;
120 |   }
121 | 
122 |   checkboxes.forEach(checkbox => checkbox.addEventListener('click', handleCheck));
123 | 
124 | </script>
125 | </body>
126 | </html>
127 | 


--------------------------------------------------------------------------------
/Notebooks/JavaScript30 - Wes Bos/Konami Key Sequence Detection/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Key Detection</title>
 6 |   <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
 7 | </head>
 8 | <body>
 9 | <script>
10 |     const pressed = [];
11 |     const secretCode = 'glam';
12 |     window.addEventListener('keyup', (e) => {
13 |         console.log(e.key);
14 |         pressed.push(e.key);
15 |         pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
16 |         if (pressed.join('').includes(secretCode)) {
17 |             console.log(pressed);
18 |             console.log('se-cret // co-de // ac-ti-va-ted');
19 |             cornify_add();
20 |         }
21 |     })
22 | </script>
23 | </body>
24 | </html>


--------------------------------------------------------------------------------
/Notebooks/JavaScript30 - Wes Bos/Slide in on scroll/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>Document</title>
  6 | </head>
  7 | <body>
  8 | 
  9 |   <div class="site-wrap">
 10 | 
 11 |     <h1>Slide in on Scroll</h1>
 12 | 
 13 |     <p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.</p>
 14 |     <p>Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
 15 |     <p>Adipisicing elit. Tempore tempora rerum..</p>
 16 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
 17 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
 18 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.</p>
 19 | 
 20 |     <img src="http://unsplash.it/400/400" class="align-left slide-in">
 21 | 
 22 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt</p>
 23 | 
 24 |     <img src="http://unsplash.it/400/401" class="align-right slide-in">
 25 | 
 26 |     <p> at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.</p>
 27 | 
 28 |     <img src="http://unsplash.it/200/500" class="align-left slide-in">
 29 | 
 30 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet <img src="http://unsplash.it/200/200" class="align-right slide-in"> temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis</p>
 31 | 
 32 | 
 33 |     <p>laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
 34 | 
 35 |     <img src="http://unsplash.it/400/400" class="align-right slide-in">
 36 | 
 37 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
 38 |     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
 39 | 
 40 | 
 41 | 
 42 | 
 43 |   </div>
 44 | 
 45 |   <script>
 46 |     function debounce(func, wait = 20, immediate = true) {
 47 |       var timeout;
 48 |       return function() {
 49 |         var context = this, args = arguments;
 50 |         var later = function() {
 51 |           timeout = null;
 52 |           if (!immediate) func.apply(context, args);
 53 |         };
 54 |         var callNow = immediate && !timeout;
 55 |         clearTimeout(timeout);
 56 |         timeout = setTimeout(later, wait);
 57 |         if (callNow) func.apply(context, args);
 58 |       };
 59 |     }
 60 | 
 61 |     const sliderImages = document.querySelectorAll('.slide-in');
 62 | 
 63 |     function checkSlide(e) {
 64 |         // console.log(window.scrollY + window.innerHeight);
 65 |         sliderImages.forEach(sliderImage => {
 66 |             // halfway through image
 67 |             const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
 68 |             // bottom of image
 69 |             const imageBottom = sliderImage.offsetTop + sliderImage.height;
 70 |             const isHalfShown = slideInAt > sliderImage.offsetTop;
 71 |             const isNotScrolledPast = window.scrollY < imageBottom;
 72 |             if (isHalfShown && isNotScrolledPast) {
 73 |                 sliderImage.classList.add('active');
 74 |             } else {
 75 |                 sliderImage.classList.remove('active');
 76 |             }
 77 |         });
 78 |     }
 79 | 
 80 |     window.addEventListener('scroll', debounce(checkSlide));
 81 | 
 82 |   </script>
 83 | 
 84 |   <style>
 85 |     html {
 86 |       box-sizing: border-box;
 87 |       background:#1665f7;
 88 |       font-family:'helvetica neue';
 89 |       font-size: 20px;
 90 |       font-weight: 200;
 91 |     }
 92 |     body {
 93 |       margin: 0;
 94 |     }
 95 |     *, *:before, *:after {
 96 |       box-sizing: inherit;
 97 |     }
 98 |     h1 {
 99 |       margin-top: 0;
100 |     }
101 |     .site-wrap {
102 |       max-width: 700px;
103 |       margin: 100px auto;
104 |       background:white;
105 |       padding:40px;
106 |       text-align: justify;
107 |     }
108 |     .align-left {
109 |       float:left;
110 |       margin-right:20px;
111 |     }
112 |     .align-right {
113 |       float:right;
114 |       margin-left:20px;
115 |     }
116 |     .slide-in {
117 |       opacity:0;
118 |       transition:all .5s;
119 |     }
120 |     .align-left.slide-in {
121 |       transform:translateX(-30%) scale(0.95);
122 |     }
123 |     .align-right.slide-in {
124 |       transform:translateX(30%) scale(0.95);
125 |     }
126 |     .slide-in.active {
127 |       opacity:1;
128 |       transform:translateX(0%) scale(1);
129 |     }
130 |   </style>
131 | 
132 | </body>
133 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # My Learning Tracker [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Web%20Dev%20learning%20tracker%20&url=https://github.com/Syknapse/My-Learning-Tracker&via=syknapse&hashtags=100DaysofCode)
  2 | 
  3 | A complete log of my web development skills, learning, resources, highlights, interests, and everything to do with my learning. It's a way to keep track, organise, and share my learning.
  4 | 
  5 | [For my full portfolio click here](https://syknapse.github.io/Syk-Houdeib/ "https://syknapse.github.io/Syk-Houdeib") || [For my learning log click here](https://github.com/Syknapse/My-Learning-Tracker/blob/master/log.md "Regular logs of my learning with links, reflections, and information about my learning process")
  6 | 
  7 | ----
  8 | 
  9 | ## Skills
 10 | 
 11 | [done]: https://user-images.githubusercontent.com/29199184/32275438-8385f5c0-bf0b-11e7-9406-42265f71e2bd.png "Done"
 12 | 
 13 | |               Skill              | 1<br>Introduction | 2<br>Basics   | 3<br>Good     | 4<br>Pretty Good | 5<br>Confident | 6<br>Awesome    |
 14 | |:--------------------------------:|:-----------------:|:-------------:|:-------------:|:----------------:|:--------------:|:---------------:|
 15 | |**HTML5**                         | ![done][done]     | ![done][done] | ![done][done] | ![done][done]    | ![done][done]  |                 |
 16 | |**CSS3**                          | ![done][done]     | ![done][done] | ![done][done] | ![done][done]    | ![done][done]  |                 |
 17 | |**JavaScript**                    | ![done][done]     | ![done][done] | ![done][done] |                  |                |                 |
 18 | |**ES6**                           | ![done][done]     | ![done][done] |               |                  |                |                 |
 19 | |**Website Building**              | ![done][done]     | ![done][done] | ![done][done] | ![done][done]    |                |                 |
 20 | |**Responsive design**             | ![done][done]     | ![done][done] | ![done][done] | ![done][done]    |                |                 |
 21 | |**Mobile first**                  | ![done][done]     | ![done][done] | ![done][done] | ![done][done]    |                |                 |
 22 | |**Progressive Enhancement**       | ![done][done]     | ![done][done] | ![done][done] | ![done][done]    |                |                 |
 23 | |**Css Grid & Flex-box**           | ![done][done]     | ![done][done] | ![done][done] | ![done][done]    |                |                 |
 24 | |**GitHub**                        | ![done][done]     | ![done][done] | ![done][done] | ![done][done]    |                |                 |
 25 | |**Bootstrap**                     | ![done][done]     | ![done][done] | ![done][done] |                  |                |                 |
 26 | |**jQuery**                        | ![done][done]     | ![done][done] | ![done][done] |                  |                |                 |
 27 | |**Publishing website**            | ![done][done]     | ![done][done] | ![done][done] |                  |                |                 |
 28 | |**Git/Git bash**                  | ![done][done]     | ![done][done] | ![done][done] |                  |                |                 |
 29 | |**Command line**                  | ![done][done]     | ![done][done] | ![done][done] |                  |                |                 |
 30 | |**Markdown**                      | ![done][done]     | ![done][done] | ![done][done] | ![done][done]    | ![done][done]  |                 |
 31 | |**Node.js**                       | ![done][done]     | ![done][done] |               |                  |                |                 |
 32 | |**NPM**                           | ![done][done]     | ![done][done] |               |                  |                |                 |
 33 | |**Open Source Contribution**      | ![done][done]     | ![done][done] |               |                  |                |                 |
 34 | |**React**                         | ![done][done]     | ![done][done] |               |                  |                |                 |
 35 | |**Angular 4**                     | ![done][done]     |               |               |                  |                |                 |
 36 | |**Task runners Gulp/Grunt**       | ![done][done]     |               |               |                  |                |                 |
 37 | |**NPM scripts**                   | ![done][done]     |               |               |                  |                |                 |
 38 | |**AJAX**                          | ![done][done]     |               |               |                  |                |          .      |
 39 | 
 40 | ----
 41 | 
 42 | ## Learning
 43 | 
 44 | [//]: # (Status images)
 45 | 
 46 | [Completed]: https://user-images.githubusercontent.com/29199184/32275438-8385f5c0-bf0b-11e7-9406-42265f71e2bd.png "Completed"
 47 | [In Progress]: https://user-images.githubusercontent.com/29199184/34462881-7305ddac-ee4d-11e7-9b57-589424820da4.png "In Progress"
 48 | [Soon]: https://user-images.githubusercontent.com/29199184/34462916-d5c37bd4-ee4d-11e7-9f4a-d57f2243281b.png "Soon"
 49 | 
 50 | |            Status           |   Year   | Course                                                          |                Tutor                        |
 51 | |:---------------------------:|:---------|:----------------------------------------------------------------|:-------------------------------------------:|
 52 | | ![Completed][Completed]     | Feb 2018 | [The Beginner's Guide to Reactjs]                               | [Kent C Dodds] - [egghead.io]               |
 53 | | ![Completed][Completed]     | Jan 2018 | [Google Developer Challenge Scholarship] - Web Developer        | [Udacity]                                   |
 54 | | ![Completed][Completed]     | 2017     | [Workflow Tools for Web Developers]                             | [Christina Truong] - [Lynda.com]            |
 55 | | ![Completed][Completed]     | 2017     | [Learning Git and GitHub]                                       | [Ray Villalobos] - [Lynda.com]              |
 56 | | ![Completed][Completed]     | 2017     | [CSS Essential Training 3]                                      | [Christina Truong] - [Lynda.com]            |
 57 | | ![Completed][Completed]     | 2017     | [CSS Essential Training 2]                                      | [Christina Truong] - [Lynda.com]            |
 58 | | ![Completed][Completed]     | 2017     | [Getting Your Website Online]                                   | [Christina Truong] - [Lynda.com]            |
 59 | | ![Completed][Completed]     | 2017     | [Learn Enough Command Line to Be Dangerous]                     | [Michael Hartl]                             |
 60 | | ![Completed][Completed]     | 2017     | [Basic Front End Development Projects]                          | [Free Code Camp]                            |
 61 | | ![Completed][Completed]     | 2017     | [The Web Developer Bootcamp - Frond End]                        | Colt Steele - [Udemy]                       |
 62 | | ![In Progress][In Progress] |          | [Front-End Web Developer Nanodegree]                            | [Udacity] - Google Scholarship              |
 63 | | ![In Progress][In Progress] |          | [JavaScript and React for Developers]                           | [Cassidy Williams] - [Udemy]                |
 64 | | ![In Progress][In Progress] |          | [Front End Development]                                         | [Free Code Camp]                            |
 65 | | ![In Progress][In Progress] |          | [JavaScript30]                                                  | [Wes Bos]                                   |
 66 | | ![In Progress][In Progress] |          | Read [JavaScript & jQuery]                                      | Jon Duckett                                 |
 67 | | ![Soon][Soon]               |          | Read [Eloquent JavaScript]                                      | [Marijn Haverbeke]                          |
 68 | | ![Soon][Soon]               |          | Read JavaScript: The Good Parts                                 | Douglas Crockford                           |
 69 | | ![Soon][Soon]               |          | Read [You Don't know JavaScript]                                | Kyle Simpson                                |
 70 | | ![Soon][Soon]               |          | [Learn CSS Grid]                                                | [Per Harald Borgen] - [Scrimba]             |
 71 | | ![Soon][Soon]               |          | [The Web Developer Bootcamp - Back End]                         | Colt Steele - [Udemy]                       |
 72 | 
 73 | [//]: # (Reference links to courses)
 74 | 
 75 | [Front-End Web Developer Nanodegree]: https://eu.udacity.com/course/front-end-web-developer-nanodegree--nd001
 76 | [JavaScript and React for Developers]: https://www.udemy.com/js-and-react-for-devs/
 77 | [You Don't know JavaScript]: https://github.com/getify/You-Dont-Know-JS
 78 | [Workflow Tools for Web Developers]: https://www.lynda.com/Web-Design-tutorials/Workflow-Tools-Web-Development/533305-2.html
 79 | [Learning Git and GitHub]: https://www.lynda.com/Git-tutorials/Up-Running-Git-GitHub/409275-2.html
 80 | [CSS Essential Training 3]: https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-3/609030-2.html
 81 | [CSS Essential Training 2]: https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-2/569189-2.html
 82 | [Getting Your Website Online]: https://www.lynda.com/Web-Development-tutorials/Getting-Your-Website-Online/609031-2.html
 83 | [Learn Enough Command Line to Be Dangerous]: https://www.learnenough.com/command-line-tutorial
 84 | [Basic Front End Development Projects]: https://www.freecodecamp.org/syknapse
 85 | [The Web Developer Bootcamp - Frond End]: https://www.udemy.com/the-web-developer-bootcamp
 86 | [The Web Developer Bootcamp - Back End]: https://www.udemy.com/the-web-developer-bootcamp
 87 | [Front End Development]: https://www.freecodecamp.org/syknapse
 88 | [Google Developer Challenge Scholarship]: https://www.udacity.com/google-scholarships
 89 | [JavaScript30]: https://javascript30.com/
 90 | [JavaScript & jQuery]: http://javascriptbook.com/
 91 | [Eloquent JavaScript]: http://eloquentjavascript.net/
 92 | [Learn CSS Grid]: https://scrimba.com/g/gR8PTE
 93 | [The Beginner's Guide to Reactjs]: https://egghead.io/courses/the-beginner-s-guide-to-reactjs
 94 | 
 95 | [//]: # (Reference links to tutors)
 96 | 
 97 | [Cassidy Williams]: https://twitter.com/cassidoo
 98 | [Christina Truong]: https://twitter.com/christinatruong
 99 | [Lynda.com]: https://www.lynda.com
100 | [Ray Villalobos]: https://twitter.com/planetoftheweb
101 | [Michael Hartl]: https://twitter.com/mhartl
102 | [Free Code Camp]: https://www.freecodecamp.org
103 | [Udemy]: https://www.udemy.com
104 | [Udacity]: https://www.udacity.com
105 | [Wes Bos]: https://twitter.com/wesbos
106 | [Marijn Haverbeke]: https://twitter.com/MarijnJH
107 | [Per Harald Borgen]: https://twitter.com/perborgen
108 | [Scrimba]: https://scrimba.com/
109 | [Kent C Dodds]: https://egghead.io/instructors/kentcdodds
110 | [egghead.io]: https://egghead.io/
111 | 
112 | ### Paths
113 | 
114 | | Paths with multiple resources                             |            Author            |
115 | |:----------------------------------------------------------|:----------------------------:|
116 | | [Best JavaScript books, tutorials, courses & videos]      | [ReactDOM]                   |
117 | | [Learn to code in 2018]                                   | [Andrei Neagoie]             |
118 | | [Get Job ready - JavaScript Edition]                      | [P1xt]                       |
119 | | [Full Stack Web Developer Path]                           | [Shovan Chatterjee]          |
120 | 
121 | [//]: # (Reference links to paths)
122 | 
123 | [Best JavaScript books, tutorials, courses & videos]: https://reactdom.com/blog/javascript-books
124 | [Learn to code in 2018]: https://hackernoon.com/learn-to-code-in-2018-get-hired-and-have-fun-along-the-way-b338247eed6a
125 | [Get Job ready - JavaScript Edition]: https://github.com/P1xt/p1xt-guides/blob/master/job-ready-javascript-edition-2.0.md
126 | [Full Stack Web Developer Path]: https://github.com/shovanch/fullstack-web-developer-path
127 | 
128 | [//]: # (Reference links to authors)
129 | [ReactDOM]: https://reactdom.com
130 | [Andrei Neagoie]: https://twitter.com/AndreiNeagoie
131 | [P1xt]: https://github.com/P1xt
132 | [Shovan Chatterjee]: https://github.com/shovanch
133 | 
134 | ----
135 | 
136 | ## Highlights
137 | 
138 | The most interesting of what I'm watching, reading, and doing:
139 | 
140 | [**Click here for playlists and tweets. Articles, talks, tutorials, and more**](https://syknapse.github.io/My-Learning-Tracker/)
141 | 
142 | And here is a chronological log of the highlights of my learning:
143 | 
144 | [**My Learning Log**](https://github.com/Syknapse/My-Learning-Tracker/blob/master/log.md)
145 | 
146 | ----
147 | 
148 | ## Interests
149 | 
150 | I'm currently interested in/excited about:
151 | 
152 | + React
153 | + CSS Grid
154 | + Progressive enhancement
155 | + Task runners
156 | + Command Line and unix commands
157 | 
158 | ----
159 | 
160 | ## Web Development Checklist
161 | 
162 | This is a list of basic objectives to meet on the road to mastering web development.
163 | 
164 | It is an almost exact copy of [Ginny Fahs'](https://twitter.com/ginnyfahs) ["Things Real Developers Do: My Bucket List"](https://blog.prototypr.io/wondering-if-youre-a-real-developer-yet-try-making-a-bucket-list-281275482155)
165 | 
166 | 
167 | * [x] Open the computer’s terminal
168 | * [x] Use a text editor (bonus points if you have a specific reason for choosing it)
169 | * [x] Use some keyboard shortcuts
170 | * [ ] Write tests for your code
171 | * [x] Help another web developer with something they’re having trouble with
172 | * [x] Attend an event about web development
173 | * [x] Follow developers you admire on social media
174 | * [ ] Read a book about coding
175 | * [x] Open your browser console
176 | * [x] Get data from an API
177 | * [ ] Hide API keys from the public
178 | * [x] Post a question on Stack Overflow
179 | * [x] Push code to GitHub or GitLab or BitBucket
180 | * [ ] Speak about something web development-related at an event
181 | * [x] Complete a technical interview
182 | * [ ] Participate in a hackathon
183 | * [x] Deploy a project
184 | * [ ] Ship your project to a store
185 | * [ ] Contribute to open source
186 | * [ ] Get paid to code
187 | * [ ] When people ask what you do, respond saying you’re a developer :)
188 | 
189 | ----
190 | 
191 | If you find this useful for your own needs you are welcome to fork a copy, customise it or even give it a star.
192 | 
193 | **You can [follow me on Twitter](https://twitter.com/Syknapse "@Syknapse") or [get in touch](https://syknapse.github.io/Syk-Houdeib/#contact "My contact section | Portfolio")**
194 | 
195 | ----
196 | 
197 | ### Acknowledgments
198 | 
199 | This has been partly inspired by [Shovan Chatterjee](https://twitter.com/shovan_ch) and his wonderful [Full Stack Web Developer Path](https://github.com/shovanch/fullstack-web-developer-path) project. And of course by [Alexander Kallaway's](https://twitter.com/ka11away) very motivational [#100DaysOfCode challenge](https://github.com/Kallaway/100-days-of-code) and the great and supportive community around it.
200 | 
201 | ### License
202 | 
203 | [MIT License](https://github.com/Syknapse/My-Learning-Tracker/blob/master/LICENSE)
204 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<title>hghgh</title>
 6 | 	<style>
 7 | 		.container {
 8 | 			display: flex;
 9 | 			flex-direction: column;
10 | 			align-items: center;
11 | 		}
12 | 	</style>
13 | </head>
14 | <body>
15 | 
16 | 	<div class="container">
17 | 		<h1>Learning Highlights</h1>
18 | 		<a href="https://github.com/Syknapse/My-Learning-Tracker">BACK</a>
19 | 		<!-- Youtube tutorials playlist -->
20 | 		<div>
21 | 			<h2>Tutorials</h2>
22 | 			<p>YouTube playlist with the latest tutorials I have watched/done</p>
23 | 			<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLPOncoWIkU9M7u1TFleyfroELqh60Ixqo" frameborder="0" gesture="media" allowfullscreen></iframe>
24 | 		</div>
25 | 
26 | 		<!-- Youtube web development playlist -->
27 | 		<div>
28 | 			<h2>Everything Web Development</h2>
29 | 			<p>YouTube playlist with the latest interesting videos I have watched</p>
30 | 			<iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLPOncoWIkU9MBFf9s-B_n-IxK0A03FWIG" frameborder="0" gesture="media" allowfullscreen></iframe>
31 | 		</div>
32 | 
33 | 		<!-- twitter feed widget -->
34 | 		<div>
35 | 			<a class="twitter-timeline" data-width="560" href="https://twitter.com/Syknapse?ref_src=twsrc%5Etfw">Tweets by Syknapse</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
36 | 		</div>
37 | 	</div>
38 | 
39 | 
40 | </body>
41 | </html>


--------------------------------------------------------------------------------
/log-index.md:
--------------------------------------------------------------------------------
 1 | # Log Index
 2 | 
 3 | ## [Full Log](https://github.com/Syknapse/My-Learning-Tracker/blob/master/log.md#learning-log)
 4 | 
 5 | ## 2018
 6 | 
 7 | ### + [February](https://github.com/Syknapse/My-Learning-Tracker/blob/master/log.md#sat-3-feb-18)
 8 | ### + [January](https://github.com/Syknapse/My-Learning-Tracker/blob/master/log.md#2-jan-18)
 9 | ### + [2018 Objectives](https://github.com/Syknapse/My-Learning-Tracker/blob/master/log.md#28-dec-17)
10 | 
11 | ## 2017
12 | 
13 | ### + [December](https://github.com/Syknapse/My-Learning-Tracker/blob/master/log.md#24-dec-17)
14 | ### + [November](https://github.com/Syknapse/My-Learning-Tracker/blob/master/log.md#3-nov-17)


--------------------------------------------------------------------------------
/log.md:
--------------------------------------------------------------------------------
  1 | # Learning log
  2 | 
  3 | |Date |                                        |
  4 | |:---:|:---------------------------------------|
  5 | |     |Learnt, thoughts, progress, ideas, links|
  6 | 
  7 | ## Full [Log Index]
  8 | 
  9 | [__************** 2018 Objectives **************__](https://github.com/Syknapse/My-Learning-Tracker/blob/master/log.md#28-dec-17)
 10 | 
 11 | ----------------------------------------------------------
 12 | 
 13 | ----------------------------------------------------------
 14 | 
 15 | ## Sun 11 Feb 18
 16 | 
 17 | Finished the React Beginners course and started Cassidy William's course JavaScript and React for Developers. Learning about DOM, events and callbacks, AJAX, and JSON.
 18 | 
 19 | [Log Index]
 20 | 
 21 | ----------------------------------------------------------
 22 | 
 23 | ## Sat 10 Feb 18
 24 | 
 25 | Continued the React course. learnt about events, component state, memory leaks, class components, and dynamic forms. Practiced a lot and made 3 apps
 26 | 
 27 | + Count click events and display typed input
 28 | 
 29 | ![reactevents](https://user-images.githubusercontent.com/29199184/36066018-5450ddd2-0ea3-11e8-9cc1-c6c20bf69520.gif)
 30 | + A stopwatch. Start, stop and clear
 31 | 
 32 | ![reactstopwatch](https://user-images.githubusercontent.com/29199184/36066021-58da91b8-0ea3-11e8-8114-a8826a3f5308.gif)
 33 | + A dynamic input that shows an error message and has the submit disabled until error is resolved
 34 | 
 35 | ![reactdynamicinput](https://user-images.githubusercontent.com/29199184/36066024-621bd8cc-0ea3-11e8-9d9d-5c6836711614.gif)
 36 | 
 37 | [Log Index]
 38 | 
 39 | ----------------------------------------------------------
 40 | 
 41 | ## Thurs 8 Feb 18
 42 | 
 43 | Continued familiarising myself with React with Kent C Dodd's course and this [7 minute introduction](https://egghead.io/lessons/react-react-in-7-minutes)
 44 | 
 45 | [Log Index]
 46 | 
 47 | ----------------------------------------------------------
 48 | 
 49 | ## Tues 6 Feb 18
 50 | 
 51 | Read the great [Modern CSS Explained For Dinosaurs](https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe3525) article. And the last few days I have been working on an egghead.io React course.
 52 | 
 53 | [Log Index]
 54 | 
 55 | ----------------------------------------------------------
 56 | 
 57 | ## Sat 3 Feb 18
 58 | 
 59 | Today I completed the FCC-beta Random Quote Machine project built with React. Over the week I successfully got it to pass all the FCC test suite tests. Then worked on styling and improving the app. Including particle.js library took a bit of time until I realised I needed to use the special React library version. Finally I deployed it using Surge.sh. I'm very happy with this project; an introduction to React, using APIs, and helping out the FCC team in their beta tests.
 60 | 
 61 | [Totally Random Quote Machine](http://totally-random-quote-machine.surge.sh/)
 62 | 
 63 | [Log Index]
 64 | 
 65 | ----------------------------------------------------------
 66 | 
 67 | ## Mon 29 Jan 18
 68 | 
 69 | Advanced significantly on the FCC-Beta test of the Random Quote Machine project. Followed [this tutorial](https://youtu.be/mezmWEtvCig) which helped get most of the basics of the project done. But it had few gaps and an important error. At the end it only fetched one quote, rendered it poorly, and the twitter function didn't follow the project guidlines. So I had to figure out the rest on my own:
 70 | + Changed API source and got it to fetch a new one on click. I did this on my own.
 71 | + Figured out how to get it to display a quote on load by studying several other projects.
 72 | + Figured out how to implement the twitter button correctly by trying out several ideas I found.
 73 | 
 74 | The project now has got all the basic requirements working properly. It fetches a quote on load, features a button for another random quote, and quote can be tweeted. I'm very proud that I have managed to get this far using a framework that is still brand new to me.<br>
 75 | Now I just need to make few modifications to get it to pass all the FCC tests, then work on styling it.
 76 | 
 77 | ![random quote machine](https://user-images.githubusercontent.com/29199184/35535065-b47effa0-0542-11e8-990e-24624939c3ba.gif)
 78 | 
 79 | [Log Index]
 80 | 
 81 | ----------------------------------------------------------
 82 | 
 83 | ## Sun 28 Jan 18
 84 | 
 85 | Today I managed to finish the second phase of my [React Hello World App](https://github.com/Syknapse/react-hello-world-app) and successfully deploy it. Yesterday I struggled a lot with the deployment part but today using Surge.sh and changing the `index.html` to `200.html` for client-side routing worked.
 86 | 
 87 | [Log Index]
 88 | 
 89 | ----------------------------------------------------------
 90 | 
 91 | ## Fri 26 Jan 18
 92 | 
 93 | __** Introduction to React **__: Today I made my first `Hello World` in React, and I absolutely love the way it works and the idea behind it. I followed these two parts of a tutorial:
 94 | + [Learning React With Create-React-App (Part 1)](https://medium.com/in-the-weeds/learning-react-with-create-react-app-part-1-a12e1833fdc)
 95 | + [Learning React With Create-React-App (Part 2)](https://medium.com/in-the-weeds/learning-react-with-create-react-app-part-2-3ad99f38b48d)
 96 | 
 97 | ![react hello world](https://user-images.githubusercontent.com/29199184/35457331-d1aca756-02d8-11e8-8314-442d6361035f.gif)
 98 | 
 99 | [Log Index]
100 | 
101 | ----------------------------------------------------------
102 | 
103 | ## Thurs 25 Jan 18
104 | 
105 | I spent most of the past few days working along with Wes Bos's #JavaScript30 course and learning some very neat skills. Today I have been getting myself ready for an intensive React weekend. I'm keen on getting familiar with it as soon as possible. Also yesterday I applied for a dev job properly for the first time!
106 | 
107 | [Log Index]
108 | 
109 | ----------------------------------------------------------
110 | 
111 | ## Fri 19 Jan 18
112 | 
113 | It's been a while since my last log. As expected the return to work meant that I have been swamped and had little time. Still I have not stopped from coding daily and managed more than an hour most days.
114 | 
115 | Apart from few bits here and there the main work I have done since my last log was to improve and fix my Pixel Art project. Even though it went way beyond my own time limit, I was learning so much I just found it useful to keep on pushing. The biggest skills I have developed over this time is finding bugs, and then figuring out ways to solve them:
116 | 
117 | + The process of narrowing down the possible causes of a bug and testing until the exact cause is determined.
118 | + The process of finding a solution. Is it something that can be fixed writing better code or do I need a new logic to fix it?
119 | 
120 | Some of the problems, bugs and solutions I have dealt with these past days:
121 | 
122 | ![Pixel Art Maker controls](https://user-images.githubusercontent.com/29199184/35164257-fe5a0116-fd49-11e7-9a7e-74373a8ef295.png)
123 | 
124 | + Using manual input and then clicking on the grid builder buttons (+/- rows/columns) only added/removed 1 row/column instead of the value entered and desynchronised the two. The solution was to make the button's own native value always synced to the input.
125 | 
126 | + Then to make sure the right number of rows/columns is added or removed I implemented a function that counts the current rows and columns on the grid, compares it to the input value and returns the difference. This value is then used to determine what should be added or removed.
127 | 
128 | + This also allowed me to stop the unexpected behaviour produced when manual input was increased followed by clicking the opposite grid builder button. This was solved by making every event check for the current grid and input and create that grid before adding or removing. This ensured that whatever combination of manual input and buttons used it will always result in a grid exactly the size displayed in the inputs.
129 | 
130 | + Implemented a build grid function on `enter` on inputs. And to fix problem caused when both inputs are changed before clicking `Make Grid` implemented a solution where as soon as the input looses focus the build grid is fired thus ensuring that make grid is not dealing with two inputs.
131 | 
132 | + The final major bug was the buttons stopped working on mobile because of the change from `click` event to `mousedown` event to enable continuous building. This was fixed using the `touchstart` event.
133 | 
134 | + [These are the commits](https://github.com/Syknapse/Pixel-art-maker/commits/master) that show the progress of these ideas.
135 | 
136 | [Log Index]
137 | 
138 | ----------------------------------------------------------
139 | 
140 | ## Sat 6 Jan 18
141 | 
142 | + Udacity course completely finished.
143 | + [Pixel Art Project version 1.0](https://syknapse.github.io/Pixel-art-maker/) is ready.
144 | + Day 1 of #100DaysOfCode Round 3.
145 | 
146 | I spent most of the day trying to implement a feature where adding rows and columns with the builder don't reset the drawing. I advanced a lot and managed to get the basic function working. But conflicts produced when the number input was manually changed complicated the process and I had to abandon it in a separate branch for another time because I wanted at least the 1st version done.<br>
147 | I also tried to fix the little bug earlier where a new color cannot be added on top of an older one before deleting it in single click mode. But I also decided to leave it for a later stage, when I will refactor and improve the project.
148 | 
149 | For now The long hours of holiday are over, on Monday I'm back to work. But I'm very glad I finished the course before hand.
150 | 
151 | [Log Index]
152 | 
153 | ----------------------------------------------------------
154 | 
155 | ## 5 Jan 18
156 | 
157 | Bug fixing day. Spent most of the day trying to improve and fix my code on the Pixel Art project.
158 | 
159 | **Bug 1**: Found by a fellow student in the feedback forum. Described as such:
160 | > 1. Create new grid
161 | > 1. Select another color i.e. red
162 | > 1. Reset the grid
163 | > 1. Create new grid
164 | > 1. The selected color is shown as black, but if you click on the grid its painting the color selected in step 2.
165 | 
166 | This one was simple and obvious. I wasn't updating the `selectedColor` variable with the new color input value on reset.
167 | 
168 | ```js
169 | function reset(){
170 |     clearGrid();
171 |     colorInput.val('#000000');
172 | +   selectedColor = colorInput.val();
173 |     inputRows.val(10);
174 |     inputColumns.val(10);
175 | }
176 | ```
177 | 
178 | **Bug 2**: This one was a nightmare, I couldn't understand what was causing it. And when I did I didn't know how to fix it, and in the end it was, as expected, simple to solve!
179 | 
180 | Basically when clicking individual cells, sometimes the color flickered or didn't show at all. After a long session of testing, and narrowing down the possible causes I finally found the culprit. It was the fact that a `mousemove` was firing because of a tiny mouse move, and when the `mouseup` event was occurring within the same cell it caused the `mouseIsDown` variable to register `false` and counteract the add color function.<br>
181 | The solution seems painfully obvious now, but it took me a very long time with a lot of attempts trying to find a way to register the starting and ending cell between clicks. But eventually I realised that a simple change of event to `mouseleave` is the only thing I needed.
182 | 
183 | All in all a tiring session, but My project is completed and I'm thrilled. Just need to style it now.
184 | 
185 | [Log Index]
186 | 
187 | ----------------------------------------------------------
188 | 
189 | ## 4 Jan 18
190 | 
191 | Great advance on my project. Figured out the logic to be able to erase on click, then how to draw by click & drag, then how to erase like this too. Squashed many bugs on the way, and did some major refactoring.
192 | 
193 | I'm very proud of figuring out how to turn this ugly code repeated for each of the four buttons into a much more elegant and efficient one below.
194 | 
195 | ```diff
196 | -addRowBtn.click(function(){
197 | -    inputHeight.val(function(i, val) {
198 | -        return val*1+1
199 | -    });
200 | -    makeGrid();
201 | - });
202 | 
203 | +addRowBtn.click(function(){
204 | +    gridBuilder(increment, inputRows);
205 | +});
206 | 
207 | 
208 | +function increment (i, val) {
209 | +    return +val +1
210 | +}
211 | 
212 | +function decrement (i, val) {
213 | +    return +val -1
214 | +}
215 | 
216 | +function gridBuilder (scale, axis){
217 | +    axis.val(scale);
218 | +    makeGrid();
219 | +}
220 | ```
221 | 
222 | I managed to solve the erase problem by creating an odd/even function using the `data()` method to add color on first click and go back to default on second click.
223 | 
224 | ```js
225 | // draw/erase function
226 | function draw (){
227 |     let clicks = $(this).data('clicks');
228 |     if (!clicks){
229 |         // Change background color of cell
230 |         $(this).css('background-color', selectedColor);
231 |     } else {
232 |         // On second click return color to default (erase)
233 |         $(this).css('background-color', '');
234 |     }
235 |     // Fire `if` event on odd clicks
236 |     $(this).data('clicks', !clicks);
237 | }
238 | ```
239 | 
240 | Once I implemented the click and drag drawing, I managed to fix the bug that was causing `mouseup` event not to fire when the event happened between cells or outside of the table by using `event.preventDefault()` on `mousedown` and adding a `mouseleave` event to the table.
241 | 
242 | ![pixelart2](https://user-images.githubusercontent.com/29199184/34581566-3672338a-f191-11e7-82ce-b7b043133dce.gif)
243 | 
244 | [Log Index]
245 | 
246 | ----------------------------------------------------------
247 | 
248 | ## 3 Jan 18
249 | 
250 | An epic session on the **Pixel Art Maker** final project and huge progress. Finished much more than I was expecting. Completed all major features without looking at other similar projects. Extremely happy that I managed to solve all the logic required on my own. Then I started trying out more advanced features. I had a bit of difficulty creating a feature that adds and removes rows or columns directly. But in the end, with a bit of Stack Overflow help I figured it out. Great day!
251 | 
252 | ![Pixel Art Maker](https://user-images.githubusercontent.com/29199184/34535567-95422c64-f0c2-11e7-881a-fd1edc1d3195.gif "All the functionalities by the end of this session")
253 | 
254 | Tomorrow, I will experiment with few more advanced functionalities, work on the style and hopefully have it finished by the end of the day.
255 | 
256 | [Log Index]
257 | 
258 | ----------------------------------------------------------
259 | 
260 | ## 2 Jan 18
261 | 
262 | Back from a day off. Finished the Udacity course content and I'm no won the final project; Pixel Art Maker. Everything is setup and ready to go tomorrow. I'm really looking forward to doing it and finishing the course completely before moving on to more in depth JavaScript for my #OperationJavaScript objective.
263 | 
264 | Practiced jQuery DOM manipulation and event listeners and found it useful.
265 | Read the Udacity style guides for HTML, CSS, JavaScript, and Git which gave me a good insight on clean code writing.
266 | 
267 | read [How I got to 200 productive hours a month](https://qotoqot.com/blog/improving-focus/) and [The Reddit post that initiated the "No Zero Days" idea](https://www.reddit.com/r/getdisciplined/comments/1q96b5/i_just_dont_care_about_myself/cdah4af/) Which I though resonated with the way I have been working on coding for the past few months, and more generally over the last few years of changing negative habits and building positive ones.
268 | 
269 | [Log Index]
270 | 
271 | ----------------------------------------------------------
272 | 
273 | ## 31 Dec 17
274 | 
275 | Finished the introduction to Javascript on my Udacity course with more work on objects. And started the jQuery section. Advancing at a good pace. Participation in the forum is bringing in a wider understanding of the subjects.<br>
276 | Exercises like this one in the image have really made me understand methods and how versatile objects can be.
277 | 
278 | ![object](https://user-images.githubusercontent.com/29199184/34463352-4a8d6956-ee59-11e7-9db6-f0b6f4c13974.PNG)
279 | 
280 | **That's a wrap 2017. See you in 2018!**
281 | 
282 | [Log Index]
283 | 
284 | ----------------------------------------------------------
285 | 
286 | ## 30 Dec 17
287 | 
288 | Continued working on the **Udacity Google Scholarship** course: mainly [arrays](https://github.com/Syknapse/Google-Challenge-Scholarship-Front-End-Web-Dev/blob/master/short-exercises/arrays.js) and [objects](https://github.com/Syknapse/Google-Challenge-Scholarship-Front-End-Web-Dev/blob/master/short-exercises/objects.js).
289 | 
290 | Since this is not the first time I'm learning some of these concepts I feel I am understanding them on a deeper level, and I feel good about being able to solve most of the exercises with little or no help. Most importantly I feel I can visualise the solution and understand it.<br>
291 | I was especially amazed to discover how you can create a `method()` inside of an object and call it.
292 | 
293 | ![Nested arrays loops](https://user-images.githubusercontent.com/29199184/34457123-0a10bf88-eda8-11e7-9902-e893ff846726.png "Replace numbers in nested arrays with odd or even")
294 | 
295 | [Log Index]
296 | 
297 | ----------------------------------------------------------
298 | 
299 | ## 29 Dec 17
300 | 
301 | Worked on the **JavaScript** section in the **Udacity Google Scholarship** course: [Functions](https://github.com/Syknapse/Google-Challenge-Scholarship-Front-End-Web-Dev/blob/master/short-exercises/functions.js "Functions practice document") and arrays.<br>
302 | Managed to solve most of the problems without help. Not easy, but **#OperationJavaScript** is on 💪.
303 | 
304 | ![coding a triangle](https://user-images.githubusercontent.com/29199184/34445183-74d8902e-ecd2-11e7-8505-89f662a2c689.png)
305 | 
306 | Started on the first two screen casts of **Scrimba's Learn CSS Grid** course. I'm amazed by the platform where you can edit the code right in the screen!
307 | 
308 | All in all a **good** all-day session.
309 | 
310 | [Log Index]
311 | 
312 | ----------------------------------------------------------
313 | 
314 | ----------------------------------------------------------
315 | 
316 | ## 28 Dec 17
317 | 
318 | **#2018Objectives starts today:**
319 | 
320 | ### Operation JavaScript:
321 | 
322 | + Learn and practice JS with the aim of being able to do most basic operations and algorithms.
323 | + Practice, practice, practice.
324 | + Start learning React (unless something radically changes the panorama in the next couple of months!)
325 | 
326 | ### Code Everyday
327 | 
328 | + Commit to coding everyday.
329 | + This log becomes a daily log to add everything I'm working on and learning.
330 | + Finish important and relevant courses.
331 | + Work on self-initiated or collaboration projects to put skills into practice.
332 | 
333 | ### Get a Web Dev Job
334 | 
335 | Take the necessary steps to get my first Web Developer job:
336 | 
337 | + Apply for jobs.
338 | + Contact people who can help.
339 | + Prepare for interviews.
340 | + Learn any necessary additional skills or technologies.
341 | 
342 | [Log Index]
343 | 
344 | ----------------------------------------------------------
345 | 
346 | ----------------------------------------------------------
347 | 
348 | ## 24 Dec 17
349 | 
350 | Spent the last few weeks working on the Udacity's Google Challenge Scholarship course. Then built a [full tutorial](https://github.com/Syknapse/Contribute-To-This-Project) for begginers to make their first contribution on GitHub. Spent a good amount of time improving it and learning more markdown in the process and dealing with the PRs I'm getting (17 contributions so far). Also added a custom JS feature to the [contribution page](https://syknapse.github.io/Contribute-To-This-Project/) that counts the number of contributions and displays the number in a counter with a count up style.
351 | 
352 | ![contributions counter](https://user-images.githubusercontent.com/29199184/34326362-caebaf4a-e8aa-11e7-9415-0c88994aa5fc.gif)
353 | 
354 | [Log Index]
355 | 
356 | ----------------------------------------------------------
357 | 
358 | ## 27 Nov 17
359 | 
360 | In the last few days I have learnt the basics of AJAX and some more GIT on Tree House. Also installed VS Code, read documentation and watched tutorial videos and started using it.
361 | 
362 | [Log Index]
363 | 
364 | ----------------------------------------------------------
365 | 
366 | ## 22 Nov 17
367 | 
368 | Completed [Workflow Tools for Web Developers](https://www.lynda.com/Web-Design-tutorials/Workflow-Tools-Web-Development/533305-2.html) by [Christina Truong](https://twitter.com/christinatruong). Very useful.
369 | 
370 | Browsers & testing - advanced inspector/console - editor code snippets - CSS preprocessors & compilers - task runners
371 | 
372 | [Log Index]
373 | 
374 | ----------------------------------------------------------
375 | 
376 | ## 20 Nov 17
377 | 
378 | completed [Learning Git and GitHub](https://www.lynda.com/Git-tutorials/Up-Running-Git-GitHub/409275-2.html) by [Ray Villalobos](https://twitter.com/planetoftheweb). very good.
379 | 
380 | Git init - add - commit - staging - deleting - log - branches - states
381 | 
382 | GitHub cloning - cloning branches - templates
383 | 
384 | Gitbash to GitHub push and pull
385 | 
386 | [Log Index]
387 | 
388 | ----------------------------------------------------------
389 | 
390 | ## 17 Nov 17
391 | 
392 | Completed [CSS Essential Training 3](https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-3/609030-2.html) by [Christina Truong](https://twitter.com/christinatruong). Excellent.
393 | 
394 | Grid design - CSS grid and flexbox - retina and high density displays - images - svg - transitions - animations - shapes - responsive and fluid typography - advanced attribute selectors - accessibility - ARIA - style guides - refactoring guide
395 | 
396 | [Log Index]
397 | 
398 | ----------------------------------------------------------
399 | 
400 | ## 15 Nov 17
401 | 
402 | Completed [CSS Essential Training 2](https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-2/569189-2.html) by [Christina Truong](https://twitter.com/christinatruong). Excellent.
403 | 
404 | Advanced selectors - float & display - positioning - z-index - CSS reset - background & gradients -
405 | 
406 | responsive design: mobile first, graceful degradation, progressive enhancement, fluid, adaptive, media queries, testing responsive
407 | 
408 | [Log Index]
409 | 
410 | ----------------------------------------------------------
411 | 
412 | ## 10 Nov 17
413 | 
414 | Completed [Learn Enough Command Line to Be Dangerous](https://www.learnenough.com/command-line-tutorial). Great tutorial.
415 | 
416 | [Log Index]
417 | 
418 | ----------------------------------------------------------
419 | 
420 | ## 5 Nov 17
421 | 
422 | Command line. Worked on [Getting to Know the Command Line](https://www.davidbaumgold.com/tutorials/command-line/) and [Learn Enough Command Line to Be Dangerous](https://www.learnenough.com/command-line-tutorial)
423 | 
424 | [Log Index]
425 | 
426 | ----------------------------------------------------------
427 | 
428 | ## 3 Nov 17
429 | 
430 | Read [My journey to becoming a web developer](https://medium.freecodecamp.org/my-journey-to-becoming-a-web-developer-from-scratch-without-a-cs-degree-2-years-later-and-what-i-4a7fd2ff5503) Which contains a ton of learning resources and recommendations.
431 | 
432 | [Log Index]
433 | 
434 | ----------------------------------------------------------
435 | 
436 | [Log Index]: https://github.com/Syknapse/My-Learning-Tracker/blob/master/log-index.md#log-index
437 | 


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