-
Notifications
You must be signed in to change notification settings - Fork 674
/
Copy patharchitecture-and-paradigmes.js
255 lines (255 loc) · 12.2 KB
/
architecture-and-paradigmes.js
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
export const architectureCollection = {
name: "Architecture & paradigms",
areas: [
{
name: "Paradigms",
skills: [
{
name: "Programming Paradigms",
description: {
text: "Learn how programming languages can be categoried into different paradigms based on their features.",
links: [
["Wikipedia - Programming paradigm", "https://en.wikipedia.org/wiki/Programming_paradigm"],
["Introduction of Programming Paradigms", "https://www.geeksforgeeks.org/introduction-of-programming-paradigms/"],
["What Are JavaScript Programming Paradigms?", "https://medium.com/javascript-in-plain-english/what-are-javascript-programming-paradigms-3ef0f576dfdb"],
]
},
},
{
name: "Object Oriented Programming",
description: {
text: "Learn about object oriented programming and how objects can make your code easier to read and debug.",
links: [
["MDN - Object-oriented JavaScript", "https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS"],
["Freecodecamp - An introduction to Object-Oriented Programming", "https://www.freecodecamp.org/news/an-introduction-to-object-oriented-programming-in-javascript-8900124e316a/"],
["Introduction to Object Oriented Programming in JavaScript", "https://www.geeksforgeeks.org/introduction-object-oriented-programming-javascript/"],
]
},
skills: [
{
name: "S.O.L.I.D",
description: {
text: "Learn about the SOLID design pricinples that can make your code more understandable, flexible and maintainable.",
links: [
["Wikipedia - SOLID", "https://en.wikipedia.org/wiki/SOLID"],
["S.O.L.I.D: The First 5 Principles of Object Oriented Design", "https://scotch.io/bar-talk/s-o-l-i-d-the-first-five-principles-of-object-oriented-design"],
["S.O.L.I.D The first 5 principles of Object Oriented Design with JavaScript", "https://medium.com/@cramirez92/s-o-l-i-d-the-first-5-priciples-of-object-oriented-design-with-javascript-790f6ac9b9fa"],
]
},
}
]
},
{
name: "Functional programming",
description: {
text: "Learn about functional programming and how it can make your code easier to read and debug.",
links: [
["An introduction to functional programming in JavaScript", "https://opensource.com/article/17/6/functional-javascript"],
["Functional Programming in JavaScript", "https://codeburst.io/functional-programming-in-javascript-e57e7e28c0e5"],
["The power of functional programming in Javascript", "https://itnext.io/the-power-of-functional-programming-in-javascript-cc9797a42b60"],
["An introduction to Functional Programming", "https://flaviocopes.com/javascript-functional-programming/"],
["dev.to - Basic Functional Programming Patterns in JavaScript", "https://dev.to/nestedsoftware/basic-functional-programming-patterns-in-javascript-49p2"],
["Functional-ish JavaScript", "https://medium.com/@bluepnume/functional-ish-javascript-205c05d0ed08"],
]
},
skills: [
{
name: "Recursion",
description: {
text: "Learn about recursion and when it can be used to make your code more readable.",
links: [
["Learn and Understand Recursion in JavaScript", "https://codeburst.io/learn-and-understand-recursion-in-javascript-b588218e87ea"],
["Understanding Recursion in JavaScript", "https://medium.com/@zfrisch/understanding-recursion-in-javascript-992e96449e03"],
["Freecodecamp - Recursion in JavaScript", "https://www.freecodecamp.org/news/recursion-in-javascript-1608032c7a1f/"],
["javascript.info - Recursion and stack", "https://javascript.info/recursion"],
]
},
},
{
name: "Higher-Order Functions",
description: {
text: "Learn about higher-order functions and how they can be used to make your code more readable.",
links: [
["Higher-Order Functions", "https://www.sitepoint.com/higher-order-functions-javascript/"],
["Freecodecamp - A quick intro to Higher-Order Functions", "https://www.freecodecamp.org/news/a-quick-intro-to-higher-order-functions-in-javascript-1a014f89c6b/"],
["Wikipedia - Higher-Order function", "https://en.wikipedia.org/wiki/Higher-order_function"],
["Understanding Higher-Order Functions in JavaScript", "https://blog.bitsrc.io/understanding-higher-order-functions-in-javascript-75461803bad"],
]
},
},
{
name: "Currying",
description: {
text: "Learn about currying and when it can be used to make your code more readable.",
links: [
["dev.to - All you need to know about currying", "https://dev.to/bettercodingacademy/functional-programming-all-you-need-to-know-about-currying-5k7"],
["JavaScript: Currying and Partial Application", "https://gideonpyzer.dev/blog/2017/01/14/javascript-currying-and-partial-application/"],
["Curry and Function Composition", "https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983"],
["Wikipedia - Currying", "https://en.wikipedia.org/wiki/Currying"],
]
},
},
{
name: "Monads",
description: {
text: "Learn about monads and when it can be used to make your code more readable.",
links: [
["Youtube - Monad, FunFunFunction", "https://www.youtube.com/watch?v=9QveBbn7t_c"],
["Youtube - Functors, FunFunFunction ", "https://www.youtube.com/watch?v=YLIH8TKbAh4"],
["Functional JavaScript - Functors, Monads, and Promises", "https://dev.to/joelnet/functional-javascript---functors-monads-and-promises-1pol"],
["Wikipedia - Monad", "https://en.wikipedia.org/wiki/Monad_(functional_programming)"],
["JavaScript Monads Made Simple", "https://medium.com/javascript-scene/javascript-monads-made-simple-7856be57bfe8"],
["Implementing JavaScript Functors and Monads", "https://medium.com/front-end-weekly/implementing-javascript-functors-and-monads-a87b6a4b4d9a"],
["MDN - Array.prototype.flatMap()", "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap"],
]
},
}
]
},
]
},
{
name: "Architecture",
skills: [
{
name: "Design Patterns",
description: {
text: "Learn how commonly occurring problems can be solved using design patterns.",
links: [
["Wikipedia - Software design pattern", "https://en.wikipedia.org/wiki/Software_design_pattern"],
["The 7 Most Important Software Design Patterns", "https://medium.com/educative/the-7-most-important-software-design-patterns-d60e546afb0e"],
["Software Design Patterns", "https://www.geeksforgeeks.org/software-design-patterns/"],
["Design Patterns", "https://refactoring.guru/design-patterns"],
["JavaScript Design Patterns", "https://www.dofactory.com/javascript/design-patterns"],
["Design Patterns in TypeScript", "https://github.com/torokmark/design_patterns_in_typescript"],
]
},
skills: [
{
name: "Singleton",
description: {
text: "Learn about the singleton design pattern and when it should be used.",
links: [
["Singleton Pattern", "https://refactoring.guru/design-patterns/singleton"],
["Singleton Example", "https://www.dofactory.com/javascript/singleton-design-pattern"],
["Wikipedia - Singleton Pattern", "https://en.wikipedia.org/wiki/Singleton_pattern"],
]
},
},
{
name: "Observer",
description: {
text: "Learn about the observer design pattern and when it should be used.",
links: [
["Observer Pattern", "https://refactoring.guru/design-patterns/observer"],
["Observer Example", "https://www.dofactory.com/javascript/observer-design-pattern"],
["Wikipedia - Observer Pattern", "https://en.wikipedia.org/wiki/Observer_pattern"],
]
},
},
{
name: "Prototype",
description: {
text: "Learn about the prototype design pattern and when it should be used.",
links: [
["Prototype Pattern", "https://refactoring.guru/design-patterns/prototype"],
["Prototype Example", "https://www.dofactory.com/javascript/prototype-design-pattern"],
["Wikipedia - Prototype pattern", "https://en.wikipedia.org/wiki/Prototype_pattern"],
]
},
},
{
name: "Bridge",
description: {
text: "Learn about the bridge design pattern and when it should be used.",
links: [
["Bridge Pattern", "https://refactoring.guru/design-patterns/bridge"],
["Bridge Example", "https://www.dofactory.com/javascript/bridge-design-pattern"],
["Wikipedia - Bridge pattern", "https://en.wikipedia.org/wiki/Bridge_pattern"],
]
},
},
{
name: "Proxy",
description: {
text: "Learn about the proxy design pattern and when it should be used.",
links: [
["Proxy Pattern", "https://refactoring.guru/design-patterns/proxy"],
["Proxy Example", "https://www.dofactory.com/javascript/proxy-design-pattern"],
["Wikipedia - Proxy pattern", "https://en.wikipedia.org/wiki/Proxy_pattern"],
]
},
},
{
name: "Chain of responsibility",
description: {
text: "Learn about the chain of responsibility design pattern and when it should be used.",
links: [
["Chain of Responsibility Pattern", "https://refactoring.guru/design-patterns/chain-of-responsibility"],
["Chain of Responsibility Example", "https://www.dofactory.com/javascript/chain-of-responsibility-design-pattern"],
["Wikipedia - Chain of responsibility", "https://en.wikipedia.org/wiki/Chain-of-responsibility_pattern"],
]
},
},
{
name: "Constructor",
description: {
text: "Learn about the constructor design pattern and when it should be used.",
links: [
["The Constructor Pattern", "https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s01.html"],
["Fundamental Object Design Patterns in JavaScript", "https://medium.com/@severinperez/javascript-weekly-fundamental-object-design-patterns-31453f68427f"],
["Difference between Constructor pattern and Prototype pattern", "https://stackoverflow.com/questions/35057827/difference-between-constructor-pattern-and-prototype-pattern"],
]
},
}
]
},
{
name: "CSS Methodologies",
description: {
text: "Learn how CSS can be structured using CSS methodologies.",
links: [
["A Look at Some CSS Methodologies", "https://www.webfx.com/blog/web-design/css-methodologies/"],
["A web designer's guide to CSS methodologies", "https://www.creativebloq.com/features/a-web-designers-guide-to-css-methodologies"],
["Understanding CSS Writing Methodologies", "https://www.hongkiat.com/blog/css-writing-methodologies/"],
]
},
skills: [
{
name: "BEM",
description: {
text: "Learn about the BEM methodology and when it should be used.",
links: [
["Get BEM", "http://getbem.com/"],
["CSS Tricks - BEM 101", "https://css-tricks.com/bem-101/"],
["What is BEM? And Why you should use it in your project.", "https://medium.com/@dannyhuang_75970/what-is-bem-and-why-you-should-use-it-in-your-project-ab37c6d10b79"],
]
},
},
{
name: "SMACSS",
description: {
text: "Learn about the SMACSS methodology and when it should be used.",
links: [
["SMACSS", "http://smacss.com/"],
["BEM vs SMACSS", "https://www.sitepoint.com/bem-smacss-advice-from-developers/"],
]
},
},
{
name: "OOCSS",
description: {
text: "Learn about the OOCSS methodology and when it should be used.",
links: [
["OOCSS", "https://github.com/stubbornella/oocss/wiki"],
["An Introduction To Object Oriented CSS", "https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/"],
["The Future of Writing CSS", "https://www.keycdn.com/blog/oocss"],
]
},
}
]
}
]
}
]
}