Skip to content

Commit

Permalink
Merge branch 'main' into patch-10
Browse files Browse the repository at this point in the history
  • Loading branch information
allejo authored Sep 22, 2023
2 parents 0cce4b8 + 281b6b2 commit d07c0b9
Show file tree
Hide file tree
Showing 335 changed files with 46,578 additions and 11,740 deletions.
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,4 @@
1. Run `npm run validate-links` to find potentially dead links.
1. Check links against [our list of false positives](./meta/false-dead-links.md) to weed out the real dead links that need fixing.
1. Fix links and submit a pull request.
1. Search & check links from github.com & codepen.io manually. These sites block bots, so we are unable to test them effectively with our tool.
1. Search & check links from github.com & codepen.io manually. These sites block bots, so we are unable to test them effectively with our tool.
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,8 @@ If you would like to contribute to the curriculum, please [sign up here](https:/

**Get started:**

- Choose an issue from the [TO-DO](https://github.com/Techtonica/curriculum/projects/2) column that seems right for you & leave a comment for Techtonica staff. If you know someone connected to Techtonica, they may be able to add you to our slack channel. If you are here for GHC or Hacktoberfest, message Alina, Leah, or TaLea and say you'd like to pick up the issue.
- In the issue, you should find a link for a lesson outline and for corresponding slides.
- Choose an issue from the [TO-DO](https://github.com/Techtonica/curriculum/projects/2) column that seems right for you & leave a comment for Techtonica staff. If you know someone connected to Techtonica, they may be able to add you to our slack channel. If you are here for GHC or Hacktoberfest, message Cristina, Ruthie or Sarah and say you'd like to pick up the issue.
- In the issue, you should find a link for a lesson outline and for our resources about the topic.
- If it is in the ["TO-DO"](https://github.com/Techtonica/curriculum/projects/2) column, that means it is available, even if there's an "assignee".
- To **create an outline**, fork the repo or commit directly onto the main branch. [Here is a topic outline template that explains what we need for each section](./_templates/topic-outline.md).
- To **edit a slideshow**, you'll need to request edit permission by clicking View Only > Request Edit Access, or message Alina. If you are logged into an account ending in @gmail.com, you can simply make a copy, edit, and transfer ownership to [email protected] when you finish. Either way, save on top of the sample template used in the slide, and cut any slides you find unnecessary.
Expand Down Expand Up @@ -223,7 +223,7 @@ Participants should memorize [common JavaScript built-in functions](/javascript/
### Week 13 - Career Week!

1. [Technical Interviewing](/career/interviewing/technical-interviewing.md)
1. [Take-home Problems](/projects/take-home-problems/frontend.md)
1. [Take-home Problems](/projects/take-home-problems/)
1. [Non-Tech Interviews](/career/interviewing/non-technical-interviewing.md)
1. [Article by Techtonica Alum: Working in the field as a New Software Engineer out of Bootcamp](https://www.linkedin.com/pulse/working-seasoned-engineers-understanding-planning-process-tibrey/)
1. [Career Week: Machine Learning Engineer](/career/roles-in-tech/machine-learning.md)
Expand Down
4 changes: 0 additions & 4 deletions agile-development/intro-to-agile.md
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ The benefits of Agile software development includes:
- [Video: Explaining Scrum in less than 120 seconds](https://www.youtube.com/watch?v=WxiuE-1ujCM)
- [Blog Post: What is a user story?(4 min read)](https://www.mountaingoatsoftware.com/agile/user-stories)
- [Blog Post: What Is a Kanban Board?(5 min read)](https://leankit.com/learn/kanban/kanban-board/)
- [Blog Post: What is a retrospective?(2 min read)](http://finding-marbles.com/retr-o-mat/what-is-a-retrospective/)

### Definition of Agile

Expand Down Expand Up @@ -121,7 +120,6 @@ The Stacey complexity graph divides tasks into four different categories.

Sources / further reading:

- [Complexity Theory Stacey Diagram](https://www.gp-training.net/training/communication_skills/consultation/equipoise/complexity/stacey.htm)
- https://www.scrum-tips.com/2016/02/17/stacey-complexity-model/

_Describe step-by-step what needs to be done to prepare a cup of tea. (Baking a cake by following a recipe is another example to use). This should illustrate a defined process. Plot "making a cup of tea" on the Stacey graph._
Expand Down Expand Up @@ -191,7 +189,6 @@ Process:
- [Blog Post: What is a user story? (4 min read)](https://www.mountaingoatsoftware.com/agile/user-stories)
- [Time-boxing](https://www.agilealliance.org/glossary/iteration)
- [Blog Post: What Is a Kanban Board? (5 min read)](https://leankit.com/learn/kanban/kanban-board/)
- [Blog Post: What is a retrospective? (2 min read)](http://finding-marbles.com/retr-o-mat/what-is-a-retrospective/)

Technical:

Expand Down Expand Up @@ -251,4 +248,3 @@ Incorporate the following in personal study:
- [Wiki Article: eXtreme Programming (XP)(15 min read)](https://en.wikipedia.org/wiki/Extreme_programming)
- [Wiki Article: Feature Driven Delopment (FDD)(8 min read)](https://en.wikipedia.org/wiki/Feature-driven_development)
- [Martin Fowler's blog: A website on building software effectively(3 min read) ](https://martinfowler.com/)
- [Finding Marbles blog: How work can be – Stories of agile & lean - Corinna Baldauf(10 min read)](http://finding-marbles.com/)
6 changes: 1 addition & 5 deletions agile-development/scrum.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
# Scrum

### Projected Time

Example: 60 - 120 minutes

### Prerequisites

- [HTML](/web/html.md)
Expand All @@ -21,7 +17,7 @@ Practicing Scrum will enable you and your team to instantly address change reque

**Which companies use Scrum?**

- Below are the companies that use Scrum. You can find the description of each company [here](https://www.quickstart.com/blog/how-agile-scrum-training-transformed-these-5-companies/).
- Below are some companies that use Scrum.
- 3M: Minnesota Mining and Manufacturing Company.
- IBM
- Google
Expand Down
7 changes: 1 addition & 6 deletions algorithms/searching.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,5 @@
# Searching Algorithms

### Projected Time

- Video: 30 min
- Exercises: 2-3 hours

### Prerequisites

- Arrays
Expand Down Expand Up @@ -66,7 +61,7 @@ Video:[Searching algorithm (video walkthrough of slides)](https://drive.google.c

### Challenge

- Write a binary search to find a given item in an array. You can write it yourself, or use this tutorial for some guidance: https://www.khanacademy.org/computing/computer-science/algorithms/binary-search/p/challenge-binary-search
- Write a binary search to find a given item in an array.

### Check for Understanding

Expand Down
2 changes: 1 addition & 1 deletion algorithms/sorting.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@

Sorting is important in programming for the same reason it is important in everyday life. It is easier and faster to locate items in a sorted list than unsorted. Sorting algorithms can be used in a program to sort an array for later searching or writing out to an ordered file or report.[(by Siddharth Khuntwal)](https://www.quora.com/Why-is-sorting-important-in-computer-science-and-programming)

For example bubble sort, quick sort, and selection sort all take the same input and produce the same output but at different speeds. This is a nice way to show how different approaches can yield more efficient algorithms using approaches such as divide and conquer. On top of that, sorting algorithms don't require advanced data structures knowledge to understand. If you can understand arrays you can understand sorting algorithm examples.[(by cma)](https://dev.to/cooperfle/whats-the-point-of-learning-how-to-sort-20dl)
For example bubble sort, quick sort, and selection sort all take the same input and produce the same output but at different speeds. This is a nice way to show how different approaches can yield more efficient algorithms using approaches such as divide and conquer. On top of that, sorting algorithms don't require advanced data structures knowledge to understand. If you can understand arrays you can understand sorting algorithm examples.

### Objectives

Expand Down
97 changes: 82 additions & 15 deletions api/REST-API.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,10 @@
# REST API

### Projected Time
### Week 5 Keywords and Questions

About 3h30

- Lesson: 30 min
- Guided Practice: 60 min
- Independent Practice: 60 min
- Check for Understanding: 60 min
- What is an API?
- What is a Restful API?
- What is JSON?

### Prerequisites

Expand Down Expand Up @@ -74,6 +71,16 @@ Again, REST is an acronym. It stands for **RE**presentational **S**tate **T**ran

Basically, a REST API is simply a style of architecture that we use when we design any type of networked applications. It can be implemented in any language, but for this lesson, we will be using NodeJS.

#### Key principles of a RESTful API include:

**Statelessness:** The server does not store any client state between requests. Each request from a client must contain all the information necessary to understand and process that request.

**Uniform Interface:** The API should have a consistent and standardized way of interacting with resources. This typically includes using standard HTTP methods like GET (retrieve), POST (create), PUT (update), DELETE (remove), etc.

**Representation:** Resources are represented in various formats like JSON (JavaScript Object Notation), XML (eXtensible Markup Language), or HTML (HyperText Markup Language).

**Self-contained:** Each resource should include enough information to understand how to interact with it. Hypermedia controls (e.g., links) are often used to guide clients through the API.

### HTTP Methods

When you want to make a request to your API, if that one follows RESTful conventions, you will want to use specific HTTP Methods. Here are the most common ones; the ones we will be using below in the guided practice:
Expand Down Expand Up @@ -487,10 +494,8 @@ So, the same way, you can setup the second GET method, as planned:
| ----------- | ----------- |
| `/invoices` | `GET` |

With Express, routing is as easy as chaining the HTTP method to the `route()` method, taking care of putting the route you want to lookup inside of the `route()` method parenthesis.

```javascript
app.route('/invoices').get((req, res) => {
app.get('/invoices', (req, res) => {
res.status(200).send(invoices);
});
```
Expand All @@ -507,7 +512,7 @@ However, the beauty of a RESTful API is that we want to use the possibility to f
So, to create these, simply add another routing to the `app`, but this time we need to fetch the ID that's included in the parameters. If you recall your server lessons, this can be done by accessing the `req.params` object. We then should iterate through all records until we find the record that has the same `id` because that is the property that we are looking for. Of course, you could use any of the object's properties, here. You would just need to adjust the route appropriately, but we will not cover this for now.

```javascript
app.route('/customers/:id').get((req, res) => {
app.get('/customers/:id', (req, res) => {
let customer_id = req.params.id;
let status = 400;
let response = 'Unable to fetch data!';
Expand All @@ -519,7 +524,7 @@ app.route('/customers/:id').get((req, res) => {
res.status(status).send(response);
});

app.route('/invoices/:id').get((req, res) => {
app.get('/invoices/:id', (req, res) => {
let invoice_id = req.params.id;
let status = 400;
let response = 'Unable to fetch data!';
Expand Down Expand Up @@ -635,6 +640,71 @@ Finally, for the `DELETE` method:

And there you go! You now have a complete functioning RESTful API with full CRUD functionality!

```javascript
const express = require('express');
const app = express();
const PORT = 3000;

// Middleware to parse JSON data in the request body
app.use(express.json());

// Sample data: Replace this with a database in a real application
let customers = [
{ id: 1, name: 'John Doe', email: '[email protected]' },
{ id: 2, name: 'Jane Smith', email: '[email protected]' },
];

// GET all customers
app.get('/customers', (req, res) => {
res.json(customers);
});

// GET a single customer by ID
app.get('/customers/:id', (req, res) => {
const customerId = parseInt(req.params.id);
const customer = customers.find((c) => c.id === customerId);
if (customer) {
res.json(customer);
} else {
res.status(404).json({ error: 'Customer not found' });
}
});

// POST a new customer
app.post('/customers', (req, res) => {
const { name, email } = req.body;
const newCustomer = { id: customers.length + 1, name, email };
customers.push(newCustomer);
res.status(201).json(newCustomer);
});

// PUT (update) an existing customer by ID
app.put('/customers/:id', (req, res) => {
const customerId = parseInt(req.params.id);
const { name, email } = req.body;
const customerIndex = customers.findIndex((c) => c.id === customerId);
if (customerIndex !== -1) {
customers[customerIndex] = { id: customerId, name, email };
res.json(customers[customerIndex]);
} else {
res.status(404).json({ error: 'Customer not found' });
}
});

// DELETE a customer by ID
app.delete('/customers/:id', (req, res) => {
const customerId = parseInt(req.params.id);
customers = customers.filter((c) => c.id !== customerId);
res.json({ message: 'Customer deleted successfully' });
});

// Start the server
app.listen(PORT, () => {
console.log(`Server running on http://localhost:${PORT}`);
});

```

</details>

## PART III: Reference, Practice and Supplemental Materials
Expand Down Expand Up @@ -695,12 +765,9 @@ Because practice makes perfect, especially with REST APIs, work with you pair on

- If you want to follow along another type of guided practice, you can have a look at how to [Build a Node.js API in Under 30 Minutes](https://www.freecodecamp.org/news/building-a-simple-node-js-api-in-under-30-minutes-a07ea9e390d2/) blog post.
- [5 Minute Intro to REST APIs](https://www.newline.co/@bchiang7/5-minute-intro-to-rest-apis--b5081674)

- Another great resource is the [What is a RESTful API](https://www.youtube.com/watch?v=Q-BpqyOT3a8) video tutorial by Traversy Media.
- To learn about the Guiding principles of REST:
- [restfulapi.net](https://restfulapi.net/rest-architectural-constraints/)
- [Wikipidia](https://en.wikipedia.org/wiki/Representational_state_transfer#cite_note-Fielding-Ch5-3)
- [Dinesh on Java](https://www.dineshonjava.com/what-is-rest-and-rest-architecture-and-rest-constraints/), to show you APIs can be built with any language but keep their familiarity.
- [Future Vision on Medium](https://medium.com/future-vision/what-are-the-constraints-of-rest-and-how-they-saved-the-internet-6fb8503138ab)
- [A visual blog post](https://blog.appscrip.com/what-is-restful-api-key-constraints-use-cases/)

16 changes: 8 additions & 8 deletions api/apis-and-json.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# APIs & JSON

### Projected Time
### Week 5 Keywords and Questions

About 1.5-2 hours

- 20-30 minutes for video walkthrough of slides
- 10 minutes for Guided Practice
- 10 minutes for Independent Practice
- 30-40 minutes for Check for understanding
- What is an API
- What is JSON
- What is the syntax and structure of JSON
- What is the difference between JSON and a Javascript Object?
- What are serialization and deserialization?
- How does one read data from a JSON?

### Prerequisites

Expand Down Expand Up @@ -146,7 +146,7 @@ You will learn more about forming these requests yourself in the next lesson, [A

Spend 5-10 minutes playing with the 'parameters' section of this website, and see what sort of JSON responses you receive: [https://developer.marvel.com/docs](https://developer.marvel.com/docs)

### Challenge/Check for Understanding
### Challenge/Check for Understanding (if time permits)

**Activity #1**
Select an API from these lists of public APIs: [https://github.com/n0shake/Public-APIs](https://github.com/n0shake/Public-APIs) and [https://github.com/public-apis/public-apis](https://github.com/public-apis/public-apis). Get API keys as needed.
Expand Down
42 changes: 15 additions & 27 deletions api/http-request-practice.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,21 @@
# HTTP Request Practice

### Projected Time
### Week 5 Keywords and Questions

1.5 hour total
- What is an HTTP request?
- What is an HTTP Response?
- What is the HTTP standard?
- What types of HTTP requests are there?
- What is the difference between a Get and a Post?
- What is HTTP Header?
- How do I make an HTTP request in vanilla JS?
- What do the HTTP response codes tell me 1xx, 2xx, 3xx, 4xx, 5xx?

- Lesson: 45 min
- Guided Practice: 10 min
- Independent Practice: 15 min
- Check for Understanding: 20 min
### Additional Questions to Consider

- Why would you pick one way to make a request over another?
- What affordances to higher-level libraries give us? What does "higher-level library" mean?
- Aside from ease of use from an engineer perspective, what other pros/cons would a software team use to choose an HTTP library for their project?

### Prerequisites

Expand Down Expand Up @@ -134,7 +142,7 @@ Let's try it out!

[https://caniuse.com/#feat=fetch](https://caniuse.com/#feat=fetch)

Almost all modern browsers support `fetch`. Unless your app needs to support IE11, then it's safe to use. Even then, you can polyfill it, e.g. [Github's polyfill](https://github.github.io/fetch/).
Almost all modern browsers support `fetch`. Unless your app needs to support IE11, then it's safe to use. Even then, you can polyfill it, e.g. [GitHub's polyfill](https://github.github.io/fetch/).

### Common Mistakes / Misconceptions

Expand All @@ -148,7 +156,6 @@ Open a new tab to try to issue the same `fetch` command.

What happens?

- [b0rk explains CORS](https://twitter.com/b0rk/status/1162392625057583104)
- [Hacking It Out: When CORS won’t let you be great](https://medium.com/netscape/hacking-it-out-when-cors-wont-let-you-be-great-35f6206cc646)

To keep things simple, for this example, we just load the same origin, worldtimeapi.org, so we didn't have to worry about it.
Expand Down Expand Up @@ -189,25 +196,6 @@ fetch is a standard added by browsers but if you like it, it's also available as

Since there are tons of libraries out there, now's a great time to try a few and see what you like/dislike about them compared to those we used above.

#### Exercise

- Choose 2 libraries from the above article and take a few notes comparing them.
- Which was your most favorite of the 5 + 2? Your _least favorite_?

#### Discussion Question

- Why would you pick one way to make a request over another?
- What affordances to higher-level libraries give us? What does "higher-level library" mean?
- Aside from ease of use from an engineer perspective, what other pros/cons would a software team use to choose an HTTP library for their project?

### Check for Understanding

Sync up with your pair partner and go through the following exercises.

#### Discuss Your Most/Least Favorite Tools from this List

- Did either of you choose the same one?

### Supplemental Materials

- [Axios](https://github.com/axios/axios) - a popular HTTP client library for Node
Loading

0 comments on commit d07c0b9

Please sign in to comment.