Welcome
Nice work!
' + }; +``` + +## Use the Transporter.sendMail method + +The last step is to use the Transporter.sendMail method. This is simpler than earlier steps. However, there are somethings we should aware of which is error handling. It is common that the nodemailer causes error since there might be typo in mail address and so on. Therefore, make sure to check for the error. If there are errors, make sure to hadle that separately. This code below gives you an idea how the error should be handled and how the method is used. + +``` JavaScript +transporter.sendMail(mailOptions, function(err, data) { + if (err) { + console.log("Error " + err); + } else { + console.log("Email sent successfully"); + } + }); +``` +This is very common way to handle errors. If specific operations are needed when there is an error, you can edit the code as needed. + +In conclusion, nodemailer is very simple way to send email to an user using node.js. + +## Useful Links +https://mailtrap.io/blog/sending-emails-with-nodemailer/ + + +https://www.knowledgehut.com/blog/web-development/nodemailer-module-nodejs + + +These websites have full tutorial from setting up to implmenting which can be useful! From 65576ca2e8453651a17a3cb4015cf5edab7401d2 Mon Sep 17 00:00:00 2001 From: Yasutakahi <113137606+Yasutakahi@users.noreply.github.com> Date: Mon, 13 Nov 2023 23:28:45 -0500 Subject: [PATCH 08/70] Update Tech_Stacks.md fixing the page so it has my file in there --- Topics/Tech_Stacks.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index dfd16e46e..7723c2203 100644 --- a/Topics/Tech_Stacks.md +++ b/Topics/Tech_Stacks.md @@ -12,3 +12,4 @@ ### [Learning TypeScript](./Tech_Stacks/TypeScript.md) ### [Learning JavaScript](./Tech_Stacks/JavaScript.md) ### [Learning React Native](./Tech_Stacks/ReactNative.md) +### [Learning Nodemailer](./Tech_Stacks/Nodemailer.md) From d02fed03d8bee481f1dc49702a812b7f5ce38b72 Mon Sep 17 00:00:00 2001 From: Umair-H <93732264+Umair-H@users.noreply.github.com> Date: Tue, 14 Nov 2023 13:33:34 -0500 Subject: [PATCH 09/70] Create Prioritization_Techniques.md --- Topics/Product_Management/Prioritization_Techniques.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 Topics/Product_Management/Prioritization_Techniques.md diff --git a/Topics/Product_Management/Prioritization_Techniques.md b/Topics/Product_Management/Prioritization_Techniques.md new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/Topics/Product_Management/Prioritization_Techniques.md @@ -0,0 +1 @@ + From b895ed41252545d00c9fb295eec5f594f658458c Mon Sep 17 00:00:00 2001 From: Umair-H <93732264+Umair-H@users.noreply.github.com> Date: Tue, 14 Nov 2023 13:36:29 -0500 Subject: [PATCH 10/70] Update Product_Management.md --- Topics/Product_Management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Product_Management.md b/Topics/Product_Management.md index 8e8c6f4d7..537462f8e 100644 --- a/Topics/Product_Management.md +++ b/Topics/Product_Management.md @@ -4,7 +4,7 @@ Product management is an essential part of the software development lifecycle, as much a key part as the technical side to software engineering. The essence of product management is to be able to develop a new product, with a clearly defined roadmap and goals/milestones outlined from the requirements of the customer - keeping a clear view of the overall vision and strategy. This is different to the role of a project manager, who is responsible for the internal organization and operation of the development team, to make sure goals are achieved and timelines are met. Some key features of a successful product manager: -* Able to efficiently and clearly prioritize tasks. +* [Able to efficiently and clearly prioritize tasks](./Product_Management/Prioritization_Techniques.md). * Understand the product, people and environment that you are working with. * Guide your development team without being authoritative. * If you are making tradeoffs, be sure to explain and outline the opportunity cost. From a7d8b0fae03120caeec63b8ce8dd365b455e4f3c Mon Sep 17 00:00:00 2001 From: Umair-H <93732264+Umair-H@users.noreply.github.com> Date: Tue, 14 Nov 2023 13:44:30 -0500 Subject: [PATCH 11/70] Update Prioritization_Techniques.md --- Topics/Product_Management/Prioritization_Techniques.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Topics/Product_Management/Prioritization_Techniques.md b/Topics/Product_Management/Prioritization_Techniques.md index 8b1378917..f7e517ab0 100644 --- a/Topics/Product_Management/Prioritization_Techniques.md +++ b/Topics/Product_Management/Prioritization_Techniques.md @@ -1 +1,7 @@ +### The MoSCoW Method +The MoSCoW method, an acronym derived from Must-haves, Should-haves, Could-haves, and Won't-haves, serves as a powerful tool in the arsenal of product managers for prioritizing tasks. This technique categorizes requirements into four distinct priority levels, helping teams streamline decision-making. Must-haves represent non-negotiable essentials, forming the backbone of a project. Should-haves are crucial but not critical, offering flexibility in scheduling. Could-haves encompass desirable but optional features. While Won't-haves, as the name implies, denote consciously deferred items. By employing the MoSCoW method, teams gain clarity, align on priorities, and efficiently allocate resources, enhancing the likelihood of delivering a product that meets both user expectations and business needs. + +### The Kano Method + +The Kano model, developed by Professor Noriaki Kano, is a nuanced technique for product development prioritization. It categorizes features into three main types: Basic Needs, Performance Needs, and Delighters. Basic Needs are fundamental requirements that, when met, prevent dissatisfaction but don't necessarily contribute to satisfaction when exceeded. Performance Needs directly correlate satisfaction with their level of fulfillment—higher performance leads to greater satisfaction. Delighters are unexpected features that, when included, can significantly elevate user satisfaction. This method not only aids in prioritizing features based on their potential to enhance user experience but also guides teams in understanding the emotional and functional aspects that shape user preferences. By integrating the Kano model into your processes, product managers empower teams to make informed decisions that resonate with user expectations and contribute to long-term customer satisfaction. From fd33c79f241ec3ff1ec8c15fc5c238071dbd80bc Mon Sep 17 00:00:00 2001 From: Umair-H <93732264+Umair-H@users.noreply.github.com> Date: Wed, 15 Nov 2023 19:42:24 -0500 Subject: [PATCH 12/70] Update Prioritization_Techniques.md Added an introduction and conclusion --- Topics/Product_Management/Prioritization_Techniques.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/Topics/Product_Management/Prioritization_Techniques.md b/Topics/Product_Management/Prioritization_Techniques.md index f7e517ab0..1e16425a4 100644 --- a/Topics/Product_Management/Prioritization_Techniques.md +++ b/Topics/Product_Management/Prioritization_Techniques.md @@ -1,3 +1,7 @@ +### Introduction + +Effective prioritization lies at the core of successful product management, demanding a keen understanding of which tasks deserve priority. The art of prioritization can be the difference between crafting a polished minimum viable product and merely assembling an arbitrary assortment of features. In the realm of software development, two notable techniques stand out for their efficacy: the MoSCoW method and the Kano model. These methodologies offer invaluable frameworks for product managers, guiding teams through the intricate process of determining priorities and ensuring that essential foundations are laid before delving into additional features. + ### The MoSCoW Method The MoSCoW method, an acronym derived from Must-haves, Should-haves, Could-haves, and Won't-haves, serves as a powerful tool in the arsenal of product managers for prioritizing tasks. This technique categorizes requirements into four distinct priority levels, helping teams streamline decision-making. Must-haves represent non-negotiable essentials, forming the backbone of a project. Should-haves are crucial but not critical, offering flexibility in scheduling. Could-haves encompass desirable but optional features. While Won't-haves, as the name implies, denote consciously deferred items. By employing the MoSCoW method, teams gain clarity, align on priorities, and efficiently allocate resources, enhancing the likelihood of delivering a product that meets both user expectations and business needs. @@ -5,3 +9,7 @@ The MoSCoW method, an acronym derived from Must-haves, Should-haves, Could-haves ### The Kano Method The Kano model, developed by Professor Noriaki Kano, is a nuanced technique for product development prioritization. It categorizes features into three main types: Basic Needs, Performance Needs, and Delighters. Basic Needs are fundamental requirements that, when met, prevent dissatisfaction but don't necessarily contribute to satisfaction when exceeded. Performance Needs directly correlate satisfaction with their level of fulfillment—higher performance leads to greater satisfaction. Delighters are unexpected features that, when included, can significantly elevate user satisfaction. This method not only aids in prioritizing features based on their potential to enhance user experience but also guides teams in understanding the emotional and functional aspects that shape user preferences. By integrating the Kano model into your processes, product managers empower teams to make informed decisions that resonate with user expectations and contribute to long-term customer satisfaction. + +### Conclusion + +Regardless of your chosen prioritization technique, be it MoSCoW or the Kano model, both prove undeniably valuable in guiding teams toward successful project outcomes. Whether prioritizing with categorical precision or focusing on user satisfaction, these approaches empower informed decision-making, ensuring resources are allocated judiciously and products align with user expectations. Implement these techniques to help provide structure and clarity to your projects. From 9a73c0ed933755f7aa032adb949edbb962abff70 Mon Sep 17 00:00:00 2001 From: Umair-H <93732264+Umair-H@users.noreply.github.com> Date: Thu, 16 Nov 2023 17:30:44 -0500 Subject: [PATCH 13/70] Update Prioritization_Techniques.md --- Topics/Product_Management/Prioritization_Techniques.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/Topics/Product_Management/Prioritization_Techniques.md b/Topics/Product_Management/Prioritization_Techniques.md index 1e16425a4..84afbb4ad 100644 --- a/Topics/Product_Management/Prioritization_Techniques.md +++ b/Topics/Product_Management/Prioritization_Techniques.md @@ -1,3 +1,11 @@ +# Prioritization Techniques + +## Table of contents +### [Introduction](#introduction-1) +### [MoSCoW Method](#the-moscow-method-1) +### [Kano Method](#the-kano-method-1) +### [Conclusion](#conclusion-1) + ### Introduction Effective prioritization lies at the core of successful product management, demanding a keen understanding of which tasks deserve priority. The art of prioritization can be the difference between crafting a polished minimum viable product and merely assembling an arbitrary assortment of features. In the realm of software development, two notable techniques stand out for their efficacy: the MoSCoW method and the Kano model. These methodologies offer invaluable frameworks for product managers, guiding teams through the intricate process of determining priorities and ensuring that essential foundations are laid before delving into additional features. From 99ea8a3977501742a8994aa1b363082dce860b0a Mon Sep 17 00:00:00 2001 From: Umair-H <93732264+Umair-H@users.noreply.github.com> Date: Thu, 16 Nov 2023 17:37:58 -0500 Subject: [PATCH 14/70] Update Prioritization_Techniques.md --- .../Prioritization_Techniques.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/Topics/Product_Management/Prioritization_Techniques.md b/Topics/Product_Management/Prioritization_Techniques.md index 84afbb4ad..4e6b6efd1 100644 --- a/Topics/Product_Management/Prioritization_Techniques.md +++ b/Topics/Product_Management/Prioritization_Techniques.md @@ -1,23 +1,22 @@ -# Prioritization Techniques +# Table of Contents -## Table of contents -### [Introduction](#introduction-1) -### [MoSCoW Method](#the-moscow-method-1) -### [Kano Method](#the-kano-method-1) -### [Conclusion](#conclusion-1) +### [Introduction](#introduction) +### [The MoSCoW Method](#the-moscow-method) +### [The Kano Method](#the-kano-method) +### [Conclusion](#conclusion) -### Introduction +## Introduction Effective prioritization lies at the core of successful product management, demanding a keen understanding of which tasks deserve priority. The art of prioritization can be the difference between crafting a polished minimum viable product and merely assembling an arbitrary assortment of features. In the realm of software development, two notable techniques stand out for their efficacy: the MoSCoW method and the Kano model. These methodologies offer invaluable frameworks for product managers, guiding teams through the intricate process of determining priorities and ensuring that essential foundations are laid before delving into additional features. -### The MoSCoW Method +## The MoSCoW Method The MoSCoW method, an acronym derived from Must-haves, Should-haves, Could-haves, and Won't-haves, serves as a powerful tool in the arsenal of product managers for prioritizing tasks. This technique categorizes requirements into four distinct priority levels, helping teams streamline decision-making. Must-haves represent non-negotiable essentials, forming the backbone of a project. Should-haves are crucial but not critical, offering flexibility in scheduling. Could-haves encompass desirable but optional features. While Won't-haves, as the name implies, denote consciously deferred items. By employing the MoSCoW method, teams gain clarity, align on priorities, and efficiently allocate resources, enhancing the likelihood of delivering a product that meets both user expectations and business needs. -### The Kano Method +## The Kano Method The Kano model, developed by Professor Noriaki Kano, is a nuanced technique for product development prioritization. It categorizes features into three main types: Basic Needs, Performance Needs, and Delighters. Basic Needs are fundamental requirements that, when met, prevent dissatisfaction but don't necessarily contribute to satisfaction when exceeded. Performance Needs directly correlate satisfaction with their level of fulfillment—higher performance leads to greater satisfaction. Delighters are unexpected features that, when included, can significantly elevate user satisfaction. This method not only aids in prioritizing features based on their potential to enhance user experience but also guides teams in understanding the emotional and functional aspects that shape user preferences. By integrating the Kano model into your processes, product managers empower teams to make informed decisions that resonate with user expectations and contribute to long-term customer satisfaction. -### Conclusion +## Conclusion Regardless of your chosen prioritization technique, be it MoSCoW or the Kano model, both prove undeniably valuable in guiding teams toward successful project outcomes. Whether prioritizing with categorical precision or focusing on user satisfaction, these approaches empower informed decision-making, ensuring resources are allocated judiciously and products align with user expectations. Implement these techniques to help provide structure and clarity to your projects. From 5a9e59aa34a142c1b0d6bb743ac28e12c13b14d9 Mon Sep 17 00:00:00 2001 From: Umair-H <93732264+Umair-H@users.noreply.github.com> Date: Fri, 17 Nov 2023 10:28:26 -0500 Subject: [PATCH 15/70] Added examples to Prioritization_Techniques.md --- Topics/Product_Management/Prioritization_Techniques.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/Product_Management/Prioritization_Techniques.md b/Topics/Product_Management/Prioritization_Techniques.md index 4e6b6efd1..fc5b80294 100644 --- a/Topics/Product_Management/Prioritization_Techniques.md +++ b/Topics/Product_Management/Prioritization_Techniques.md @@ -11,11 +11,11 @@ Effective prioritization lies at the core of successful product management, dema ## The MoSCoW Method -The MoSCoW method, an acronym derived from Must-haves, Should-haves, Could-haves, and Won't-haves, serves as a powerful tool in the arsenal of product managers for prioritizing tasks. This technique categorizes requirements into four distinct priority levels, helping teams streamline decision-making. Must-haves represent non-negotiable essentials, forming the backbone of a project. Should-haves are crucial but not critical, offering flexibility in scheduling. Could-haves encompass desirable but optional features. While Won't-haves, as the name implies, denote consciously deferred items. By employing the MoSCoW method, teams gain clarity, align on priorities, and efficiently allocate resources, enhancing the likelihood of delivering a product that meets both user expectations and business needs. +Firstly, the MoSCoW method, an acronym derived from Must-haves, Should-haves, Could-haves, and Won't-haves, serves as a powerful tool in the arsenal of product managers for prioritizing tasks. This technique categorizes requirements into four distinct priority levels, helping teams streamline decision-making. Must-haves represent non-negotiable essentials, forming the backbone of a project. These would be features related to the MVP. Should-haves are crucial but not critical, offering flexibility in scheduling. Normally, tasks that the client would like, but are not included in the MVP. Could-haves encompass desirable but optional features. These could be features that the client might want, but could do without them. While Won't-haves, as the name implies, denote consciously deferred items. These either will not work for whatever reason, or do not meet the time limit. ## The Kano Method -The Kano model, developed by Professor Noriaki Kano, is a nuanced technique for product development prioritization. It categorizes features into three main types: Basic Needs, Performance Needs, and Delighters. Basic Needs are fundamental requirements that, when met, prevent dissatisfaction but don't necessarily contribute to satisfaction when exceeded. Performance Needs directly correlate satisfaction with their level of fulfillment—higher performance leads to greater satisfaction. Delighters are unexpected features that, when included, can significantly elevate user satisfaction. This method not only aids in prioritizing features based on their potential to enhance user experience but also guides teams in understanding the emotional and functional aspects that shape user preferences. By integrating the Kano model into your processes, product managers empower teams to make informed decisions that resonate with user expectations and contribute to long-term customer satisfaction. +The Kano model, developed by Professor Noriaki Kano, is a nuanced technique for product development prioritization. It categorizes features into three main types: Basic Needs, Performance Needs, and Delighters. Basic Needs are fundamental requirements that, when met, prevent dissatisfaction but don't necessarily contribute to satisfaction when exceeded. This is the perfect example of what the MVP represents, the client would expect this completed, but won’t be overly happy as its the minimum expectation. Performance Needs directly correlate satisfaction with their level of fulfillment—higher performance leads to greater satisfaction. Delighters are unexpected features that, when included, can significantly elevate user satisfaction. These include going above and beyond client expectations. Such as, implementing features that were not mentioned, but could greatly improve the product. By integrating the Kano model into your processes, product managers empower teams to make informed decisions that resonate with user expectations and contribute to long-term customer satisfaction. ## Conclusion From 0a3be28e3443c2ff9035479c1ea1fbb591484c82 Mon Sep 17 00:00:00 2001 From: Eric <37644716+ericjest@users.noreply.github.com> Date: Fri, 17 Nov 2023 11:48:45 -0500 Subject: [PATCH 16/70] Write Twitter System Design article --- Topics/System_Design.md | 3 + Topics/System_Design/Twitter_System_Design.md | 63 ++++++++++++++++++ Topics/System_Design/twitter.png | Bin 0 -> 50108 bytes index.md | 2 +- 4 files changed, 67 insertions(+), 1 deletion(-) create mode 100644 Topics/System_Design.md create mode 100644 Topics/System_Design/Twitter_System_Design.md create mode 100644 Topics/System_Design/twitter.png diff --git a/Topics/System_Design.md b/Topics/System_Design.md new file mode 100644 index 000000000..d53def5ae --- /dev/null +++ b/Topics/System_Design.md @@ -0,0 +1,3 @@ +## System Design + +### [Twitter Case Study: How to Design the Home Timeline for Massive Scale](./System_Design/Twitter_System_Design.md) \ No newline at end of file diff --git a/Topics/System_Design/Twitter_System_Design.md b/Topics/System_Design/Twitter_System_Design.md new file mode 100644 index 000000000..429275d00 --- /dev/null +++ b/Topics/System_Design/Twitter_System_Design.md @@ -0,0 +1,63 @@ +# Twitter Case Study: How to Design the Home Timeline for Massive Scale + +## Introduction +Twitter's home timeline is in theory a very simple feature. Users are in a many-to-many relationship with other users. Users can post Tweets. Each follower of the user should see every Tweet posted by the people they follow in their home feed, sorted in chronological order. + +The challenge for Twitter is building a highly-available and responsive home timeline given their massive scale. As of November 2012, Twitter had: +- 150M world wide active users +- Over 300K Queries-per-Second (QPS) for timelines + +In conjunction with this scale, Raffi Krikorian notes in his [QCon Talk](https://www.infoq.com/presentations/Twitter-Timeline-Scalability/) that when a user tweets, their followers should be updated with the new tweet in 5 seconds or under. This article will explain why this is a non-trivial task and give a high-level overview of how Twitter designed their systems to accomodate their scale (as of 2012). + +## Approach 1: Naive SQL Query +Below is a simplified SQL schema of Twitter's data model. + +**tweets** +| id | author_id | content | +|----------|:-------------:|------:| +| 38927 | 1 | "Did you ever hear the tragedy of Darth Plagueis The Wise? I thought not." | +| 38928 | 2 | "I hate sand." | +| 38929 | 3 | "You were my brother Anakin!" | + +**users** +| id | username | bio | +|----------|:-------------:|------:| +| 1 | darth-palpatine | Unlimited Power! | +| 2 | anakin-skywalker | The Jedi are Evil | +| 3 | obi-wan | Hello there | + +**follows** +| follower_id | follows_id | +|----------|:-------------:| +| 2 | 1 | +| 2 | 3 | +| 1 | 2 | + +Twitter's initial naive approach was to join the Tweet, User, and Follows tables in SQL upon a GET request from a client like so: +``` +SELECT * FROM tweets +JOIN users ON tweets.author_id = users.id +JOIN follows ON follows_id = users.id +WHERE follower_id = current_user.id; +``` + +You can quickly see how this approach became quite slow at over 300K QPS. + +## Approach 2: Caching +As a result, Twitter implemented a fan-out caching system. They stored a [Redis list](https://redis.io/docs/data-types/lists/) for each user containing the Tweets to display on each user's home timeline. Let's illustrate this with an example. Say that Darth Palpatine is followed by Anakin Skywalker, Obi-Wan, and Padme Amidala. When Darth Palpatine posts a Tweet, Twitter's fan-out service pushes the new Tweet to the Redis cache for each user that follows Darth Palpatine (Anakin, Obi-Wan, and Padme). This way, when Anakin (for example) loads his timeline page, his Tweets are cached in Redis and can be retrieved in constant runtime (in this simplified example). + +The below system diagram presents a simplified version of this architecture. Note that several things are omitted for simplicity; for example the load balancer that receives the POST request from the client. Also note that the Redis Cluster is presented as one node in the diagram. In reality, a Redis Cluster (as the word "cluster" suggests) consists of lots of distributed Redis databases. In addition, Twitter (as of 2012) stores three copies of each Tweet across different Redis nodes to ensure system resilience and availability (as in a huge system like Twitter, nodes can frequently crash and become unavailable). + + +*A system diagram of Twitter's caching approach for home timelines.* + +## A Third Twist: the Hybrid Approach +The caching approach worked for accounts with a reasonable number of followers. Assuming an average follower count of 100 and 4.6k Tweets per second (based on November 2012 data), this translated to 460k writes per second to the Redis cluster. + +However, for celebrity accounts with huge numbers of followers, this was not performant. A Tweet from Lebron James, who has 50 million followers as of 2023, would result in over 50 million writes at once. In this scenario, the caching approach was not feasible given Twitter's goal of delivering Tweets within 5 seconds. As a result, Twitter implemented a hybrid approach, where most new Tweets were cached (using approach 2) while Tweets from accounts with large followings were queried at runtime (like approach 1) and merged chronologically with the Tweet cache. + +The exact implementation of this hybrid approach is beyond the scope of this article. However, this case study of Twitter illustrates some of the complexities systems encounter at massive scale. It also demonstrates how we should consider our goals (i.e. high availability) and use case (i.e. accounts with millions of followers) when designing systems. + +## Credits +This article is based on [Raffi Krikorian's November 2012 talk at QCon](https://www.infoq.com/presentations/Twitter-Timeline-Scalability/) and Martin Kleppman's book, [Designing Data-Intensive Applications](https://www.oreilly.com/library/view/designing-data-intensive-applications/9781491903063/). + diff --git a/Topics/System_Design/twitter.png b/Topics/System_Design/twitter.png new file mode 100644 index 0000000000000000000000000000000000000000..c016477a94179c87fb15cc2043aa07d9589ad08f GIT binary patch literal 50108 zcmeFZ2Ur!`vMmgV2quzWelcome
Nice work!
' + html: '' }; ``` ## Use the Transporter.sendMail method -The last step is to use the Transporter.sendMail method. This is simpler than earlier steps. However, there are somethings we should aware of which is error handling. It is common that the nodemailer causes error since there might be typo in mail address and so on. Therefore, make sure to check for the error. If there are errors, make sure to hadle that separately. This code below gives you an idea how the error should be handled and how the method is used. +The last step is to use the Transporter.sendMail method. This is simpler than earlier steps. However, there are some things we should aware of which is error handling. It is common that the nodemailer causes errors since there might be a typo in the mail address and so on. Therefore, make sure to check for the error. If there are errors, make sure to hadle them separately. This code below gives you an idea how the error should be handled and how the method is used. ``` JavaScript transporter.sendMail(mailOptions, function(err, data) { @@ -81,7 +81,7 @@ transporter.sendMail(mailOptions, function(err, data) { ``` This is very common way to handle errors. If specific operations are needed when there is an error, you can edit the code as needed. -In conclusion, nodemailer is very simple way to send email to an user using node.js. +In conclusion, nodemailer is a very simple way to send emails to a user. ## Useful Links https://mailtrap.io/blog/sending-emails-with-nodemailer/ @@ -90,4 +90,4 @@ https://mailtrap.io/blog/sending-emails-with-nodemailer/ https://www.knowledgehut.com/blog/web-development/nodemailer-module-nodejs -These websites have full tutorial from setting up to implmenting which can be useful! +These websites have full tutorials from setting up to implementing which can be useful! From b9143d7096055e0721f12f4b61349345c615d6fd Mon Sep 17 00:00:00 2001 From: Charlie TaoHello, world!
+ + <-- Bootstrap JavaScript --> + + + +``` + +## Bootstrap Basics +At the heart of Bootstrap is the inclusion of Bootstrap classes into your HTML elements. At the start, you will find yourself constantly looking at documentation to refer to which available class options are available. These classes are used to add styling into your elements as either a Bootstrap component, or a simple shorthand for common CSS adjustments. Some commonly used classes include the adjustment of margins and padding. Here is an example of how each of them can be used in code, along with their corresponding reference. + +[Margins / Padding](https://getbootstrap.com/docs/5.3/utilities/spacing/) +``` + + + + + + + +``` + +These class names may look foreign, but essentially they follow the format of `[margin / padding][side]-[scale]`. What they do is change the margins or paddings of the HTML elements without the need for custom CSS styling or classes, since it is common to want to adjust spacing conveniently on the fly. The specific selections can be found in the documentation, but a summary is: + +``` +# Types +m = margin, p = padding + +# Sides +t = top, b = bottom, s = start (typically left), e = end (typically right) +x = x-axis (left and right), y = y-axis (top and bottom) +Using m or p alone = all sides + +# Values +auto = CSS auto +0, 1, 2, 3, 4, 5 = Relative sizes from 0 to 3 rem +``` + +### Buttons +[Bootstrap Buttons Resource](https://getbootstrap.com/docs/5.3/components/buttons/) + +### Cards +[Bootstrap Cards Resource](https://getbootstrap.com/docs/5.3/components/card/) + +### Grid Layout +[Bootstrap Grid Resource](https://getbootstrap.com/docs/5.3/layout/grid/) + +## Closing statements +As seen above, Bootstrap styling can speed up the creation of clean and simple designs in your HTML elements. The usage of Bootstrap extends into React, which has slightly different implementation details which can be found [on their official website here](https://react-bootstrap.netlify.app/docs/getting-started/introduction). Hopefully you have a better understanding of what Bootstrap is, how a component can be used in a website, and how to use Bootstrap layouts to format your elements. + +## References and Resources +[] + + From 8cb02154bec3cb3c9911294105a8ac45fcb01f72 Mon Sep 17 00:00:00 2001 From: Yasutakahi <113137606+Yasutakahi@users.noreply.github.com> Date: Mon, 20 Nov 2023 16:28:28 -0500 Subject: [PATCH 32/70] improved based on reviews I added some further explanations about the securities and what the data attribute is for --- Topics/Tech_Stacks/Nodemailer.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/Nodemailer.md b/Topics/Tech_Stacks/Nodemailer.md index c95969ce4..15a226286 100644 --- a/Topics/Tech_Stacks/Nodemailer.md +++ b/Topics/Tech_Stacks/Nodemailer.md @@ -36,7 +36,7 @@ let transporter = nodemailer.createTransport({ } }); ``` -Here, it uses gmail to send email. Information about the mail address that you want the email to be sent from goes to auth as the code suggested. +Here, it uses gmail to send email. Information about the mail address that you want the email to be sent from goes to auth as the code suggested. Note that you usually want to define your mail address and password in different file such as .env so that it is not visible by others. [This website](https://www.freecodecamp.org/news/use-nodemailer-to-send-emails-from-your-node-js-server/) gives further explanation about credentials. It might be helpful when you are actually implementing and encounter any errors. @@ -79,7 +79,7 @@ transporter.sendMail(mailOptions, function(err, data) { } }); ``` -This is very common way to handle errors. If specific operations are needed when there is an error, you can edit the code as needed. +This is very common way to handle errors. If specific operations are needed when there is an error, you can edit the code as needed. This data attribute for errors can be used to notify what the error or problem is. In conclusion, nodemailer is a very simple way to send emails to a user. From fc5498161cabae24ab82cb2c2c5e6b7993939334 Mon Sep 17 00:00:00 2001 From: Charlie Tao
+ 
+
+```
+
+Here, we have a sample Bootstrap card that will display as the above image. The outer-most element is a div with the `"card"` class, establishing the basic rounded rectangle of width 18rem. This allows for cards to be placed anywhere and adjusted to the appropriate sizes with your own styles. Nested within this element is where you can place other parts of a card, such as `"card-img-top"`, `"card-body"`, `"card-title"`, and `"card-text"`. There are other options you may find on the official documentation, but for now we will focus on these.
+
+- `"card-img-top"` is a class that can format an image to fill the top of the card. Thus, it is usually attached to an `img` element and can be paired with text in the `"card-body"` that will fill the bottom.
+- `"card-body"` is a class where most of the content can be nested inside. The class allots a padded space for your content, such as text, to belong. It can be paired with `"card-title"` and `"card-text"` to format the text within.
+- `"card-title"` and `"card-text"` are classes that will style your text. It can be added as a child of the `"card-body"` to utilize the premade formatting, or it can be used on its own with your own custom CSS formatting.
+
+Reminder that these classes do not have to be placed in this certain order, and liberties can be taken with your own custom CSS to determine the proper formatting that you desire. A lot of Bootstrap components are tools you can use as reference, and you can apply further customization to fit your needs.
+
### Grid Layout
[Bootstrap Grid Resource](https://getbootstrap.com/docs/5.3/layout/grid/)
+The Bootstrap Grid System is a fundamental tool for creating responsive and organized layouts in web development. It revolves around a 12-column grid structure, providing a flexible framework to arrange content on your webpage.
+
+- **Container:** The `container` class creates a responsive wrapper for your content, adjusting its width based on the screen size.
+
+- **Rows and Columns:** Use the `row` class to define horizontal containers. Inside a row, you can divide the space into 12 columns using classes like `col-`, `col-sm-`, `col-md-`, etc. For example:
+
+ ```html
+
+
+Card title
+Some quick example text to build on the card title and make up the bulk of the card's content.
+ Go somewhere +
+
+ ```
+
+- **Responsive Classes:** Bootstrap provides responsive classes to control column behavior on different screen sizes. Prefix classes like `col-sm-` for small screens, `col-md-` for medium screens, and so on.
+
+- **Offsetting and Nesting:** Offset classes add space between columns, while nesting allows you to create more intricate layouts by placing rows and columns inside existing columns.
+
+#### Example Implementation
+
+Creating a three-column layout:
+
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+Mastering the basics of the Bootstrap Grid System empowers you to design responsive and visually appealing web layouts efficiently. Explore different configurations to understand its flexibility and enhance your web development skills. For detailed information, refer to the [Bootstrap Grid documentation](https://getbootstrap.com/docs/5.3/layout/grid/).
+
## Closing statements
As seen above, Bootstrap styling can speed up the creation of clean and simple designs in your HTML elements. The usage of Bootstrap extends into React, which has slightly different implementation details which can be found [on their official website here](https://react-bootstrap.netlify.app/docs/getting-started/introduction). Hopefully you have a better understanding of what Bootstrap is, how a component can be used in a website, and how to use Bootstrap layouts to format your elements.
-## References and Resources
-[]
+## References
+[Bootstrap Tutorial and Documentation](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
From c9d2091a27a67cb3a4f0283b7eb2a5d490d04688 Mon Sep 17 00:00:00 2001
From: Charlie Tao
+
+
+
+
+
+
+
+
+
+
+ Hello, world!
- <-- Bootstrap JavaScript --> + @@ -155,9 +155,6 @@ Creating a three-column layout: Mastering the basics of the Bootstrap Grid System empowers you to design responsive and visually appealing web layouts efficiently. Explore different configurations to understand its flexibility and enhance your web development skills. For detailed information, refer to the [Bootstrap Grid documentation](https://getbootstrap.com/docs/5.3/layout/grid/). ## Closing statements -As seen above, Bootstrap styling can speed up the creation of clean and simple designs in your HTML elements. The usage of Bootstrap extends into React, which has slightly different implementation details which can be found [on their official website here](https://react-bootstrap.netlify.app/docs/getting-started/introduction). Hopefully you have a better understanding of what Bootstrap is, how a component can be used in a website, and how to use Bootstrap layouts to format your elements. - -## References -[Bootstrap Tutorial and Documentation](https://getbootstrap.com/docs/5.3/getting-started/introduction/) - +As seen above, Bootstrap styling can speed up the creation of clean and simple designs in your HTML elements. The usage of Bootstrap extends into React, which has slightly different implementation details which can be found [on their official website here](https://react-bootstrap.netlify.app/docs/getting-started/introduction). There are other Frameworks out there, such as Tailwind CSS, which also aim to simplify the styling process, so you can check that out [here](https://tailwindcss.com/docs/installation) Hopefully you have a better understanding of what Bootstrap is, how a component can be used in a website, and how to use Bootstrap layouts to format your elements. +## References and Links diff --git a/Topics/Tech_Stacks/CSS.md b/Topics/Tech_Stacks/CSS.md index a74bc1721..827d57dd6 100644 --- a/Topics/Tech_Stacks/CSS.md +++ b/Topics/Tech_Stacks/CSS.md @@ -39,6 +39,6 @@ CSS grid is also a positioning alternative that provides a grid layout module, i Native CSS can be difficult to use, so CSS frameworks have been created so developers can use pre-made styles in order to create good looking website components, navigation bars, buttons, etc. in an easier and faster way without needing to know the semantics of CSS. Two popular CSS frameworks include [Tailwind CSS](https://tailwindcss.com/) and [Bootstrap CSS](https://getbootstrap.com/docs/3.4/css/). -[React-Bootstrap](https://react-bootstrap.github.io/) is a Bootstrap CSS framework specifically for use on React apps. +[React-Bootstrap](https://react-bootstrap.github.io/) is a Bootstrap CSS framework specifically for use on React apps. There is also the guide on our wiki [here](./Bootstrap.md) that can get you started on Bootstrap's basics. Generally, Bootstrap is easier to use and will produce a good looking website in a shorter amount of time, while Tailwind CSS is more customizable and can create more unique looking elements, but requires more of a time investment and is a bit harder to learn and work with compared to Bootstrap. From 5981c5b887b794b86921f106c75356971e0f834d Mon Sep 17 00:00:00 2001 From: Charlie Tao
+
+
+ );
+}
+
+export default App;
+
+Besides, Ant Design allows you to customize the default theme by modifying the less variables. For instance, you can use tools like 'craco-less' or 'react-app-rewired' to customize your theme without ejecting from Create React App.
+
+If you want to learn more about Ant Design. There are some useful documents or tutorials that can help you get started with Ant Design.
+
+- [Ant Design official documentation](https://ant.design/docs/react/introduce): Actually, official documentation is always an excellent starting point for you to get started with an unfamiliar tool. It provides a comprehensive guide on installation, components, and customization. If you meet a trouble in using a component, read this guide!
+
+- [ANT DESIGN - THE BEST REACT LIBRARY??](https://www.youtube.com/watch?v=IEqmSROj5Uc): This tutorial video can show you every basic thing about Ant Design in 5 minutes. After watching this video, you can have an overview about Ant Design.
+
+- [Reactjs with AntDesign](https://www.youtube.com/playlist?list=PL-JTnqZPF5z2qTGwNkYln3m0pA0qfgHFR): This playlist contains almost every useful components that you might want to use in your project. It is good for beginners to learn the usage of components and apply them step by step.
+
+By following these tutorials, I hope you can gain a solid understanding of how to use Ant Design in your React projects and create attractive, user-friendly interfaces.
From fc7ebc735a312714bd538a1166c97754aa943daf Mon Sep 17 00:00:00 2001
From: Chelsea Wang <98237975+chwawa@users.noreply.github.com>
Date: Tue, 21 Nov 2023 14:51:09 -0500
Subject: [PATCH 44/70] Update User_Experience.md
moved "Ant Design" section to a different file as suggested by Leya :)
---
Topics/User_Experience.md | 36 +-----------------------------------
1 file changed, 1 insertion(+), 35 deletions(-)
diff --git a/Topics/User_Experience.md b/Topics/User_Experience.md
index 94eef5aad..e5173e96b 100644
--- a/Topics/User_Experience.md
+++ b/Topics/User_Experience.md
@@ -200,41 +200,7 @@ When building an application with a frontend framework (e.g., React, Vue, Angula
### Ant Design
-Ant Design is another popular UI library and design system. It is specifically designed for React applications and other frontend frameworks like Vue, Angular and etc, providing a complete set of high-quality React components that make user interface development simpler, more consistent, and modular. Ant Design is ideal for building enterprise-level applications and dashboards with a focus on high performance, usability, and aesthetics.
-
-Ant Design provides a wide range of UI components, including buttons, icons, form elements, tables, and navigation menus. It also offers a consistent design language, making it easier for developers to create appealing user interfaces. The design ensures that your applications look great on different devices and screen sizes. More importantly, it is easy to use for beginners. Following steps are provided for you to start using Ant Design in your project.
-
-First, you need to install Ant Design in your React application. You can do this by running the following command (also you can use yarn command to install, here I provide method using npm):
-
-**npm install antd**
-
-Next, you may want to import the components you want to use in your application. For example, if you want to change the style for your button in a webpage, simply import Button from antd package.
-
-**import { Button } from 'antd';**
-
-Finally, you are almost done. All you need to do is use the imported components in your application. For example, below code is a example using Button from antd package:
-
-function App() {
- return (
-
-
-
- );
-}
-
-export default App;
-
-Besides, Ant Design allows you to customize the default theme by modifying the less variables. For instance, you can use tools like 'craco-less' or 'react-app-rewired' to customize your theme without ejecting from Create React App.
-
-If you want to learn more about Ant Design. There are some useful documents or tutorials that can help you get started with Ant Design.
-
-- [Ant Design official documentation](https://ant.design/docs/react/introduce): Actually, official documentation is always an excellent starting point for you to get started with an unfamiliar tool. It provides a comprehensive guide on installation, components, and customization. If you meet a trouble in using a component, read this guide!
-
-- [ANT DESIGN - THE BEST REACT LIBRARY??](https://www.youtube.com/watch?v=IEqmSROj5Uc): This tutorial video can show you every basic thing about Ant Design in 5 minutes. After watching this video, you can have an overview about Ant Design.
-
-- [Reactjs with AntDesign](https://www.youtube.com/playlist?list=PL-JTnqZPF5z2qTGwNkYln3m0pA0qfgHFR): This playlist contains almost every useful components that you might want to use in your project. It is good for beginners to learn the usage of components and apply them step by step.
-
-By following these tutorials, I hope you can gain a solid understanding of how to use Ant Design in your React projects and create attractive, user-friendly interfaces.
+View an introduction to Ant Design written by a CSC301 student [here](./User_Experience/Ant_Design.md)
# User Experience-Orientated Games
From e75aabf622ccd219e50b192c11edd70570e7eb1a Mon Sep 17 00:00:00 2001
From: Chelsea Wang <98237975+chwawa@users.noreply.github.com>
Date: Tue, 21 Nov 2023 15:00:47 -0500
Subject: [PATCH 45/70] Update User_Experience.md
quick fix: added link to table of contents
---
Topics/User_Experience.md | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/Topics/User_Experience.md b/Topics/User_Experience.md
index 6733427ab..9afcada21 100644
--- a/Topics/User_Experience.md
+++ b/Topics/User_Experience.md
@@ -4,16 +4,17 @@
## Table of Contents
1. [Overview](https://learning-software-engineering.github.io/Topics/User_Experience.html#overview)
2. [Fundamentals of User Experience](https://learning-software-engineering.github.io/Topics/User_Experience.html#fundamentals-of-user-experience)
+ - [User-Friendly Search Algorithms](https://learning-software-engineering.github.io/Topics/User_Experience.html#user-friendly-search-algorithms)
- [User Research](https://learning-software-engineering.github.io/Topics/User_Experience.html#user-research)
- [Visual Elements of User Interface Design](https://learning-software-engineering.github.io/Topics/User_Experience.html#visual-elements-of-user-interface-design)
- [User Experience Principles](https://learning-software-engineering.github.io/Topics/User_Experience.html#user-experience-principles)
- [Site mapping, Wireframing, and Prototyping](https://learning-software-engineering.github.io/Topics/User_Experience.html#site-mapping-wireframing-and-prototyping)
- [Accessibility](https://learning-software-engineering.github.io/Topics/User_Experience.html#accessibility)
-3. [Helpful Courses](https://learning-software-engineering.github.io/Topics/User_Experience.html#helpful-courses)
-4. [Tools Used in User Experience Design](https://learning-software-engineering.github.io/Topics/User_Experience.html#tools-used-in-user-experience-design)
+4. [Helpful Courses](https://learning-software-engineering.github.io/Topics/User_Experience.html#helpful-courses)
+5. [Tools Used in User Experience Design](https://learning-software-engineering.github.io/Topics/User_Experience.html#tools-used-in-user-experience-design)
- [Design Tools](https://learning-software-engineering.github.io/Topics/User_Experience.html#design-tools)
- [UI Component Libraries](https://learning-software-engineering.github.io/Topics/User_Experience.html#ui-component-libraries)
-5. [User Experience-Oriented Games](https://learning-software-engineering.github.io/Topics/User_Experience.html#user-experience-oriented-games)
+6. [User Experience-Oriented Games](https://learning-software-engineering.github.io/Topics/User_Experience.html#user-experience-oriented-games)
# Overview
From 024dae5d1f830d9e5896930172ae3b772c4888e3 Mon Sep 17 00:00:00 2001
From: K M Crawford