-
Notifications
You must be signed in to change notification settings - Fork 0
/
resources.html
492 lines (478 loc) · 40.4 KB
/
resources.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
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
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
<meta name="keywords" content="CSEC, CSEC-W, CSEC-A, CSEC-S, Computer Science Enrichment Club, UTSC, ~csec, cs, algorithms, development, club, UTSC CS, seminars, past seminars">
<title>CSEC | Resources</title>
<meta name="description" content="Welcome to CSEC. The Computer Science Enrichment Club is a student-run group that focuses on helping students with a passion for Computer Science take the next steps in their career.">
<meta name="author" content="Computer Science Enrichment Club Web Division">
<meta name="theme-color" content="#1d2731">
<meta name="author" content="Computer Science Enrichment Club Web Division">
<!--- Open Graph -->
<meta property="og:image" content="images/csec-banner.png" />
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Font-Awesome -->
<script src="https://use.fontawesome.com/372127648b.js"></script>
<link href="//cdn.rawgit.com/Lukas-W/font-linux/v0.9/assets/font-linux.css" rel="stylesheet">
<!-- Import Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
<!-- Custom Stylesheet and js -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/scripts.js"></script>
</head>
<body>
<div class="container-fluid nav-nopadding">
<nav class="navbar navbar-toggleable-md navbar-inverse" id="navbar">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target=#navbar-items> <span class="navbar-toggler-icon"></span> </button>
<a class="navbar-brand" href="index"><img src="images/square_icon.png" width="30" height="30" class="d-inline-block align-top" alt=""></a>
<div class="collapse navbar-collapse" id="navbar-items">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="/#about">About</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" style="cursor: pointer;">Divisions</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="a/">Algorithms</a>
<a class="dropdown-item" href="https://www.facebook.com/UTSC-Game-Development-Club-2122684914729074/?notif_id=1553278918733242¬if_t=page_admin">Game Dev Guild</a>
<!-- <a class="dropdown-item" href="https://security.csec.club">CSEC-S</a>
<a class="dropdown-item" href="https://web.csec.club">CSEC-W</a> -->
</div>
</li>
<li class="nav-item"> <a class="nav-link" href="team">Team</a> </li>
<li class="nav-item"> <a class="nav-link" href="events">Events</a> </li>
<li class="nav-item"> <a class="nav-link" href="/#contact">Contact</a> </li>
<li class="nav-item">
<a class="nav-link" href="#">Resources</a>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" data-toggle="dropdown" style="cursor: pointer;">More</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="seminars">Past Seminars</a>
<a class="dropdown-item" target="_blank" href="documents/CSEC_Constitution_17-18.pdf">Constitution</a>
<a class="dropdown-item" target="_blank" href="documents/CSEC-Executive-Position-Application-Form.pdf">Application Form</a>
<a class="dropdown-item" href="archive">Archive</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div id="past-seminars">
<br>
<div class="container">
<h1 class="page-header">Resources</h1>
<hr>
<p style="text-align: center">A currated list of resources to cater to all skill levels. Whether you're in Computer Science, Math, Stats or any other major, we got something for everyone! Below we have a list of our resources, suggested resources and a FAQ for projects. Items marked with a Star <strong>(*)</strong> are especially recommended.</p>
<div class="card-deck">
<div class="card">
<h3 class="card-title">Past Seminars</h3>
<div class="card-footer"><a href="seminars" class="btn btn-card btn-primary btn-block" target="_blank">View the slides</a> </div>
</div>
<div class="card">
<h3 class="card-title">Algorithm Division</h3>
<div class="card-footer"><a href="a/" class="btn btn-card btn-primary btn-block" target="_blank">View the slides</a> </div>
</div>
</div>
<hr>
<div id="resources">
<div class="container resource-container">
<div class="row">
<div class="col-md-4">
<h4>Beginner Guides</h4>
<ul>
<li><a target="_blank" href="http://interactivepython.org/courselib/static/thinkcspy/index.html">How to Think Like a Computer Scientist</a></li>
<li><a target="_blank" href="https://www.w3schools.com/">W3Schools</a> (Introductory Web)</li>
<li><a target="_blank" href="http://try.github.io/">Git *</a> (Version Control)</li>
<li><a target="_blank" href="documents/csec-w-hosting.pdf">Hosting a website for free</a> (CSEC Guide)</li>
</ul>
<h4>Advanced Guides</h4>
<ul>
<li><a target="_blank" href="https://www.tutorialspoint.com/">Tutorialspoint</a></li>
<li><a target="_blank" href="https://www.youtube.com/results?search_query=the+net+ninja">Web Applications - Youtube Tutorials (The Net Ninja)</a></li>
<li><a target="_blank" href="https://www.lynda.com/signin/organization">Lynda.com Courses (Login with UofT email)</a></li>
<li><strong>Read the Project FAQ for more!</strong></li>
</ul>
<h4>Online Communities</h4>
<ul>
<li><a target="_blank" href="https://reddit.com/r/csmajors">r/CSMajors</a> - Everything undergrad CS</li>
<li><a target="_blank" href="https://reddit.com/r/cscareerquestions">r/CSCQ</a> - CS Career Questions</li>
<li><a target="_blank" href="https://discord.gg/4tWwRM4">UTSC CS Discord *</a> - CS and more!</li>
</ul>
<h4>Recommended Readings</h4>
<ul>
<li><a target="_blank" href="https://landing.google.com/sre/sre-book/toc/index.html">Site Reliability Engineering</a> - Google</li>
<li><a target="_blank" href="https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882">Clean Code</a></li>
</ul>
</div>
<div class="col-md-4">
<h4>CS Resources</h4>
<ul>
<li><a target="_blank" href="https://www.geeksforgeeks.org/">GeeksForGeeks</a> (Algorithms Reference)</li>
<li><a target="_blank" href="https://github.com/jwasham/coding-interview-university">CS Self Study Guide</a></li>
</ul>
<h4>Interview Prep</h4>
<ul>
<li>Algorithmic Coding Practice</li>
<ul>
<li><a target="_blank" href="https://leetcode.com/">LeetCode</a></li>
<li><a target="_blank" href="https://hackerrank.com/">HackerRank</a></li>
<li><a target="_blank" href="https://www.amazon.ca/Cracking-Coding-Interview-Programming-Questions/dp/0984782850/">Cracking the Coding Interview *</a></li>
</ul>
</ul>
<h4>Jobs and Internships</h4>
<ul>
<li>Opportunity Boards</li>
<ul>
<li><a target="_blank" href="https://intern.supply">Intern.Supply</a> (Major US Companies)</li>
<li><a target="_blank" href="https://angel.co/job-collections/startup-internships">Angellist</a> (Startups)</li>
<li><a target="_blank" href="https://cln.utoronto.ca/home.htm">CLN</a> (UofT Job Board)</li>
</ul>
<li>Guides and Advice</li>
<ul>
<li><a target="_blank" href="https://medium.freecodecamp.org/how-to-write-a-great-resume-for-software-engineers-75d514dd8322">General CS Resume Advice *</a></li>
<li><a target="_blank" href="https://stephenholiday.com/Unofficial-Waterloo-USA-Intern-Guide/">Internship in the USA Guide</a></li>
<li><a target="_blank" href="https://haseebq.com/my-ten-rules-for-negotiating-a-job-offer/">Negotating Job Offers</a></li>
</ul>
</ul>
</div>
<div class="col-md-4">
<h4>Programming Tools</h4>
<ul>
<li><a target="_blank" href="https://wingware.com/downloads/wing-personal">Wing</a> (Python IDE)</li>
<li><a target="_blank" href="https://www.jetbrains.com/student/">IntelliJ</a> (Java IDE, Part of JetBrains Pack)</li>
<li><a target="_blank" href="https://kapeli.com/dash">Dash</a> (Offline Docs Lookup) </li>
<li>Text Editors</li>
<ul>
<li><a target="_blank" href="https://code.visualstudio.com/">Visual Studio Code *</a></li>
<li><a target="_blank" href="https://www.sublimetext.com/">Sublime Text</a> </li>
<li><a target="_blank" href="http://www.vim.org/">VIM</a> / <a target="_blank" href="https://www.gnu.org/software/emacs/">Emacs</a></li>
</ul>
<li><strong>Read the Project FAQ for more!</strong></li>
</ul>
<h4>Free Stuff for Students!</h4>
<ul>
<li><a target="_blank" href="https://education.github.com/pack">GitHub Student Pack *</a></li>
<li><a target="_blank" href="https://www.jetbrains.com/student/">JetBrains IDE Pack</a></li>
<li><a target="_blank" href="https://nc.me/">NameCheap Domains</a> </li>
<li><a target="_blank" href="https://www.lynda.com/signin/organization">Lynda.com Courses</a></li>
<li><a target="_blank" href="https://azure.microsoft.com/en-ca/free/students/">Microsoft Azure</a> ($100 Credit)</li>
<li><a target="_blank" href="https://try.DigitalOcean.com">Digitial Ocean</a> ($100 Credit)</li>
<li><a target="_blank" href="https://aws.amazon.com/education/awseducate/">AWS Educate</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="FAQ">
<div class="container clearfix">
<div class="row">
<div class="col-md-12">
<h4>General FAQ</h4>
<p>More coming soon!</p>
<div class="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
I'm a beginner, where do I start?
</button>
</h5>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
You can start by looking reading the guides under Beginner Guides. This section will show you the fundamentals of programming (You dont need to read it all to program), an introduction to web programming, keeping tracked copies of your files and how to host your website for free as a student. Using Google to find solutions or get a better understanding of a concept will help you greatly. Once you understand the fundamentals, it'll be easier to hop to other topics in the list! It is ok not to remember every aspect of a language but if you want to get better, practice makes perfect! Also, if you're a non cs major and want to dive into more advanced computer science, check out this guide: <li><a target="_blank" href="https://github.com/jwasham/coding-interview-university">Guide to become a Software Engineer / Computer Science Study Guide.</a></li>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
How do I build and host my own personal website on the internet?
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<p>You can start by learning HTML and CSS from a tutorial site called <a target="_blank" href="https://www.w3schools.com/">W3Schools</a> or from our past web developement seminar which you can find with the past seminars button up top. HTML and CSS will allow you to build a webpage. One you get a good understanding of both languages. You can explore CSS frameworks such as Bootstrap, Foundation and MaterializeCSS to easily make responsive webpages (Webpages that automatically scale to the device a user is making). Not only that, you can use JavaScript or JQuery to make some amazing features on your website.</p>
<p>To put your site on the web, check out this guide <a target="_blank" href="documents/csec-w-hosting.pdf">Hosting a website for free</a> or <a target="_blank" href="https://sites.utoronto.ca/ns/utorweb/request.html">request a webspace from UofT</a>. <a target="_blank" href="https://brackets.io">Brackets</a> is a great text editor for building personal websites since it auto generates your code to a webpage in real time!</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Which tool should I use to program? An IDE or a text editor?
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
"An integrated development environment (IDE) is a software application that provides comprehensive facilities to computer programmers for software development. An IDE normally consists of a source code editor, build automation tools, and a debugger. Most modern IDEs have intelligent code completion." (Wikipedia) These applications are usually built for a specific language or task and great for beginners to use since you can edit, debug and run your code in the same place. However, if you're more experienced, it's best to use IDE's only for situations where you need it or specific tasks that need to be done. Examples include: IntelliJ/Android Studio for Java or Android, XCode for iOS development. Text Editors such as VSCode or Sublime give you the flexibility to download the packages and the tools you need for any language. These text editors usually have an integrated terminal you can use to run your programs.
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<br>
<h4>Project FAQ</h4>
<p>More coming soon!</p>
<div class="accordion">
<div class="card">
<div class="card-header" id="fheadingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#fcollapseOne" aria-expanded="true" aria-controls="fcollapseOne">
I want to start a project. How do I start?
</button>
</h5>
</div>
<div id="fcollapseOne" class="collapse" aria-labelledby="fheadingOne" data-parent="#accordion">
<div class="card-body">
The problem always comes first. It is important to think of an idea you like and are willing to commit to because you will be more motivated towards completing it the way you intended it to be. Next, you will have to decide the tool you will use inorder to solve that problem. Should it be a website, web app, mobile application or desktop application? Choose the best one you believe is suited for this problem and go with it. If your application has a frontend, we recommend you design it beforehand to have an easier implmentation in the future. You can use a program such as <a target="_blank" href="https://www.adobe.com/ca/products/xd.html">Adobe XD</a> to design your UI/UX.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="fheadingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#fcollapseTwo" aria-expanded="false" aria-controls="fcollapseTwo">
I want to start a mobile application project. Where do I start?
</button>
</h5>
</div>
<div id="fcollapseTwo" class="collapse" aria-labelledby="fheadingTwo" data-parent="#accordion">
<div class="card-body">
<h5>Popular Platforms (Developer - Language)</h5>
<div class="row">
<div class="col-md-6">
Traditional
<ul>
<li><a target="_blank" href="https://developer.android.com/">Android</a> (Google - XML + Java/Kotlin)</li>
<li><a target="_blank" href="https://developer.apple.com/">iOS</a> (Apple - C#/Swift)</li>
</ul>
</div>
<div class="col-md-6">
Cross Platform (Both Android/iOS)
<ul>
<li><a target="_blank" href="https://facebook.github.io/react-native/">React Native</a> (Facebook - JavaScript)</li>
<li><a target="_blank" href="https://flutter.io/"> Flutter</a> (Google - Dart)</li>
<li><a target="_blank" href="https://visualstudio.microsoft.com/xamarin/">Xamarin</a> (Microsoft - C#)</li>
</ul>
</div>
</div>
<hr>
Before you begin your project, consider the following:
<ul style="list-style-type:decimal">
<li>Do I need to interact with hardware?</li>
<li>Do I need my app to have consistant native performance on either platform?</li>
<li>Do I need my app to have a small file size?</li>
<li>Do I need to build an app fast?</li>
<li>Does my app need to run on both platforms?</li>
<li>Does my app mostly use web technologies?</li>
<li>Am I ok with "fast as native" performance?</li>
</ul>
<p><strong>If you answered yes to 1-3, go with Traditional</strong>. When developing with native Android and iOS languages, you get much better consistant performance, more tools to work with and more control over how your application works. The problem is there is more work involved in building your application and you have to build a whole new application if you want to have it on both platforms. The differences between Android and iOS are distinct and you can read more about them in the links above. Mostly likely you will be using an IDE: Android Studio or IntelliJ for Android and XCode is a must for iOS</p>
<p><strong>If you answered yes to 4-7, go with a Cross Platform solution</strong>. When developing with a Cross Platform solution, you will build your application faster, have one app that will share code, work both on iOS and Android, and have native-like performance! The problem is that these solutions might run into issues from questions 1-3. However, you can look into these platforms and see if their features are supported for the application you're building. Example: Flutter and React Native allows you to mix with platform code (i.e standard code from Android or iOS) so you can add practically any new feature with a bit of work. These solutions are stable enough to use in production however there are some quirks you might have to look into for your project.
<br>
<strong>React Native</strong> is great if you already have experience building web applications in React and it's currently the most popular solution. <strong>Flutter</strong> is great since it is similar with Android or traditional app development. It recently became a new competitor in this space with Flutter 1.0 releasing anot too long ago. <strong>Xamarin</strong> would be good for you if you have experience with C# or .Net applications. You can use practically any text editor to build you application. Check out this article on how one developer had a 85% reduction in code with a cross platform solution: <a target="_blank" href="https://proandroiddev.com/why-flutter-will-change-mobile-development-for-the-best-c249f71fa63c">Why Flutter will change mobile development for the best</a>.
</p>
<b>Note:</b> If you're trying to build an iOS application, you will need a Mac. <b>Exception:</b> React Native with <a target="_blank" href="https://expo.io/"> Expo</a> will allow you to run your React app on your Android or iOS without connecting it your computer.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="fheadingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#fcollapseThree" aria-expanded="false" aria-controls="fcollapseThree">
I want to start a web application project. Where do I start?
</button>
</h5>
</div>
<div id="fcollapseThree" class="collapse" aria-labelledby="fheadingThree" data-parent="#accordion">
<div class="card-body">
<h5>Popular Choices</h5>
<div class="row">
<div class="col-md-4">
Front-end
<ul>
<li>HTML/CSS</li>
<li>Templating Engines</li>
<ul>
<li><a target="_blank" href="https://pugjs.org/api/getting-started.html">Pug.JS</a></li>
<li><a target="_blank" href="https://ejs.co/">ejs</a></li>
<li><a target="_blank" href="https://handlebarsjs.com/">handlebars</a></li>
</ul>
<li>JavaScript Frameworks/Libraries</li>
<ul>
<li><a target="_blank" href="https://reactjs.org/">React</a> (Facebook - JavaScript)</li>
<li><a target="_blank" href="https://angular.io/">Angular</a> (Google - TypeScript)</li>
<li><a target="_blank" href="https://vuejs.org/">Vue</a> (JavaScript)</li>
</ul>
</ul>
</div>
<div class="col-md-4">
Back-end / Server Language / Environments
<ul>
<li><a target="_blank" href="https://nodejs.org/en/">Node.js</a> or <a target="_blank" href="https://expressjs.com/">Express.js</a> (JavaScript)</li>
<li><a target="_blank" href="https://www.w3schools.com/php7/">MAMP with PHP 7</a></li>
<li><a target="_blank" href="https://rubyonrails.org/">Rails</a> (Ruby)</li>
<li><a target="_blank" href="http://flask.pocoo.org/">Flask</a> (Python)</li>
<li><a target="_blank" href="https://www.djangoproject.com/">Django</a> (Python)</li>
</ul>
</div>
<div class="col-md-4">
Database
<ul>
<li>SQL</li>
<ul>
<li><a target="_blank" href="https://www.postgresql.org/">PostgreSQL</a></li>
<li><a target="_blank" href="https://www.mysql.com/"> MySQL</a></li>
</ul>
<li>NoSQL</li>
<ul>
<li><a target="_blank" href="https://www.mongodb.com/">MongoDB</a></li>
<li><a target="_blank" href="https://aws.amazon.com/dynamodb/"> DynamoDB (Amazon)</a></li>
<li><a target="_blank" href="https://redis.io/"> Redis</a></li>
</ul>
</ul>
</div>
</div>
You can also check <a target="_blank" href="https://insights.stackoverflow.com/survey/2018/">StackOverFlow's Developer Survey</a> for other popular choices as well.
<hr>
<h5>Before you begin your project, consider the following:</h5>
<ul style="list-style-type:decimal">
<li>Does my front-end need to be complex?</li>
<li>How much data am I storing?</li>
<li>What type of server am I running this on?</li>
<li>Which server service should I use?</li>
</ul>
<h5>An Introduction To Web Applications</h5>
<p> Web applications typically have two components: Frontend and Backend. Frontend is usually described as being everything a user can see and the Backend as everything else. When you have a web application with both, it is known as a fullstack application. The frontend interacts with the user while the backend processes or stores that data. You can read more about the differences here: <a target="_blank" href="https://www.pluralsight.com/blog/film-games/whats-difference-front-end-back-end">What's the Difference Between the Front-End and Back-End?</a>. <br>
Also, these web applications are usually deployed to the internet and hosted on a server or an environment such as NGINX but we will get more to that later on.
</p>
<hr>
<h5>Choice of Front-end</h5>
<p> If you just need a simple frontend with buttons or forms then <strong>HTML/CSS</strong> will be enough for your use. However, if you're making a lot of pages, this can be very tedious. To reduce the workload, you can use a templating engine such as the ones listed above.
<br>
<strong>Templating Engines</strong> allow you to reuse code, allow you to create templates where you can customize inputs and automatically generate custom webpages. You can read more about them by clicking the links:
<li><a target="_blank" href="https://pugjs.org/api/getting-started.html">Pug.JS</a></li>
<li><a target="_blank" href="https://ejs.co/">ejs</a></li>
<li><a target="_blank" href="https://handlebarsjs.com/">handlebars</a></li>
<br>
<strong>JavaScript Frameworks/Libraries</strong> are powerful tools that will allow you to take your UI to the next level, save time, reuse code and more! You can read more on when to use them and the differences between them with the following articles:
<li><a target="_blank" href="https://skillcrush.com/2018/07/23/what-is-a-javascript-framework/">What Is a JavaScript Framework? Here’s Everything You Need to Know</a></li>
<li><a target="_blank" href="https://blog.hellojs.org/javascript-frameworks-why-and-when-to-use-them-43af33d0608d">JavaScript Frameworks, why and when to use them</a></li>
<li><a target="_blank" href="https://medium.com/dailyjs/the-deepest-reason-why-modern-javascript-frameworks-exist-933b86ebc445"> The deepest reason why modern JavaScript frameworks exist</a></li>
<li><a target="_blank" href="https://rubygarage.org/blog/best-javascript-frameworks-for-front-end">The Best JS Frameworks for Front End (Comparison Article)</a></li>
<br>
Also, these popular frameworks/libraries usually have an "awesome" list associated with them containing a load of information.
<li><a target="_blank" href="https://github.com/enaqx/awesome-react">Awesome React</a></li>
<li><a target="_blank" href="https://github.com/gdi2290/awesome-angular">Awesome Angular</a></li>
<li><a target="_blank" href="https://github.com/vuejs/awesome-vue"> Awesome Vue</a></li>
React is generally more chaotic to learn since there is no right way to use React. Facebook left this library as unopinionated and it's up to the developer (You) to decide it's design. There are thousands of packages and ways you can use React. Everyone has a different style of using it so don't be discouraged. Angular and Vue on the otherhand are opinionated frameworks/libraries since their creators wanted the platforms to be done in a universal fashion. For these technologies, you can read the official guides to lead you in the right direction.
</p>
<hr>
<h5>Choice of Back-end</h5>
<p> As of 2018, some of the backend technologies are comparable in performance. However, there are differences depending on the application you're building. Choose the best one that is best suited for your project, a new platform you would like to learn or the one you feel comfortable with. An example would be using React with Node.js so you would be using the same language for the frontend and backend. Node.js is currently the most popular backend web technology due to it using JavaScript and having a lot of community support for it's packages. <br>
Node.js has been the king of speed for the last few years but PHP 7 is a new challenger. It's an interesting topic that you can read these articles to learn more:
<li><a target="_blank" href="https://belitsoft.com/php-development-services/php7-vs-nodejs">PHP 7 vs. Node.js</a></li>
<li><a target="_blank" href="https://thinkmobiles.com/blog/php-vs-nodejs/">PHP vs Node.js 2018</a></li>
</p>
<hr>
<h5>Choice of Database</h5>
<p>The main thing that determines the database for your application is whether you need a SQL or a NoSQL database. <b>SQL databases</b> are relational where there are recognizable relationships between stored data in a table of information. SQL provides data consistency, allow complex queries and safe structured data.<br>
<b>NoSQL databases</b> are non-relational where unstructured data is stored in collections. These collections can be key-valued pairs, graphs and much more! NoSQL is easily scalabile for large data sets, and allows flexibility to change your collection structures as you build your application easily without an existing predefined structure. <br>
Check out the following links for more info on the use cases, the benefits and con's of each type:
<li><a target="_blank" href="https://searchdatamanagement.techtarget.com/definition/relational-database">What is a relational database?</a></li>
<li><a target="_blank" href="https://www.geeksforgeeks.org/difference-between-sql-and-nosql/">Difference between SQL and NoSQL</a></li>
<li><a target="_blank" href="https://www.thegeekstuff.com/2014/01/sql-vs-nosql-db/?utm_source=tuicool">SQL vs NoSQL Database Differences Explained with few Example DB</a></li>
</p>
<hr>
<h5>Ok great. How do go about learning these?</h5>
<p> Pick a Back-end / Server Language / Environment technology. For example Node.js with JavaScript, <a target="_blank" href="https://www.mamp.info/en/">MAMP</a> with PHP and Django with Python. Then pick a database you would like to pair it. Then the frontend depending on your needs.
</p>
For this guide, I will focusing on a learning path for building a fullstack application with <b>Node.js/Express.js, MongoDB and React</b>. Steps 1-3 are backend.
<ul style="list-style-type:decimal">
<li>You will need to understand what a <b>RESTful API</b> is.</li>
<ul>
<li><a target="_blank" href="https://www.sitepoint.com/developers-rest-api/">Do you know what a REST API is?</a></li>
<li><a target="_blank" href="https://www.youtube.com/watch?v=BRdcRFvuqsE">REST API Tutorial - What is a REST API? (Youtube)</a></li>
</ul>
<li><b>Learn Node.js and Express.js with ES6+ JavaScript</b>. Express will quickly set up a new node application for you. ES6 (2016), ES7 (2017) and ES8 (2018) are new standards of JavaScript and usually are referred as ES6+ since ES6 is the first modern revamp of the language. There are new features and syntax in ES6+ compared to the conventional frontend JavaScript that you might've seen before. Topics such as async, and promises might throw you off in the beginning but you will get used to it as you explore more.</li>
<ul>
<li><a target="_blank" href="https://www.youtube.com/watch?v=U8XF6AFGqlc">Node.js Tutorial For Absolute Beginners (Youtube)</a></li>
<li><a target="_blank" href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp">Node JS Tutorial for Beginners (Youtube)</a> <strong>Highly recommended </strong>This is a video series which guides you through the basic fullstack. NodeJS, Express and MongoDB. However do not ignore the upcoming topics as they're important as well.</li>
<li><a target="_blank" href="https://scrimba.com/g/gintrotoes6">Introduction to ES6+ (Video Version)</a></li>
<li><a target="_blank" href="https://medium.freecodecamp.org/want-to-learn-es6-take-this-free-23-part-course-and-become-a-javascript-ninja-55002db1ff74">Introduction to ES6+ (Text Version)</a></li>
<li><a target="_blank" href="https://github.com/getify/You-Dont-Know-JS">You Don't Know JS (Github book series)</a> This book is very long but you can read it if you're interested</li>
</ul>
<li><b>Learn about the Mongoose package for Node.js, asynchronous programming and ES6+ Promises</b>. This video does a great job at explaining it: <a target="_blank" href="https://www.youtube.com/watch?v=WDrU305J1yw">MongoDB and Mongoose | Creating a REST API with Node.js (Youtube)</a> The following articles are for async and promises. There are also articles on how to avoid <b>"chaining hell"</b> which you might encounter the first time you're using promises. Chaining Hell can lead to major problems in the future and it's best to avoid it while you can.</li>
<ul>
<li><a target="_blank" href="https://www.datchley.name/asynchronous-in-the-browser/">Asynchronous Programming</a></li>
<li><a target="_blank" href="https://www.datchley.name/es6-promises/">ES6 Promises</a></li>
<li><a target="_blank" href="https://codeburst.io/a-simple-guide-to-es6-promises-d71bacd2e13a">A Simple Guide to ES6 Promises (Modern Version)</a></li>
<li><a target="_blank" href="https://hackernoon.com/javascript-promises-best-practices-anti-patterns-b32309f65551">Javascript Promises Best Practices & Anti Patterns</a></li>
<li><a target="_blank" href="https://hackernoon.com/6-reasons-why-javascripts-async-await-blows-promises-away-tutorial-c7ec10518dd9">6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)</a></li>
</ul>
<li><b>Finally, learn React.</b></li>
<ul>
<li><a target="_blank" href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9i0_2FF-WhtRIfIJ1lXlTZR">React Tutorials (Youtube)</a> This is a video series.</li>
<li><a target="_blank" href="https://www.youtube.com/playlist?list=PL4cUxeGkcC9ij8CfkAY2RAGb-tmkNwQHG">Complete React Tutorial (with Redux) (Youtube)</a> This is a more modern version of using React. Redux can be difficult to understand but if you're willing to challenge yourself, go ahead!</li>
</ul>
</ul>
<b>Note:</b> You do not need to follow these steps in order but keep in mind these some of these articles / tutorials are teaching good practices and learning from them will lead to you to become a better web developer. Topics such as avoiding Promise Chaining Hell, and omplex queries running forever ... etc can lead serious issues if you're writing production code.
<hr>
<h5>Extra Material</h5>
If you want to dive into more advanced topics, you can read up on these new technologies.
<ul>
<li><a target="_blank" href="https://graphql.org/">GraphQL</a>, a powerful query language for APIs. You should attempt to learn this after you get a good grasp of Restful APIs</li>
<ul>
<li><a target="_blank" href="https://medium.freecodecamp.org/graphql-front-end-queries-made-easy-68e9d9ded283">GraphQL: front-end queries made easy</a></li>
<li><a target="_blank" href="https://philsturgeon.uk/api/2017/01/24/graphql-vs-rest-overview/">GraphQL vs REST</a></li>
<li><a target="_blank" href="https://blog.apollographql.com/graphql-vs-rest-5d425123e34b">GraphQL vs REST (Apollo)</a></li>
</ul>
<li><a target="_blank" href="https://redux.js.org/">Redux</a>, a global and predictable state management system. You should attempt to learn this after you get a good grasp of ES6 JavaScript and React. Note: Redux is available in many different variants too such as ng-redux for Angular. </li>
<ul>
<li><a target="_blank" href="https://www.valentinog.com/blog/redux/">React Redux Tutorial for Beginners: The Definitive Guide (2019)</a></li>
<li><a target="_blank" href="https://egghead.io/courses/getting-started-with-redux">Getting Started with Redux</a></li>
</ul>
</ul>
<hr>
<h5>Hosting and deploying web applications</h5>
<p> Coming soon...
</p>
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
</div>
<!-- Contact -->
<div id="location">
<div class="container">
<h6>Computer Science Enrichment Club</h6>
<p>
<br> 1265 Military Trail
<br> Toronto, ON
<br> M1C 1A4</p>
<div class="row">
<div class="col-md-12"> © CSEC 2019. All Rights Reserved </div>
</div>
<div class="row">
<div class="col-md-12"> Made with <i class="fa fa-heart"></i> by CSEC-W Team</div>
</div>
</div>
</div>
</body>
</html>