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/195] [+] 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/195] [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/195] 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/195] 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/195] 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/195] 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/195] 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/195] 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/195] 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/195] 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/195] 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/195] 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/195] 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/195] 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/195] 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/195] 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/195] 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/195] 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 24d5dacc9f6b21b507ce944a54077900f674a344 Mon Sep 17 00:00:00 2001 From: David Lin Date: Wed, 15 Nov 2023 09:07:23 -0500 Subject: [PATCH 019/195] Create WebRTC.md --- Topics/Tech_Stacks/WebRTC.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 Topics/Tech_Stacks/WebRTC.md diff --git a/Topics/Tech_Stacks/WebRTC.md b/Topics/Tech_Stacks/WebRTC.md new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/Topics/Tech_Stacks/WebRTC.md @@ -0,0 +1 @@ + From b8be8bb484b52dea356cd14907109d8494fad68b Mon Sep 17 00:00:00 2001 From: David Lin Date: Wed, 15 Nov 2023 09:11:40 -0500 Subject: [PATCH 020/195] Added introduction in WebRTC.md --- Topics/Tech_Stacks/WebRTC.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/Topics/Tech_Stacks/WebRTC.md b/Topics/Tech_Stacks/WebRTC.md index 8b1378917..3202390d2 100644 --- a/Topics/Tech_Stacks/WebRTC.md +++ b/Topics/Tech_Stacks/WebRTC.md @@ -1 +1,9 @@ +# WebRTC +## Introduction + +You may be wondering how web applications like Google Meet enables video chat functionality, third-party APIs? Turns out that modern browsers has a native set of APIs that enables peer-to-peer communications, called WebRTC. You may be curious about what WebRTC is and its application in integrating video chat into web applications. Allow me to guide you through its basics and uses. + +WebRTC equips both browsers and mobile apps with the capability of real-time communication (RTC) through straightforward APIs. A standout characteristic of WebRTC is its peer-to-peer architecture, which enables data transmission directly between users, bypassing the need for a server. This approach significantly boosts both speed and efficiency. + +The workflow of a standard WebRTC application is quite structured. Initially, it captures the media of the user, such as video or audio. Following this, it locates other users to communicate with. Once found, it sends them a request to connect. After the other side agrees, a connection is established, paving the way for seamless data streaming. This process might seem simple at first glance, but it brings up an important query - how does one find and connect to other peers? This is where the concept of a signaling server becomes crucial, acting as a mediator in the discovery and connection process. From c0ca7a0812a52ce87c962fdcb968fabf5fafe2e3 Mon Sep 17 00:00:00 2001 From: David Lin Date: Wed, 15 Nov 2023 09:36:08 -0500 Subject: [PATCH 021/195] Update WebRTC.md Added description for signalling server and ICE candidates --- Topics/Tech_Stacks/WebRTC.md | 30 ++++++++++++++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/WebRTC.md b/Topics/Tech_Stacks/WebRTC.md index 3202390d2..8fa9d1e56 100644 --- a/Topics/Tech_Stacks/WebRTC.md +++ b/Topics/Tech_Stacks/WebRTC.md @@ -2,8 +2,34 @@ ## Introduction -You may be wondering how web applications like Google Meet enables video chat functionality, third-party APIs? Turns out that modern browsers has a native set of APIs that enables peer-to-peer communications, called WebRTC. You may be curious about what WebRTC is and its application in integrating video chat into web applications. Allow me to guide you through its basics and uses. +You may be wondering how web applications like Google Meet enables video chat functionality, third-party APIs? Turns out that modern browsers has a native set of APIs that enables peer-to-peer communications, called [WebRTC](https://webrtc.org). You may be curious about what WebRTC is and its application in integrating video chat into web applications. Allow me to guide you through its basics and uses. WebRTC equips both browsers and mobile apps with the capability of real-time communication (RTC) through straightforward APIs. A standout characteristic of WebRTC is its peer-to-peer architecture, which enables data transmission directly between users, bypassing the need for a server. This approach significantly boosts both speed and efficiency. -The workflow of a standard WebRTC application is quite structured. Initially, it captures the media of the user, such as video or audio. Following this, it locates other users to communicate with. Once found, it sends them a request to connect. After the other side agrees, a connection is established, paving the way for seamless data streaming. This process might seem simple at first glance, but it brings up an important query - how does one find and connect to other peers? This is where the concept of a signaling server becomes crucial, acting as a mediator in the discovery and connection process. + +## Signaling Server + +In order to establish a peer-to-peer connection, you will first need a central server so that the peers could communicate first. The signalling server essentially acts as a proxy, user send activities to it and it will broadcast to the rest of the peers as signals. This is usually achieved with [WebSocket](https://www.geeksforgeeks.org/what-is-web-socket-and-how-it-is-different-from-the-http/). For example, when a user joins a room, the user makes a request to the server and then is broadcasted with the peers, so the peers within the same channels are notified that the user has joined. + +## ICE candidates + +You might be wondering now why do we need a signaling server? The peer-to-peer connection can only be established after the peers have exchanged their ICE candidates, and that's why we need a signaling server. ICE (Interactive Connectivity Establishment) is an essential part of WebRTC that enables real-time communication even in the face of complex network scenarios. An ICE candidate is a potential method that two peers on a WebRTC session can use to communicate. Each candidate is a combination of a transport address (a combination of IP address and a port number), a transport protocol (usually UDP or TCP), and a type that reflects the candidate's network topology. + +ICE candidates are collected for each type of media in the connection (be it audio, video, or data). The process of gathering these candidates is known as "ICE gathering." + +There are three primary types of ICE candidates: + + * **Host Candidates:** These candidates use IP addresses from the device’s own network interfaces, like Wi-Fi or Ethernet. They offer the most straightforward connection paths between peers. However, they might be unusable in situations where a direct peer-to-peer connection is hindered by firewalls or NAT (Network Address Translation). + * **Server Reflexive Candidates:** These candidates represent the external addresses of a NAT. They are determined by interacting with a STUN (Session Traversal Utilities for NAT) server. In this process, the client sends a request to the STUN server, which then responds with the public IP address and port that it sees for the client. + * **Relayed Candidates:** In scenarios where both direct connections and STUN methods fail, communication between peers may occur through a TURN (Traversal Using Relays around NAT) server. This server acts as an intermediary, relaying media between the peers. This method is more resource-demanding and is generally considered a fallback option. + +Once a peer gathers an ICE candidate, it sends a message over the signaling channel to the other peer. This message includes the candidate's transport address, protocol, and type. The receiving peer adds the candidate to its RTCPeerConnection by calling the addIceCandidate() method. The process continues until all candidates have been gathered and sent to the other peer. + +## STUN and TURN servers + +STUN and TURN servers play a crucial role in ICE: + +* **STUN Servers:** A STUN server is used to discover the public IP/port, which is necessary to generate server reflexive candidates. It's also used in connectivity checks to punch holes in firewalls and NATs. +* **TURN Servers:** A TURN server is used when direct connection and STUN are unsuccessful, usually due to network restrictions. It acts as a relay, forwarding media between peers. Relayed candidates are the least preferred due to their high usage of bandwidth and processing power. + +Why you need a TURN server? Sometimes, you will need a server in between to bypass restrictions such as firewalls. This is common if a user is on Cellular as opposed to Wi-Fi where Cellular has more restrictions. Thus the connection has to be established through a TURN server as it usually runs on port 80 or 443 to bypass the restrictions. There are several solutions on the internet, but they all come with a cost. There is a way around this is to host your own TURN server with [coturn](https://github.com/coturn/coturn). From 337030ed212d6e94087cf60cc2c4e574a050f5a9 Mon Sep 17 00:00:00 2001 From: ICPRplshelp <93059453+ICPRplshelp@users.noreply.github.com> Date: Fri, 17 Nov 2023 07:24:58 -0500 Subject: [PATCH 022/195] GitHub pages --- Topics/Development_Process/Github_Pages.md | 91 ++++++++++++++++++++++ 1 file changed, 91 insertions(+) create mode 100644 Topics/Development_Process/Github_Pages.md diff --git a/Topics/Development_Process/Github_Pages.md b/Topics/Development_Process/Github_Pages.md new file mode 100644 index 000000000..832fefff8 --- /dev/null +++ b/Topics/Development_Process/Github_Pages.md @@ -0,0 +1,91 @@ +# GitHub Pages + +If you have ever created a "site" before using HTML, maybe with CSS and perhaps Javascript, and wondered how you could host it online through a link, here's your solution. + +From the [GitHub docs](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages): + +> GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website. + +In other words, it is a **free static website host.** It's reliable, your pages will remain up forever (unless GitHub changes this), and can handle a reasonable amount of bandwidth (100GB/mo), given you aren't serving images or large files. + +**Note:** Free for public repositories. You need GitHub pro if you want to do this for private repositories. The deployed "page" will be public but your repo will remain private. Students should be able to get Pro for free. + +## Caveats + +Many people use GitHub pages to host blogs and personal portfolios. You can also host web applications, although I would only suggest using it for lightweight stuff -- mainly, things that would be **read**, not **written.** In other words, I **would not** use GitHub pages as a substitute for Google Forms, even though you could still do that. **I would also not use GitHub pages if you need to pair a frontend with a backend.** There are other great alternatives that you can find in this wiki, such as [Vercel](https://vercel.com/), [Render](https://render.com/), and so on. + +**Beware:** [GitHub doesn't like using people using pages for](https://docs.github.com/en/pages/getting-started-with-github-pages/about-github-pages#prohibited-uses) commercial use or to handle sensitive data. + +## Getting started - Deploying a static HTML site + +Here's a quick overview on **how to deploy a simple, static HTML site.** It's simple, but it can be hard to remember clearly, so feel free to use this as a reference every time you do so. + +1. Create a new repo. +2. Add your HTML/CSS/js files to your repository. + 1. You should name your HTML file `index.html` -- that's the "home" page. + 2. Other than that, if your css/javascript works on your machine if you were to clone this repo, it should also work on GitHub pages. +3. Go to your repository settings. +4. Navigate to Pages in the repository's settings. +5. Choose a branch you want to deploy your page to (it should say `None` by default`). **The moment you select your branch and hit save, GitHub Pages will be enabled and will start deploying.** It should take between 1-2 minutes. This point onwards, your GitHub page will update every time you commit something to the repository. + +Your site by default will have this URL: + +``` +.github.io// +``` + +By default, `index.html` will show up. + +To access another file in your repository, your URL would be: + +``` +.github.io// +``` + +For example, if my GitHub username was `user`, my repo name was `repo`, and my repository had these files: + +``` +somerandomfolder/a.html +contact.html +index.html +styles.css +``` + +Then the links to these files would be, respectively: + +``` +https://user.github.io/repo/somerandomfolder/a.html +https://user.github.io/repo/somerandomfolder/contact.html +https://user.github.io/repo/somerandomfolder or user.github.io/repo/somerandomfolder/index.html +https://user.github.io/repo/somerandomfolder/styles.css +``` + +## Deploying a React project + +As simple as [following this tutorial](https://create-react-app.dev/docs/deployment#github-pages), from create-react-app, a well-known tool for, well, creating a React app. + +If you want routing, follow [this](https://www.freecodecamp.org/news/deploy-a-react-app-to-github-pages/). This involves making changes to your React project, so don't worry about touching GitHub for this. + +Maybe you might want to [automate the process with GitHub actions?](https://github.com/marketplace/actions/deploy-react-to-github-pages) + +**NOTE:** Please don't use this for Next.js projects; Vercel's already got you. + +## Deploying an Angular Project + +- [Here's your React equivalent.](https://github.com/angular-schule/angular-cli-ghpages) + +- [Want to automate this?](https://github.com/marketplace/actions/angular-deploy-gh-pages-actions) + +## Will I ever run out of bandwidth? + +There's a 100GB monthly *soft* bandwidth limit. That's the amount of data that can be transferred from GitHub to users accessing the site until GitHub starts getting a bit upset. + +Ensure the files you transmit are small, because on each page load assuming no caching, the amount of bandwidth you transfer is the sum of the size of all files served to the user that came from your repository (quite unfortunate you can't use Discord as a CDN anymore). + +If you want an approximate number of page views your site can handle, here's a formula: + +``` +(PAGE VIEWS * TYPICAL SIZE OF YOUR HTML FILE AND DATA TRANSFERRED IN MB) / 100 000 +``` + +Images are large. Really large. A 1080p image with lots of compression takes up 100KB - that's about 100,000 characters, or around 20K words assuming words are 5 characters long. Think twice before including images. From 9ebf96ac43f9bb241e8f92a56d05c93e2b4c579a Mon Sep 17 00:00:00 2001 From: David Lin Date: Fri, 17 Nov 2023 10:55:27 -0500 Subject: [PATCH 023/195] Update WebRTC.md --- Topics/Tech_Stacks/WebRTC.md | 45 ++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/Topics/Tech_Stacks/WebRTC.md b/Topics/Tech_Stacks/WebRTC.md index 8fa9d1e56..c073f963b 100644 --- a/Topics/Tech_Stacks/WebRTC.md +++ b/Topics/Tech_Stacks/WebRTC.md @@ -11,6 +11,15 @@ WebRTC equips both browsers and mobile apps with the capability of real-time com In order to establish a peer-to-peer connection, you will first need a central server so that the peers could communicate first. The signalling server essentially acts as a proxy, user send activities to it and it will broadcast to the rest of the peers as signals. This is usually achieved with [WebSocket](https://www.geeksforgeeks.org/what-is-web-socket-and-how-it-is-different-from-the-http/). For example, when a user joins a room, the user makes a request to the server and then is broadcasted with the peers, so the peers within the same channels are notified that the user has joined. +Example signal +``` +{ + type: "EXCHANGE", + from: userId, + to: otherUserId, + sdp: JSON.stringify(pc.localDescription), +} +``` ## ICE candidates You might be wondering now why do we need a signaling server? The peer-to-peer connection can only be established after the peers have exchanged their ICE candidates, and that's why we need a signaling server. ICE (Interactive Connectivity Establishment) is an essential part of WebRTC that enables real-time communication even in the face of complex network scenarios. An ICE candidate is a potential method that two peers on a WebRTC session can use to communicate. Each candidate is a combination of a transport address (a combination of IP address and a port number), a transport protocol (usually UDP or TCP), and a type that reflects the candidate's network topology. @@ -25,6 +34,20 @@ There are three primary types of ICE candidates: Once a peer gathers an ICE candidate, it sends a message over the signaling channel to the other peer. This message includes the candidate's transport address, protocol, and type. The receiving peer adds the candidate to its RTCPeerConnection by calling the addIceCandidate() method. The process continues until all candidates have been gathered and sent to the other peer. +Ex: Broadcasting your ICE candidates +```javascript +peerConnection.addEventListener('icecandidate', event => { + if (event.candidate) { + this.signalingChannel.send({ + type: EXCHANGE, + from: userId, + to: otherUserId, + sdp: JSON.stringify(event.candidate), + }) + } +}); +``` + ## STUN and TURN servers STUN and TURN servers play a crucial role in ICE: @@ -33,3 +56,25 @@ STUN and TURN servers play a crucial role in ICE: * **TURN Servers:** A TURN server is used when direct connection and STUN are unsuccessful, usually due to network restrictions. It acts as a relay, forwarding media between peers. Relayed candidates are the least preferred due to their high usage of bandwidth and processing power. Why you need a TURN server? Sometimes, you will need a server in between to bypass restrictions such as firewalls. This is common if a user is on Cellular as opposed to Wi-Fi where Cellular has more restrictions. Thus the connection has to be established through a TURN server as it usually runs on port 80 or 443 to bypass the restrictions. There are several solutions on the internet, but they all come with a cost. There is a way around this is to host your own TURN server with [coturn](https://github.com/coturn/coturn). + +![turn-server-21d0a088ff33ba667aa62b5101226d57-2](https://github.com/davidlin2k/learning-software-engineering.github.io/assets/17074619/d662b500-8445-43be-ba21-ed92484bb021) +Image from https://www.metered.ca/tools/openrelay/assets/images/turn-server-21d0a088ff33ba667aa62b5101226d57.png + +## Signalling and Establishing Connection + +Establishing a WebRTC connection involves several steps and operations. [Here](https://webrtc.org/getting-started/peer-connections)'s a more detailed explanation of each step. + +## Streaming + +After the connection is established and say you receive the stream from the other user, this is where the on ontrack event handler comes in place. With the event handler, you can now start streaming audio and video between the peers. + +``` +const remoteVideo = document.querySelector('#remoteVideo'); + +peerConnection.addEventListener('track', async (event) => { + const [remoteStream] = event.streams; + remoteVideo.srcObject = remoteStream; +}); +``` + +Example from https://webrtc.org/getting-started/remote-streams From 70210c0e93433d911dd527cd6539b21a16a3806d Mon Sep 17 00:00:00 2001 From: David Lin Date: Fri, 17 Nov 2023 11:08:30 -0500 Subject: [PATCH 024/195] Update WebRTC.md --- Topics/Tech_Stacks/WebRTC.md | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/Topics/Tech_Stacks/WebRTC.md b/Topics/Tech_Stacks/WebRTC.md index c073f963b..043d21ffd 100644 --- a/Topics/Tech_Stacks/WebRTC.md +++ b/Topics/Tech_Stacks/WebRTC.md @@ -1,5 +1,15 @@ # WebRTC +## Table of Contents +* [Introduction](#introduction) +* [Signaling Server](#signaling-server) +* [ICE candidates](#ice-candidates) +* [STUN and TURN servers](#stun-and-turn-servers) +* [Signalling and Establishing Connection](#signalling-and-establishing-connection) +* [Streaming](#streaming) +* [Other Architectures](#other-architectures) +* [Additional Resources](#additional-resources) + ## Introduction You may be wondering how web applications like Google Meet enables video chat functionality, third-party APIs? Turns out that modern browsers has a native set of APIs that enables peer-to-peer communications, called [WebRTC](https://webrtc.org). You may be curious about what WebRTC is and its application in integrating video chat into web applications. Allow me to guide you through its basics and uses. @@ -78,3 +88,26 @@ peerConnection.addEventListener('track', async (event) => { ``` Example from https://webrtc.org/getting-started/remote-streams + +## Other Architectures + +The peer-to-peer (P2P) model in WebRTC, while advantageous for small-scale interactions, faces significant scalability challenges as the number of participants in a group call increases. This exponential growth in connections can quickly become impractical and resource-intensive. For instance, in a 100-person video conference, the necessity to establish 4950 unique connections (calculated as n(n-1)/2 for n participants) demonstrates the limitation of the P2P model for large groups. This is where alternative architectures like SFU (Selective Forwarding Unit) and MCU (Multipoint Control Unit) come into play, offering more scalable solutions for WebRTC applications. + +* **Selective Forwarding Unit (SFU)** + * Architecture: In an SFU setup, each participant sends their media (audio/video) streams to the SFU server, which then selectively forwards these streams to other participants. + * Scalability: This model significantly reduces the number of connections each participant needs to manage. For example, in a 100-person call, each participant only connects to the SFU, not to every other participant. + * Advantages: It offers a balance between resource usage and quality, as the SFU can make intelligent decisions about which streams to forward based on network conditions and user preferences. + * Limitations: The SFU does not process the media streams, so each participant may still need to decode multiple streams, which can be resource-intensive on the client side. +* **Multipoint Control Unit (MCU)** + * Architecture: The MCU model takes a more centralized approach, where all streams are sent to the MCU server. The server processes these streams, mixing them into a single composite stream that is then sent back to each participant. + * Scalability: This approach is highly scalable in terms of the number of connections since each participant only needs a single connection to the MCU. + * Advantages: It greatly reduces the processing load on client devices, as they only need to handle one stream regardless of the number of participants in the call. + * Limitations: The downside is the high processing load on the server, which can lead to increased costs and potential for higher latency, as the media streams need to be mixed in real time. + +## Additional Resources + +* [WebRTC Website](https://webrtc.org) +* [WebRTC Samplea](https://webrtc.github.io/samples/) +* [Free TURN Server](https://www.metered.ca/tools/openrelay/) +* [Public STUN Servers](https://gist.github.com/mondain/b0ec1cf5f60ae726202e) +* [P2P vs MCU vs SFU](https://getstream.io/blog/what-is-a-selective-forwarding-unit-in-webrtc/) From 4d867bde7abe653ad418bdf90307faba8ac195be Mon Sep 17 00:00:00 2001 From: David Lin Date: Fri, 17 Nov 2023 11:10:21 -0500 Subject: [PATCH 025/195] Update WebRTC.md --- Topics/Tech_Stacks/WebRTC.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/WebRTC.md b/Topics/Tech_Stacks/WebRTC.md index 043d21ffd..dce99dffc 100644 --- a/Topics/Tech_Stacks/WebRTC.md +++ b/Topics/Tech_Stacks/WebRTC.md @@ -107,7 +107,7 @@ The peer-to-peer (P2P) model in WebRTC, while advantageous for small-scale inter ## Additional Resources * [WebRTC Website](https://webrtc.org) -* [WebRTC Samplea](https://webrtc.github.io/samples/) +* [WebRTC Samples](https://webrtc.github.io/samples/) * [Free TURN Server](https://www.metered.ca/tools/openrelay/) * [Public STUN Servers](https://gist.github.com/mondain/b0ec1cf5f60ae726202e) * [P2P vs MCU vs SFU](https://getstream.io/blog/what-is-a-selective-forwarding-unit-in-webrtc/) From 49965a489608ff473a5af21ffb8efc4a077d3968 Mon Sep 17 00:00:00 2001 From: Jazli14 <95947726+Jazli14@users.noreply.github.com> Date: Fri, 17 Nov 2023 16:04:07 -0500 Subject: [PATCH 026/195] Create Deploy_Node.js_AWS --- Topics/Development_Process/Deploy_Node.js_AWS | 1 + 1 file changed, 1 insertion(+) create mode 100644 Topics/Development_Process/Deploy_Node.js_AWS diff --git a/Topics/Development_Process/Deploy_Node.js_AWS b/Topics/Development_Process/Deploy_Node.js_AWS new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/Topics/Development_Process/Deploy_Node.js_AWS @@ -0,0 +1 @@ + From 3b24e9dd5ac931c5f6880d640987ac8c2b301d3e Mon Sep 17 00:00:00 2001 From: Jazli14 <95947726+Jazli14@users.noreply.github.com> Date: Fri, 17 Nov 2023 16:05:43 -0500 Subject: [PATCH 027/195] Update and rename Deploy_Node.js_AWS to Deploy_Node.js_AWS.md --- Topics/Development_Process/Deploy_Node.js_AWS | 1 - .../Development_Process/Deploy_Node.js_AWS.md | 18 ++++++++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) delete mode 100644 Topics/Development_Process/Deploy_Node.js_AWS create mode 100644 Topics/Development_Process/Deploy_Node.js_AWS.md diff --git a/Topics/Development_Process/Deploy_Node.js_AWS b/Topics/Development_Process/Deploy_Node.js_AWS deleted file mode 100644 index 8b1378917..000000000 --- a/Topics/Development_Process/Deploy_Node.js_AWS +++ /dev/null @@ -1 +0,0 @@ - diff --git a/Topics/Development_Process/Deploy_Node.js_AWS.md b/Topics/Development_Process/Deploy_Node.js_AWS.md new file mode 100644 index 000000000..c568eb834 --- /dev/null +++ b/Topics/Development_Process/Deploy_Node.js_AWS.md @@ -0,0 +1,18 @@ +# Node.js Deployment through Docker and AWS + +## Table of Contents +### [Tech Stack Overview](#tech-stack-overview-1) + +In the realm of modern software development, containerization has become a standard practice for deploying applications. Docker simplifies this process by packaging applications and their dependencies into containers, ensuring consistency across various environments. Node.js, a popular JavaScript runtime, is often used to build scalable and efficient server-side applications. + +AWS (Amazon Web Services) provides a suite of cloud services that enable developers to deploy and manage applications easily. ECS (Elastic Container Service) and ECR (Elastic Container Registry) are two fundamental services offered by AWS to manage containers and container images, respectively. + +## Tech Stack Overview + +Docker: Docker is a platform that allows you to package an application and its dependencies into a standardized unit called a container. It provides isolation, portability, and scalability for applications. It allows for easy deployment as it essentially creates a separate virtual machine to run the application on. + +Node.js: Node.js is a JavaScript runtime environment which is built on Chrome's V8 JavaScript engine. It enables developers to run JavaScript code on the server-side, making it ideal for building scalable network applications. + +AWS ECS (Elastic Container Service): ECS is a fully-managed container orchestration service provided by AWS. It allows you to run, stop, and manage Docker containers on a cluster of EC2 instances easily. + +AWS ECR (Elastic Container Registry): ECR is a managed Docker container registry provided by AWS. It allows you to store, manage, and deploy Docker container images, making it easy to integrate with ECS for container deployments. From 4d2ce9f2d8a6e6daf2f9ab78c6ea45d85427c74a Mon Sep 17 00:00:00 2001 From: Jazli14 <95947726+Jazli14@users.noreply.github.com> Date: Fri, 17 Nov 2023 16:06:53 -0500 Subject: [PATCH 028/195] Update Deploy_Node.js_AWS.md --- Topics/Development_Process/Deploy_Node.js_AWS.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/Topics/Development_Process/Deploy_Node.js_AWS.md b/Topics/Development_Process/Deploy_Node.js_AWS.md index c568eb834..5200d8a02 100644 --- a/Topics/Development_Process/Deploy_Node.js_AWS.md +++ b/Topics/Development_Process/Deploy_Node.js_AWS.md @@ -1,13 +1,11 @@ # Node.js Deployment through Docker and AWS -## Table of Contents -### [Tech Stack Overview](#tech-stack-overview-1) - +## Overview In the realm of modern software development, containerization has become a standard practice for deploying applications. Docker simplifies this process by packaging applications and their dependencies into containers, ensuring consistency across various environments. Node.js, a popular JavaScript runtime, is often used to build scalable and efficient server-side applications. AWS (Amazon Web Services) provides a suite of cloud services that enable developers to deploy and manage applications easily. ECS (Elastic Container Service) and ECR (Elastic Container Registry) are two fundamental services offered by AWS to manage containers and container images, respectively. -## Tech Stack Overview +## Tech Stack Docker: Docker is a platform that allows you to package an application and its dependencies into a standardized unit called a container. It provides isolation, portability, and scalability for applications. It allows for easy deployment as it essentially creates a separate virtual machine to run the application on. From 5826268a2c0f2c251c2fd015bee5828771fd2462 Mon Sep 17 00:00:00 2001 From: Jazli14 <95947726+Jazli14@users.noreply.github.com> Date: Fri, 17 Nov 2023 16:07:59 -0500 Subject: [PATCH 029/195] Update Deploy_Node.js_AWS.md --- Topics/Development_Process/Deploy_Node.js_AWS.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/Topics/Development_Process/Deploy_Node.js_AWS.md b/Topics/Development_Process/Deploy_Node.js_AWS.md index 5200d8a02..9c02a6059 100644 --- a/Topics/Development_Process/Deploy_Node.js_AWS.md +++ b/Topics/Development_Process/Deploy_Node.js_AWS.md @@ -11,6 +11,9 @@ Docker: Docker is a platform that allows you to package an application and its d Node.js: Node.js is a JavaScript runtime environment which is built on Chrome's V8 JavaScript engine. It enables developers to run JavaScript code on the server-side, making it ideal for building scalable network applications. -AWS ECS (Elastic Container Service): ECS is a fully-managed container orchestration service provided by AWS. It allows you to run, stop, and manage Docker containers on a cluster of EC2 instances easily. +Amazon ECS (Elastic Container Service): ECS is a fully-managed container orchestration service provided by AWS. It allows you to run, stop, and manage Docker containers on a cluster of EC2 instances easily. + +Amazon ECR (Elastic Container Registry): ECR is a managed Docker container registry provided by AWS. It allows you to store, manage, and deploy Docker container images, making it easy to integrate with ECS for container deployments. + +Amazon EC2 (Elastic Compute Cloud): EC2 is AWS's resizable cloud computing service offering virtual machines (instances) for running applications. It provides flexibility to configure and scale computing resources based on demand. -AWS ECR (Elastic Container Registry): ECR is a managed Docker container registry provided by AWS. It allows you to store, manage, and deploy Docker container images, making it easy to integrate with ECS for container deployments. 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 030/195] 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 031/195] 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 032/195] 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 033/195] 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 034/195] 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 035/195] 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 036/195] 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 037/195] 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 038/195] 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 039/195] 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 040/195] 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 041/195] 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 042/195] 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 043/195] 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 044/195] 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 045/195] 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 046/195] 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 047/195] 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 048/195] 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 049/195] 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 7ae3647935ca5795a3f15cf73ed89f3e3a3d625a Mon Sep 17 00:00:00 2001 From: K M Crawford Date: Sat, 18 Nov 2023 13:14:57 -0500 Subject: [PATCH 050/195] update react resources page --- Topics/Tech_Stacks/React.md | 58 +++++++++++++++++++++++++------------ 1 file changed, 40 insertions(+), 18 deletions(-) diff --git a/Topics/Tech_Stacks/React.md b/Topics/Tech_Stacks/React.md index adcf7989f..f2a1a3c08 100644 --- a/Topics/Tech_Stacks/React.md +++ b/Topics/Tech_Stacks/React.md @@ -1,37 +1,59 @@ ## Tech Stacks ### React Overview -React is a Javascript library used to build user interfaces. As such, you're going to have to know HTML, CSS and Javascript in order to learn React. -It's ease of use and popularity comes from how little you actually have to code. Easily applicable for any frontend interface, if you're going to use any library/framework for frontend development, React is the safest option. +React is an open-source JavaScript library for building component-based user interfaces. This component-based architecture allows engineers to quickly prototype and develop complex applications easily by modularizing common functionalities into discrete, reusable UI **s, and React boasts a large user base full of freely available components libraries. Beyond this, React utilizes a virtual DOM, JSX, React Native, and much more -- so much more that it can be [overwhelming](https://auth0.com/blog/how-to-manage-javascript-fatigue/). -### React Resources +To help ease the learning curve, below you'll find a variety of resources to reference while learning and components and libraries to use with React. -These frontend challenges for HTML, CSS and JavaScript will help you review core skills while also making interesting projects as well. \ -https://www.frontendmentor.io/ +### React Learning Resources +[Full-Stack Open](https://fullstackopen.com/) +A full, free course provided by the University of Helsinki that teaches the MERN (MongoDB, Express, React, NodeJS) stack. It also covers TypeScript, GraphQL, React Native, and some CI/CD. An excellent resource for React beginners. -Basic React tutorial provided by the official React website. This tutorial will guide you through a very basic tutorial that you can do straight from your browser. \ -https://reactjs.org/tutorial/tutorial.html +[Coursera Learn React Basics](https://www.coursera.org/learn/react-basics) +A free course provided by Coursera that covers the basics of React, including State, navigation, and taking user input via forms. +[Free Scrimba React Course](https://scrimba.com/learn/learnreact) +A free course provided by Scrimba that teaches React fundamentals through the creation of various applications including an AirBnB clone, a meme generator, and a notes app. -React tutorial by MDN Web Docs. Useful readings for if you have time, but not necessary by any means.\ -https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started +[Official React Tutorial](https://reactjs.org/tutorial/tutorial.html) +Basic React tutorial provided by the official React website. This tutorial will guide you through a very basic tutorial that you can do straight from your browser. +[React JS Crash Course](https://www.youtube.com/watch?v=w7ejDZ8SWv8) +[One Hour React Tutorial](https://www.youtube.com/watch?v=b9eMGE7QtTk) +One hour in-depth tutorials about React. These Youtube crash course provides a great overview of React and various important components that you will be using often. Very useful if you are learning React under a strict time limit for whatever reason. -Javascript frameworks tutorial provided by Microsoft. Useful readings, but not necessary to learn React. \ -https://learn.microsoft.com/en-us/windows/dev-environment/javascript/ +[Front-End Mentor](https://www.frontendmentor.io/) +These frontend challenges for HTML, CSS and JavaScript will help you review core skills while also making interesting projects. +[Mozilla React Tutorial](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started) +React tutorial by MDN Web Docs. Useful readings for if you have time, but not necessary by any means. -1 hour in depth tutorials about React. These Youtube crash course provides a great in depth look at React and the various important components that you will be using most often. Very useful if you are learning React under a strict time limit for whatever reason. \ -https://www.youtube.com/watch?v=w7ejDZ8SWv8 \ -https://www.youtube.com/watch?v=b9eMGE7QtTk +[Microsoft JavaScript Tutorial](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/) +Javascript frameworks tutorial provided by Microsoft. Useful readings, but not necessary to learn React. +### Useful React Tools and Libraries -Online development environment to try React out in (Among other frontend tools). Great for testing the waters with React to see if it will be something you want to learn or not. \ -https://codepen.io/ +[Create React App](https://create-react-app.dev/) +Allows you to set up your React applications using a single command without having to configure many build tools. Provides a lot of useful functionality like instant reloads and optimizations for deployment. +[usehooks-ts](https://usehooks-ts.com/) +A React library of useful hooks that go well beyond those built into React. Don't reinvent the wheel! usehooks offers over forty ready-to-use hooks such as [useEffectOnce](https://usehooks-ts.com/react-hook/use-effect-once) and [useInterval](https://usehooks-ts.com/react-hook/use-interval). -Host your React websites straight from your Github repo. Website hosting is fairly expensive, so this is here as a free alternative for website deployment. \ -https://pages.github.com/ +[Redux](https://redux.js.org/) +The official React solution for state management. Redux provides functionality for reducers, advanced debugging tools, and more that will simplify the state management for your app. +[Material UI](https://mui.com/material-ui/) +A fully-featured UI library that offers a huge range of common components that are easily styled and based on Google's Material Design. + +[Bootstrap](https://getbootstrap.com/) +Another responsive UI library that allows you to focus on development by handling the design logistics for you. + +### Miscellaneous + +[GitHub Pages](https://pages.github.com/) +Host your React websites straight from your Github repo. Website hosting is fairly expensive, so this is here as a free alternative for website deployment for simple applications. + +[Codepen](https://codepen.io/) +Online development environment to try React out in (among other frontend tools). Great for testing the waters with React and other libraries or languages. 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 051/195] 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 052/195] 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 053/195] 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 0af34d5ed0011abdcb9b459ad2bfc642ced0e6b0 Mon Sep 17 00:00:00 2001 From: alessandromarmii <126909660+alessandromarmii@users.noreply.github.com> Date: Sat, 18 Nov 2023 18:32:52 -0500 Subject: [PATCH 054/195] Update to Product_Management.md Added 3 case studies: 2 about remote working and one about the importance of a client-based appraoch. --- Topics/Product_Management.md | 42 ++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/Topics/Product_Management.md b/Topics/Product_Management.md index 8e8c6f4d7..ecabb02bd 100644 --- a/Topics/Product_Management.md +++ b/Topics/Product_Management.md @@ -12,3 +12,45 @@ Some key features of a successful product manager: The following article outlines the product manager role and responsibilities, the main points that it entails and some tools and methologies to promote successful product management practices: [Product Management: Main Stages and Product Manager Role](https://www.altexsoft.com/blog/business/product-management-main-stages-and-product-manager-role/#:~:text=Product%20management%20is%20a%20process,development%2C%20marketing%2C%20and%20sales.) This article goes into a little bit further detail from a beginner's perspective on steps to take to become a successful product manager: [Product Manager: The role and best practices for beginners](https://www.atlassian.com/agile/product-management/product-manager) + +### Case Studies: + +One of the new challenges for project managers is the new possibility of having to deal with projects on a remote setup. The inability to have face-to-face interactions with teammates often results in lack of communication between team members. This obstacle first emerged for product managers during the COVID-19 pandemic and I will now present two case studies on this issue, illustrating how product managers managed to excel despite these new challenging conditions. + +#### Case Study 1 - Working Remotely: + +Referencing this [article](https://curiouscore.com/resource/4-lessons-for-product-management-in-a-post-pandemic-world/) , Irene is a product manager in Singapore working on cybersecurity products at a B2B telecommunications company. During COVID-19, she had to adjust her style of product management to match the new working conditions. To succeed, she had some main strategies: +* To keep everyone in the loop about the project’s progress, Irene’s team held weekly 30-min calls so team members could align on the tasks they needed to complete, as well as identify any potential blockers. +* Irene’s team was able to react swiftly and effectively to the changes brought on by COVID-19 by first reviewing an existing product roadmap they had, which allowed everyone on the team to have a common document for reference as they made their decisions and reviewed timelines. + +Irene sees the pandemic as transformative, allowing unprecedented work flexibilit. She finds that the newly added option of working remotely adds value to her work and increases the potential of teams. She believes that by incorporating some of these strategies, many product managers will be able mirror her success. + + +#### Case Study 2 - Working Remotely: + +We now report the experience of several product managers working at TopTal remotely, referencing this [article](https://www.toptal.com/product-managers/remote/product-managers-shift-to-remote). Sam Nissinen and Darshan Dave, two product managers at TopTal, tell us how this transition presented challenges due to the difficulty of not being physically present with teams. This required product managers to enhance their communication skills but ultimately led to success. + +Sam and Dave, succeeded at overcoming this new challenge by: +* Established clear expectations and acknowledging diverse work cultures to build trust. +* Leveraged digital tools and adapting communication methodologies to maintain productivity and team unity. + +These product managers discovered, quite unexpectedly, that remote work — originally a necessity due to the crisis — offered unexpected advantages such as increased deep work and adaptability. This led to conversations about the sustained incorporation of remote work practices within product management. Such insights from the case study offer reassurance that thriving in a remote environment is entirely feasible for product managers. + +------ + +------ + +One of the defining qualities of a good product manager is the ability to develop and envision and client-centered product. We present a case study that underscores the significance of this skill in the realm of product management. + +#### Case Study 1 - Client-Centred Approach: + + +Jeff Bezos, the founder and former CEO of Amazon, is renowned for his unique leadership style that has been integral to creating the world's largest ecommerce and cloud computing platform. This case study explores the core tenets of Bezos’ approach, which have been pivotal in driving Amazon's consistent results over more than two decades​​. + +Bezos laid the foundation for Amazon's business and management methodology in his celebrated 1997 letter to shareholders, influencing Amazon's operations and culture to this day​​. In this letter he outlines Amazon's values, among which we can see: +* Customer Obsession: Prioritizing customer needs over competitors +* Long-Term Thinking: Bezos advocates for decision-making with a long-term perspective, focusing on market leadership and sustainable shareholder value​​. + + +These principles illustrate Amazon's customer-centric culture and highlight the vital role of forward-thinking in product management. By consistently focusing on customer satisfaction and long-term value, Amazon demonstrates the effectiveness of a client-centered approach in product development and corporate strategy. You can read more about this in this [article](https://www.hustlebadger.com/what-do-product-teams-do/jeff-bezos-leadership-principles/#its-all-about-the-long-term). + From d7eec4c779618f8471097f7c7f54aeeaa6cab173 Mon Sep 17 00:00:00 2001 From: alessandromarmii <126909660+alessandromarmii@users.noreply.github.com> Date: Sat, 18 Nov 2023 18:35:46 -0500 Subject: [PATCH 055/195] Update Product_Management.md small grammar correction --- Topics/Product_Management.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Product_Management.md b/Topics/Product_Management.md index ecabb02bd..6e8a04f90 100644 --- a/Topics/Product_Management.md +++ b/Topics/Product_Management.md @@ -40,7 +40,7 @@ These product managers discovered, quite unexpectedly, that remote work — orig ------ -One of the defining qualities of a good product manager is the ability to develop and envision and client-centered product. We present a case study that underscores the significance of this skill in the realm of product management. +One of the defining qualities of a good product manager is the ability to develop and envision a client-centered product. We present a case study that underscores the significance of this skill in the realm of product management. #### Case Study 1 - Client-Centred Approach: From a055acd259ec28099de5e756e63f3f28c49eecc8 Mon Sep 17 00:00:00 2001 From: Jazli14 <95947726+Jazli14@users.noreply.github.com> Date: Sat, 18 Nov 2023 18:41:47 -0500 Subject: [PATCH 056/195] Update and rename Deploy_Node.js_AWS.md to Deploy_Node.js_Docker_AWS.md --- .../Development_Process/Deploy_Node.js_AWS.md | 19 ----- .../Deploy_Node.js_Docker_AWS.md | 69 +++++++++++++++++++ 2 files changed, 69 insertions(+), 19 deletions(-) delete mode 100644 Topics/Development_Process/Deploy_Node.js_AWS.md create mode 100644 Topics/Development_Process/Deploy_Node.js_Docker_AWS.md diff --git a/Topics/Development_Process/Deploy_Node.js_AWS.md b/Topics/Development_Process/Deploy_Node.js_AWS.md deleted file mode 100644 index 9c02a6059..000000000 --- a/Topics/Development_Process/Deploy_Node.js_AWS.md +++ /dev/null @@ -1,19 +0,0 @@ -# Node.js Deployment through Docker and AWS - -## Overview -In the realm of modern software development, containerization has become a standard practice for deploying applications. Docker simplifies this process by packaging applications and their dependencies into containers, ensuring consistency across various environments. Node.js, a popular JavaScript runtime, is often used to build scalable and efficient server-side applications. - -AWS (Amazon Web Services) provides a suite of cloud services that enable developers to deploy and manage applications easily. ECS (Elastic Container Service) and ECR (Elastic Container Registry) are two fundamental services offered by AWS to manage containers and container images, respectively. - -## Tech Stack - -Docker: Docker is a platform that allows you to package an application and its dependencies into a standardized unit called a container. It provides isolation, portability, and scalability for applications. It allows for easy deployment as it essentially creates a separate virtual machine to run the application on. - -Node.js: Node.js is a JavaScript runtime environment which is built on Chrome's V8 JavaScript engine. It enables developers to run JavaScript code on the server-side, making it ideal for building scalable network applications. - -Amazon ECS (Elastic Container Service): ECS is a fully-managed container orchestration service provided by AWS. It allows you to run, stop, and manage Docker containers on a cluster of EC2 instances easily. - -Amazon ECR (Elastic Container Registry): ECR is a managed Docker container registry provided by AWS. It allows you to store, manage, and deploy Docker container images, making it easy to integrate with ECS for container deployments. - -Amazon EC2 (Elastic Compute Cloud): EC2 is AWS's resizable cloud computing service offering virtual machines (instances) for running applications. It provides flexibility to configure and scale computing resources based on demand. - diff --git a/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md b/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md new file mode 100644 index 000000000..6bd60afc4 --- /dev/null +++ b/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md @@ -0,0 +1,69 @@ +# Node.js Deployment through Docker and AWS + +## Overview +In the realm of modern software development, containerization has become a standard practice for deploying applications. Docker simplifies this process by packaging applications and their dependencies into containers, ensuring consistency across various environments. Node.js, a popular JavaScript runtime, is often used to build scalable and efficient server-side applications. + +AWS (Amazon Web Services) provides a suite of cloud services that enable developers to deploy and manage applications easily. ECS (Elastic Container Service) and ECR (Elastic Container Registry) are two fundamental services offered by AWS to manage containers and container images, respectively. + +## Tech Stack + +Docker: Docker is a platform that allows you to package an application and its dependencies into a standardized unit called a container. It provides isolation, portability, and scalability for applications. It allows for easy deployment as it essentially creates a separate virtual machine to run the application on. + +Node.js: Node.js is a JavaScript runtime environment which is built on Chrome's V8 JavaScript engine. It enables developers to run JavaScript code on the server-side, making it ideal for building scalable network applications. + +Amazon ECS (Elastic Container Service): ECS is a fully-managed container orchestration service provided by AWS. It allows you to run, stop, and manage Docker containers on a cluster of EC2 instances easily. + +Amazon ECR (Elastic Container Registry): ECR is a managed Docker container registry provided by AWS. It allows you to store, manage, and deploy Docker container images, making it easy to integrate with ECS for container deployments. + +Amazon EC2 (Elastic Compute Cloud): EC2 is AWS's resizable cloud computing service offering virtual machines (instances) for running applications. It provides flexibility to configure and scale computing resources based on demand. + +## Deployment Process +### Containerize your Node.js application: +Using Dockerfile allows one to create a container for the app. +Create a Dockerfile in the root directory of your Node.js application. +Write instructions to build your Node.js app within the Dockerfile. +Build the Docker image locally using docker build -t . +Test the image locally to ensure it works as expected: docker run -p 8080:80 +The first number 8080 is the host port and 80 is the container port. + +### Create an ECR repository: + +Log in to the AWS Management Console. +Go to the Amazon ECR service. +Create a new repository to store your Docker image. +Push your Docker image to ECR: +Tag your Docker image with the ECR repository URL: +```bash +$ docker tag .dkr.ecr..amazonaws.com/: +``` +Log in to ECR using the AWS CLI: +```bash +$ aws ecr get-login-password --region | docker login --username AWS --password-stdin .dkr.ecr..amazonaws.com +``` +Push your Docker image to the ECR repository: +```bash +$ docker push .dkr.ecr..amazonaws.com/: +``` + +Replace \ with the name you want to label your image with +Replace \, \, \, \ with your correct credentials and your ECR name URL. + +Create an ECS Task Definition: + +Go to the Amazon ECS service in the AWS Management Console. +Create a new task definition specifying your container image from ECR, CPU, memory requirements, etc. + +Create an ECS Cluster: +Create an ECS cluster if you don't have one already. +Configure the ECS cluster settings and select launch type (Fargate or EC2). + +Create an ECS Service: +Define a service within the ECS cluster. +Specify the task definition, desired number of tasks, network configuration, load balancer settings, etc. + +Deploy your ECS Service: +Review and finalize the ECS service settings. +Deploy the service to the ECS cluster. + +# Access your Node.js application +Once the ECS service is up and running, access your Node.js application using the provided service endpoint. From b37214b0b2e2b91193e3e5c06483d4ca3545091a Mon Sep 17 00:00:00 2001 From: kaspar-p Date: Sat, 18 Nov 2023 20:04:21 -0500 Subject: [PATCH 057/195] 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 058/195] 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 059/195] 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 060/195] 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 061/195] 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 062/195] 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 063/195] 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 ac0200051e288d3db14c60490bce8cf0dc36f098 Mon Sep 17 00:00:00 2001 From: Daniel Qiu Date: Sun, 19 Nov 2023 16:50:47 -0500 Subject: [PATCH 064/195] Added first draft of Creating Your First Flutter App --- Topics/Tech_Stacks.md | 1 + Topics/Tech_Stacks/Flutter.md | 47 +++++++++++++++++++++++++++++++++++ 2 files changed, 48 insertions(+) create mode 100644 Topics/Tech_Stacks/Flutter.md diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index 5c9431135..582758ac9 100644 --- a/Topics/Tech_Stacks.md +++ b/Topics/Tech_Stacks.md @@ -14,3 +14,4 @@ ### [Learning JavaScript](./Tech_Stacks/JavaScript.md) ### [Learning React Native](./Tech_Stacks/ReactNative.md) ### [React Components Guide](./Tech_Stacks/React_Components.md) +### [Flutter](./Tech_Stacks/Flutter.md) \ No newline at end of file diff --git a/Topics/Tech_Stacks/Flutter.md b/Topics/Tech_Stacks/Flutter.md new file mode 100644 index 000000000..a5c3066b5 --- /dev/null +++ b/Topics/Tech_Stacks/Flutter.md @@ -0,0 +1,47 @@ +# Learning Flutter + +## Table of contents + +#### [What is Flutter](#what-is-flutter) + +#### [Creating your first flutter app](#creating-your-first-flutter-app) + +## What is Flutter? + +Flutter is an open source framework developed and supported by Google. Frontend and full-stack developers use Flutter to build an application’s user interface (UI) for multiple platforms with a single codebase. + +Flutter now supports application development on six platforms: iOS, Android, the web, Windows, MacOS, and Linux. + +Flutter uses the open-source programming language Dart, which was also developed by Google. Dart is optimized for building UIs, and many of Dart’s strengths are used in Flutter. + +Source: [Amazon AWS](https://aws.amazon.com/what-is/flutter/) + +## Creating your first flutter app + +The following is a summary from the offical [Flutter Docs](https://docs.flutter.dev/get-started/). + +1. **Install Flutter** + a) [Windows](https://docs.flutter.dev/get-started/install/windows) + b) [macOS](https://docs.flutter.dev/get-started/install/macos) + c) [Linux](https://docs.flutter.dev/get-started/install/linux) + d) [ChromeOS](https://docs.flutter.dev/get-started/install/chromeos) + +2. **Install an editor** + While you can use any editor. These instructions are for setting up Flutter on VS Code + a) Install VS Code for your respective platform. [Installation Link](https://code.visualstudio.com/download). + b) Open a browser and go to the [Flutter extension page](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter) on the Visual Studio Marketplace. + c) Click Install. Installing the Flutter extension also installs the Dart extension. +3. **Create the app** + a) Invoke **View > Command Palette**. This can be done with `ctrl shift p` on Windows or `cmd shift p` on Mac. + b) Type "flutter", and select the **Flutter: New Project** + c) Select **application** + d) Create or select the parent directory for the new project folder. + e) Enter a project name, such as `my_app`, and press **Enter**. + f) Wait for project creation to complete and the `main.dart` file to appear. + The above commands create a Flutter project directory called my_app that contains a simple demo app that uses [Material Components](https://m3.material.io/components). +4. **Running the App** + a) Locate the VS Code status bar (the blue bar at the bottom of the window). + b) Select a device from the Device Selector area. + c) Invoke **Run > Start Debugging** or press `F5`. + d) Wait for the app to launch—progress is printed in the Debug Console view. + e) After the app build completes, you’ll see the starter app on your device. From 6b6895f700d75b7766a3ca1c6790d5769e831a7a Mon Sep 17 00:00:00 2001 From: alexma22 Date: Sun, 19 Nov 2023 20:19:10 -0500 Subject: [PATCH 065/195] 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 066/195] 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 067/195] 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 068/195] 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 069/195] 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 070/195] 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 071/195] 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 072/195] 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 073/195] 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 074/195] 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 075/195] 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 076/195] 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 077/195] 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 078/195] 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 f4aea4b4ebcbeae3e4e6c18443f3c6edbb17f681 Mon Sep 17 00:00:00 2001 From: ruiting-chen Date: Mon, 20 Nov 2023 22:01:25 -0500 Subject: [PATCH 079/195] unity intro first draft, without image --- Topics/Tech_Stacks/Unity_Intro.md | 88 +++++++++++++++++++++++++++++++ 1 file changed, 88 insertions(+) create mode 100644 Topics/Tech_Stacks/Unity_Intro.md diff --git a/Topics/Tech_Stacks/Unity_Intro.md b/Topics/Tech_Stacks/Unity_Intro.md new file mode 100644 index 000000000..9158936ed --- /dev/null +++ b/Topics/Tech_Stacks/Unity_Intro.md @@ -0,0 +1,88 @@ +# Unity + +Unity is a game engine that can be used to develop 2D, 3D, AR/VR games. It can also be used to create interactive simulations for training, education, and various industries. The end product can be built and deployed to mobile, desktop, and web platforms. Unity provides a user-friendly interface for users to design and develop the interface of their projects. The game logic is scripted in C#. Below is a beginner's guide for how to set up and get started with Unity. + +## Table of contents +### [Introduction](#introduction-1) +### [Why use TypeScript](#why-use-typescript-1) +### [How to use TypeScript](#how-to-use-typescript-1) +### [Additional Resources](#additional-resources-1) + +## Download and Installation +#### Download Unity Hub +Unity Hub is a management tool that can be used to organize Unity projects, install different versions of Unity Editor, manage licensing and access the Unity Asset Store efficiently. It can be used with the Unity Editor versions 5.6 or higher. + +To get started, download Unity Hub from the [official Unity website](https://unity.com/download). +Choose the correct installer of Unity Hub for your operating system (Mac, Windows, or Linux). +Open the installer file and follow the instructions in the Unity Hub setup window to install Unity Hub on your machine. + +#### License Activation: +An activated license is needed to use Unity. When you sign in into the Unity Hub for the first time, you will be asked to add an active license. +At the top of Unity Hub, click "Manage licenses". If you do not see this, you can manage licenses by clicking on the preferences (or settings) icon on the top of the left tab bar beside your account icon > then select the liscense tab in the window that pop up. +Click "Add" to add a new license. You can choose to get a free personal license or get a educational (student) license by applying for Unity student plan on [this website](https://unity.com/products/unity-student). + +You need a Unity +What is Unity License? +Do you need Unity License to develope Unity projects? +How to setup? + +#### Install Unity Editor through Unity Hub: +- Open Unity Hub > Nevigate to "Installs" on the left task bar > Select "Install Editor" +- Choose the version of Unity Editor you would like to install. + - If you are continuing from an existing Unity project, Unity will prompt you to download the correct version of the Unity Editor associated with that project when you try to open the project. +- When you selected the version of Unity Editor to install, you be brought to this page to add modules: +![Alt text](image.png) + - In the "Dev Tools" section, you can choose to download the Visual Studio Community if you want to use Visual Studio as your default script editor for C# scripts. If you already have Visual Studio downloaded, or you wanted to use a different editor to edit the scripts, refer to ____ section for how to set default script editor for your Unity Editor. + - In the "Platforms" section, choose the appropriate Build support depending on whether you want the end product to be build and deployed as a desktop, mobile, or web application. For example, check the box for "WebGL" if you want to build a web game + - You can add more modules and download more build supports according to your need later on. To do so, go to "Installs" in Unity Hub > Click on the settings logo for the version of Unity Editor that you want to modify> Select "Add modules" +![Alt text](image-1.png) + +## Create New Unity Project +Once you have Unity downloaded, you can create a new project by: +- Go into Unity Hub > Porjects > Select "New Project" on the top right corner. + - If you are continuing from an existing project, go to Porjects > Select "Add" > Find the folder that contains the Unity Project. Then your project will be opened in Unity (Skip to _____ for Unity Interface). +- In the create new project window: +![Alt text](image-2.png) + - Select templates to create a 2D, 3D, AR, VR, etc. project according to your need. + - On the top, you can select the Unity Editor version you want to use + - On the right side, you can specify project name and location for your project. + +## Brief Intro to the Unity Interface +Once you created a new project/opened a project in Unity, you will see a interface similar to this. I have split the interface into 5 main sections and will breifly introduce each section. + +1. Hierarchy window: +The hierarchy window displays everything in a **Scene**. In Unity, the things in a Scene, such as Main Camera, Directional Light, and the SampleObject, are called **GameObjects**. You can use the Hierarchy window to add, delete, group and organize the GameObjects into different levels. +2. Scene/Game view: +The scene view displays the current GameObjects you placed in a scene. You can use the Scene view to manipulate GameObjects and view them from various angles. +The game view displays the rendered view that you will see in the final game product. It's like a "preview" of your game. +You can switch between Scene/Game view on the top left corner of this section. +3. Inspector window: +If you click on a GameObject inside the hierarchy window, you will be able to see and edit the properties and components of this GameObject in the Inspector window. +4. Project window: +The project window acts as a file browser, organizing asset files in folders. An asset is a representation of any item that can be used in your game or project, such as images, audio, 3D models, sprites, and texture files. It also contains C# scripts, files, or folders that we create. You can create or import assets and scripts by right-clicking in the project window. Beside the Project window, there is a Console window that log debug information when you run your game. +5. Toolbar: +The toolbar is at the top of the Unity Editor. You can press the play/pause button in the middle to run/stop the game in Game view. The toolbar also contains tabs to access your Unity Account, Unity Cloud Services, and Unity Collaborate. + +#### Script Editor +If you double click on a script in your Project window, your script will be opened in your default script editor. You will be able to edit the scripts in the editor and see changes reflected in the Unity Editor. + +If you have not set the default editor or want to change the default editor, you can: + - Go to Edit in the Toolbar > Preferences (macOS: Unity > Settings) to open the Preferences window. + - Open the External Tools menu. + - Click on the External Script Editor dropdown and select your preferred default editor or select "Browse" to find you editor. +![Alt text](image-3.png) + + +## Additional Resources + +- [This website](https://subscription.packtpub.com/book/game-development/9781801078078/2/ch02lvl1sec04/getting-started-with-the-unity-editor) provides detailed information for getting started with Unity. +- The first 2 videos of [this Youtube series](https://www.youtube.com/watch?v=ewiw2tcfen8&list=PL0eyrZgxdwhxL5n_wJsnpI4Y9AFIFhhF8) also provides tutorial for install and setup Unity, and introduction to the Unity interface. +- To learn more about Unity in depth, you can watch ____ + +## Reference +https://support.unity.com/hc/en-us/articles/360061586571-What-is-the-Unity-Hub-#:~:text=The%20Unity%20Hub%20is%20a,and%20installing%20add%2Don%20components. +https://subscription.packtpub.com/book/game-development/9781801078078/2/ch02lvl1sec04/getting-started-with-the-unity-editor +https://docs.unity3d.com/Manual/VisualStudioIntegration.html#:~:text=Unity%20automatically%20uses%20Visual%20Studio,into%20an%20existing%20Unity%20installation. +https://docs.unity3d.com/Manual/system-requirements.html (unused) +https://getalow.com/unity-engine/introduction-to-unity-editor-and-unity-interface/16 + \ No newline at end of file From 61197991cb07397c4df9f82f85d0e16d91d5c84c Mon Sep 17 00:00:00 2001 From: alyson647 Date: Mon, 20 Nov 2023 22:17:35 -0500 Subject: [PATCH 080/195] 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 9186317517571945d11cc7448cd9cadbf66611da Mon Sep 17 00:00:00 2001 From: ruiting-chen <51133017+ruiting-chen@users.noreply.github.com> Date: Mon, 20 Nov 2023 22:19:16 -0500 Subject: [PATCH 081/195] Added images and reformatted Unity_Intro.md --- Topics/Tech_Stacks/Unity_Intro.md | 64 +++++++++++++------------------ 1 file changed, 27 insertions(+), 37 deletions(-) diff --git a/Topics/Tech_Stacks/Unity_Intro.md b/Topics/Tech_Stacks/Unity_Intro.md index 9158936ed..eca90b57b 100644 --- a/Topics/Tech_Stacks/Unity_Intro.md +++ b/Topics/Tech_Stacks/Unity_Intro.md @@ -2,66 +2,57 @@ Unity is a game engine that can be used to develop 2D, 3D, AR/VR games. It can also be used to create interactive simulations for training, education, and various industries. The end product can be built and deployed to mobile, desktop, and web platforms. Unity provides a user-friendly interface for users to design and develop the interface of their projects. The game logic is scripted in C#. Below is a beginner's guide for how to set up and get started with Unity. -## Table of contents -### [Introduction](#introduction-1) -### [Why use TypeScript](#why-use-typescript-1) -### [How to use TypeScript](#how-to-use-typescript-1) -### [Additional Resources](#additional-resources-1) - ## Download and Installation #### Download Unity Hub -Unity Hub is a management tool that can be used to organize Unity projects, install different versions of Unity Editor, manage licensing and access the Unity Asset Store efficiently. It can be used with the Unity Editor versions 5.6 or higher. +Unity Hub is a management tool that can be used to organize Unity projects, install different versions of Unity Editor, manage to licenses and access the Unity Asset Store efficiently. It can be used with the Unity Editor version 5.6 or higher. To get started, download Unity Hub from the [official Unity website](https://unity.com/download). Choose the correct installer of Unity Hub for your operating system (Mac, Windows, or Linux). Open the installer file and follow the instructions in the Unity Hub setup window to install Unity Hub on your machine. #### License Activation: -An activated license is needed to use Unity. When you sign in into the Unity Hub for the first time, you will be asked to add an active license. -At the top of Unity Hub, click "Manage licenses". If you do not see this, you can manage licenses by clicking on the preferences (or settings) icon on the top of the left tab bar beside your account icon > then select the liscense tab in the window that pop up. -Click "Add" to add a new license. You can choose to get a free personal license or get a educational (student) license by applying for Unity student plan on [this website](https://unity.com/products/unity-student). - -You need a Unity -What is Unity License? -Do you need Unity License to develope Unity projects? -How to setup? +An activated license is needed to use Unity. When you sign in to the Unity Hub for the first time, you will be asked to add an active license. +At the top of Unity Hub, click "Manage licenses". If you do not see this, you can manage licenses by clicking on the preferences (or settings) icon on the top of the left tab bar beside your account icon > then select the license tab in the window that pops up. +Click "Add" to add a new license. You can choose to get a free personal license or get an educational (student) license by applying for the Unity student plan on [this website](https://unity.com/products/unity-student). #### Install Unity Editor through Unity Hub: -- Open Unity Hub > Nevigate to "Installs" on the left task bar > Select "Install Editor" +- Open Unity Hub > Navigate to "Installs" on the left taskbar > Select "Install Editor" - Choose the version of Unity Editor you would like to install. - If you are continuing from an existing Unity project, Unity will prompt you to download the correct version of the Unity Editor associated with that project when you try to open the project. -- When you selected the version of Unity Editor to install, you be brought to this page to add modules: -![Alt text](image.png) - - In the "Dev Tools" section, you can choose to download the Visual Studio Community if you want to use Visual Studio as your default script editor for C# scripts. If you already have Visual Studio downloaded, or you wanted to use a different editor to edit the scripts, refer to ____ section for how to set default script editor for your Unity Editor. - - In the "Platforms" section, choose the appropriate Build support depending on whether you want the end product to be build and deployed as a desktop, mobile, or web application. For example, check the box for "WebGL" if you want to build a web game - - You can add more modules and download more build supports according to your need later on. To do so, go to "Installs" in Unity Hub > Click on the settings logo for the version of Unity Editor that you want to modify> Select "Add modules" -![Alt text](image-1.png) +- When you select the version of Unity Editor to install, you be brought to this page to add modules: + image + + - In the "Dev Tools" section, you can choose to download the Visual Studio Community if you want to use Visual Studio as your default script editor for C# scripts. If you already have Visual Studio downloaded, or you want to use a different editor to edit the scripts, refer to [Script Editor](#script-editor) section for how to set the default script editor for your Unity Editor. + - In the "Platforms" section, choose the appropriate Build support depending on whether you want the end product to be built and deployed as a desktop, mobile, or web application. For example, check the box for "WebGL" if you want to build a web game + - You can add more modules and download more build supports according to your needs later on. To do so, go to "Installs" in Unity Hub > Click on the settings logo for the version of Unity Editor that you want to modify> Select "Add modules" ## Create New Unity Project Once you have Unity downloaded, you can create a new project by: -- Go into Unity Hub > Porjects > Select "New Project" on the top right corner. - - If you are continuing from an existing project, go to Porjects > Select "Add" > Find the folder that contains the Unity Project. Then your project will be opened in Unity (Skip to _____ for Unity Interface). +- Go into Unity Hub > Projects> Select "New Project" in the top right corner. + - If you are continuing from an existing project, go to Projects> Select "Add" > Find the folder that contains the Unity Project. Then your project will be opened in Unity (Skip to [Intro to Unity Interface](#brief-intro-to-the-unity-interface) for Unity Interface). - In the create new project window: -![Alt text](image-2.png) +image-2 + - Select templates to create a 2D, 3D, AR, VR, etc. project according to your need. - On the top, you can select the Unity Editor version you want to use - - On the right side, you can specify project name and location for your project. + - On the right side, you can specify the project name and location for your project. ## Brief Intro to the Unity Interface -Once you created a new project/opened a project in Unity, you will see a interface similar to this. I have split the interface into 5 main sections and will breifly introduce each section. +Once you create a new project/open a project in Unity, you will see an interface similar to this. I have split the interface into 5 main sections and will briefly introduce each section. +Unity_interface 1. Hierarchy window: -The hierarchy window displays everything in a **Scene**. In Unity, the things in a Scene, such as Main Camera, Directional Light, and the SampleObject, are called **GameObjects**. You can use the Hierarchy window to add, delete, group and organize the GameObjects into different levels. +The hierarchy window displays everything in a **Scene**. In Unity, the things in a Scene, such as the Main Camera, Directional Light, and the SampleObject, are called **GameObjects**. You can use the Hierarchy window to add, delete, group and organize the GameObjects into different levels. 2. Scene/Game view: The scene view displays the current GameObjects you placed in a scene. You can use the Scene view to manipulate GameObjects and view them from various angles. The game view displays the rendered view that you will see in the final game product. It's like a "preview" of your game. -You can switch between Scene/Game view on the top left corner of this section. +You can switch between Scene/Game view in the top left corner of this section. 3. Inspector window: If you click on a GameObject inside the hierarchy window, you will be able to see and edit the properties and components of this GameObject in the Inspector window. 4. Project window: -The project window acts as a file browser, organizing asset files in folders. An asset is a representation of any item that can be used in your game or project, such as images, audio, 3D models, sprites, and texture files. It also contains C# scripts, files, or folders that we create. You can create or import assets and scripts by right-clicking in the project window. Beside the Project window, there is a Console window that log debug information when you run your game. +The project window acts as a file browser, organizing asset files in folders. An asset is a representation of any item that can be used in your game or project, such as images, audio, 3D models, sprites, and texture files. It also contains C# scripts, files, or folders that we create. You can create or import assets and scripts by right-clicking in the project window. Besides the Project window, there is a Console window that logs debug information when you run your game. 5. Toolbar: -The toolbar is at the top of the Unity Editor. You can press the play/pause button in the middle to run/stop the game in Game view. The toolbar also contains tabs to access your Unity Account, Unity Cloud Services, and Unity Collaborate. +The toolbar is at the top of the Unity Editor. You can press the play/pause button in the middle to run/stop the game in the Game view. The toolbar also contains tabs to access your Unity Account, Unity Cloud Services, and Unity Collaborate. #### Script Editor If you double click on a script in your Project window, your script will be opened in your default script editor. You will be able to edit the scripts in the editor and see changes reflected in the Unity Editor. @@ -69,20 +60,19 @@ If you double click on a script in your Project window, your script will be open If you have not set the default editor or want to change the default editor, you can: - Go to Edit in the Toolbar > Preferences (macOS: Unity > Settings) to open the Preferences window. - Open the External Tools menu. - - Click on the External Script Editor dropdown and select your preferred default editor or select "Browse" to find you editor. -![Alt text](image-3.png) + - Click on the External Script Editor dropdown and select your preferred default editor or select "Browse" to find your editor. + image-3 ## Additional Resources - [This website](https://subscription.packtpub.com/book/game-development/9781801078078/2/ch02lvl1sec04/getting-started-with-the-unity-editor) provides detailed information for getting started with Unity. -- The first 2 videos of [this Youtube series](https://www.youtube.com/watch?v=ewiw2tcfen8&list=PL0eyrZgxdwhxL5n_wJsnpI4Y9AFIFhhF8) also provides tutorial for install and setup Unity, and introduction to the Unity interface. -- To learn more about Unity in depth, you can watch ____ +- The first 2 videos of [this Youtube series](https://www.youtube.com/watch?v=ewiw2tcfen8&list=PL0eyrZgxdwhxL5n_wJsnpI4Y9AFIFhhF8) also provide tutorial for install and setup Unity and introduction to the Unity interface. +- To learn more general information about Unity, you can visit the [Unity Manual](https://docs.unity3d.com/Manual/index.html). Note that the manual is slightly different for different versions of Unity. ## Reference https://support.unity.com/hc/en-us/articles/360061586571-What-is-the-Unity-Hub-#:~:text=The%20Unity%20Hub%20is%20a,and%20installing%20add%2Don%20components. https://subscription.packtpub.com/book/game-development/9781801078078/2/ch02lvl1sec04/getting-started-with-the-unity-editor https://docs.unity3d.com/Manual/VisualStudioIntegration.html#:~:text=Unity%20automatically%20uses%20Visual%20Studio,into%20an%20existing%20Unity%20installation. -https://docs.unity3d.com/Manual/system-requirements.html (unused) https://getalow.com/unity-engine/introduction-to-unity-editor-and-unity-interface/16 - \ No newline at end of file + From 099ce89918fb544e20fd6f7e28f3a30714b78753 Mon Sep 17 00:00:00 2001 From: ruiting-chen <51133017+ruiting-chen@users.noreply.github.com> Date: Mon, 20 Nov 2023 22:20:27 -0500 Subject: [PATCH 082/195] Update image sizes --- Topics/Tech_Stacks/Unity_Intro.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Topics/Tech_Stacks/Unity_Intro.md b/Topics/Tech_Stacks/Unity_Intro.md index eca90b57b..408804067 100644 --- a/Topics/Tech_Stacks/Unity_Intro.md +++ b/Topics/Tech_Stacks/Unity_Intro.md @@ -20,7 +20,7 @@ Click "Add" to add a new license. You can choose to get a free personal license - Choose the version of Unity Editor you would like to install. - If you are continuing from an existing Unity project, Unity will prompt you to download the correct version of the Unity Editor associated with that project when you try to open the project. - When you select the version of Unity Editor to install, you be brought to this page to add modules: - image + image - In the "Dev Tools" section, you can choose to download the Visual Studio Community if you want to use Visual Studio as your default script editor for C# scripts. If you already have Visual Studio downloaded, or you want to use a different editor to edit the scripts, refer to [Script Editor](#script-editor) section for how to set the default script editor for your Unity Editor. - In the "Platforms" section, choose the appropriate Build support depending on whether you want the end product to be built and deployed as a desktop, mobile, or web application. For example, check the box for "WebGL" if you want to build a web game @@ -31,7 +31,7 @@ Once you have Unity downloaded, you can create a new project by: - Go into Unity Hub > Projects> Select "New Project" in the top right corner. - If you are continuing from an existing project, go to Projects> Select "Add" > Find the folder that contains the Unity Project. Then your project will be opened in Unity (Skip to [Intro to Unity Interface](#brief-intro-to-the-unity-interface) for Unity Interface). - In the create new project window: -image-2 +image-2 - Select templates to create a 2D, 3D, AR, VR, etc. project according to your need. - On the top, you can select the Unity Editor version you want to use @@ -61,7 +61,7 @@ If you have not set the default editor or want to change the default editor, you - Go to Edit in the Toolbar > Preferences (macOS: Unity > Settings) to open the Preferences window. - Open the External Tools menu. - Click on the External Script Editor dropdown and select your preferred default editor or select "Browse" to find your editor. - image-3 + image-3 ## Additional Resources From c9187ad444f2ff22b61375d0dc831268eb7e01a7 Mon Sep 17 00:00:00 2001 From: ruiting-chen <51133017+ruiting-chen@users.noreply.github.com> Date: Mon, 20 Nov 2023 22:26:57 -0500 Subject: [PATCH 083/195] Update image size Unity_Intro.md --- Topics/Tech_Stacks/Unity_Intro.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Topics/Tech_Stacks/Unity_Intro.md b/Topics/Tech_Stacks/Unity_Intro.md index 408804067..06c035964 100644 --- a/Topics/Tech_Stacks/Unity_Intro.md +++ b/Topics/Tech_Stacks/Unity_Intro.md @@ -20,7 +20,7 @@ Click "Add" to add a new license. You can choose to get a free personal license - Choose the version of Unity Editor you would like to install. - If you are continuing from an existing Unity project, Unity will prompt you to download the correct version of the Unity Editor associated with that project when you try to open the project. - When you select the version of Unity Editor to install, you be brought to this page to add modules: - image + image - In the "Dev Tools" section, you can choose to download the Visual Studio Community if you want to use Visual Studio as your default script editor for C# scripts. If you already have Visual Studio downloaded, or you want to use a different editor to edit the scripts, refer to [Script Editor](#script-editor) section for how to set the default script editor for your Unity Editor. - In the "Platforms" section, choose the appropriate Build support depending on whether you want the end product to be built and deployed as a desktop, mobile, or web application. For example, check the box for "WebGL" if you want to build a web game @@ -31,7 +31,7 @@ Once you have Unity downloaded, you can create a new project by: - Go into Unity Hub > Projects> Select "New Project" in the top right corner. - If you are continuing from an existing project, go to Projects> Select "Add" > Find the folder that contains the Unity Project. Then your project will be opened in Unity (Skip to [Intro to Unity Interface](#brief-intro-to-the-unity-interface) for Unity Interface). - In the create new project window: -image-2 +image-2 - Select templates to create a 2D, 3D, AR, VR, etc. project according to your need. - On the top, you can select the Unity Editor version you want to use @@ -61,7 +61,7 @@ If you have not set the default editor or want to change the default editor, you - Go to Edit in the Toolbar > Preferences (macOS: Unity > Settings) to open the Preferences window. - Open the External Tools menu. - Click on the External Script Editor dropdown and select your preferred default editor or select "Browse" to find your editor. - image-3 + image-3 ## Additional Resources From f47878c797d90b221138744a8707a717e119195c Mon Sep 17 00:00:00 2001 From: alyson647 Date: Mon, 20 Nov 2023 23:01:27 -0500 Subject: [PATCH 084/195] 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 085/195] 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 086/195] 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 087/195] 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 088/195] 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 089/195] 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 024dae5d1f830d9e5896930172ae3b772c4888e3 Mon Sep 17 00:00:00 2001 From: K M Crawford Date: Tue, 21 Nov 2023 16:55:23 -0500 Subject: [PATCH 090/195] Update React.md --- Topics/Tech_Stacks/React.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/Topics/Tech_Stacks/React.md b/Topics/Tech_Stacks/React.md index f2a1a3c08..7cedffa49 100644 --- a/Topics/Tech_Stacks/React.md +++ b/Topics/Tech_Stacks/React.md @@ -1,7 +1,7 @@ ## Tech Stacks ### React Overview -React is an open-source JavaScript library for building component-based user interfaces. This component-based architecture allows engineers to quickly prototype and develop complex applications easily by modularizing common functionalities into discrete, reusable UI **s, and React boasts a large user base full of freely available components libraries. Beyond this, React utilizes a virtual DOM, JSX, React Native, and much more -- so much more that it can be [overwhelming](https://auth0.com/blog/how-to-manage-javascript-fatigue/). +React is an open-source JavaScript library for building component-based user interfaces. This component-based architecture allows engineers to quickly prototype and develop complex applications easily by modularizing common functionalities into discrete, reusable UI **s, and React boasts a large user base full of freely available components libraries. Beyond this, React there's much more to learn about React, such as its virtual DOM, JSX, and full mobile framework in React Native, and much more -- so much more that it can be [overwhelming](https://auth0.com/blog/how-to-manage-javascript-fatigue/). To help ease the learning curve, below you'll find a variety of resources to reference while learning and components and libraries to use with React. @@ -10,6 +10,9 @@ To help ease the learning curve, below you'll find a variety of resources to ref [Full-Stack Open](https://fullstackopen.com/) A full, free course provided by the University of Helsinki that teaches the MERN (MongoDB, Express, React, NodeJS) stack. It also covers TypeScript, GraphQL, React Native, and some CI/CD. An excellent resource for React beginners. +[React Documentation](https://react.dev/) +The official React documentation is a great way to get started with the library, but also indispensible to have bookmarked for reference. + [Coursera Learn React Basics](https://www.coursera.org/learn/react-basics) A free course provided by Coursera that covers the basics of React, including State, navigation, and taking user input via forms. @@ -21,16 +24,16 @@ Basic React tutorial provided by the official React website. This tutorial will [React JS Crash Course](https://www.youtube.com/watch?v=w7ejDZ8SWv8) [One Hour React Tutorial](https://www.youtube.com/watch?v=b9eMGE7QtTk) -One hour in-depth tutorials about React. These Youtube crash course provides a great overview of React and various important components that you will be using often. Very useful if you are learning React under a strict time limit for whatever reason. +One hour quickstart tutorials about React. These YouTube crash course provides a great overview of React and various important components that you will be using often. Very useful if you are learning React under a strict time limit for whatever reason. [Front-End Mentor](https://www.frontendmentor.io/) These frontend challenges for HTML, CSS and JavaScript will help you review core skills while also making interesting projects. [Mozilla React Tutorial](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started) -React tutorial by MDN Web Docs. Useful readings for if you have time, but not necessary by any means. +React tutorial by MDN Web Docs. Useful readings for if you have time. [Microsoft JavaScript Tutorial](https://learn.microsoft.com/en-us/windows/dev-environment/javascript/) -Javascript frameworks tutorial provided by Microsoft. Useful readings, but not necessary to learn React. +JavaScript frameworks tutorial provided by Microsoft. Useful readings, but not necessary to learn React. ### Useful React Tools and Libraries From bac411b37000a3d0102e6fb02697cf17507f2978 Mon Sep 17 00:00:00 2001 From: K M Crawford Date: Tue, 21 Nov 2023 16:56:21 -0500 Subject: [PATCH 091/195] Update React.md --- Topics/Tech_Stacks/React.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/React.md b/Topics/Tech_Stacks/React.md index 7cedffa49..e17ad053d 100644 --- a/Topics/Tech_Stacks/React.md +++ b/Topics/Tech_Stacks/React.md @@ -1,7 +1,7 @@ ## Tech Stacks ### React Overview -React is an open-source JavaScript library for building component-based user interfaces. This component-based architecture allows engineers to quickly prototype and develop complex applications easily by modularizing common functionalities into discrete, reusable UI **s, and React boasts a large user base full of freely available components libraries. Beyond this, React there's much more to learn about React, such as its virtual DOM, JSX, and full mobile framework in React Native, and much more -- so much more that it can be [overwhelming](https://auth0.com/blog/how-to-manage-javascript-fatigue/). +React is an open-source JavaScript library for building component-based user interfaces. This component-based architecture allows engineers to quickly prototype and develop complex applications easily by modularizing common functionalities into discrete, reusable UI components, and React boasts a large user base full of freely available components libraries. Beyond this, React there's much more to learn about React, such as its virtual DOM, JSX, and full mobile framework in React Native, and much more -- so much more that it can be [overwhelming](https://auth0.com/blog/how-to-manage-javascript-fatigue/). To help ease the learning curve, below you'll find a variety of resources to reference while learning and components and libraries to use with React. From 9c4bfae060541964f15f4d143ce8ec87f503d26f Mon Sep 17 00:00:00 2001 From: K M Crawford Date: Tue, 21 Nov 2023 16:56:41 -0500 Subject: [PATCH 092/195] Update React.md --- Topics/Tech_Stacks/React.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/React.md b/Topics/Tech_Stacks/React.md index e17ad053d..4358b6135 100644 --- a/Topics/Tech_Stacks/React.md +++ b/Topics/Tech_Stacks/React.md @@ -1,7 +1,7 @@ ## Tech Stacks ### React Overview -React is an open-source JavaScript library for building component-based user interfaces. This component-based architecture allows engineers to quickly prototype and develop complex applications easily by modularizing common functionalities into discrete, reusable UI components, and React boasts a large user base full of freely available components libraries. Beyond this, React there's much more to learn about React, such as its virtual DOM, JSX, and full mobile framework in React Native, and much more -- so much more that it can be [overwhelming](https://auth0.com/blog/how-to-manage-javascript-fatigue/). +React is an open-source JavaScript library for building component-based user interfaces. This component-based architecture allows engineers to quickly prototype and develop complex applications easily by modularizing common functionalities into discrete, reusable UI components, and React boasts a large user base full of freely available components libraries. Beyond this, React there's much more to learn about React, such as its virtual DOM, JSX, and a full mobile framework in React Native, and much more -- so much more that it can be [overwhelming](https://auth0.com/blog/how-to-manage-javascript-fatigue/). To help ease the learning curve, below you'll find a variety of resources to reference while learning and components and libraries to use with React. From 0c81f554ab9c892f7f978ca071030ca610e093af Mon Sep 17 00:00:00 2001 From: ak-james1 <95581896+ak-james1@users.noreply.github.com> Date: Tue, 21 Nov 2023 18:58:15 -0500 Subject: [PATCH 093/195] Create navigation design in complex websites.md --- Topics/User_Experience/navigation design in complex websites.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 Topics/User_Experience/navigation design in complex websites.md diff --git a/Topics/User_Experience/navigation design in complex websites.md b/Topics/User_Experience/navigation design in complex websites.md new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/Topics/User_Experience/navigation design in complex websites.md @@ -0,0 +1 @@ + From 0a73109a7a0e7712b4acdcf0626e18c6892f7bac Mon Sep 17 00:00:00 2001 From: ak-james1 <95581896+ak-james1@users.noreply.github.com> Date: Tue, 21 Nov 2023 19:00:46 -0500 Subject: [PATCH 094/195] Update navigation design in complex websites.md --- .../navigation design in complex websites.md | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/Topics/User_Experience/navigation design in complex websites.md b/Topics/User_Experience/navigation design in complex websites.md index 8b1378917..454988308 100644 --- a/Topics/User_Experience/navigation design in complex websites.md +++ b/Topics/User_Experience/navigation design in complex websites.md @@ -1 +1,32 @@ +## What is Navigation Design ? +Navigation Design, also referred to as menu design, helps users to easily move through the pages of your website. It utilizes design techniques to allow ease of navigation and provide the user a better sure experience. + +## Good vs Bad Navigation Design + + + + + + +Please see the link below for more navigation design patterns: +https://ui-patterns.com/patterns/navigation/list + + + + +## Advantages of Good Navigation Design for Complex Websites + + + + +## Key Things to Consider for Navigation Design of Complex Websites + + +## Summary/ How is this relevant to CSC301 ? + + +## Resources +https://www.uxtweak.com/ux-glossary/navigation-design/ +https://getdevdone.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html +https://www.w3.org/WAI/tutorials/menus/ From 7d3f90f3d678d59962622f032c0e7d3f7dbd36ac Mon Sep 17 00:00:00 2001 From: ak-james1 <95581896+ak-james1@users.noreply.github.com> Date: Tue, 21 Nov 2023 19:04:31 -0500 Subject: [PATCH 095/195] Update navigation design in complex websites.md complete first draft o navigation design for complex websites / web apps --- .../navigation design in complex websites.md | 64 ++++++++++++++----- 1 file changed, 48 insertions(+), 16 deletions(-) diff --git a/Topics/User_Experience/navigation design in complex websites.md b/Topics/User_Experience/navigation design in complex websites.md index 454988308..4f1e38e21 100644 --- a/Topics/User_Experience/navigation design in complex websites.md +++ b/Topics/User_Experience/navigation design in complex websites.md @@ -1,32 +1,64 @@ - ## What is Navigation Design ? Navigation Design, also referred to as menu design, helps users to easily move through the pages of your website. It utilizes design techniques to allow ease of navigation and provide the user a better sure experience. -## Good vs Bad Navigation Design - - - - - - -Please see the link below for more navigation design patterns: -https://ui-patterns.com/patterns/navigation/list +## Good vs Bad Navigation Design +Good navigation design allows for ease of finding information, is intuitive and easy to use. On the other hand, bad navigation design can overwhelm the user and make finding important content difficult. As a result, it is important to keep the user in mind when designing the navigation of a website, especially complex websites with a multitude of pages. Reasoning about how the user can navigate through the many pages of a website, can help lay the foundation to good navigation design. + +Consider using the following steps to start thinking of good navigation design : + +1. Layout all the pages on your website whether on paper of through a design tool such as Figma +2. Find the relevant ways a user may navigate through those pages + 1. For example, home page to sign in back to home page +3. Determine which pages they user may need to reference most often + 2. For example, the home page / landing page, +4. Consider using dome of the following to ease navigation through the website : + * Navbars + * Usually at the top of a landing page / home page. These contain links to the website's main pages. + * Sub-navbars + * Located below a normal Navbar and consists of links that are relevant to the specific page that the user is on + * Side menus + * Usually located at the side of the page and contains links to relevant pages on the website + * Tabbed menus + * Organizes information into different tabs, where each tab contains different relevant information + * Footers containing links to all relevant pages within your website + * Usually at the bottom of a page. It can contain links to all pages on the website as well as contact information. + +* Please see the link below for more navigation design patterns: + * [https://ui-patterns.com/patterns/navigation/list](https://ui-patterns.com/patterns/navigation/list) + +## Advantages of Good Navigation Design for Complex Websites +* Good navigation design allows a clear or intuitive path for users to navigate through the web app / website +* Increases usability + * A good navigation design allows users to easily find the content that they need in a timely manner +* Increases user satisfaction + * Users are less likely to become frustrated navigating the app if there is a clear navigation system -## Advantages of Good Navigation Design for Complex Websites +* An easy/ clear path through a website to specific content, can be an advantage in encouraging users to use your product - + ## Key Things to Consider for Navigation Design of Complex Websites - +* Accessibility + * Additional tips on designing accessible menus/ navigation. + * Click Here [[https://www.w3.org/WAI/tutorials/menus/](https://www.w3.org/WAI/tutorials/menus/)] +* Important links should be kept in navigation menus / nav bars +* Different screen sizes may require varying navigation designs + * For example, desktops with navbars vs mobile devices with sidebar menus +* Is it easy to navigate through the main pages of my website ? + ## Summary/ How is this relevant to CSC301 ? +When designing a website / web app, it is important to consider how a user will navigate through the website’s main pages. Complex websites are especially hard to navigate with poorly designed navigation systems. To ensure that the user has a great experience, it is important to consider the key points above and their advantages. ## Resources -https://www.uxtweak.com/ux-glossary/navigation-design/ -https://getdevdone.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html -https://www.w3.org/WAI/tutorials/menus/ + +[https://www.uxtweak.com/ux-glossary/navigation-design/](https://www.uxtweak.com/ux-glossary/navigation-design/) + +[https://getdevdone.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html](https://getdevdone.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html) + +[https://www.w3.org/WAI/tutorials/menus/](https://www.w3.org/WAI/tutorials/menus/) From 859d9bf846d3e8d6a259a232e33042b7e9561519 Mon Sep 17 00:00:00 2001 From: ak-james1 <95581896+ak-james1@users.noreply.github.com> Date: Tue, 21 Nov 2023 19:05:44 -0500 Subject: [PATCH 096/195] Update navigation design in complex websites.md --- Topics/User_Experience/navigation design in complex websites.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/User_Experience/navigation design in complex websites.md b/Topics/User_Experience/navigation design in complex websites.md index 4f1e38e21..aa2d32ac2 100644 --- a/Topics/User_Experience/navigation design in complex websites.md +++ b/Topics/User_Experience/navigation design in complex websites.md @@ -44,7 +44,7 @@ Consider using the following steps to start thinking of good navigation design ## Key Things to Consider for Navigation Design of Complex Websites * Accessibility * Additional tips on designing accessible menus/ navigation. - * Click Here [[https://www.w3.org/WAI/tutorials/menus/](https://www.w3.org/WAI/tutorials/menus/)] + * [Click Here](https://www.w3.org/WAI/tutorials/menus/) * Important links should be kept in navigation menus / nav bars * Different screen sizes may require varying navigation designs * For example, desktops with navbars vs mobile devices with sidebar menus From 9276047892b2f1eab81fd2098d4a258590ec387d Mon Sep 17 00:00:00 2001 From: Jazli14 <95947726+Jazli14@users.noreply.github.com> Date: Tue, 21 Nov 2023 22:04:09 -0500 Subject: [PATCH 097/195] Update Deploy_Node.js_Docker_AWS.md --- .../Deploy_Node.js_Docker_AWS.md | 101 ++++++++++++------ 1 file changed, 69 insertions(+), 32 deletions(-) diff --git a/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md b/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md index 6bd60afc4..be98bf290 100644 --- a/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md +++ b/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md @@ -5,6 +5,8 @@ In the realm of modern software development, containerization has become a stand AWS (Amazon Web Services) provides a suite of cloud services that enable developers to deploy and manage applications easily. ECS (Elastic Container Service) and ECR (Elastic Container Registry) are two fundamental services offered by AWS to manage containers and container images, respectively. +Running your Node.js application on an EC2 instance will allow this to be accessed on a public domain hosted by AWS. Containerizing your Node.js application through Docker allows for easy deployment via running the application in an isolated environment. Combining these together allows your application to run inside a container while inside a virtual machine which is hosted on the cloud. + ## Tech Stack Docker: Docker is a platform that allows you to package an application and its dependencies into a standardized unit called a container. It provides isolation, portability, and scalability for applications. It allows for easy deployment as it essentially creates a separate virtual machine to run the application on. @@ -17,53 +19,88 @@ Amazon ECR (Elastic Container Registry): ECR is a managed Docker container regis Amazon EC2 (Elastic Compute Cloud): EC2 is AWS's resizable cloud computing service offering virtual machines (instances) for running applications. It provides flexibility to configure and scale computing resources based on demand. + ## Deployment Process +This guide assumes you have already created your Node.js application and are using the Bash Unix shell. + ### Containerize your Node.js application: Using Dockerfile allows one to create a container for the app. -Create a Dockerfile in the root directory of your Node.js application. -Write instructions to build your Node.js app within the Dockerfile. -Build the Docker image locally using docker build -t . -Test the image locally to ensure it works as expected: docker run -p 8080:80 -The first number 8080 is the host port and 80 is the container port. +1) Create a Dockerfile in the root directory of your Node.js application. +2) Write instructions to build your Node.js app within the Dockerfile. +3) Build the Docker image locally using docker build -t . +4) Test the image locally to ensure it works as expected: docker run -p 8080:80 +* You can use any port numbers but we will use 8080:80 as the example +* The first number 8080 is the host port and 80 is the container port. +5) If it is running correctly, you can stop and remove the container using this command (Assuming there are no other containers to be kept). +```bash +$ docker container prune +``` ### Create an ECR repository: -Log in to the AWS Management Console. -Go to the Amazon ECR service. -Create a new repository to store your Docker image. -Push your Docker image to ECR: -Tag your Docker image with the ECR repository URL: -```bash -$ docker tag .dkr.ecr..amazonaws.com/: -``` +1) Log in to the AWS Management Console. +2) Go to the Amazon ECR service. +3) Create a new repository to store your Docker image. +4) Copy the Image URI +5) Push your Docker image to ECR: + Log in to ECR using the AWS CLI: ```bash $ aws ecr get-login-password --region | docker login --username AWS --password-stdin .dkr.ecr..amazonaws.com ``` +Tag your Docker image with the ECR repository URL: +```bash +$ docker tag .dkr.ecr..amazonaws.com/: +``` Push your Docker image to the ECR repository: ```bash $ docker push .dkr.ecr..amazonaws.com/: ``` +- Replace \ with the name you want to label your image with your desired name for the image +- Replace \, \, \, \ with your correct credentials and your ECR name URL. + +You can also instead press the “View push commands” button and follow those instructions. -Replace \ with the name you want to label your image with -Replace \, \, \, \ with your correct credentials and your ECR name URL. -Create an ECS Task Definition: +### Create an ECS Task Definition: Go to the Amazon ECS service in the AWS Management Console. -Create a new task definition specifying your container image from ECR, CPU, memory requirements, etc. - -Create an ECS Cluster: -Create an ECS cluster if you don't have one already. -Configure the ECS cluster settings and select launch type (Fargate or EC2). - -Create an ECS Service: -Define a service within the ECS cluster. -Specify the task definition, desired number of tasks, network configuration, load balancer settings, etc. - -Deploy your ECS Service: -Review and finalize the ECS service settings. -Deploy the service to the ECS cluster. - -# Access your Node.js application -Once the ECS service is up and running, access your Node.js application using the provided service endpoint. +2) Click on "Task Definitions" in the left-hand navigation pane. +3) Click “Create a new task definition” +4) Specify your container image details +- Copy the Image URI from the ECR dashboard +- The container port mapping you established in the previous step +- How much memory it requires (CPU, GPU) +- Click the “Create” button at the bottom + +### Create an ECS Cluster: +Inside the AWS Management Console of ECS cluster +1) Click create an ECS cluster. +2) Configure the ECS cluster settings and select launch type EC2 +3) Select the EC2 instance type +- This is yours to decide how much memory your virtual machine should have. The most common is the t2.micro type which is eligible for the free tier. +4) Click the “Create” button + +### Create an ECS Service: +Inside the same dashboard click on the ECS cluster you created +1) Click on the “Create service” button +2) Ensure the instance type is EC2 instead of Fargate and that it is a **service** not a task +3) Under “Select a task family”, select your created task definition in the previous step +4) Define any other desired number of tasks, network configuration, load balancer settings, etc. +5) After finalizing settings, create the service and run the service + +### Expose the EC2 IP Address to External Connections +Go to the AWS Management Console for EC2 +1) Find the EC2 instance linked to your ECS cluster and click on the security group +2) Press edit inbound rules and add a two new rules +3) Set the type to all traffic and all ports from any IPV4 +4) For the other rule set it to also accept any traffic from all ports from any IPV6 +5) Click save rules + +### Access your Node.js application +Go to the EC2 Management Console and find the same EC2 instance +1) Find its public IPV4 address or DNS and add a colon with the port number at the end +2) Use your browser to access it or any other service (Postman, Insomnia, etc.) +3) You should see either a Cannot GET message or your expected endpoint result + +Note: Set up a test endpoint to confirm that the Node.js application is running From 4e99801b8a8440d7b0ec8055a3ed392e0959dc60 Mon Sep 17 00:00:00 2001 From: ak-james1 <95581896+ak-james1@users.noreply.github.com> Date: Wed, 22 Nov 2023 00:36:29 -0500 Subject: [PATCH 098/195] Update and rename navigation design in complex websites.md to Navigation design in complex websites.md made requested changes / updates --- .../Navigation design in complex websites.md | 72 +++++++++++++++++++ .../navigation design in complex websites.md | 64 ----------------- 2 files changed, 72 insertions(+), 64 deletions(-) create mode 100644 Topics/User_Experience/Navigation design in complex websites.md delete mode 100644 Topics/User_Experience/navigation design in complex websites.md diff --git a/Topics/User_Experience/Navigation design in complex websites.md b/Topics/User_Experience/Navigation design in complex websites.md new file mode 100644 index 000000000..9944f241d --- /dev/null +++ b/Topics/User_Experience/Navigation design in complex websites.md @@ -0,0 +1,72 @@ +## What is Navigation Design ? +Navigation Design, also referred to as menu design, helps users to easily move through the pages of your website. It utilizes design techniques to allow ease of navigation and provide the user a better user experience. + + +## Good vs Bad Navigation Design +Good navigation design allows the ease of finding information and is intuitive and easy to use. On the other hand, bad navigation design can overwhelm the user and make finding important content difficult. As a result, it is important to keep the user in mind when designing the navigation of a website, especially complex websites with a multitude of pages. Reasoning about how the user can navigate through the many pages of a website, can help lay the foundation to good navigation design. + +Consider using the following steps to start thinking of good navigation design : + +1. Layout all the pages on your website .whether on paper of through a design tool such as Figma + * This can be done on paper or through a design tool such as Figma + +2. Find relevant ways a user may navigate through those pages + * For example, home page to sign in back to home page + * Additihnally, consider using prototyping or wireframing to give yourself a clearer picture on how the user may naviage through your website + +3. Determine which pages the user may need to reference most often + * For example, the home page / landing page is usually referenced a lot by the user. + +4. Consider using some of the following to ease navigation through the website : + * Navbars + * Usually at the top of a landing page / home page. These contain links to the website's main pages. + * Side menus + * Usually located at the side of the page and contains links to relevant pages on the website + * Tabbed menus + * Organizes information into different tabs, where each tab contains different relevant information + * Footers containing links to all relevant pages within your website + * Usually at the bottom of a page. It can contain links to all pages on the website as well as contact information. + +5. Consider how the user may navigate through the content on a single page. + * Sub-navbars can be utilized. + * Located below a normal Navbar and consists of links that are relevant to the specific page that the user is on + * If there is searchable / filterable content on this page, consider using icons that are easily identifiable by the user as search ( magnifying glass) or filter. + +* Please see the link below for more navigation design patterns: + * [https://ui-patterns.com/patterns/navigation/list](https://ui-patterns.com/patterns/navigation/list) + + +## Advantages of Good Navigation Design for Complex Websites + +* Good navigation design allows a clear or intuitive path for users to navigate through the web app / website + * For example, an easy/ clear path through a website to specific content, may encourage users to use your product. +* Increases usability + * A good navigation design allows users to easily find the content that they need in a timely manner . +* Increases user satisfaction + * Users are less likely to become frustrated navigating a website or webapp if there is a clear navigation system. + + + +## Key Things to Consider for Navigation Design of Complex Websites +* Accessibility + * Additional tips on designing accessible menus/ navigation. + * [Click Here](https://www.w3.org/WAI/tutorials/menus/) +* Important links should be kept in navigation menus / nav bars +* Different screen sizes may require varying navigation designs + * For example, desktops with navbars vs mobile devices with sidebar menus +* Is it easy to navigate through the main pages of my website ? + * A good way to determine this, is to run through your website before project completion. Navigate the website as a user while looking for any pitfalls that users may notice but you did not as a developer. + + +## Summary + +When designing a website / web app, it is important to consider how a user will navigate through the website’s many pages. Complex websites are especially hard to navigate with poorly designed navigation systems. To ensure that the user has a great experience, it is important to consider the key points above and their advantages. + + +## Resources + +[https://www.uxtweak.com/ux-glossary/navigation-design/](https://www.uxtweak.com/ux-glossary/navigation-design/) + +[https://getdevdone.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html](https://getdevdone.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html) + +[https://www.w3.org/WAI/tutorials/menus/](https://www.w3.org/WAI/tutorials/menus/) diff --git a/Topics/User_Experience/navigation design in complex websites.md b/Topics/User_Experience/navigation design in complex websites.md deleted file mode 100644 index aa2d32ac2..000000000 --- a/Topics/User_Experience/navigation design in complex websites.md +++ /dev/null @@ -1,64 +0,0 @@ -## What is Navigation Design ? -Navigation Design, also referred to as menu design, helps users to easily move through the pages of your website. It utilizes design techniques to allow ease of navigation and provide the user a better sure experience. - - -## Good vs Bad Navigation Design -Good navigation design allows for ease of finding information, is intuitive and easy to use. On the other hand, bad navigation design can overwhelm the user and make finding important content difficult. As a result, it is important to keep the user in mind when designing the navigation of a website, especially complex websites with a multitude of pages. Reasoning about how the user can navigate through the many pages of a website, can help lay the foundation to good navigation design. - -Consider using the following steps to start thinking of good navigation design : - -1. Layout all the pages on your website whether on paper of through a design tool such as Figma -2. Find the relevant ways a user may navigate through those pages - 1. For example, home page to sign in back to home page -3. Determine which pages they user may need to reference most often - 2. For example, the home page / landing page, -4. Consider using dome of the following to ease navigation through the website : - * Navbars - * Usually at the top of a landing page / home page. These contain links to the website's main pages. - * Sub-navbars - * Located below a normal Navbar and consists of links that are relevant to the specific page that the user is on - * Side menus - * Usually located at the side of the page and contains links to relevant pages on the website - * Tabbed menus - * Organizes information into different tabs, where each tab contains different relevant information - * Footers containing links to all relevant pages within your website - * Usually at the bottom of a page. It can contain links to all pages on the website as well as contact information. - -* Please see the link below for more navigation design patterns: - * [https://ui-patterns.com/patterns/navigation/list](https://ui-patterns.com/patterns/navigation/list) - - -## Advantages of Good Navigation Design for Complex Websites - -* Good navigation design allows a clear or intuitive path for users to navigate through the web app / website -* Increases usability - * A good navigation design allows users to easily find the content that they need in a timely manner -* Increases user satisfaction - * Users are less likely to become frustrated navigating the app if there is a clear navigation system - -* An easy/ clear path through a website to specific content, can be an advantage in encouraging users to use your product - - - - -## Key Things to Consider for Navigation Design of Complex Websites -* Accessibility - * Additional tips on designing accessible menus/ navigation. - * [Click Here](https://www.w3.org/WAI/tutorials/menus/) -* Important links should be kept in navigation menus / nav bars -* Different screen sizes may require varying navigation designs - * For example, desktops with navbars vs mobile devices with sidebar menus -* Is it easy to navigate through the main pages of my website ? - - -## Summary/ How is this relevant to CSC301 ? - -When designing a website / web app, it is important to consider how a user will navigate through the website’s main pages. Complex websites are especially hard to navigate with poorly designed navigation systems. To ensure that the user has a great experience, it is important to consider the key points above and their advantages. - -## Resources - -[https://www.uxtweak.com/ux-glossary/navigation-design/](https://www.uxtweak.com/ux-glossary/navigation-design/) - -[https://getdevdone.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html](https://getdevdone.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html) - -[https://www.w3.org/WAI/tutorials/menus/](https://www.w3.org/WAI/tutorials/menus/) From 9f15c846c1559f5e0f376318c161b98ba44dff41 Mon Sep 17 00:00:00 2001 From: Jasper Mai Date: Wed, 22 Nov 2023 10:39:14 -0500 Subject: [PATCH 099/195] initial draft --- Topics/User_Experience.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/Topics/User_Experience.md b/Topics/User_Experience.md index 9afcada21..2de46698b 100644 --- a/Topics/User_Experience.md +++ b/Topics/User_Experience.md @@ -191,6 +191,12 @@ Figma is a free (for the most part) collaborative tool that lets you design and **Figma, MUI, and React:** See the [UI Component Libraries](https://learning-software-engineering.github.io/Topics/User_Experience.html#ui-component-libraries) section for details on MUI. Note that MUI is a component library for React _only_. You can download the** MUI extension on Figma** and immediately use MUI components in your Figma design. Then, when you're ready to code, you can install MUI in your React project and easily create your frontend by entering "developer mode" on your Figma design and copying the code that Figma generated for you. +**Optimizing Figma Design efforts to easily convert into code:** As mentioned above, “[developer mode](https://www.figma.com/dev-mode/)” is an essential base to translating your Figma designs into usable code. Additionally, there are many design shortcuts within Figma that you can take advantage of to set yourself up for easy code conversion: + +- _Text styles_- Figma allows for users to define their own list of text styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039957034-Create-and-apply-text-styles)). Take advantage of this feature and ensure that your list of Figma text styles corresponds to your code base’s text css definitions. By doing this, you can ensure that your font texts are always properly styled without having to manually adjust them. Consider defining and using the following Figma text styles: `H1`, `H2`, `H3`, `H4`, `Button Text`, `Subheading`, `Body`. +- _Color styles_- Similarly, Figma allows for users to define their own list of color styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039820134-Manage-and-share-styles)). Figma color styles is a very powerful tool and allows you to group various colors to organize into different modes and themes. In your actually frontend code, it’s likely that you will want a css file that defines your main color scheme, and possibly variations (ie. dark mode, secondary colors, etc.). Ensure that your Figma list of color styles corresponds to your code’s css definitions. Consider defining and using the following Figma color styles: `primary`, `secondary`, `primary text`, `secondary text`, `background`. +- _Export assets_- Within Figma, you are able to directly export assets (ie. images) in the exact dimensions that you define them as in your Figma canvas (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma)). This can be especially useful to ensure your assets appear with the proper aspect ratio in your actual app. In particular, Figma allows you to export files in `jpg`, `png`, `svg`, and `pdf` format. + ### Adobe XD [Adobe XD](https://www.adobe.com/products/xd/learn/get-started/what-is-adobe-xd-used-for.html) is another popular prototyping tool. Unfortunately, the current author of this wiki doesn't know much about it, other than it requires a monthly subscription :(. From 1f3524efc8838cc09515ae2e89aecf2ab1a3ff5d Mon Sep 17 00:00:00 2001 From: alessandromarmii <126909660+alessandromarmii@users.noreply.github.com> Date: Wed, 22 Nov 2023 11:31:26 -0500 Subject: [PATCH 100/195] Update Product_Management.md fixed typo, added examples of digital tools. --- Topics/Product_Management.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/Product_Management.md b/Topics/Product_Management.md index 6e8a04f90..577303de0 100644 --- a/Topics/Product_Management.md +++ b/Topics/Product_Management.md @@ -23,7 +23,7 @@ Referencing this [article](https://curiouscore.com/resource/4-lessons-for-produc * To keep everyone in the loop about the project’s progress, Irene’s team held weekly 30-min calls so team members could align on the tasks they needed to complete, as well as identify any potential blockers. * Irene’s team was able to react swiftly and effectively to the changes brought on by COVID-19 by first reviewing an existing product roadmap they had, which allowed everyone on the team to have a common document for reference as they made their decisions and reviewed timelines. -Irene sees the pandemic as transformative, allowing unprecedented work flexibilit. She finds that the newly added option of working remotely adds value to her work and increases the potential of teams. She believes that by incorporating some of these strategies, many product managers will be able mirror her success. +Irene sees the pandemic as transformative, allowing unprecedented work flexibility. She finds that the newly added option of working remotely adds value to her work and increases the potential of teams. She believes that by incorporating some of these strategies, many product managers will be able mirror her success. #### Case Study 2 - Working Remotely: @@ -32,7 +32,7 @@ We now report the experience of several product managers working at TopTal remot Sam and Dave, succeeded at overcoming this new challenge by: * Established clear expectations and acknowledging diverse work cultures to build trust. -* Leveraged digital tools and adapting communication methodologies to maintain productivity and team unity. +* Leveraged digital tools (e.g. Trello, Basecamp, Jira) and adapting communication methodologies to maintain productivity and team unity. These product managers discovered, quite unexpectedly, that remote work — originally a necessity due to the crisis — offered unexpected advantages such as increased deep work and adaptability. This led to conversations about the sustained incorporation of remote work practices within product management. Such insights from the case study offer reassurance that thriving in a remote environment is entirely feasible for product managers. 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 101/195] 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 102/195] 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 bc76e0cb5ffa64a75d46eda9e749411e04fd88a5 Mon Sep 17 00:00:00 2001 From: ak-james1 <95581896+ak-james1@users.noreply.github.com> Date: Wed, 22 Nov 2023 14:02:37 -0500 Subject: [PATCH 103/195] Update Navigation design in complex websites.md Made requested changes and fixed small typos and formatting --- .../Navigation design in complex websites.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Topics/User_Experience/Navigation design in complex websites.md b/Topics/User_Experience/Navigation design in complex websites.md index 9944f241d..68536d1fc 100644 --- a/Topics/User_Experience/Navigation design in complex websites.md +++ b/Topics/User_Experience/Navigation design in complex websites.md @@ -3,34 +3,34 @@ Navigation Design, also referred to as menu design, helps users to easily move t ## Good vs Bad Navigation Design -Good navigation design allows the ease of finding information and is intuitive and easy to use. On the other hand, bad navigation design can overwhelm the user and make finding important content difficult. As a result, it is important to keep the user in mind when designing the navigation of a website, especially complex websites with a multitude of pages. Reasoning about how the user can navigate through the many pages of a website, can help lay the foundation to good navigation design. +Good navigation design allows the ease of finding information and is intuitive and easy to use. On the other hand, bad navigation design can overwhelm the user and make finding important content difficult. As a result, it is important to keep the user in mind when designing the navigation of a website, especially complex websites with a multitude of pages. In fact, reasoning about how the user can navigate through the many pages of a website and efficiently within a large page can help lay the foundation to good navigation design. Consider using the following steps to start thinking of good navigation design : -1. Layout all the pages on your website .whether on paper of through a design tool such as Figma - * This can be done on paper or through a design tool such as Figma +1. Layout all the pages on your website + * This can be done on paper or through a design tool such as Figma[https://www.figma.com/] 2. Find relevant ways a user may navigate through those pages - * For example, home page to sign in back to home page - * Additihnally, consider using prototyping or wireframing to give yourself a clearer picture on how the user may naviage through your website + * For example, home page → sign in → back to home page + * Additionally, consider using prototyping or wireframing to give yourself a clearer picture on how the user may navigate through your website 3. Determine which pages the user may need to reference most often * For example, the home page / landing page is usually referenced a lot by the user. 4. Consider using some of the following to ease navigation through the website : * Navbars - * Usually at the top of a landing page / home page. These contain links to the website's main pages. + * Usually at the top of a landing page / home page. These contain links to the website's main pages * Side menus * Usually located at the side of the page and contains links to relevant pages on the website * Tabbed menus * Organizes information into different tabs, where each tab contains different relevant information * Footers containing links to all relevant pages within your website - * Usually at the bottom of a page. It can contain links to all pages on the website as well as contact information. + * Usually at the bottom of a page. It can contain links to all pages on the website as well as contact information 5. Consider how the user may navigate through the content on a single page. - * Sub-navbars can be utilized. + * Sub-navbars can be utilized * Located below a normal Navbar and consists of links that are relevant to the specific page that the user is on - * If there is searchable / filterable content on this page, consider using icons that are easily identifiable by the user as search ( magnifying glass) or filter. + * If there is searchable / filterable content on this page, consider using icons that are easily identifiable by the user as search ( magnifying glass) or filter * Please see the link below for more navigation design patterns: * [https://ui-patterns.com/patterns/navigation/list](https://ui-patterns.com/patterns/navigation/list) @@ -41,7 +41,7 @@ Consider using the following steps to start thinking of good navigation design * Good navigation design allows a clear or intuitive path for users to navigate through the web app / website * For example, an easy/ clear path through a website to specific content, may encourage users to use your product. * Increases usability - * A good navigation design allows users to easily find the content that they need in a timely manner . + * A good navigation design allows users to easily find the content that they need in a timely manner. * Increases user satisfaction * Users are less likely to become frustrated navigating a website or webapp if there is a clear navigation system. From 754350ddb03aad8bc4f0f278ef9c5621be0c0bdb Mon Sep 17 00:00:00 2001 From: ak-james1 <95581896+ak-james1@users.noreply.github.com> Date: Wed, 22 Nov 2023 14:07:58 -0500 Subject: [PATCH 104/195] Update Navigation design in complex websites.md More minor edits --- .../User_Experience/Navigation design in complex websites.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/User_Experience/Navigation design in complex websites.md b/Topics/User_Experience/Navigation design in complex websites.md index 68536d1fc..2a37e7011 100644 --- a/Topics/User_Experience/Navigation design in complex websites.md +++ b/Topics/User_Experience/Navigation design in complex websites.md @@ -24,8 +24,8 @@ Consider using the following steps to start thinking of good navigation design * Usually located at the side of the page and contains links to relevant pages on the website * Tabbed menus * Organizes information into different tabs, where each tab contains different relevant information - * Footers containing links to all relevant pages within your website - * Usually at the bottom of a page. It can contain links to all pages on the website as well as contact information + * Footers + * Usually at the bottom of a page. It can contain links to all relevant pages on the website as well as contact information 5. Consider how the user may navigate through the content on a single page. * Sub-navbars can be utilized From 1b0175460df2647672a33b28eb85fd41e938a71f Mon Sep 17 00:00:00 2001 From: ak-james1 <95581896+ak-james1@users.noreply.github.com> Date: Wed, 22 Nov 2023 14:21:29 -0500 Subject: [PATCH 105/195] Update and rename Navigation design in complex websites.md to Intro to navigation design in complex websites.md Final changes to Intro to Navigation Design --- ... navigation design in complex websites.md} | 28 +++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) rename Topics/User_Experience/{Navigation design in complex websites.md => Intro to navigation design in complex websites.md} (68%) diff --git a/Topics/User_Experience/Navigation design in complex websites.md b/Topics/User_Experience/Intro to navigation design in complex websites.md similarity index 68% rename from Topics/User_Experience/Navigation design in complex websites.md rename to Topics/User_Experience/Intro to navigation design in complex websites.md index 2a37e7011..c3a1a19a2 100644 --- a/Topics/User_Experience/Navigation design in complex websites.md +++ b/Topics/User_Experience/Intro to navigation design in complex websites.md @@ -1,39 +1,39 @@ ## What is Navigation Design ? -Navigation Design, also referred to as menu design, helps users to easily move through the pages of your website. It utilizes design techniques to allow ease of navigation and provide the user a better user experience. +Navigation Design, also referred to as Menu Design, helps users to easily move through the pages of your website or web app. It utilizes design techniques to allow ease of navigation and provide the user a better user experience. ## Good vs Bad Navigation Design -Good navigation design allows the ease of finding information and is intuitive and easy to use. On the other hand, bad navigation design can overwhelm the user and make finding important content difficult. As a result, it is important to keep the user in mind when designing the navigation of a website, especially complex websites with a multitude of pages. In fact, reasoning about how the user can navigate through the many pages of a website and efficiently within a large page can help lay the foundation to good navigation design. +Good navigation design allows the ease of finding information and is intuitive and easy to use. On the other hand, bad navigation design can overwhelm the user and make finding important content difficult. As a result, it is important to keep the user in mind when designing the navigation of a website or web app. This is especially important for complex websites with a multitude of pages. In fact, reasoning about how the user can navigate through the many pages of a website and efficiently within a large page can help lay the foundation to good navigation design. Consider using the following steps to start thinking of good navigation design : 1. Layout all the pages on your website - * This can be done on paper or through a design tool such as Figma[https://www.figma.com/] + * This can be done on paper or through a design tool such as [Figma](https://www.figma.com/) 2. Find relevant ways a user may navigate through those pages - * For example, home page → sign in → back to home page + * For example, home page → sign in → home page * Additionally, consider using prototyping or wireframing to give yourself a clearer picture on how the user may navigate through your website 3. Determine which pages the user may need to reference most often - * For example, the home page / landing page is usually referenced a lot by the user. + * For example, a user may navigate to the home page / landing page on many occasions -4. Consider using some of the following to ease navigation through the website : +4. Consider using some of the following to create good navigation design : * Navbars * Usually at the top of a landing page / home page. These contain links to the website's main pages * Side menus * Usually located at the side of the page and contains links to relevant pages on the website * Tabbed menus - * Organizes information into different tabs, where each tab contains different relevant information + * Organizes information into different tabs, where each tab contains information relevant to that tab only * Footers * Usually at the bottom of a page. It can contain links to all relevant pages on the website as well as contact information 5. Consider how the user may navigate through the content on a single page. * Sub-navbars can be utilized * Located below a normal Navbar and consists of links that are relevant to the specific page that the user is on - * If there is searchable / filterable content on this page, consider using icons that are easily identifiable by the user as search ( magnifying glass) or filter + * If there is searchable / filterable content on this page, consider using icons that are easily identifiable by the user as search (magnifying glass) or filter * Please see the link below for more navigation design patterns: - * [https://ui-patterns.com/patterns/navigation/list](https://ui-patterns.com/patterns/navigation/list) + * [Navigation Design Patterns](https://ui-patterns.com/patterns/navigation/list) ## Advantages of Good Navigation Design for Complex Websites @@ -41,9 +41,9 @@ Consider using the following steps to start thinking of good navigation design * Good navigation design allows a clear or intuitive path for users to navigate through the web app / website * For example, an easy/ clear path through a website to specific content, may encourage users to use your product. * Increases usability - * A good navigation design allows users to easily find the content that they need in a timely manner. -* Increases user satisfaction - * Users are less likely to become frustrated navigating a website or webapp if there is a clear navigation system. + * Allows users to easily find content in a timely manner. +* Can increases user satisfaction + * Users are less likely to become frustrated navigating a website or web app if there is a clear navigation system. @@ -59,8 +59,7 @@ Consider using the following steps to start thinking of good navigation design ## Summary - -When designing a website / web app, it is important to consider how a user will navigate through the website’s many pages. Complex websites are especially hard to navigate with poorly designed navigation systems. To ensure that the user has a great experience, it is important to consider the key points above and their advantages. +When designing a website or web app, it is important to consider how a user will navigate through the website’s many pages. Complex websites are especially hard to navigate with poorly designed navigation systems. To ensure that the user has a great experience, it is important to consider the key points above and their advantages. ## Resources @@ -70,3 +69,4 @@ When designing a website / web app, it is important to consider how a user will [https://getdevdone.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html](https://getdevdone.com/blog/the-good-the-bad-and-the-best-in-website-navigation.html) [https://www.w3.org/WAI/tutorials/menus/](https://www.w3.org/WAI/tutorials/menus/) + From ec982e2789620562cdfd48f1d79462535ee017f4 Mon Sep 17 00:00:00 2001 From: ak-james1 <95581896+ak-james1@users.noreply.github.com> Date: Wed, 22 Nov 2023 14:24:35 -0500 Subject: [PATCH 106/195] Update Intro to navigation design in complex websites.md minor grammatical updates --- .../Intro to navigation design in complex websites.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/User_Experience/Intro to navigation design in complex websites.md b/Topics/User_Experience/Intro to navigation design in complex websites.md index c3a1a19a2..c96f1f210 100644 --- a/Topics/User_Experience/Intro to navigation design in complex websites.md +++ b/Topics/User_Experience/Intro to navigation design in complex websites.md @@ -1,9 +1,9 @@ ## What is Navigation Design ? -Navigation Design, also referred to as Menu Design, helps users to easily move through the pages of your website or web app. It utilizes design techniques to allow ease of navigation and provide the user a better user experience. +Navigation Design, also referred to as Menu Design, helps users to easily move through the pages of your website or web app. It utilizes design techniques to allow ease of navigation and provide the user with a better user experience. ## Good vs Bad Navigation Design -Good navigation design allows the ease of finding information and is intuitive and easy to use. On the other hand, bad navigation design can overwhelm the user and make finding important content difficult. As a result, it is important to keep the user in mind when designing the navigation of a website or web app. This is especially important for complex websites with a multitude of pages. In fact, reasoning about how the user can navigate through the many pages of a website and efficiently within a large page can help lay the foundation to good navigation design. +Good navigation design allows the user to easily find relevant information and easy to use. On the other hand, bad navigation design can overwhelm the user and make finding important content difficult. As a result, it is important to keep the user in mind when designing the navigation of a website or web app. This is especially important for complex websites with a multitude of pages. In fact, reasoning about how the user can navigate through the many pages of a website and efficiently within a large page can help lay the foundation to good navigation design. Consider using the following steps to start thinking of good navigation design : From a041329b12608503a0028e08dd4433b5a4b7287f Mon Sep 17 00:00:00 2001 From: K M Crawford Date: Wed, 22 Nov 2023 14:26:36 -0500 Subject: [PATCH 107/195] Update React.md --- Topics/Tech_Stacks/React.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/Topics/Tech_Stacks/React.md b/Topics/Tech_Stacks/React.md index 4358b6135..233100adc 100644 --- a/Topics/Tech_Stacks/React.md +++ b/Topics/Tech_Stacks/React.md @@ -1,7 +1,7 @@ ## Tech Stacks ### React Overview -React is an open-source JavaScript library for building component-based user interfaces. This component-based architecture allows engineers to quickly prototype and develop complex applications easily by modularizing common functionalities into discrete, reusable UI components, and React boasts a large user base full of freely available components libraries. Beyond this, React there's much more to learn about React, such as its virtual DOM, JSX, and a full mobile framework in React Native, and much more -- so much more that it can be [overwhelming](https://auth0.com/blog/how-to-manage-javascript-fatigue/). +React is an open-source JavaScript library for building component-based user interfaces. This component-based architecture allows engineers to quickly prototype and develop complex applications easily by modularizing common functionalities into discrete, reusable UI components, whilst boasting a large user base full of freely available component libraries. Beyond this, React there's much more to learn about React, such as its virtual DOM, JSX, and a full mobile framework in React Native, and much more -- so much more that it can be [overwhelming](https://auth0.com/blog/how-to-manage-javascript-fatigue/). To help ease the learning curve, below you'll find a variety of resources to reference while learning and components and libraries to use with React. @@ -38,7 +38,13 @@ JavaScript frameworks tutorial provided by Microsoft. Useful readings, but not n ### Useful React Tools and Libraries [Create React App](https://create-react-app.dev/) -Allows you to set up your React applications using a single command without having to configure many build tools. Provides a lot of useful functionality like instant reloads and optimizations for deployment. +Allows you to set up your React applications using a single command without having to configure many build tools. Provides a lot of useful functionality like instant reloads and optimizations for deployment; is the "official" React solution. + +[Vite](https://vitejs.dev/) +Another quickstart build tool for setting up your environment; an alternative to Create React App, [Vite is generally faster than Create React App](https://www.dhiwise.com/post/react-build-tools-create-react-app-with-vite-vs-cra-tool). + +[Next.js](https://nextjs.org/) +A popular and robust framework that allows server-side rendering and static website generation. [usehooks-ts](https://usehooks-ts.com/) A React library of useful hooks that go well beyond those built into React. Don't reinvent the wheel! usehooks offers over forty ready-to-use hooks such as [useEffectOnce](https://usehooks-ts.com/react-hook/use-effect-once) and [useInterval](https://usehooks-ts.com/react-hook/use-interval). @@ -55,7 +61,7 @@ Another responsive UI library that allows you to focus on development by handlin ### Miscellaneous [GitHub Pages](https://pages.github.com/) -Host your React websites straight from your Github repo. Website hosting is fairly expensive, so this is here as a free alternative for website deployment for simple applications. +Host your React websites straight from your Github repo. Website hosting is fairly expensive, so this is here as a free alternative for website deployment for simple applications. Head over to the [Development Process](https://learning-software-engineering.github.io/Topics/Development_Process/) page for a tutorial on GitHub pages and more. [Codepen](https://codepen.io/) Online development environment to try React out in (among other frontend tools). Great for testing the waters with React and other libraries or languages. From d1a188d1f44a2564c83e5e94e26845118c48ee3c Mon Sep 17 00:00:00 2001 From: K M Crawford Date: Wed, 22 Nov 2023 14:28:23 -0500 Subject: [PATCH 108/195] Update React.md --- Topics/Tech_Stacks/React.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Topics/Tech_Stacks/React.md b/Topics/Tech_Stacks/React.md index 233100adc..9ea320eeb 100644 --- a/Topics/Tech_Stacks/React.md +++ b/Topics/Tech_Stacks/React.md @@ -66,3 +66,5 @@ Host your React websites straight from your Github repo. Website hosting is fair [Codepen](https://codepen.io/) Online development environment to try React out in (among other frontend tools). Great for testing the waters with React and other libraries or languages. +[Stackblitz](https://stackblitz.com/) +An online development environment for frontend, Node.js, and JavaScript. From 43d7f0a082aafa14496566f27291060a89f706dc Mon Sep 17 00:00:00 2001 From: K M Crawford Date: Wed, 22 Nov 2023 14:28:44 -0500 Subject: [PATCH 109/195] Update React.md --- Topics/Tech_Stacks/React.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Topics/Tech_Stacks/React.md b/Topics/Tech_Stacks/React.md index 9ea320eeb..fa3fe9fbd 100644 --- a/Topics/Tech_Stacks/React.md +++ b/Topics/Tech_Stacks/React.md @@ -23,6 +23,7 @@ A free course provided by Scrimba that teaches React fundamentals through the cr Basic React tutorial provided by the official React website. This tutorial will guide you through a very basic tutorial that you can do straight from your browser. [React JS Crash Course](https://www.youtube.com/watch?v=w7ejDZ8SWv8) + [One Hour React Tutorial](https://www.youtube.com/watch?v=b9eMGE7QtTk) One hour quickstart tutorials about React. These YouTube crash course provides a great overview of React and various important components that you will be using often. Very useful if you are learning React under a strict time limit for whatever reason. From 244e56c881935db1f0c9c542e0efe9f97e8abce5 Mon Sep 17 00:00:00 2001 From: K M Crawford Date: Wed, 22 Nov 2023 14:29:02 -0500 Subject: [PATCH 110/195] Update React.md --- Topics/Tech_Stacks/React.md | 1 - 1 file changed, 1 deletion(-) diff --git a/Topics/Tech_Stacks/React.md b/Topics/Tech_Stacks/React.md index fa3fe9fbd..9ea320eeb 100644 --- a/Topics/Tech_Stacks/React.md +++ b/Topics/Tech_Stacks/React.md @@ -23,7 +23,6 @@ A free course provided by Scrimba that teaches React fundamentals through the cr Basic React tutorial provided by the official React website. This tutorial will guide you through a very basic tutorial that you can do straight from your browser. [React JS Crash Course](https://www.youtube.com/watch?v=w7ejDZ8SWv8) - [One Hour React Tutorial](https://www.youtube.com/watch?v=b9eMGE7QtTk) One hour quickstart tutorials about React. These YouTube crash course provides a great overview of React and various important components that you will be using often. Very useful if you are learning React under a strict time limit for whatever reason. From 9b7c5341e5023fcffcd823a9bbad74b3ecd5bf73 Mon Sep 17 00:00:00 2001 From: K M Crawford Date: Wed, 22 Nov 2023 14:30:00 -0500 Subject: [PATCH 111/195] Update React.md --- Topics/Tech_Stacks/React.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/React.md b/Topics/Tech_Stacks/React.md index 9ea320eeb..e3ba35d76 100644 --- a/Topics/Tech_Stacks/React.md +++ b/Topics/Tech_Stacks/React.md @@ -61,7 +61,7 @@ Another responsive UI library that allows you to focus on development by handlin ### Miscellaneous [GitHub Pages](https://pages.github.com/) -Host your React websites straight from your Github repo. Website hosting is fairly expensive, so this is here as a free alternative for website deployment for simple applications. Head over to the [Development Process](https://learning-software-engineering.github.io/Topics/Development_Process/) page for a tutorial on GitHub pages and more. +Host your React websites straight from your Github repo. Website hosting is fairly expensive, so this is here as a free alternative for website deployment for simple applications. Head over to the [Development Process](https://learning-software-engineering.github.io/Topics/Development_Process.html#resources-for-development-process) page for a tutorial on GitHub pages and more. [Codepen](https://codepen.io/) Online development environment to try React out in (among other frontend tools). Great for testing the waters with React and other libraries or languages. From c30587a9fa15d668e1186ca86d0e508dddcb5d61 Mon Sep 17 00:00:00 2001 From: ak-james1 <95581896+ak-james1@users.noreply.github.com> Date: Wed, 22 Nov 2023 14:31:21 -0500 Subject: [PATCH 112/195] Update Intro to navigation design in complex websites.md fixed period --- .../Intro to navigation design in complex websites.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/User_Experience/Intro to navigation design in complex websites.md b/Topics/User_Experience/Intro to navigation design in complex websites.md index c96f1f210..a0f83045b 100644 --- a/Topics/User_Experience/Intro to navigation design in complex websites.md +++ b/Topics/User_Experience/Intro to navigation design in complex websites.md @@ -27,7 +27,7 @@ Consider using the following steps to start thinking of good navigation design * Footers * Usually at the bottom of a page. It can contain links to all relevant pages on the website as well as contact information -5. Consider how the user may navigate through the content on a single page. +5. Consider how the user may navigate through the content on a single page * Sub-navbars can be utilized * Located below a normal Navbar and consists of links that are relevant to the specific page that the user is on * If there is searchable / filterable content on this page, consider using icons that are easily identifiable by the user as search (magnifying glass) or filter From 4b90e22a772cb9ea64ce31649d53323a765ca381 Mon Sep 17 00:00:00 2001 From: alyson647 Date: Wed, 22 Nov 2023 15:11:24 -0500 Subject: [PATCH 113/195] 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 114/195] 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 115/195] 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 116/195] 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 117/195] 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 817e837f5949e2e341db1157b7a7e71ae8b1deea Mon Sep 17 00:00:00 2001 From: Daniel Qiu Date: Wed, 22 Nov 2023 16:09:45 -0500 Subject: [PATCH 118/195] Fix formatting for md file --- Topics/Tech_Stacks/Flutter.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Topics/Tech_Stacks/Flutter.md b/Topics/Tech_Stacks/Flutter.md index a5c3066b5..e8836bf10 100644 --- a/Topics/Tech_Stacks/Flutter.md +++ b/Topics/Tech_Stacks/Flutter.md @@ -31,6 +31,7 @@ The following is a summary from the offical [Flutter Docs](https://docs.flutter. a) Install VS Code for your respective platform. [Installation Link](https://code.visualstudio.com/download). b) Open a browser and go to the [Flutter extension page](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter) on the Visual Studio Marketplace. c) Click Install. Installing the Flutter extension also installs the Dart extension. + 3. **Create the app** a) Invoke **View > Command Palette**. This can be done with `ctrl shift p` on Windows or `cmd shift p` on Mac. b) Type "flutter", and select the **Flutter: New Project** @@ -39,6 +40,7 @@ The following is a summary from the offical [Flutter Docs](https://docs.flutter. e) Enter a project name, such as `my_app`, and press **Enter**. f) Wait for project creation to complete and the `main.dart` file to appear. The above commands create a Flutter project directory called my_app that contains a simple demo app that uses [Material Components](https://m3.material.io/components). + 4. **Running the App** a) Locate the VS Code status bar (the blue bar at the bottom of the window). b) Select a device from the Device Selector area. From b6a15b7044f573ab8e02cbde5e99a77092696226 Mon Sep 17 00:00:00 2001 From: Jasper Mai Date: Wed, 22 Nov 2023 16:39:33 -0500 Subject: [PATCH 119/195] formatting changes --- Topics/User_Experience.md | 24 ++++++++++++++++++------ 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/Topics/User_Experience.md b/Topics/User_Experience.md index 2de46698b..bf3435749 100644 --- a/Topics/User_Experience.md +++ b/Topics/User_Experience.md @@ -187,15 +187,27 @@ This article provides the 7 Universal Design Principles that make software acces Figma is a free (for the most part) collaborative tool that lets you design and build mock-ups and prototypes of your software/applications. You may not need to build prototypes as a software developer/engineer, but you'll probably find yourself viewing Figma design files to build your frontend. So, now's a great time to start learning how to use [Figma](https://www,figma.com)! -**Helpful tip:** With just a click of a button, you can switch to "developer mode" in Figma, which helps you translate design into code! Essentially, you can click on components like a button and get its corresponding code and styling. Read about how to use this feature [here](https://www.figma.com/dev-mode/). +#### Developer Mode -**Figma, MUI, and React:** See the [UI Component Libraries](https://learning-software-engineering.github.io/Topics/User_Experience.html#ui-component-libraries) section for details on MUI. Note that MUI is a component library for React _only_. You can download the** MUI extension on Figma** and immediately use MUI components in your Figma design. Then, when you're ready to code, you can install MUI in your React project and easily create your frontend by entering "developer mode" on your Figma design and copying the code that Figma generated for you. +With just a click of a button, you can switch to "developer mode" in Figma, which helps you translate design into code! Essentially, you can click on components like a button and get its corresponding code and styling. Read about how to use this feature [here](https://www.figma.com/dev-mode/). -**Optimizing Figma Design efforts to easily convert into code:** As mentioned above, “[developer mode](https://www.figma.com/dev-mode/)” is an essential base to translating your Figma designs into usable code. Additionally, there are many design shortcuts within Figma that you can take advantage of to set yourself up for easy code conversion: +#### Figma, MUI, and React -- _Text styles_- Figma allows for users to define their own list of text styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039957034-Create-and-apply-text-styles)). Take advantage of this feature and ensure that your list of Figma text styles corresponds to your code base’s text css definitions. By doing this, you can ensure that your font texts are always properly styled without having to manually adjust them. Consider defining and using the following Figma text styles: `H1`, `H2`, `H3`, `H4`, `Button Text`, `Subheading`, `Body`. -- _Color styles_- Similarly, Figma allows for users to define their own list of color styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039820134-Manage-and-share-styles)). Figma color styles is a very powerful tool and allows you to group various colors to organize into different modes and themes. In your actually frontend code, it’s likely that you will want a css file that defines your main color scheme, and possibly variations (ie. dark mode, secondary colors, etc.). Ensure that your Figma list of color styles corresponds to your code’s css definitions. Consider defining and using the following Figma color styles: `primary`, `secondary`, `primary text`, `secondary text`, `background`. -- _Export assets_- Within Figma, you are able to directly export assets (ie. images) in the exact dimensions that you define them as in your Figma canvas (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma)). This can be especially useful to ensure your assets appear with the proper aspect ratio in your actual app. In particular, Figma allows you to export files in `jpg`, `png`, `svg`, and `pdf` format. +See the [UI Component Libraries](https://learning-software-engineering.github.io/Topics/User_Experience.html#ui-component-libraries) section for details on MUI. Note that MUI is a component library for React _only_. You can download the** MUI extension on Figma** and immediately use MUI components in your Figma design. Then, when you're ready to code, you can install MUI in your React project and easily create your frontend by entering "developer mode" on your Figma design and copying the code that Figma generated for you. + + +#### Optimizing Figma Design tools to easily convert into code + +As mentioned above, “[developer mode](https://www.figma.com/dev-mode/)” is an essential base to translating your Figma designs into usable code. Additionally, there are many design shortcuts within Figma that you can take advantage of to set yourself up for easy code conversion: + +**Text styles** +Figma allows for users to define their own list of text styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039957034-Create-and-apply-text-styles)). Take advantage of this feature and ensure that your list of Figma text styles corresponds to your code base’s text css definitions. By doing this, you can ensure that your font texts are always properly styled without having to manually adjust them. Consider defining and using the following Figma text styles: `H1`, `H2`, `H3`, `H4`, `Button Text`, `Subheading`, `Body`. + +**Color styles** +Similarly, Figma allows for users to define their own list of color styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039820134-Manage-and-share-styles)). Figma color styles is a very powerful tool and allows you to group various colors to organize into different modes and themes. In your actually frontend code, it’s likely that you will want a css file that defines your main color scheme, and possibly variations (ie. dark mode, secondary colors, etc.). Ensure that your Figma list of color styles corresponds to your code’s css definitions. Consider defining and using the following Figma color styles: `primary`, `secondary`, `primary text`, `secondary text`, `background`. + +**Export assets** +Within Figma, you are able to directly export assets (ie. images) in the exact dimensions that you define them as in your Figma canvas (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma)). This can be especially useful to ensure your assets appear with the proper aspect ratio in your actual app. In particular, Figma allows you to export files in `jpg`, `png`, `svg`, and `pdf` format. ### Adobe XD From 8dec1e59f23bba856cd2e4252209df1c331a19e4 Mon Sep 17 00:00:00 2001 From: Jasper Mai Date: Wed, 22 Nov 2023 16:40:57 -0500 Subject: [PATCH 120/195] formmating p2 --- Topics/User_Experience.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Topics/User_Experience.md b/Topics/User_Experience.md index bf3435749..f3b906396 100644 --- a/Topics/User_Experience.md +++ b/Topics/User_Experience.md @@ -201,12 +201,15 @@ See the [UI Component Libraries](https://learning-software-engineering.github.io As mentioned above, “[developer mode](https://www.figma.com/dev-mode/)” is an essential base to translating your Figma designs into usable code. Additionally, there are many design shortcuts within Figma that you can take advantage of to set yourself up for easy code conversion: **Text styles** + Figma allows for users to define their own list of text styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039957034-Create-and-apply-text-styles)). Take advantage of this feature and ensure that your list of Figma text styles corresponds to your code base’s text css definitions. By doing this, you can ensure that your font texts are always properly styled without having to manually adjust them. Consider defining and using the following Figma text styles: `H1`, `H2`, `H3`, `H4`, `Button Text`, `Subheading`, `Body`. **Color styles** + Similarly, Figma allows for users to define their own list of color styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039820134-Manage-and-share-styles)). Figma color styles is a very powerful tool and allows you to group various colors to organize into different modes and themes. In your actually frontend code, it’s likely that you will want a css file that defines your main color scheme, and possibly variations (ie. dark mode, secondary colors, etc.). Ensure that your Figma list of color styles corresponds to your code’s css definitions. Consider defining and using the following Figma color styles: `primary`, `secondary`, `primary text`, `secondary text`, `background`. **Export assets** + Within Figma, you are able to directly export assets (ie. images) in the exact dimensions that you define them as in your Figma canvas (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma)). This can be especially useful to ensure your assets appear with the proper aspect ratio in your actual app. In particular, Figma allows you to export files in `jpg`, `png`, `svg`, and `pdf` format. ### Adobe XD From 191e3715defb862e2dd5b52e5e69d7a8eaebc567 Mon Sep 17 00:00:00 2001 From: Jasper Mai Date: Wed, 22 Nov 2023 17:05:07 -0500 Subject: [PATCH 121/195] addressing PR comments --- Topics/User_Experience.md | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/Topics/User_Experience.md b/Topics/User_Experience.md index f3b906396..752c4e0a7 100644 --- a/Topics/User_Experience.md +++ b/Topics/User_Experience.md @@ -191,24 +191,35 @@ Figma is a free (for the most part) collaborative tool that lets you design and With just a click of a button, you can switch to "developer mode" in Figma, which helps you translate design into code! Essentially, you can click on components like a button and get its corresponding code and styling. Read about how to use this feature [here](https://www.figma.com/dev-mode/). -#### Figma, MUI, and React +#### Figma, MUI, and React See the [UI Component Libraries](https://learning-software-engineering.github.io/Topics/User_Experience.html#ui-component-libraries) section for details on MUI. Note that MUI is a component library for React _only_. You can download the** MUI extension on Figma** and immediately use MUI components in your Figma design. Then, when you're ready to code, you can install MUI in your React project and easily create your frontend by entering "developer mode" on your Figma design and copying the code that Figma generated for you. - #### Optimizing Figma Design tools to easily convert into code As mentioned above, “[developer mode](https://www.figma.com/dev-mode/)” is an essential base to translating your Figma designs into usable code. Additionally, there are many design shortcuts within Figma that you can take advantage of to set yourself up for easy code conversion: -**Text styles** +**Text Styles and Color Styles** Figma allows for users to define their own list of text styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039957034-Create-and-apply-text-styles)). Take advantage of this feature and ensure that your list of Figma text styles corresponds to your code base’s text css definitions. By doing this, you can ensure that your font texts are always properly styled without having to manually adjust them. Consider defining and using the following Figma text styles: `H1`, `H2`, `H3`, `H4`, `Button Text`, `Subheading`, `Body`. -**Color styles** - Similarly, Figma allows for users to define their own list of color styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039820134-Manage-and-share-styles)). Figma color styles is a very powerful tool and allows you to group various colors to organize into different modes and themes. In your actually frontend code, it’s likely that you will want a css file that defines your main color scheme, and possibly variations (ie. dark mode, secondary colors, etc.). Ensure that your Figma list of color styles corresponds to your code’s css definitions. Consider defining and using the following Figma color styles: `primary`, `secondary`, `primary text`, `secondary text`, `background`. -**Export assets** +**Additional Styles** + +On a related note, Figma allows for the options of Effect styling and Grid styling (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360038746534-Create-color-text-effect-and-layout-grid-styles)). It’s worth considering because both are valid styling attributes in css coding. Effect styling lets you define `drop shadow`, `inner shadow`, `layer blur`, and `background blur` and grid styling lets you organize your frames in `row`, `column`, and `grid` formations. Consider using any of these additional styles and replicating them in your code with the same attribute keywords. + +**Components** + +Within Figma, you can define individual components, as explained in detail in [this official Figma article](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma). In essence, Figma components work similarly to React components; components are reusable and modifying the characteristics of a component will modify every instance of the same component. Using these in your design can especially be helpful to create a good understanding for which components can/should be reusable in your actual coded application. + +**Plugin Extensions** + +Extern plugin extensions are available in Figma to make your life easier and should definitely be taken advantage of. Plugin extensions are created by other community members and will usually have predefined components and icons that are relevant to certain libraries and frameworks that you are using in your codebase. For example, for teams that are using the [ShadCN](https://ui.shadcn.com/) component library with their React project, there is [an available Figma plugin](https://www.figma.com/community/plugin/1280731237276040017/design-with-shadcn-ui-plugin) that already predefined the ShadCN components and icons for you to use in your Figma canvas. This not only helps save time but also ensures that your Figma design and your code will look the exact same. + +You can find a database of available plugins at [this Figma resource](https://www.figma.com/community/plugins). + +**Exporting assets** Within Figma, you are able to directly export assets (ie. images) in the exact dimensions that you define them as in your Figma canvas (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma)). This can be especially useful to ensure your assets appear with the proper aspect ratio in your actual app. In particular, Figma allows you to export files in `jpg`, `png`, `svg`, and `pdf` format. From 06bd9b45f5dca53c2c3e22a770c45af26e49a869 Mon Sep 17 00:00:00 2001 From: Jasper Mai Date: Wed, 22 Nov 2023 17:14:56 -0500 Subject: [PATCH 122/195] edits --- Topics/User_Experience.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/Topics/User_Experience.md b/Topics/User_Experience.md index 752c4e0a7..58a0e842d 100644 --- a/Topics/User_Experience.md +++ b/Topics/User_Experience.md @@ -197,25 +197,27 @@ See the [UI Component Libraries](https://learning-software-engineering.github.io #### Optimizing Figma Design tools to easily convert into code -As mentioned above, “[developer mode](https://www.figma.com/dev-mode/)” is an essential base to translating your Figma designs into usable code. Additionally, there are many design shortcuts within Figma that you can take advantage of to set yourself up for easy code conversion: +As mentioned above, “[developer mode](https://www.figma.com/dev-mode/)” is an essential base to translating your Figma designs into usable code. Additionally, there are many design tools within Figma that you can take advantage of to set yourself up for easy code conversion: **Text Styles and Color Styles** Figma allows for users to define their own list of text styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039957034-Create-and-apply-text-styles)). Take advantage of this feature and ensure that your list of Figma text styles corresponds to your code base’s text css definitions. By doing this, you can ensure that your font texts are always properly styled without having to manually adjust them. Consider defining and using the following Figma text styles: `H1`, `H2`, `H3`, `H4`, `Button Text`, `Subheading`, `Body`. -Similarly, Figma allows for users to define their own list of color styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039820134-Manage-and-share-styles)). Figma color styles is a very powerful tool and allows you to group various colors to organize into different modes and themes. In your actually frontend code, it’s likely that you will want a css file that defines your main color scheme, and possibly variations (ie. dark mode, secondary colors, etc.). Ensure that your Figma list of color styles corresponds to your code’s css definitions. Consider defining and using the following Figma color styles: `primary`, `secondary`, `primary text`, `secondary text`, `background`. +Similarly, Figma allows for users to define their own list of color styles (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360039820134-Manage-and-share-styles)). Figma color styles is a very powerful tool and allows you to group various colors to organize into different modes and themes. In your actual frontend code, it’s likely that you will want a css file that defines your main color scheme and possible variations (ie. dark mode, secondary colors, etc.). Ensure that your Figma list of color styles corresponds to your code’s css definitions. Consider defining and using the following Figma color styles: `primary`, `secondary`, `primary text`, `secondary text`, `background`. **Additional Styles** -On a related note, Figma allows for the options of Effect styling and Grid styling (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360038746534-Create-color-text-effect-and-layout-grid-styles)). It’s worth considering because both are valid styling attributes in css coding. Effect styling lets you define `drop shadow`, `inner shadow`, `layer blur`, and `background blur` and grid styling lets you organize your frames in `row`, `column`, and `grid` formations. Consider using any of these additional styles and replicating them in your code with the same attribute keywords. +On a related note, Figma allows for the options of Effect styling and Grid styling (see [the official Figma article](https://help.figma.com/hc/en-us/articles/360038746534-Create-color-text-effect-and-layout-grid-styles)). Both types of additional styling are valid attributes in css coding. Effect styling lets you define `drop shadow`, `inner shadow`, `layer blur`, and `background blur`. Grid styling lets you organize your frames in `row`, `column`, and `grid` formations. Consider using any of these additional styles and replicating them in your code with the same attribute keywords. **Components** -Within Figma, you can define individual components, as explained in detail in [this official Figma article](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma). In essence, Figma components work similarly to React components; components are reusable and modifying the characteristics of a component will modify every instance of the same component. Using these in your design can especially be helpful to create a good understanding for which components can/should be reusable in your actual coded application. +Within Figma, you can define individual components, as explained in detail in [this official Figma article](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma). In essence, Figma components work similarly to React components; components are reusable and modifying the characteristics of a component will modify every instance of the same component. Using these in your design can be especially helpful to create a good understanding for which components can/should be reusable in your actual codebase. **Plugin Extensions** -Extern plugin extensions are available in Figma to make your life easier and should definitely be taken advantage of. Plugin extensions are created by other community members and will usually have predefined components and icons that are relevant to certain libraries and frameworks that you are using in your codebase. For example, for teams that are using the [ShadCN](https://ui.shadcn.com/) component library with their React project, there is [an available Figma plugin](https://www.figma.com/community/plugin/1280731237276040017/design-with-shadcn-ui-plugin) that already predefined the ShadCN components and icons for you to use in your Figma canvas. This not only helps save time but also ensures that your Figma design and your code will look the exact same. +Extern plugin extensions are available in Figma to make your life easier and should definitely be taken advantage of. Plugin extensions are created by other community members and will usually have predefined components and icons that are relevant to certain libraries and frameworks that you are using in your own codebase. + +For example, those that are using the [ShadCN](https://ui.shadcn.com/) component library with their React project can benefit from [an available ShadCN Figma plugin](https://www.figma.com/community/plugin/1280731237276040017/design-with-shadcn-ui-plugin). This plugin has already predefined all ShadCN components and icons for users to integrate into their Figma canvas. Using these plugins will not only help save time but also ensure that your Figma design and your code looks exactly the same. You can find a database of available plugins at [this Figma resource](https://www.figma.com/community/plugins). 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 123/195] 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 124/195] 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 125/195] 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 126/195] 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 127/195] 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 75ba6c2f54bbca7fe6fa1a1a9ebb53db4705dd14 Mon Sep 17 00:00:00 2001 From: Jasper Mai Date: Wed, 22 Nov 2023 23:02:41 -0500 Subject: [PATCH 128/195] added iOS comments --- Topics/User_Experience.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Topics/User_Experience.md b/Topics/User_Experience.md index 58a0e842d..3005ef356 100644 --- a/Topics/User_Experience.md +++ b/Topics/User_Experience.md @@ -213,9 +213,11 @@ On a related note, Figma allows for the options of Effect styling and Grid styli Within Figma, you can define individual components, as explained in detail in [this official Figma article](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma). In essence, Figma components work similarly to React components; components are reusable and modifying the characteristics of a component will modify every instance of the same component. Using these in your design can be especially helpful to create a good understanding for which components can/should be reusable in your actual codebase. +Tip: if you are developing on iOS/iPadOS, there is a very helpful Apple plugin for making relevant mockups that can be found [here](https://www.figma.com/community/file/1248375255495415511). + **Plugin Extensions** -Extern plugin extensions are available in Figma to make your life easier and should definitely be taken advantage of. Plugin extensions are created by other community members and will usually have predefined components and icons that are relevant to certain libraries and frameworks that you are using in your own codebase. +External plugin extensions are available in Figma to make your life easier and should definitely be taken advantage of. Plugin extensions are created by other community members and will usually have predefined components and icons that are relevant to certain libraries and frameworks that you are using in your own codebase. For example, those that are using the [ShadCN](https://ui.shadcn.com/) component library with their React project can benefit from [an available ShadCN Figma plugin](https://www.figma.com/community/plugin/1280731237276040017/design-with-shadcn-ui-plugin). This plugin has already predefined all ShadCN components and icons for users to integrate into their Figma canvas. Using these plugins will not only help save time but also ensure that your Figma design and your code looks exactly the same. From 8a5a574736230f2ba50644602cbe8bc94e5fde05 Mon Sep 17 00:00:00 2001 From: Jasper Mai Date: Wed, 22 Nov 2023 23:16:08 -0500 Subject: [PATCH 129/195] minor tweaks --- Topics/User_Experience.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/User_Experience.md b/Topics/User_Experience.md index 3005ef356..7091b8ef6 100644 --- a/Topics/User_Experience.md +++ b/Topics/User_Experience.md @@ -219,7 +219,7 @@ Tip: if you are developing on iOS/iPadOS, there is a very helpful Apple plugin f External plugin extensions are available in Figma to make your life easier and should definitely be taken advantage of. Plugin extensions are created by other community members and will usually have predefined components and icons that are relevant to certain libraries and frameworks that you are using in your own codebase. -For example, those that are using the [ShadCN](https://ui.shadcn.com/) component library with their React project can benefit from [an available ShadCN Figma plugin](https://www.figma.com/community/plugin/1280731237276040017/design-with-shadcn-ui-plugin). This plugin has already predefined all ShadCN components and icons for users to integrate into their Figma canvas. Using these plugins will not only help save time but also ensure that your Figma design and your code looks exactly the same. +For example, those that are using the [ShadCN](https://ui.shadcn.com/) component library with their React project can benefit from an existing [ShadCN Figma plugin](https://www.figma.com/community/plugin/1280731237276040017/design-with-shadcn-ui-plugin). This plugin has already predefined all ShadCN components and icons for users to integrate into their Figma canvas. Using these plugins will not only help save time but also ensure that your Figma design and your code looks exactly the same. You can find a database of available plugins at [this Figma resource](https://www.figma.com/community/plugins). From 8f40226bf73f9f13d9025b593b8054f45a65a874 Mon Sep 17 00:00:00 2001 From: Jasper Mai Date: Thu, 23 Nov 2023 00:20:12 -0500 Subject: [PATCH 130/195] Making a minor change to reflect an overlooked comment in the previous PR --- Topics/User_Experience.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/User_Experience.md b/Topics/User_Experience.md index 7091b8ef6..2d41eb449 100644 --- a/Topics/User_Experience.md +++ b/Topics/User_Experience.md @@ -213,7 +213,7 @@ On a related note, Figma allows for the options of Effect styling and Grid styli Within Figma, you can define individual components, as explained in detail in [this official Figma article](https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma). In essence, Figma components work similarly to React components; components are reusable and modifying the characteristics of a component will modify every instance of the same component. Using these in your design can be especially helpful to create a good understanding for which components can/should be reusable in your actual codebase. -Tip: if you are developing on iOS/iPadOS, there is a very helpful Apple plugin for making relevant mockups that can be found [here](https://www.figma.com/community/file/1248375255495415511). +Tip: if you are designing for iOS/iPadOS, there is a very helpful Figma library with components styled with Apple's UI standards [here](https://www.figma.com/community/file/1248375255495415511). **Plugin Extensions** From 990f85e0629ffca20f68eb0a5d14a3ce34594e22 Mon Sep 17 00:00:00 2001 From: bw55555 Date: Thu, 23 Nov 2023 15:17:35 +0000 Subject: [PATCH 131/195] 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 132/195] 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 133/195] 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 27b997209b319f9b5866e14471971ae35774ac7e Mon Sep 17 00:00:00 2001 From: Sarah Chung <60327675+sarahhjchung@users.noreply.github.com> Date: Thu, 23 Nov 2023 14:47:13 -0500 Subject: [PATCH 134/195] Introduction to shadcn/ui components (#159) * Create layout of the doc * Draft introduction * Draft installation section * Edit installation section * Draft creating and customizing components section * Clean up page * Address PR comments * Address minor suggestions --- Topics/Tech_Stacks/Shadcn.md | 180 +++++++++++++++++++++++++++++++++++ 1 file changed, 180 insertions(+) create mode 100644 Topics/Tech_Stacks/Shadcn.md diff --git a/Topics/Tech_Stacks/Shadcn.md b/Topics/Tech_Stacks/Shadcn.md new file mode 100644 index 000000000..aeb67922c --- /dev/null +++ b/Topics/Tech_Stacks/Shadcn.md @@ -0,0 +1,180 @@ +# Using shadcn/ui + +## Table of Contents + +#### [Introduction](#introduction-1) + +#### [Installation](#installation-1) + +#### [Example: Creating and Customizing a Button Component](#example-creating-and-customizing-a-button-component-1) + +#### [Resources](#resources-1) + +## Introduction + +### What is shadcn/ui? + +[Shadcn/ui](https://ui.shadcn.com/) is a component library that gives you the ability to use re-usable components that are built using [Radix UI](https://www.radix-ui.com/) and [Tailwind CSS](https://tailwindcss.com/). You are able to choose from their collection of pre-built components, add the code into your project, and then customize them using cva variants. + +### Why use shadcn/ui? + +Shadcn/ui helps you separate the design of your components from the implementation. This way, using shadcn/ui is a very modular and easy process. Additionally, there is no requirement to install any package; you only need to install the specific components you'd like to use. + +### What to Expect + +This document will go over how to install and integrate shadcn/ui into your project. Then, it will go through an example of building a `Button` component into your project and talk through the details in customizing it. + +## Installation + +You can use shadcn/ui components in any framework that supports React. Typescript is recommended for your projects but Javascript components are also available by making changes to your configurations. + +Follow any of the links below depending on the framework you are using for your project: + +- [Next.js](https://ui.shadcn.com/docs/installation/next) +- [Vite](https://ui.shadcn.com/docs/installation/vite) +- [Remix](https://ui.shadcn.com/docs/installation/remix) +- [Gatsby](https://ui.shadcn.com/docs/installation/gatsby) +- [Astro](https://ui.shadcn.com/docs/installation/astro) +- [Laravel](https://ui.shadcn.com/docs/installation/laravel) + +If you want to manually install shadcn/ui, follow this [tutorial](https://ui.shadcn.com/docs/installation/manual). + +## Example: Creating and Customizing a Button Component + + + +In this example, we will walk through the steps to install, use, and customize a `Button` component in your own project: + +1. **Installation:** Add the `Button` component to your project + + ```bash + # npm + npx shadcn-ui@latest add button + + # yarn + npx shadcn-ui@latest add button + + # pnpm + pnpm dlx shadcn-ui@latest add button + + # bun + bunx --bun shadcn-ui@latest add button + ``` + + This will add a `button.tsx` file into `components/ui`. + + #### button.tsx + + ```Typescript + import * as React from "react" + import { Slot } from "@radix-ui/react-slot" + import { cva, type VariantProps } from "class-variance-authority" + + import { cn } from "@/lib/utils" + + const buttonVariants = cva( + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: + "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + }, + size: { + default: "h-10 px-4 py-2", + sm: "h-9 rounded-md px-3", + lg: "h-11 rounded-md px-8", + icon: "h-10 w-10", + }, + }, + defaultVariants: { + variant: "default", + size: "default", + }, + } + ) + + export interface ButtonProps + extends React.ButtonHTMLAttributes, + VariantProps { + asChild?: boolean + } + + const Button = React.forwardRef( + ({ className, variant, size, asChild = false, ...props }, ref) => { + const Comp = asChild ? Slot : "button" + return ( + + ) + } + ) + Button.displayName = "Button" + + export { Button, buttonVariants } + + ``` + +2. **Usage:** Import the `Button` component in your project wherever you need to use it. + + ```Typescript + import { Button } from "@/components/ui/button" + ``` + +3. **Customization:** Add the imported component in your project. Edit the generated [button.tsx](#buttontsx) file and use `buttonVariants` to customize your button component. + + #### Customizing Using Variants + + The variants in your generated [button.tsx](#buttontsx) file can be used to have different styles for a Button component. See [examples](https://ui.shadcn.com/docs/components/button#examples) of how to use the different variants to style your component. + + Additionally, you can make changes to the default variants with Tailwind to fit your project's theme. You can also rename the variants or add your own variants to create more customization in your component. See below for an example of adding a new variant: + + ```Typescript + // Customize your button.tsx file + variant: { + default: "bg-primary text-primary-foreground hover:bg-primary/90", + destructive: + "bg-destructive text-destructive-foreground hover:bg-destructive/90", + outline: + "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + secondary: + "bg-secondary text-secondary-foreground hover:bg-secondary/80", + ghost: "hover:bg-accent hover:text-accent-foreground", + link: "text-primary underline-offset-4 hover:underline", + // Your new variant! + dark: "bg-foreground text-background font-bold hover:bg-background hover:text-foreground hover:border" + }, + ``` + + ```Typescript + // Use your new variant in your Button component + export function ButtonDark() { + return + } + ``` + + #### Customizing the Size + + Sizing of the component can be customized to easily create responsive designs. Similar to variants, you can customize different sizes (by editing generated sizes or adding new sizes) in [button.tsx](#buttontsx) and use them in your project: + + ```Typescript + export function ButtonLarge() { + return + } + ``` + +## Resources + +See the shadcn/ui [documentation](https://ui.shadcn.com/docs/components/accordion) to see all the components that are available to use in your project. + +Shadcn/ui uses CVA to introduce variants. See the [CVA documentation](https://cva.style/docs) to learn more about class variance authority. From 0eaaab635837da123638b52f52421bb0b951501a Mon Sep 17 00:00:00 2001 From: Azalea Date: Thu, 23 Nov 2023 13:06:03 -0800 Subject: [PATCH 135/195] [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 136/195] [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 137/195] 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 `