├── 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
    ├── General notes
    │   ├── Arrays.md
    │   ├── React-notes.md
    │   ├── git-commands.md
    │   ├── imports-exports
    │   │   ├── exports.js
    │   │   └── imports.js
    │   └── update-node-with-nvm.md
    ├── 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
    └── Redux intro - Dan Abramov
    │   ├── 1- simple store
    │       ├── index.html
    │       └── script.js
    │   ├── 2- with React
    │       ├── index.html
    │       └── script.js
    │   ├── 3- to do app
    │       ├── index.html
    │       ├── script.js
    │       └── style.css
    │   ├── 4- reducer composition to do app
    │       ├── index.html
    │       ├── script.js
    │       └── style.css
    │   └── redux-intro-notes.md
├── 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/General notes/Arrays.md:
--------------------------------------------------------------------------------
 1 | # Arrays
 2 | 
 3 | ## Reducer
 4 | 
 5 | Iterate over one array adding its elements as a property of the objects in another array
 6 | 
 7 | ```js
 8 | const array1 = ['monkey', 'chicken', 'dodo', 'dado']
 9 | const array2 = [
10 |     { params: { country: 'hu', locale: 'en' } },
11 |     { params: { country: 'hu', locale: 'hu' } },
12 |     { params: { country: 'en', locale: 'en' } },
13 |     { params: { country: 'es', locale: 'es' } },
14 |     { params: { country: 'es', locale: 'ca' } },
15 |   ]
16 | const paths = array1.reduce((acc, cur) => {
17 |     return acc.concat(
18 |       array2.map(path => ({
19 |         params: {
20 |           ...path.params,
21 |           id: cur,
22 |         },
23 |       }))
24 |     )
25 |   }, [])
26 |   
27 |   console.log('>>>>>>>>>> paths: ', paths)
28 |   /* [
29 |     {params: {country: "hu", locale: "en", id: "monkey"}},
30 |     {params: {country: "hu", locale: "hu", id: "monkey"}},
31 |     {params: {country: "en", locale: "en", id: "monkey"}},
32 |     ...
33 |   ] */
34 |   ```
35 | 


--------------------------------------------------------------------------------
/Notebooks/General notes/React-notes.md:
--------------------------------------------------------------------------------
 1 | # React Notes
 2 | 
 3 | ## Conditional rendering
 4 | 
 5 | Syntax:
 6 | 
 7 | ```js
 8 | function Notification({ text, status }) {
 9 |   return (
10 |     <div>
11 |       {
12 |         {
13 |           info: <Info text={text} />,
14 |           warning: <Warning text={text} />,
15 |           error: <Error text={text} />,
16 |         }[status]
17 |       }
18 |     </div>
19 |   );
20 | }
21 | ```
22 | 
23 | [Read more](https://www.robinwieruch.de/conditional-rendering-react#multiple-conditional-renderings-in-react)
24 | 


--------------------------------------------------------------------------------
/Notebooks/General notes/git-commands.md:
--------------------------------------------------------------------------------
  1 | # Git commands
  2 | 
  3 | + Create and checkout branch (from current branch): 
  4 | 
  5 | ```bash
  6 | $ git checkout -b <branch_name>
  7 | ```
  8 | 
  9 | + Push branch to remote and track: 
 10 | 
 11 | ```bash
 12 | $ git push -u origin <branch_name>
 13 | ```
 14 | 
 15 | + List branches: 
 16 | 
 17 | ```bash
 18 | // Local only 
 19 | $ git branch
 20 | 
 21 | // Local and remote
 22 | $ git branch -a
 23 | 
 24 | // Only remote
 25 | $ git branch -r
 26 | ```
 27 | 
 28 | + Checkout remote branch: 
 29 | 
 30 | ```bash
 31 | $ git checkout -b <branch_name> origin/<branch_name>
 32 | or
 33 | $ git checkout --track origin/<branch_name>
 34 | ```
 35 | 
 36 | + Interactive staging (accept or reject changes before staging)
 37 | 
 38 | ```bash
 39 | $ git add -p
 40 | // Then y/n t accept/reject changes
 41 | ```
 42 | 
 43 | + Merge branch (merges <branch> into current HEAD):
 44 | 
 45 | ```bash
 46 | $ git merge --no-ff <branch_name>
 47 | ```
 48 | 
 49 | + Abort merge
 50 | 
 51 | ```bash
 52 | $ git merge --abort
 53 | ```
 54 | 
 55 | + Delete branch: 
 56 | 
 57 | ```bash
 58 | // Local
 59 | $  git branch -d <branch_name>
 60 | 
 61 | // Remote
 62 | $  git push origin --delete <branch_name>
 63 | ```
 64 | 
 65 | + Stash: 
 66 | 
 67 | ```bash
 68 | $ git stash
 69 | $ git stash pop // removes from stash and applies
 70 | $ git stash apply // keeps in stash and applies
 71 | $ git stash list // list all stashes
 72 | $ git stash show // see files stashed
 73 | ```
 74 | 
 75 | + Change name (file or folder, for a folder the full route from where you are): 
 76 | 
 77 | ```bash
 78 | $ git mv <old_filename> <new_filename>
 79 | ```
 80 | 
 81 | + Create annotated tag: 
 82 | 
 83 | ```bash
 84 | $ git tag -a <tagname> -m '<message>'
 85 | ```
 86 | 
 87 | + Push tag to remote
 88 | 
 89 | ```bash
 90 | $ git push origin <tagname>
 91 | ```
 92 | 
 93 | + View tags: 
 94 | 
 95 | ```bash
 96 | $ git tag
 97 | ```
 98 | 
 99 | + View tags with annotations: 
100 | 
101 | ```bash
102 | $ git tag -n
103 | ```
104 | 
105 | + View specific tag with annotation: 
106 | 
107 | ```bash
108 | $ git tag -n <tagname>
109 | ```
110 | 
111 | + Pushing new repo to remote
112 | 
113 | ```bash
114 | // Create repo in GitHub. Copy HTTP address
115 | // Create local repo. Initialise git (git init).
116 | $ git remote add origin <address>
117 | $ git push -u origin master
118 | ```
119 | 
120 | + Cloning a remote repo to a new local directory
121 | 
122 | ```bash
123 | git clone <repo-url> <directory>
124 | ```
125 | 


--------------------------------------------------------------------------------
/Notebooks/General notes/imports-exports/exports.js:
--------------------------------------------------------------------------------
 1 | export default Name // Default export
 2 | export { variable1, variable2 } // Named exports
 3 | export { variable1 as newName1, variable2 as newName2} // Export under a different name
 4 | 
 5 | export { variable1 as default } // Export a specific variable as default
 6 | // Re-export: import to a new file and immediately export
 7 | export { default } from './file.js' // Re-export default
 8 | export { default as Name } from './file.js' // Re-export named default
 9 | export { variable1, variable2 } from './file.js' // Re-export named
10 | 


--------------------------------------------------------------------------------
/Notebooks/General notes/imports-exports/imports.js:
--------------------------------------------------------------------------------
 1 | import Name from './name.js' // Import default
 2 | import { variable1, variable2 } from './file.js' // Named imports
 3 | import { variable1 as newName1, variable2 as newName2 } from './file.js' // Import under a different name
 4 | import * as Name from './file.js' // Import all
 5 | import { default as Name, variable2 } from './file.js' // Import default and named
 6 | // Dynamic import, can be used in the code
 7 | const path = './file.js'
 8 | import(path)
 9 | // Example
10 | if (condition) {
11 |     import(path).then(obj => console.log(obj))
12 | }
13 | 
14 | 
15 | 
16 | 
17 | 
18 | 
19 | console.log(Name)
20 | console.log({ variable1, variable2 })
21 | console.log({ newName1, newName2 })


--------------------------------------------------------------------------------
/Notebooks/General notes/update-node-with-nvm.md:
--------------------------------------------------------------------------------
 1 | # Update Node with nvm
 2 | 
 3 | + Install nvm: https://www.hostingadvice.com/how-to/update-node-js-latest-version/
 4 | + View node versions on machine: 
 5 | 
 6 | ```bash
 7 | $ nvm ls
 8 | ```
 9 | 
10 | + View all node versions: 
11 | 
12 | ```bash
13 | $ nvm ls-remote
14 | ```
15 | 
16 | + Install latest stable Node: 
17 | 
18 | ```bash
19 | $ nvm install --lts
20 | ```
21 | 
22 | + Install a particular Node version:
23 | 
24 | ```bash
25 | $ nvm install #.#.#
26 | ```
27 | 
28 | + Use latest stable version:
29 | 
30 | ```bash
31 | $ nvm use --lts
32 | ```
33 | 
34 | + Use a particular version: 
35 | 
36 | ```bash
37 | $ nvm use #.#.#
38 | ```
39 | 
40 | ## Useful Links
41 | 
42 | [NVM for Windows](https://github.com/coreybutler/nvm-windows)
43 | 
44 | [Múltiples versiones de Node con NVM](https://medium.com/devschile/m%C3%BAltiples-versiones-de-node-con-nvm-63b2ac715c38)
45 | 
46 | [Common Issues on Windows](https://github.com/coreybutler/nvm-windows/wiki/Common-Issues#spaces-in-pathnamesinstallation-root)
47 | 


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


--------------------------------------------------------------------------------
/Notebooks/Redux intro - Dan Abramov/1- simple store/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Redux simple store</title>
 8 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.4/redux.js'></script>
 9 | </head>
10 | <body>
11 |     <div id="display"></div>
12 |     <button id="decrement">-</button>
13 |     <button id="increment">+</button>
14 | 
15 | <script src="script.js"></script>
16 | </body>
17 | </html>


--------------------------------------------------------------------------------
/Notebooks/Redux intro - Dan Abramov/1- simple store/script.js:
--------------------------------------------------------------------------------
 1 | // Reducer
 2 | const counter = (state = 0, action) => {
 3 |     switch (action.type) {
 4 |         case 'INCREMENT':
 5 |             return state + 1
 6 |         case 'DECREMENT':
 7 |             return state - 1
 8 |         default:
 9 |             return state
10 |     }
11 | }
12 | 
13 | const { createStore } = Redux
14 | const store = createStore(counter) // Create store with the provided reducer
15 | const display = document.querySelector('#display')
16 | const increment = document.querySelector('#increment')
17 | const decrement = document.querySelector('#decrement')
18 | 
19 | const render = () => {
20 |     display.innerText = store.getState()
21 | }
22 | 
23 | store.subscribe(render)
24 | render()
25 | 
26 | increment.addEventListener('click', () => {
27 |     store.dispatch({ type: 'INCREMENT' })
28 |     console.log('store.getState(): ', store.getState())
29 | })
30 | 
31 | decrement.addEventListener('click', () => {
32 |     store.dispatch({ type: 'DECREMENT' })
33 |     console.log('store.getState(): ', store.getState())
34 | })


--------------------------------------------------------------------------------
/Notebooks/Redux intro - Dan Abramov/2- with React/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Redux simple store</title>
 8 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.4/redux.js'></script>
 9 | </head>
10 | <body>
11 |     <div id="root"></div>
12 | 
13 |     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
14 |     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
15 |     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
16 |     <script src="script.js" type="text/babel"></script>
17 | </body>
18 | </html>


--------------------------------------------------------------------------------
/Notebooks/Redux intro - Dan Abramov/2- with React/script.js:
--------------------------------------------------------------------------------
 1 | // Reducer
 2 | const counter = (state = 0, action) => {
 3 |     switch (action.type) {
 4 |         case 'INCREMENT':
 5 |             return state + 1
 6 |         case 'DECREMENT':
 7 |             return state - 1
 8 |         default:
 9 |             return state
10 |     }
11 | }
12 | 
13 | const { createStore } = Redux
14 | const store = createStore(counter) // Create store with the provided reducer
15 | const root = document.getElementById('root')
16 | 
17 | const Counter = ({ value, onIncrement, onDecrement }) => (
18 |     <div>
19 |         <h1>{value}</h1>
20 |         <button onClick={onDecrement}>-</button>
21 |         <button onClick={onIncrement}>+</button>
22 |     </div>
23 | )
24 | 
25 | 
26 | const storeDispatch = type => {
27 |     store.dispatch({ type })
28 | }
29 | 
30 | const render = () => {
31 |     ReactDOM.render(
32 |         <Counter
33 |             value={store.getState()}
34 |             onDecrement={() => storeDispatch('DECREMENT')}
35 |             onIncrement={() => storeDispatch('INCREMENT')}
36 |         />,
37 |         root
38 |     )
39 | }
40 | 
41 | store.subscribe(render)
42 | render()


--------------------------------------------------------------------------------
/Notebooks/Redux intro - Dan Abramov/3- to do app/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Redux To Do App</title>
 9 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.4/redux.js'></script>
10 | </head>
11 | <body>
12 |     <div id="root"></div>
13 | 
14 |     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
15 |     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
16 |     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
17 |     <script src="script.js" type="text/babel"></script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Notebooks/Redux intro - Dan Abramov/3- to do app/script.js:
--------------------------------------------------------------------------------
  1 | // Reducer
  2 | const todos = (state = [], action) => {
  3 |     console.log('REDUCER action: ', action)
  4 |     switch (action.type) {
  5 |         case 'ADD_TODO':
  6 |             return [
  7 |                 ...state,
  8 |                 {
  9 |                     id: action.id,
 10 |                     text: action.text,
 11 |                     completed: false,
 12 |                 }
 13 |             ]
 14 |         case 'TOGGLE_TODO':
 15 |             return state.map(todo => {
 16 |                 if (todo.id !== action.id) {
 17 |                     return todo
 18 |                 }
 19 |                 return {
 20 |                     ...todo,
 21 |                     completed: !todo.completed
 22 |                 }
 23 |             })
 24 |         default:
 25 |             return state
 26 |     }
 27 | }
 28 | 
 29 | const { createStore } = Redux
 30 | const store = createStore(todos)
 31 | const root = document.getElementById('root')
 32 | 
 33 | // Components
 34 | const AddToDo = ({ onAddToDo }) => (
 35 |     <div>
 36 |         <input id='to-do-input' type="text"/>
 37 |         <button onClick={onAddToDo}>+</button>
 38 |     </div>
 39 | )
 40 | 
 41 | const ToDoList = ({ onToggleToDo }) => {
 42 |     const list = store.getState()
 43 |     return (
 44 |         <ul>
 45 |             {list.map(item => (
 46 |                 <li
 47 |                     key={item.id}
 48 |                     onClick={() => onToggleToDo(item.id)}
 49 |                     className={item.completed && 'completed' || 'item'}
 50 |                 >
 51 |                     {item.text}
 52 |                 </li>
 53 |             ))}
 54 |         </ul>
 55 |     )
 56 | }
 57 | 
 58 | const App = ({ onAddToDo, onToggleToDo }) => (
 59 |     <div>
 60 |         <h1>To do</h1>
 61 |         <AddToDo onAddToDo={onAddToDo} />
 62 |         {store.getState().length > 0 && <ToDoList onToggleToDo={onToggleToDo} />}
 63 |     </div>
 64 | )
 65 | 
 66 | // Logic
 67 | const addToDo = () => {
 68 |     const input = document.getElementById('to-do-input')
 69 |     if (input.value) {
 70 |         store.dispatch(
 71 |             {
 72 |                 type: 'ADD_TODO',
 73 |                 id: store.getState().length,
 74 |                 text: input.value,
 75 |                 completed: false,
 76 |             }
 77 |         )
 78 |     }
 79 | }
 80 | 
 81 | const toggleToDo = (id) => {
 82 |     store.dispatch(
 83 |         {
 84 |             type: 'TOGGLE_TODO',
 85 |             id,
 86 |         }
 87 |     )
 88 | }
 89 | 
 90 | const render = () => {
 91 |     console.log('>>> store.getState(): ', store.getState())
 92 |     ReactDOM.render(
 93 |         <App
 94 |             onAddToDo={() => addToDo()}
 95 |             onToggleToDo={id => toggleToDo(id)}
 96 |         />,
 97 |         root
 98 |     )
 99 | }
100 | 
101 | store.subscribe(render)
102 | render()
103 | 


--------------------------------------------------------------------------------
/Notebooks/Redux intro - Dan Abramov/3- to do app/style.css:
--------------------------------------------------------------------------------
1 | .item {
2 |     font-weight: bold;;
3 | }
4 | .completed {
5 |     text-decoration: line-through;
6 | }


--------------------------------------------------------------------------------
/Notebooks/Redux intro - Dan Abramov/4- reducer composition to do app/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <link rel="stylesheet" href="style.css">
 8 |     <title>Redux To Do App</title>
 9 |     <script src='https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.4/redux.js'></script>
10 | </head>
11 | <body>
12 |     <div id="root"></div>
13 | 
14 |     <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
15 |     <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
16 |     <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
17 |     <script src="script.js" type="text/babel"></script>
18 | </body>
19 | </html>


--------------------------------------------------------------------------------
/Notebooks/Redux intro - Dan Abramov/4- reducer composition to do app/script.js:
--------------------------------------------------------------------------------
  1 | // Reducers
  2 | 
  3 | // Single todo reducer
  4 | const todo = (state, action) => {
  5 |     // state here refers to each individual todo item
  6 |     switch (action.type) {
  7 |         case 'ADD_TODO':
  8 |             return {
  9 |                 id: action.id,
 10 |                 text: action.text,
 11 |                 completed: false,
 12 |             }
 13 |         case 'TOGGLE_TODO':
 14 |             if (state.id !== action.id) {
 15 |                 return state
 16 |             }
 17 |             return {
 18 |                 ...state,
 19 |                 completed: !state.completed
 20 |             }
 21 |         default:
 22 |             return state
 23 |     }
 24 | }
 25 | 
 26 | // Todos list reducer
 27 | const todos = (state = [], action) => {
 28 |     switch (action.type) {
 29 |         case 'ADD_TODO':
 30 |             return [
 31 |                 ...state,
 32 |                 todo(undefined, action)
 33 |             ]
 34 |         case 'TOGGLE_TODO':
 35 |             return state.map(item => todo(item, action))
 36 |         default:
 37 |             return state
 38 |     }
 39 | }
 40 | 
 41 | // Visibility filter reducer
 42 | const visibilityFilter = (state = 'SHOW_ALL', action) => {
 43 |     switch (action.type) {
 44 |         case 'SET_VISIBILITY_FILTER':
 45 |             return action.filter
 46 |         default:
 47 |             return state
 48 |     }
 49 | }
 50 | 
 51 | // Combination of the three reducers
 52 | /* const todoApp = (state = {}, action) => {
 53 |     return {
 54 |         todos: todos(state.todos, action),
 55 |         visibilityFilter: visibilityFilter(state.visibilityFilter, action)
 56 |     }
 57 | } */
 58 | // The above function can be substituted with the Redux combiner method
 59 | const { combineReducers } = Redux
 60 | const todoApp = combineReducers({
 61 |     todos,
 62 |     visibilityFilter
 63 | })
 64 | 
 65 | 
 66 | 
 67 | const { createStore } = Redux
 68 | const store = createStore(todoApp)
 69 | const root = document.getElementById('root')
 70 | let todoInput
 71 | 
 72 | // Components
 73 | const AddToDo = ({ onAddToDo }) => (
 74 |     <div>
 75 |         <input ref={node => {todoInput = node}} type="text"/>
 76 |         <button onClick={onAddToDo}>Add to do</button>
 77 |     </div>
 78 | )
 79 | 
 80 | const getVisibleTodos = (todos, filter) => {
 81 |     switch (filter) {
 82 |         case 'SHOW_ALL':
 83 |             return todos
 84 |         case 'SHOW_ACTIVE':
 85 |             return todos.filter(todo => !todo.completed)
 86 |         case 'SHOW_COMPLETED':
 87 |             return todos.filter(todo => todo.completed)
 88 |     }
 89 | }
 90 | 
 91 | const ToDoList = ({ todos, filter, onToggleToDo }) => {
 92 |     const visibleTodos = getVisibleTodos(todos, filter)
 93 |     return (
 94 |         <ul>
 95 |             {visibleTodos.map(item => (
 96 |                 <li
 97 |                     key={item.id}
 98 |                     onClick={() => onToggleToDo(item.id)}
 99 |                     className={item.completed && 'completed' || 'active'}
100 |                 >
101 |                     {item.text}
102 |                 </li>
103 |             ))}
104 |         </ul>
105 |     )
106 | }
107 | 
108 | const Filter = ({ onFilter, currentFilter }) => {
109 |     const filters = [
110 |         {
111 |             type: 'SHOW_ALL',
112 |             text: 'Show all',
113 |         },
114 |         {
115 |             type: 'SHOW_ACTIVE',
116 |             text: 'Show active',
117 |         },
118 |         {
119 |             type: 'SHOW_COMPLETED',
120 |             text: 'Show completed',
121 |         },
122 |     ]
123 | 
124 |     return (
125 |         <div className='filter'>
126 |             <h2>Filter</h2>
127 |             <div className='filter-buttons'>
128 |                 {filters.map((filter, i) => (
129 |                     <button
130 |                         key={i}
131 |                         disabled={filter.type === currentFilter}
132 |                         onClick={() => onFilter(filter.type)}
133 |                     >
134 |                         {filter.text}
135 |                     </button>
136 |                 ))}
137 |             </div>
138 |         </div>
139 |     )
140 | }
141 | 
142 | const App = ({ todos, visibilityFilter ,onAddToDo, onToggleToDo, onFilter }) => (
143 |     <div className='wrapper'>
144 |         <div>
145 |             <h1>To do</h1>
146 |             <AddToDo onAddToDo={onAddToDo} />
147 |             {todos.length > 0 && <ToDoList todos={todos} filter={visibilityFilter} onToggleToDo={onToggleToDo} />}
148 |         </div>
149 |         <Filter onFilter={onFilter} currentFilter={visibilityFilter}/>
150 |     </div>
151 | )
152 | 
153 | // Actions
154 | const addToDo = () => {
155 |     if (todoInput.value) {
156 |         store.dispatch(
157 |             {
158 |                 type: 'ADD_TODO',
159 |                 id: store.getState().todos.length,
160 |                 text: todoInput.value,
161 |                 completed: false,
162 |             }
163 |         )
164 |     }
165 |     todoInput.value = ''
166 | }
167 | 
168 | const toggleToDo = (id) => {
169 |     store.dispatch(
170 |         {
171 |             type: 'TOGGLE_TODO',
172 |             id,
173 |         }
174 |     )
175 | }
176 | 
177 | const filterTodos = filter => {
178 |     store.dispatch({
179 |         type: 'SET_VISIBILITY_FILTER',
180 |         filter
181 |     })
182 | }
183 | 
184 | const render = () => {
185 |     console.log('>>> store.getState(): ', store.getState())
186 |     ReactDOM.render(
187 |         <App
188 |             {...store.getState()}
189 |             // todos={store.getState().todos}
190 |             // visibilityFilter={store.getState().visibilityFilter}
191 |             onAddToDo={() => addToDo()}
192 |             onToggleToDo={id => toggleToDo(id)}
193 |             onFilter={filter => filterTodos(filter)}
194 |         />,
195 |         root
196 |     )
197 | }
198 | 
199 | store.subscribe(render)
200 | render()
201 | 


--------------------------------------------------------------------------------
/Notebooks/Redux intro - Dan Abramov/4- reducer composition to do app/style.css:
--------------------------------------------------------------------------------
 1 | #root {
 2 |     display: flex;
 3 |     justify-content: center;
 4 | }
 5 | 
 6 | .wrapper {
 7 |     display: flex;
 8 |     align-items: flex-start;
 9 |     justify-content: space-between;
10 |     width: 100%;
11 |     max-width: 80vw;
12 | }
13 | 
14 | .active {
15 |     font-weight: bold;;
16 | }
17 | 
18 | .completed {
19 |     text-decoration: line-through;
20 | }
21 | 
22 | .filter {
23 |     margin-top: 32px;
24 | }
25 | 
26 | .filter-buttons {
27 |     display: flex;
28 |     flex-direction: column;
29 | }
30 | 
31 | .filter-buttons button {
32 |     margin: 8px 0;
33 |     height: 32px;
34 | }


--------------------------------------------------------------------------------
/Notebooks/Redux intro - Dan Abramov/redux-intro-notes.md:
--------------------------------------------------------------------------------
 1 | # [Getting Started with Redux](https://egghead.io/courses/getting-started-with-redux)
 2 | 
 3 | ## The 3 principles of Redux
 4 | 
 5 | + The single immutable state tree.
 6 | + State can only be changed by dispatching an **action**. An action is an object.
 7 | + The **reducer**: is a **pure** function that takes the **previous state** of the app and the **action** being dispatched and returns the **next state**.
 8 | 
 9 | ## Reducer example
10 | 
11 | ```JS
12 | function counter(state, action) {
13 |     if (typeof state === 'undefined') return 0 // Whatever the initial state is
14 | 
15 |     if (action.type === 'INCREMENT') {
16 |         return state + 1
17 |     } else if (action.type === 'DECREMENT') {
18 |         return state - 1
19 |     } else {
20 |         return state // If it's not a valid action, return the same state
21 |     }
22 | }
23 | ```
24 | 
25 | Refactored for clarity and ES6
26 | 
27 | ```JS
28 | const counter = (state = 0, action) => {
29 |     switch (action.type) {
30 |         case 'INCREMENT':
31 |             return state + 1
32 |         case 'DECREMENT':
33 |             return state - 1
34 |         default:
35 |             return state
36 |     }
37 | }
38 | ```
39 | ## Store methods
40 | 
41 | + getState(): gets the current state
42 | + dispatch(): runs an action
43 | + subscribe(): The store will run the provided callback function any time an action has been dispatched.
44 | Example: `store.subscribe(render)`will fire `render()` any time an action is dispatched.
45 | 


--------------------------------------------------------------------------------
/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 | [Portfolio](https://www.sykhoudeib.com/ "sykhoudeib.com") || [Blog](https://www.blog.sykhoudeib.com/ "My web dev articles")
  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>Occasional Use | 3<br>Regular use |
 14 | | :--------------------------- | :---------------: | :-----------------: | :--------------: |
 15 | | **JavaScript**               |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 16 | | **React**                    |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 17 | | **TypeScript**               |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 18 | | **Next.js**                  |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 19 | | **Next App Router**          |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 20 | | **Git**                      |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 21 | | **Vitest**                   |   ![done][done]   |    ![done][done]    |                  |
 22 | | **Jest**                     |   ![done][done]   |    ![done][done]    |                  |
 23 | | **React Testing Library**    |   ![done][done]   |    ![done][done]    |                  |
 24 | | **Redux**                    |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 25 | | **Zustand**                  |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 26 | | **HTML**                     |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 27 | | **CSS**                      |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 28 | | **TailWind**                 |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 29 | | **NPM**                      |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 30 | | **PNPM**                     |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 31 | | **Yarn**                     |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 32 | | **React Query**              |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 33 | | **Auth0**                    |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 34 | | **KrakenD**                  |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 35 | | **GoogleMaps API**           |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 36 | | **Material UI**              |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 37 | | **ShadCN**                   |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 38 | | **StoryBook**                |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 39 | | **MJML**                     |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 40 | | **Markdown**                 |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 41 | | **Node.js**                  |   ![done][done]   |    ![done][done]    |                  |
 42 | | **GitHub**                   |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 43 | | **Lokalise**                 |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 44 | | **ES6**                      |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 45 | | **Command line**             |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 46 | | **React hooks**              |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 47 | | **React Context**            |   ![done][done]   |    ![done][done]    |                  |
 48 | | **Prettier**                 |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 49 | | **EsLint**                   |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 50 | | **DayJS**                    |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 51 | | **React Hook Form**          |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 52 | | **Accessibility**            |   ![done][done]   |    ![done][done]    |                  |
 53 | | **Husky**                    |   ![done][done]   |    ![done][done]    |                  |
 54 | | **Vercel**                   |   ![done][done]   |                     |                  |
 55 | | **Agile**                    |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 56 | | **Jira**                     |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 57 | | **Gulp/Webpack**             |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 58 | | **Responsive design**        |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 59 | | **Bitbucket**                |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 60 | | **Mobile first**             |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 61 | | **Progressive Enhancement**  |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 62 | | **CSS Grid & Flex-box**      |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 63 | | **PostCSS**                  |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 64 | | **Working with APIs**        |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 65 | | **Website Building**         |   ![done][done]   |    ![done][done]    |  ![done][done]   |
 66 | | **Publishing website**       |   ![done][done]   |    ![done][done]    |                  |
 67 | | **Netlify**                  |   ![done][done]   |    ![done][done]    |                  |
 68 | | **Backbone**                 |   ![done][done]   |    ![done][done]    |                  |
 69 | | **jQuery**                   |   ![done][done]   |    ![done][done]    |                  |
 70 | | **Bootstrap**                |   ![done][done]   |    ![done][done]    |                  |
 71 | | **Stylus**                   |   ![done][done]   |    ![done][done]    |                  |
 72 | | **Open Source Contribution** |   ![done][done]   |                     |                  |
 73 | | **Angular 4**                |   ![done][done]   |                     |                  |
 74 | 
 75 | ---
 76 | 
 77 | ## Learning
 78 | 
 79 | [//]: # "Status images"
 80 | [Completed]: https://user-images.githubusercontent.com/29199184/32275438-8385f5c0-bf0b-11e7-9406-42265f71e2bd.png "Completed"
 81 | [In Progress]: https://user-images.githubusercontent.com/29199184/34462881-7305ddac-ee4d-11e7-9b57-589424820da4.png "In Progress"
 82 | [Soon]: https://user-images.githubusercontent.com/29199184/34462916-d5c37bd4-ee4d-11e7-9f4a-d57f2243281b.png "Soon"
 83 | 
 84 | |           Status            | Year      | Course                                                   |              Tutor               |
 85 | | :-------------------------: | :-------- | :------------------------------------------------------- | :------------------------------: |
 86 | | ![In Progress][In Progress] | Feb 2025  | [Web Performance Fundamentals]                           |          [Todd Gardner]          |
 87 | | ![In Progress][In Progress] | Feb 2025  | [The Hard Parts of UI Development]                       |         [Will Sentence]          |
 88 | | ![In Progress][In Progress] | Dec 2024  | [Full Stack for Frontend Engineers]                      |           [Jem Young]            |
 89 | |   ![Completed][Completed]   | Feb 2025  | [JavaScript: The Hard Parts v2]                          |         [Will Sentence]          |
 90 | |   ![Completed][Completed]   | Jan 2025  | [Web Security]                                           |          [Steve Kinney]          |
 91 | |   ![Completed][Completed]   | Jan 2025  | [React Performance]                                      |          [Steve Kinney]          |
 92 | |   ![Completed][Completed]   | Jan 2025  | [Web App Accessibility]                                  |       [Marcy Sutton Todd]        |
 93 | |   ![Completed][Completed]   | Jan 2025  | [Developer Soft Skills and Testing]                      |       [Francesca Sadikin]        |
 94 | |   ![Completed][Completed]   | Jan 2025  | [Testing Fundamentals]                                   |          [Steve Kinney]          |
 95 | |   ![Completed][Completed]   | Jan 2025  | [Introduction to Next.js, v3]                            |           [Scott Moss]           |
 96 | |   ![Completed][Completed]   | Oct 2023  | [Harvard CS50]                                           |        Harvard University        |
 97 | |   ![Completed][Completed]   | Dec 2022  | [React and TypeScript]                                   |          [Steve Kinney]          |
 98 | |   ![Completed][Completed]   | Nov 2022  | [TypeScript Fundamentals v3]                             |           [Mike North]           |
 99 | |   ![Completed][Completed]   | Nov 2022  | [JavaScript: The New Hard Parts]                         |         [Will Sentence]          |
100 | |   ![Completed][Completed]   | Sept 2022 | [The Hard Parts of Servers and Node.js]                  |         [Will Sentence]          |
101 | |   ![Completed][Completed]   | Sept 2022 | [Understanding TypeScript]                               |    [Maximilian Schwarzmüller]    |
102 | |   ![Completed][Completed]   | Mar 2022  | [JavaScript: The Hard Parts]                             |         [Will Sentence]          |
103 | |   ![Completed][Completed]   | Jan 2022  | [Dotfiles from start to finish-ish]                      |        [Patrick McDonald]        |
104 | |   ![Completed][Completed]   | Dec 2019  | [Getting Started With Redux]                             |   [Dan Abramov] - [egghead.io]   |
105 | |   ![Completed][Completed]   | Dec 2019  | [The Next.js Handbook]                                   |          [Flavio Copes]          |
106 | |   ![Completed][Completed]   | Oct 2019  | [You Don't Know JavaScript]: Types & Grammar             |          [Kyle Simpson]          |
107 | |   ![Completed][Completed]   | Sept 2019 | [You Don't Know JavaScript]: Objects & Classes           |          [Kyle Simpson]          |
108 | |   ![Completed][Completed]   | Jul 2019  | [You Don't Know JavaScript]: Scope & Closure             |          [Kyle Simpson]          |
109 | |   ![Completed][Completed]   | May 2019  | [Eloquent JavaScript]                                    |        [Marijn Haverbeke]        |
110 | |   ![Completed][Completed]   | Feb 2019  | [The Complete JavaScript Handbook]                       |          [Flavio Copes]          |
111 | |   ![Completed][Completed]   | Jan 2019  | [JavaScript clean code guide]                            |         [Ryan McDermott]         |
112 | |   ![Completed][Completed]   | Aug 2018  | [Front-End Web Developer Nanodegree]                     |  [Udacity] - Google Scholarship  |
113 | |   ![Completed][Completed]   | Feb 2018  | [The Beginner's Guide to Reactjs]                        |  [Kent C Dodds] - [egghead.io]   |
114 | |   ![Completed][Completed]   | Jan 2018  | [Google Developer Challenge Scholarship] - Web Developer |            [Udacity]             |
115 | |   ![Completed][Completed]   | 2017      | [Workflow Tools for Web Developers]                      | [Christina Truong] - [Lynda.com] |
116 | |   ![Completed][Completed]   | 2017      | [Learning Git and GitHub]                                |  [Ray Villalobos] - [Lynda.com]  |
117 | |   ![Completed][Completed]   | 2017      | [CSS Essential Training 3]                               | [Christina Truong] - [Lynda.com] |
118 | |   ![Completed][Completed]   | 2017      | [CSS Essential Training 2]                               | [Christina Truong] - [Lynda.com] |
119 | |   ![Completed][Completed]   | 2017      | [Getting Your Website Online]                            | [Christina Truong] - [Lynda.com] |
120 | |   ![Completed][Completed]   | 2017      | [Learn Enough Command Line to Be Dangerous]              |         [Michael Hartl]          |
121 | |   ![Completed][Completed]   | 2017      | [Basic Front End Development Projects]                   |         [Free Code Camp]         |
122 | |   ![Completed][Completed]   | 2017      | [The Web Developer Bootcamp - Frond End]                 |      Colt Steele - [Udemy]       |
123 | | ![In Progress][In Progress] |           | [JavaScript and React for Developers]                    |   [Cassidy Williams] - [Udemy]   |
124 | | ![In Progress][In Progress] |           | [Front End Development]                                  |         [Free Code Camp]         |
125 | | ![In Progress][In Progress] |           | [JavaScript30]                                           |            [Wes Bos]             |
126 | |        ![Soon][Soon]        |           | Read JavaScript: The Good Parts                          |        Douglas Crockford         |
127 | 
128 | [//]: # "Reference links to courses"
129 | [Full Stack for Frontend Engineers]: https://frontendmasters.com/courses/fullstack-v3/
130 | [Web Performance Fundamentals]: https://frontendmasters.com/courses/web-perf-v2/
131 | [The Hard Parts of UI Development]: https://frontendmasters.com/courses/hard-parts-ui-dev/
132 | [JavaScript: The Hard Parts v2]: https://frontendmasters.com/courses/javascript-hard-parts-v2/
133 | [Web Security]: https://frontendmasters.com/courses/web-security-v2/
134 | [React Performance]: https://frontendmasters.com/courses/react-performance/
135 | [Web App Accessibility]: https://frontendmasters.com/courses/react-accessibility/
136 | [Developer Soft Skills and Testing]: https://frontendmasters.com/courses/dev-soft-skills/
137 | [Testing Fundamentals]: https://frontendmasters.com/courses/testing/
138 | [Introduction to Next.js, v3]: https://frontendmasters.com/courses/next-js-v3/
139 | [Harvard CS50]: https://youtu.be/8mAITcNt710?si=6BavtRpgNdc2HnZS
140 | [React and TypeScript]: https://frontendmasters.com/courses/react-typescript/
141 | [TypeScript Fundamentals v3]: https://frontendmasters.com/courses/typescript-v3/
142 | [JavaScript: The New Hard Parts]: https://frontendmasters.com/courses/javascript-new-hard-parts/
143 | [The Hard Parts of Servers and Node.js]: https://frontendmasters.com/courses/servers-node-js
144 | [Understanding TypeScript]: https://www.udemy.com/course/understanding-typescript/
145 | [JavaScript: The Hard Parts]: https://frontendmasters.com/courses/javascript-hard-parts-v2/
146 | [Dotfiles from start to finish-ish]: https://www.udemy.com/course/dotfiles-from-start-to-finish-ish/
147 | [Getting Started With Redux]: https://egghead.io/courses/getting-started-with-redux
148 | [The Next.js Handbook]: https://www.freecodecamp.org/news/the-next-js-handbook/
149 | [The Complete JavaScript Handbook]: https://medium.freecodecamp.org/the-complete-javascript-handbook-f26b2c71719c
150 | [JavaScript clean code guide]: https://github.com/ryanmcdermott/clean-code-javascript
151 | [Front-End Web Developer Nanodegree]: https://eu.udacity.com/course/front-end-web-developer-nanodegree--nd001
152 | [JavaScript and React for Developers]: https://www.udemy.com/js-and-react-for-devs/
153 | [You Don't know JavaScript]: https://github.com/getify/You-Dont-Know-JS
154 | [Workflow Tools for Web Developers]: https://www.lynda.com/Web-Design-tutorials/Workflow-Tools-Web-Development/533305-2.html
155 | [Learning Git and GitHub]: https://www.lynda.com/Git-tutorials/Up-Running-Git-GitHub/409275-2.html
156 | [CSS Essential Training 3]: https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-3/609030-2.html
157 | [CSS Essential Training 2]: https://www.lynda.com/CSS-tutorials/CSS-Essential-Training-2/569189-2.html
158 | [Getting Your Website Online]: https://www.lynda.com/Web-Development-tutorials/Getting-Your-Website-Online/609031-2.html
159 | [Learn Enough Command Line to Be Dangerous]: https://www.learnenough.com/command-line-tutorial
160 | [Basic Front End Development Projects]: https://www.freecodecamp.org/syknapse
161 | [The Web Developer Bootcamp - Frond End]: https://www.udemy.com/the-web-developer-bootcamp
162 | [The Web Developer Bootcamp - Back End]: https://www.udemy.com/the-web-developer-bootcamp
163 | [Front End Development]: https://www.freecodecamp.org/syknapse
164 | [Google Developer Challenge Scholarship]: https://www.udacity.com/google-scholarships
165 | [JavaScript30]: https://javascript30.com/
166 | [JavaScript & jQuery]: http://javascriptbook.com/
167 | [Eloquent JavaScript]: http://eloquentjavascript.net/
168 | [Learn CSS Grid]: https://scrimba.com/g/gR8PTE
169 | [The Beginner's Guide to Reactjs]: https://egghead.io/courses/the-beginner-s-guide-to-reactjs
170 | [//]: # "Reference links to tutors"
171 | [Jem Young]: https://github.com/young
172 | [Todd Gardner]: https://github.com/toddhgardner
173 | [Marcy Sutton Todd]: https://frontendmasters.com/teachers/marcy-sutton/
174 | [Francesca Sadikin]: https://frontendmasters.com/teachers/francesca-sadikin/
175 | [Scott Moss]: https://frontendmasters.com/teachers/scott-moss/
176 | [Steve Kinney]: https://twitter.com/stevekinney
177 | [Mike North]: https://twitter.com/michaellnorth
178 | [Maximilian Schwarzmüller]: https://twitter.com/maxedapps
179 | [Will Sentence]: https://twitter.com/willsentance
180 | [Patrick McDonald]: https://www.udemy.com/user/patrick-mcdonald-8/
181 | [Dan Abramov]: https://twitter.com/dan_abramov
182 | [Kyle Simpson]: https://twitter.com/getify
183 | [Flavio Copes]: https://twitter.com/flaviocopes
184 | [Ryan McDermott]: https://github.com/ryanmcdermott
185 | [Cassidy Williams]: https://twitter.com/cassidoo
186 | [Christina Truong]: https://twitter.com/christinatruong
187 | [Lynda.com]: https://www.lynda.com
188 | [Ray Villalobos]: https://twitter.com/planetoftheweb
189 | [Michael Hartl]: https://twitter.com/mhartl
190 | [Free Code Camp]: https://www.freecodecamp.org
191 | [Udemy]: https://www.udemy.com
192 | [Udacity]: https://www.udacity.com
193 | [Wes Bos]: https://twitter.com/wesbos
194 | [Marijn Haverbeke]: https://twitter.com/MarijnJH
195 | [Per Harald Borgen]: https://twitter.com/perborgen
196 | [Scrimba]: https://scrimba.com/
197 | [Kent C Dodds]: https://egghead.io/instructors/kentcdodds
198 | [egghead.io]: https://egghead.io/
199 | 
200 | ### Paths
201 | 
202 | | Paths with multiple resources                        |        Author        |
203 | | :--------------------------------------------------- | :------------------: |
204 | | [33 concepts every JavaScript developer should know] | [Leonardo Maldonado] |
205 | | [Best JavaScript books, tutorials, courses & videos] |      [ReactDOM]      |
206 | | [Learn to code in 2018]                              |   [Andrei Neagoie]   |
207 | | [Get Job ready - JavaScript Edition]                 |        [P1xt]        |
208 | | [Full Stack Web Developer Path]                      | [Shovan Chatterjee]  |
209 | 
210 | [//]: # "Reference links to paths"
211 | [33 concepts every JavaScript developer should know]: https://github.com/leonardomso/33-js-concepts
212 | [Best JavaScript books, tutorials, courses & videos]: https://reactdom.com/blog/javascript-books
213 | [Learn to code in 2018]: https://hackernoon.com/learn-to-code-in-2018-get-hired-and-have-fun-along-the-way-b338247eed6a
214 | [Get Job ready - JavaScript Edition]: https://github.com/P1xt/p1xt-guides/blob/master/job-ready-javascript-edition-2.0.md
215 | [Full Stack Web Developer Path]: https://github.com/shovanch/fullstack-web-developer-path
216 | [//]: # "Reference links to authors"
217 | [Leonardo Maldonado]: https://github.com/leonardomso
218 | [ReactDOM]: https://reactdom.com
219 | [Andrei Neagoie]: https://twitter.com/AndreiNeagoie
220 | [P1xt]: https://github.com/P1xt
221 | [Shovan Chatterjee]: https://github.com/shovanch
222 | 
223 | ---
224 | 
225 | ## Interests
226 | 
227 | I'm currently interested in/excited about:
228 | 
229 | - Typescript
230 | - Testing
231 | - Node and the MERN stack
232 | - .dotfiles
233 | 
234 | ---
235 | 
236 | ## Web Development Checklist
237 | 
238 | This is a list of basic objectives to meet on the road to mastering web development.
239 | 
240 | 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)
241 | 
242 | - [x] Open the computer’s terminal
243 | - [x] Use a text editor (bonus points if you have a specific reason for choosing it)
244 | - [x] Use some keyboard shortcuts
245 | - [x] Write tests for your code
246 | - [x] Help another web developer with something they’re having trouble with
247 | - [x] Attend an event about web development
248 | - [x] Follow developers you admire on social media
249 | - [x] Read a book about coding
250 | - [x] Open your browser console
251 | - [x] Get data from an API
252 | - [x] Hide API keys from the public
253 | - [x] Post a question on Stack Overflow
254 | - [x] Push code to GitHub or GitLab or BitBucket
255 | - [ ] Speak about something web development-related at an event
256 | - [x] Complete a technical interview
257 | - [x] Participate in a hackathon
258 | - [x] Deploy a project
259 | - [ ] Ship your project to a store
260 | - [ ] Contribute to open source
261 | - [x] Get paid to code
262 | - [x] When people ask what you do, respond saying you’re a developer :)
263 | 
264 | ---
265 | 
266 | If you find this useful for your own needs you are welcome to fork a copy, customise it or even give it a star :)
267 | 
268 | **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")**
269 | 
270 | ---
271 | 
272 | ### Acknowledgments
273 | 
274 | 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.
275 | 
276 | ### License
277 | 
278 | [MIT License](https://github.com/Syknapse/My-Learning-Tracker/blob/master/LICENSE)
279 | 


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


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