Skip to content

Commit 7aaab17

Browse files
anthonydmaysanthonydmays
authored
docs: adds lesson_18 homework and lesson_19 pre-work (code-differently#618)
* docs: adds lesson_18 homework and lesson_19 pre-work Signed-off-by: Anthony D. Mays <[email protected]> * docs: renumbers slides Signed-off-by: Anthony D. Mays <[email protected]> --------- Signed-off-by: Anthony D. Mays <[email protected]>
1 parent f0e020d commit 7aaab17

File tree

15 files changed

+1232
-1200
lines changed

15 files changed

+1232
-1200
lines changed

‎lesson_18/README.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Lesson 18: Computer Languages ([Slides](https://code-differently.github.io/code-society-25-2/slides/#/lesson_18))
2+
3+
## Pre-work
4+
5+
Please review the following resources before lecture:
6+
7+
* [Programming Paradigms Explained (Video)](https://www.youtube.com/watch?v=H5uA6p_pK-Y)
8+
* [Ditch your Favorite Programming Paradigm (Video)](https://www.youtube.com/watch?v=UOkOA6W-vwc)
9+
10+
## Homework
11+
12+
- [ ] Complete [Project OOP Team Member Surveys][survey-link] (for each team member).
13+
- [ ] Do pre-work for [lesson 19](/lesson_19/).
14+
15+
[survey-link]: https://ml.tips/cs-25-2-feedback

‎lesson_19/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Lesson 19: Building Applications ([Slides](https://code-differently.github.io/code-society-25-2/slides/#/lesson_19))
2+
3+
## Pre-work
4+
5+
Please review the following resources before lecture:
6+
7+
### Required
8+
* [Frontend web development - a complete overview (Video)](https://www.youtube.com/watch?v=WG5ikvJ2TKA)
9+
* [Backend web development - a complete overview (Video)](https://www.youtube.com/watch?v=XBu54nfzxAQ)
10+
* [3 Tier Architecture (Video)](https://www.youtube.com/watch?v=THPg8Hz2zZo)
11+
12+
### Recommended
13+
* [What is an API (in 5 minutes) (Video)](https://www.youtube.com/watch?v=ByGJQzlzxQg)
14+
15+
## Homework
16+
17+
- TODO(anthonydmays): Setup files and templates

‎slides/src/Slides/Lessons/Lesson18.js‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,316 @@
1+
import htm from "htm";
2+
import { createElement } from "react";
3+
import { CodeSlide, Lesson } from "../Layouts/index.js";
4+
5+
const html = htm.bind(createElement);
6+
7+
function Lesson18() {
8+
return html`
9+
<${Lesson} title="Computer Languages" lessonId="lesson_18" subtitle="Lesson 18">
10+
<section>
11+
<p>We're going to explore a few new <em>languages</em></p>
12+
</section>
13+
<section>
14+
<p>But before we do, let's discuss how we classify languages</p>
15+
</section>
16+
<section class="ml-bullet-slide">
17+
<h3>Types of languages</h3>
18+
<ul>
19+
<li class="fragment">Programming</li>
20+
<li class="fragment">Markup</li>
21+
<li class="fragment">Data</li>
22+
<li class="fragment">Query</li>
23+
</ul>
24+
</section>
25+
<section class="ml-bullet-slide">
26+
<h3>Types of languages</h3>
27+
<ul>
28+
<li><em>Programming</em></li>
29+
<li>Markup</li>
30+
<li>Data</li>
31+
<li>Query</li>
32+
</ul>
33+
</section>
34+
<section>
35+
<p><em>Programming languages</em> are used to instruct the computer <i>how</i> to do something (imperative)</p>
36+
</section>
37+
<section>
38+
<p>There are three popular <em>paradigms</em> of programming languages: <i>object oriented</i>, <i>scripting</i>, and <i>functional</i></p>
39+
</section>
40+
<section>
41+
<p><em>Object-oriented programming</em> languages primary use OOP principles for organizing code</p>
42+
</section>
43+
<section class="ml-bullet-slide">
44+
<h3>Object-oriented languages</h3>
45+
<ul>
46+
<li class="fragment">Java</li>
47+
<li class="fragment">C#</li>
48+
<li class="fragment">C++</li>
49+
<li class="fragment">Python</li>
50+
<li class="fragment">Rust</li>
51+
</ul>
52+
</section>
53+
<section class="ml-bullet-slide">
54+
<h3>Pros of OOP</h3>
55+
<ul>
56+
<li class="fragment">Great for representing complex, real-world concepts</li>
57+
<li class="fragment">Can be used by large teams and organizations effectively</li>
58+
<li class="fragment">Optimal for code reuse and common patterns</li>
59+
</ul>
60+
</section>
61+
<section class="ml-bullet-slide">
62+
<h3>Cons of OOP</h3>
63+
<ul>
64+
<li class="fragment">TONS of boilerplate</li>
65+
<li class="fragment">Most OOP languages need to be compiled before they can be executed</li>
66+
<li class="fragment">Typically only used on the backend</li>
67+
</ul>
68+
</section>
69+
<section>
70+
<p><em>Scripting languages</em> are designed for automating tasks and are typically lighter than OOP languages</p>
71+
</section>
72+
<section>
73+
<p>They often don't need to be compiled before being run. Instead, they are <em>interpreted</em> line-by-line</p>
74+
</section>
75+
<section>
76+
<p>Scripting languages are way more chill, featuring conveniences like dynamic typing, weak typing, and first-class functions</p>
77+
</section>
78+
<section class="ml-bullet-slide">
79+
<h3>Scripting languages</h3>
80+
<ul>
81+
<li class="fragment">JavaScript</li>
82+
<li class="fragment">Python</li>
83+
<li class="fragment">Bash</li>
84+
<li class="fragment">Powershell</li>
85+
</ul>
86+
</section>
87+
<section data-background-image="images/jackie-chan-meme.gif" data-background-size="contain" data-background-opacity="0.5">
88+
<p>Isn't Python an OOP language?</p>
89+
</section>
90+
<section>
91+
<p>Some languages are multi-paradigm, and can be used as OOP, scripting, or functional languages</p>
92+
</section>
93+
<section class="ml-bullet-slide">
94+
<h3>Pros of Scripting Languages</h3>
95+
<ul>
96+
<li class="fragment">Less boilerplate</li>
97+
<li class="fragment">Can usually run code anywhere quickly</li>
98+
<li class="fragment">Useful for automating anything</li>
99+
</ul>
100+
</section>
101+
<section class="ml-bullet-slide">
102+
<h3>Cons of Scripting Languages</h3>
103+
<ul>
104+
<li class="fragment">Since many are weakly typed, it can be harder to catch some bugs</li>
105+
<li class="fragment">Harder to use in large teams</li>
106+
<li class="fragment">Typically slower to execute than OOP languages</li>
107+
</ul>
108+
</section>
109+
<section>
110+
<p>Lastly, there are <em>functional</em> programming languages, called so because they rely on functions to describe the world</p>
111+
</section>
112+
<section>
113+
<p>Usually, functions are first-class citizens that can be used like any other data type, and functions are often composed of other functions</p>
114+
</section>
115+
<section class="ml-bullet-slide">
116+
<h3>Functional languages</h3>
117+
<ul>
118+
<li class="fragment">Lisp</li>
119+
<li class="fragment">Scheme</li>
120+
<li class="fragment">Closure</li>
121+
<li class="fragment">JavaScript</li>
122+
<li class="fragment">Python</li>
123+
</ul>
124+
</section>
125+
<section class="ml-bullet-slide">
126+
<h3>Pros of functional languages</h3>
127+
<ul>
128+
<li>Often chill like scripting languages</li>
129+
<li>Prizes immutability and pure functions, which can minimize bugs and simplify logic</li>
130+
<li>Great for math applications and AI</li>
131+
</ul>
132+
</section>
133+
<section class="ml-bullet-slide">
134+
<h3>Cons of functional languages</h3>
135+
<ul>
136+
<li>Higher learning curve than OOP and scripting languages</li>
137+
</ul>
138+
</section>
139+
<section class="ml-bullet-slide">
140+
<h3>Types of languages</h3>
141+
<ul>
142+
<li><em>Programming</em></li>
143+
<li>Markup</li>
144+
<li>Data</li>
145+
<li>Query</li>
146+
</ul>
147+
</section>
148+
<section class="ml-bullet-slide">
149+
<h3>Types of languages</h3>
150+
<ul>
151+
<li>Programming</li>
152+
<li><em>Markup</em></li>
153+
<li>Data</li>
154+
<li>Query</li>
155+
</ul>
156+
</section>
157+
<section>
158+
<p>Instead of describing how to do something, <em>markup languages</em> describe <i>what</i> to do and let's the computer do the rest (declarative)</p>
159+
</section>
160+
<section>
161+
<p>These languages are great for specifying user interface elements and styling</p>
162+
</section>
163+
<section class="ml-bullet-slide">
164+
<h3>Markup languages</h3>
165+
<ul>
166+
<li>HTML (HyperText Markup Language)</li>
167+
<li>CSS (Cascading Style Sheets)</li>
168+
</ul>
169+
</section>
170+
<${CodeSlide} title="HTML" lang="html" fontSize=".7em">
171+
${`
172+
<table border="1">
173+
<tr>
174+
<td>6.38</td>
175+
<td>Conagra Brands</td>
176+
<td><b>David's Original</b></td>
177+
<td>5.25</td>
178+
<td>OZ</td>
179+
</tr>
180+
</table>
181+
`}
182+
<//>
183+
<${CodeSlide} title="CSS" lang="css" fontSize=".7em">
184+
${`
185+
td {
186+
font-style: italic;
187+
text-align: center;
188+
padding: 0 10px;
189+
}
190+
`}
191+
<//>
192+
<section class="ml-bullet-slide">
193+
<h3>Types of languages</h3>
194+
<ul>
195+
<li>Programming</li>
196+
<li><em>Markup</em></li>
197+
<li>Data</li>
198+
<li>Query</li>
199+
</ul>
200+
</section>
201+
<section class="ml-bullet-slide">
202+
<h3>Types of languages</h3>
203+
<ul>
204+
<li>Programming</li>
205+
<li>Markup</li>
206+
<li><em>Data</em></li>
207+
<li>Query</li>
208+
</ul>
209+
</section>
210+
<section>
211+
<p><em>Data languages</em> are useful for describing data in a structured way. They are also tend to be declarative</p>
212+
</section>
213+
<section>
214+
<p>These languages annotate data to provide more semantic meaning</p>
215+
</section>
216+
<section>
217+
<p>
218+
<pre>
219+
$6.38
220+
Conagra Brands
221+
David's Original
222+
5.25
223+
OZ
224+
</pre>
225+
</p>
226+
</section>
227+
<${CodeSlide} title="XML" lang="xml" fontSize=".7em">
228+
${`
229+
<product>
230+
<price>6.38</price>
231+
<supplier>Conagra Brands</supplier>
232+
<name>David's Original<name>
233+
<weight>5.25</weight>
234+
<units>OZ</units>
235+
<product>
236+
`}
237+
<//>
238+
<${CodeSlide} title="JSON" lang="json" fontSize=".7em">
239+
${`
240+
{
241+
"type": "product",
242+
"price": "$6.38"
243+
"supplier": "Conagra Brands"
244+
"name": "David's Original"
245+
"weight": 5.25
246+
"units": "OZ"
247+
}
248+
`}
249+
<//>
250+
<${CodeSlide} title="YAML" lang="yaml" fontSize=".7em">
251+
${`
252+
- product:
253+
price: $6.38
254+
supplier: Conagra Brands
255+
name: David's Original
256+
weight: 5.25
257+
units: OZ
258+
`}
259+
<//>
260+
<section class="ml-bullet-slide">
261+
<h3>Types of languages</h3>
262+
<ul>
263+
<li>Programming</li>
264+
<li>Markup</li>
265+
<li><em>Data</em></li>
266+
<li>Query</li>
267+
</ul>
268+
</section>
269+
<section class="ml-bullet-slide">
270+
<h3>Types of languages</h3>
271+
<ul>
272+
<li>Programming</li>
273+
<li>Markup</li>
274+
<li>Data</li>
275+
<li><em>Query</em></li>
276+
</ul>
277+
</section>
278+
<section>
279+
<p>As with data languages, <em>query languages</em> are useful for working with data and both often work hand-in-hand</p>
280+
</section>
281+
<section>
282+
<p>These languages are almost always used with database applications for retrieving or updating data</p>
283+
</section>
284+
<section class="ml-bullet-slide">
285+
<h3>Query languages</h3>
286+
<ul>
287+
<li class="fragment">SQL (Structured Query Language)</li>
288+
<li class="fragment">XPath (XML Path Language)</li>
289+
<li class="fragment">NoSQL</li>
290+
</ul>
291+
</section>
292+
<${CodeSlide} title="SQL" lang="sql" fontSize=".7em">
293+
${`
294+
SELECT
295+
price,
296+
supplier,
297+
name,
298+
weight,
299+
units
300+
FROM Products;
301+
`}
302+
<//>
303+
<${CodeSlide} title="SQL" lang="sql" fontSize=".7em">
304+
${`
305+
UPDATE
306+
Products
307+
SET
308+
price = "$0.99"
309+
WHERE
310+
name = "David's Original";
311+
`}
312+
<//>
313+
<//>`;
314+
}
315+
316+
export default Lesson18;

0 commit comments

Comments
 (0)