From 892dc304773cf2750f3e6f7eb455e66082115c07 Mon Sep 17 00:00:00 2001 From: Raazia Hashim <67606070+hashimr1@users.noreply.github.com> Date: Mon, 6 Nov 2023 19:43:26 -0500 Subject: [PATCH 01/14] Create Temporal.md --- Topics/Tech_Stacks/Temporal.md | 113 +++++++++++++++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 Topics/Tech_Stacks/Temporal.md diff --git a/Topics/Tech_Stacks/Temporal.md b/Topics/Tech_Stacks/Temporal.md new file mode 100644 index 000000000..d6c28de75 --- /dev/null +++ b/Topics/Tech_Stacks/Temporal.md @@ -0,0 +1,113 @@ +# Temporal For Workflow Orchestration + +## Table of contents +### [Introduction to Temporal](#introduction-to-temporal) +### [How does Temporal work](#how-does-temporal-work) +### [Your first workflow](#your-first-workflow) +### [Additional Resources](#additional-resources) + +## Introduction to Temporal +Temporal is an open-source, stateful, distributed application orchestration platform that allows you to build scalable and resilient applications. +It simplifies the development of complex, long-running workflows and helps you manage the state and execution of various processes within your application. +Temporal is designed to handle the challenges of building mission-critical, distributed systems by providing a powerful way to model, manage, and execute your business logic. + +- Stateful Workflows: +Temporal enables the development of stateful workflows that can run for an extended period, coordinating various tasks and activities. + +- Resilience: +It helps you build highly resilient applications by managing retries, timeouts, and error handling, ensuring that your workflows can withstand failures in a distributed environment. + +- Language Agnostic: +Temporal is language-agnostic, allowing you to write workflows in the programming language of your choice. + +- Durability: +It ensures the durability of your application state by persisting it in a reliable storage system, making it possible to recover and resume workflows even after system failures. + +- Scalability: +Temporal is built to scale horizontally and handle high loads, making it suitable for applications of all sizes, from small projects to large, enterprise-grade systems. + +## How does Temporal work +Temporal operates by decoupling the application's business logic from the execution environment. It does this through the following components and principles: + +- Workflows: +Workflows are long-running, stateful processes that encapsulate the application's business logic. +They can wait for events, make decisions, and coordinate various activities. Temporal ensures that workflows continue to execute reliably, even in the face of failures. + +- Activities: +Activities are individual units of work that the workflow can execute. They can be short-lived functions or services, and Temporal manages their execution and retries. + +- Temporal Server: +The Temporal Server is responsible for managing workflow and activity execution. It maintains a history of events for each workflow and ensures that they are executed correctly. + +- Durable State: +Temporal stores the durable state of workflows and activities in a persistent storage system, allowing it to recover and resume them even after system outages. + +- Workers: +Workers are application components that interact with the Temporal Server to execute workflows and activities. They listen for tasks, execute them, and report the results back to the server. + +- Execution Semantics: +Temporal provides guarantees about the execution of workflows, ensuring that they remain deterministic and predictable, even when executed across different environments or after failures. + +## Your first workflow +To create a simple "Hello, World!" program using Temporal in TypeScript, you need to set up a basic workflow and use the Temporal API to execute it. Here's how you can do it: +#### Setup Your TypeScript Project +Before you begin, make sure you have TypeScript installed. You can create a new TypeScript project using a tool like `npm` or `yarn`. First, create a new directory for your project, navigate to it in the terminal, and then initialize a new TypeScript project: + +```bash +mkdir temporal-hello-world +cd temporal-hello-world +npm init -y +npm install --save @temporalio/sdk +npm install --save typescript +``` +#### Create a TypeScript Workflow +Create a new TypeScript file, e.g., hello-world.ts, and write your Temporal workflow code in it. + +```typescript +import { Connection, Worker } from '@temporalio/sdk'; + +// Define your workflow function +async function helloWorld(): Promise { + console.log('Hello, World!'); +} + +// Create a Temporal Connection +const connection = new Connection(); + +// Create a Worker that listens for workflow tasks +const worker = new Worker(connection, 'your-namespace'); +worker.registerWorkflow('hello-world', helloWorld); + +// Start the worker +worker.run(); +``` + +In this code, we import the necessary Temporal SDK components, define a simple workflow function helloWorld that logs "Hello, World!", create a connection to Temporal, create a worker for your specific namespace, register the hello-world workflow, and start the worker. + +#### Compile and Execute the Workflow +To compile your TypeScript code and execute the workflow, you can use the TypeScript compiler (tsc) to transpile the TypeScript code into JavaScript and then execute the JavaScript code. Run the following commands: + +```bash +tsc hello-world.ts +node hello-world.js +``` + +This will compile your TypeScript code into JavaScript and run the workflow. You should see "Hello, World!" printed to the console. + +#### Start a Temporal Server +To run Temporal workflows, you'll need a Temporal server running. You can set up a local server using the Temporal Docker image or use a hosted service. Ensure you have Docker installed using installation instructions [here](https://www.docker.com/get-started/). + +To run a local Temporal server using Docker, you can execute the following command: + +```bash +docker run --rm -p 7233:7233 --name temporal-server --network host temporalio/temporal:latest +``` + +With this setup, you have created a simple "Hello, World!" Temporal workflow using TypeScript. You can expand on this by adding more complex workflow logic and interacting with external services or resources as needed. + + +## Additional Resources +- Read more about how temporal works behind the scenes [here](https://temporal.io/how-temporal-works). +- Additional documentaion can be found [here](https://docs.temporal.io/concepts/). +- Check out the developers guide for your prefered programming language, including [Go](https://docs.temporal.io/dev-guide/go), [Java](https://docs.temporal.io/dev-guide/java), [PHP](https://docs.temporal.io/dev-guide/php), [Python](https://docs.temporal.io/dev-guide/python) and [Typescript](https://docs.temporal.io/dev-guide/typescript) here. +- [This is a great video](https://www.youtube.com/watch?v=LliBP7YMGyA) on how a company like Netflix uses temporal to build thier systems. From f7eacb42e696b64e859da8aeb8f7bf31c290a626 Mon Sep 17 00:00:00 2001 From: Yasutakahi <113137606+Yasutakahi@users.noreply.github.com> Date: Mon, 13 Nov 2023 23:27:22 -0500 Subject: [PATCH 02/14] Create Nodemailer.md created a file for nodemailer --- Topics/Tech_Stacks/Nodemailer.md | 93 ++++++++++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 Topics/Tech_Stacks/Nodemailer.md diff --git a/Topics/Tech_Stacks/Nodemailer.md b/Topics/Tech_Stacks/Nodemailer.md new file mode 100644 index 000000000..781b62039 --- /dev/null +++ b/Topics/Tech_Stacks/Nodemailer.md @@ -0,0 +1,93 @@ +# Nodemailer + +## Table of contents +### [Introduction](#introduction-1) +### [Create a Transporter object](#create-a-transporter-object-1) +### [Create a MailOptions Object](#create-a-mailoptions-object-1) +### [Use the Transporter.sendMail method](#use-the-transportersendmail-method-1) + +## Introduction + +Nodemailer is a Node.js module that allows you to send emails from your server easily. You can use this Nodemailer however you like. For example communicating with others and notifying yourself if there is any problem. As the name suggests, Nodemailer is use in Node.js, so when you want to use Nodemailer to send mail, mnake sure to use Node.js and have Node.js ready with you. + +Before I start explaning how Nodemailer can be used, we have to install and import so we can use it. You can install nodemailer by the below command: + +``` +npm install nodemailer +``` +After you installed Nodemailer, make sure you import nodemailer so you can use it + +``` JavaScript +const nodemailer = require('nodemailer'); +``` + +[This link](https://www.freecodecamp.org/news/use-nodemailer-to-send-emails-from-your-node-js-server/) provides more practical and detailed mathod of installing necessary package and examples. + +## Create a Transporter object + +Now you are ready to use nodemailer! Using nodemailer involves three steps. Here, we explain first step which is creating a transporter object. This step is basically creating an object and setting information about basic information about a mail you are sneding including service you are using to send a mail, information about senders, and so on. The example codes are shown below: + +``` JavaScript +let transporter = nodemailer.createTransport({ + service: 'gmail', + auth: { + user: YOUR_MAIL_ADDRESS, + pass: YOUR_PASSWORD + } + }); +``` +Here, it uses gmail to send email. Information about the mail address that you want the email to sent from goes to auth as the code suggested. + +[This website](https://www.freecodecamp.org/news/use-nodemailer-to-send-emails-from-your-node-js-server/) gives further explanation about credential. It might be helpful when you are actually implementing and enconter any errors. + + +## Create a MailOptions Object: + +MailOptions object contains information about the contents of the mail that you want to send. The example code is shown below: + +``` JavaScript +let mailOptions = { + from: YOUR_EMAIL, + to: WHERE_EMAIL_IS_SENT_TO, + subject: 'Nodemailer Testing', + text: 'contents of your mail goes here' + }; +``` + +As the example code above shows, you can define the contents and subject can be defined here. There are some options for the text such as using HTML to format the text by adding html in mailOption like below: + +``` JavaScript +let mailOptions = { + from: YOUR_EMAIL, + to: WHERE_EMAIL_IS_SENT_TO, + subject: 'Nodemailer Testing', + text: 'contents of your mail goes here' + html: '

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 03/14] 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 6edb4fdcf4f618f873f60cff0717a81942fc6224 Mon Sep 17 00:00:00 2001 From: Raazia Hashim <67606070+hashimr1@users.noreply.github.com> Date: Sat, 18 Nov 2023 23:09:17 -0500 Subject: [PATCH 04/14] Update Temporal.md --- Topics/Tech_Stacks/Temporal.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/Temporal.md b/Topics/Tech_Stacks/Temporal.md index d6c28de75..74986302e 100644 --- a/Topics/Tech_Stacks/Temporal.md +++ b/Topics/Tech_Stacks/Temporal.md @@ -10,9 +10,10 @@ Temporal is an open-source, stateful, distributed application orchestration platform that allows you to build scalable and resilient applications. It simplifies the development of complex, long-running workflows and helps you manage the state and execution of various processes within your application. Temporal is designed to handle the challenges of building mission-critical, distributed systems by providing a powerful way to model, manage, and execute your business logic. +Temporal allows for parallel execution of tasks and activities, enabling efficient utilization of resources, built-in fault tolerance, ensuring that your business logic continues to execute reliably even in the face of failures or unexpected issues, and abstracts the complexities of managing distributed systems, allowing you to express your business logic as a series of workflows. - Stateful Workflows: -Temporal enables the development of stateful workflows that can run for an extended period, coordinating various tasks and activities. +Temporal enables the development of stateful workflows that can run for an extended period, coordinating various tasks and activities. In the context of Temporal, "stateful" refers to the ability of the platform to maintain and manage the state of a distributed application over time. Stateful applications, retain and manage the state of the system, allowing them to remember past events and continue from a specific point in the event sequence. - Resilience: It helps you build highly resilient applications by managing retries, timeouts, and error handling, ensuring that your workflows can withstand failures in a distributed environment. @@ -26,6 +27,8 @@ It ensures the durability of your application state by persisting it in a reliab - Scalability: Temporal is built to scale horizontally and handle high loads, making it suitable for applications of all sizes, from small projects to large, enterprise-grade systems. +Additionally, Temporal has an active open-source community, which can be beneficial for ongoing development, support, and the availability of additional tools and integrations, making it a unique choice for workflow engines on the market. + ## How does Temporal work Temporal operates by decoupling the application's business logic from the execution environment. It does this through the following components and principles: @@ -61,7 +64,7 @@ npm install --save @temporalio/sdk npm install --save typescript ``` #### Create a TypeScript Workflow -Create a new TypeScript file, e.g., hello-world.ts, and write your Temporal workflow code in it. +Create a new TypeScript file, e.g., hello-world.ts, and write your Temporal workflow code in it. Make sure to set up the project first! ```typescript import { Connection, Worker } from '@temporalio/sdk'; From d437d0d85e61d9cbe2b2b8d9453794cd484e93cc Mon Sep 17 00:00:00 2001 From: Charlie Tao Date: Mon, 20 Nov 2023 13:33:33 -0500 Subject: [PATCH 05/14] Added Bootstrap.md to Tech_stacks.md --- Topics/Tech_Stacks.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index 5c9431135..f59f534f7 100644 --- a/Topics/Tech_Stacks.md +++ b/Topics/Tech_Stacks.md @@ -10,6 +10,7 @@ ### [Angular Resources](./Tech_Stacks/Angular.md) ### [Learning PostgreSQL and psycopg2](./Tech_Stacks/PostgreSQL_psycopg2.md) ### [CSS](./Tech_Stacks/CSS.md) +### [Learning Bootstrap](./Tech_Stacks/Bootstrap.md) ### [Learning TypeScript](./Tech_Stacks/TypeScript.md) ### [Learning JavaScript](./Tech_Stacks/JavaScript.md) ### [Learning React Native](./Tech_Stacks/ReactNative.md) From 97beddbab61649e180473103ffd4bbeb438fb34e Mon Sep 17 00:00:00 2001 From: Yasutakahi <113137606+Yasutakahi@users.noreply.github.com> Date: Mon, 20 Nov 2023 14:47:52 -0500 Subject: [PATCH 06/14] Update Nodemailer.md --- Topics/Tech_Stacks/Nodemailer.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Topics/Tech_Stacks/Nodemailer.md b/Topics/Tech_Stacks/Nodemailer.md index 781b62039..c95969ce4 100644 --- a/Topics/Tech_Stacks/Nodemailer.md +++ b/Topics/Tech_Stacks/Nodemailer.md @@ -8,7 +8,7 @@ ## Introduction -Nodemailer is a Node.js module that allows you to send emails from your server easily. You can use this Nodemailer however you like. For example communicating with others and notifying yourself if there is any problem. As the name suggests, Nodemailer is use in Node.js, so when you want to use Nodemailer to send mail, mnake sure to use Node.js and have Node.js ready with you. +Nodemailer is a Node.js module that allows you to send emails from your server easily. You can use Nodemailer. For example, you can communicate with others or notify yourself via email. As the name suggests, Nodemailer is used in Node.js, so when you want to use Nodemailer to send mail, make sure to use Node.js and have Node.js ready with you. Before I start explaning how Nodemailer can be used, we have to install and import so we can use it. You can install nodemailer by the below command: @@ -21,11 +21,11 @@ After you installed Nodemailer, make sure you import nodemailer so you can use i const nodemailer = require('nodemailer'); ``` -[This link](https://www.freecodecamp.org/news/use-nodemailer-to-send-emails-from-your-node-js-server/) provides more practical and detailed mathod of installing necessary package and examples. +[This link](https://www.freecodecamp.org/news/use-nodemailer-to-send-emails-from-your-node-js-server/) provides a more practical and detailed method of installing the necessary packages, as well as nodemailer examples. ## Create a Transporter object -Now you are ready to use nodemailer! Using nodemailer involves three steps. Here, we explain first step which is creating a transporter object. This step is basically creating an object and setting information about basic information about a mail you are sneding including service you are using to send a mail, information about senders, and so on. The example codes are shown below: +Now you are ready to use nodemailer! Using nodemailer involves three steps. Here, we explain first step which is creating a transporter object. This step is basically creating an object and setting information about basic information about a mail you are sending, such as the service you are using to send a mail, information about senders, and so on. The example codes are shown below: ``` JavaScript let transporter = nodemailer.createTransport({ @@ -36,9 +36,9 @@ let transporter = nodemailer.createTransport({ } }); ``` -Here, it uses gmail to send email. Information about the mail address that you want the email to 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. -[This website](https://www.freecodecamp.org/news/use-nodemailer-to-send-emails-from-your-node-js-server/) gives further explanation about credential. It might be helpful when you are actually implementing and enconter any errors. +[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. ## Create a MailOptions Object: @@ -54,7 +54,7 @@ let mailOptions = { }; ``` -As the example code above shows, you can define the contents and subject can be defined here. There are some options for the text such as using HTML to format the text by adding html in mailOption like below: +As the example code above shows, you can define the contents and subject in this object. There are some options for the text such as using HTML to format the text by adding html in mailOption like below: ``` JavaScript let mailOptions = { @@ -62,13 +62,13 @@ let mailOptions = { to: WHERE_EMAIL_IS_SENT_TO, subject: 'Nodemailer Testing', text: 'contents of your mail goes here' - html: '

Welcome

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 Tao Date: Mon, 20 Nov 2023 15:47:59 -0500 Subject: [PATCH 07/14] Created Bootstrap.md --- Topics/Tech_Stacks/Bootstrap.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 Topics/Tech_Stacks/Bootstrap.md diff --git a/Topics/Tech_Stacks/Bootstrap.md b/Topics/Tech_Stacks/Bootstrap.md new file mode 100644 index 000000000..e69de29bb From c28e59c7a2ae1999ca433cb8a4c4868f56aa1a2c Mon Sep 17 00:00:00 2001 From: Charlie Tao Date: Mon, 20 Nov 2023 15:48:11 -0500 Subject: [PATCH 08/14] Wrote introduction and Bootstrap Basics --- Topics/Tech_Stacks/Bootstrap.md | 92 +++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) diff --git a/Topics/Tech_Stacks/Bootstrap.md b/Topics/Tech_Stacks/Bootstrap.md index e69de29bb..2f60b68bd 100644 --- a/Topics/Tech_Stacks/Bootstrap.md +++ b/Topics/Tech_Stacks/Bootstrap.md @@ -0,0 +1,92 @@ +# Learning Bootstrap, a CSS Framework + +## Table of contents +### [Introduction](#what-is-bootstrap?-1) +### [References](#references-and-resources-1) + +## Preface +Here you will learn the basics of how to incorporate Bootstrap into your website-building workflow. This should not serve as an in-depth guide, but rather one that should help you get your foot in the door to begin understanding and using Bootstrap components. Before you start, it is recommended that you have working knowledge of both HTML and CSS. This could be as little as a simple styled website. Although not required, it will be helpful in understanding why Bootstrap is such a widely-used and useful framework when working with CSS. At the end of this guide, you should be able to apply some simple Bootstrap components or formatting into your website. + +## What is Bootstrap? +Bootstrap is a CSS Framework that simplifies and standardizes much of the styling process. It does this by including much of the common styling choices as an optional pre-built class that can be attached to HTML elements, most commonly divs or spans. In a typical workflow, you would need to create the CSS for these class yourself in a .css file and import those styles. Over a large project, you might begin to realize that the styles can get messy and/or redundnant. Using Bootstrap's built-in styles would instead allow you to rely on their basic foundational stylistic building blocks, requiring less custom CSS from you. + +## Where to begin +The most extensive guide in getting started with Bootstrap is undoubtedly from the official documentation. Everything here will have its corresponding reference on [their website here](https://getbootstrap.com/docs/5.3/getting-started/introduction/). + +For starters, you will need to add Bootstrap to your website's HTML files. Following the guide in the link above: + +1. For responsive design, insert `` inside your ` ` element. +2. For Bootstrap's CSS, insert `` inside your ` ` element. +3. For Bootstrap's JavaScript, insert `` inside your ` ` element, at the bottom. This allows the use of certain Bootstrap elements that rely on JavaScript. + +For the sake of this tutorial, insert all the above and it should look something like: +``` + + + + + + <-- Reponsive design --> + + + Bootstrap demo + + <-- Bootstrap CSS --> + + + + +

Hello, 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 09/14] 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 Date: Mon, 20 Nov 2023 17:16:21 -0500 Subject: [PATCH 10/14] Bootstrap.md Cards and Grids --- Topics/Tech_Stacks/Bootstrap.md | 89 +++++++++++++++++++++++++++++---- 1 file changed, 80 insertions(+), 9 deletions(-) diff --git a/Topics/Tech_Stacks/Bootstrap.md b/Topics/Tech_Stacks/Bootstrap.md index 2f60b68bd..7b083ce23 100644 --- a/Topics/Tech_Stacks/Bootstrap.md +++ b/Topics/Tech_Stacks/Bootstrap.md @@ -2,7 +2,10 @@ ## Table of contents ### [Introduction](#what-is-bootstrap?-1) -### [References](#references-and-resources-1) +### [What is Bootstrap](#what-is-bootstrap-1) +### [Where to begin](#where-to-begin-1) +### [Bootstrap Basics](#bootstrap-basics-1) +### [References](#references-1) ## Preface Here you will learn the basics of how to incorporate Bootstrap into your website-building workflow. This should not serve as an in-depth guide, but rather one that should help you get your foot in the door to begin understanding and using Bootstrap components. Before you start, it is recommended that you have working knowledge of both HTML and CSS. This could be as little as a simple styled website. Although not required, it will be helpful in understanding why Bootstrap is such a widely-used and useful framework when working with CSS. At the end of this guide, you should be able to apply some simple Bootstrap components or formatting into your website. @@ -20,7 +23,7 @@ For starters, you will need to add Bootstrap to your website's HTML files. Follo 3. For Bootstrap's JavaScript, insert `` inside your ` ` element, at the bottom. This allows the use of certain Bootstrap elements that rely on JavaScript. For the sake of this tutorial, insert all the above and it should look something like: -``` +```html @@ -48,7 +51,7 @@ For the sake of this tutorial, insert all the above and it should look something 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/) -``` +```html
@@ -58,7 +61,7 @@ At the heart of Bootstrap is the inclusion of Bootstrap classes into your HTML e
``` -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: +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. Add these classes to any element, and watch the spacing change! The specific selections can be found in the documentation, but a summary is: ``` # Types @@ -74,19 +77,87 @@ 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/) +Cards are one of the best places to start to understand how Bootstrap compoments work. They are a simple way to contain a collection of information, and work like their name, as a "card". In essence, they are a rectangular container with a slight border radius to round out the corners that can contain things like an image, a header, a body, and more. Since they do not have margins, you can utilize and append the simple spacing shown in the [previous section](#bootstrap-basics-1). + +When starting out with Bootstrap, it is helpful to play around with template code such as the one below. Let's start by breaking down the example code in the reference: + + +image + +```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 +
+
+``` + +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 +
+
+
+ +
+
+ +
+
+
+ ``` + +- **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 Date: Mon, 20 Nov 2023 19:20:09 -0500 Subject: [PATCH 11/14] Mention other framework and CSS / Bootstrap guide --- Topics/Tech_Stacks/Bootstrap.md | 17 +++++++---------- Topics/Tech_Stacks/CSS.md | 2 +- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/Topics/Tech_Stacks/Bootstrap.md b/Topics/Tech_Stacks/Bootstrap.md index 7b083ce23..af43dcc64 100644 --- a/Topics/Tech_Stacks/Bootstrap.md +++ b/Topics/Tech_Stacks/Bootstrap.md @@ -5,10 +5,10 @@ ### [What is Bootstrap](#what-is-bootstrap-1) ### [Where to begin](#where-to-begin-1) ### [Bootstrap Basics](#bootstrap-basics-1) -### [References](#references-1) +### [References](#references-and-links-1) ## Preface -Here you will learn the basics of how to incorporate Bootstrap into your website-building workflow. This should not serve as an in-depth guide, but rather one that should help you get your foot in the door to begin understanding and using Bootstrap components. Before you start, it is recommended that you have working knowledge of both HTML and CSS. This could be as little as a simple styled website. Although not required, it will be helpful in understanding why Bootstrap is such a widely-used and useful framework when working with CSS. At the end of this guide, you should be able to apply some simple Bootstrap components or formatting into your website. +Here you will learn the basics of how to incorporate Bootstrap into your website-building workflow. This should not serve as an in-depth guide, but rather one that should help you get your foot in the door to begin understanding and using Bootstrap components. Before you start, it is recommended that you have working knowledge of both HTML and CSS. This could be as little as a simple styled website. You can get started at [this CSS guide](./CSS.md), but it is suggested to have more practice with CSS. Although not required, it will be helpful in understanding why Bootstrap is such a widely-used and useful framework when working with CSS. At the end of this guide, you should be able to apply some simple Bootstrap components or formatting into your website. ## What is Bootstrap? Bootstrap is a CSS Framework that simplifies and standardizes much of the styling process. It does this by including much of the common styling choices as an optional pre-built class that can be attached to HTML elements, most commonly divs or spans. In a typical workflow, you would need to create the CSS for these class yourself in a .css file and import those styles. Over a large project, you might begin to realize that the styles can get messy and/or redundnant. Using Bootstrap's built-in styles would instead allow you to rely on their basic foundational stylistic building blocks, requiring less custom CSS from you. @@ -29,19 +29,19 @@ For the sake of this tutorial, insert all the above and it should look something - <-- Reponsive design --> + Bootstrap demo - <-- Bootstrap CSS --> +

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 Date: Mon, 20 Nov 2023 19:20:50 -0500 Subject: [PATCH 12/14] Added more references and links --- Topics/Tech_Stacks/Bootstrap.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Topics/Tech_Stacks/Bootstrap.md b/Topics/Tech_Stacks/Bootstrap.md index af43dcc64..c749ed53d 100644 --- a/Topics/Tech_Stacks/Bootstrap.md +++ b/Topics/Tech_Stacks/Bootstrap.md @@ -158,3 +158,9 @@ Mastering the basics of the Bootstrap Grid System empowers you to design respons 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 +[Our Wiki CSS Guide](./CSS.md) +[Bootstrap Documentation and Start](https://getbootstrap.com/docs/5.3/getting-started/introduction/) +[Bootstrap Spacing (Margins, Padding, and more)](https://getbootstrap.com/docs/5.3/utilities/spacing/) +[Bootstrap Cards Resource](https://getbootstrap.com/docs/5.3/components/card/) +[Bootstrap Grid Resource](https://getbootstrap.com/docs/5.3/layout/grid/) +[React Bootstrap](https://react-bootstrap.netlify.app/docs/getting-started/introduction) \ No newline at end of file From 0cd819bb8eb2f314fb18e3be4e6b0a3e89e3c5ea Mon Sep 17 00:00:00 2001 From: Yasutakahi <113137606+Yasutakahi@users.noreply.github.com> Date: Mon, 20 Nov 2023 19:47:24 -0500 Subject: [PATCH 13/14] fixing some small mistakes finished some typos and mistakes --- 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 15a226286..2260a6f73 100644 --- a/Topics/Tech_Stacks/Nodemailer.md +++ b/Topics/Tech_Stacks/Nodemailer.md @@ -8,7 +8,7 @@ ## Introduction -Nodemailer is a Node.js module that allows you to send emails from your server easily. You can use Nodemailer. For example, you can communicate with others or notify yourself via email. As the name suggests, Nodemailer is used in Node.js, so when you want to use Nodemailer to send mail, make sure to use Node.js and have Node.js ready with you. +Nodemailer is a Node.js module that allows you to send emails from your server easily. There are many ways to use nodemailer effectively. For example, you can communicate with others or notify yourself via email. As the name suggests, Nodemailer is used in Node.js, so when you want to use Nodemailer to send mail, make sure to use Node.js and have Node.js ready with you. Before I start explaning how Nodemailer can be used, we have to install and import so we can use it. You can install nodemailer by the below command: @@ -68,7 +68,7 @@ let mailOptions = { ## Use the Transporter.sendMail method -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. +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 handle 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) { From 4656b09b47464026d6fdcacc59c883a9784e72e8 Mon Sep 17 00:00:00 2001 From: Raazia Hashim <67606070+hashimr1@users.noreply.github.com> Date: Tue, 21 Nov 2023 12:04:56 -0500 Subject: [PATCH 14/14] Update Tech_Stacks.md --- Topics/Tech_Stacks.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index dfd16e46e..f67330089 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) +### [Temporal For Workflow Orchestration](./Tech_Stacks/Temporal.md)