-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (147 loc) · 7.56 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coding Practice</title>
<script src="script.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="nav-header">
<ul class="left-nav">
<li id="todaysDate"></li>
<li id="time"></lI>
<li id="randomColor"></li>
<!-- <li id="typed"><pre></pre></li> -->
</ul>
<div class="header">
<h1>Coding Practice</h1>
</div>
<ul class="right-nav">
<li><a href="javascript.html">Javascript</a></li>
<li><a href="mini_projects/calendar.html">Calendar</a></li>
<li><a href="mini_projects/marathon.html">Marathon</a></li>
<li><a href="random.html">Testing</a></li>
</ul>
</div>
<h1>Welcome to this website for my coding practices</h1>
<span class="headerThree"><h3>Some code I've written</h3><p>from practice run-throughs provided by The Odin Project. Websites include Mozilla, Web3schools, etc...</p></span>
<p id="javascriptCode"></p>
<p>Write code your team understands, if they don't understand ternary, don't use it. Use it on your personal project</p>
<section>
<h3>Library of resources</h3>
<details>
<summary>Devtools</summary>
<details>
<summary>Perfomances</summary>
<a href="https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/">Remove render blocking</a>
</details>
</details>
<details>
<summary>Mongodb</summary>
<p>Linkedin learning</p>
<a href="https://docs.google.com/document/d/1aY4iTuvXcMBL5q6B55kZ3DyAwbIYR7ABBApE6OLra80/edit?usp=sharing">cheat sheet</a>
</details>
<details>
<summary>How to name a function</summary>
<p>Functions usually are verbs, as they're doing something.</p>
<ul>
<li>get... (returns a vlue)</li>
<li>show... (calculates something)</li>
<li>create... (creates something)</li>
<li>check... (checks something and returns a boolean,etc.)</li>
</ul>
<p>Examples: showMessage, getAge, calcSum, createForm, checkPermission
<br> Should only be used for it's name and action and not another action
</p>
<a href="http://javascript.info/function-basics">Link</a>
</details>
<details>
<summary>How Javascript call Stack Works</summary>
<a href="https://www.javascripttutorial.net/javascript-call-stack/">Javascript-call-stack</a>
</details>
<details>
<summary>PseudoCode</summary>
<a href="https://web.archive.org/web/20211229231605/https://www.vikingcodeschool.com/software-engineering-basics/what-is-pseudo-coding">Article</a> <br>
<a href="https://www.youtube.com/watch?v=azcrPFhaY9k">Video</a>
<p>Note - comment and brainstorming is always first before the actual code <br>
Write out the steps of how the program is going to work then create the code for each step</p>
</details>
<details>
<summary>Watch video on repetitive coding || MIT OpenCourse</summary>
<a href="https://ocw.mit.edu/courses/res-tll-004-stem-concept-videos-fall-2013/resources/basic-programming-techniques/">Stem concept</a>
</details>
<details>
<summary>Three stages of solving problems</summary>
<ul>
<li>
<details>
<summary>Plan</summary>
Sketch out the user interface and what functionallities will the user have <br>
Where is the input coming from, user input or input from somewhere else <br>
What's the desired output <br>
What are steps to return output with given input
</details>
</li>
<li>
<details>
<summary>Pseudocode</summary>
The logic of the project with english language step by step
</details>
</li>
<li>
<details>
<summary>Divide & Conquer</summary>
Work on the subproblems, split the big problem into mini sections and work on them. <br>
Doesn't need to be in order for solving subproblems, aslong as you have one then you can use it to leverage the others
</details>
</li>
</ul>
<a href="https://www.theodinproject.com/lessons/foundations-problem-solving#problem-solving-stages">Link to article</a>
</details>
<details>
<details>
<summary>Two types of error messages</summary>
<ul>
<li>Reference error - the <span class="pink-text">variable</span> hasn't been defined yet</li>
<li>Trace Error - traces back to the origin of when it was called</li>
</ul>
</details>
<details>
<summary>Name 3 types of errors</summary>
<ul>
<li>Syntax Error - Grammatical rule, forgetting a comma or paranthesis <span class="pink-text">(on console)</span> it will show "Uncaught SyntaxErorr"</li>
<li>Reference Error - Check for spelling or check if the variable has been declared or not</li>
<li>TypeError - Trying to use a function for a variable that isn't allowed to do. Ex. using push into a string</li>
</ul>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors">Errors reference</a>
</details>
</details>
<details>
<summary>Airbnb javascript style guide</summary>
<a href="https://github.com/airbnb/javascript#types">Link</a>
</details>
<details>
<summary>Synchronus vs Asynchronus Code</summary>
<h3>Synchornous code flow is from top to bottom, Example: 1-10</h3>
<p>The way it executes is from top to bottom so one must go before the other.
But sometimes if one code from top is taking a long time to execute and the code on bottom
doesn't need the top code to function, then this creates a slow work flow.
</p>
<h3>Asynchronus code flow solves this. Asynchronus code allows one set of functions to go while another set is running also</h3>
</details>
<details>
<summary>XHR Request</summary>
<p>readyState properties; 0-request not initialized; 1-request set up; 2-request send; 3-request in process; 4-complete;</p>
<p>401 Error means they recieved it. So problem might be the way Auth-id link is formatted</p>
</details>
<details>
<summary>DOM Manipulation and Nodes</summary>
<p>Pretty good source from the Odin Project => <a href="https://www.theodinproject.com/lessons/foundations-dom-manipulation-and-events#attaching-listeners-to-groups-of-nodes">Link</a></a></p>
<img src="https://eloquentjavascript.net/img/html-links.svg">
</details>
</section>
</body>
</html>