Skip to content

Commit

Permalink
Merge branch 'learning-software-engineering:main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@NonLan
NonLan authored Nov 21, 2023
2 parents eca836a + a2dc291 commit ea9b1af
Show file tree
Hide file tree
Showing 5 changed files with 379 additions and 1 deletion.
3 changes: 3 additions & 0 deletions Topics/Tech_Stacks.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@
### [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)
### [Learning Nodemailer](./Tech_Stacks/Nodemailer.md)
### [React Components Guide](./Tech_Stacks/React_Components.md)
### [Temporal For Workflow Orchestration](./Tech_Stacks/Temporal.md)
166 changes: 166 additions & 0 deletions Topics/Tech_Stacks/Bootstrap.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,166 @@
# Learning Bootstrap, a CSS Framework

## Table of contents
### [Introduction](#what-is-bootstrap?-1)
### [What is Bootstrap](#what-is-bootstrap-1)
### [Where to begin](#where-to-begin-1)
### [Bootstrap Basics](#bootstrap-basics-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. 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.

## 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 `<meta name="viewport" content="width=device-width, initial-scale=1">` inside your `<head> </head>` element.
2. For Bootstrap's CSS, insert `<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">` inside your `<head> </head>` element.
3. For Bootstrap's JavaScript, insert `<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>` inside your `<body> </body>` 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">

<!--Reponsive design-->
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Bootstrap demo</title>

<!--Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

</head>
<body>
<h1>Hello, world!</h1>

<!--Bootstrap JavaScript-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
```

## 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/)
```html
<div class="mt-0 ms-1 me-1 mb-0"></div>
<div class="m-1"></div>
<div class="mx-auto my-5"></div>

<div class="pt-4 ps-2 pe-3 pb-0"></div>
<div class="p-auto"></div>
<div class="px-1 py-5"></div>
```

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
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
```

### 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:


<img width="304" alt="image" src="https://github.com/learning-software-engineering/learning-software-engineering.github.io/assets/88257137/d3dc7fd3-6269-487f-b55d-5998614c6a8b">

```html
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
```

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
<div class="container">
<div class="row">
<div class="col-12 col-sm-6">
<!-- Content for the first column -->
</div>
<div class="col-12 col-sm-6">
<!-- Content for the second column -->
</div>
</div>
</div>
```

- **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
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<!-- Content for the first column -->
</div>
<div class="col-12 col-md-4">
<!-- Content for the second column -->
</div>
<div class="col-12 col-md-4">
<!-- Content for the third column -->
</div>
</div>
</div>
```

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). 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)
2 changes: 1 addition & 1 deletion Topics/Tech_Stacks/CSS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
93 changes: 93 additions & 0 deletions Topics/Tech_Stacks/Nodemailer.md
View file
Original file line number Diff line number Diff line change
@@ -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. 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:

```
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 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 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({
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 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.


## 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 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 = {
from: YOUR_EMAIL,
to: WHERE_EMAIL_IS_SENT_TO,
subject: 'Nodemailer Testing',
text: 'contents of your mail goes here'
html: '<a href="https://google.com" title="Lets go to Google!">'
};
```

## 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 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) {
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. 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.

## Useful Links
https://mailtrap.io/blog/sending-emails-with-nodemailer/


https://www.knowledgehut.com/blog/web-development/nodemailer-module-nodejs


These websites have full tutorials from setting up to implementing which can be useful!
Loading

0 comments on commit ea9b1af

Please sign in to comment.