Skip to content

Commit e958e20

Browse files
QTechDevelopmentQTechDevelopment
authored
Merge pull request #1 from QTechDevelopment/copilot/create-templates-for-concepts
Add hands-on templates for all 33 JavaScript concepts
2 parents d23cfed + 47ab61a commit e958e20

36 files changed

+4745
-2
lines changed

‎QUICKSTART.md‎

Lines changed: 139 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,143 @@
11
# Quick Start Guide
22

3+
copilot/create-templates-for-concepts
4+
Get started with the 33 JavaScript concepts templates in minutes! 🚀
5+
6+
## What You'll Learn
7+
8+
This repository helps you master 33 fundamental JavaScript concepts through hands-on practice with ready-to-use templates.
9+
10+
## Getting Started in 3 Steps
11+
12+
### Step 1: Clone or Download
13+
14+
```bash
15+
# Clone the repository
16+
git clone https://github.com/QTechDevelopment/33-js-concepts.git
17+
18+
# Navigate to the directory
19+
cd 33-js-concepts
20+
```
21+
22+
### Step 2: Choose Your Starting Point
23+
24+
**New to JavaScript?** Start with Concept 1:
25+
```bash
26+
cd templates
27+
node 01-call-stack.js
28+
```
29+
30+
**Want to practice a specific concept?** Pick from the list:
31+
- `01-call-stack.js` - Understanding function execution
32+
- `02-primitive-types.js` - JavaScript data types
33+
- `06-scope.js` - Variable scope and closures
34+
- `21-closures.js` - Advanced closure patterns
35+
- `25-promises.js` - Async programming
36+
- ... and 28 more!
37+
38+
### Step 3: Start Learning
39+
40+
Open any template in your favorite editor and:
41+
42+
1. **Read** the concept explanation at the top
43+
2. **Study** the examples provided
44+
3. **Complete** the practice exercises (marked with `// TODO:`)
45+
4. **Experiment** by modifying the code
46+
5. **Run** your changes: `node <filename>.js`
47+
48+
## Example Workflow
49+
50+
```bash
51+
# Copy a template to work on
52+
cp templates/01-call-stack.js my-practice.js
53+
54+
# Edit it in your editor
55+
code my-practice.js # or vim, nano, etc.
56+
57+
# Run it
58+
node my-practice.js
59+
60+
# Experiment and learn!
61+
```
62+
63+
## What's in Each Template?
64+
65+
Every template includes:
66+
67+
✅ **Clear Explanation** - What the concept is and why it matters
68+
✅ **Multiple Examples** - From basic to advanced usage
69+
✅ **Practice Exercises** - Hands-on coding challenges
70+
✅ **Common Pitfalls** - Mistakes to avoid
71+
✅ **Best Practices** - How to use the concept correctly
72+
✅ **Notes & Tips** - Key takeaways
73+
74+
## Learning Path
75+
76+
### For Beginners (Start Here!)
77+
1. Call Stack (01)
78+
2. Primitive Types (02)
79+
3. Value Types and Reference Types (03)
80+
4. Scope (06)
81+
5. Closures (21)
82+
83+
### For Intermediate Developers
84+
1. Prototype Inheritance (17)
85+
2. this, call, apply, bind (15)
86+
3. Promises (25)
87+
4. async/await (26)
88+
5. Design Patterns (31)
89+
90+
### For Advanced Developers
91+
1. Event Loop (09)
92+
2. JavaScript Engines (11)
93+
3. Big O Notation (28)
94+
4. Algorithms (29)
95+
5. Currying and Composition (32)
96+
97+
## Need More Help?
98+
99+
- 📖 **Detailed Documentation**: See [templates/README.md](./templates/README.md)
100+
- 📚 **Articles & Videos**: Check the main [README.md](./README.md) for curated resources
101+
- 🐛 **Issues**: [Open an issue](https://github.com/QTechDevelopment/33-js-concepts/issues) on GitHub
102+
- 💬 **Discussions**: Join the community discussions
103+
104+
## Tips for Success
105+
106+
1. **Practice Daily**: Spend 30 minutes each day on one concept
107+
2. **Type It Out**: Don't copy-paste, type the code yourself
108+
3. **Break Things**: Try to break the code to understand boundaries
109+
4. **Teach Others**: Explain concepts to solidify your understanding
110+
5. **Build Projects**: Apply concepts in real projects
111+
112+
## Quick Commands Reference
113+
114+
```bash
115+
# Run any template
116+
node templates/01-call-stack.js
117+
118+
# List all templates
119+
ls templates/*.js
120+
121+
# Run multiple templates
122+
for file in templates/0{1..5}*.js; do node "$file"; done
123+
124+
# Search for a specific concept
125+
grep -r "closures" templates/
126+
```
127+
128+
## What's Next?
129+
130+
After completing the templates:
131+
132+
1. ⭐ Star this repository if you find it helpful
133+
2. 🔄 Share it with other developers
134+
3. 🤝 Contribute improvements (see [CONTRIBUTING.md](./CONTRIBUTING.md))
135+
4. 🚀 Build something awesome with your new skills!
136+
137+
138+
**Happy Learning!** 🎉
139+
140+
Remember: The best way to learn is by doing. Don't just read the templates - code along, experiment, and most importantly, have fun!
3141
## 🚀 Get Started in 3 Steps
4142

5143
### Step 1: Clone the Repository
@@ -61,4 +199,4 @@ The interface is fully responsive and works on mobile devices too!
61199
- Visit the [main repository](https://github.com/leonardomso/33-js-concepts) for resources
62200
- Open an issue if you encounter any problems
63201

64-
Happy Learning! 🎉
202+
Happy Learning! 🎉 master

‎README.md‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@
1010
<div align="center">
1111
<p>
1212
<a href="#introduction">Introduction</a> •
13+
copilot/create-templates-for-concepts
14+
<a href="#templates">Templates</a> •
15+
<a href="./QUICKSTART.md">Quick Start</a> •
1316
<a href="#interactive-learning">Interactive Learning</a> •
17+
master
1418
<a href="#community">Community</a> •
1519
<a href="#table-of-contents">Table of Contents</a> •
1620
<a href="#license">License</a>
@@ -25,6 +29,25 @@
2529

2630
This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a requirement, but a guide for future studies. It is based on an article written by Stephen Curtis and you can read it [here](https://medium.com/@stephenthecurt/33-fundamentals-every-javascript-developer-should-know-13dd720a90d1).
2731

32+
copilot/create-templates-for-concepts
33+
## Templates
34+
35+
🎯 **NEW!** We now provide [hands-on templates](./templates) for each of the 33 concepts!
36+
37+
Each template includes:
38+
- ✅ Clear explanations and examples
39+
- ✅ Practice exercises to test your understanding
40+
- ✅ Common pitfalls to avoid
41+
- ✅ Best practices and tips
42+
43+
**[👉 Get Started with Templates](./templates/README.md)**
44+
45+
Perfect for:
46+
- Beginners learning JavaScript fundamentals
47+
- Developers wanting to practice specific concepts
48+
- Anyone preparing for technical interviews
49+
- Teachers looking for structured learning materials
50+
2851
## 🎮 Interactive Learning
2952

3053
**NEW!** Now you can learn and test JavaScript concepts interactively! We've added a plug-and-play GUI that lets you:
@@ -70,7 +93,8 @@ This repository was created with the intention of helping developers master thei
7093
### Keyboard Shortcuts
7194

7295
- `Ctrl/Cmd + Enter` - Run code
73-
- `Tab` - Insert 4 spaces in editor
96+
- `Tab` - Insert 4 spaces in editor
97+
master
7498

7599
## Community
76100

‎templates/01-call-stack.js‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
/**
2+
* ==========================================
3+
* CONCEPT 1: CALL STACK
4+
* ==========================================
5+
*
6+
* The call stack is a mechanism that the JavaScript interpreter uses to keep track
7+
* of function execution. It follows the Last In, First Out (LIFO) principle.
8+
*
9+
* Key Points:
10+
* - Functions are added to the stack when called
11+
* - Functions are removed from the stack when they return
12+
* - Stack overflow occurs when the stack size limit is exceeded
13+
*/
14+
15+
// ==========================================
16+
// EXAMPLE 1: Basic Call Stack
17+
// ==========================================
18+
19+
function firstFunction() {
20+
console.log('First function called');
21+
secondFunction();
22+
console.log('First function finished');
23+
}
24+
25+
function secondFunction() {
26+
console.log('Second function called');
27+
thirdFunction();
28+
console.log('Second function finished');
29+
}
30+
31+
function thirdFunction() {
32+
console.log('Third function called');
33+
}
34+
35+
// Uncomment to run:
36+
// firstFunction();
37+
38+
// Call Stack Order:
39+
// 1. firstFunction() is pushed
40+
// 2. secondFunction() is pushed
41+
// 3. thirdFunction() is pushed
42+
// 4. thirdFunction() is popped
43+
// 5. secondFunction() is popped
44+
// 6. firstFunction() is popped
45+
46+
// ==========================================
47+
// EXAMPLE 2: Stack Overflow
48+
// ==========================================
49+
50+
function recursiveFunction() {
51+
// This will cause a stack overflow error
52+
// recursiveFunction();
53+
}
54+
55+
// Uncomment to see stack overflow (don't run this):
56+
// recursiveFunction();
57+
58+
// ==========================================
59+
// PRACTICE EXERCISES
60+
// ==========================================
61+
62+
/**
63+
* Exercise 1: Trace the call stack
64+
* Determine the order of console.log outputs
65+
*/
66+
function exercise1() {
67+
console.log('1');
68+
exercise1Helper();
69+
console.log('4');
70+
}
71+
72+
function exercise1Helper() {
73+
console.log('2');
74+
console.log('3');
75+
}
76+
77+
// TODO: Before running, predict the output order
78+
// Uncomment to test:
79+
// exercise1();
80+
81+
/**
82+
* Exercise 2: Create a function that demonstrates call stack depth
83+
* Write a function that counts how deep the call stack can go before overflow
84+
*/
85+
function countStackDepth() {
86+
let depth = 0;
87+
88+
function recurse() {
89+
depth++;
90+
try {
91+
recurse();
92+
} catch (e) {
93+
console.log(`Stack depth reached: ${depth}`);
94+
}
95+
}
96+
97+
// TODO: Implement this safely
98+
// Hint: Use try-catch to prevent actual overflow
99+
}
100+
101+
/**
102+
* Exercise 3: Debug the call stack
103+
* The following function has a logical error. Use your understanding
104+
* of the call stack to identify and fix it.
105+
*/
106+
function calculate(num) {
107+
if (num <= 0) return 0;
108+
return num + calculate(num - 1);
109+
}
110+
111+
// TODO: Test this function and verify it works correctly
112+
// Uncomment to test:
113+
// console.log(calculate(5)); // Should return 15 (5+4+3+2+1)
114+
115+
// ==========================================
116+
// COMMON PITFALLS
117+
// ==========================================
118+
119+
/**
120+
* Pitfall 1: Infinite recursion
121+
* Always ensure recursive functions have a proper base case
122+
*/
123+
function badRecursion(n) {
124+
// Missing base case!
125+
// return badRecursion(n - 1);
126+
}
127+
128+
/**
129+
* Pitfall 2: Forgetting function execution context
130+
* Remember that each function call creates a new execution context
131+
*/
132+
function pitfall2Example() {
133+
let counter = 0;
134+
135+
function increment() {
136+
counter++;
137+
}
138+
139+
increment();
140+
increment();
141+
console.log(counter); // What will this output?
142+
}
143+
144+
// ==========================================
145+
// NOTES
146+
// ==========================================
147+
// - The call stack has a size limit (varies by browser/environment)
148+
// - Stack overflow errors occur when limit is exceeded
149+
// - Debugging tools show the current call stack
150+
// - Understanding the call stack helps debug complex code

0 commit comments

Comments
 (0)