From 22f4454c2860d089fb111ba3137b560b16570832 Mon Sep 17 00:00:00 2001 From: Azalea <22280294+hykilpikonna@users.noreply.github.com> Date: Sun, 22 Oct 2023 18:40:58 -0400 Subject: [PATCH 001/118] [+] More comprehensive docker guide --- Topics/Development_Process/Docker.md | 182 +++++++++++++++++++++++++-- 1 file changed, 169 insertions(+), 13 deletions(-) diff --git a/Topics/Development_Process/Docker.md b/Topics/Development_Process/Docker.md index 5eaa1487a..9b86bf859 100644 --- a/Topics/Development_Process/Docker.md +++ b/Topics/Development_Process/Docker.md @@ -13,27 +13,48 @@ This article will help readers understand what Docker is, why it is used and provide resources on how to start using it. Docker is used by developers for many reasons, however, the most common reasons are for building, deploying and sharing an application quickly. Docker packages your application into something that's called a [container](#docker-terminology-1). This [container](#docker-terminology-1) is OS-agnostic meaning that developers on Mac, Windows and Linux can share their code without any worry of conflicts. Here's [Amazon's Intro to Docker](https://aws.amazon.com/docker/#:~:text=Docker%20is%20a%20software%20platform,tools%2C%20code%2C%20and%20runtime.) if you want to learn more. ----- - ## Installation -To start using Docker you will have to download Docker Engine. This is automatically downloaded alongside Docker Desktop (A Graphical User Interface for Docker) which I **strongly** recommend for beginners. -[Download Docker Desktop here](https://www.docker.com/get-started/) - +To start using Docker you will have to download Docker Engine. This is automatically downloaded alongside Docker Desktop (A Graphical User Interface for Docker) which I **strongly** recommend for Windows and macOS users. +[Download Docker here](https://www.docker.com/get-started/) For detailed installation instructions based on specific operating systems click here: [Mac](https://docs.docker.com/desktop/install/mac-install/), [Windows](https://docs.docker.com/desktop/install/windows-install/), [Linux](https://docs.docker.com/desktop/install/linux-install/) ----- +## Creating Dockerfiles -## Getting Started - -Once you've installed Docker, to see it in action you can follow any one of these quick tutorials: +Once you've installed Docker, to see it in action you can follow any one of these quick tutorials on creating a Dockerfile that builds a docker image: - [Dockerizing a React App](https://mherman.org/blog/dockerizing-a-react-app/) (Simple and quick tutorial for containerizing a React App, contains explanations when needed. I recommend this if you want to quickly get something running plus see what the next steps look like) - [Dockerize a Flask App](https://www.freecodecamp.org/news/how-to-dockerize-a-flask-app/) (Super detailed step-by-step explanations tutorial for containerizing a flask app. I recommend this if you want to understand the process in detail) - [Docker's official tutorial for containerizing an application](https://docs.docker.com/get-started/02_our_app/) (Can't go wrong with the official tutorial.) ----- +### Automatic Dockerfile Generation + +Since Docker is widely used, there are a lot of Dockerfile-related knowledge in ChatGPT's training data, and the AI is capable of generating Dockerfiles for most software architectrues. If you want to easily containerize your app, you can use OpenAI's ChatGPT 3.5-turbo to generate the Dockerfile for you. To do this, you first need to gather a tree of your project directory for ChatGPT to better understand your project architecture (On Linux/macOS, run `tree -I node_modules` in your project directory). Then, you can ask ChatGPT using something similar to the following prompt: + +``` +Please write a Dockerfile for my project. I use the command `python3 -m projectname` to start my app. My project file structure is specified by the tree below. Please make sure that the Dockerfile is optimized with best practices from the industry and the image size is as small as possible. + +. +├── README.md +├── backend +│   ├── __init__.py +│   ├── database +│   │   ├── __init__.py +│   ├── flow.py +│   ├── rapidpro.py +│   └── user.py +├── poetry.lock +├── pyproject.toml +└── tests + ├── RapidProAPI_test.py + ├── __init__.py + └── flow_test.py + +I have the following runtime dependencies that might require APT packages: psycopg2 +``` + +This method will generate something that's much more optimized than any beginner can write. For example, it will clear APT cache for dependency installation, and use separate builder and runtime images to reduce image size, which involves understanding the intricate Docker image layering mechanism. You can learn a lot from reading and understanding the generated Dockerfile. ## Next Steps @@ -41,14 +62,149 @@ Congratulations! you have successfully learnt how to Dockerize an app. In the pr Now you might want a React Container to communicate with a containerized Flask API. How do we do this? This is where [Docker Compose](https://docs.docker.com/compose/) comes in. It allows you to define, and control multiple containers at once. Your next goal should be defining a `docker-compose.yml` for your project and see if you can get multiple services/containers to successfully communicate. ----- +## Free Automatic Builds + +You can use various CI (Continuous Integration) tools to automatically build, push, and deploy your Docker Images. While the official [Docker Hub](https://hub.docker.com/) is a great place to store your images for free, the automated builds are only available for paid accounts. Here, we will guide you on how to use [GitHub Actions](https://github.com/features/actions) to automatically build and push your Docker Images to Docker Hub. + +### Prerequisites + +- A [Docker Hub](https://hub.docker.com/) account +- A [GitHub](https://github.com) account and a repository +- A Dockerfile + +### Steps + +#### Creating Access Token + +1. First, you need to create a Docker Hub token to allow GitHub Actions to push to your Docker Hub repository. To do this, go to your [Docker Hub Account Settings](https://hub.docker.com/settings/security) and click on "New Access Token". Give it a name and click on "Create". (Don't close this page yet, you will need it later) +2. Open your GitHub repository and go to the "Settings" tab. Click on "Secrets" and then "New repository secret". Give it a name (e.g. `DOCKERHUB_TOKEN`) and paste the token you just created in the previous step. Click on "Add secret". +3. Do the same for `DOCKERHUB_USERNAME` + +#### Creating Workflow + +1. In your GitHub repository, create a new folder called `.github/workflows` +2. Paste the following file under `.github/workflows/docker.yml` (Make sure to replace `YOUR_IMAGE_NAME_HERE` with your image name) +3. Commit and push your changes +4. Profit! + +``` +name: Build and Push Docker Image + +on: + push: + branches: + - main # Change this to your default branch + +jobs: + build: + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@v4 + - uses: docker/setup-buildx-action@v3 + + - name: Login to DockerHub + uses: docker/login-action@v3 + with: + username: ${{ secrets.DOCKERHUB_USERNAME }} + password: ${{ secrets.DOCKERHUB_TOKEN }} + + - name: Build and push Docker image + uses: docker/build-push-action@v5 + with: + push: true + tags: ${{ secrets.DOCKERHUB_USERNAME }}/YOUR_IMAGE_NAME_HERE:latest +``` + +Note: This workflow will automatically build and push on each commit to the `main` branch. This is ideal for development, assuming that your main branch is the staging branch. However, you might want to change it or create a separate workflow with a separate image name to only build on tags (releases) for production so that the deployment is more controlled. + +## Deploying and Automatic Updates + +Now that you have a Docker Image on Docker Hub, you can deploy it to a server. There are many ways and platforms that allows you to do this. You can rent a minimal Linux VPS server or a Docker server for $4-6 per month on various platforms. One platform I recommend is DigitalOcean, as they have a very intuitive web interface and very good [documentation](https://www.digitalocean.com/docs/) for beginners. you can click the referral link (icon) below to get a free $200 credit for 60 days, what a deal! + +[![DigitalOcean Referral Badge](https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%201.svg)](https://www.digitalocean.com/?refcode=86dbfd5d0266&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge) + + + +Once you have a Linux server, the easiest way to deploy a docker image is to use [Docker Compose](https://docs.docker.com/compose/). You can define your services in a `docker-compose.yml` file and then run `docker-compose up -d` to start the containers in the background. + +### Deploying with Docker Compose on DigitalOcean + +1. Install Docker Core on your server [(official guide for Ubuntu)](https://docs.docker.com/engine/install/ubuntu) +2. Install docker-compose plugin [(official guide)](https://docs.docker.com/compose/install/linux/#install-using-the-repository). +3. Create a `docker-compose.yml` file on your server and paste the following (Make sure to replace `YOUR_IMAGE_NAME_HERE` with your image name) +4. Run `docker-compose up -d` to start the containers in the background + +```yml +version: "3.9" + +services: + app: + image: YOUR_IMAGE_NAME_HERE:latest + restart: always + ports: + - 80:80 # Expose any ports you need +``` + +If you need a database, you can add it to the composition as well! For example, if you want to use PostgreSQL, you can add the following to your `docker-compose.yml` file: + +```yml +version: "3.9" + +services: + app: + image: YOUR_IMAGE_NAME_HERE:latest + restart: always + ports: + - 80:80 # Expose any ports you need + depends_on: + - db + environment: # In your program, use these environment variables to connect to the database + DB_HOST: db + DB_PORT: 5432 + DB_USER: postgres + DB_PASSWORD: postgres + DB_NAME: postgres + + db: + image: postgres:13 + restart: always + environment: + POSTGRES_USER: postgres + POSTGRES_PASSWORD: postgres + POSTGRES_DB: postgres +``` + +Since the database is contained within the docker compose network, it is perfectly secure to use the default `postgres` user and password, since it cannot be accessed through the wider internet. However, if you want to expose your database (which is not recommended), you can add the port `5432:5432` to the `db` service and use a stronger password. + +If you are using any other database, you can find the docker image on [Docker Hub](https://hub.docker.com/search?q=&type=image&category=Database) and follow the instructions there. Please be sure to read the docker container's documentation carefully! Most questions reguarding database images can be answered by reading the documentation. + +### Automatic Updates + +To automatically update your deployment when you push a new image to Docker Hub, you can use [Watchtower](https://github.com/containrrr/watchtower). It is a simple container that monitors your other containers and updates them when a new image is available. You can add it to your `docker-compose.yml` file like this: + +```yml +services: + # ... + + watchtower: + image: containrrr/watchtower + restart: always + volumes: + - /var/run/docker.sock:/var/run/docker.sock + command: --interval 30 +``` + +This will check for updates every 30 seconds. You can change this to whatever you want. You can also add a `--cleanup` flag to remove old images after updating. + +### Advanced deployment + +If you have multiple services and want to deploy them on the same server with different domain names, or setup SSL to make your services secure from MITM (man-in-the-middle) attacks, you can use [Traefik](https://doc.traefik.io/) or [Nginx](https://www.nginx.com/) as a reverse proxy. This is a more advanced topic and is out of the scope of this article. However, you can find many tutorials online on how to do this, such as this DigitalOcean article: [How To Use Traefik v2 as a Reverse Proxy for Docker Containers on Ubuntu 20.04](https://www.digitalocean.com/community/tutorials/how-to-use-traefik-v2-as-a-reverse-proxy-for-docker-containers-on-ubuntu-20-04) ## Other Resources Here's a [cheat sheet](https://docs.docker.com/get-started/docker_cheatsheet.pdf) of all useful Docker CLI commands and here's a [cheat sheet](https://devhints.io/docker-compose) for docker compose which should help you in your future endeavors. All the best! ----- - ## Docker Terminology - **Container**: A package of code bundled by Docker that runs as an isolated process from your machine. The package of code can be pretty much anything, a single python file, an API, a full stack web application etc. A container is also referred to as a **containerized application**. From 72675558b6ad0403f4b88cf22e3614941c11953e Mon Sep 17 00:00:00 2001 From: Azalea Date: Sun, 22 Oct 2023 15:52:37 -0700 Subject: [PATCH 002/118] [F] Fix highlighting --- Topics/Development_Process/Docker.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/Development_Process/Docker.md b/Topics/Development_Process/Docker.md index 9b86bf859..2f78a2cac 100644 --- a/Topics/Development_Process/Docker.md +++ b/Topics/Development_Process/Docker.md @@ -87,7 +87,7 @@ You can use various CI (Continuous Integration) tools to automatically build, pu 3. Commit and push your changes 4. Profit! -``` +```yml name: Build and Push Docker Image on: @@ -210,4 +210,4 @@ Here's a [cheat sheet](https://docs.docker.com/get-started/docker_cheatsheet.pdf - **Image**: template with a set of instructions for creating a container. *(most of the times these are pre-built so don't worry too much about making one)* -Explained in Docker's own words [here](https://docs.docker.com/get-started/) \ No newline at end of file +Explained in Docker's own words [here](https://docs.docker.com/get-started/) From 52dacbb6594e666832c88283ccf75524b0b13904 Mon Sep 17 00:00:00 2001 From: Eddy Date: Wed, 8 Nov 2023 23:54:10 -0500 Subject: [PATCH 003/118] react-pdf.md --- Topics/Tech_Stacks/react-pdf.md | 94 +++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 Topics/Tech_Stacks/react-pdf.md diff --git a/Topics/Tech_Stacks/react-pdf.md b/Topics/Tech_Stacks/react-pdf.md new file mode 100644 index 000000000..49f2c0c30 --- /dev/null +++ b/Topics/Tech_Stacks/react-pdf.md @@ -0,0 +1,94 @@ +# Using react-pdf library + +### Introduction + +react-pdf is a npm package that allows you to display a customized pdf on your react website. This page will give you an introduction to install and display a simple pdf and also give you an idea of what you can expect from using this package. + +offical document: https://react-pdf.org/ + +### Install + +You can only use this library in a react project, so you need to install node, npm, and react first, you can read more in here: https://learning-software-engineering.github.io/Topics/Tech_Stacks/React.html + +To install this package, do `npm install @react-pdf/renderer --save` + +### component structure + +after installing, you can import the provided components + +``` +import React from 'react'; +import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer'; +``` + +a pdf component looks like this + +``` +const styles = StyleSheet.create({ + page: { + flexDirection: 'row', + backgroundColor: '#E4E4E4' + }, + section: { + margin: 10, + padding: 10, + flexGrow: 1 + } +}); + +const MyDocument = () => ( + + + + Section #1 + + + Section #2 + + + +); +``` + +we can display this document in a pdf viewer + +``` +import React from 'react'; +import ReactDOM from 'react-dom'; +import { PDFViewer } from '@react-pdf/renderer'; + +const App = () => ( + + + +); +``` + +Note that this library has it's own style API, traditional CSS does not work inside the `MyDocument` component, you need to use the `StyleSheet` component provided by the library, which is very similar to the original CSS. + +### Tags + +`` is the most outer tag, it is the wrapper tag for a pdf document. + +`` tag is the wrapper for one page in the pdf. + +`` tag is a division inside a page and can be viewed as the `
` equivalent in html. + +`` + +This package provides a lot of customizations: + +- background color: ` Date: Thu, 9 Nov 2023 16:45:03 -0400 Subject: [PATCH 004/118] Create StripeAPI.md File Added in the learning StripeAPI in JS environment topic file --- Topics/Tech_Stacks/StripeAPI.md | 90 +++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 Topics/Tech_Stacks/StripeAPI.md diff --git a/Topics/Tech_Stacks/StripeAPI.md b/Topics/Tech_Stacks/StripeAPI.md new file mode 100644 index 000000000..062ae1180 --- /dev/null +++ b/Topics/Tech_Stacks/StripeAPI.md @@ -0,0 +1,90 @@ +# Setting Up Stripe API in a JS Environment + +## 1. Introduction to Stripe +- Watch the [Introduction Video](https://www.youtube.com/watch?v=7edR32QVp_A). +- Explore the [Stripe API documentation](https://stripe.com/docs/development/get-started). + +## 2. Create a Stripe Account +- [Sign up](https://stripe.com/docs/development/get-started) for a Stripe account. + +## 3. Obtain API Keys +- In your [Stripe Dashboard](https://dashboard.stripe.com/), go to "Developers" > "API keys" to find your keys. + +## 4. Install Stripe Library +- In your Node.js project, install the Stripe npm package: + ```bash + npm install stripe + ``` + +## 5. Implement Payment Integration (React.js) +- Install the Stripe React library: + ```bash + npm install @stripe/react-stripe-js @stripe/stripe-js + ``` +- Follow the guide on [Accept a payment](https://stripe.com/docs/development/quickstart) for React. + +## 6. Handle Webhook Events (Node.js) +- Create a server-side route using Express and the Stripe package to handle webhook events. + +## 7. Implement Subscription Logic (If Needed) +- Follow the [Stripe Subscriptions guide](https://stripe.com/docs/billing/subscriptions/overview). + +## 8. Secure Your Integration +- Ensure your React.js app uses HTTPS. +- Keep API keys secure; never expose them on the client side. + +## 9. Test Transactions +- Simulate transactions using [Stripe test card numbers](https://stripe.com/docs/testing). + +## 10. Documentation +- Document your integration, including setup instructions, API usage, and error handling. + +## 11. Set Up Stripe CLI +- Install the [Stripe CLI](https://stripe.com/docs/development/quickstart#set-up-stripe-cli). + +## 12. Authenticate Stripe CLI +- Run `stripe login` in the command line and follow the authentication process. + +## 13. Confirm Setup +- Use the Stripe CLI to create a sample product and price to confirm setup. + +## 14. Install Node.js SDK +- Initialize Node.js in your project and install the Stripe Node.js server-side SDK: + ```bash + npm init + npm install stripe --save + ``` + +## 15. Run First SDK Request +- Create a subscription product and attach a price using the Node.js SDK. Save the following code in a file, e.g., `create_price.js`: + ```javascript + const stripe = require('stripe')('sk_test_Hrs6SAopgFPF0bZXSN3f6ELN'); + + stripe.products.create({ + name: 'Starter Subscription', + description: '$12/Month subscription', + }).then(product => { + stripe.prices.create({ + unit_amount: 1200, + currency: 'usd', + recurring: { + interval: 'month', + }, + product: product.id, + }).then(price => { + console.log('Success! Product ID: ' + product.id); + console.log('Success! Price ID: ' + price.id); + }); + }); + ``` +- Run the following command: + ```bash + node create_price.js + ``` +- Save the product and price identifiers for future use. + +## 16. Save Identifiers +- Save identifiers generated during setup for future use. + +## 17. Explore Further +- Refer to the official [Stripe documentation](https://stripe.com/docs) for in-depth information. From 2135028a1290583891715c03633f84c22a96d1e5 Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 15:55:53 -0500 Subject: [PATCH 005/118] Create AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) create mode 100644 Topics/User_Experience/AB_Testing.md diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md new file mode 100644 index 000000000..8ae63443a --- /dev/null +++ b/Topics/User_Experience/AB_Testing.md @@ -0,0 +1,25 @@ +##**Introduction:** +A/B testing is a research method used to compare two versions of a web page or mobile app to determine which variation of the UI results in better performance. It allows individuals and companies to optimize user experience and make improvements to their application. + +##**Steps/How To:** +**Create Variation:** Create two versions of the applications UI to run the experiment on, whether it be changing font, colors, or re-designing the whole page. +- The original page is known as the control. +- The altered page is known as the variation. +**Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version. +**Collect Data:** Record and measure different metrics such as user session duration or other performance metrics related to the application. +**Analyze Results:** Based on the results, determine which version improves performance and deploy the winning variation. The experiment can be repeated to make further improvements. + +##**Types of A/B Testing:** +**Split URL Testing:** +- Split URL testing is a variation of A/B testing where two different web page urls are used, rather than running the experiment on the same url. Used for testing completely new page designs. +**Multivariate Testing:** +- Multivariate testing tests various changes to different page elements simultaneously to analyze which combinations perform the best. Can be used to save time rather than performing multiple A/B experiments. +**Multi-Page Testing:** +- Multi-Page testing tests changes to an element on the web page over multiple pages within the website. Allows for a consistent set of pages when testing variation with control. + +##**Benefits of A/B Testing:** +- Optimizes user experience which allows you to create a more effective application. +- Can provide insights into user behavior which can help with product development. +- Quick and efficient way to test UI changes. + +##**Additional Resources:** https://vwo.com/ab-testing/ From 15382299c717f42db2597edb0c56e63bc4443f4d Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 15:57:22 -0500 Subject: [PATCH 006/118] Update AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md index 8ae63443a..bbc1d378b 100644 --- a/Topics/User_Experience/AB_Testing.md +++ b/Topics/User_Experience/AB_Testing.md @@ -1,7 +1,9 @@ -##**Introduction:** +# A/B Testing + +## **Introduction:** A/B testing is a research method used to compare two versions of a web page or mobile app to determine which variation of the UI results in better performance. It allows individuals and companies to optimize user experience and make improvements to their application. -##**Steps/How To:** +## **Steps/How To:** **Create Variation:** Create two versions of the applications UI to run the experiment on, whether it be changing font, colors, or re-designing the whole page. - The original page is known as the control. - The altered page is known as the variation. @@ -9,7 +11,7 @@ A/B testing is a research method used to compare two versions of a web page or m **Collect Data:** Record and measure different metrics such as user session duration or other performance metrics related to the application. **Analyze Results:** Based on the results, determine which version improves performance and deploy the winning variation. The experiment can be repeated to make further improvements. -##**Types of A/B Testing:** +## **Types of A/B Testing:** **Split URL Testing:** - Split URL testing is a variation of A/B testing where two different web page urls are used, rather than running the experiment on the same url. Used for testing completely new page designs. **Multivariate Testing:** @@ -17,9 +19,9 @@ A/B testing is a research method used to compare two versions of a web page or m **Multi-Page Testing:** - Multi-Page testing tests changes to an element on the web page over multiple pages within the website. Allows for a consistent set of pages when testing variation with control. -##**Benefits of A/B Testing:** +## **Benefits of A/B Testing:** - Optimizes user experience which allows you to create a more effective application. - Can provide insights into user behavior which can help with product development. - Quick and efficient way to test UI changes. -##**Additional Resources:** https://vwo.com/ab-testing/ +## **Additional Resources:** https://vwo.com/ab-testing/ From bac5b35d3b11cbf4eb7358bb201579ba4a5613c7 Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 15:57:46 -0500 Subject: [PATCH 007/118] Update AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md index bbc1d378b..998cef983 100644 --- a/Topics/User_Experience/AB_Testing.md +++ b/Topics/User_Experience/AB_Testing.md @@ -24,4 +24,5 @@ A/B testing is a research method used to compare two versions of a web page or m - Can provide insights into user behavior which can help with product development. - Quick and efficient way to test UI changes. -## **Additional Resources:** https://vwo.com/ab-testing/ +## **Additional Resources:** +https://vwo.com/ab-testing/ From c8e107c806799a70318ca591b427f00c4c251ffc Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 15:59:31 -0500 Subject: [PATCH 008/118] Update User_Experience.md --- Topics/User_Experience.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Topics/User_Experience.md b/Topics/User_Experience.md index 6ad4f96c9..c4433747d 100644 --- a/Topics/User_Experience.md +++ b/Topics/User_Experience.md @@ -27,6 +27,9 @@ ___Responsive Design___ ___Nielsen's 10 Usability Heuristics___ - [Usability Heuristics](./User_Experience/Usability_Heuristics.md) +___A/B Testing to Optimize UI___ +- [A/B Testing](./User_Experience/AB_Testing.md) + ### Accessibility Features of User Experience There are some things that have become a crucial part in making a software: Universal Design Principles. From 34047720f5e880622762ad8473eaedc24fe18bd6 Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:03:14 -0500 Subject: [PATCH 009/118] Update AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md index 998cef983..ebe4795ee 100644 --- a/Topics/User_Experience/AB_Testing.md +++ b/Topics/User_Experience/AB_Testing.md @@ -4,7 +4,8 @@ A/B testing is a research method used to compare two versions of a web page or mobile app to determine which variation of the UI results in better performance. It allows individuals and companies to optimize user experience and make improvements to their application. ## **Steps/How To:** -**Create Variation:** Create two versions of the applications UI to run the experiment on, whether it be changing font, colors, or re-designing the whole page. +**Identify Changes:** Identify any potential problem areas within the UI and create a hypothesis of how to fix it +**Create Variation:** Create two versions of the applications UI to run the experiment on, create the new design based on the hypothesis, whether it be changing the font, colors, or re-designing the whole page. - The original page is known as the control. - The altered page is known as the variation. **Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version. From 091cbdda4b0f689fcd423c091fd2a46c51787f2c Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:03:42 -0500 Subject: [PATCH 010/118] Update AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md index ebe4795ee..5020e3dd9 100644 --- a/Topics/User_Experience/AB_Testing.md +++ b/Topics/User_Experience/AB_Testing.md @@ -7,8 +7,8 @@ A/B testing is a research method used to compare two versions of a web page or m **Identify Changes:** Identify any potential problem areas within the UI and create a hypothesis of how to fix it **Create Variation:** Create two versions of the applications UI to run the experiment on, create the new design based on the hypothesis, whether it be changing the font, colors, or re-designing the whole page. - The original page is known as the control. -- The altered page is known as the variation. -**Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version. +- The altered page is known as the variation. +**Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version. **Collect Data:** Record and measure different metrics such as user session duration or other performance metrics related to the application. **Analyze Results:** Based on the results, determine which version improves performance and deploy the winning variation. The experiment can be repeated to make further improvements. From f043e37d2b8eda73694aa1a16a805850d37b0089 Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:04:02 -0500 Subject: [PATCH 011/118] Update AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md index 5020e3dd9..3322329f5 100644 --- a/Topics/User_Experience/AB_Testing.md +++ b/Topics/User_Experience/AB_Testing.md @@ -5,11 +5,15 @@ A/B testing is a research method used to compare two versions of a web page or m ## **Steps/How To:** **Identify Changes:** Identify any potential problem areas within the UI and create a hypothesis of how to fix it + **Create Variation:** Create two versions of the applications UI to run the experiment on, create the new design based on the hypothesis, whether it be changing the font, colors, or re-designing the whole page. - The original page is known as the control. - The altered page is known as the variation. + **Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version. + **Collect Data:** Record and measure different metrics such as user session duration or other performance metrics related to the application. + **Analyze Results:** Based on the results, determine which version improves performance and deploy the winning variation. The experiment can be repeated to make further improvements. ## **Types of A/B Testing:** From 47ad527f478d718d7685310bafc2ee65c5c083ec Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:05:25 -0500 Subject: [PATCH 012/118] Update AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md index 3322329f5..6cda47e85 100644 --- a/Topics/User_Experience/AB_Testing.md +++ b/Topics/User_Experience/AB_Testing.md @@ -4,17 +4,17 @@ A/B testing is a research method used to compare two versions of a web page or mobile app to determine which variation of the UI results in better performance. It allows individuals and companies to optimize user experience and make improvements to their application. ## **Steps/How To:** -**Identify Changes:** Identify any potential problem areas within the UI and create a hypothesis of how to fix it +**Identify Changes:** Identify any potential problem areas within the UI and create a hypothesis of how to fix it __ -**Create Variation:** Create two versions of the applications UI to run the experiment on, create the new design based on the hypothesis, whether it be changing the font, colors, or re-designing the whole page. +**Create Variation:** Create two versions of the applications UI to run the experiment on, create the new design based on the hypothesis, whether it be changing the font, colors, or re-designing the whole page. __ - The original page is known as the control. - The altered page is known as the variation. -**Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version. +**Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version. __ -**Collect Data:** Record and measure different metrics such as user session duration or other performance metrics related to the application. +**Collect Data:** Record and measure different metrics such as user session duration or other performance metrics related to the application.__ -**Analyze Results:** Based on the results, determine which version improves performance and deploy the winning variation. The experiment can be repeated to make further improvements. +**Analyze Results:** Based on the results, determine which version improves performance and deploy the winning variation. The experiment can be repeated to make further improvements.__ ## **Types of A/B Testing:** **Split URL Testing:** From 598cef2e9b8fd95fe350b09db8fb4649108ec75b Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:06:30 -0500 Subject: [PATCH 013/118] Update AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md index 6cda47e85..981f9e0bc 100644 --- a/Topics/User_Experience/AB_Testing.md +++ b/Topics/User_Experience/AB_Testing.md @@ -4,17 +4,17 @@ A/B testing is a research method used to compare two versions of a web page or mobile app to determine which variation of the UI results in better performance. It allows individuals and companies to optimize user experience and make improvements to their application. ## **Steps/How To:** -**Identify Changes:** Identify any potential problem areas within the UI and create a hypothesis of how to fix it __ +###**Identify Changes:** Identify any potential problem areas within the UI and create a hypothesis of how to fix it -**Create Variation:** Create two versions of the applications UI to run the experiment on, create the new design based on the hypothesis, whether it be changing the font, colors, or re-designing the whole page. __ +###**Create Variation:** Create two versions of the applications UI to run the experiment on, create the new design based on the hypothesis, whether it be changing the font, colors, or re-designing the whole page. - The original page is known as the control. - The altered page is known as the variation. -**Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version. __ +###**Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version. -**Collect Data:** Record and measure different metrics such as user session duration or other performance metrics related to the application.__ +###**Collect Data:** Record and measure different metrics such as user session duration or other performance metrics related to the application. -**Analyze Results:** Based on the results, determine which version improves performance and deploy the winning variation. The experiment can be repeated to make further improvements.__ +###**Analyze Results:** Based on the results, determine which version improves performance and deploy the winning variation. The experiment can be repeated to make further improvements. ## **Types of A/B Testing:** **Split URL Testing:** From 22bc1a5b09c0538b23d74b6bdcc360280d59a2fb Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:07:16 -0500 Subject: [PATCH 014/118] Update AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md index 981f9e0bc..a7d091c3c 100644 --- a/Topics/User_Experience/AB_Testing.md +++ b/Topics/User_Experience/AB_Testing.md @@ -4,17 +4,17 @@ A/B testing is a research method used to compare two versions of a web page or mobile app to determine which variation of the UI results in better performance. It allows individuals and companies to optimize user experience and make improvements to their application. ## **Steps/How To:** -###**Identify Changes:** Identify any potential problem areas within the UI and create a hypothesis of how to fix it +**Identify Changes:** Identify any potential problem areas within the UI and create a hypothesis of how to fix it
-###**Create Variation:** Create two versions of the applications UI to run the experiment on, create the new design based on the hypothesis, whether it be changing the font, colors, or re-designing the whole page. +###**Create Variation:** Create two versions of the applications UI to run the experiment on, create the new design based on the hypothesis, whether it be changing the font, colors, or re-designing the whole page.
- The original page is known as the control. -- The altered page is known as the variation. +- The altered page is known as the variation. -###**Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version. +###**Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version.
-###**Collect Data:** Record and measure different metrics such as user session duration or other performance metrics related to the application. +###**Collect Data:** Record and measure different metrics such as user session duration or other performance metrics related to the application.
-###**Analyze Results:** Based on the results, determine which version improves performance and deploy the winning variation. The experiment can be repeated to make further improvements. +###**Analyze Results:** Based on the results, determine which version improves performance and deploy the winning variation. The experiment can be repeated to make further improvements.
## **Types of A/B Testing:** **Split URL Testing:** From 9db138bb5a6db12f92b3fe8a60e96df59ca2d825 Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:07:53 -0500 Subject: [PATCH 015/118] Update AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md index a7d091c3c..9d05a76db 100644 --- a/Topics/User_Experience/AB_Testing.md +++ b/Topics/User_Experience/AB_Testing.md @@ -6,23 +6,23 @@ A/B testing is a research method used to compare two versions of a web page or m ## **Steps/How To:** **Identify Changes:** Identify any potential problem areas within the UI and create a hypothesis of how to fix it
-###**Create Variation:** Create two versions of the applications UI to run the experiment on, create the new design based on the hypothesis, whether it be changing the font, colors, or re-designing the whole page.
+**Create Variation:** Create two versions of the applications UI to run the experiment on, create the new design based on the hypothesis, whether it be changing the font, colors, or re-designing the whole page.
- The original page is known as the control. - The altered page is known as the variation. -###**Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version.
+**Running The Experiment:** Randomly filter the traffic of the application where one group (Group A) sees the original, or controlled version, and the other group (Group B) sees the modified version.
-###**Collect Data:** Record and measure different metrics such as user session duration or other performance metrics related to the application.
+**Collect Data:** Record and measure different metrics such as user session duration or other performance metrics related to the application.
-###**Analyze Results:** Based on the results, determine which version improves performance and deploy the winning variation. The experiment can be repeated to make further improvements.
+**Analyze Results:** Based on the results, determine which version improves performance and deploy the winning variation. The experiment can be repeated to make further improvements.
## **Types of A/B Testing:** **Split URL Testing:** -- Split URL testing is a variation of A/B testing where two different web page urls are used, rather than running the experiment on the same url. Used for testing completely new page designs. +- Split URL testing is a variation of A/B testing where two different web page urls are used, rather than running the experiment on the same url. Used for testing completely new page designs.
**Multivariate Testing:** -- Multivariate testing tests various changes to different page elements simultaneously to analyze which combinations perform the best. Can be used to save time rather than performing multiple A/B experiments. +- Multivariate testing tests various changes to different page elements simultaneously to analyze which combinations perform the best. Can be used to save time rather than performing multiple A/B experiments.
**Multi-Page Testing:** -- Multi-Page testing tests changes to an element on the web page over multiple pages within the website. Allows for a consistent set of pages when testing variation with control. +- Multi-Page testing tests changes to an element on the web page over multiple pages within the website. Allows for a consistent set of pages when testing variation with control.
## **Benefits of A/B Testing:** - Optimizes user experience which allows you to create a more effective application. From 56baec03f2d016d29900d4e70583813f0f516285 Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:08:27 -0500 Subject: [PATCH 016/118] Update AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md index 9d05a76db..e23fdf1e1 100644 --- a/Topics/User_Experience/AB_Testing.md +++ b/Topics/User_Experience/AB_Testing.md @@ -19,8 +19,10 @@ A/B testing is a research method used to compare two versions of a web page or m ## **Types of A/B Testing:** **Split URL Testing:** - Split URL testing is a variation of A/B testing where two different web page urls are used, rather than running the experiment on the same url. Used for testing completely new page designs.
+ **Multivariate Testing:** - Multivariate testing tests various changes to different page elements simultaneously to analyze which combinations perform the best. Can be used to save time rather than performing multiple A/B experiments.
+ **Multi-Page Testing:** - Multi-Page testing tests changes to an element on the web page over multiple pages within the website. Allows for a consistent set of pages when testing variation with control.
From 77dce00880d1b87e22895c42d3f8a56fa9f1afbe Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:12:29 -0500 Subject: [PATCH 017/118] Update AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md index e23fdf1e1..90ca7912d 100644 --- a/Topics/User_Experience/AB_Testing.md +++ b/Topics/User_Experience/AB_Testing.md @@ -32,4 +32,5 @@ A/B testing is a research method used to compare two versions of a web page or m - Quick and efficient way to test UI changes. ## **Additional Resources:** -https://vwo.com/ab-testing/ +More Information: https://vwo.com/ab-testing/ +Examples: https://vwo.com/blog/ab-testing-examples/ From 972cf80c564be17a3e24fd7c914b1206f572c1e0 Mon Sep 17 00:00:00 2001 From: leya-595 <82251651+leya-595@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:13:03 -0500 Subject: [PATCH 018/118] Update AB_Testing.md --- Topics/User_Experience/AB_Testing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/User_Experience/AB_Testing.md b/Topics/User_Experience/AB_Testing.md index 90ca7912d..9a3092682 100644 --- a/Topics/User_Experience/AB_Testing.md +++ b/Topics/User_Experience/AB_Testing.md @@ -32,5 +32,5 @@ A/B testing is a research method used to compare two versions of a web page or m - Quick and efficient way to test UI changes. ## **Additional Resources:** -More Information: https://vwo.com/ab-testing/ +More Information: https://vwo.com/ab-testing/
Examples: https://vwo.com/blog/ab-testing-examples/ From a20c1ff53a764383722017e03901dc442441a75e Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 17:53:13 -0500 Subject: [PATCH 019/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index 7ed40c503..e89a46d9a 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -1,5 +1,9 @@ # Apache Superset +## Table of contents +### [Prerequisites](#prerequisites-1) +### [Introduction](#introduction-1) + ## Prerequisites: * [React](https://react.dev/) for Frontend-related knowledge. * [Node.js](https://nodejs.org/en/about) for Backend-related knowledge. From f6f3c3626c0aad4b8e6cc2a3e3e35d72bd2f2d71 Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 17:54:50 -0500 Subject: [PATCH 020/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index e89a46d9a..968260a3b 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -3,6 +3,10 @@ ## Table of contents ### [Prerequisites](#prerequisites-1) ### [Introduction](#introduction-1) +### [Set-up](#set-up-1) +### [Potential Issues with Docker Desktop](#potentialissue-1) +### [Potential Issues with Installing from Scratch](#potentialissue-2) +### [Extra Resources](#extra-resource-1) ## Prerequisites: * [React](https://react.dev/) for Frontend-related knowledge. From 9fecbfd1e71492a56cc4e2e1202aa6248b7198b3 Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 17:55:29 -0500 Subject: [PATCH 021/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index 968260a3b..ca807d15c 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -4,8 +4,6 @@ ### [Prerequisites](#prerequisites-1) ### [Introduction](#introduction-1) ### [Set-up](#set-up-1) -### [Potential Issues with Docker Desktop](#potentialissue-1) -### [Potential Issues with Installing from Scratch](#potentialissue-2) ### [Extra Resources](#extra-resource-1) ## Prerequisites: From 59a8597958b8012fef85c1999620c57171b0a17b Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 17:56:11 -0500 Subject: [PATCH 022/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index ca807d15c..73ab5e16e 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -4,7 +4,7 @@ ### [Prerequisites](#prerequisites-1) ### [Introduction](#introduction-1) ### [Set-up](#set-up-1) -### [Extra Resources](#extra-resource-1) +### [Extra Resources](#extra resources-1) ## Prerequisites: * [React](https://react.dev/) for Frontend-related knowledge. From ad1c8cfc3308478e57341303220952d857510c8b Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 17:56:21 -0500 Subject: [PATCH 023/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index 73ab5e16e..4719cda01 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -4,7 +4,7 @@ ### [Prerequisites](#prerequisites-1) ### [Introduction](#introduction-1) ### [Set-up](#set-up-1) -### [Extra Resources](#extra resources-1) +### [Extra Resources](#extraresources-1) ## Prerequisites: * [React](https://react.dev/) for Frontend-related knowledge. From 9e4b6891a809432598ab55c0fc65f82f4775bedb Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 17:57:58 -0500 Subject: [PATCH 024/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index 4719cda01..d6bbf35a5 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -4,7 +4,7 @@ ### [Prerequisites](#prerequisites-1) ### [Introduction](#introduction-1) ### [Set-up](#set-up-1) -### [Extra Resources](#extraresources-1) +### [Creating a custom plugin](#plugin-1) ## Prerequisites: * [React](https://react.dev/) for Frontend-related knowledge. @@ -43,6 +43,9 @@ This message shows up due to an update in version 2.1.0 to force secure configur 1. The command `pip install apache-superset` doesn't work. This is because Apache Superset currently supports python version 3.8 and 3.9. Any python versions that's lower or higher will result in a failure. +## Creating a custom plugin: +test + ## Extra Resources: From 958f1ff930c5d88e016c6d222e4a6b2c3693c505 Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 17:59:53 -0500 Subject: [PATCH 025/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index d6bbf35a5..2f31db215 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -1,10 +1,16 @@ -# Apache Superset - -## Table of contents -### [Prerequisites](#prerequisites-1) -### [Introduction](#introduction-1) -### [Set-up](#set-up-1) -### [Creating a custom plugin](#plugin-1) +- [Apache Superset](#apache-superset) + * [Table of contents](#table-of-contents) + + [[Prerequisites](#prerequisites-1)](#-prerequisites---prerequisites-1-) + + [[Introduction](#introduction-1)](#-introduction---introduction-1-) + + [[Set-up](#set-up-1)](#-set-up---set-up-1-) + + [[Creating a custom plugin](#plugin-1)](#-creating-a-custom-plugin---plugin-1-) + * [Prerequisites:](#prerequisites-) + * [Introduction:](#introduction-) + * [Set-up:](#set-up-) + + [Potential Issues with Docker Desktop:](#potential-issues-with-docker-desktop-) + + [Potential Issues with Installing from Scratch:](#potential-issues-with-installing-from-scratch-) + * [Creating a custom plugin:](#creating-a-custom-plugin-) + * [Extra Resources:](#extra-resources-) ## Prerequisites: * [React](https://react.dev/) for Frontend-related knowledge. From 4c3dc85267d25bff07cf7dbadf2e3131d8fd07bd Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 18:00:32 -0500 Subject: [PATCH 026/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index 2f31db215..223f44c13 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -12,6 +12,8 @@ * [Creating a custom plugin:](#creating-a-custom-plugin-) * [Extra Resources:](#extra-resources-) +Table of contents generated with markdown-toc + ## Prerequisites: * [React](https://react.dev/) for Frontend-related knowledge. * [Node.js](https://nodejs.org/en/about) for Backend-related knowledge. From 92eb2eeeeb02414fe367b60f1b7361ff7b615051 Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 18:01:00 -0500 Subject: [PATCH 027/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index 223f44c13..47b33178e 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -1,16 +1,9 @@ -- [Apache Superset](#apache-superset) - * [Table of contents](#table-of-contents) - + [[Prerequisites](#prerequisites-1)](#-prerequisites---prerequisites-1-) - + [[Introduction](#introduction-1)](#-introduction---introduction-1-) - + [[Set-up](#set-up-1)](#-set-up---set-up-1-) - + [[Creating a custom plugin](#plugin-1)](#-creating-a-custom-plugin---plugin-1-) - * [Prerequisites:](#prerequisites-) - * [Introduction:](#introduction-) - * [Set-up:](#set-up-) - + [Potential Issues with Docker Desktop:](#potential-issues-with-docker-desktop-) - + [Potential Issues with Installing from Scratch:](#potential-issues-with-installing-from-scratch-) - * [Creating a custom plugin:](#creating-a-custom-plugin-) - * [Extra Resources:](#extra-resources-) +# Apache Superset + +## Table of contents +### [Prerequisites](#prerequisites-1) +### [Introduction](#introduction-1) +### [Creating a custom plugin](#plugin-1) Table of contents generated with markdown-toc From 00dd19971bb02992a5929a3dd01f2d3cf49794e9 Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 18:01:44 -0500 Subject: [PATCH 028/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index 47b33178e..c31d140b9 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -3,9 +3,9 @@ ## Table of contents ### [Prerequisites](#prerequisites-1) ### [Introduction](#introduction-1) +### [Set-up](#setup-1) ### [Creating a custom plugin](#plugin-1) -Table of contents generated with markdown-toc ## Prerequisites: * [React](https://react.dev/) for Frontend-related knowledge. @@ -46,6 +46,7 @@ This message shows up due to an update in version 2.1.0 to force secure configur ## Creating a custom plugin: test +** hi ** ## Extra Resources: From 84bc0cd26790c83ee384ce620f7e5bf44ba1b25a Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 18:04:07 -0500 Subject: [PATCH 029/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index c31d140b9..fdafc396e 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -1,12 +1,5 @@ # Apache Superset -## Table of contents -### [Prerequisites](#prerequisites-1) -### [Introduction](#introduction-1) -### [Set-up](#setup-1) -### [Creating a custom plugin](#plugin-1) - - ## Prerequisites: * [React](https://react.dev/) for Frontend-related knowledge. * [Node.js](https://nodejs.org/en/about) for Backend-related knowledge. @@ -45,8 +38,11 @@ This message shows up due to an update in version 2.1.0 to force secure configur 1. The command `pip install apache-superset` doesn't work. This is because Apache Superset currently supports python version 3.8 and 3.9. Any python versions that's lower or higher will result in a failure. ## Creating a custom plugin: -test -** hi ** + +** To get started on creating a custom plugin, you can follow the instruction [HERE](https://superset.apache.org/docs/contributing/creating-viz-plugins/)** + + + ## Extra Resources: From d6e90a58af16ee553a95990d194769322d0bd0aa Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 18:09:54 -0500 Subject: [PATCH 030/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 36 +++++++++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index fdafc396e..a718cf569 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -37,13 +37,45 @@ This message shows up due to an update in version 2.1.0 to force secure configur 1. The command `pip install apache-superset` doesn't work. This is because Apache Superset currently supports python version 3.8 and 3.9. Any python versions that's lower or higher will result in a failure. -## Creating a custom plugin: +## Creating a Custom Plugin: -** To get started on creating a custom plugin, you can follow the instruction [HERE](https://superset.apache.org/docs/contributing/creating-viz-plugins/)** +**To get started on creating a custom plugin, you can follow the instruction [HERE](https://superset.apache.org/docs/contributing/creating-viz-plugins/)** +There are example plugins [example](https://github.com/preset-io/superset-plugin-chart-liquid) which you can reference. Furthermore, this [youtube tutorial](https://www.youtube.com/watch?v=LDHFY9xTzls) can help you as well. +### Potential Issues Creating a Custom Plugin: +Note that one may get errors from `npm run build`, but those errors do not affect the actual building of the plugin. `npm` is a large package manager, and thus it yields irrelevant errors when trying to build the plugin. In case of version conflict errors with other tools under `npm`, it is recommended to use the `--force` flag, again due to the nature of `npm`. +To add the package to Superset, go to the `superset-frontend` subdirectory in your Superset source folder (assuming both the `mapbox-plugin` plugin and `superset` repos are in the same root directory) and run +``` +npm i -S ../../mapbox-plugin +``` + +If your Superset plugin exists in the `superset-frontend` directory and you wish to resolve TypeScript errors about `@superset-ui/core` not being resolved correctly, add the following to your `tsconfig.json` file: + +``` +"references": [ + { + "path": "../../packages/superset-ui-chart-controls" + }, + { + "path": "../../packages/superset-ui-core" + } +] +``` + +You may also wish to add the following to the `include` array in `tsconfig.json` to make Superset types available to your plugin: + +``` +"../../types/**/*" +``` + +Finally, if you wish to ensure your plugin `tsconfig.json` is aligned with the root Superset project, you may add the following to your `tsconfig.json` file: + +``` +"extends": "../../tsconfig.json", +``` ## Extra Resources: From 54a1f422b7186ec258370b77b104872492eef7cf Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 18:10:34 -0500 Subject: [PATCH 031/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index a718cf569..22daec219 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -1,19 +1,23 @@ # Apache Superset + ## Prerequisites: * [React](https://react.dev/) for Frontend-related knowledge. * [Node.js](https://nodejs.org/en/about) for Backend-related knowledge. * [PostgreSQL](https://www.postgresql.org/) for SQL and Databases knowledge as well as writing queries. * [Python](https://www.python.org/) for writing scripts as well as changing parts of the configuration files. + ## Introduction: Apache Superset is a modern, enterprise-ready business intelligence web application. It is fast, lightweight, intuitive, and loaded with options that make it easy for users of all skill sets to explore and visualize their data, from simple pie charts to highly detailed deck.gl geospatial charts. + ## Set-up: **The easiest way to set up Apache Superset is by using Docker Desktop. To install Docker Desktop, follow the instruction [HERE](https://www.docker.com/products/docker-desktop/). You can find more details about installing Superset by Docker Desktop [HERE](https://superset.apache.org/docs/installation/installing-superset-using-docker-compose).** + ### Potential Issues with Docker Desktop: 1. The container named `superset_init` may exit with a code one due to a thread deadlock. To fix this issue, simply kill the process using `CTRL + C`, and re-compose it again. @@ -37,6 +41,7 @@ This message shows up due to an update in version 2.1.0 to force secure configur 1. The command `pip install apache-superset` doesn't work. This is because Apache Superset currently supports python version 3.8 and 3.9. Any python versions that's lower or higher will result in a failure. + ## Creating a Custom Plugin: **To get started on creating a custom plugin, you can follow the instruction [HERE](https://superset.apache.org/docs/contributing/creating-viz-plugins/)** From 3d8ee6de73b1cbb85bd83eb866a953c5efb36387 Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 18:11:10 -0500 Subject: [PATCH 032/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index 22daec219..bcc283ef5 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -52,9 +52,9 @@ There are example plugins [example](https://github.com/preset-io/superset-plugin Note that one may get errors from `npm run build`, but those errors do not affect the actual building of the plugin. `npm` is a large package manager, and thus it yields irrelevant errors when trying to build the plugin. In case of version conflict errors with other tools under `npm`, it is recommended to use the `--force` flag, again due to the nature of `npm`. -To add the package to Superset, go to the `superset-frontend` subdirectory in your Superset source folder (assuming both the `mapbox-plugin` plugin and `superset` repos are in the same root directory) and run +To add the package to Superset, go to the `superset-frontend` subdirectory in your Superset source folder (assuming both the `your-plugin` plugin and `superset` repos are in the same root directory) and run ``` -npm i -S ../../mapbox-plugin +npm i -S ../../your-plugin ``` If your Superset plugin exists in the `superset-frontend` directory and you wish to resolve TypeScript errors about `@superset-ui/core` not being resolved correctly, add the following to your `tsconfig.json` file: From 0b743c51b271a33f99b189dbe927b80193affb09 Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 18:47:17 -0500 Subject: [PATCH 033/118] Update Apache_Superset.md Added additional clarifications on creating a plugin --- Topics/Tech_Stacks/Apache_Superset.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index bcc283ef5..9187d0a07 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -48,10 +48,18 @@ This message shows up due to an update in version 2.1.0 to force secure configur There are example plugins [example](https://github.com/preset-io/superset-plugin-chart-liquid) which you can reference. Furthermore, this [youtube tutorial](https://www.youtube.com/watch?v=LDHFY9xTzls) can help you as well. +**To set up for the plug-in, you would need to have the following in your system:** +1) apache-superset 3.0.0 +2) python 3.9.7 or above +3) node version 16 +4) npm version 7 or 8 + ### Potential Issues Creating a Custom Plugin: Note that one may get errors from `npm run build`, but those errors do not affect the actual building of the plugin. `npm` is a large package manager, and thus it yields irrelevant errors when trying to build the plugin. In case of version conflict errors with other tools under `npm`, it is recommended to use the `--force` flag, again due to the nature of `npm`. +**IMPORTANT** : You can put the mapbox-plugin folder anywhere in your machine EXCEPT in the superset/superset-frontend/plugins folder. The custom plugin will fail to run and cause errors if it is in that folder. This is because those are default plugins by Apache Superset and Apache Superset runs some processes on all folders in the plugin folder, which may cause errors for your plugin as your custom plugin does not have the same configurations as the default plugins provided. + To add the package to Superset, go to the `superset-frontend` subdirectory in your Superset source folder (assuming both the `your-plugin` plugin and `superset` repos are in the same root directory) and run ``` npm i -S ../../your-plugin From e30ff310c08ff36acb76abf51ae3a0127e9fbe47 Mon Sep 17 00:00:00 2001 From: Justin Zheng <83163126+justinzzy-code@users.noreply.github.com> Date: Fri, 17 Nov 2023 18:53:19 -0500 Subject: [PATCH 034/118] Update Apache_Superset.md --- Topics/Tech_Stacks/Apache_Superset.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/Apache_Superset.md b/Topics/Tech_Stacks/Apache_Superset.md index 9187d0a07..781ac8f7a 100644 --- a/Topics/Tech_Stacks/Apache_Superset.md +++ b/Topics/Tech_Stacks/Apache_Superset.md @@ -58,7 +58,7 @@ There are example plugins [example](https://github.com/preset-io/superset-plugin Note that one may get errors from `npm run build`, but those errors do not affect the actual building of the plugin. `npm` is a large package manager, and thus it yields irrelevant errors when trying to build the plugin. In case of version conflict errors with other tools under `npm`, it is recommended to use the `--force` flag, again due to the nature of `npm`. -**IMPORTANT** : You can put the mapbox-plugin folder anywhere in your machine EXCEPT in the superset/superset-frontend/plugins folder. The custom plugin will fail to run and cause errors if it is in that folder. This is because those are default plugins by Apache Superset and Apache Superset runs some processes on all folders in the plugin folder, which may cause errors for your plugin as your custom plugin does not have the same configurations as the default plugins provided. +**IMPORTANT** : You can put the your-plugin folder anywhere in your machine EXCEPT in the superset/superset-frontend/plugins folder. The custom plugin will fail to run and cause errors if it is in that folder. This is because those are default plugins by Apache Superset and Apache Superset runs some processes on all folders in the plugin folder, which may cause errors for your plugin as your custom plugin does not have the same configurations as the default plugins provided. To add the package to Superset, go to the `superset-frontend` subdirectory in your Superset source folder (assuming both the `your-plugin` plugin and `superset` repos are in the same root directory) and run ``` From 3ba9fa8c44975b5619ec77919dfeaef8708abde0 Mon Sep 17 00:00:00 2001 From: Min Gi Kwon <64427415+MinGi-K@users.noreply.github.com> Date: Sat, 18 Nov 2023 09:14:59 -0500 Subject: [PATCH 035/118] Create Salesforce_Social_Login.md --- Topics/Tech_Stacks/Salesforce_Social_Login.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 Topics/Tech_Stacks/Salesforce_Social_Login.md diff --git a/Topics/Tech_Stacks/Salesforce_Social_Login.md b/Topics/Tech_Stacks/Salesforce_Social_Login.md new file mode 100644 index 000000000..0bab9dafe --- /dev/null +++ b/Topics/Tech_Stacks/Salesforce_Social_Login.md @@ -0,0 +1,18 @@ +# Set up +- There are many different libraries and frameworks you can use for social logins. For Django there is all-auth, for example. This guide will assume you have already chosen a framework/library and have set it up correctly on your side. +- After logging into Salesforce, in the top right corner, click on the gear icon and go to the SetUp page. +- Search "App" on the left hand searchbar in the Setup menu, and go to App Manager. +- Click on "New Connected App". +- Put in your details like Connected App Name, Email, etc. +- Enable Oauth Settings +- Provide your callback URI. The callback URI is the link Salesforce will redirect users to after users have successfully logged in. It needs to be HTTPS secure. +- Provide your scopes. Full Access is recommended for initial developmental purposes, but should be restricted down to only the necessary scopes in the future. (api), (openid), and (refresh_token) are the minimal scopes you may want. +- The OAuth settings are very customisable. This guide recommends disabling PKCE if you are in a time crunch as it adds another layer of complexity to the social login. +- Select configure ID token. In the ID Token Audiences, put in the domain of where your deployed app is hosted. +- Below are examples of what a basic conencted app might look like: + +Screen Shot 2023-11-18 at 9 10 40 AM + +Screen Shot 2023-11-18 at 9 06 36 AM + +After creating the Connected App, navigate to your app Manage Connected Apps. You will see an option to get Consumer Key and Secret, which you can inject into your project. Now users can log into your application with their Salesforce credentials, and you can API calls to Salesforce by sending the access token you receive from Salesforce after successful user login in the credentials of the API request. From ef3c44651f02cdd03b0fcd9edbc7f4d4758e6353 Mon Sep 17 00:00:00 2001 From: Kevin <66377873+kimxoals@users.noreply.github.com> Date: Sat, 18 Nov 2023 10:59:39 -0500 Subject: [PATCH 036/118] Create kubernetes.md --- Topics/Development_Process/kubernetes.md | 28 ++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 Topics/Development_Process/kubernetes.md diff --git a/Topics/Development_Process/kubernetes.md b/Topics/Development_Process/kubernetes.md new file mode 100644 index 000000000..e588fdf9a --- /dev/null +++ b/Topics/Development_Process/kubernetes.md @@ -0,0 +1,28 @@ +# Introduction to Kubernetes + +## What is Kubernetes? + +Kubernetes, also known as K8s, is an open-source platform that automates the management process for application containers. It was developed by Google and is now maintained by the Cloud Native Computing Foundation. + +## Key Features + +- **Auto Scailing:** Kubernetes automatically scales its resources dyamically to meet application's demand. +- **Container Orchestration:** Kubernetes efficiently manages containers across multiple hosts. +- **Self-healing:** It automatically restarts containers that fail, replaces them, and kills containers that don't respond to user-defined health checks. +- **Load Balancing:** Kubernetes can distribute network traffic to ensure stability. +- **Automated Rollouts and Rollbacks:** Allows changes to the application or its configuration while monitoring application health. + +## Components + +1. **Pods:** The smallest deployable units that can be created, scheduled, and managed. +2. **Services:** An abstraction to expose an application running on a set of Pods. +3. **Volumes:** Provides a way to store data and stateful applications. +4. **Namespaces:** Enable multiple virtual clusters on the same physical cluster. + +## Conclusion + +Kubernetes is a powerful tool for managing containerized applications, providing efficiency and flexibility in application deployment and management. + +--- + +For more detailed information, visit the official Kubernetes website: [kubernetes.io](https://kubernetes.io). From 2a30d9ab5ac3459a085b27f8a7fd2df1394dbc7e Mon Sep 17 00:00:00 2001 From: Min Gi Kwon <64427415+MinGi-K@users.noreply.github.com> Date: Sat, 18 Nov 2023 12:28:46 -0500 Subject: [PATCH 037/118] Update salesforce_api.md Merged information about Connected App into the existing Salesforce entry. --- Topics/Tech_Stacks/salesforce_api.md | 31 ++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/salesforce_api.md b/Topics/Tech_Stacks/salesforce_api.md index 45d95ac50..49dc0aa61 100644 --- a/Topics/Tech_Stacks/salesforce_api.md +++ b/Topics/Tech_Stacks/salesforce_api.md @@ -1,6 +1,7 @@ -# Access to Salesforce API -[Setup authentication documentation](https://developer.salesforce.com/docs/atlas.en-us.api_rest.meta/api_rest/quickstart_oauth.htm) +## Access to Salesforce API +This guide will tell you how to use Salesforce API from an external website or service. The first method is suitable when you only need to make API calls, the second method is suitable if you also want to use Salesforce as a identity/authentication provider for your website, which might require a bit further customization. +[Setup authentication documentation](https://developer.salesforce.com/docs/atlas.en-us.api_rest.meta/api_rest/quickstart_oauth.htm) ## Getting authentication token After logging into salesforce, at the top right corner, go to: @@ -36,6 +37,32 @@ The query editor uses SOQL - [Salesforce Object Query Language](https://develope +## Setting up a Connected App in Salesforce to enable social login + +# Why would you want to use Salesforce as an authentication provider? +- If the partner organization is already partnered with Salesforce and they request a web application, it makes sense to try integrating with Salesforce directly and save the cost of hosting another expensive database. +- Users might have an easier time logging in if they already have a Salesforce account, thus making it easier for users to start using your application. +- Social log in with Salesforce connected app can be more powerful to access Salesforce API than having a username and password flow that is injected into the app because you can control the scope, and some Salesforce APIs like Chatter API use context such as the current authenticated user for important requests such as GET notifications. + +# Set up +- There are many different libraries and frameworks you can use for social logins. For Django there is all-auth, for example. This guide will assume you have already chosen a framework/library and have set it up correctly on your side. +- After logging into Salesforce, in the top right corner, click on the gear icon and go to the SetUp page. +- Search "App" on the left hand searchbar in the Setup menu, and go to App Manager. +- Click on "New Connected App". +- Put in your details like Connected App Name, Email, etc. +- Enable Oauth Settings +- Provide your callback URI. The callback URI is the link Salesforce will redirect users to after users have successfully logged in. It needs to be HTTPS secure. +- Provide your scopes. Full Access is recommended for initial developmental purposes, but should be restricted down to only the necessary scopes in the future. (api), (openid), and (refresh_token) are the minimal scopes you may want. +- The OAuth settings are very customisable. This guide recommends disabling PKCE if you are in a time crunch as it adds another layer of complexity to the social login. +- Select configure ID token. In the ID Token Audiences, put in the domain of where your deployed app is hosted. +- Below are examples of what a basic conencted app might look like: + +Screen Shot 2023-11-18 at 9 10 40 AM + +Screen Shot 2023-11-18 at 9 06 36 AM + +After creating the Connected App, navigate to your app Manage Connected Apps. You will see an option to get Consumer Key and Secret, which you can inject into your project. Now users can log into your application with their Salesforce credentials, and you can also use API calls to Salesforce by sending the access token you receive from Salesforce after successful user login in the header of the API request. + ### Image References: - https://blog.coupler.io/wp-content/uploads/2022/02/1-salesforce-api-setup.png - https://lh4.googleusercontent.com/qs95ISk2oMgxsg2jRGc34XGL7XlCigtrhLlKQHFiFnbHs-R87LPZn7zWPTDxAQkCogPxZtVeXe1quPx3gVl9MRsDZfcHVKZAv9sTUbIHsBJPzpAAUcnr6FFjP5crziQBhzQFTJEp From d7c130014c0481ed5be1df8835f150051ec46c46 Mon Sep 17 00:00:00 2001 From: Min Gi Kwon <64427415+MinGi-K@users.noreply.github.com> Date: Sat, 18 Nov 2023 12:30:16 -0500 Subject: [PATCH 038/118] Delete Topics/Tech_Stacks/Salesforce_Social_Login.md Deleted this page as the information was moved over to the existing Salesforce page. --- Topics/Tech_Stacks/Salesforce_Social_Login.md | 18 ------------------ 1 file changed, 18 deletions(-) delete mode 100644 Topics/Tech_Stacks/Salesforce_Social_Login.md diff --git a/Topics/Tech_Stacks/Salesforce_Social_Login.md b/Topics/Tech_Stacks/Salesforce_Social_Login.md deleted file mode 100644 index 0bab9dafe..000000000 --- a/Topics/Tech_Stacks/Salesforce_Social_Login.md +++ /dev/null @@ -1,18 +0,0 @@ -# Set up -- There are many different libraries and frameworks you can use for social logins. For Django there is all-auth, for example. This guide will assume you have already chosen a framework/library and have set it up correctly on your side. -- After logging into Salesforce, in the top right corner, click on the gear icon and go to the SetUp page. -- Search "App" on the left hand searchbar in the Setup menu, and go to App Manager. -- Click on "New Connected App". -- Put in your details like Connected App Name, Email, etc. -- Enable Oauth Settings -- Provide your callback URI. The callback URI is the link Salesforce will redirect users to after users have successfully logged in. It needs to be HTTPS secure. -- Provide your scopes. Full Access is recommended for initial developmental purposes, but should be restricted down to only the necessary scopes in the future. (api), (openid), and (refresh_token) are the minimal scopes you may want. -- The OAuth settings are very customisable. This guide recommends disabling PKCE if you are in a time crunch as it adds another layer of complexity to the social login. -- Select configure ID token. In the ID Token Audiences, put in the domain of where your deployed app is hosted. -- Below are examples of what a basic conencted app might look like: - -Screen Shot 2023-11-18 at 9 10 40 AM - -Screen Shot 2023-11-18 at 9 06 36 AM - -After creating the Connected App, navigate to your app Manage Connected Apps. You will see an option to get Consumer Key and Secret, which you can inject into your project. Now users can log into your application with their Salesforce credentials, and you can API calls to Salesforce by sending the access token you receive from Salesforce after successful user login in the credentials of the API request. From f73c6be9d21fcb3fed965f82be07a33560c50d33 Mon Sep 17 00:00:00 2001 From: Min Gi Kwon <64427415+MinGi-K@users.noreply.github.com> Date: Sat, 18 Nov 2023 13:54:56 -0500 Subject: [PATCH 039/118] Update salesforce_api.md --- Topics/Tech_Stacks/salesforce_api.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Topics/Tech_Stacks/salesforce_api.md b/Topics/Tech_Stacks/salesforce_api.md index 49dc0aa61..c48c0fd69 100644 --- a/Topics/Tech_Stacks/salesforce_api.md +++ b/Topics/Tech_Stacks/salesforce_api.md @@ -39,6 +39,8 @@ The query editor uses SOQL - [Salesforce Object Query Language](https://develope ## Setting up a Connected App in Salesforce to enable social login +- A Connected App is just refers to an application that uses OAuth for authentication and authorization. Refer to this [link](https://developer.salesforce.com/docs/atlas.en-us.api_rest.meta/api_rest/intro_oauth_and_connected_apps.htm) for more details about the Oauth flow: + # Why would you want to use Salesforce as an authentication provider? - If the partner organization is already partnered with Salesforce and they request a web application, it makes sense to try integrating with Salesforce directly and save the cost of hosting another expensive database. - Users might have an easier time logging in if they already have a Salesforce account, thus making it easier for users to start using your application. From c3acc796d5f5f7503eff35d5ba17d6652323c047 Mon Sep 17 00:00:00 2001 From: Min Gi Kwon <64427415+MinGi-K@users.noreply.github.com> Date: Sat, 18 Nov 2023 13:55:30 -0500 Subject: [PATCH 040/118] Update salesforce_api.md --- Topics/Tech_Stacks/salesforce_api.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/salesforce_api.md b/Topics/Tech_Stacks/salesforce_api.md index c48c0fd69..22edb3d93 100644 --- a/Topics/Tech_Stacks/salesforce_api.md +++ b/Topics/Tech_Stacks/salesforce_api.md @@ -37,8 +37,7 @@ The query editor uses SOQL - [Salesforce Object Query Language](https://develope -## Setting up a Connected App in Salesforce to enable social login - +# Setting up a Connected App in Salesforce to enable social login - A Connected App is just refers to an application that uses OAuth for authentication and authorization. Refer to this [link](https://developer.salesforce.com/docs/atlas.en-us.api_rest.meta/api_rest/intro_oauth_and_connected_apps.htm) for more details about the Oauth flow: # Why would you want to use Salesforce as an authentication provider? From 690b9c2ac9f415f1c045d34fbf0516ee07103b37 Mon Sep 17 00:00:00 2001 From: Min Gi Kwon <64427415+MinGi-K@users.noreply.github.com> Date: Sat, 18 Nov 2023 13:56:13 -0500 Subject: [PATCH 041/118] Update salesforce_api.md --- Topics/Tech_Stacks/salesforce_api.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/salesforce_api.md b/Topics/Tech_Stacks/salesforce_api.md index 22edb3d93..bcb186f88 100644 --- a/Topics/Tech_Stacks/salesforce_api.md +++ b/Topics/Tech_Stacks/salesforce_api.md @@ -62,7 +62,7 @@ The query editor uses SOQL - [Salesforce Object Query Language](https://develope Screen Shot 2023-11-18 at 9 06 36 AM -After creating the Connected App, navigate to your app Manage Connected Apps. You will see an option to get Consumer Key and Secret, which you can inject into your project. Now users can log into your application with their Salesforce credentials, and you can also use API calls to Salesforce by sending the access token you receive from Salesforce after successful user login in the header of the API request. +After creating the Connected App, navigate to your app in Manage Connected Apps like shown before. You will see an option to get Consumer Key and Secret, which you can inject into your project. Now users can log into your application with their Salesforce credentials, and you can also use API calls to Salesforce by sending the access token you receive from Salesforce after successful user login in the header of the API request. ### Image References: - https://blog.coupler.io/wp-content/uploads/2022/02/1-salesforce-api-setup.png From b37214b0b2e2b91193e3e5c06483d4ca3545091a Mon Sep 17 00:00:00 2001 From: kaspar-p Date: Sat, 18 Nov 2023 20:04:21 -0500 Subject: [PATCH 042/118] Add Retries.md document --- Topics/Software_Engineering/Retries.md | 86 ++++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 Topics/Software_Engineering/Retries.md diff --git a/Topics/Software_Engineering/Retries.md b/Topics/Software_Engineering/Retries.md new file mode 100644 index 000000000..a6a8a168d --- /dev/null +++ b/Topics/Software_Engineering/Retries.md @@ -0,0 +1,86 @@ +# Retries in web services + +Especially relevant for webserver applications, but useful for others, retries are really tricky to get right. +Retries and throttling are both terms used to talk about the _flow_ of traffic into a service. Often the +operators/developers of that service want to make guarantees about the rate of that flow, or otherwise direct +traffic. + +## Why retry at all? + +Intermittent failure can happen at any level. This can be within a single host if its on-host disk, memory, or +CPU fails, or often in the communication between two hosts over a network. Networks, especially over the public +internet using TCP/IP, are known to have periodic failures due to high load/congestion or network infrastructure +hardware failure. + +Retries are a really simple, easy answer to these intermittent failures. If the error only happens rarely, then +trying a task again is a really effective way to ensure that the message goes through. This often manifests +itself as retrying API calls. + +Some services have built up language around these retries to control them. For example, calling AWS APIs returns +metadata about the request itself. For example, there is a `$retryable` field in most of the AWS SDKv2's APIs, +the most common client used to make AWS API calls. If this field is set `true`, the server is hinting that the +failure was intermittent and that the client should retry. If the field is set to `false`, the server is hinting +to the client that the failure is likely going to happen again. + +## What are the problems with retries? + +Since retries are so simple to implement and elegant, they are usually the first tool that developers reach for +when a dependency of theirs has intermittent failures, but how can this go wrong? + +Consider a case where 4 distinct software teams each build products that depend on one another, in a chain like: +``` +A -> B -> C -> D +``` + +That is, service A is calling service B's APIs, and so on. Since B's APIs are known to fail occasionally, A has +configured an automatic retry count of 3. Underneath the hood, B depends on C. Service A may or may not know this +about B. But since C has a flaky API too, B also has a retry count of 3. And the same for C. + +This works fine, and will usually work. If all services are sufficiently scaled up to handle the load they are +given, there are no problems. + +However, imagine a case where service D is down. Though it is at the end of the chain of dependencies, in theory, +the services should be able to stay up despite their dependencies being down. This type of engineering is called +fault-tolerance. + +The next time that Service A takes a request, it forwards it to B, which forwards it to C, which tries to call D's +API, which fails. C then, tries again 3 times before reporting a failure back to B, which also triggers a retry. +That means C tries _another 3 times_. + +Retries deep into services grow multiplicatively, and a single API call to A has caused +``` +A: 3 +B: 9 +C: 27 +``` +different API calls to fail. C is handling 27x more load than it is used to, and might start failing itself, further +exacerbating the problem. + +That is, D has become a single point of failure for all other services, and even if they don't outright fail, the +load on B, C, and D, are highly needlessly increased. + +## What can we do about retries? + +Clients calling services will nearly always have retries configured. However, internal services should rarely +implement retries while calling other internal services, for precisely this reason. + +Another technique to get around excessive retries is to utilize more caching. If service C had cached the responses +from service D, it's possible that service D going down would have affected the top-level services at all, and +everything would have worked as normal. The downside to this approach is that caches are often trick to get right, +and sometimes introduce modal behavior in services [1], usually a bad thing. + +## So should I retry? + +As always in software engineering, it depends. A good rule of thumb is the external/internal, where external +dependencies are wrapped in retries, but internal dependencies aren't. It's much easier to control the behavior of +internal dependencies, either by directly contributing to their product, or speaking to the owners of that product +itself. Retries are a rough bandaid, and more precise solutions are better. Fixing the root-cause of intermittent +failures avoids the problems with retries in the first place, and produces a more stable product. + +Retries are also more acceptable when they aren't in the _critical path_ of a service. For an `AddTwoNumbers` +service, having retries on dependencies within the main `AddTwoNumbers` API call might not be a good idea. However, +for backup jobs, batch processing, or other non-performance-critical work, retries are often a simple, +engineering-efficient way to ensure reliability. + +## References +1. https://brooker.co.za/blog/2021/05/24/metastable.html \ No newline at end of file From 86ea4843d7b39edfa3685f8a09464d32680e90f2 Mon Sep 17 00:00:00 2001 From: LiamOdero <113386708+LiamOdero@users.noreply.github.com> Date: Sun, 19 Nov 2023 10:43:02 -0500 Subject: [PATCH 043/118] Create Code_Smells.md Created file and set-up headers --- Topics/Development_Process/Code_Smells.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 Topics/Development_Process/Code_Smells.md diff --git a/Topics/Development_Process/Code_Smells.md b/Topics/Development_Process/Code_Smells.md new file mode 100644 index 000000000..ed1938e03 --- /dev/null +++ b/Topics/Development_Process/Code_Smells.md @@ -0,0 +1,16 @@ +## Code Smells + + +## Refactoring + + +## A Motivating Example + + +## A Greater Example + + +## Categories + + +# More Info From c957a13733252bae9702e2d900b1fac9f0895aff Mon Sep 17 00:00:00 2001 From: LiamOdero <113386708+LiamOdero@users.noreply.github.com> Date: Sun, 19 Nov 2023 10:58:17 -0500 Subject: [PATCH 044/118] Update Code_Smells.md completed first header and reordered headers --- Topics/Development_Process/Code_Smells.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Topics/Development_Process/Code_Smells.md b/Topics/Development_Process/Code_Smells.md index ed1938e03..4e2026d3e 100644 --- a/Topics/Development_Process/Code_Smells.md +++ b/Topics/Development_Process/Code_Smells.md @@ -1,16 +1,16 @@ ## Code Smells - - -## Refactoring +Code smells refer to certain types of code that, while functional, will require increasing accommodation as more code begins to rely on the "smelly" code. While it is possible to ignore these types of code, +the longer that they remain, the harder it becomes to fix issues they directly or indirectly cause in the future. Therefore, it's in a developer's best interests to be familiar with a broad spectrum of code smells +so that they may identify and eliminate them as soon as possible. ## A Motivating Example -## A Greater Example +## Refactoring ## Categories -# More Info +## More Info From 0ffdebb16dadbeef0f6719aab775d2abc1a33a7e Mon Sep 17 00:00:00 2001 From: LiamOdero <113386708+LiamOdero@users.noreply.github.com> Date: Sun, 19 Nov 2023 11:31:19 -0500 Subject: [PATCH 045/118] Update Code_Smells.md Finished motivating example header --- Topics/Development_Process/Code_Smells.md | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/Topics/Development_Process/Code_Smells.md b/Topics/Development_Process/Code_Smells.md index 4e2026d3e..276a9e51b 100644 --- a/Topics/Development_Process/Code_Smells.md +++ b/Topics/Development_Process/Code_Smells.md @@ -1,11 +1,27 @@ ## Code Smells Code smells refer to certain types of code that, while functional, will require increasing accommodation as more code begins to rely on the "smelly" code. While it is possible to ignore these types of code, -the longer that they remain, the harder it becomes to fix issues they directly or indirectly cause in the future. Therefore, it's in a developer's best interests to be familiar with a broad spectrum of code smells +the longer that they remain, the harder it becomes to fix issues they directly or indirectly cause in the future. Therefore, it's in a developer's best interest to be familiar with a broad spectrum of code smells so that they may identify and eliminate them as soon as possible. ## A Motivating Example - +Consider the following snippet of code: + +``` +class Something: + temp_field: int + + def do_something(self) -> int: + if self.temp_field == None: + return -1 + else: + return self.temp_field + 1 +``` +On its own, this code is functional, but it raises a number of questions. For example: when exactly is `temp_field` equal to `None`? When does it actually store relevant data? This answer is +largely dependant on how the class `Something` is used, but the specifics may not be clear to someone reading this code. + +This code smell is known as a "Temporary Field", which is when classes are given attributes to be used in some of their methods, but in some cases the attribute stores null values. While adding null checks +easily allows code using these attributes to function, it decreases code readability, and if the technique is abused it can easily lead to unnecessarily long code. To fix this, refactoring is required. ## Refactoring From fa3d69cc520a43564fc90304b93f378e338f7b09 Mon Sep 17 00:00:00 2001 From: LiamOdero <113386708+LiamOdero@users.noreply.github.com> Date: Sun, 19 Nov 2023 11:55:41 -0500 Subject: [PATCH 046/118] Update Code_Smells.md Completed refactoring and categories headers --- Topics/Development_Process/Code_Smells.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/Topics/Development_Process/Code_Smells.md b/Topics/Development_Process/Code_Smells.md index 276a9e51b..af6400a64 100644 --- a/Topics/Development_Process/Code_Smells.md +++ b/Topics/Development_Process/Code_Smells.md @@ -11,9 +11,9 @@ Consider the following snippet of code: class Something: temp_field: int - def do_something(self) -> int: + def do_something(self) -> int | None: if self.temp_field == None: - return -1 + return None else: return self.temp_field + 1 ``` @@ -24,9 +24,20 @@ This code smell is known as a "Temporary Field", which is when classes are given easily allows code using these attributes to function, it decreases code readability, and if the technique is abused it can easily lead to unnecessarily long code. To fix this, refactoring is required. ## Refactoring +Refactoring is a software development practice in which code is rewritten such that no new functionality is actually provided, but the code becomes cleaner and better accommodates future extensions of +features. While it is generally recommended in software development that code should not be rewritten, but extended (see the [Open/Closed Principle of SOLID](../Development_Process.md#solid-principles), refactoring typically prevents more significant amounts of code rewriting that may be required in the future. +Many refactoring solutions to code smells are well-established and should be drawn upon once relevant code smells are identified. One such solution for the previous example is known as "Introduce Null Object", in which +attributes that may be null should be defined over a new "Null" class, which can provide default values when the aforementioned attribute would have previously been null. This contains any null checks to the new class, +allowing for the removal of if-statements in other code that may cause confusion or excessive code length. Furthermore, future code that may deal with the previously temporary field will also no longer need +any null checks, as the new class does it for them. Thus, refactoring improved both the readability and extendability of the former code. ## Categories - +While there may be many different types of code smells, all of them fall into one of five categories which can more easily be identified when writing code. The categories are as follows: +- Bloaters +- Object-Oriented Abusers +- Change Preventers +- Dispensables +- Couplers ## More Info From 3fb2bf9d5cd86b1c2b088d4c83b748de9e80e72a Mon Sep 17 00:00:00 2001 From: LiamOdero <113386708+LiamOdero@users.noreply.github.com> Date: Sun, 19 Nov 2023 11:58:48 -0500 Subject: [PATCH 047/118] Update Code_Smells.md finished the article --- Topics/Development_Process/Code_Smells.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Topics/Development_Process/Code_Smells.md b/Topics/Development_Process/Code_Smells.md index af6400a64..4eee94d1f 100644 --- a/Topics/Development_Process/Code_Smells.md +++ b/Topics/Development_Process/Code_Smells.md @@ -33,7 +33,7 @@ allowing for the removal of if-statements in other code that may cause confusion any null checks, as the new class does it for them. Thus, refactoring improved both the readability and extendability of the former code. ## Categories -While there may be many different types of code smells, all of them fall into one of five categories which can more easily be identified when writing code. The categories are as follows: +While there may be many different types of code smells, all of them fall into one of five categories that can more easily be identified when writing code. The categories are as follows: - Bloaters - Object-Oriented Abusers - Change Preventers @@ -41,3 +41,5 @@ While there may be many different types of code smells, all of them fall into on - Couplers ## More Info +For further insight into all the different types of code smells including explanations, examples, and solutions, the following resource is highly recommended: +https://refactoring.guru/refactoring/smells From 1bb26eeedc395fa900570f9c83f5f994e8b3beb8 Mon Sep 17 00:00:00 2001 From: LiamOdero <113386708+LiamOdero@users.noreply.github.com> Date: Sun, 19 Nov 2023 12:00:51 -0500 Subject: [PATCH 048/118] Update Development_Process.md Added link to code smells article --- Topics/Development_Process.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Topics/Development_Process.md b/Topics/Development_Process.md index f0efa913a..ec10af914 100644 --- a/Topics/Development_Process.md +++ b/Topics/Development_Process.md @@ -70,3 +70,6 @@ This is only a simplification of what "Clean Architecture" is; the topic is so v - A very detailed explanation of Clean Architecture by Robert C. Martin or Uncle Bob and his book - https://www.youtube.com/watch?v=2dKZ-dWaCiU - https://github.com/ropalma/ICMC-USP/blob/master/Book%20-%20Clean%20Architecture%20-%20Robert%20Cecil%20Martin.pdf + +## Code Smells +### [Code Smells](./Development_Process/Code_Smells.md) From 6b6895f700d75b7766a3ca1c6790d5769e831a7a Mon Sep 17 00:00:00 2001 From: alexma22 Date: Sun, 19 Nov 2023 20:19:10 -0500 Subject: [PATCH 049/118] Added a section about communicating tasks and deadlines with your team to Teamwork.md --- Topics/Teamwork.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/Topics/Teamwork.md b/Topics/Teamwork.md index ee483dcc4..7d102c986 100644 --- a/Topics/Teamwork.md +++ b/Topics/Teamwork.md @@ -11,6 +11,14 @@ Working as a team effectively requires a lot of planning and organization. Proje ## Team Communication During the early stages of forming a team, the group should also establish general expectations for how the team plans to communicate with one another. This may include setting up a team communication channel on a specific platform (ex. discord or slack) and establishing regular check-up meetings (including when these meetings are and where they will be held - for example, in person or online). These general meetings can be used to outline general expectations and project requirements, update one another on individual progress, delegate new reponsibilities, and set project deadlines. +An important part of team communication is in communicating tasks, deadlines and progress. Each team member should have good knowledge of the general progress of the project. This will give each team member a deeper understanding of the current state of the project so that they can more adequetly allocate their time. Perhaps even more importantly, the project manager will be able to have a deeper understanding of the progress of the project, and the team member's working habits and they will be able to manage the team more adequetly. + +With a deeper understanding of the project progress, project managers will be able to assign more realistic dates and deadlines, and keep team members on task and on the right tasks. With a deeper understanding of their team member's working habits they can also more adequetly update stakeholders amd allocate budget. This will help avoid unforseen issues while approaching deadlines. For instance, if a project lead notices that their team is lagging behind on a task for a specific deadline, then they will be able to correctly reassess the deadline, and the deeper insight will allow him to more accurately set future deadlines. + +In general, when setting goals for your team as a project manager, their are many things to consider, such as the clarity of the goal, the fact that it is a realistic goal, and that the goal is relevant and important to your project. Proper communication with your team members will aid in acheiving each of these goals, and correctly following these tips will help your team reach their goals and provide a better product to your client. In this process, organization is key, and a project manager must try to leverage all the tools available to him to improve his ability to manage the team. When it comes to deadline-setting and task prioritizing, one of the most powerful tools that a manager can use is a todo list or project board/roadmap. + +There are many useful options for this, such as [Notion](https://notion.notion.site/Product-roadmap-c5e8829bb9644dd08c576452ee200404) and [Trello](https://trello.com/b/1x4Uql2u/project-management. Both of these tools allow a project manager and their team to create a page, that they can all access to check important tasks and notes about those tasks. + ### Getting Clarification You always want to ensure that all team members are on the same page when working together. If you are ever unsure about something that was said during a meeting or have any confusions in general, ask your team members with specific and explicit questions. It is helpful to reiterate your understanding back to the team to confirm your understanding is correct. Some example phrases you may use (taken from [Week 8 Lecture Slide 12](https://q.utoronto.ca/courses/293515/files/25224801/download?download_frd=1)) includes: - "Can you please clarify..." From b0083c3f9143f197789dfc647a712e4019691d10 Mon Sep 17 00:00:00 2001 From: LiamOdero <113386708+LiamOdero@users.noreply.github.com> Date: Sun, 19 Nov 2023 21:20:28 -0500 Subject: [PATCH 050/118] Update Code_Smells.md Removed forced newlines --- Topics/Development_Process/Code_Smells.md | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/Topics/Development_Process/Code_Smells.md b/Topics/Development_Process/Code_Smells.md index 4eee94d1f..a4d032c96 100644 --- a/Topics/Development_Process/Code_Smells.md +++ b/Topics/Development_Process/Code_Smells.md @@ -1,7 +1,5 @@ ## Code Smells -Code smells refer to certain types of code that, while functional, will require increasing accommodation as more code begins to rely on the "smelly" code. While it is possible to ignore these types of code, -the longer that they remain, the harder it becomes to fix issues they directly or indirectly cause in the future. Therefore, it's in a developer's best interest to be familiar with a broad spectrum of code smells -so that they may identify and eliminate them as soon as possible. +Code smells refer to certain types of code that, while functional, will require increasing accommodation as more code begins to rely on the "smelly" code. While it is possible to ignore these types of code, the longer that they remain, the harder it becomes to fix issues they directly or indirectly cause in the future. Therefore, it's in a developer's best interest to be familiar with a broad spectrum of code smells so that they may identify and eliminate them as soon as possible. ## A Motivating Example @@ -17,20 +15,14 @@ class Something: else: return self.temp_field + 1 ``` -On its own, this code is functional, but it raises a number of questions. For example: when exactly is `temp_field` equal to `None`? When does it actually store relevant data? This answer is -largely dependant on how the class `Something` is used, but the specifics may not be clear to someone reading this code. +On its own, this code is functional, but it raises a number of questions. For example: when exactly is `temp_field` equal to `None`? When does it actually store relevant data? This answer is largely dependant on how the class `Something` is used, but the specifics may not be clear to someone reading this code. -This code smell is known as a "Temporary Field", which is when classes are given attributes to be used in some of their methods, but in some cases the attribute stores null values. While adding null checks -easily allows code using these attributes to function, it decreases code readability, and if the technique is abused it can easily lead to unnecessarily long code. To fix this, refactoring is required. +This code smell is known as a "Temporary Field", which is when classes are given attributes to be used in some of their methods, but in some cases the attribute stores null values. While adding null checks easily allows code using these attributes to function, it decreases code readability, and if the technique is abused it can easily lead to unnecessarily long code. To fix this, refactoring is required. ## Refactoring -Refactoring is a software development practice in which code is rewritten such that no new functionality is actually provided, but the code becomes cleaner and better accommodates future extensions of -features. While it is generally recommended in software development that code should not be rewritten, but extended (see the [Open/Closed Principle of SOLID](../Development_Process.md#solid-principles), refactoring typically prevents more significant amounts of code rewriting that may be required in the future. +Refactoring is a software development practice in which code is rewritten such that no new functionality is actually provided, but the code becomes cleaner and better accommodates future extensions of features. While it is generally recommended in software development that code should not be rewritten, but extended (see the [Open/Closed Principle of SOLID](../Development_Process.md#solid-principles), refactoring typically prevents more significant amounts of code rewriting that may be required in the future. -Many refactoring solutions to code smells are well-established and should be drawn upon once relevant code smells are identified. One such solution for the previous example is known as "Introduce Null Object", in which -attributes that may be null should be defined over a new "Null" class, which can provide default values when the aforementioned attribute would have previously been null. This contains any null checks to the new class, -allowing for the removal of if-statements in other code that may cause confusion or excessive code length. Furthermore, future code that may deal with the previously temporary field will also no longer need -any null checks, as the new class does it for them. Thus, refactoring improved both the readability and extendability of the former code. +Many refactoring solutions to code smells are well-established and should be drawn upon once relevant code smells are identified. One such solution for the previous example is known as "Introduce Null Object", in which attributes that may be null should be defined over a new "Null" class, which can provide default values when the aforementioned attribute would have previously been null. This contains any null checks to the new class, allowing for the removal of if-statements in other code that may cause confusion or excessive code length. Furthermore, future code that may deal with the previously temporary field will also no longer need any null checks, as the new class does it for them. Thus, refactoring improved both the readability and extendability of the former code. ## Categories While there may be many different types of code smells, all of them fall into one of five categories that can more easily be identified when writing code. The categories are as follows: From c3471b45641ebfc3e92ab2313579eb53bfc7454a Mon Sep 17 00:00:00 2001 From: alexma22 Date: Sun, 19 Nov 2023 21:33:58 -0500 Subject: [PATCH 051/118] Fixed some grammar as suggested. --- Topics/Teamwork.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/Teamwork.md b/Topics/Teamwork.md index 7d102c986..c5c78dafe 100644 --- a/Topics/Teamwork.md +++ b/Topics/Teamwork.md @@ -15,9 +15,9 @@ An important part of team communication is in communicating tasks, deadlines and With a deeper understanding of the project progress, project managers will be able to assign more realistic dates and deadlines, and keep team members on task and on the right tasks. With a deeper understanding of their team member's working habits they can also more adequetly update stakeholders amd allocate budget. This will help avoid unforseen issues while approaching deadlines. For instance, if a project lead notices that their team is lagging behind on a task for a specific deadline, then they will be able to correctly reassess the deadline, and the deeper insight will allow him to more accurately set future deadlines. -In general, when setting goals for your team as a project manager, their are many things to consider, such as the clarity of the goal, the fact that it is a realistic goal, and that the goal is relevant and important to your project. Proper communication with your team members will aid in acheiving each of these goals, and correctly following these tips will help your team reach their goals and provide a better product to your client. In this process, organization is key, and a project manager must try to leverage all the tools available to him to improve his ability to manage the team. When it comes to deadline-setting and task prioritizing, one of the most powerful tools that a manager can use is a todo list or project board/roadmap. +In general, when setting goals for your team as a project manager, there are many things to consider, such as the clarity of the goal, the fact that it is a realistic goal, and that the goal is relevant and important to your project. Proper communication with your team members will aid in acheiving each of these goals, and correctly following these tips will help your team reach their goals and provide a better product to your client. In this process, organization is key, and a project manager must try to leverage all the tools available to him to improve his ability to manage the team. When it comes to deadline-setting and task prioritizing, one of the most powerful tools that a manager can use is a todo list or project board/roadmap. -There are many useful options for this, such as [Notion](https://notion.notion.site/Product-roadmap-c5e8829bb9644dd08c576452ee200404) and [Trello](https://trello.com/b/1x4Uql2u/project-management. Both of these tools allow a project manager and their team to create a page, that they can all access to check important tasks and notes about those tasks. +There are many useful options for this, such as [Notion](https://notion.notion.site/Product-roadmap-c5e8829bb9644dd08c576452ee200404) and [Trello](https://trello.com/b/1x4Uql2u/project-management). Both of these tools allow a project manager and their team to create a page, that they can all access to check important tasks and notes about those tasks. ### Getting Clarification You always want to ensure that all team members are on the same page when working together. If you are ever unsure about something that was said during a meeting or have any confusions in general, ask your team members with specific and explicit questions. It is helpful to reiterate your understanding back to the team to confirm your understanding is correct. Some example phrases you may use (taken from [Week 8 Lecture Slide 12](https://q.utoronto.ca/courses/293515/files/25224801/download?download_frd=1)) includes: From a4e8cc0af5b9d1954c8eb424c14f2bd03b05a43d Mon Sep 17 00:00:00 2001 From: alexma22 Date: Sun, 19 Nov 2023 23:10:46 -0500 Subject: [PATCH 052/118] Added image and deeper explanation on how progress boards could be used. --- Topics/Teamwork.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/Topics/Teamwork.md b/Topics/Teamwork.md index c5c78dafe..3725ea780 100644 --- a/Topics/Teamwork.md +++ b/Topics/Teamwork.md @@ -19,6 +19,11 @@ In general, when setting goals for your team as a project manager, there are man There are many useful options for this, such as [Notion](https://notion.notion.site/Product-roadmap-c5e8829bb9644dd08c576452ee200404) and [Trello](https://trello.com/b/1x4Uql2u/project-management). Both of these tools allow a project manager and their team to create a page, that they can all access to check important tasks and notes about those tasks. +Here is an example progress board given by Trello: +![Image](https://i.imgur.com/mIJW3x5.png) +You may notice that there are several states for each task, from 'To Do' to 'Done' or even 'Blocked.' This allows the team to understand the progress of all their tasks, and even if a task was stopped. You will also notice that there are team members assigned to some tasks which gives clear communication to the whole team about who is working on what. As you can see, there is a lot of information that a project manager can gain through this kind of tool, and it will all help them with being able to guide their team as described above. + + ### Getting Clarification You always want to ensure that all team members are on the same page when working together. If you are ever unsure about something that was said during a meeting or have any confusions in general, ask your team members with specific and explicit questions. It is helpful to reiterate your understanding back to the team to confirm your understanding is correct. Some example phrases you may use (taken from [Week 8 Lecture Slide 12](https://q.utoronto.ca/courses/293515/files/25224801/download?download_frd=1)) includes: - "Can you please clarify..." From f3eb2fd6ca80f7929b2f8ec7fe0dac54c6b49c9d Mon Sep 17 00:00:00 2001 From: alyson647 Date: Mon, 20 Nov 2023 10:26:04 -0500 Subject: [PATCH 053/118] created md file --- Topics/Software_Engineering/Scrum.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 Topics/Software_Engineering/Scrum.md diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md new file mode 100644 index 000000000..4161a73ed --- /dev/null +++ b/Topics/Software_Engineering/Scrum.md @@ -0,0 +1 @@ +## Scrum Framework \ No newline at end of file From af0e63b2e58b40719d5343d88099af4c8196b0fc Mon Sep 17 00:00:00 2001 From: Kevin <66377873+kimxoals@users.noreply.github.com> Date: Mon, 20 Nov 2023 18:14:25 -0500 Subject: [PATCH 054/118] Added Set-up guide to run a pod --- Topics/Development_Process/kubernetes.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/Topics/Development_Process/kubernetes.md b/Topics/Development_Process/kubernetes.md index e588fdf9a..7828aa9bc 100644 --- a/Topics/Development_Process/kubernetes.md +++ b/Topics/Development_Process/kubernetes.md @@ -19,6 +19,30 @@ Kubernetes, also known as K8s, is an open-source platform that automates the man 3. **Volumes:** Provides a way to store data and stateful applications. 4. **Namespaces:** Enable multiple virtual clusters on the same physical cluster. +## Set-up (For macOs) +1. **Install Homebrew** (if not already installed): + [Homebrew](https://brew.sh/) + +2. **Install Minikube via Homebrew**: + - In Terminal, run `brew install minikube`. + +3. **Start Minikube**: + - Run `minikube start` in Terminal. This command starts a local Kubernetes cluster. + +4. **Check the Minikube Status**: + - Run `minikube status` to ensure everything is up and running. + +5. **Install `kubectl`**: + - If you don't have `kubectl` installed, run `brew install kubectl`. + +6. **Run a Kubernetes Pod**: + - Use `kubectl` to run a pod, for example, `kubectl run my-pod --image=nginx`. Replace `my-pod` with your desired pod name and `nginx` with the Docker image you want to use. + +7. **Check the Pod Status**: + - Run `kubectl get pods` to see if your pod is running. + +That's it! + ## Conclusion Kubernetes is a powerful tool for managing containerized applications, providing efficiency and flexibility in application deployment and management. From 70c8b88b28e63c9970c9259d6918292c51b237b8 Mon Sep 17 00:00:00 2001 From: Kevin <66377873+kimxoals@users.noreply.github.com> Date: Mon, 20 Nov 2023 18:17:25 -0500 Subject: [PATCH 055/118] Added link to set-up guide --- Topics/Development_Process/kubernetes.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Topics/Development_Process/kubernetes.md b/Topics/Development_Process/kubernetes.md index 7828aa9bc..3dc0165e3 100644 --- a/Topics/Development_Process/kubernetes.md +++ b/Topics/Development_Process/kubernetes.md @@ -42,6 +42,7 @@ Kubernetes, also known as K8s, is an open-source platform that automates the man - Run `kubectl get pods` to see if your pod is running. That's it! +For more in depth tutorial follow this [documentation](https://kubernetes.io/docs/setup/) ## Conclusion From 991e7f8b5c1edd5f0ff34de1df3cfdfecc087ca0 Mon Sep 17 00:00:00 2001 From: Kevin <66377873+kimxoals@users.noreply.github.com> Date: Mon, 20 Nov 2023 18:44:56 -0500 Subject: [PATCH 056/118] Added Use cases examples --- Topics/Development_Process/kubernetes.md | 26 ++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/Topics/Development_Process/kubernetes.md b/Topics/Development_Process/kubernetes.md index 3dc0165e3..27495722e 100644 --- a/Topics/Development_Process/kubernetes.md +++ b/Topics/Development_Process/kubernetes.md @@ -19,6 +19,32 @@ Kubernetes, also known as K8s, is an open-source platform that automates the man 3. **Volumes:** Provides a way to store data and stateful applications. 4. **Namespaces:** Enable multiple virtual clusters on the same physical cluster. +## Why Use Kubernetes? +Beside the key features Kubernetes also favo +- **Portability:** Works across various cloud and on-premises environments. +- **Scalability:** Easily scales applications up or down based on demand. +- **Community Support:** Strong community and ecosystem with numerous resources for learning and troubleshooting. + +## Kubernetes Use Cases + +### Real life Example - Reddit's Infrastructure Modernization +- **Challenge**: Overcoming limitations of traditional provisioning and configuration. +- **Solution**: Adopted Kubernetes as the core of their internal infrastructure. +- **Outcome**: Addressed drawbacks and failures of the old system, enhancing site reliability​``【oaicite:1】``​. +- +### Large Scale App Deployment +- **Automation and Scaling:** Ideal for large applications, offering features like horizontal pod scaling and load balancing. +- **Handling Traffic Surges:** Efficient during high-traffic periods and hardware issues. + +### Managing Microservices +- **Efficient Communication:** Facilitates communication between smaller, independent services in a microservice architecture. +- **Complex Scenario Management:** Aids in managing complex communications and resource distribution. + +### CI/CD Software Development +- **Automation in Pipelines:** Enhances CI/CD processes with automation, improving resource management. +- **Integration with DevOps Tools:** Often used alongside Jenkins, Docker, and other DevOps tools. + + ## Set-up (For macOs) 1. **Install Homebrew** (if not already installed): [Homebrew](https://brew.sh/) From 95329c33a7cb08885944de90b5b6fb9ffef84f68 Mon Sep 17 00:00:00 2001 From: NonLan Date: Mon, 20 Nov 2023 19:28:32 -0500 Subject: [PATCH 057/118] More Descriptive "Testing Your App" --- Topics/Tech_Stacks/swift.md | 42 +++++++++++++++++++++++++++++++++---- 1 file changed, 38 insertions(+), 4 deletions(-) diff --git a/Topics/Tech_Stacks/swift.md b/Topics/Tech_Stacks/swift.md index bf55995a6..5939c9631 100644 --- a/Topics/Tech_Stacks/swift.md +++ b/Topics/Tech_Stacks/swift.md @@ -57,12 +57,46 @@ This information can be changed later, so for starters you can leave `Team` to b Make sure to use `SwiftUI` and `Swift` as your interface and language respectively, then click `Next` to choose where to store your project, and now you're ready to start. -## Testing Your App +## Testing Your App - Unit Tests +In Xcode, unit tests are written using the [XCTest](https://developer.apple.com/documentation/xctest) framework. + +You can add a new unit test case by going to `New File` and selecting the `Unit Test Case Class` template. Xcode will then automatically set up a test case class, and you can write your unit test there. + +Unit tests in Xcode work as they do in any other language. One major difference to take note of is that assertions and other functions you may require for unit testing are a part of the `XCTest` framework. For an outline of this framework and its functions, please refer to Apple's [documentation](https://developer.apple.com/documentation/xctest). + +## Testing Your App - Debugging +Xcode hosts its own suite of debugging tools. Breakpoints generally serve as the basis for such debugging. + +You can [set a breakpoint](https://developer.apple.com/documentation/xcode/setting-breakpoints-to-pause-your-running-app) anywhere in your code by clicking the line number at which you want to place the breakpoint. The line number will then be surrounded by the blue breakpoint icon to indicate a breakpoint. You can manage your breakpoints at any time by clicking the `Breakpoint Navigator` in the navigator area. + +When you next run your app, the app execution will pause at the site of the breakpoint. You will be able to see your variables in the Variable view in the bottom panel. You can then continue or step through the rest of your code and watch your variables change accordingly by clicking the appropriate buttons in the Debugger console in the bottom panel. For more detailed help with breakpoints and the Debugger console, see [here](https://developer.apple.com/documentation/xcode/stepping-through-code-and-inspecting-variables-to-isolate-bugs). + +## Testing Your App - Simulators: Background Xcode has [built-in simulators for many Apple devices](https://developer.apple.com/documentation/xcode/running-your-app-in-simulator-or-on-a-device) -you can use to run your code and see how it performs. You can also download new simulators for specific a device and operating system version to test -different scenarios, such as an iPhone 11 running iOS 13. +you can use to run your code and see how it performs. +Simulators in Xcode are a powerful tool for emulating, in real-time, a user’s app experience. You can download new simulators for a specific device and operating system version to test different scenarios, such as an iPhone 11 running iOS 13. + +## Testing Your App - Simulators: Setup +To configure a Simulator, go to `Windows` > `Devices and Simulators` and press the plus (`+`) button. You can then specify your configuration. Here, you can pick a simulation device (iPhone 14, iPad Pro, Apple Watch, etc.) in `Simulation`. Depending on the device of your choice, you may need to [download its Simulator runtime](https://developer.apple.com/documentation/xcode/installing-additional-simulator-runtimes). + +If you have your own Apple device, you can connect the device to your Mac to use it as your testing environment by connecting it with the appropriate cable and following the on-screen instructions. Note that as of iOS 14, from your device, you may initially have to go to `Settings` > `Privacy & Security` > `Developer Mode` to allow your device to run your app. + +## Testing Your App - Simulators: Build and Run +An app can be built and run at any point in time by pressing the play button on the upper-left side of the window. You can do the same, and access additional build options, from `Product`. Note that the simulator will not run if the app cannot be built, and Xcode will highlight the errors that need to be resolved in the leftmost panel. You can also go to `View` > `Navigators` > `Show Issue Navigator` to see these errors. + +## Testing Your App - Simulators: Interactions +Once inside the Simulator window, you will notice several new tabs along the top of the Mac to help you in your tests. + +The iOS device can generally be interacted with on your Mac as you would on the actual device. For example, swiping and tapping act the same way as they would on the real device. Some other device interactions, like changing the orientation of the device, can be done by going to `Device` and selecting the desired option. Note that some interactions are simulated in a slightly different way than they occur on the real device. They can all be found [here](https://developer.apple.com/documentation/xcode/interacting-with-your-app-in-the-ios-or-ipados-simulator). + +The `I/O` tab hosts several options for changing how your Mac handles inputs and outputs, for example, if you'd like to change the output audio device. -If you have your own Apple device, you can also connect it to your Mac device and run your app on it for testing. Note that as of iOS 14, from your device, you will have to first go to `Settings` > `Privacy & Security` > `Developer Mode` first to allow your device to run apps downloaded from Xcode. +The `Features` tab hosts a plethora of features to help test the functionality of your app in a real-time setting. Note that some of these features may not function correctly if your simulated device does not accept the appropriate permissions. For example, to test locational features, you may need to enable these settings in the simulated test environment. Some notable features are as follows, and availability may depend on simulation device and iOS version: +* FaceID and Authorize Apple Pay can be used to determine how your app handles these cases, if these interactions are ever requested by your app. +* Toggle Appearance changes the device's view mode setting between light mode and dark mode so that you can see how your app’s UI may change depending on these user settings. +* Increase/Decrease Preferred Text Size will show you how your app’s UI may change depending on the user’s text size. +* Toggle Increased Contrast will show you how your app’s UI may change depending on whether the user is using their device in increased or regular contrast. +* Location lets you simulate a device location, should your app have any location-dependent services such as CLLocation or MapKit. You can set a current location with latitude and longitude coordinates or simulate device movement with speeds ranging between running on foot to driving on the expressway. ## Other Useful Resources [Learn about the different data types in Swift](https://www.hackingwithswift.com/read/0/3/types-of-data). Each language has its own nuances in how From 0472bbe552e772913e1831a4fb63128df902f90e Mon Sep 17 00:00:00 2001 From: NonLan Date: Mon, 20 Nov 2023 19:31:33 -0500 Subject: [PATCH 058/118] Table of contents --- Topics/Tech_Stacks/swift.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/swift.md b/Topics/Tech_Stacks/swift.md index 5939c9631..01fbaa203 100644 --- a/Topics/Tech_Stacks/swift.md +++ b/Topics/Tech_Stacks/swift.md @@ -5,7 +5,9 @@ ### [Why Use Swift?](#why-use-swift-1) ### [What is SwiftUI?](#what-is-swiftui-1) ### [Starting a Swift Project](#starting-a-swift-project-1) -### [Testing Your App](#testing-your-app-1) +### [Testing Your App - Unit Tests](#testing-your-app---unit-tests) +### [Testing Your App - Debugging](#testing-your-app---debugging) +### [Testing Your App - Simulators](#testing-your-app---simulators-background) ### [Other Useful Resources](#other-useful-resources-1) ## Introduction From eca836aac500910704708125949b84ee0ca687e2 Mon Sep 17 00:00:00 2001 From: NonLan Date: Mon, 20 Nov 2023 19:33:35 -0500 Subject: [PATCH 059/118] fix table of contents --- Topics/Tech_Stacks/swift.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/swift.md b/Topics/Tech_Stacks/swift.md index 01fbaa203..4003c544c 100644 --- a/Topics/Tech_Stacks/swift.md +++ b/Topics/Tech_Stacks/swift.md @@ -5,8 +5,8 @@ ### [Why Use Swift?](#why-use-swift-1) ### [What is SwiftUI?](#what-is-swiftui-1) ### [Starting a Swift Project](#starting-a-swift-project-1) -### [Testing Your App - Unit Tests](#testing-your-app---unit-tests) -### [Testing Your App - Debugging](#testing-your-app---debugging) +### [Testing Your App - Unit Tests](#testing-your-app---unit-tests-1) +### [Testing Your App - Debugging](#testing-your-app---debugging-1) ### [Testing Your App - Simulators](#testing-your-app---simulators-background) ### [Other Useful Resources](#other-useful-resources-1) From 4a74561b95da15797924a20e69c757783decdca5 Mon Sep 17 00:00:00 2001 From: bw55555 Date: Mon, 20 Nov 2023 19:49:50 -0500 Subject: [PATCH 060/118] Create Cypress.md --- Topics/Tech_Stacks/Cypress.md | 65 +++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 Topics/Tech_Stacks/Cypress.md diff --git a/Topics/Tech_Stacks/Cypress.md b/Topics/Tech_Stacks/Cypress.md new file mode 100644 index 000000000..bf91b68e5 --- /dev/null +++ b/Topics/Tech_Stacks/Cypress.md @@ -0,0 +1,65 @@ +## E2E Testing with Cypress + +# Cypress Introduction + +Cypress is mainly used for testing web applications, especially those built in javascript. It provides an interface to programatically test your application, and visually what went wrong (or right) in tests. + +# Why do end to end testing? + +[https://circleci.com/blog/what-is-end-to-end-testing/](https://circleci.com/blog/what-is-end-to-end-testing/) + +The above link has a good explanation on what end to end testing is and why it should be used. + +Cypress very closely mimics a real user, think of it as a robot accessing your website from a browser like a human would, but you can program the robot to interact with your website however you like and programmatically check the output on the screen. + +# Installation and setup: + +Cypress can be automatically installed with npm: `npm install cypress` + +See [https://docs.cypress.io/guides/getting-started/installing-cypress](https://docs.cypress.io/guides/getting-started/installing-cypress) for more details. + +To run cypress, we can use the command `npx cypress open` and follow the instructions provided on the UI. + +See [https://docs.cypress.io/guides/getting-started/opening-the-app](https://docs.cypress.io/guides/getting-started/opening-the-app) for more details. + +# The basics + +Cypress has an extremely detailed guide for getting started, explains how to create and run tests, and there is also a lot of information linked as well. + +[https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test) + +[https://docs.cypress.io/guides/core-concepts/introduction-to-cypress](https://docs.cypress.io/guides/core-concepts/introduction-to-cypress) + +I highly recommend reading through the above two links, and the entirety of the core concepts section in the documentation. It gives a thorough introduction on how cypress works and how to use it to test your application. + +# Best Practices + +Cypress provides their own list of best practices here: [https://docs.cypress.io/guides/references/best-practices](https://docs.cypress.io/guides/references/best-practices) + +One common use case for cypress (and UI testing in general) is to test responsiveness, does the UI look like it should in different viewports? + +While it is possible to duplicate tests, this may cause you to need to repeat large parts of the code to select elements and fill out forms, which has nothing to do with + +It is much easier to use the beforeEach() hook and a cypress context() to bundle viewpoints together. As an example: + +```javascript +viewports = [{“name”: “small”, “dim”: [300, 800]}, + {“name”: “large”, “dim": [300, 800]] + +viewports.forEach(viewport => { + cy.context(“Viewport” + viewport.name, () => { + cy.beforeEach(() => { + cy.viewport(viewport.dim[0], viewport.dim[1]) + }) + //tests go here + }) +} +``` +In tests, you can include snippets of code like +``` +if (viewport.name == ‘small’) { + cy.get("@somedivmobileonly").should('exist') +} else if (viewport.name == 'large') { + cy.get("@somedivmobileonly").should('not.exist') +} +``` From 1c6f92ccc267d0c57297f73d07e1e12ea0916df6 Mon Sep 17 00:00:00 2001 From: alyson647 Date: Mon, 20 Nov 2023 21:39:56 -0500 Subject: [PATCH 061/118] added basic structure for file --- Topics/Software_Engineering/Scrum.md | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md index 4161a73ed..18ff1cbbf 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -1 +1,17 @@ -## Scrum Framework \ No newline at end of file +## Scrum Framework + +### What is scrum? + +### Scrum principles + +### What are sprints? + +### Members of a scrum team + +### Scrum artifacts + +### Scrum events/ceremonies + +### Why is scrum important? + +### Resources / further reading \ No newline at end of file From 683d758549ff231767dcf75cf2df85ba61708584 Mon Sep 17 00:00:00 2001 From: alyson647 Date: Mon, 20 Nov 2023 21:59:33 -0500 Subject: [PATCH 062/118] wrote rough draft for some sections --- Topics/Software_Engineering/Scrum.md | 32 ++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md index 18ff1cbbf..dd6bc70cf 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -1,15 +1,43 @@ ## Scrum Framework ### What is scrum? - -### Scrum principles +Scrum is an agile project management framework that helps teams organize and manage their work. It can be thought of a a way to implement agile principles. While most often used in software development teams, these principles can be applied to others teams in HR, accounting and finance, government projects, etc. The term for this framework was coined from the 1986 Harvard Business Review article where the authors compared high-performing teams to the scrum formation used by rugby teams. Overall, scrum is for using a self-organizing team to deliver something valueable to customers in a specified time frame called a sprint. Scrum uses artifacts, ceremonies/events, and roles associated with each sprint to get the work done. + +### Scrum values +- Commitment + - Team members should make sure to commit to the right amount of work they can complete, and not overcommit + - They should be committed to their time-based tasks +- Courage + - Team members should have the courage to question processes and ask open, challenging questions to anything that hinders the ability to move forward, with open discussion +- Focus + - The team must be focused on their selected tasks in order to complete the speccified work within a sprint +- Openness + - There should be regular meetings, such as daily standups, to openly talk about progress and blockers + - The team should be open to new ideas +- Respect + - Everyone should recognize team member's contributions and accomplishments + - Respect for one another is important to ensure mutual collaboration and cooperation ### What are sprints? +A sprint is a short time period where the scrum team works to get a specified amount of work finished. Sprints usually correspond to some set of features a team wants to add, completing specific product additions. The goal of a sprint varies from team to team, some teams having a finished product that can be deployed to customers, or the goal can be to complete a subset/section of a bigger product. The usual timeline for a sprint is two weeks but differs between teams. + ### Members of a scrum team +A scrum team consists of three specific roles: +- Product owner: + - The product owner is the expert on understanding the business, customer and marketing requirements + - They focus on ensuring the development team delivers the most value to the business and understand the changing needs of user and customers the best +- Scrum master: + - Scrum masters coach team and organize/schedule resources for scrum meetings + - Their goals is to optimize the flow for the scrum team to ensure maximal productivity and minimal road blocks +- Development team: + - The development team are the ones who work on creating the product/working on items in the sprint, according to the specifications from the product owner + - The development team consists of developers, UX specialists, Ops engineers, testers, and designers + - The members of the development team have different skill sets and will cross-train teach other to prevent any members becoming a bottle-neck ### Scrum artifacts + ### Scrum events/ceremonies ### Why is scrum important? From 61197991cb07397c4df9f82f85d0e16d91d5c84c Mon Sep 17 00:00:00 2001 From: alyson647 Date: Mon, 20 Nov 2023 22:17:35 -0500 Subject: [PATCH 063/118] completed rough drafts of artifcacts and events --- Topics/Software_Engineering/Scrum.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md index dd6bc70cf..078a24c1e 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -36,9 +36,34 @@ A scrum team consists of three specific roles: - The members of the development team have different skill sets and will cross-train teach other to prevent any members becoming a bottle-neck ### Scrum artifacts +Scrum artifacts are information that a scrum team uses and refers to that details the product being developed, the specific tasks involved in a sprint cycle, and the end goal. There are three artifacts: +- Product backlog: + - The product backlog is the primary list of work that needs to get done and is maintained by the product owner or product manager + - It functions as a big to do list that is adaptable to adjustments and changes over time +- Sprint backlog: + - The sprint backlog is the list of user stories or bug fixes that need to get done by this current sprint cycle + - The sprint backlog is planned thoroughly before each sprint and is chosen from the product backlog +- Increment (sprint goal): + - The increment, or otherwise known as the sprint goal, is the end-product from a sprint + - The definition of the sprint goal changes from team to team, as for some it means a product or features usable to customers by the end of the sprint, and for other teams, the end product is the completed part of a bigger project ### Scrum events/ceremonies +The scrum framework incorporates regular meetings, and events that teams perform regularly. In scrum, there are five regularly held events: +- Organization of backlog: + - The responsibility of the product owner, they will make sure to continually update and maintain the product backlog, using user feedback and feedback from the devleopment team +- Sprint planning: + - The user stories and/or bug fixes to be completed during the current sprint are planned during this meeting that includes the development team and is led by the scrum master + - In this meeting a goal is decided upon and items from the product backlog are added in accordance to this goal +- Sprint: + - This is a time period where the scrum team works together to complete items in the scope of the sprint, usually being two weeks +- Daily standup: + - The standup is a regularly scheduled meeting in which members of the scrum team will update members on their progress and bring up and blockers they are facing with their work +- Sprint review: + - This occurs at the end of the sprint, where the team meets to have an information session to demo the end-product and showcases the completed backlog items +- Sprint retrospective: + - Also occurs at the end of the sprint, the retro is where the team meets to discuss the aspects of the sprint that worked and did not work + - This builds in feedback and continual improvement of processes in the scrum framework ### Why is scrum important? From f47878c797d90b221138744a8707a717e119195c Mon Sep 17 00:00:00 2001 From: alyson647 Date: Mon, 20 Nov 2023 23:01:27 -0500 Subject: [PATCH 064/118] more rough draft and added links to resources --- Topics/Software_Engineering/Scrum.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md index 078a24c1e..46c0f921b 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -66,5 +66,10 @@ The scrum framework incorporates regular meetings, and events that teams perform - This builds in feedback and continual improvement of processes in the scrum framework ### Why is scrum important? +The scrum framework is used so often since it provides an efficient and adaptable way to organize and manage teams and products. This being a team centric framework where teams are self managed and organized, it provides members to be more creative and innovative, having the flexibility to organize work based on their personalities and work styles. Scrum provides concrete roles, events, artifacts, principles and values to follow. These aspects of scrum can be incorporated into 301 project teams to stay focused and get the project done in the short amount of time we're given. -### Resources / further reading \ No newline at end of file +### Resources and further reading +- [Atlassin - scrum](https://www.atlassian.com/agile/scrum) +- [Amazon - scrum](https://aws.amazon.com/what-is/scrum/) +- [Techtarget - scrum](https://www.techtarget.com/searchsoftwarequality/definition/Scrum) +- [Scrum artifacts](https://www.atlassian.com/agile/scrum/artifacts#:~:text=All%20articles,%2C%20sprint%20backlog%2C%20and%20increments.) From 2ad00a61927e7c778d2d7f428b76dca58f94203b Mon Sep 17 00:00:00 2001 From: Kevin <66377873+kimxoals@users.noreply.github.com> Date: Tue, 21 Nov 2023 00:24:13 -0500 Subject: [PATCH 065/118] Changed Set-up steps to links and fixed typos --- Topics/Development_Process/kubernetes.md | 31 +++++++----------------- 1 file changed, 9 insertions(+), 22 deletions(-) diff --git a/Topics/Development_Process/kubernetes.md b/Topics/Development_Process/kubernetes.md index 27495722e..bc10a99b7 100644 --- a/Topics/Development_Process/kubernetes.md +++ b/Topics/Development_Process/kubernetes.md @@ -6,7 +6,7 @@ Kubernetes, also known as K8s, is an open-source platform that automates the man ## Key Features -- **Auto Scailing:** Kubernetes automatically scales its resources dyamically to meet application's demand. +- **Auto Scaling:** Kubernetes automatically scales its resources dynamically to meet application's demand. - **Container Orchestration:** Kubernetes efficiently manages containers across multiple hosts. - **Self-healing:** It automatically restarts containers that fail, replaces them, and kills containers that don't respond to user-defined health checks. - **Load Balancing:** Kubernetes can distribute network traffic to ensure stability. @@ -20,7 +20,7 @@ Kubernetes, also known as K8s, is an open-source platform that automates the man 4. **Namespaces:** Enable multiple virtual clusters on the same physical cluster. ## Why Use Kubernetes? -Beside the key features Kubernetes also favo + - **Portability:** Works across various cloud and on-premises environments. - **Scalability:** Easily scales applications up or down based on demand. - **Community Support:** Strong community and ecosystem with numerous resources for learning and troubleshooting. @@ -45,30 +45,17 @@ Beside the key features Kubernetes also favo - **Integration with DevOps Tools:** Often used alongside Jenkins, Docker, and other DevOps tools. -## Set-up (For macOs) -1. **Install Homebrew** (if not already installed): - [Homebrew](https://brew.sh/) - -2. **Install Minikube via Homebrew**: - - In Terminal, run `brew install minikube`. - -3. **Start Minikube**: - - Run `minikube start` in Terminal. This command starts a local Kubernetes cluster. - -4. **Check the Minikube Status**: - - Run `minikube status` to ensure everything is up and running. +## Set-up Kubernetes +The Kubernetes command-line tool, [kubectl](https://kubernetes.io/docs/reference/kubectl/kubectl/), allows you to run commands against Kubernetes clusters. -5. **Install `kubectl`**: - - If you don't have `kubectl` installed, run `brew install kubectl`. +You can use kubectl to deploy applications, inspect and manage cluster resources, and view logs. For more information including a complete list of kubectl operations, see the kubectl reference documentation. -6. **Run a Kubernetes Pod**: - - Use `kubectl` to run a pod, for example, `kubectl run my-pod --image=nginx`. Replace `my-pod` with your desired pod name and `nginx` with the Docker image you want to use. +[Install kubectl on Linux](https://kubernetes.io/docs/tasks/tools/install-kubectl-linux/) +[Install kubectl on macOS](https://kubernetes.io/docs/tasks/tools/install-kubectl-macos/) +[Install kubectl on Windows](https://kubernetes.io/docs/tasks/tools/install-kubectl-windows/) -7. **Check the Pod Status**: - - Run `kubectl get pods` to see if your pod is running. -That's it! -For more in depth tutorial follow this [documentation](https://kubernetes.io/docs/setup/) +Visit [here](https://kubernetes.io/docs/setup/) for more general guide ## Conclusion From 0cf602d81c760d702c1bf2edd2ddf702d6b44c9d Mon Sep 17 00:00:00 2001 From: Kevin <66377873+kimxoals@users.noreply.github.com> Date: Tue, 21 Nov 2023 00:24:47 -0500 Subject: [PATCH 066/118] removed empty bullet list --- Topics/Development_Process/kubernetes.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Development_Process/kubernetes.md b/Topics/Development_Process/kubernetes.md index bc10a99b7..a08c7bc8e 100644 --- a/Topics/Development_Process/kubernetes.md +++ b/Topics/Development_Process/kubernetes.md @@ -31,7 +31,7 @@ Kubernetes, also known as K8s, is an open-source platform that automates the man - **Challenge**: Overcoming limitations of traditional provisioning and configuration. - **Solution**: Adopted Kubernetes as the core of their internal infrastructure. - **Outcome**: Addressed drawbacks and failures of the old system, enhancing site reliability​``【oaicite:1】``​. -- + ### Large Scale App Deployment - **Automation and Scaling:** Ideal for large applications, offering features like horizontal pod scaling and load balancing. - **Handling Traffic Surges:** Efficient during high-traffic periods and hardware issues. From 6132bd8953ac83b5800c9d633163efa444af8e59 Mon Sep 17 00:00:00 2001 From: Kevin <66377873+kimxoals@users.noreply.github.com> Date: Tue, 21 Nov 2023 00:27:51 -0500 Subject: [PATCH 067/118] fixed line spacing on the links --- Topics/Development_Process/kubernetes.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Topics/Development_Process/kubernetes.md b/Topics/Development_Process/kubernetes.md index a08c7bc8e..340282e21 100644 --- a/Topics/Development_Process/kubernetes.md +++ b/Topics/Development_Process/kubernetes.md @@ -51,7 +51,9 @@ The Kubernetes command-line tool, [kubectl](https://kubernetes.io/docs/reference You can use kubectl to deploy applications, inspect and manage cluster resources, and view logs. For more information including a complete list of kubectl operations, see the kubectl reference documentation. [Install kubectl on Linux](https://kubernetes.io/docs/tasks/tools/install-kubectl-linux/) + [Install kubectl on macOS](https://kubernetes.io/docs/tasks/tools/install-kubectl-macos/) + [Install kubectl on Windows](https://kubernetes.io/docs/tasks/tools/install-kubectl-windows/) From d2d1fd7568e4b950c132717c0d1f4a87789e9245 Mon Sep 17 00:00:00 2001 From: Kevin <66377873+kimxoals@users.noreply.github.com> Date: Tue, 21 Nov 2023 00:29:07 -0500 Subject: [PATCH 068/118] added bullet points to the set up links --- Topics/Development_Process/kubernetes.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Topics/Development_Process/kubernetes.md b/Topics/Development_Process/kubernetes.md index 340282e21..f5e643490 100644 --- a/Topics/Development_Process/kubernetes.md +++ b/Topics/Development_Process/kubernetes.md @@ -50,11 +50,11 @@ The Kubernetes command-line tool, [kubectl](https://kubernetes.io/docs/reference You can use kubectl to deploy applications, inspect and manage cluster resources, and view logs. For more information including a complete list of kubectl operations, see the kubectl reference documentation. -[Install kubectl on Linux](https://kubernetes.io/docs/tasks/tools/install-kubectl-linux/) +- [Install kubectl on Linux](https://kubernetes.io/docs/tasks/tools/install-kubectl-linux/) -[Install kubectl on macOS](https://kubernetes.io/docs/tasks/tools/install-kubectl-macos/) +- [Install kubectl on macOS](https://kubernetes.io/docs/tasks/tools/install-kubectl-macos/) -[Install kubectl on Windows](https://kubernetes.io/docs/tasks/tools/install-kubectl-windows/) +- [Install kubectl on Windows](https://kubernetes.io/docs/tasks/tools/install-kubectl-windows/) Visit [here](https://kubernetes.io/docs/setup/) for more general guide From 1b04b8b98c05ec5bb47356120604cd52e7087104 Mon Sep 17 00:00:00 2001 From: NonLan Date: Tue, 21 Nov 2023 15:08:46 -0500 Subject: [PATCH 069/118] reorder --- Topics/Tech_Stacks/swift.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/Topics/Tech_Stacks/swift.md b/Topics/Tech_Stacks/swift.md index 4003c544c..7fe741891 100644 --- a/Topics/Tech_Stacks/swift.md +++ b/Topics/Tech_Stacks/swift.md @@ -6,8 +6,8 @@ ### [What is SwiftUI?](#what-is-swiftui-1) ### [Starting a Swift Project](#starting-a-swift-project-1) ### [Testing Your App - Unit Tests](#testing-your-app---unit-tests-1) -### [Testing Your App - Debugging](#testing-your-app---debugging-1) ### [Testing Your App - Simulators](#testing-your-app---simulators-background) +### [Testing Your App - Debugging](#testing-your-app---debugging-1) ### [Other Useful Resources](#other-useful-resources-1) ## Introduction @@ -66,13 +66,6 @@ You can add a new unit test case by going to `New File` and selecting the `Unit Unit tests in Xcode work as they do in any other language. One major difference to take note of is that assertions and other functions you may require for unit testing are a part of the `XCTest` framework. For an outline of this framework and its functions, please refer to Apple's [documentation](https://developer.apple.com/documentation/xctest). -## Testing Your App - Debugging -Xcode hosts its own suite of debugging tools. Breakpoints generally serve as the basis for such debugging. - -You can [set a breakpoint](https://developer.apple.com/documentation/xcode/setting-breakpoints-to-pause-your-running-app) anywhere in your code by clicking the line number at which you want to place the breakpoint. The line number will then be surrounded by the blue breakpoint icon to indicate a breakpoint. You can manage your breakpoints at any time by clicking the `Breakpoint Navigator` in the navigator area. - -When you next run your app, the app execution will pause at the site of the breakpoint. You will be able to see your variables in the Variable view in the bottom panel. You can then continue or step through the rest of your code and watch your variables change accordingly by clicking the appropriate buttons in the Debugger console in the bottom panel. For more detailed help with breakpoints and the Debugger console, see [here](https://developer.apple.com/documentation/xcode/stepping-through-code-and-inspecting-variables-to-isolate-bugs). - ## Testing Your App - Simulators: Background Xcode has [built-in simulators for many Apple devices](https://developer.apple.com/documentation/xcode/running-your-app-in-simulator-or-on-a-device) you can use to run your code and see how it performs. @@ -100,6 +93,13 @@ The `Features` tab hosts a plethora of features to help test the functionality o * Toggle Increased Contrast will show you how your app’s UI may change depending on whether the user is using their device in increased or regular contrast. * Location lets you simulate a device location, should your app have any location-dependent services such as CLLocation or MapKit. You can set a current location with latitude and longitude coordinates or simulate device movement with speeds ranging between running on foot to driving on the expressway. +## Testing Your App - Debugging +Xcode hosts its own suite of debugging tools. Breakpoints generally serve as the basis for such debugging. + +You can [set a breakpoint](https://developer.apple.com/documentation/xcode/setting-breakpoints-to-pause-your-running-app) anywhere in your code by clicking the line number at which you want to place the breakpoint. The line number will then be surrounded by the blue breakpoint icon to indicate a breakpoint. You can manage your breakpoints at any time by clicking the `Breakpoint Navigator` in the navigator area. + +When you next run your app, the app execution will pause at the site of the breakpoint. You will be able to see your variables in the Variable view in the bottom panel. You can then continue or step through the rest of your code and watch your variables change accordingly by clicking the appropriate buttons in the Debugger console in the bottom panel. For more detailed help with breakpoints and the Debugger console, see [here](https://developer.apple.com/documentation/xcode/stepping-through-code-and-inspecting-variables-to-isolate-bugs). + ## Other Useful Resources [Learn about the different data types in Swift](https://www.hackingwithswift.com/read/0/3/types-of-data). Each language has its own nuances in how variables are declared and stored, useful to become familiar with it before starting to code. From 70082a0eae4c60707c5d1fb23ab8164e3a465a02 Mon Sep 17 00:00:00 2001 From: Komal Saini <52506101+komal-saini@users.noreply.github.com> Date: Wed, 22 Nov 2023 11:38:46 -0500 Subject: [PATCH 070/118] create Deploying_Personal_Website.md --- .../Deploying_Personal_Website.md | 92 +++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 Topics/Software_Engineering/Deploying_Personal_Website.md diff --git a/Topics/Software_Engineering/Deploying_Personal_Website.md b/Topics/Software_Engineering/Deploying_Personal_Website.md new file mode 100644 index 000000000..4e2be3cdd --- /dev/null +++ b/Topics/Software_Engineering/Deploying_Personal_Website.md @@ -0,0 +1,92 @@ +# Deploying your personal website using GitHub + +### Why should you create a personal website? + +A personal website can be a great way to build a more personalized portfolio to showcase your experience, projects, and achievements to potential employers. They give you more flexibility to present your authentic self and personality, and help you establish a personal brand, as opposed to traditional resumes and CVs. As a student, you might want to build a personal website to not only display your achievements, but also to demonstrate your web development skills and gain some practical learning experience. + +If you want to display the same content to every visitor of your site, and you’re looking for a cost-effective solution with lower hosting costs, you might want to opt for a static personal website. However, if you would like to add interactive features like allowing visitors to leave comments on your blog posts that require backend processing, or if you want to experiment with external APIs and databases, a dynamic personal website would be a better choice. + +## Deploying Static Websites + +**Prerequisite:** +Create a [GitHub](https://github.com/) account + +**Step 1: Develop your website** + +Locally develop your website on your computer. You can use static site generators like [Hugo](https://gohugo.io/), [Jekyll](https://jekyllrb.com/), [Next.js](https://nextjs.org/), or build a simple website using HTML, CSS, and Javascript. Locally test your website and view it using a development server to visualize your website before deployment. + +**Step 2: Create a GitHub repository** + +Login to GitHub and [create a new repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository) for your website. [Push](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github) your files from your local machine to your new GitHub repository. + +**Step 3: Deploy to Netlify** + +- Login to [Netlify](https://app.netlify.com/login) with your GitHub account. Authorize Netlify to access your GitHub account. + +Screenshot 2023-11-22 at 11 19 06 AM + +- Click `Add new site` from the Netlify dashboard. Click `Import an existing project` and select `Deploy with GitHub.` + +Screenshot 2023-11-22 at 11 20 55 AM + +- Select the repository that you pushed your website code to. Click `Deploy Site` and Netlify will deploy your site for you. + +After you’ve deployed, Netlify provides a URL, but you can buy a custom domain and use that instead. You may also benefit from setting up continuous deployment so every time you push changes to your GitHub repository, they will be automatically deployed. + +## Deploying Dynamic Websites + +**Prerequisites:** +Create a [GitHub](https://github.com/) account + +**Step 1: Develop your website** + +Build your dynamic website using a backend framework (ex. Flask, Node.js) and a frontend framework (ex. React) and thoroughly test your website locally using a development server. + +**Step 2: Create a GitHub repository** + +Login to GitHub and [create a new repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository) for your website. [Push](https://docs.github.com/en/migrations/importing-source-code/using-the-command-line-to-import-source-code/adding-locally-hosted-code-to-github) your files from your local machine to your new GitHub repository. + +**Step 3: Choose appropriate hosting services** + +For dynamic websites, there are hosting services that can deploy both frontend and backend components of your website. Some examples include [Heroku](https://www.heroku.com/), [Amazon Web Services](https://aws.amazon.com/), [Google Cloud Platform](https://cloud.google.com/), and others. However, choosing a separate hosting service for the backend and frontend can offer flexibility and provide you with options for your specific tech stack. + +For this tutorial, consider the following tech stack: Python to handle backend logic, Flask to serve JSON responses to be used by the frontend as well as to interact with MySQL, React for creating the frontend, and MySQL to store data. + +**Hosting the React frontend:** +- Run `npm run build` or `yarn build` to compile your React app for production +- You can use services like [Netlify](https://www.netlify.com/) or [Vercel](https://vercel.com/) (and many others) to deploy the frontend, but for the purposes of this tutorial, we will use Vercel + +1. Login to Vercel with your GitHub account. + +Screenshot 2023-11-22 at 11 25 07 AM + +2. Click `Import Project` on the Vercel dashboard and authorize Vercel to access your GitHub repositories. Choose the repository that you pushed your project to. + +Screenshot 2023-11-22 at 11 26 28 AM + + +3. Vercel will automatically detect the build settings — all you have to do is click Deploy. Vercel will also automatically deploy your changes pushed to your GitHub repository. Note that Vercel provides a URL to access your website, but you can configure it with a custom domain if you have one. + +**Hosting the Python and Flask backend and MySQL server:** + +For hosting the backend, we will use [Railway](https://railway.app/). Note that Railway provides a $5 credit to use their services but you may need to sign up for a usage-based subscription to host your Flask backend and MySQL server. + +**Python and Flask backend:** +- Login with GitHub. +- In your dashboard, create a new project and choose the option to ‘Deploy from GitHub repo.’ Connect your GitHub repo that has your project. + Screenshot 2023-11-22 at 11 29 36 AM +- Specify the root directory to be the directory that has your Flask app (usually a backend folder). + Screenshot 2023-11-22 at 11 30 57 AM +- Specify the language to build the service as Python. + Screenshot 2023-11-22 at 11 31 14 AM + +**MySQL server:** +- Go to the dashboard and create a new project. Choose the option to `Provision MySQL.` + Screenshot 2023-11-22 at 11 35 23 AM +- This automatically sets up a MySQL database for you. + Screenshot 2023-11-22 at 11 35 04 AM +- Railway will provide you with all the necessary credentials to use your server (ex. Host, port, root username and password, etc). You can then configure your backend project settings to use the necessary environment variables that the Flask app will use to connect to the database (as it is generally not good practice to hardcode them in your backend). + Screenshot 2023-11-22 at 11 36 06 AM + +**Troubleshooting on Vercel and Railway** +A convenient benefit of using services like Vercel and Railway for deployment is that you can review the deployment logs in their respective dashboards to view error messages. In Railway, you can view both build logs and deployment logs for your backend to trace where your issue may be. From 1d1ed62977a585ab568623506da1c20f0a79ca47 Mon Sep 17 00:00:00 2001 From: Komal Saini <52506101+komal-saini@users.noreply.github.com> Date: Wed, 22 Nov 2023 11:47:55 -0500 Subject: [PATCH 071/118] update Software_Engineering.md to include topic --- Topics/Software_Engineering.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Topics/Software_Engineering.md b/Topics/Software_Engineering.md index 85f0aaed1..8fbb068fb 100644 --- a/Topics/Software_Engineering.md +++ b/Topics/Software_Engineering.md @@ -8,4 +8,6 @@ Potential topics-- 1. [User Stories](./Software_Engineering/User_Stories.md) 2. Kanban 3. XP - 2. [Waterfall](./Software_Engineering/Waterfall.md) \ No newline at end of file + 2. [Waterfall](./Software_Engineering/Waterfall.md) + +#### [Deploying Your Personal Website](./Software_Engineering/Deploying_Personal_Website.md) From 4b90e22a772cb9ea64ce31649d53323a765ca381 Mon Sep 17 00:00:00 2001 From: alyson647 Date: Wed, 22 Nov 2023 15:11:24 -0500 Subject: [PATCH 072/118] edit wording and condensed parts --- Topics/Software_Engineering/Scrum.md | 56 +++++++++++++--------------- 1 file changed, 25 insertions(+), 31 deletions(-) diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md index 46c0f921b..cf2f6766d 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -1,72 +1,66 @@ ## Scrum Framework ### What is scrum? -Scrum is an agile project management framework that helps teams organize and manage their work. It can be thought of a a way to implement agile principles. While most often used in software development teams, these principles can be applied to others teams in HR, accounting and finance, government projects, etc. The term for this framework was coined from the 1986 Harvard Business Review article where the authors compared high-performing teams to the scrum formation used by rugby teams. Overall, scrum is for using a self-organizing team to deliver something valueable to customers in a specified time frame called a sprint. Scrum uses artifacts, ceremonies/events, and roles associated with each sprint to get the work done. +Scrum is an agile project management framework that helps teams organize and manage their work. While most often used in software development teams, the framework can be applied to different sectors in HR, accounting and finance, etc. The term for this framework was coined from the 1986 Harvard Business Review article in which the authors compared high performing teams to the scrum formation used in rugby. Scrum specifiees artifacts, ceremonies/events, and roles associated with each sprint in order to get work done. ### Scrum values - Commitment - - Team members should make sure to commit to the right amount of work they can complete, and not overcommit - - They should be committed to their time-based tasks + - Team members should make sure to not overcommit to the amonut of work they can complete, and should be committed to their time-based tasks - Courage - - Team members should have the courage to question processes and ask open, challenging questions to anything that hinders the ability to move forward, with open discussion + - Team members should have the courage to question processes and ask open, challenging questions to anything that hinders the ability to move forward, and they should be met with open discussion - Focus - The team must be focused on their selected tasks in order to complete the speccified work within a sprint - Openness - There should be regular meetings, such as daily standups, to openly talk about progress and blockers - The team should be open to new ideas - Respect - - Everyone should recognize team member's contributions and accomplishments + - Everyone should recognize a team member's contributions and accomplishments - Respect for one another is important to ensure mutual collaboration and cooperation ### What are sprints? -A sprint is a short time period where the scrum team works to get a specified amount of work finished. Sprints usually correspond to some set of features a team wants to add, completing specific product additions. The goal of a sprint varies from team to team, some teams having a finished product that can be deployed to customers, or the goal can be to complete a subset/section of a bigger product. The usual timeline for a sprint is two weeks but differs between teams. - +A sprint is a short time period where the scrum team works to get a specified amount of work finished. Sprints usually correspond to some set of features a team wants to add. The goal of a sprint varies from team to team, some goals being a finished product that can be deployed to customers, other goals being to complete a subsection of a bigger product. The usual timeline for a sprint is two weeks, but differs between teams. ### Members of a scrum team A scrum team consists of three specific roles: - Product owner: - - The product owner is the expert on understanding the business, customer and marketing requirements - - They focus on ensuring the development team delivers the most value to the business and understand the changing needs of user and customers the best + - The product owner is the expert on understanding the business, customer, and marketing needs + - They focus on ensuring the development team delivers the most value to the business - Scrum master: - - Scrum masters coach team and organize/schedule resources for scrum meetings - - Their goals is to optimize the flow for the scrum team to ensure maximal productivity and minimal road blocks + - The scrum master coaches the team and organizes/schedules resources for scrum meetings + - Their goal is to optimize the flow for the scrum team, to ensure maximal productivity and minimal road blocks - Development team: - - The development team are the ones who work on creating the product/working on items in the sprint, according to the specifications from the product owner - - The development team consists of developers, UX specialists, Ops engineers, testers, and designers - - The members of the development team have different skill sets and will cross-train teach other to prevent any members becoming a bottle-neck + - The development team are the ones who work on creating the product/working on items in the sprint, according to the sepcifications from the product owner + - The team consists of developers, UX specialists, Ops engineers, testers, and designers + - With these differing skill sets, the team can cross-train each other to prevent any bottle necks ### Scrum artifacts -Scrum artifacts are information that a scrum team uses and refers to that details the product being developed, the specific tasks involved in a sprint cycle, and the end goal. There are three artifacts: +Scrum artifacts refer to the information a scrum team uses that detail information of the product being developed, the tasks involved in a sprint cycle, and the end goal. There are three artifacts: - Product backlog: - - The product backlog is the primary list of work that needs to get done and is maintained by the product owner or product manager - - It functions as a big to do list that is adaptable to adjustments and changes over time + - The product backlog is the primary list of work that needs to get done and is maintained and updated by the product owner or product manager - Sprint backlog: - - The sprint backlog is the list of user stories or bug fixes that need to get done by this current sprint cycle - - The sprint backlog is planned thoroughly before each sprint and is chosen from the product backlog + - The sprint backlog is the list of users stories or bug fixes that ened to get done by the end of the current sprint cycle, and is chosen from the product backlog - Increment (sprint goal): - - The increment, or otherwise known as the sprint goal, is the end-product from a sprint - - The definition of the sprint goal changes from team to team, as for some it means a product or features usable to customers by the end of the sprint, and for other teams, the end product is the completed part of a bigger project - + - The increment is the end-product from a sprint + - This can mean a finished product, features usable to customers by the end of the sprint, or a completed section of a bigger project ### Scrum events/ceremonies The scrum framework incorporates regular meetings, and events that teams perform regularly. In scrum, there are five regularly held events: -- Organization of backlog: - - The responsibility of the product owner, they will make sure to continually update and maintain the product backlog, using user feedback and feedback from the devleopment team +- Backlog organization: + - This is the responsbility of the product owner, who makes sure to continually udpate and maintain the product backlog, according to feedback from users and the development team - Sprint planning: - - The user stories and/or bug fixes to be completed during the current sprint are planned during this meeting that includes the development team and is led by the scrum master - - In this meeting a goal is decided upon and items from the product backlog are added in accordance to this goal + - This meeting is led by the scrum master and includes the development team, where the items to be completed during the sprint are planned and added from the product backlog in accordance to the sprint goal - Sprint: - - This is a time period where the scrum team works together to complete items in the scope of the sprint, usually being two weeks + - This is the time period where the scrum team works to complete items in the scope of the sprint - Daily standup: - - The standup is a regularly scheduled meeting in which members of the scrum team will update members on their progress and bring up and blockers they are facing with their work + - The standup is a regularly scheduled meeting in which members of the team will update members on their progress and mention blockers they are facing with their work - Sprint review: - - This occurs at the end of the sprint, where the team meets to have an information session to demo the end-product and showcases the completed backlog items + - This occurs at the end of the sprint, where the team meets to demo the end-product and showcase the completed sprint backlog items - Sprint retrospective: - - Also occurs at the end of the sprint, the retro is where the team meets to discuss the aspects of the sprint that worked and did not work + - Also occuring at the end of the sprint, the retro is where the team discuss the aspects of the sprint that worked, and parts that could use improvement - This builds in feedback and continual improvement of processes in the scrum framework ### Why is scrum important? -The scrum framework is used so often since it provides an efficient and adaptable way to organize and manage teams and products. This being a team centric framework where teams are self managed and organized, it provides members to be more creative and innovative, having the flexibility to organize work based on their personalities and work styles. Scrum provides concrete roles, events, artifacts, principles and values to follow. These aspects of scrum can be incorporated into 301 project teams to stay focused and get the project done in the short amount of time we're given. +The scrum framework is used so often since it provides an efficient and adaptable way to organize and manage teams and products. This being a team centric framework, where the teams are self managed, it provides members the opportunity to be more creative and innovative, with flexibility to organize work based on their personalities and work styles. The framework provides concrete roles, events, artifacts, and values to follow. These asepcts of scrum are incorporated to professional workplace settings, and can be used in the 301 project as well to get the project done in the short amount of time given! ### Resources and further reading - [Atlassin - scrum](https://www.atlassian.com/agile/scrum) From 13c1f94fdbfe9a2a58df5e60aed0fdb596ab5f03 Mon Sep 17 00:00:00 2001 From: alyson647 Date: Wed, 22 Nov 2023 15:45:30 -0500 Subject: [PATCH 073/118] changed wording and fixed typos --- Topics/Software_Engineering/Scrum.md | 62 ++++++++++++++-------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md index cf2f6766d..de8ca6735 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -1,68 +1,68 @@ ## Scrum Framework ### What is scrum? -Scrum is an agile project management framework that helps teams organize and manage their work. While most often used in software development teams, the framework can be applied to different sectors in HR, accounting and finance, etc. The term for this framework was coined from the 1986 Harvard Business Review article in which the authors compared high performing teams to the scrum formation used in rugby. Scrum specifiees artifacts, ceremonies/events, and roles associated with each sprint in order to get work done. +Scrum is an agile project management framework that helps teams organize and manage their work. While most often used in software development teams, this framework applies to different sectors in HR, accounting, finance, etc. The term for this framework was coined from the 1986 Harvard Business Review article in which the authors compared high-performing teams to the scrum formation used in rugby. Scrum specifies artifacts, ceremonies/events, and roles associated with each sprint to get work done. ### Scrum values - Commitment - - Team members should make sure to not overcommit to the amonut of work they can complete, and should be committed to their time-based tasks + - Team members should make sure not to overcommit to the amount of work they can complete and should be committed to their time-based tasks. - Courage - - Team members should have the courage to question processes and ask open, challenging questions to anything that hinders the ability to move forward, and they should be met with open discussion + - Team members should have the courage to question processes and ask open, challenging questions about anything that hinders the ability to progress. - Focus - - The team must be focused on their selected tasks in order to complete the speccified work within a sprint + - The team should be focused on their selected tasks to complete the specified work within a sprint. - Openness - - There should be regular meetings, such as daily standups, to openly talk about progress and blockers - - The team should be open to new ideas + - There should be regular meetings, such as daily standups, to openly talk about progress and blockers. + - The team should be open to new ideas. - Respect - - Everyone should recognize a team member's contributions and accomplishments - - Respect for one another is important to ensure mutual collaboration and cooperation + - Everyone should recognize a team member's contributions and accomplishments. + - Respect for one another is essential to ensure mutual collaboration and cooperation. ### What are sprints? -A sprint is a short time period where the scrum team works to get a specified amount of work finished. Sprints usually correspond to some set of features a team wants to add. The goal of a sprint varies from team to team, some goals being a finished product that can be deployed to customers, other goals being to complete a subsection of a bigger product. The usual timeline for a sprint is two weeks, but differs between teams. +A sprint is a short duration where the scrum team works to complete a specified amount of work. Sprints usually correspond to some set of features a team wants to add. The goal of a sprint varies from team to team, some goals being a finished product accessible to customers and others being to complete a subsection of a larger product. The usual timeline for a sprint is two weeks, but the timeline varies between teams. ### Members of a scrum team A scrum team consists of three specific roles: - Product owner: - - The product owner is the expert on understanding the business, customer, and marketing needs - - They focus on ensuring the development team delivers the most value to the business + - The product owner is the expert in understanding the business, customer, and marketing needs. + - They focus on ensuring the development team delivers the most value to the business. - Scrum master: - - The scrum master coaches the team and organizes/schedules resources for scrum meetings - - Their goal is to optimize the flow for the scrum team, to ensure maximal productivity and minimal road blocks + - The scrum master coaches the team and organizes/schedules resources for scrum meetings. + - Their goal is to optimize the flow for the scrum team to ensure maximal productivity and minimal blockers. - Development team: - - The development team are the ones who work on creating the product/working on items in the sprint, according to the sepcifications from the product owner - - The team consists of developers, UX specialists, Ops engineers, testers, and designers - - With these differing skill sets, the team can cross-train each other to prevent any bottle necks + - The development team is the ones who work on creating the product/working on items in the sprint, according to the specifications from the product owner. + The team includes developers, UX specialists, Ops engineers, testers, and designers. + With these differing skill sets, the team can cross-train each other to prevent bottlenecks. ### Scrum artifacts -Scrum artifacts refer to the information a scrum team uses that detail information of the product being developed, the tasks involved in a sprint cycle, and the end goal. There are three artifacts: +Scrum artifacts refer to the information a scrum team uses that details information about the product in development, the tasks involved in a sprint cycle, and the end goal. - Product backlog: - - The product backlog is the primary list of work that needs to get done and is maintained and updated by the product owner or product manager + - The product backlog is the primary list of work that needs to be done and is maintained and updated by the product owner or manager. - Sprint backlog: - - The sprint backlog is the list of users stories or bug fixes that ened to get done by the end of the current sprint cycle, and is chosen from the product backlog + - The sprint backlog is the list of user stories or bug fixes that should be done by the end of the current sprint cycle and chosen from the product backlog. - Increment (sprint goal): - - The increment is the end-product from a sprint - - This can mean a finished product, features usable to customers by the end of the sprint, or a completed section of a bigger project + - The increment is the end product of a sprint. + - The increment can mean a finished product, features usable to customers by the end of the sprint, or a completed section of a larger project. ### Scrum events/ceremonies -The scrum framework incorporates regular meetings, and events that teams perform regularly. In scrum, there are five regularly held events: +The scrum framework incorporates regular meetings and events that teams perform regularly. In scrum, there are five regularly held events: - Backlog organization: - - This is the responsbility of the product owner, who makes sure to continually udpate and maintain the product backlog, according to feedback from users and the development team + - This is the responsibility of the product owner, who makes sure to continually update and maintain the product backlog, according to feedback from users and the development team. - Sprint planning: - - This meeting is led by the scrum master and includes the development team, where the items to be completed during the sprint are planned and added from the product backlog in accordance to the sprint goal + - This meeting is led by the scrum master and includes the development team, where the items to be completed during the sprint are added from the product backlog per the sprint goal. - Sprint: - - This is the time period where the scrum team works to complete items in the scope of the sprint + - This is the time period where the scrum team works to complete items in the scope of the sprint. - Daily standup: - - The standup is a regularly scheduled meeting in which members of the team will update members on their progress and mention blockers they are facing with their work + - The standup is a regularly scheduled meeting in which members of the team will update members on their progress and mention blockers they are facing with their work. - Sprint review: - - This occurs at the end of the sprint, where the team meets to demo the end-product and showcase the completed sprint backlog items + - This occurs at the end of the sprint, where the team meets to demo the end product and showcase the completed sprint backlog items. - Sprint retrospective: - - Also occuring at the end of the sprint, the retro is where the team discuss the aspects of the sprint that worked, and parts that could use improvement - - This builds in feedback and continual improvement of processes in the scrum framework + - Also occurring at the end of the sprint, the retro is where the team discusses the aspects of the sprint that worked and parts that could use improvement. + - This builds in feedback and continual improvement of processes in the scrum framework. ### Why is scrum important? -The scrum framework is used so often since it provides an efficient and adaptable way to organize and manage teams and products. This being a team centric framework, where the teams are self managed, it provides members the opportunity to be more creative and innovative, with flexibility to organize work based on their personalities and work styles. The framework provides concrete roles, events, artifacts, and values to follow. These asepcts of scrum are incorporated to professional workplace settings, and can be used in the 301 project as well to get the project done in the short amount of time given! +Teams use the scrum framework since it provides an efficient and adaptable way to organize and manage teams and products. It is team-centric and self-managed and encourages creativity with the flexibility to assign work based on work styles. The framework has concrete roles, events, artifacts, and values. These aspects of scrum are incorporated into professional workplaces and can be used in the 301 to finish the project in the short amount of time given. -### Resources and further reading +### Resources - [Atlassin - scrum](https://www.atlassian.com/agile/scrum) - [Amazon - scrum](https://aws.amazon.com/what-is/scrum/) - [Techtarget - scrum](https://www.techtarget.com/searchsoftwarequality/definition/Scrum) From fd9c22258961825fd1c460bce7f597af321a9462 Mon Sep 17 00:00:00 2001 From: alyson647 Date: Wed, 22 Nov 2023 15:47:44 -0500 Subject: [PATCH 074/118] removed resource i didn't use --- Topics/Software_Engineering/Scrum.md | 1 - 1 file changed, 1 deletion(-) diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md index de8ca6735..077503b10 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -66,4 +66,3 @@ Teams use the scrum framework since it provides an efficient and adaptable way t - [Atlassin - scrum](https://www.atlassian.com/agile/scrum) - [Amazon - scrum](https://aws.amazon.com/what-is/scrum/) - [Techtarget - scrum](https://www.techtarget.com/searchsoftwarequality/definition/Scrum) -- [Scrum artifacts](https://www.atlassian.com/agile/scrum/artifacts#:~:text=All%20articles,%2C%20sprint%20backlog%2C%20and%20increments.) From b28f091d3de259f71ed4140005877b37aba0c3e4 Mon Sep 17 00:00:00 2001 From: alyson647 Date: Wed, 22 Nov 2023 15:50:10 -0500 Subject: [PATCH 075/118] updated resource names --- Topics/Software_Engineering/Scrum.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md index 077503b10..f5dc5b289 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -64,5 +64,5 @@ Teams use the scrum framework since it provides an efficient and adaptable way t ### Resources - [Atlassin - scrum](https://www.atlassian.com/agile/scrum) -- [Amazon - scrum](https://aws.amazon.com/what-is/scrum/) +- [AWS - scrum](https://aws.amazon.com/what-is/scrum/) - [Techtarget - scrum](https://www.techtarget.com/searchsoftwarequality/definition/Scrum) From d3a7c34569ebe1a73ff554b7ead8a1d72a65ee6b Mon Sep 17 00:00:00 2001 From: alyson647 Date: Wed, 22 Nov 2023 15:52:34 -0500 Subject: [PATCH 076/118] added link to new md file --- Topics/Software_Engineering.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Software_Engineering.md b/Topics/Software_Engineering.md index 85f0aaed1..23699bc3d 100644 --- a/Topics/Software_Engineering.md +++ b/Topics/Software_Engineering.md @@ -4,7 +4,7 @@ Potential topics-- 1. Methodologies & Frameworks 1. Agile - 1. Scrum + 1. [Scrum](./Software_Engineering/Scrum.md) 1. [User Stories](./Software_Engineering/User_Stories.md) 2. Kanban 3. XP From 5a732002185b50adca25de70b2d8d35bed0e056b Mon Sep 17 00:00:00 2001 From: tejcapildeo <96087837+tejcapildeo@users.noreply.github.com> Date: Wed, 22 Nov 2023 18:01:49 -0500 Subject: [PATCH 077/118] Creating Flask.md This is the introduction to Flask, specifically including the usage of Flask-SQLAlchemy as the database solution. This is the first draft, as it will be reviewed by other group members and changes will be made to improve it. --- Topics/Tech_Stacks/Flask.md | 63 +++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 Topics/Tech_Stacks/Flask.md diff --git a/Topics/Tech_Stacks/Flask.md b/Topics/Tech_Stacks/Flask.md new file mode 100644 index 000000000..f5eae1ad3 --- /dev/null +++ b/Topics/Tech_Stacks/Flask.md @@ -0,0 +1,63 @@ +# Intro to Flask with Flask-SQLAlchemy + + +## Introduction +### What is Flask and why is it useful? +Flask is a lightweight and flexible web framework for Python. Developed by Armin Ronacher, it is designed to be simple and easy to use, providing the essentials for building web applications without imposing rigid structures. Flask is often referred to as a "micro" framework because it focuses on keeping the core simple and extensible, allowing developers to choose the tools and libraries they need. + +The inclusion of the Jinja2 templating engine, built-in development server and Flask's native support for RESTful request handling are desirable features. Its versatility in deployment and suitability for prototyping and small to medium-sized projects make Flask an ideal framework for projects where customization and control over the stack are key considerations. + +Here is an overview of Flask: +https://flask.palletsprojects.com/en/3.0.x/# + +### What is Flask-SQLAlchemy and why is it useful? + +Flask-SQLAlchemy is an extension for Flask that integrates SQLAlchemy, a powerful SQL toolkit and Object-Relational Mapping (ORM) library, into Flask applications. This extension simplifies database interactions by providing a convenient interface for defining models, executing queries, and managing database connections seamlessly within the Flask framework. + +Some of the advantageous features include seamless integration with Flask, session handling, support for Flask Script and Flask Restful, compatibility with Flask extensions and database migrations. + + + +## Getting set up +### Setting up Flask: +First install Flask following the instructions here +https://flask.palletsprojects.com/en/3.0.x/installation/ + +This will make sure that all dependencies are obtained, the virtual environment is created and Flask is installed. + +Next, the Flask application can be set up. +This shows you how the project layout works: +https://flask.palletsprojects.com/en/3.0.x/tutorial/layout/ + +And this is how to set the application up: +https://flask.palletsprojects.com/en/3.0.x/tutorial/factory/ + +Alternatively, there is also this useful quickstart guide for getting started quickly: +https://flask.palletsprojects.com/en/3.0.x/quickstart/ + +### Setting up Flask-SQLAlchemy: +Note that Flask-SQLAlchemy is a wrapper around SQLAlchemy, so it will be useful to check out the documentation and tutorial for using SQLAlchemy linked here: +https://docs.sqlalchemy.org/en/20/tutorial/index.html + +Then follow these steps to get Flask-SQLAlchemy installed, then initialize and configure extensions. It also shows how to define models and create tables : +https://flask-sqlalchemy.palletsprojects.com/en/3.1.x/quickstart/#installation + + +## Basic useful features +### Flask +Here is the documentation with the basics needed to start developing using Flask. It assumes knowledge of Python, which I think should be safe to assume. +https://flask.palletsprojects.com/en/3.0.x/tutorial/ + + +### Flask-SQLAlchemy: +Here are the basic useful features for using queries with Flask-SQLAlchemy. It shows the basics of things like inserting, deleting and updating in the database, selecting, and finally querying for views. +https://flask-sqlalchemy.palletsprojects.com/en/3.1.x/queries/ + + +## Conclusion +In the dynamic landscape of web development, the tandem use of Flask and Flask-SQLAlchemy emerges as a compelling solution, seamlessly blending simplicity with robust database capabilities. Setting up a Flask application becomes a swift endeavor, marked by the ease of installation and quick configuration. Flask's minimalistic design empowers developers with the freedom to choose and integrate components, facilitating rapid prototyping and efficient development. With the added integration of Flask-SQLAlchemy, the database layer becomes an integral part of the Flask ecosystem, offering a unified and expressive interface for model definition, database querying, and session management. Ultimately, the Flask and Flask-SQLAlchemy duo empowers developers to create scalable, maintainable, and feature-rich web applications. + + +## Additional Resources +Here is the overview for the Flask documentation: +https://flask-sqlalchemy.palletsprojects.com/en/3.1.x/ From f2424760a9a238eb3eb494d4b5b7c76ee5f97794 Mon Sep 17 00:00:00 2001 From: Noelle <95160562+NonLan@users.noreply.github.com> Date: Wed, 22 Nov 2023 19:52:43 -0500 Subject: [PATCH 078/118] Update swift.md --- Topics/Tech_Stacks/swift.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/Topics/Tech_Stacks/swift.md b/Topics/Tech_Stacks/swift.md index 7fe741891..c171c8d59 100644 --- a/Topics/Tech_Stacks/swift.md +++ b/Topics/Tech_Stacks/swift.md @@ -11,9 +11,9 @@ ### [Other Useful Resources](#other-useful-resources-1) ## Introduction -Swift is a modern, open-source programming language developed by Apple as a replacement to their earlier language, Objective-C. +Swift is a modern, open-source programming language developed by Apple as a replacement for their earlier language, Objective-C. -It can be used on Mac devices to develop software that target all Apple platforms: iOS, macOS, watchOS, and tvOS, while being deeply +It can be used on Mac devices to develop software that targets all Apple platforms: iOS, macOS, watchOS, and tvOS, while being deeply integrated into Apple's IDE: Xcode. In the following official Apple documentation, there are many other resources, such as videos, interactive demos, and guided @@ -55,16 +55,16 @@ to fill in the following info: Screen Shot 2023-03-20 at 4 31 06 PM -This information can be changed later, so for starters you can leave `Team` to be empty, as this is only necessary for deploying the app to the App Store. `Organization identifier` is used to uniquely identify your app once it is up on the App Store, so you can choose whichever name you'd like, such as your name or group's name. Do note `Organization identifier` cannot be changed once the app is uploaded to the App Store but it is purely meta data. +This information can be changed later, so for starters, you can leave `Team` to be empty, as this is only necessary for deploying the app to the App Store. `Organization identifier` is used to uniquely identify your app once it is up on the App Store, so you can choose whichever name you'd like, such as your name or group's name. Do note `Organization identifier` cannot be changed once the app is uploaded to the App Store but it is purely metadata. Make sure to use `SwiftUI` and `Swift` as your interface and language respectively, then click `Next` to choose where to store your project, and now you're ready to start. ## Testing Your App - Unit Tests -In Xcode, unit tests are written using the [XCTest](https://developer.apple.com/documentation/xctest) framework. +In Xcode, unit tests are written using the `XCTest` framework. You can add a new unit test case by going to `New File` and selecting the `Unit Test Case Class` template. Xcode will then automatically set up a test case class, and you can write your unit test there. -Unit tests in Xcode work as they do in any other language. One major difference to take note of is that assertions and other functions you may require for unit testing are a part of the `XCTest` framework. For an outline of this framework and its functions, please refer to Apple's [documentation](https://developer.apple.com/documentation/xctest). +Unit tests in Xcode work as they do in any other language. One major difference to take note of is that assertions and other functions you may require for unit testing may look a little different since they're a part of the `XCTest` framework. For an outline of this framework and its functions, please refer to Apple's [documentation](https://developer.apple.com/documentation/xctest). ## Testing Your App - Simulators: Background Xcode has [built-in simulators for many Apple devices](https://developer.apple.com/documentation/xcode/running-your-app-in-simulator-or-on-a-device) @@ -74,7 +74,7 @@ Simulators in Xcode are a powerful tool for emulating, in real-time, a user’s ## Testing Your App - Simulators: Setup To configure a Simulator, go to `Windows` > `Devices and Simulators` and press the plus (`+`) button. You can then specify your configuration. Here, you can pick a simulation device (iPhone 14, iPad Pro, Apple Watch, etc.) in `Simulation`. Depending on the device of your choice, you may need to [download its Simulator runtime](https://developer.apple.com/documentation/xcode/installing-additional-simulator-runtimes). -If you have your own Apple device, you can connect the device to your Mac to use it as your testing environment by connecting it with the appropriate cable and following the on-screen instructions. Note that as of iOS 14, from your device, you may initially have to go to `Settings` > `Privacy & Security` > `Developer Mode` to allow your device to run your app. +If you have your own Apple device, you can connect the device to your Mac to use it as your testing environment by connecting it with the appropriate cable and following the on-screen instructions. Note that as of iOS 14, from your device, you will initially have to go to `Settings` > `Privacy & Security` > `Developer Mode` to allow your device to run your app. ## Testing Your App - Simulators: Build and Run An app can be built and run at any point in time by pressing the play button on the upper-left side of the window. You can do the same, and access additional build options, from `Product`. Note that the simulator will not run if the app cannot be built, and Xcode will highlight the errors that need to be resolved in the leftmost panel. You can also go to `View` > `Navigators` > `Show Issue Navigator` to see these errors. @@ -82,16 +82,16 @@ An app can be built and run at any point in time by pressing the play button on ## Testing Your App - Simulators: Interactions Once inside the Simulator window, you will notice several new tabs along the top of the Mac to help you in your tests. -The iOS device can generally be interacted with on your Mac as you would on the actual device. For example, swiping and tapping act the same way as they would on the real device. Some other device interactions, like changing the orientation of the device, can be done by going to `Device` and selecting the desired option. Note that some interactions are simulated in a slightly different way than they occur on the real device. They can all be found [here](https://developer.apple.com/documentation/xcode/interacting-with-your-app-in-the-ios-or-ipados-simulator). +The iOS device can generally be interacted with on your Mac as you would on the actual device. For example, swiping and tapping act the same way as they would on a real device. Some other device interactions, like changing the orientation of the device, can be done by going to `Device` and selecting the desired option. Note that some interactions are simulated in a slightly different way than they occur on the real device. They can all be found [here](https://developer.apple.com/documentation/xcode/interacting-with-your-app-in-the-ios-or-ipados-simulator). The `I/O` tab hosts several options for changing how your Mac handles inputs and outputs, for example, if you'd like to change the output audio device. -The `Features` tab hosts a plethora of features to help test the functionality of your app in a real-time setting. Note that some of these features may not function correctly if your simulated device does not accept the appropriate permissions. For example, to test locational features, you may need to enable these settings in the simulated test environment. Some notable features are as follows, and availability may depend on simulation device and iOS version: +The `Features` tab hosts a plethora of features to help test the functionality of your app in a real-time setting. Note that some of these features may not function correctly if your simulated device does not accept the appropriate permissions. For example, to test locational features, you may need to enable these settings in the simulated test environment. Some notable features are as follows, and availability may depend on the simulation device and iOS version: * FaceID and Authorize Apple Pay can be used to determine how your app handles these cases, if these interactions are ever requested by your app. * Toggle Appearance changes the device's view mode setting between light mode and dark mode so that you can see how your app’s UI may change depending on these user settings. * Increase/Decrease Preferred Text Size will show you how your app’s UI may change depending on the user’s text size. * Toggle Increased Contrast will show you how your app’s UI may change depending on whether the user is using their device in increased or regular contrast. -* Location lets you simulate a device location, should your app have any location-dependent services such as CLLocation or MapKit. You can set a current location with latitude and longitude coordinates or simulate device movement with speeds ranging between running on foot to driving on the expressway. +* Location lets you simulate a device location, should your app have any location-dependent services such as CLLocation or MapKit. You can set a current location with latitude and longitude coordinates or simulate device movement with speeds ranging from running on foot to driving on the expressway. ## Testing Your App - Debugging Xcode hosts its own suite of debugging tools. Breakpoints generally serve as the basis for such debugging. From cc73792d9a029f9d6ec2596b6baed07bc3ff331f Mon Sep 17 00:00:00 2001 From: SIQING XU Date: Wed, 22 Nov 2023 20:47:11 -0500 Subject: [PATCH 079/118] create JsonParsing.md --- Topics/Tech_Stacks/JsonParsing.md | 231 ++++++++++++++++++++++++++++++ 1 file changed, 231 insertions(+) create mode 100644 Topics/Tech_Stacks/JsonParsing.md diff --git a/Topics/Tech_Stacks/JsonParsing.md b/Topics/Tech_Stacks/JsonParsing.md new file mode 100644 index 000000000..f6126b30b --- /dev/null +++ b/Topics/Tech_Stacks/JsonParsing.md @@ -0,0 +1,231 @@ +# Introduction to JSON Parsing + + + +## Introduction to JSON + +JSON (JavaScript Object Notation), is a lightweight and human-readable data interchange format. It serves as a standard data format for transmitting and exchanging data between a server and a web application, as well as between different parts of an application. JSON is language-agnostic, meaning it can be easily understood and used by various programming languages. + + +## JSON Data Types + +### Primitive Data Types + +JSON supports several primitive data types. These primitive data types are the basic building blocks used to represent values within a JSON structure. The primary primitive data types in JSON are: + + * String: Represents a sequence of characters enclosed in double quotation marks (") + + Example: "Hello, World!" + + + * Number: Represents numeric values, including integers and floating-point numbers. + + Examples: 42, 3.14, -17 + + * Boolean: Represents a logical value, either true or false. + + Examples: true, false + + * Null: Represents an empty value or the absence of a value. + + Example: null + +These primitive data types can be used alone or combined to create more complex JSON structures such as objects and arrays. For example, an object may contain key-value pairs where the values can be strings, numbers, booleans, null, or even nested objects and arrays. + +### Complex Data Types + +JSON allows for the construction of more complex data structures beyond primitive data types by using objects and arrays. + + * Objects: An object in JSON is an unordered collection of key-value pairs. Key-value pairs are separated by commas and enclosed in curly braces {}. Keys must be strings, and values can be strings, numbers, booleans, null, objects, or arrays. + Example: + + +{ + "name": "John Doe", + "age": 30, + "isStudent": false, + "address": { + "city": "Exampleville", + "zipcode": "12345" + } +} + + * Array: An array in JSON is an ordered list of values. Values are separated by commas and enclosed in square brackets []. Values can be strings, numbers, booleans, null, objects, or other arrays. + Example: + + [ + "apple", + "banana", + "orange", + { + "color": "red", + "quantity": 5 + } +] + +## JSON Parsing in Different Programming Languages + +### Python Parse JSON + +#### Parse JSON String in Python + +Python has a built in module that allows you to work with JSON data. At the top of your file, you will need to import the json module. + +```{python} +import json +``` + + +If you need to parse a JSON string that returns a dictionary, then you can use the json.loads() method. +```{python} +import json + +# assigns a JSON string to a variable called jess +jess = '{"name": "Jessica Wilkins", "hobbies": ["music", "watching TV", "hanging out with friends"]}' + +# parses the data and assigns it to a variable called jess_dict +jess_dict = json.loads(jess) + +# Printed output: {"name": "Jessica Wilkins", "hobbies": ["music", "watching TV", "hanging out with friends"]} +print(jess_dict) + +``` + +#### Parse and Read JSON File in Python + +Suppose we have a JSON file called fcc.json. If we want to read that file, we first need to use Python's built-in `open()` function with the mode of read. We are using the `with` keyword to make sure that the file is properly closed. + +```{python} +with open('fcc.json', 'r') as fcc_file: +``` +We can then parse the file using the json.load() method and assign it to a variable called fcc_data. + +```{python} +fcc_data = json.load(fcc_file) +``` +The final step would be to print the results. + +```{python} +print(fcc_data) +``` + +### JavaScript Parse JSON + +#### Parse JSON String in JavaScript + +The `JSON.parse()` static method parses a JSON string, constructing the JavaScript value or object described by the string. + +```{python} +const json = '{"result":true, "count":42}'; +const obj = JSON.parse(json); + +console.log(obj.count); +# Expected output: 42 + +console.log(obj.result); +# Expected output: true + +``` +#### Parse JSON File in JavaScript + +Suppose we have a json file called sample.json under your the current directory. + +We can use the `fetch()` method: Open the JavaScript file, In the `fetch()` method pass the address of the file, use the `.json` method to parse the document and display the content on the console + +```{python} +function Func() { + fetch("./sample.json") + .then((res) => { + return res.json(); + }) + .then((data) => console.log(data)); +} +``` + +We can also use the `require` method using require module: Create a script.js and use the require method of the node to import the JSON file. + +```{python} +const sample = require('./sample.json'); +console.log(sample); +``` + +To run the application, we can open the current folder in the terminal and type the following command + +```{python} +node script.js +``` + +### Parse JSON in Java + +#### Read JSON File in Java + +To read the JSON file in Java, `FileReader()` method is used to read given JSON file. + +Example: + +```{python} +{ + + "name" : "Kotte", + "college" : "BVRIT" + +} +``` + +The above code is the file that is used to read. we use the `json.simple` library. + +```{python} +// program for reading a JSON file + +import org.json.simple.JSONArray; +import org.json.simple.JSONObject; +import org.json.simple.parser.*; + +public class JSON +{ + public static void main(Strings args[]) + { + + // file name is File.json + Object o = new JSONParser().parse(new FileReader(File.json)); + + JSONObject j = (JSONObject) o; + + String Name = (String) j.get("Name"); + String College = (String) j.get("College"); + + System.out.println("Name :" + Name); + System.out.println("College :" +College); + + } + +} + +``` + +Output: + +```{python} +Name: Kotte + +College: BVRIT +``` + +## Parsing Optimization + +JSON parse optimization is crucial for achieving optimal performance, resource efficiency, and a seamless user experience in applications that handle JSON data. It becomes particularly relevant in scenarios involving large datasets, real-time updates, and applications with high concurrency and scalability requirements. Performance optimization in the context of JSON involves strategic measures to enhance the efficiency of handling and transmitting JSON data. This includes focusing on two key aspects: + +Streaming and Incremental Processing: Implementing streaming and incremental processing techniques can be beneficial for large JSON datasets. This approach allows for parsing or serializing data incrementally, reducing memory overhead and improving overall processing speed. For example, `msgspec` could be a useful library to schema-based decoding and encoding for JSON. `msgspec` allows you to define schemas for the records you’re parsing. msgspec has significantly lower memory usage, and it is by far the fastest solution. + + +Minimizing JSON Payload Size: Implementing data compression techniques, such as gzip or deflate, before transmitting JSON data over the network can significantly reduce payload size. This not only conserves bandwidth but also expedites data transfer. Using GZIP for JSON involves compressing JSON data before transmitting it over the network and decompressing it on the receiving end. This compression technique helps minimize the payload size, reducing the amount of data that needs to be transferred and improving overall network efficiency. [Here is an eternal website which demonstrates how to use GZip for JSON](https://www.baeldung.com/json-reduce-data-size#:~:text=Compressing%20with%20gzip&text=That's%20why%20gzip%20is%20our,and%20compress%20it%20with%20gzip). + + + + + + + + + + From ed35bad9d1d31c0ba5f40208d69926cc95327876 Mon Sep 17 00:00:00 2001 From: Vinayak <90017077+VinayakMaharaj@users.noreply.github.com> Date: Wed, 22 Nov 2023 21:11:32 -0500 Subject: [PATCH 080/118] Update StripeAPI.md expanded intro to stripe section and a couple other sections --- Topics/Tech_Stacks/StripeAPI.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/StripeAPI.md b/Topics/Tech_Stacks/StripeAPI.md index 062ae1180..ee7ce5089 100644 --- a/Topics/Tech_Stacks/StripeAPI.md +++ b/Topics/Tech_Stacks/StripeAPI.md @@ -1,6 +1,20 @@ # Setting Up Stripe API in a JS Environment + ## 1. Introduction to Stripe +Stripe is a powerful payment processing platform that allows developers to seamlessly integrate payment functionality into their applications. With Stripe, you can handle online transactions securely and efficiently. Here are some key aspects to consider when working with Stripe: + +**Pros:** +- **Ease of Use:** Stripe provides a developer-friendly interface, making it easy to implement payment solutions. +- **Versatility:** It supports various payment methods, including credit cards, digital wallets, and more. +- **Security:** Stripe takes care of PCI compliance, reducing the burden on developers to handle sensitive payment information securely. +- **Developer Resources:** Extensive documentation, community support, and a range of client libraries make integration smooth. + +**Cons:** +- **Transaction Fees:** While convenient, using Stripe comes with transaction fees, which may impact the cost-effectiveness of your solution. +- **Learning Curve:** For beginners, there might be a learning curve in understanding advanced features and customization options. +- **Dependency on Internet Connection:** As an online service, Stripe's functionality is dependent on a stable internet connection. + - Watch the [Introduction Video](https://www.youtube.com/watch?v=7edR32QVp_A). - Explore the [Stripe API documentation](https://stripe.com/docs/development/get-started). @@ -24,7 +38,7 @@ - Follow the guide on [Accept a payment](https://stripe.com/docs/development/quickstart) for React. ## 6. Handle Webhook Events (Node.js) -- Create a server-side route using Express and the Stripe package to handle webhook events. +- Create a server-side route using Express and the Stripe package to handle webhook events. This ensures that your application responds to events triggered by Stripe. ## 7. Implement Subscription Logic (If Needed) - Follow the [Stripe Subscriptions guide](https://stripe.com/docs/billing/subscriptions/overview). From 15048d6f57803a717a75a572ffe3cf17595fc186 Mon Sep 17 00:00:00 2001 From: ccchwww Date: Wed, 22 Nov 2023 21:19:53 -0500 Subject: [PATCH 081/118] NoSQL database JSON interaction added --- .../NoSQL_databases_JSON_interactions.md | 208 ++++++++++++++++++ 1 file changed, 208 insertions(+) create mode 100644 Topics/Tech_Stacks/NoSQL_databases_JSON_interactions.md diff --git a/Topics/Tech_Stacks/NoSQL_databases_JSON_interactions.md b/Topics/Tech_Stacks/NoSQL_databases_JSON_interactions.md new file mode 100644 index 000000000..18f18bfc6 --- /dev/null +++ b/Topics/Tech_Stacks/NoSQL_databases_JSON_interactions.md @@ -0,0 +1,208 @@ +# Introduction to interactions between NoSQL database and JSON +## NoSQL database overview +NoSQL databases represent a broad category of database management systems that differ from traditional relational databases in their data model, query languages, and consistency models. The term "NoSQL" stands for "Not Only SQL" or “non-relational”, reflecting the fact that these databases may not use relational tables with predefined schemas to store data. NoSQL databases use flexible data models that can adapt to changes in data structures and are capable of scaling easily with large amounts of data and high user loads. + +_Note: We assume you have the basic knowledge about JSON, please refer to this [link](https://www.w3schools.com/js/js_json_intro.asp) if you want to learn more about JSON._ + +## Types of NoSQL databases +Behind the big category of NoSQL databases, there are four major types of databases that are broadly used nowadays. ++ **Key-value databases** +The simplest form of NoSQL databases, they store data as a collection of key-value pairs. The key is a unique identifier, and each of them corresponds to a value, which is the data associated with it. + ++ **Wide-Column Stores** +These databases store data in tables, rows, and dynamic columns. Unlike relational databases, the schema can vary from row to row in the same table. + ++ **Graph Databases** +Graph databases use graph structures with nodes, edges, and properties to represent and store data. The relationships are first-class entities in these databases. + ++ **Document databases** +These databases store data in documents, which are typically JSON-like structures. Each document contains pairs of fields and values. The values can typically be a variety of types including things like strings, numbers, booleans, arrays, or objects. + +We will focus on the Document-Oriented Databases here as the documents are very similar to JSON objects. Further, we will discuss the interaction between document databases and JSON including importing, storing, querying and indexing JSON data with the advantages of JSON document databases. + +## Document Database - JSON interaction + +In this guide, we'll use MongoDB as an example, but the process is similar for other document databases. + +### Importing JSON Data +After installing the MongoDB Community Edition and MongoDB Compass, you can use the mongoimport command-line tool, which is part of the MongoDB server installation. + +Navigate to the directory containing your JSON file, then open your command line or terminal, run the `mongoimport` command with the necessary parameters. For example: + +``` +mongoimport --db mydatabase --collection mycollection --file mydata.json --jsonArray +``` + ++ `--db mydatabase`: Specifies the database name. ++ `--collection mycollection`: Specifies the collection. ++ `--file mydata.json`: Specifies the path to your JSON file. ++ `--jsonArray`: Indicates that the JSON file contains an array of documents. + +To verify if JSON files have been imported correctly, use MongoDB Compass or the MongoDB shell to connect to your database and check if the data has been imported correctly. + +Moreover, you can always use programming languages like Java and Python to import JSON files, or using MongoDB Compass directly, see [here](https://www.mongodb.com/compatibility/json-to-mongodb)for instructions. + +### Storing JSON Data +Storing JSON data in MongoDB is a seamless process due to its native support for JSON-like structures. There are mainly two ways to store JSON data in a Document-Oriented database: + +Store the whole object in a single document. +Example: + +``` +book { + title: 'Moby Dick', + author: { + name: 'Herman Melville', + born: 1819 + } +} +``` + +Here, the author details are inside the book document itself. This technique is also known as embedding because the author subdocument is embedded in the book document. + +Store parts of objects separately and link them using the unique identifiers (referencing). +Example: +``` +author { + _id: ObjectId(1), + name: 'Herman Melville', + born: 1819 +} + +book { + _id: ObjectId(55), + title: 'Moby Dick', + author: ObjectId(1) +} +``` +One author may write multiple books. So, to avoid duplicating data inside all the books, we can create separate author documents and refer to it by its `_id` field. + +After making sure how you want to store your data, use `insertOne` or `insertMany` methods to insert your document to desired collections: + +``` +db.mycollection.insertOne({/* JSON-structure object */}); +``` +or +``` +db.mycollection.insertMany([/* array of JSON documents */]); +``` + +### Querying JSON Data +MongoDB queries are expressed as JSON-like structures, allowing you to easily query fields within documents using the build-in find method with following parameters. +``` +db.collection.find( , , ); +``` +``: specify the search criteria for the query. It's essentially a filter that selects which documents to include based on their fields' values. +If you want to look for something with some specific values, just put `{ “field1”: , “field2”: , ...}` +For example, to find documents where name is "John", you can simply use: +``` +db.collection.find({ "name": "John" }) +``` + +You can also use comparison operators like `$gt` (greater than), `$lt` (less than), `$eq` (equal), etc. and logical operators like `$and,` `$or`, and `$not` to build complex queries. +For example, to find documents where the age field is greater than 25, use `$gt`. +``` +db.collection.find({ "age": { "$gt": 25 } }); +``` +To find documents where age is greater than 25 and name is "John": +``` +db.collection.find({ "$and": [{ "age": { "$gt": 25 } }, { "name": "John" }] }) +``` +You can query nested fields by using dot notation +``` +“.” +``` +For example, to find documents where the city in the address is "Anytown": +``` +db.collection.find({ "address.city": "Anytown" }) +``` + +To query for array elements +For example, If a document has a field tags that is an array, to find documents containing a tag "mongodb": +``` +db.collection.find({ "tags": "mongodb" }) +``` + + +``: Specifies the fields to return in the documents that match the query filter. The parameter contains either include or exclude specifications, not both, unless the exclude is for the `_id` field. + +For example, to return only the name and age fields of documents +``` +db.collection.find({}, { "name": 1, "age": 1, "_id": 0 }) +``` +Here, 1 indicates inclusion of the field. + +``: Specifies additional options for the query. These options modify query behavior and how results are returned. +This parameter is not passed directly into the `find()` method like the `` and `` parameters. Instead, `` are specified through method chaining, where you append methods to `find()` that correspond to the various options you want to apply, such as sorting, limiting, and skipping documents. + +For example, you can use `sort()` to sort the results based on one or more fields. +``` +db.collection.find().sort({ "age": 1 }) +``` +Here, we sort documents by age in ascending order. + +To restrict the number of documents returned, use limit(). +``` +db.collection.find().limit(5) +``` +We limit the query to return only 5 documents here. + +To get a more specific result, you can combine the option method together, for example combine `limit()` and `skip()` for pagination. +``` +db.collection.find().skip(5).limit(5) +``` +We will get the second set of 5 documents in this case. + +There are many more available options, visit here for more details. + +Note every parameter above is optional, to return all documents in a collection, omit all parameters or pass an empty document ({}). + +### Indexing JSON Data +Indexing JSON data in a NoSQL database like MongoDB is crucial for optimizing query performance. An index in a MongoDB database is a special data structure that stores a small portion of the collection's data in an easy-to-traverse form. The index stores the value of a specific field or set of fields, ordered by the value of the field as specified in the index. + +The purpose of indexing is that it supports the efficient execution of queries. Without indexes, MongoDB must perform a collection scan, i.e., scan every document in a collection, to select those documents that match the query statement. + +There are many type of indexes in NoSQL databases: ++ Single Field: Apart from the _id field, which is automatically indexed, you can create indexes on any field in a document. ++ Compound Index: Indexes multiple fields in a single index. ++ Multikey Index: Automatically created for fields that hold arrays; used to index array elements. ++ Text Index: Created to enable text search on string content. ++ Hashed Index: Indexes the hash of the value of a field. +Indexes have the property to be unique, which ensures that two documents cannot have the same value for the indexed field. They can be created with a specified order (ascending or descending). +We will give some examples for some common types of indexes using createIndex method: + +Single Field Index: To create an index on a single field +``` +db.collection.createIndex({ "fieldname": 1 }) // 1 for ascending order +``` +Compound Index: To index multiple fields, specify each field and its sort order +``` +db.collection.createIndex({ "field1": 1, "field2": -1 }) // 1 for ascending, -1 for descending +``` +Text Index: To enable text search +``` +db.collection.createIndex({ "fieldname": "text" }) +``` + +## Advantages of JSON Structure Database +### Better schema flexibility +The best part of a JSON document database is the schema flexibility, unlike relational databases, JSON databases allow for a flexible and dynamic schema, meaning the structure of data can be changed without impacting existing data.They easily store and manage complex data types, including nested documents and arrays. + +### Faster and have more storage flexibility +NoSQL databases, in general, have more storage flexibility and offer better indexing methods. In a document database, each document is handled as an individual object, and there is no fixed schema, so you can store each document in the way it can be most easily retrieved and viewed. Additionally, you can evolve your data model to adapt it to your changing application requirements. + +### Better suited for big data analytics +JSON structure databases have a flexible schema and are often designed to scale out horizontally, distributing data across multiple servers, which is beneficial for handling large volumes of data. Further, these databases can easily pass data to popular data analysis programming languages like Python and R, without additional coding steps. + +## Reference +https://www.mongodb.com/nosql-explained +https://www.w3schools.com/js/js_json_intro.asp +https://www.mongodb.com/docs/manual/core/document/ +https://www.mongodb.com/json-and-bson +https://www.mongodb.com/docs/manual/core/databases-and-collections/ +https://www.mongodb.com/docs/manual/reference/method/db.collection.find/ +https://mongodb.github.io/node-mongodb-native/4.0//interfaces/findoptions.html +https://www.mongodb.com/docs/manual/reference/method/db.collection.find/#std-label-method-find-projection +OpenAI. (2023, Nov 22). ChatGPT: A Language Model by OpenAI. Retrieved Nov 22, 2023 from https://www.openai.com/research/chatgpt + + From 990f85e0629ffca20f68eb0a5d14a3ce34594e22 Mon Sep 17 00:00:00 2001 From: bw55555 Date: Thu, 23 Nov 2023 15:17:35 +0000 Subject: [PATCH 082/118] Added brief explanation of e2e tests. --- Topics/Tech_Stacks/Cypress.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/Cypress.md b/Topics/Tech_Stacks/Cypress.md index bf91b68e5..9b17638ad 100644 --- a/Topics/Tech_Stacks/Cypress.md +++ b/Topics/Tech_Stacks/Cypress.md @@ -8,7 +8,7 @@ Cypress is mainly used for testing web applications, especially those built in j [https://circleci.com/blog/what-is-end-to-end-testing/](https://circleci.com/blog/what-is-end-to-end-testing/) -The above link has a good explanation on what end to end testing is and why it should be used. +The above link has a good explanation on what end to end testing is and why it should be used. While other types of tests like unit tests or functional tests make sure a single component/module works as expected, an end to end test starts from the perspective of the end user and tries to mimic what an end user would do when accessing your application. Cypress very closely mimics a real user, think of it as a robot accessing your website from a browser like a human would, but you can program the robot to interact with your website however you like and programmatically check the output on the screen. From 8b825f9feecc2e46a3d1893430c7401b8e7e34b3 Mon Sep 17 00:00:00 2001 From: bw55555 Date: Thu, 23 Nov 2023 15:47:50 +0000 Subject: [PATCH 083/118] Added comparison with other testing frameworks --- Topics/Tech_Stacks/Cypress.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/Cypress.md b/Topics/Tech_Stacks/Cypress.md index 9b17638ad..6298ad733 100644 --- a/Topics/Tech_Stacks/Cypress.md +++ b/Topics/Tech_Stacks/Cypress.md @@ -12,9 +12,19 @@ The above link has a good explanation on what end to end testing is and why it s Cypress very closely mimics a real user, think of it as a robot accessing your website from a browser like a human would, but you can program the robot to interact with your website however you like and programmatically check the output on the screen. +# Why Cypress? + +There exist many different testing frameworks online, such as [Selenium](https://www.selenium.dev/), [Jest](https://jestjs.io/), [Mocha](https://mochajs.org/), and more. + +Cypress is most useful for UI, integration and end-to-end testing, so it can be used in tandem with unit testing frameworks like Jest. + +Cypress is built on top of mocha, and uses its framework for tests as well. The main difference is that cypress focuses more on improving client-side and UI tests. + +Selenium is often compared to Cypress, due to it being one of the most popular UI testing frameworks before Cypress was created. One of the biggest differences is that Cypress automatically retries commands while waiting for DOM elements to load properly, helping to prevent [flaky tests](https://www.jetbrains.com/teamcity/ci-cd-guide/concepts/flaky-tests/) and eliminating the need to write wait or sleep helpers that were needed in Selenium. Cypress is also faster and easier to get setup and start creating tests than Selenium. However, Selenium is more flexible, allowing for testing in multiple browsers at a time, and also for writing tests in languages other than javascript. + # Installation and setup: -Cypress can be automatically installed with npm: `npm install cypress` +Cypress can be automatically installed with [npm](https://www.npmjs.com/): `npm install cypress` See [https://docs.cypress.io/guides/getting-started/installing-cypress](https://docs.cypress.io/guides/getting-started/installing-cypress) for more details. @@ -63,3 +73,4 @@ if (viewport.name == ‘small’) { cy.get("@somedivmobileonly").should('not.exist') } ``` + From 11176dd2044081ee2e8093d6a5fd82059025213a Mon Sep 17 00:00:00 2001 From: bw55555 Date: Thu, 23 Nov 2023 16:13:57 +0000 Subject: [PATCH 084/118] Added more information to the use case. --- Topics/Tech_Stacks/Cypress.md | 31 ++++++++++++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/Topics/Tech_Stacks/Cypress.md b/Topics/Tech_Stacks/Cypress.md index 6298ad733..7f284b06e 100644 --- a/Topics/Tech_Stacks/Cypress.md +++ b/Topics/Tech_Stacks/Cypress.md @@ -42,9 +42,11 @@ Cypress has an extremely detailed guide for getting started, explains how to cre I highly recommend reading through the above two links, and the entirety of the core concepts section in the documentation. It gives a thorough introduction on how cypress works and how to use it to test your application. -# Best Practices +The first link provides a detailed guide on how cypress commands work and how to read the testing UI. + +The second link provides a guide to most of the commonly used functions in cypress, like how to query for elements, check if they have or not have a specific property, actions such as clicking on buttons or filling out forms, and more. -Cypress provides their own list of best practices here: [https://docs.cypress.io/guides/references/best-practices](https://docs.cypress.io/guides/references/best-practices) +# Best Practices One common use case for cypress (and UI testing in general) is to test responsiveness, does the UI look like it should in different viewports? @@ -66,7 +68,7 @@ viewports.forEach(viewport => { } ``` In tests, you can include snippets of code like -``` +```javascript if (viewport.name == ‘small’) { cy.get("@somedivmobileonly").should('exist') } else if (viewport.name == 'large') { @@ -74,3 +76,26 @@ if (viewport.name == ‘small’) { } ``` +Another common test for responsiveness is checking the alignment of items, for example testing that one element should be above another in a small viewport and beside another in a larger viewport. + +In this case, you should use a closure (described in the [variables and aliases](https://docs.cypress.io/guides/core-concepts/variables-and-aliases) section) to store the first element's position: + +```javascript +cy.get('elem1').then($elem => { + cy.get('elem2').then($elem2 => { + let p1 = $elem.position() + let p2 = $elem2.position() + if (viewport.name == 'small') { + expect(p1.top).to.be.greaterThan(p2.top) + expect(p1.left).to.be.equal(p2.left) + } else { + expect(p1.top).to.be.equal(p1.top) + expect(p1.left).to.be.greaterThan(p1.left) + } + }) +}) +``` + +Note the use of `expect` instead of `should`, since we are not chaining off of a cypress command we use an assertion instead. See [here](https://docs.cypress.io/guides/references/assertions) for other assertions. + +For more, Cypress provides their own list of best practices here: [https://docs.cypress.io/guides/references/best-practices](https://docs.cypress.io/guides/references/best-practices). I highly recommend reading their guide, if I had known about this before, I would have saved a lot of effort learning the hard way what not to do. \ No newline at end of file From 0eaaab635837da123638b52f52421bb0b951501a Mon Sep 17 00:00:00 2001 From: Azalea Date: Thu, 23 Nov 2023 13:06:03 -0800 Subject: [PATCH 085/118] [F] Fix typos --- Topics/Development_Process/Docker.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/Topics/Development_Process/Docker.md b/Topics/Development_Process/Docker.md index 2f78a2cac..967897331 100644 --- a/Topics/Development_Process/Docker.md +++ b/Topics/Development_Process/Docker.md @@ -22,18 +22,18 @@ For detailed installation instructions based on specific operating systems click ## Creating Dockerfiles -Once you've installed Docker, to see it in action you can follow any one of these quick tutorials on creating a Dockerfile that builds a docker image: +Once you've installed Docker, to see it in action you can follow any one of these quick tutorials on creating a Dockerfile that builds a Docker image: -- [Dockerizing a React App](https://mherman.org/blog/dockerizing-a-react-app/) (Simple and quick tutorial for containerizing a React App, contains explanations when needed. I recommend this if you want to quickly get something running plus see what the next steps look like) +- [Dockerizing a React App](https://mherman.org/blog/dockerizing-a-react-app/) (This simple and quick tutorial for containerizing a React App, contains explanations when needed. I recommend this if you want to quickly get something running plus see what the next steps look like) - [Dockerize a Flask App](https://www.freecodecamp.org/news/how-to-dockerize-a-flask-app/) (Super detailed step-by-step explanations tutorial for containerizing a flask app. I recommend this if you want to understand the process in detail) - [Docker's official tutorial for containerizing an application](https://docs.docker.com/get-started/02_our_app/) (Can't go wrong with the official tutorial.) ### Automatic Dockerfile Generation -Since Docker is widely used, there are a lot of Dockerfile-related knowledge in ChatGPT's training data, and the AI is capable of generating Dockerfiles for most software architectrues. If you want to easily containerize your app, you can use OpenAI's ChatGPT 3.5-turbo to generate the Dockerfile for you. To do this, you first need to gather a tree of your project directory for ChatGPT to better understand your project architecture (On Linux/macOS, run `tree -I node_modules` in your project directory). Then, you can ask ChatGPT using something similar to the following prompt: +Since Docker is widely used, there is a lot of Dockerfile-related knowledge in ChatGPT's training data, and the AI is capable of generating Dockerfiles for most software architectures. If you want to easily containerize your app, you can use OpenAI's ChatGPT 3.5-turbo to generate the Dockerfile for you. To do this, you first need to gather a tree of your project directory for ChatGPT to better understand your project architecture (On Linux/macOS, run `tree -I node_modules` in your project directory). Then, you can ask ChatGPT using something similar to the following prompt: ``` -Please write a Dockerfile for my project. I use the command `python3 -m projectname` to start my app. My project file structure is specified by the tree below. Please make sure that the Dockerfile is optimized with best practices from the industry and the image size is as small as possible. +Please write a Dockerfile for my project. I use the command `python3 -m projectname` to start my app. My project file structure is specified by the tree below. Please make sure that the Dockerfile is optimized with best practices from the industry and that the image size is as small as possible. . ├── README.md @@ -54,11 +54,11 @@ Please write a Dockerfile for my project. I use the command `python3 -m projectn I have the following runtime dependencies that might require APT packages: psycopg2 ``` -This method will generate something that's much more optimized than any beginner can write. For example, it will clear APT cache for dependency installation, and use separate builder and runtime images to reduce image size, which involves understanding the intricate Docker image layering mechanism. You can learn a lot from reading and understanding the generated Dockerfile. +This method will generate something that's much more optimized than any beginner can write. For example, it will clear the APT cache for dependency installation, and use separate builder and runtime images to reduce image size, which involves understanding the intricate Docker image layering mechanism. You can learn a lot from reading and understanding the generated Dockerfile. ## Next Steps -Congratulations! you have successfully learnt how to Dockerize an app. In the process, you have learnt what is a `Dockerfile`, how to create a `Dockerfile`, how to build a Docker Container Image and how to start a Docker Container. Now what's next? +Congratulations! You have successfully learned how to Dockerize an app. In the process, you have learnt what is a `Dockerfile`, how to create a `Dockerfile`, how to build a Docker Container Image and how to start a Docker Container. Now what's next? Now you might want a React Container to communicate with a containerized Flask API. How do we do this? This is where [Docker Compose](https://docs.docker.com/compose/) comes in. It allows you to define, and control multiple containers at once. Your next goal should be defining a `docker-compose.yml` for your project and see if you can get multiple services/containers to successfully communicate. @@ -116,11 +116,11 @@ jobs: tags: ${{ secrets.DOCKERHUB_USERNAME }}/YOUR_IMAGE_NAME_HERE:latest ``` -Note: This workflow will automatically build and push on each commit to the `main` branch. This is ideal for development, assuming that your main branch is the staging branch. However, you might want to change it or create a separate workflow with a separate image name to only build on tags (releases) for production so that the deployment is more controlled. +Note: This workflow will automatically build and push after each commit to the `main` branch. This is ideal for development, assuming that your main branch is the staging branch. However, you might want to change it or create a separate workflow with a separate image name to only build on tags (releases) for production so that the deployment is more controlled. ## Deploying and Automatic Updates -Now that you have a Docker Image on Docker Hub, you can deploy it to a server. There are many ways and platforms that allows you to do this. You can rent a minimal Linux VPS server or a Docker server for $4-6 per month on various platforms. One platform I recommend is DigitalOcean, as they have a very intuitive web interface and very good [documentation](https://www.digitalocean.com/docs/) for beginners. you can click the referral link (icon) below to get a free $200 credit for 60 days, what a deal! +Now that you have a Docker Image on Docker Hub, you can deploy it to a server. There are many ways and platforms that allow you to do this. You can rent a minimal Linux VPS server or a Docker server for $4-6 per month on various platforms. One platform I recommend is DigitalOcean, as they have a very intuitive web interface and very good [documentation](https://www.digitalocean.com/docs/) for beginners. you can click the referral link (icon) below to get a free $200 credit for 60 days, what a deal! [![DigitalOcean Referral Badge](https://web-platforms.sfo2.cdn.digitaloceanspaces.com/WWW/Badge%201.svg)](https://www.digitalocean.com/?refcode=86dbfd5d0266&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge) @@ -175,9 +175,9 @@ services: POSTGRES_DB: postgres ``` -Since the database is contained within the docker compose network, it is perfectly secure to use the default `postgres` user and password, since it cannot be accessed through the wider internet. However, if you want to expose your database (which is not recommended), you can add the port `5432:5432` to the `db` service and use a stronger password. +Since the database is contained within the docker-compose network, it is perfectly secure to use the default `postgres` user and password, since it cannot be accessed through the wider internet. However, if you want to expose your database (which is not recommended), you can add the port `5432:5432` to the `db` service and use a stronger password. -If you are using any other database, you can find the docker image on [Docker Hub](https://hub.docker.com/search?q=&type=image&category=Database) and follow the instructions there. Please be sure to read the docker container's documentation carefully! Most questions reguarding database images can be answered by reading the documentation. +If you are using any other database, you can find the docker image on [Docker Hub](https://hub.docker.com/search?q=&type=image&category=Database) and follow the instructions there. Please be sure to read the docker container's documentation carefully! Most questions regarding database images can be answered by reading the documentation. ### Automatic Updates @@ -197,16 +197,16 @@ services: This will check for updates every 30 seconds. You can change this to whatever you want. You can also add a `--cleanup` flag to remove old images after updating. -### Advanced deployment +### Advanced Deployment -If you have multiple services and want to deploy them on the same server with different domain names, or setup SSL to make your services secure from MITM (man-in-the-middle) attacks, you can use [Traefik](https://doc.traefik.io/) or [Nginx](https://www.nginx.com/) as a reverse proxy. This is a more advanced topic and is out of the scope of this article. However, you can find many tutorials online on how to do this, such as this DigitalOcean article: [How To Use Traefik v2 as a Reverse Proxy for Docker Containers on Ubuntu 20.04](https://www.digitalocean.com/community/tutorials/how-to-use-traefik-v2-as-a-reverse-proxy-for-docker-containers-on-ubuntu-20-04) +If you have multiple services and want to deploy them on the same server with different domain names or set up SSL to make your services secure from MITM (man-in-the-middle) attacks, you can use [Traefik](https://doc.traefik.io/) or [Nginx](https://www.nginx.com/) as a reverse proxy. This is a more advanced topic and is out of the scope of this article. However, you can find many tutorials online on how to do this, such as this DigitalOcean article: [How To Use Traefik v2 as a Reverse Proxy for Docker Containers on Ubuntu 20.04](https://www.digitalocean.com/community/tutorials/how-to-use-traefik-v2-as-a-reverse-proxy-for-docker-containers-on-ubuntu-20-04) ## Other Resources -Here's a [cheat sheet](https://docs.docker.com/get-started/docker_cheatsheet.pdf) of all useful Docker CLI commands and here's a [cheat sheet](https://devhints.io/docker-compose) for docker compose which should help you in your future endeavors. All the best! +Here's a [cheat sheet](https://docs.docker.com/get-started/docker_cheatsheet.pdf) of all useful Docker CLI commands and here's a [cheat sheet](https://devhints.io/docker-compose) for docker-compose which should help you in your future endeavours. All the best! ## Docker Terminology -- **Container**: A package of code bundled by Docker that runs as an isolated process from your machine. The package of code can be pretty much anything, a single python file, an API, a full stack web application etc. A container is also referred to as a **containerized application**. +- **Container**: A package of code bundled by Docker that runs as an isolated process from your machine. The package of code can be pretty much anything, a single Python file, an API, a full-stack web application etc. A container is also referred to as a **containerized application**. - **Image**: template with a set of instructions for creating a container. *(most of the times these are pre-built so don't worry too much about making one)* From 489fefecb38efb77ab35533bd1c06921fe2bdcc6 Mon Sep 17 00:00:00 2001 From: Azalea Date: Thu, 23 Nov 2023 13:13:02 -0800 Subject: [PATCH 086/118] [U] Clarify key tems --- Topics/Development_Process/Docker.md | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/Topics/Development_Process/Docker.md b/Topics/Development_Process/Docker.md index 967897331..8ec4e26b8 100644 --- a/Topics/Development_Process/Docker.md +++ b/Topics/Development_Process/Docker.md @@ -3,7 +3,7 @@ ## Table of Contents ### [Introduction](#introduction-1) ### [Installation](#installation-1) -### [Getting Started](#getting-started-1) +### [Creating Dockerfiles](#creating-dockerfiles-1) ### [Next Steps](#next-steps-1) ### [Docker Terminology](#docker-terminology-1) @@ -11,7 +11,15 @@ ## Introduction -This article will help readers understand what Docker is, why it is used and provide resources on how to start using it. Docker is used by developers for many reasons, however, the most common reasons are for building, deploying and sharing an application quickly. Docker packages your application into something that's called a [container](#docker-terminology-1). This [container](#docker-terminology-1) is OS-agnostic meaning that developers on Mac, Windows and Linux can share their code without any worry of conflicts. Here's [Amazon's Intro to Docker](https://aws.amazon.com/docker/#:~:text=Docker%20is%20a%20software%20platform,tools%2C%20code%2C%20and%20runtime.) if you want to learn more. +This article will help readers understand what Docker is, why it is used, and provide resources on how to start using it. Docker is used by developers for many reasons, most commonly for building, deploying, and sharing applications quickly. Docker packages your application into a [container](#docker-terminology-1), which is OS-agnostic, allowing developers on Mac, Windows, and Linux to share their code without conflicts. For more information, check out [Amazon's Intro to Docker](https://aws.amazon.com/docker/). + +### Docker Terminology + +* **Container**: A package of code bundled by Docker that runs as an isolated process from your machine. The package of code can be pretty much anything, a single Python file, an API, a full-stack web application, etc. A container is also referred to as a containerized application. +* **Image**: A template with a set of instructions for creating a container. Think of it as a blueprint from which multiple containers can be instantiated. Images are built from Dockerfiles and are essential for running your applications in Docker. +* **Dockerfile**: A text document that contains all the commands a user could call on the command line to assemble an image. It's a recipe for creating Docker images. + +For more detailed explanations, you can refer to Docker's own resources [here](https://docs.docker.com/get-started/). ## Installation @@ -56,6 +64,12 @@ I have the following runtime dependencies that might require APT packages: psyco This method will generate something that's much more optimized than any beginner can write. For example, it will clear the APT cache for dependency installation, and use separate builder and runtime images to reduce image size, which involves understanding the intricate Docker image layering mechanism. You can learn a lot from reading and understanding the generated Dockerfile. +### Clarifying Dockerfiles and Docker Images + +When you start using Docker, you'll come across two key terms: Dockerfile and Docker image. A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. Essentially, it's a set of instructions for Docker to build the image. + +A Docker image, on the other hand, is an executable package that includes everything needed to run an application - the code, a runtime, libraries, environment variables, and config files. You can think of an image as a blueprint for a container. Docker builds an image based on the instructions provided in a Dockerfile. Once the image is built, Docker can create a container from this image. + ## Next Steps Congratulations! You have successfully learned how to Dockerize an app. In the process, you have learnt what is a `Dockerfile`, how to create a `Dockerfile`, how to build a Docker Container Image and how to start a Docker Container. Now what's next? @@ -204,10 +218,3 @@ If you have multiple services and want to deploy them on the same server with di ## Other Resources Here's a [cheat sheet](https://docs.docker.com/get-started/docker_cheatsheet.pdf) of all useful Docker CLI commands and here's a [cheat sheet](https://devhints.io/docker-compose) for docker-compose which should help you in your future endeavours. All the best! - -## Docker Terminology -- **Container**: A package of code bundled by Docker that runs as an isolated process from your machine. The package of code can be pretty much anything, a single Python file, an API, a full-stack web application etc. A container is also referred to as a **containerized application**. - -- **Image**: template with a set of instructions for creating a container. *(most of the times these are pre-built so don't worry too much about making one)* - -Explained in Docker's own words [here](https://docs.docker.com/get-started/) From 45354d139a72c04c03ff0b9424ac441eb6a2a030 Mon Sep 17 00:00:00 2001 From: Kevin Wu Date: Thu, 23 Nov 2023 18:43:14 -0500 Subject: [PATCH 087/118] Intro to Vue --- Topics/Tech_Stacks/VueJS.md | 94 +++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 Topics/Tech_Stacks/VueJS.md diff --git a/Topics/Tech_Stacks/VueJS.md b/Topics/Tech_Stacks/VueJS.md new file mode 100644 index 000000000..8bb2e6ecd --- /dev/null +++ b/Topics/Tech_Stacks/VueJS.md @@ -0,0 +1,94 @@ +# Vue.js + +## Introduction + +Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications. It is known for its ease of integration into projects with other libraries or existing projects, and its capability to power sophisticated Single-Page Applications (SPA) when used in combination with modern tooling and supporting libraries. + +--- + +## Core Features + +1. **Reactive Data Binding:** Vue.js offers a reactive and composable data binding system. It provides a straightforward template syntax to declare the state-driven DOM (Document Object Model) rendering. + +2. **Components:** Vue's component system allows you to build encapsulated reusable custom elements, which can be composed into complex applications. + +3. **Transition Effects:** Vue provides various ways to apply transition effects when items are inserted, updated, or removed from the DOM. + +4. **Virtual DOM:** It utilizes a virtual DOM to render UI, ensuring optimal performance by minimizing direct DOM manipulation. + +5. **Easy to Learn:** Vue.js is considered one of the easiest frameworks to learn, especially for those who are already familiar with HTML, CSS, and JavaScript. + +6. **Ecosystem:** Vue.js has a rich ecosystem supporting routing (Vue Router), state management (Vuex), and build tooling (Vue CLI). + +7. **Single File Components (SFC):** A Vue SFC is a file with a `.vue` extension that encapsulates HTML, JavaScript, and CSS in a single file. This approach makes components more modular and easier to maintain. Below is what inside a `.vue` file: + ```html + + + + + + ``` + + + +## Setting Up + +### Prerequisites +- Basic knowledge of HTML, CSS, and JavaScript +- Node.js and npm installed on your system + +### Installation(one of the following methods) +- **Using Vue CLI (Recommended):** + ``` + npm install -g @vue/cli + vue create my-vue-app + cd my-vue-app + npm run serve + ``` + +- **Direct ` + ``` + +### Create a Basic Vue instance +- In `.js` or `