From 24d5dacc9f6b21b507ce944a54077900f674a344 Mon Sep 17 00:00:00 2001 From: David Lin Date: Wed, 15 Nov 2023 09:07:23 -0500 Subject: [PATCH 001/143] 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 002/143] 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 003/143] 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 46a2019df34a186fc32c6261fd3f00eff56e8185 Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Wed, 15 Nov 2023 19:05:32 -0500 Subject: [PATCH 004/143] initial commit --- Topics/Tech_Stacks/JSONRPC.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 Topics/Tech_Stacks/JSONRPC.md diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md new file mode 100644 index 000000000..21411c169 --- /dev/null +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -0,0 +1,5 @@ +# JSON-RPC + +## Introduction +JSON-RPC is a remote procedure call protocol encoded in JSON. Like REST, it is used for API calls, but there are also differences. JSON-RPC focuses on remote procedure calls whereas the more popular REST is more focused on resource manipulation. JSON RPC +has better security because the procedure is masked, so the only thing that is exposed is the endpoints. \ No newline at end of file From db0e32457b2070ebe777c056a4ee7fd3be04d3a1 Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Wed, 15 Nov 2023 19:05:57 -0500 Subject: [PATCH 005/143] initial commit --- Topics/Tech_Stacks/JSONRPC.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index 21411c169..650f7e6a5 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -2,4 +2,5 @@ ## Introduction JSON-RPC is a remote procedure call protocol encoded in JSON. Like REST, it is used for API calls, but there are also differences. JSON-RPC focuses on remote procedure calls whereas the more popular REST is more focused on resource manipulation. JSON RPC -has better security because the procedure is masked, so the only thing that is exposed is the endpoints. \ No newline at end of file +has better security because the procedure is masked, so the only thing that is exposed is the endpoints and the parameters +used to call them. \ No newline at end of file From c5c1ebd3c5a711cfd8653b19b098e88ac0d26116 Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Wed, 15 Nov 2023 19:12:57 -0500 Subject: [PATCH 006/143] commit --- Topics/Tech_Stacks/JSONRPC.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index 650f7e6a5..c80a00944 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -2,5 +2,4 @@ ## Introduction JSON-RPC is a remote procedure call protocol encoded in JSON. Like REST, it is used for API calls, but there are also differences. JSON-RPC focuses on remote procedure calls whereas the more popular REST is more focused on resource manipulation. JSON RPC -has better security because the procedure is masked, so the only thing that is exposed is the endpoints and the parameters -used to call them. \ No newline at end of file +has better security but also puts the user more in the dark because the procedure is masked, so the only thing that is exposed is the endpoints and the parameters used to call them. REST is generally easier to implement through being able to control information like HTTP headers and representation. Client implementations do not have to rely on endpoint names but message formats instead. JSON RPC is generally more complicated and more useful for large application that go past simple CRUD applicatons, where REST would be the simpler choice. \ No newline at end of file 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 007/143] 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 008/143] 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 009/143] 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 010/143] 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 5346ff75b0c5a35956dc5ef97248bec30505b630 Mon Sep 17 00:00:00 2001 From: colewiltse Date: Fri, 17 Nov 2023 12:20:55 -0500 Subject: [PATCH 011/143] Adding first version of A2 class wiki contribution. --- Topics/Tech_Stacks/HTML_Guide | 75 +++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 Topics/Tech_Stacks/HTML_Guide diff --git a/Topics/Tech_Stacks/HTML_Guide b/Topics/Tech_Stacks/HTML_Guide new file mode 100644 index 000000000..33f32d132 --- /dev/null +++ b/Topics/Tech_Stacks/HTML_Guide @@ -0,0 +1,75 @@ +# HTML Guide + +## Table of contents +### [Introduction](#introduction-1) +### [Syntax](#syntax-1) +### [Elements](#elements-1) +### [Writing HTML Files](#writing-html-files-1) + +## Introduction + +HTML is the standard coding language used to help display nearly all websites on the internet. This guide will go over the basics of html and some of the most common tags used, as well as provide resources for writing and displaying your own html files. + +For a more in-depth tutorial, please consult this guide from [W3Schools](https://www.w3schools.com/html/default.asp). There you will find interactive exercises and guides that go through nearly all aspects of HTML. + +## Syntax + +HTML files are made up of elements. These elements are the building blocks of websites and determine what you see when you visit a website. + +Below is the general syntax for an element. + + + + +[Image source](https://www.coderdojotc.org/web-ux/intro-to-html/01a-elements-and-attributes/) + +The first key word after the first angled bracket determines the type of tag the element uses. Within the first set of angled brackets are attributes that give further specification to the element. Between the start and end tag is the element value, typically the text you see on the actual web page. Lastly, the end tag signals the end of the element. + + +## Elements + +There are two major types of elements: regular and void elements. + +### Void + +These elements are standalone and do not contain any nested elements. They also only contain a start tag with no end tag and no element value. + +For example: `` + +### Regular + +These elements have a start and an end tag with an element value. They may also contain nested elements inside them. The nested elements can either be regular or void elements. + +For example: `

My first paragraph!

` + + +Below are some of the most common tags you might use in your websites: + +- `

` : A standard paragraph. + +- `

` : A standard heading. Note that h1 is the largest size and h6 is the smallest. + +- ` ` : A standard hyperlink. Note that href is a mandatory attribute for this tag. + +- `
` : A container for other elements. Note that this element is block level, meaning that it goes to a new line whenever used in a html file. + +- ` ` : A container for other elements, similar to div. The only difference is that it is an inline element, meaning it stays on the same line as the previous element defined. + +- `` : An image to be inserted in the website. Note that this is a void element and therefore cannot have nested elements. Furthermore, the attribute src is mandatory for this tag. + +For a full list of all the various tags used in html, click [here](https://www.w3schools.com/tags/default.asp). + +## Writing HTML Files + +One of the best ways to write and test your html files is using vs code. There, you can install the extension [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server). This will allow you to write and see your website in real time. + +If you don’t have vscode, you can write your html in any text editor you have installed on your machine. You can then save the file as an html file and then open it to view in your browser. + +If you only want to write a basic site without any setup, you can use this online website generator linked [here](https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro). + + +## CSS + +In order to style your websites and make them look appealing, you would need to use css files, or cascade style sheets. These will take your websites and add styling according to the rules set up in your specific css file linked to in your html file. For further information, check out the guide on css in this repository or check out this in depth tutorial from [W3Schools](https://www.w3schools.com/css/default.asp). + + 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 012/143] 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 013/143] 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 014/143] 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 015/143] 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 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 016/143] 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 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 017/143] 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 018/143] Delete Topics/Tech_Stacks/Salesforce_Social_Login.md Deleted this page as the information was moved over to the existing Salesforce page. --- Topics/Tech_Stacks/Salesforce_Social_Login.md | 18 ------------------ 1 file changed, 18 deletions(-) delete mode 100644 Topics/Tech_Stacks/Salesforce_Social_Login.md diff --git a/Topics/Tech_Stacks/Salesforce_Social_Login.md b/Topics/Tech_Stacks/Salesforce_Social_Login.md deleted file mode 100644 index 0bab9dafe..000000000 --- a/Topics/Tech_Stacks/Salesforce_Social_Login.md +++ /dev/null @@ -1,18 +0,0 @@ -# Set up -- There are many different libraries and frameworks you can use for social logins. For Django there is all-auth, for example. This guide will assume you have already chosen a framework/library and have set it up correctly on your side. -- After logging into Salesforce, in the top right corner, click on the gear icon and go to the SetUp page. -- Search "App" on the left hand searchbar in the Setup menu, and go to App Manager. -- Click on "New Connected App". -- Put in your details like Connected App Name, Email, etc. -- Enable Oauth Settings -- Provide your callback URI. The callback URI is the link Salesforce will redirect users to after users have successfully logged in. It needs to be HTTPS secure. -- Provide your scopes. Full Access is recommended for initial developmental purposes, but should be restricted down to only the necessary scopes in the future. (api), (openid), and (refresh_token) are the minimal scopes you may want. -- The OAuth settings are very customisable. This guide recommends disabling PKCE if you are in a time crunch as it adds another layer of complexity to the social login. -- Select configure ID token. In the ID Token Audiences, put in the domain of where your deployed app is hosted. -- Below are examples of what a basic conencted app might look like: - -Screen Shot 2023-11-18 at 9 10 40 AM - -Screen Shot 2023-11-18 at 9 06 36 AM - -After creating the Connected App, navigate to your app Manage Connected Apps. You will see an option to get Consumer Key and Secret, which you can inject into your project. Now users can log into your application with their Salesforce credentials, and you can API calls to Salesforce by sending the access token you receive from Salesforce after successful user login in the credentials of the API request. From f73c6be9d21fcb3fed965f82be07a33560c50d33 Mon Sep 17 00:00:00 2001 From: Min Gi Kwon <64427415+MinGi-K@users.noreply.github.com> Date: Sat, 18 Nov 2023 13:54:56 -0500 Subject: [PATCH 019/143] 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 020/143] 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 021/143] 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 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 022/143] 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 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 023/143] 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 024/143] 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 025/143] 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 026/143] 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 027/143] 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 028/143] 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 029/143] 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 030/143] 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 031/143] 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 032/143] 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 f74187666b01a5ed57e1d5c4b08f401908796db4 Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Sun, 19 Nov 2023 22:25:05 -0500 Subject: [PATCH 033/143] adding more context for JSON-RPC --- Topics/Tech_Stacks.md | 1 + Topics/Tech_Stacks/JSONRPC.md | 12 +++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index dfd16e46e..5e23a3a20 100644 --- a/Topics/Tech_Stacks.md +++ b/Topics/Tech_Stacks.md @@ -12,3 +12,4 @@ ### [Learning TypeScript](./Tech_Stacks/TypeScript.md) ### [Learning JavaScript](./Tech_Stacks/JavaScript.md) ### [Learning React Native](./Tech_Stacks/ReactNative.md) +### [Learning JSON-RPC](./Tech_Stacks/JSONRPC.md) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index c80a00944..6b2acfb20 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -1,5 +1,11 @@ -# JSON-RPC +### JSON-RPC ## Introduction -JSON-RPC is a remote procedure call protocol encoded in JSON. Like REST, it is used for API calls, but there are also differences. JSON-RPC focuses on remote procedure calls whereas the more popular REST is more focused on resource manipulation. JSON RPC -has better security but also puts the user more in the dark because the procedure is masked, so the only thing that is exposed is the endpoints and the parameters used to call them. REST is generally easier to implement through being able to control information like HTTP headers and representation. Client implementations do not have to rely on endpoint names but message formats instead. JSON RPC is generally more complicated and more useful for large application that go past simple CRUD applicatons, where REST would be the simpler choice. \ No newline at end of file +JSON-RPC is a an approach to building APIs for communication between different software systems. The most common approach is REST, but JSON-RPC offers its own advantages. Like REST, JSON-RPC uses JSON for its data format and uses HTTP as a transport protocol. JSON-RPC focuses on remote procedure calls whereas the more popular REST is more focused on resource manipulation. REST is generally easier to implement through being able to control information like HTTP headers and representation. Client implementations do not have to rely on endpoint names but message formats instead. JSON RPC is generally more complicated and more useful for large application that go past simple CRUD applicatons, where REST would be the simpler choice. + +JSONRPC calls are represented by sending request objects to a server. These request objects contain the method to be called, parameters values that are passed into the method, an id that established by the client, and jsonrpc string that specifies the version of the JSON-RPC protocol. + +The response object contains a result, which contains the correct value when the method results in a success, an error in cases where the method throws an error, and a jsonrpc string and id that are identical to the one in the request object. + +Here is some basic documentation on JSON-RPC https://www.jsonrpc.org/specification + From bea5672cfef7e98c861d58dac98c25bf6d28b603 Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Sun, 19 Nov 2023 22:35:17 -0500 Subject: [PATCH 034/143] explaining benefis of jsonrpc --- Topics/Tech_Stacks/JSONRPC.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index 6b2acfb20..eea8cfe5d 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -7,5 +7,7 @@ JSONRPC calls are represented by sending request objects to a server. These requ The response object contains a result, which contains the correct value when the method results in a success, an error in cases where the method throws an error, and a jsonrpc string and id that are identical to the one in the request object. +JSONRPC is very useful for a variety of reasons. It is simple and very straight forward due to its stsandard of remote procedure calls, making it easy to implement and understand. In addition, it serializes data in JSON format and is able to be implemented in a variety of languages, making it flexible. + Here is some basic documentation on JSON-RPC https://www.jsonrpc.org/specification From 37dfe8731e6223f5ba54a57d1e731177def2bf3f Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Sun, 19 Nov 2023 22:50:04 -0500 Subject: [PATCH 035/143] wip --- Topics/Tech_Stacks/JSONRPC.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index eea8cfe5d..242233e8e 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -1,7 +1,11 @@ ### JSON-RPC ## Introduction -JSON-RPC is a an approach to building APIs for communication between different software systems. The most common approach is REST, but JSON-RPC offers its own advantages. Like REST, JSON-RPC uses JSON for its data format and uses HTTP as a transport protocol. JSON-RPC focuses on remote procedure calls whereas the more popular REST is more focused on resource manipulation. REST is generally easier to implement through being able to control information like HTTP headers and representation. Client implementations do not have to rely on endpoint names but message formats instead. JSON RPC is generally more complicated and more useful for large application that go past simple CRUD applicatons, where REST would be the simpler choice. +JSON-RPC is a an approach to building APIs for communication between different software systems. The most common way of developing APIs is utilizing REST, but JSON-RPC offers its own advantages. Like REST, JSON-RPC uses JSON for its data format and uses HTTP as a transport protocol. JSON-RPC focuses on remote procedure calls whereas the more popular REST is more focused on resource manipulation. + +This makes it so JSON-RPC is a better option in scenarios where actions take place on a remote system. For example, a good time to JSON-RPC is transfering money between bank account on a remote system. + +REST is generally more useful in situations where actions such such as adding data to databases or updating information are needed due to its ability to easily perform CRUD operations. JSONRPC calls are represented by sending request objects to a server. These request objects contain the method to be called, parameters values that are passed into the method, an id that established by the client, and jsonrpc string that specifies the version of the JSON-RPC protocol. @@ -11,3 +15,4 @@ JSONRPC is very useful for a variety of reasons. It is simple and very straight Here is some basic documentation on JSON-RPC https://www.jsonrpc.org/specification +Read more about the differences between remote procedure calls and rest here https://aws.amazon.com/compare/the-difference-between-rpc-and-rest/ From 05ab6fbb097202ecb15e97079c6745eb8079ecd3 Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Sun, 19 Nov 2023 22:52:30 -0500 Subject: [PATCH 036/143] more info --- Topics/Tech_Stacks/JSONRPC.md | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index 242233e8e..e485f892f 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -7,11 +7,16 @@ This makes it so JSON-RPC is a better option in scenarios where actions take pla REST is generally more useful in situations where actions such such as adding data to databases or updating information are needed due to its ability to easily perform CRUD operations. + +#### Request and Repsonse of JSON-RPC Calls + +JSON-RPC calls require two things, which are called request objects and response objects. Request objects are what are send to the server during a JSON-RPC method call, and the response object is what is expected as output at the end of the method call. + JSONRPC calls are represented by sending request objects to a server. These request objects contain the method to be called, parameters values that are passed into the method, an id that established by the client, and jsonrpc string that specifies the version of the JSON-RPC protocol. The response object contains a result, which contains the correct value when the method results in a success, an error in cases where the method throws an error, and a jsonrpc string and id that are identical to the one in the request object. -JSONRPC is very useful for a variety of reasons. It is simple and very straight forward due to its stsandard of remote procedure calls, making it easy to implement and understand. In addition, it serializes data in JSON format and is able to be implemented in a variety of languages, making it flexible. +JSONRPC is very useful for a variety of reasons. It is simple and very straight forward due to its standard of remote procedure calls, making it easy to implement and understand. In addition, it serializes data in JSON format and is able to be implemented in a variety of languages, making it flexible. Here is some basic documentation on JSON-RPC https://www.jsonrpc.org/specification From 679f897454f5e3d165e32f5d812968897763dbc3 Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Sun, 19 Nov 2023 23:08:51 -0500 Subject: [PATCH 037/143] change link --- Topics/Tech_Stacks/JSONRPC.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index e485f892f..36b0f0815 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -1,16 +1,16 @@ ### JSON-RPC ## Introduction -JSON-RPC is a an approach to building APIs for communication between different software systems. The most common way of developing APIs is utilizing REST, but JSON-RPC offers its own advantages. Like REST, JSON-RPC uses JSON for its data format and uses HTTP as a transport protocol. JSON-RPC focuses on remote procedure calls whereas the more popular REST is more focused on resource manipulation. +JSON-RPC is a an approach to building APIs for communication between different software systems. Let's compare it to REST, which is the most common way of developing APIs. JSON-RPC is not as popular, but it offers its own advantages. Like REST, JSON-RPC uses JSON for its data format and uses HTTP as a transport protocol. JSON-RPC focuses on remote procedure calls whereas the more popular REST is more focused on resource manipulation. -This makes it so JSON-RPC is a better option in scenarios where actions take place on a remote system. For example, a good time to JSON-RPC is transfering money between bank account on a remote system. +This makes it so JSON-RPC is a better option in scenarios where remote functions have to be called on a server that require an action result. It's most useful for when complex calculations or calling remote procedures on the server are needed. For example, a good time to JSON-RPC is transfering money between bank account on a remote system. -REST is generally more useful in situations where actions such such as adding data to databases or updating information are needed due to its ability to easily perform CRUD operations. +REST is generally more useful in situations where actions such as adding data to databases or updating information are needed due to its ability to easily perform CRUD operations. #### Request and Repsonse of JSON-RPC Calls -JSON-RPC calls require two things, which are called request objects and response objects. Request objects are what are send to the server during a JSON-RPC method call, and the response object is what is expected as output at the end of the method call. +JSON-RPC calls require two things, which are called request objects and response objects. Request objects are what are sent to the server during a JSON-RPC method call, and the response objects are what the server responds with at the end of the method call. JSONRPC calls are represented by sending request objects to a server. These request objects contain the method to be called, parameters values that are passed into the method, an id that established by the client, and jsonrpc string that specifies the version of the JSON-RPC protocol. @@ -20,4 +20,4 @@ JSONRPC is very useful for a variety of reasons. It is simple and very straight Here is some basic documentation on JSON-RPC https://www.jsonrpc.org/specification -Read more about the differences between remote procedure calls and rest here https://aws.amazon.com/compare/the-difference-between-rpc-and-rest/ +Read more about the differences between remote procedure calls and rest here https://nordicapis.com/whats-the-difference-between-rpc-and-rest/ From a4e8cc0af5b9d1954c8eb424c14f2bd03b05a43d Mon Sep 17 00:00:00 2001 From: alexma22 Date: Sun, 19 Nov 2023 23:10:46 -0500 Subject: [PATCH 038/143] 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 e5384f6faaa269bfce1d6d144202a8f5b7fb1514 Mon Sep 17 00:00:00 2001 From: ayanaarahman Date: Mon, 20 Nov 2023 00:52:28 -0500 Subject: [PATCH 039/143] Create 'Localization in Software Engineering' guide and add its link to 'Core Concepts' in Resources page --- Topics/Software_Engineering.md | 4 +- Topics/Software_Engineering/Localization.md | 67 +++++++++++++++++++++ 2 files changed, 70 insertions(+), 1 deletion(-) create mode 100644 Topics/Software_Engineering/Localization.md diff --git a/Topics/Software_Engineering.md b/Topics/Software_Engineering.md index 85f0aaed1..c816f2940 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) +2. Core Concepts in Software Engineering + 1. [Localization in Software Engineering](./Software_Engineering/Localization.md) \ No newline at end of file diff --git a/Topics/Software_Engineering/Localization.md b/Topics/Software_Engineering/Localization.md new file mode 100644 index 000000000..d6735fe6d --- /dev/null +++ b/Topics/Software_Engineering/Localization.md @@ -0,0 +1,67 @@ +# Localization in Software Engineering + +## Introduction + +Localization in software engineering, often abbreviated as l10n, is the process of adapting software to different languages, regions, and cultures. It's an extension of internationalization (i18n), which involves designing software with the future goal of localization. + +## Table of Contents +1. [What is Software Localization?](#1-what-is-software-localization) +2. [Importance of Localization](#2-importance-of-localization) +3. [Steps in the Localization Process](#3-steps-in-the-localization-process) +4. [Key Technical Aspects of Localization](#4-key-technical-aspects-of-localization) +5. [Best Practices for Software Localization](#5-best-practices-for-software-localization) +6. [Tools and Resources](#6-tools-and-resources) +7. [Conclusion](#7-conclusion) +8. [Additional Information](#8-additional-information) + +## 1. What is Software Localization? + +Localization is not just about the translation of a product's user interface. It involves adapting the software's design and functionality to accommodate different languages, cultural norms, and legal requirements. Key aspects include language translation, handling of cultural nuances, currency conversions, date and time formatting, and legal compliance. + +## 2. Importance of Localization + +In our increasingly globalized world, localization is crucial for reaching a broader audience and ensuring that software is accessible and relevant across different regions. It helps in: +- Enhancing user experience for a global audience +- Meeting legal and cultural requirements in different regions +- Expanding the market reach of the software + +## 3. Steps in the Localization Process + +The localization process typically involves the following steps: +- **Internationalization**: Refactoring the software to support localization, such as enabling support for Unicode, and separating content from code. +- **Translation**: Converting text and content into the target language, often involving professional translators. +- **Cultural Adaptation**: Adjusting content to suit cultural preferences and sensitivities. +- **Technical Adaptation**: Adapting software formats for dates, times, currencies, etc., to local norms. +- **Testing**: Rigorously testing the software to ensure that it functions correctly in each localized version. + +## 4. Key Technical Aspects of Localization + +Key technical aspects of localization include: +- **Translatable UI Elements**: Separating translatable content from the code. +- **Text Length Variations**: Accounting for language-specific text length differences. +- **Number and Currency Formats**: Adapting to local conventions. +- **Date and Time Formats**: Accommodating regional variations. +- **Character Encoding**: Supporting various scripts, including non-Latin ones. +- **Language Direction**: Designing for languages that read from right to left. + +## 5. Best Practices for Software Localization + +- **Plan Ahead for Internationalization**: Ensure that the software is designed from the ground up with internationalization in mind. +- **Use Unicode for Character Encoding**: Unicode supports characters from most of the world’s writing systems. +- **Externalize Localizable Content**: Store text and other localizable elements outside of the source code. +- **Automate and Standardize**: Use localization tools and platforms to automate repetitive tasks and maintain consistency. +- **Engage Local Experts**: Work with local language and culture experts for accurate translations and cultural adaptations. + + +## 6. Tools and Resources + +- **Localization Platforms**: Tools like [Crowdin](https://crowdin.com/) and [Lokalise](https://lokalise.com/) help manage and automate the localization process. +- **Translation Services**: Professional services like [Smartling](https://www.smartling.com/) or [Mother Tongue](https://mothertongue.com/solutions/translation) provide accurate translations. + +## 7. Conclusion + +Localization is a vital process in software engineering, especially in a global market. By understanding and implementing localization best practices, software developers can create products that resonate with users worldwide, regardless of their language or cultural background. + +## 8. Additional Information +- [Complete Guide to Software Localization](https://phrase.com/blog/posts/software-localization/) +- [Additional Details about Localization](https://developer.mozilla.org/en-US/docs/Glossary/Localization) \ No newline at end of file From f3eb2fd6ca80f7929b2f8ec7fe0dac54c6b49c9d Mon Sep 17 00:00:00 2001 From: alyson647 Date: Mon, 20 Nov 2023 10:26:04 -0500 Subject: [PATCH 040/143] 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 f01cd4075db528693cc9dc6d8fb5cf6e1113c079 Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Mon, 20 Nov 2023 15:23:10 -0500 Subject: [PATCH 041/143] add more info --- Topics/Tech_Stacks/JSONRPC.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index 36b0f0815..d62f757b1 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -21,3 +21,5 @@ JSONRPC is very useful for a variety of reasons. It is simple and very straight Here is some basic documentation on JSON-RPC https://www.jsonrpc.org/specification Read more about the differences between remote procedure calls and rest here https://nordicapis.com/whats-the-difference-between-rpc-and-rest/ + +Here is an example of how to set up JSON-RPC using TypeScript and guide on how to install it using npm. https://www.npmjs.com/package/json-rpc-2.0 \ No newline at end of file From 95329c33a7cb08885944de90b5b6fb9ffef84f68 Mon Sep 17 00:00:00 2001 From: NonLan Date: Mon, 20 Nov 2023 19:28:32 -0500 Subject: [PATCH 042/143] 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 043/143] 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 044/143] 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 045/143] 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 046/143] 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 047/143] 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 048/143] 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 049/143] 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 050/143] 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 051/143] 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 052/143] 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 053/143] 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 1b04b8b98c05ec5bb47356120604cd52e7087104 Mon Sep 17 00:00:00 2001 From: NonLan Date: Tue, 21 Nov 2023 15:08:46 -0500 Subject: [PATCH 054/143] 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 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 055/143] 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 ef8a1c56d408708f7d4a4b3fc599ca3ffee82751 Mon Sep 17 00:00:00 2001 From: Luke Cheseldine Date: Wed, 22 Nov 2023 01:19:53 -0500 Subject: [PATCH 056/143] introduction and installation --- Topics/Development_Process/Nginx.md | 68 +++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 Topics/Development_Process/Nginx.md diff --git a/Topics/Development_Process/Nginx.md b/Topics/Development_Process/Nginx.md new file mode 100644 index 000000000..c973f108b --- /dev/null +++ b/Topics/Development_Process/Nginx.md @@ -0,0 +1,68 @@ +# What is Nginx? + +Nginx is the internet's traffic cop. Imagine you search for a website in your browser. Your request is sent accross the internet to that website's server. When the request reaches the website's server, it first has to go through Nginx. Nginx then directs your request to the correct place on the website's server, whether that might be querying a backend server like Django, fetching an image or other static content, or doing some other kind of task on the website's server. Nginx is really good at rerouting these requests really quickly, so that it can handle lots of requests at a time, keeping things moving quickly for everyone using the website. Nginx is essentially the middleman between the internet and a website. + +System Diagram With Nginx + +Nginx can do many things, like: + +1. Serve web traffic over HTTPS +2. Load balance requests between multiple backend servers +3. Serve static content without a backend server like Django or Express + +You can find a more exhaustive list on the [offical Nginx docs](https://nginx.org/en/) + +# Installation and Setup + +The installation processes varies depending upon your OS. It's most common to install Nginx on a Linux server, since this is what most of the cloud runs on. Here, we'll demonstrate how to install and setup Nginx on a cloud server running on Ubuntu 22.04. + +We assume that you have the following: + +1. A cloud server running Ubuntu 22.04 accessible from the public internet + - Digital Ocean is one of the simplest and most user friendly cloud providers. If you need help, checkout this [tutorial](https://docs.digitalocean.com/products/droplets/how-to/create/) on how to create a server on Digital Ocean! + - Make sure you can connect to your server over ssh by uploading your ssh key to the server. +2. A domain name which points to your server + - You can buy a domain and configure where it points through [NameCheap](https://www.namecheap.com/). If you need extra help, you can follow this great [YouTube tutorial](https://www.youtube.com/watch?v=95BC1b5FVps&ab_channel=codebubb) on how to point a NameCheap domain at a Digital Ocean server. + +## Connecting to your server + +In order to install Nginx on our server, we will first need to be connected to our server. Open a new terminal window and enter `ssh root@`, where `` is the IP address of your server. You should now be connected to your server. + +## Install Nginx + +On your server, run the following commands to refresh your server's package index, and install Nginx onto your server + +``` +sudo apt update +sudo apt install nginx +``` + +Now, configure your server's firewall to allow HTTP traffic via Nginx: + +``` +sudo ufw allow 'Nginx HTTP' +``` + +You can confirm HTTP traffic is now allowed with + +``` +sudo ufw status +``` + +The output should indicate that HTTP traffic is now allowed, like this: +TODO ADD OUTPUT + +When we installed Nginx with `apt`, the operating system should have started the Nginx service at the end of the installation process. We can confirm Nginx is running by entering: + +``` +systemctl status nginx +``` + +TODO ADD OUTPUT + +If we ever need to restart or stop the Nginx service, we can do so with `systemctl restart nginx` and `systemctl stop nginx`. + +Now, let's navigate to our server in the browser, and see what's there. Go to `http://yourdomain.com`, where `yourdomain.com` is the domain name you have pointed at your server. If all goes well, you should see the default Nginx landing page, letting you know that the web server is running! +![Nginx Landing Page](https://assets.digitalocean.com/articles/nginx_1604/default_page.png) + +## Set Up Nginx From f5a2bd9e54a5fab82e19344048b385b90b940a48 Mon Sep 17 00:00:00 2001 From: Luke Cheseldine <36282235+lukecheseldine@users.noreply.github.com> Date: Wed, 22 Nov 2023 01:24:16 -0500 Subject: [PATCH 057/143] images --- Topics/Development_Process/Nginx.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/Topics/Development_Process/Nginx.md b/Topics/Development_Process/Nginx.md index c973f108b..a1b87f4c0 100644 --- a/Topics/Development_Process/Nginx.md +++ b/Topics/Development_Process/Nginx.md @@ -50,7 +50,9 @@ sudo ufw status ``` The output should indicate that HTTP traffic is now allowed, like this: -TODO ADD OUTPUT + +Screenshot 2023-11-22 at 1 05 44 AM + When we installed Nginx with `apt`, the operating system should have started the Nginx service at the end of the installation process. We can confirm Nginx is running by entering: @@ -58,11 +60,13 @@ When we installed Nginx with `apt`, the operating system should have started the systemctl status nginx ``` -TODO ADD OUTPUT +Screenshot 2023-11-22 at 1 08 52 AM + If we ever need to restart or stop the Nginx service, we can do so with `systemctl restart nginx` and `systemctl stop nginx`. Now, let's navigate to our server in the browser, and see what's there. Go to `http://yourdomain.com`, where `yourdomain.com` is the domain name you have pointed at your server. If all goes well, you should see the default Nginx landing page, letting you know that the web server is running! + ![Nginx Landing Page](https://assets.digitalocean.com/articles/nginx_1604/default_page.png) ## Set Up Nginx From 5b2c52f957f1e57da054e1a49ea715cb8e09904f Mon Sep 17 00:00:00 2001 From: Luke Cheseldine <36282235+lukecheseldine@users.noreply.github.com> Date: Wed, 22 Nov 2023 01:34:15 -0500 Subject: [PATCH 058/143] next steps --- Topics/Development_Process/Nginx.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Topics/Development_Process/Nginx.md b/Topics/Development_Process/Nginx.md index a1b87f4c0..5746aadc8 100644 --- a/Topics/Development_Process/Nginx.md +++ b/Topics/Development_Process/Nginx.md @@ -69,4 +69,8 @@ Now, let's navigate to our server in the browser, and see what's there. Go to `h ![Nginx Landing Page](https://assets.digitalocean.com/articles/nginx_1604/default_page.png) -## Set Up Nginx +# Next Steps +Now that we have Nginx installed and running on our server, the possibilities are endless. Here's a few ideas: +1. To configure Nginx as a reverse proxy for an application server like Django or Express, try this [tutorial](https://www.digitalocean.com/community/tutorials/how-to-configure-nginx-as-a-reverse-proxy-on-ubuntu-22-04) from Digital Ocean explaining how to reverse proxy a simple Gunicorn server. +2. To serve static content like prebuilt websites or images using Nginx, try this excellent [tutorial](https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/) from the official Nginx website on how to serve static content. +3. To secure Nginx with Let's Encrypt SSL and allow your websites to be accessed over HTTPS, try this [tutorial](https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-20-04) from Digital Ocean on how to set up secure SSL encryption with Nginx. From 4b90e22a772cb9ea64ce31649d53323a765ca381 Mon Sep 17 00:00:00 2001 From: alyson647 Date: Wed, 22 Nov 2023 15:11:24 -0500 Subject: [PATCH 059/143] 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 060/143] 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 061/143] 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 062/143] 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 063/143] 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 064/143] 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 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 065/143] 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 066/143] 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 990f85e0629ffca20f68eb0a5d14a3ce34594e22 Mon Sep 17 00:00:00 2001 From: bw55555 Date: Thu, 23 Nov 2023 15:17:35 +0000 Subject: [PATCH 067/143] 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 068/143] 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 069/143] 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 d520770c4fb46734f917f42ce7cd6ca80ffedc4e Mon Sep 17 00:00:00 2001 From: Dario Kaja <113073212+Dario1031@users.noreply.github.com> Date: Fri, 24 Nov 2023 15:27:20 -0500 Subject: [PATCH 070/143] Create clean_architecture.md Added a quick crash course guide on Clean Architecture, including its main principles, how to implement it in your projects, and its advantages/disadvantages. Also included links to helpful resources. --- .../Development_Process/clean_architecture.md | 63 +++++++++++++++++++ 1 file changed, 63 insertions(+) create mode 100644 Topics/Development_Process/clean_architecture.md diff --git a/Topics/Development_Process/clean_architecture.md b/Topics/Development_Process/clean_architecture.md new file mode 100644 index 000000000..daa7e5bbc --- /dev/null +++ b/Topics/Development_Process/clean_architecture.md @@ -0,0 +1,63 @@ +# Introduction to Clean Architecture +Clean Architecture is a software engineering ideology that involves clear separation between different levels in the codebase. +In short, the goal is to write and oraganize our code in such a way that the internal business logic is separated from the outside delivery mechanism (front-end code). +This results in cleaner and more portable code, making it an excellent choice to make projects scalable. +Robert C. Martin, also known as "Uncle Bob", is credited with coming up with the concept. +The following is a link to his book on Clean Architecture (as well as a plethora of other software engineering-related concepts): https://github.com/GunterMueller/Books-3/blob/master/Clean%20Architecture%20A%20Craftsman%20Guide%20to%20Software%20Structure%20and%20Design.pdf +### How does Clean Architecture work? +https://betterprogramming.pub/the-clean-architecture-beginners-guide-e4b7058c1165 + +(link to where I got the diagrams and sourced these explanations from) + +Clean Architecture splits up a project into 4 layers: +- The outermost layer, called the frameworks and drivers layer, includes software external to our code like frameworks, UI, databsases, external hardware devices etc. +- The second layer, called the interface adapter layer, contains the code that handles UI inputs. This layer can be further split up into 3 common interfaces: *Presenters* (responsible for UI and changing states), *controllers* (the interface containing functions implemeted by the frameworks/external interfaces) and *gateways* (interface responsible for interacting with the database). +- The third layer, called the application business rules layer, contains code that is not exactly the core functionality, but necessary to support all of the use cases of this application. It is in this layer that controllers, presenters and gateways are called so that the any one use case can be satisfied. +- The fourth and final layer, called the enterprise business logic layer, contains the core functionality of the program. This is the layer least prone to changes (which is why it's the inner-most layer). This layer holds *entities*, which are data structures or objects with methods required to implement the business logic (for example, this layer would hold all of the calculation logic for a calculator app). + +![image](https://github.com/Dario1031/learning-software-engineering.github.io/assets/113073212/67c5fcc5-bc93-4544-842c-b9372238199d) + +With these layers established, the next step is to make sure that all of our dependencies move inwards, that is, no functions/methods of an inner layer can be called in an outer layer. +Doing this ensures that changes made to outer layers (using a different framework, database, UI etc.) do not require extensive changes in the inner layers, making for very portable code. +The following is an example scenario to better understand how Clean Architecture works exactly: + +![image](https://github.com/Dario1031/learning-software-engineering.github.io/assets/113073212/48359d0a-8b31-43af-8571-4571554bf398) + +While this seems like a correct control flow, notice the transitions between the presenter, the use cases and then the controller. We are violating the dependency rule! Rather than having our dependencies point only downwards, half of them point up and half of them point down. How do we fix this? *Depencency inversion*. + +### Dependency Inversion +This concept is actually one of the SOLID design principles (covered in another wiki entry). In short, this principle states that we can decouple and invert violations to our dependency rule by putting an interface between the two problematic layers. In his book, Uncle Bob states: +- "High-level modules should not depend on low-level modules. Both should depend on abstractions" +- "Abstractions should not depend on details. Details should depend on abstractions" + +Classes in higher levels should use an interface implemnted by the layer below them. This way, "high level classes" (counter-intuitively, the lower layer) do not depend on "low level classes", making our code portable as desired. + +![image](https://github.com/Dario1031/learning-software-engineering.github.io/assets/113073212/5a8a2240-1594-49d9-a4d9-70cbb6d1391b) + +Moving back to our original example, we can fix the dependency violation by putting interfaces between our problematic layers, so that the higher layers use interfaces defined by the lower ones: + +![image](https://github.com/Dario1031/learning-software-engineering.github.io/assets/113073212/ce5f2c6b-e9cc-458d-859c-4705fbe46d7b) + +Dependency inversion is sometimes confusing. This video helps to alleviate that confusion in case my explanation did not fully click: https://www.youtube.com/watch?v=9oHY5TllWaU&ab_channel=WebDevSimplified + +### Advantages of Clean Architecture +Now that we covered the basics, what is the benefit of subscribing to this software engineering philosophy? +- Every layer is testable separately. As they are all separated, it is easy to test functionalities for each. +- The program is independent of frameworks. You can change to support more recent frameworks on the fly. Also applies to databases. +- UI can change as much as you want. Can be web-based, console-based, really whatever you want it to be. +- Deployment is made simple all the time as it leaves the connection of the layers as the last step in the process. + +### Disadvantages of Clean Architecture +As with everything, there can be potential downsides to Clean Architecture. It is important to explore these to make sure that it is the right system for your purposes: +- Increased overhead via multiple abstraction layers. Lots of function calls, objects created and memory allocations may lead to performance issues. +- It can be a bit confusing at times. The heavy reliance on abstraction is not easy to reason about in your head. +- Can be overkill for a smaller project that does not need to scale this well. + +That's all for my quick crash course on Clean Architecture. This is not a comprehensive guide, but rather a quick breakdown of the main principles. Feel free to leave suggestions for any new additions! + + + + + + + From c4228698b0f6170dcf498285818dec09ee01f960 Mon Sep 17 00:00:00 2001 From: Patrick Fidler <71288159+PatrickFidler@users.noreply.github.com> Date: Fri, 24 Nov 2023 17:34:39 -0500 Subject: [PATCH 071/143] Update PostgreSQL_psycopg2.md I am commiting the first version of my A2 contribution. I reworked the PostgreSQL and psycopg2 section to make it more clear on how psycopg2 worked, including how to install/run it and how to use it effectively. --- Topics/Tech_Stacks/PostgreSQL_psycopg2.md | 35 +++++++++++------------ 1 file changed, 16 insertions(+), 19 deletions(-) diff --git a/Topics/Tech_Stacks/PostgreSQL_psycopg2.md b/Topics/Tech_Stacks/PostgreSQL_psycopg2.md index 595d391c0..03b3ece32 100644 --- a/Topics/Tech_Stacks/PostgreSQL_psycopg2.md +++ b/Topics/Tech_Stacks/PostgreSQL_psycopg2.md @@ -3,8 +3,8 @@ ## Table of contents ### [Prerequisites](#prerequisites-1) ### [Introduction](#introduction-1) -### [PostgreSQL installation](#postgresql-installation-1) -### [psycopg2 installation](#psycopg2-installation-1) +### [PostgreSQL Installation](#postgresql-installation-1) +### [psycopg2 Installation](#psycopg2-installation-1) ### [Setup Database and Basic Table Operations in PostgreSQL](#setup-database-and-basic-table-operations-in-postgresql-1) ### [Setup and PostgreSQL Operations in psycopg2](#setup-and-postgresql-operations-in-psycopg2-1) ### [Additional Resources](#additional-resources-1) @@ -19,7 +19,7 @@ Before learning about PostgreSQL and psycopg2, ensure that you have knowledge ab ## Introduction PostgreSQL is an open-source DBMS. As the name states, PostgreSQL is a relational Database Management System (DBMS) based on relations and queries and is great for dealing with large amounts of data and complex queries. It's also good for referencing data quickly and allowing the user to have some flexibility in how they want to represent their data. Furthermore, PostgreSQL supports table inheritance and function overloading. -pyscopg2 is an adapter for Python that allows you to easily integrate PostgreSQL into your program. It's commonly used with other Python libraries like Flask, which allows you to use a PostgreSQL database in your application easily. +pyscopg2 is an adapter for Python that allows you to easily perform PostgreSQL operations in your Python programs. It's commonly used with other Python libraries like Flask, which collectively allow you to modify a PostgreSQL database in your application with minimal hassle. ## PostgreSQL installation The following link is to download PostgreSQL onto your computer: https://www.postgresql.org/download/ . This link also shows the different versions of PostgreSQL to match your computer. Follow the instructions after downloading. For your convenience, here are the links to download the installer for PostgreSQL on different OS: @@ -35,9 +35,8 @@ For Windows users, the user should download PostgreSQL through the link provided 1. Add the PostgreSQL bin directory path to the PATH environment variable. 2. Run the command "psql -U username" -## psycopg2 installation -To install psycopg2, you can use pip to install its functionality by using the command: -"pip install psycopg2". After installing this in your desired directory, you can import psycopg2 into your python files and perform PostgreSQL queries very intuitively. +## psycopg2 Installation +To work with psycopg2, you can use pip to install it by running `pip install psycopg2` in your console. Make sure you execute this command in the directory you will be using psycopg2. Once finished, you can import psycopg2 (`import psycopg2` at the top of the relevant Python file), and perform the desired operations. ## Setup Database and Basic Table Operations in PostgreSQL A quick and basic runover of PostgreSQL. @@ -127,21 +126,19 @@ There are many other features of PostgreSQL. Specifics of the syntax of PostgreSQL can be found in this [link](https://www.postgresql.org/docs/current/sql-syntax.html). ## Setup and PostgreSQL Operations in psycopg2 -As a quick run over, to start using PostgreSQL in a Python program, you must first set up the psycopg2 module in a Python file. +To start using PostgreSQL in a Python program with psycopg2, ensure you have finished the relevant installations, then follow the instructions below: -This can be done by: +1. Create a database in PostgreSQL. This can be done through the command line or pgAdmin. The following steps occur in your python script. +2. Import psycopg2 (see [psycopg2 Installation](#psycopg2-installation-1) above for details). +3. Connect to the new database with connect, eg. `conn = psycopg2.connect("dbname=test user=postgres")`. In this example, *test* is the name of the database that you created, and *postgres* is the default username when you install PostgreSQL. *conn* refers to the Connection (class) you have created, and can be continually referenced until you close the connection, eg. `conn.close()`. It is reccommended to close the connection when you are finished with it. +4. To use your new Connection, you must initialize a Cursor (class) with it. This will allow you to perform PostgreSQL operations on the database. Do this with `cur = conn.cursor()`, where *conn* is our previous Connection, and *cur* is our new Cursor. +5. Using the cursor, you can execute any PostgreSQL command, which will be executed on your database via the settings specified in connect() (see step 3). The PostgreSQL query `SELECT * FROM test;`, for instance, would be executed with `cur.execute("SELECT * FROM test;")`. You can make use of Python's native operations to aid you in your database operations, if you wish. Remember to **never give users direct access to the input of the execute function**. If users can insert text that directly makes its way into the input string, you may be allowing [sql injection](https://www.w3schools.com/sql/sql_injection.asp#:~:text=SQL%20injection%20is%20a%20code,statements%2C%20via%20web%20page%20input.), which could damage or destroy the contents of your database, and leak sensitive information. +6. When you have made your desired changes, use `conn.commit()` to save the changes to your database, and then close your connection with `conn.close()`. If you do not commit the changes, your work will not transfer to your database, but note that if you are only querying data and not making changes, the commit is not required. -1. Create a database in PostgreSQL. This can be done through the command line or pgAdmin. -Next, all steps are in your python script. -2. "import psycopg2" at the start of your python script. -3. Connect to the new database by running, for example: "conn = psycopg2.connect("dbname=test user=postgres")". In this example, "test" is the name of the database that you created and "postgres" is the default username when you install PostgreSQL. -4. Initialize a cursor with the connection to be able to perform PostgreSQL operations on the database. You can do this by "cur = conn.cursor()" -5. You can execute any PostgreSQL command through this cursor. For example: "cur.execute("SELECT * FROM test;")". This includes commands like creating tables using PostgreSQL syntax. -6. You can use "conn.commit()" to save the changes to your database. - -Specifics of syntax, such as passing in python variables as values in a query, and module use of psycopg2 can be found in this [link](https://www.psycopg.org/docs/usage.html#passing-parameters-to-sql-queries). The syntax that involves making queries in psycopg2 is the same as PostgreSQL. +psycopg2 can also be used for data processing, with built-in functions such as `fetchone()` and `fetchmany(x)` that return one row and x rows from a query response, respectively. From the example in step 5, after we run `cur.execute("SELECT * FROM test;")`, we can do `row = cur.fetchone()` to save the first row we selected from test to *row*. -There are good examples in the link provided. Here is a link with even more examples to aid you in using psycopg2: https://wiki.postgresql.org/wiki/Psycopg2_Tutorial +For a comprehensive collection of psycopg2 information, including all provided functions and syntax, visit the [offical documentation](https://www.psycopg.org/docs/index.html#). ## Additional Resources -- This link provides some information on how to link psycopg2 and flask: https://www.geeksforgeeks.org/making-a-flask-app-using-a-postgresql-database/ +- For further psycopg2 examples, visit this [link](https://wiki.postgresql.org/wiki/Psycopg2_Tutorial). +- For information on using psycopg2 for a flask application, visit this [article](https://www.geeksforgeeks.org/making-a-flask-app-using-a-postgresql-database/). From 7a6fdd582e53f0f8d9d173ccb912291994264b71 Mon Sep 17 00:00:00 2001 From: Jazli14 <95947726+Jazli14@users.noreply.github.com> Date: Fri, 24 Nov 2023 20:19:21 -0500 Subject: [PATCH 072/143] Update Deploy_Node.js_Docker_AWS.md Added external links that directs the reader to learn how to incorporate S3 buckets or RDS database --- .../Deploy_Node.js_Docker_AWS.md | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md b/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md index be98bf290..53ea1f85d 100644 --- a/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md +++ b/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md @@ -1,5 +1,12 @@ # Node.js Deployment through Docker and AWS +## Table of Contents +### [Overview](#overview-1) +### [Tech Stack](#tech-stack-1) +### [Deployment Process](#deployment-process-1) +### [External Links](#external-links-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. @@ -19,7 +26,6 @@ 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. @@ -104,3 +110,15 @@ Go to the EC2 Management Console and find the same EC2 instance 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 + +## External Links +Here are some extra links that will help you incorporate other AWS services with Node.js: + +Amazon S3: +* https://medium.com/codebase/using-aws-s3-buckets-in-a-nodejs-app-74da2fc547a6 +* https://www.jsowl.com/how-to-download-a-file-from-aws-s3-in-javascript-node-js/ + +Amazon RDS: +* https://medium.com/@Anas.shahwan/how-to-connect-aws-rds-mysql-nodejs-application-in-5-minutes-40d6fbf09b66 +* https://stackabuse.com/using-aws-rds-with-node-js-and-express-js/ + From 3c901ec714042bcc4e4390aaf445af7fcf09fa7a Mon Sep 17 00:00:00 2001 From: bw55555 Date: Fri, 24 Nov 2023 21:34:25 -0500 Subject: [PATCH 073/143] Update Tech_Stacks.md --- Topics/Tech_Stacks.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index 29159444a..b52785347 100644 --- a/Topics/Tech_Stacks.md +++ b/Topics/Tech_Stacks.md @@ -17,3 +17,4 @@ ### [Learning Nodemailer](./Tech_Stacks/Nodemailer.md) ### [React Components Guide](./Tech_Stacks/React_Components.md) ### [Temporal For Workflow Orchestration](./Tech_Stacks/Temporal.md) +### [Learning Cypress](./Tech_Stacks/Cypress.md) From 9952ed9f570113a24a7a26c80ecdad12ae97ef3e Mon Sep 17 00:00:00 2001 From: bw55555 Date: Fri, 24 Nov 2023 21:35:35 -0500 Subject: [PATCH 074/143] Add a bit of clarification --- Topics/Tech_Stacks/Cypress.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/Cypress.md b/Topics/Tech_Stacks/Cypress.md index 7f284b06e..c72fd9a33 100644 --- a/Topics/Tech_Stacks/Cypress.md +++ b/Topics/Tech_Stacks/Cypress.md @@ -2,7 +2,7 @@ # 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. +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. This page will primarily focus on E2E (end-to-end) testing with cypress rather than component testing. # Why do end to end testing? @@ -98,4 +98,4 @@ cy.get('elem1').then($elem => { 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 +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. From 9d8b763831e04701cad50f67cc587ee4476b73bb Mon Sep 17 00:00:00 2001 From: bw55555 Date: Fri, 24 Nov 2023 21:39:31 -0500 Subject: [PATCH 075/143] Add table of contents --- Topics/Tech_Stacks/Cypress.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Topics/Tech_Stacks/Cypress.md b/Topics/Tech_Stacks/Cypress.md index c72fd9a33..1dad9a35e 100644 --- a/Topics/Tech_Stacks/Cypress.md +++ b/Topics/Tech_Stacks/Cypress.md @@ -1,5 +1,12 @@ ## E2E Testing with Cypress +- [Cypress Introduction](#cypress-introduction) +- [Why do end to end testing?](#why-do-end-to-end-testing-) +- [Why Cypress?](#why-cypress-) +- [Installation and setup:](#installation-and-setup-) +- [The basics](#the-basics) +- [Best Practices](#best-practices) + # 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. This page will primarily focus on E2E (end-to-end) testing with cypress rather than component testing. From 271775f193538f36a8ed8da4ecb5d808c4c624fb Mon Sep 17 00:00:00 2001 From: bw55555 Date: Fri, 24 Nov 2023 23:24:01 -0500 Subject: [PATCH 076/143] reformat headers --- Topics/Tech_Stacks/Cypress.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/Topics/Tech_Stacks/Cypress.md b/Topics/Tech_Stacks/Cypress.md index 1dad9a35e..a620b9b1b 100644 --- a/Topics/Tech_Stacks/Cypress.md +++ b/Topics/Tech_Stacks/Cypress.md @@ -1,4 +1,4 @@ -## E2E Testing with Cypress +# E2E Testing with Cypress - [Cypress Introduction](#cypress-introduction) - [Why do end to end testing?](#why-do-end-to-end-testing-) @@ -7,11 +7,11 @@ - [The basics](#the-basics) - [Best Practices](#best-practices) -# Cypress Introduction +## 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. This page will primarily focus on E2E (end-to-end) testing with cypress rather than component testing. -# Why do end to end testing? +## 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/) @@ -19,7 +19,7 @@ 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? +## 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. @@ -29,7 +29,7 @@ Cypress is built on top of mocha, and uses its framework for tests as well. The 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: +## Installation and setup: Cypress can be automatically installed with [npm](https://www.npmjs.com/): `npm install cypress` @@ -39,7 +39,7 @@ To run cypress, we can use the command `npx cypress open` and follow the instruc 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 +## 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. @@ -53,7 +53,7 @@ The first link provides a detailed guide on how cypress commands work and how to 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. -# 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? From 57d2c294da4696e94f4b75c25f2289666027e030 Mon Sep 17 00:00:00 2001 From: alyson647 Date: Fri, 24 Nov 2023 23:51:39 -0500 Subject: [PATCH 077/143] rearranged sections --- Topics/Software_Engineering/Scrum.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md index f5dc5b289..25ddb3f59 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -17,9 +17,6 @@ Scrum is an agile project management framework that helps teams organize and man - 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 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: @@ -30,8 +27,11 @@ A scrum team consists of three specific roles: - Their goal is to optimize the flow for the scrum team to ensure maximal productivity and minimal blockers. - Development team: - 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. + - 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. + +### What are sprints? +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. ### Scrum 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. From c7f061524ff0d0981e30d05e875d000a290a610e Mon Sep 17 00:00:00 2001 From: alyson647 Date: Fri, 24 Nov 2023 23:53:31 -0500 Subject: [PATCH 078/143] added table of contents --- Topics/Software_Engineering/Scrum.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md index 25ddb3f59..c69d4de07 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -1,5 +1,8 @@ ## Scrum Framework +### Table of Contents + + ### 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, 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. From a1b29a6d640b1975d389a271e40ba041ebac8cd3 Mon Sep 17 00:00:00 2001 From: alyson647 Date: Sat, 25 Nov 2023 00:00:31 -0500 Subject: [PATCH 079/143] changed wording and added table of contents --- Topics/Software_Engineering/Scrum.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md index c69d4de07..aed170c93 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -1,7 +1,15 @@ ## Scrum Framework ### Table of Contents - +#### [What is scrum?](#what-is-scrum) +#### [Scrum values](#scrum-values) +#### [Members of a scrum team](#members-of-a-scrum-team) +#### [What are sprints?](#what-are-sprints) +#### [Scrum-artifacts](#scrum-artifacts) +#### [Scrum events/ceremonies](#scrum-events/ceremonies) +#### [Why is scrum important?](#why-is-scrum-important) +#### [Resources](#resources) +Why is scrum important? ### 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, 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. @@ -63,7 +71,7 @@ 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? -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. +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 CSC301 to finish the project in the short amount of time given. ### Resources - [Atlassin - scrum](https://www.atlassian.com/agile/scrum) From 36ad3b6d5c29f7400b4d958ebed35188ce4bed35 Mon Sep 17 00:00:00 2001 From: alyson647 Date: Sat, 25 Nov 2023 00:05:16 -0500 Subject: [PATCH 080/143] adjusted table of contents --- Topics/Software_Engineering/Scrum.md | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/Topics/Software_Engineering/Scrum.md b/Topics/Software_Engineering/Scrum.md index aed170c93..399407522 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -1,15 +1,14 @@ ## Scrum Framework ### Table of Contents -#### [What is scrum?](#what-is-scrum) -#### [Scrum values](#scrum-values) -#### [Members of a scrum team](#members-of-a-scrum-team) -#### [What are sprints?](#what-are-sprints) -#### [Scrum-artifacts](#scrum-artifacts) -#### [Scrum events/ceremonies](#scrum-events/ceremonies) -#### [Why is scrum important?](#why-is-scrum-important) -#### [Resources](#resources) -Why is scrum important? +- [What is scrum?](#what-is-scrum) +- [Scrum values](#scrum-values) +- [Members of a scrum team](#members-of-a-scrum-team) +- [What are sprints?](#what-are-sprints) +- [Scrum-artifacts](#scrum-artifacts) +- [Scrum ceremonies](#scrum-ceremonies) +- [Why is scrum important?](#why-is-scrum-important) +- [Resources](#resources) ### 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, 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. @@ -54,7 +53,7 @@ Scrum artifacts refer to the information a scrum team uses that details informat - 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 +### Scrum ceremonies 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 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. From fad3fc0702df427d82e8eff1ab5d463aa4048921 Mon Sep 17 00:00:00 2001 From: alyson647 Date: Sat, 25 Nov 2023 00:05:53 -0500 Subject: [PATCH 081/143] removed typo --- 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 399407522..088a487e6 100644 --- a/Topics/Software_Engineering/Scrum.md +++ b/Topics/Software_Engineering/Scrum.md @@ -5,7 +5,7 @@ - [Scrum values](#scrum-values) - [Members of a scrum team](#members-of-a-scrum-team) - [What are sprints?](#what-are-sprints) -- [Scrum-artifacts](#scrum-artifacts) +- [Scrum artifacts](#scrum-artifacts) - [Scrum ceremonies](#scrum-ceremonies) - [Why is scrum important?](#why-is-scrum-important) - [Resources](#resources) From dce25cd67f57add0b8ef44042f7296d84d3ce849 Mon Sep 17 00:00:00 2001 From: Noelle <95160562+NonLan@users.noreply.github.com> Date: Sat, 25 Nov 2023 09:42:56 -0500 Subject: [PATCH 082/143] add picture to unit test --- Topics/Tech_Stacks/swift.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/swift.md b/Topics/Tech_Stacks/swift.md index c171c8d59..6cf84d1e2 100644 --- a/Topics/Tech_Stacks/swift.md +++ b/Topics/Tech_Stacks/swift.md @@ -62,7 +62,11 @@ Make sure to use `SwiftUI` and `Swift` as your interface and language respective ## Testing Your App - Unit Tests 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. +You can add a new unit test case by going to `New File` and selecting the `Unit Test Case Class` template: + +Unit Test Case + +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 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). From 90cc70122b44d491b57a408824b14575cb25401a Mon Sep 17 00:00:00 2001 From: Jazli14 <95947726+Jazli14@users.noreply.github.com> Date: Sat, 25 Nov 2023 14:24:31 -0500 Subject: [PATCH 083/143] Update Deploy_Node.js_Docker_AWS.md Added another link to a more detailed version of my article from a post by Raphael Mansuy --- Topics/Development_Process/Deploy_Node.js_Docker_AWS.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md b/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md index 53ea1f85d..6735f1967 100644 --- a/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md +++ b/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md @@ -68,7 +68,6 @@ $ docker push .dkr.ecr..amazonaws.com/: You can also instead press the “View push commands” button and follow those instructions. - ### Create an ECS Task Definition: Go to the Amazon ECS service in the AWS Management Console. 2) Click on "Task Definitions" in the left-hand navigation pane. @@ -112,7 +111,10 @@ Go to the EC2 Management Console and find the same EC2 instance Note: Set up a test endpoint to confirm that the Node.js application is running ## External Links -Here are some extra links that will help you incorporate other AWS services with Node.js: +A more detailed version of my article with more in depth steps is available here if you need more help, posted by Raphael Mansuy: +* https://dev.to/raphaelmansuy/deploy-a-docker-app-to-aws-using-ecs-3i1g + +Here are some extra links that will help you incorporate other AWS services with Node.js like an RDS database or a S3 bucket: Amazon S3: * https://medium.com/codebase/using-aws-s3-buckets-in-a-nodejs-app-74da2fc547a6 From 399959f54b65518bda1fde1eff82ace10be1bd90 Mon Sep 17 00:00:00 2001 From: Dario Kaja <113073212+Dario1031@users.noreply.github.com> Date: Sat, 25 Nov 2023 15:35:37 -0500 Subject: [PATCH 084/143] Update clean_architecture.md --- Topics/Development_Process/clean_architecture.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Topics/Development_Process/clean_architecture.md b/Topics/Development_Process/clean_architecture.md index daa7e5bbc..32bc3e5c4 100644 --- a/Topics/Development_Process/clean_architecture.md +++ b/Topics/Development_Process/clean_architecture.md @@ -53,6 +53,13 @@ As with everything, there can be potential downsides to Clean Architecture. It i - It can be a bit confusing at times. The heavy reliance on abstraction is not easy to reason about in your head. - Can be overkill for a smaller project that does not need to scale this well. +### Clean Architecture vs. Other Architectures +- Microservices Architecture - The application is sectioned up into smaller pieces, each with its own corresponding business logic and database storage. In terms of a large, growing project, following Clean Architecture would be a bigger time investment up front but would allow for much more portability and ease of use down the road. Microservices is probably more suited to a smaller project. +- Monolithic Architecture - A more traditional, single-codebase setup for the entire application. Technically, Clean Architecture is a form of Monolithic Architecture with more constraints to facilitate future changes. Again, this is a good choice for a large project but it requires a bit of time to learn how to set up properly. If you choose to not adhere to Clean Architecture (smaller project), a Monolithic system is simpler than a Microservices system. Be warned that it may get messy and hard to port over to different systems/frameworks! + +![image](https://github.com/Dario1031/learning-software-engineering.github.io/assets/113073212/d555716f-4da7-4e2f-bdc3-9737eafe4246) + + That's all for my quick crash course on Clean Architecture. This is not a comprehensive guide, but rather a quick breakdown of the main principles. Feel free to leave suggestions for any new additions! From 693a6638c224191bc6af484afae06d7a41fc8ee2 Mon Sep 17 00:00:00 2001 From: Jazli14 <95947726+Jazli14@users.noreply.github.com> Date: Sat, 25 Nov 2023 15:39:47 -0500 Subject: [PATCH 085/143] Update Deploy_Node.js_Docker_AWS.md Added a two small diagrams of how the Node.js app will be deployed through Docker and AWS --- .../Deploy_Node.js_Docker_AWS.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md b/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md index 6735f1967..3177e2bac 100644 --- a/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md +++ b/Topics/Development_Process/Deploy_Node.js_Docker_AWS.md @@ -6,7 +6,6 @@ ### [Deployment Process](#deployment-process-1) ### [External Links](#external-links-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. @@ -14,6 +13,19 @@ AWS (Amazon Web Services) provides a suite of cloud services that enable develop 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. +Here is a rough visualization of what the process of deploying the application will be like: +

+ +

+ + +This diagram shows containerizing a Node.js application by building an image of it and pushing it to an Amazon ECR Repository + +

+ +

+This followup diagram shows how an ECR Repository connects to Amazon ECS and is then deployed to an EC2 instance + ## 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 af36c9fd3b02640d7b92feba269534d2da41d7ae Mon Sep 17 00:00:00 2001 From: colewiltse Date: Sat, 25 Nov 2023 15:56:06 -0500 Subject: [PATCH 086/143] Making my file a .md file. Also adding for information on vs code and the live preview extenstion. --- Topics/Tech_Stacks/{HTML_Guide => HTML_Guide.md} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename Topics/Tech_Stacks/{HTML_Guide => HTML_Guide.md} (88%) diff --git a/Topics/Tech_Stacks/HTML_Guide b/Topics/Tech_Stacks/HTML_Guide.md similarity index 88% rename from Topics/Tech_Stacks/HTML_Guide rename to Topics/Tech_Stacks/HTML_Guide.md index 33f32d132..744abd299 100644 --- a/Topics/Tech_Stacks/HTML_Guide +++ b/Topics/Tech_Stacks/HTML_Guide.md @@ -61,7 +61,7 @@ For a full list of all the various tags used in html, click [here](https://www.w ## Writing HTML Files -One of the best ways to write and test your html files is using vs code. There, you can install the extension [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server). This will allow you to write and see your website in real time. +One of the best ways to write and test your html files is using vs code. Vs code is a code editor to use on your computer. You can learn more about vs code on their website linked [here](https://code.visualstudio.com/). Having vs code installed, you can then install the extenstion [Live Preview](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server). This extenstion will allow you to see your websites in real time as you write them. The previous link also provides clear instructions on how to properly utilize the extension. If you don’t have vscode, you can write your html in any text editor you have installed on your machine. You can then save the file as an html file and then open it to view in your browser. From e8a0e4b3f7b26c7d5b27cdb140aa19bd6288b5b4 Mon Sep 17 00:00:00 2001 From: Neeco Fabian Date: Sat, 25 Nov 2023 11:51:43 -0500 Subject: [PATCH 087/143] add Tailwind Intro and Responsiveness doc --- Topics/Tech_Stacks/Tailwind.md | 101 +++++++++++++++++++++++++++++++++ 1 file changed, 101 insertions(+) create mode 100644 Topics/Tech_Stacks/Tailwind.md diff --git a/Topics/Tech_Stacks/Tailwind.md b/Topics/Tech_Stacks/Tailwind.md new file mode 100644 index 000000000..ec936d043 --- /dev/null +++ b/Topics/Tech_Stacks/Tailwind.md @@ -0,0 +1,101 @@ +# Getting Stylish and Responsive with Tailwind CSS + +## Table of Contents +### [Introduction](#introduction) +### [Installation](#installation) +### [Usage](#usage) +### [Resources](#resources) +### [Flexibility](#flexibility) +### [Limitations](#limitations) + +## Introduction +Tired of the nuances of CSS? Tailwind is a utility-first CSS framework, which allows developers to use premade styling classes, without the need to write CSS classes from scratch. Tailwind provides small, single-purpose, reusable classes for spacing, lettering, and colours. These classes can then be used in HTML elements, or components from frontend libraries and frameworks. + +## Installation +1. When using node, install and execute Tailwind: +```bash +npm install -D tailwindcss +npx tailwindcss init +``` + +2. The generated `tailwind.config.js` configuration file contains the default setup. Give Tailwind access to files by listing the template paths in the content section. For React/TypeScript web app, it can look like this: +```js +content: [ + './pages/**/*.{ts,tsx}', + './components/**/*.{ts,tsx}', + './app/**/*.{ts,tsx}', + './src/**/*.{ts,tsx}', + ], +``` + +3. Add the following to the global CSS file: +```css +@tailwind base; +@tailwind components; +@tailwind utilities; +``` + +Now we're set! + +## Usage + +### The Basics +Each Tailwind class is focused on a specific responsibility. To use a class, add it to the `class` or `className` (when using React) attribute of the element/component. For example, use the following Tailwind classes to create a div that +- occupies the full width of the screen +- allow scrolling within +- has a sky blue background +- has large text + +```jsx +
+ {/* Some content */} +
+``` + +Start [here](https://tailwindcss.com/docs/aspect-ratio) to learn about all Tailwind classes. + +### Responsive Design +Tailwind is powerful for creating a suitable experience across different devices. + +#### Targeted Screen Sizes +To set a style for specific screen sizes, Tailwind offers breakpoints. These apply a style only if the screen width exceeds the breakpoint's minimum width. Breakpoints are an alternative to the traditional CSS `@media` queries. + +Breakpoints: +- 'sm' - 640px +- 'md' - 768px +- 'lg' - 1024px +- 'xl' - 1280px +- '2xl' - 1536px + +To denote a breakpoint, add the prefix before a class name to conditionally apply: `:` + +For example, to make the height of a div 100%, on screens more than 1024 pixels wide: +```jsx +
+ {/* Some content */} +
+``` + +> **NOTE:** A common mistake is to use 'sm' to target mobile devices. Mobile sizes have the smallest widths, so their styles should **not** have a breakpoint prefix. + + +## Flexibility +When using Tailwind CSS classes, developers are not restricted to a component structure and inherited styles that don't match their project. This can be problematic when using templates from component libraries such as [Bootstrap](https://getbootstrap.com). This flexibility makes Tailwind more customizable for different types of projects. + +Since each Tailwind class has atomic reponsibilities, developers avoid issues where a component inherits unknown CSS styles. + +Overall, Tailwind minimizes redundant CSS code and shortens CSS files. + +## Limitations +If accustomed to writing CSS, it can take some time to get used to using the equivalent Tailwind classes. + +Also, some projects may not need Tailwind. Using the framework requires additional overhead, which may not be worth it for small projects. + +It may take more time to complete projects, since Tailwind prioritizes styling control over pre-made components. + + +## Resources +- [Learning Software Engineering: CSS](./CSS.md) +- [Official Tailwind Site](https://tailwindcss.com) +- [Extended Installation](https://tailwindcss.com/docs/installation) +- [A Friendly Video Introduction](https://www.youtube.com/watch?v=pfaSUYaSgRo) From 011f3420a1667ab997744e0f3dc7168d3d180e75 Mon Sep 17 00:00:00 2001 From: Neeco Fabian Date: Sat, 25 Nov 2023 17:54:01 -0500 Subject: [PATCH 088/143] Tailwind Intro: address PR comments --- Topics/Tech_Stacks/CSS.md | 2 + Topics/Tech_Stacks/Tailwind.md | 89 ++++++++++++++++++++++------------ 2 files changed, 61 insertions(+), 30 deletions(-) diff --git a/Topics/Tech_Stacks/CSS.md b/Topics/Tech_Stacks/CSS.md index 827d57dd6..d162c775e 100644 --- a/Topics/Tech_Stacks/CSS.md +++ b/Topics/Tech_Stacks/CSS.md @@ -39,6 +39,8 @@ CSS grid is also a positioning alternative that provides a grid layout module, i Native CSS can be difficult to use, so CSS frameworks have been created so developers can use pre-made styles in order to create good looking website components, navigation bars, buttons, etc. in an easier and faster way without needing to know the semantics of CSS. Two popular CSS frameworks include [Tailwind CSS](https://tailwindcss.com/) and [Bootstrap CSS](https://getbootstrap.com/docs/3.4/css/). +For an introduction to the Tailwind framework, refer to [Getting Stylish and Responsive with Tailwind CSS](./Tailwind.md). + [React-Bootstrap](https://react-bootstrap.github.io/) is a Bootstrap CSS framework specifically for use on React apps. There is also the guide on our wiki [here](./Bootstrap.md) that can get you started on Bootstrap's basics. Generally, Bootstrap is easier to use and will produce a good looking website in a shorter amount of time, while Tailwind CSS is more customizable and can create more unique looking elements, but requires more of a time investment and is a bit harder to learn and work with compared to Bootstrap. diff --git a/Topics/Tech_Stacks/Tailwind.md b/Topics/Tech_Stacks/Tailwind.md index ec936d043..d307ebb92 100644 --- a/Topics/Tech_Stacks/Tailwind.md +++ b/Topics/Tech_Stacks/Tailwind.md @@ -4,12 +4,13 @@ ### [Introduction](#introduction) ### [Installation](#installation) ### [Usage](#usage) +### [Advantages and Limitations](#advantages-and-limitations) ### [Resources](#resources) -### [Flexibility](#flexibility) -### [Limitations](#limitations) + ## Introduction -Tired of the nuances of CSS? Tailwind is a utility-first CSS framework, which allows developers to use premade styling classes, without the need to write CSS classes from scratch. Tailwind provides small, single-purpose, reusable classes for spacing, lettering, and colours. These classes can then be used in HTML elements, or components from frontend libraries and frameworks. +Tired of the repetitive nuances of CSS? Tailwind is a utility-first CSS framework, which allows developers to use premade styling classes without the need to write CSS classes from scratch. Tailwind provides small, single-purpose, reusable classes for spacing, lettering, and colours. These classes can then be used in HTML elements, or components from frontend libraries and frameworks. + ## Installation 1. When using node, install and execute Tailwind: @@ -21,11 +22,11 @@ npx tailwindcss init 2. The generated `tailwind.config.js` configuration file contains the default setup. Give Tailwind access to files by listing the template paths in the content section. For React/TypeScript web app, it can look like this: ```js content: [ - './pages/**/*.{ts,tsx}', - './components/**/*.{ts,tsx}', - './app/**/*.{ts,tsx}', - './src/**/*.{ts,tsx}', - ], + './pages/**/*.{ts,tsx}', + './components/**/*.{ts,tsx}', + './app/**/*.{ts,tsx}', + './src/**/*.{ts,tsx}', + ] ``` 3. Add the following to the global CSS file: @@ -37,15 +38,18 @@ content: [ Now we're set! -## Usage +> **TIP:** For VSCode users, consider installing the [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension, which offers autocomplete suggestions, linting, and previews when hovering over classes. It's especially helpful for those starting out with the framework. + +## Usage ### The Basics Each Tailwind class is focused on a specific responsibility. To use a class, add it to the `class` or `className` (when using React) attribute of the element/component. For example, use the following Tailwind classes to create a div that -- occupies the full width of the screen -- allow scrolling within -- has a sky blue background -- has large text +- occupies the full width of the screen: `w-screen` +- allows scrolling within: `overflow-scroll` +- contains a sky blue background: `bg-sky-400` +- has large text: `text-lg` +Putting it all together: ```jsx
{/* Some content */} @@ -54,6 +58,30 @@ Each Tailwind class is focused on a specific responsibility. To use a class, add Start [here](https://tailwindcss.com/docs/aspect-ratio) to learn about all Tailwind classes. +When needed, add custom styles by modifying the `theme` section of `tailwind.config.js`. Here, we configure the `sm` breakpoint from 480px to 500px. +```js +module.exports = { + theme: { + screens: { + // sm: '480px', + sm: '500px', + md: '768px', + lg: '976px', + xl: '1440px', + } + } +} +``` + +To add custom styles inline, use square bracket `[]` notation. For example, if we want exactly 9px of padding, we can use: +```jsx +
+ {/* Some content */} +
+``` + +Refer to [Custom Styles](https://tailwindcss.com/docs/adding-custom-styles) for more information. + ### Responsive Design Tailwind is powerful for creating a suitable experience across different devices. @@ -61,11 +89,11 @@ Tailwind is powerful for creating a suitable experience across different devices To set a style for specific screen sizes, Tailwind offers breakpoints. These apply a style only if the screen width exceeds the breakpoint's minimum width. Breakpoints are an alternative to the traditional CSS `@media` queries. Breakpoints: -- 'sm' - 640px -- 'md' - 768px -- 'lg' - 1024px -- 'xl' - 1280px -- '2xl' - 1536px +- `sm` - 640px +- `md` - 768px +- `lg` - 1024px +- `xl` - 1280px +- `2xl` - 1536px To denote a breakpoint, add the prefix before a class name to conditionally apply: `:` @@ -78,20 +106,19 @@ For example, to make the height of a div 100%, on screens more than 1024 pixels > **NOTE:** A common mistake is to use 'sm' to target mobile devices. Mobile sizes have the smallest widths, so their styles should **not** have a breakpoint prefix. +#### Flexbox +For dynamically-sized layouts, Tailwind also provides classes for the standard [flexbox](https://tailwindcss.com/docs/flex) options, and controls for [flex-basis](https://tailwindcss.com/docs/flex-basis), on par with CSS. -## Flexibility -When using Tailwind CSS classes, developers are not restricted to a component structure and inherited styles that don't match their project. This can be problematic when using templates from component libraries such as [Bootstrap](https://getbootstrap.com). This flexibility makes Tailwind more customizable for different types of projects. - -Since each Tailwind class has atomic reponsibilities, developers avoid issues where a component inherits unknown CSS styles. - -Overall, Tailwind minimizes redundant CSS code and shortens CSS files. - -## Limitations -If accustomed to writing CSS, it can take some time to get used to using the equivalent Tailwind classes. - -Also, some projects may not need Tailwind. Using the framework requires additional overhead, which may not be worth it for small projects. +## Advantages and Limitations +### Advantages +- When using Tailwind CSS classes, developers are not restricted to a component structure and inherited styles that don't match their project. This can be problematic when using templates from component libraries such as [Bootstrap](https://getbootstrap.com). This flexibility makes Tailwind more customizable for different types of projects. +- Since each Tailwind class has atomic reponsibilities, developers avoid issues where a component inherits unknown CSS styles. +- Overall, Tailwind minimizes redundant CSS code and shortens CSS files. -It may take more time to complete projects, since Tailwind prioritizes styling control over pre-made components. +### Limitations +- If accustomed to writing CSS, it can take some time to get used to using the equivalent Tailwind classes. +- Some projects may not need Tailwind. Using the framework requires additional overhead, which may not be worth it for small projects. +- It may take more time to complete projects, since Tailwind prioritizes styling control over pre-made components. ## Resources @@ -99,3 +126,5 @@ It may take more time to complete projects, since Tailwind prioritizes styling c - [Official Tailwind Site](https://tailwindcss.com) - [Extended Installation](https://tailwindcss.com/docs/installation) - [A Friendly Video Introduction](https://www.youtube.com/watch?v=pfaSUYaSgRo) +- [Tailwind UI: A Component Library Styled with Tailwind CSS](https://tailwindui.com) +- [Defining States (Hover, Focus, and more)](https://tailwindcss.com/docs/hover-focus-and-other-states) From 61a462baec138ff1be1b9762649e8b475b30ff3f Mon Sep 17 00:00:00 2001 From: Daniel Qiu Date: Sat, 25 Nov 2023 18:52:28 -0500 Subject: [PATCH 089/143] Change in-line to md list --- Topics/Tech_Stacks/Flutter.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/Flutter.md b/Topics/Tech_Stacks/Flutter.md index e8836bf10..454ea2550 100644 --- a/Topics/Tech_Stacks/Flutter.md +++ b/Topics/Tech_Stacks/Flutter.md @@ -21,7 +21,9 @@ Source: [Amazon AWS](https://aws.amazon.com/what-is/flutter/) 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) +
    + +
  1. [Windows](https://docs.flutter.dev/get-started/install/windows)
    2. 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) @@ -40,7 +42,6 @@ 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 b474fef10f27019820ca849703a20cf7625a8413 Mon Sep 17 00:00:00 2001 From: Daniel Qiu Date: Sat, 25 Nov 2023 18:55:08 -0500 Subject: [PATCH 090/143] Add missing list --- Topics/Tech_Stacks/Flutter.md | 40 +++++++++++++++++------------------ 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/Topics/Tech_Stacks/Flutter.md b/Topics/Tech_Stacks/Flutter.md index 454ea2550..e653e152f 100644 --- a/Topics/Tech_Stacks/Flutter.md +++ b/Topics/Tech_Stacks/Flutter.md @@ -21,30 +21,30 @@ Source: [Amazon AWS](https://aws.amazon.com/what-is/flutter/) The following is a summary from the offical [Flutter Docs](https://docs.flutter.dev/get-started/). 1. **Install Flutter** -
      -
    1. [Windows](https://docs.flutter.dev/get-started/install/windows)
      2. - 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) + 1. [Windows](https://docs.flutter.dev/get-started/install/windows) + 2. [macOS](https://docs.flutter.dev/get-started/install/macos) + 3. [Linux](https://docs.flutter.dev/get-started/install/linux) + 4. [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. + + 1. Install VS Code for your respective platform. [Installation Link](https://code.visualstudio.com/download). + 2. Open a browser and go to the [Flutter extension page](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter) on the Visual Studio Marketplace. + 3. 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). + 1. Invoke **View > Command Palette**. This can be done with `ctrl shift p` on Windows or `cmd shift p` on Mac. + 2. Type "flutter", and select the **Flutter: New Project** + 3. Select **application** + 4. Create or select the parent directory for the new project folder. + 5. Enter a project name, such as `my_app`, and press **Enter**. + 6. 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. + 1. Locate the VS Code status bar (the blue bar at the bottom of the window). + 2. Select a device from the Device Selector area. + 3. Invoke **Run > Start Debugging** or press `F5`. + 4. Wait for the app to launch—progress is printed in the Debug Console view. + 5. After the app build completes, you’ll see the starter app on your device. From 7746e120ce5a99d4fff18196d7f5bcd123a42060 Mon Sep 17 00:00:00 2001 From: Daniel Qiu <65613404+danielqiuu@users.noreply.github.com> Date: Sat, 25 Nov 2023 18:56:51 -0500 Subject: [PATCH 091/143] Added pictures! --- 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 e653e152f..b602a4d8f 100644 --- a/Topics/Tech_Stacks/Flutter.md +++ b/Topics/Tech_Stacks/Flutter.md @@ -36,7 +36,9 @@ The following is a summary from the offical [Flutter Docs](https://docs.flutter. 3. **Create the app** 1. Invoke **View > Command Palette**. This can be done with `ctrl shift p` on Windows or `cmd shift p` on Mac. + Screenshot 2023-11-25 at 6 53 37 PM 2. Type "flutter", and select the **Flutter: New Project** + image 3. Select **application** 4. Create or select the parent directory for the new project folder. 5. Enter a project name, such as `my_app`, and press **Enter**. From ce07c3613fe8a891ab278bd4f27501ab55c86c80 Mon Sep 17 00:00:00 2001 From: Daniel Qiu Date: Sat, 25 Nov 2023 19:04:55 -0500 Subject: [PATCH 092/143] Add pros and cons of flutter --- Topics/Tech_Stacks/Flutter.md | 28 ++++++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/Flutter.md b/Topics/Tech_Stacks/Flutter.md index b602a4d8f..ce34c43a5 100644 --- a/Topics/Tech_Stacks/Flutter.md +++ b/Topics/Tech_Stacks/Flutter.md @@ -4,6 +4,8 @@ #### [What is Flutter](#what-is-flutter) +#### [Why Flutter? Pros and Cons](#why-flutter-pros-and-cons) + #### [Creating your first flutter app](#creating-your-first-flutter-app) ## What is Flutter? @@ -16,6 +18,28 @@ Flutter uses the open-source programming language Dart, which was also developed Source: [Amazon AWS](https://aws.amazon.com/what-is/flutter/) +## Why Flutter? Pros and Cons + +####Pros: + +1. **Single codebase for all platforms** + There is no need to create separate code bases when working on iOS and Android devices. Flutter allows developers to build a single codebase and use it for several platforms such as the web, desktop and mobile. This results in quicker app launch and is cost effective. +2. **Reduced Development Time** + The requirements for Flutter application development are much lower. So the positive outcome is that there are no additional maintenance charges. Flutter makes it possible to create larger apps that use unique features. +3. **Hot Reload Feature** + The ability to hot reload is one of the main benefits of using Flutter. This is for effective cross-platform development so it can complement the nature of Flutter. This feature’s function speeds up application development. + +###Cons: + +1. **Dart’s low popularity** + It’s a fact that Dart is a reliable programming language since it is fast. It is also true that developers are starting to make it an option. Yet, Dart is still not able to compete with other top programming languages such as java, Kotlin, etc. +2. **Large and Weighty Apps** + A loophole that can’t be dismissed is the size of the large size of the applications under development. Software developers working with this toolkit may find it difficult to work with large files. This can cause them to choose a lighter alternative. +3. **Limited number of third-party libraries** + Flutter being relatively cannot be compared to native programming languages. Developers still need to spend more time building as many libraries as possible. + + Source [Waverley Software](https://waverleysoftware.com/blog/why-use-flutter-pros-and-cons/#:~:text=Flutter%20allows%20developers%20to%20build,application%20development%20are%20much%20lower.) + ## Creating your first flutter app The following is a summary from the offical [Flutter Docs](https://docs.flutter.dev/get-started/). @@ -36,9 +60,9 @@ The following is a summary from the offical [Flutter Docs](https://docs.flutter. 3. **Create the app** 1. Invoke **View > Command Palette**. This can be done with `ctrl shift p` on Windows or `cmd shift p` on Mac. - Screenshot 2023-11-25 at 6 53 37 PM + Screenshot 2023-11-25 at 6 53 37 PM 2. Type "flutter", and select the **Flutter: New Project** - image + image 3. Select **application** 4. Create or select the parent directory for the new project folder. 5. Enter a project name, such as `my_app`, and press **Enter**. From ef0de449a2af03a8b03d71fc7fd96d97e23928a2 Mon Sep 17 00:00:00 2001 From: Daniel Qiu <65613404+danielqiuu@users.noreply.github.com> Date: Sat, 25 Nov 2023 19:09:30 -0500 Subject: [PATCH 093/143] Add final file structure --- Topics/Tech_Stacks/Flutter.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/Flutter.md b/Topics/Tech_Stacks/Flutter.md index ce34c43a5..9d5226cea 100644 --- a/Topics/Tech_Stacks/Flutter.md +++ b/Topics/Tech_Stacks/Flutter.md @@ -60,14 +60,17 @@ The following is a summary from the offical [Flutter Docs](https://docs.flutter. 3. **Create the app** 1. Invoke **View > Command Palette**. This can be done with `ctrl shift p` on Windows or `cmd shift p` on Mac. - Screenshot 2023-11-25 at 6 53 37 PM + VS Code Command Palette 2. Type "flutter", and select the **Flutter: New Project** - image + Flutter new project 3. Select **application** 4. Create or select the parent directory for the new project folder. 5. Enter a project name, such as `my_app`, and press **Enter**. 6. 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). + 7. Your file structures should look as follows. + Final File Structure + 4. **Running the App** 1. Locate the VS Code status bar (the blue bar at the bottom of the window). 2. Select a device from the Device Selector area. From 2a3b7ba042e40e0f5556947d4596fa2c98dfae7d Mon Sep 17 00:00:00 2001 From: alexma22 Date: Sat, 25 Nov 2023 20:02:33 -0500 Subject: [PATCH 094/143] Added a subheader. --- Topics/Teamwork.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Topics/Teamwork.md b/Topics/Teamwork.md index 3725ea780..631474d04 100644 --- a/Topics/Teamwork.md +++ b/Topics/Teamwork.md @@ -11,6 +11,7 @@ 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. +### Time Management 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. From 5b42947716d956f1c6d0081f944cb209f73f0671 Mon Sep 17 00:00:00 2001 From: SIQING XU <95056407+lunaseaa@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:06:54 -0500 Subject: [PATCH 095/143] Update applications section --- Topics/Tech_Stacks/JsonParsing.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Topics/Tech_Stacks/JsonParsing.md b/Topics/Tech_Stacks/JsonParsing.md index f6126b30b..05c559665 100644 --- a/Topics/Tech_Stacks/JsonParsing.md +++ b/Topics/Tech_Stacks/JsonParsing.md @@ -6,6 +6,10 @@ 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 Applications + +JSON plays a crucial role in APIs, simplifying data transmission between different programming languages. Its readability and simplicity make it an ideal choice for storing configuration settings and handling complex data structures, especially in NoSQL databases like MongoDB. In web development, JSON facilitates seamless communication between servers and clients, and it is a natural fit for JavaScript applications. Serialization and deserialization processes leverage JSON to convert data into string formats and back. Beyond web development, JSON is employed in logging systems, real-time communication protocols, and IoT applications, showcasing its adaptability across diverse domains. The format is also integral to security measures, as evident in its use within JSON Web Tokens (JWT). + ## JSON Data Types From 2ef2e1a9a833395970fe4144bcdf73ae8e0a1094 Mon Sep 17 00:00:00 2001 From: SIQING XU <95056407+lunaseaa@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:13:04 -0500 Subject: [PATCH 096/143] Update JsonParsing.md add code blocks; add explanations according to comments --- Topics/Tech_Stacks/JsonParsing.md | 48 +++++++++++++++++++++++++++++-- 1 file changed, 46 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/JsonParsing.md b/Topics/Tech_Stacks/JsonParsing.md index 05c559665..2e05e111c 100644 --- a/Topics/Tech_Stacks/JsonParsing.md +++ b/Topics/Tech_Stacks/JsonParsing.md @@ -43,7 +43,7 @@ JSON allows for the construction of more complex data structures beyond primitiv * 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: - +```{python} { "name": "John Doe", "age": 30, @@ -53,10 +53,14 @@ JSON allows for the construction of more complex data structures beyond primitiv "zipcode": "12345" } } +``` +In this example, "name", "age", "isStudent", and "address" are keys, and their corresponding values are strings, numbers, boolean, and another object, respectively. + * 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: +```{python} [ "apple", "banana", @@ -66,6 +70,33 @@ JSON allows for the construction of more complex data structures beyond primitiv "quantity": 5 } ] +``` +In this example, the array contains strings ("apple", "banana", "orange") and an object with keys "color" and "quantity". + +JSON structures often combine objects and arrays to represent more complex data hierarchies. For instance, an array of objects can represent a collection of similar entities, where each object has multiple key-value pairs. + +```{python} +[ + { + "name": "Alice", + "age": 25, + "isStudent": true + }, + { + "name": "Bob", + "age": 30, + "isStudent": false + }, + { + "name": "Charlie", + "age": 22, + "isStudent": true + } +] +``` + +In this example, the array contains three objects, each representing a person with attributes such as name, age, and student status. + ## JSON Parsing in Different Programming Languages @@ -102,7 +133,7 @@ Suppose we have a JSON file called fcc.json. If we want to read that file, we fi ```{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. +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) @@ -113,6 +144,17 @@ The final step would be to print the results. print(fcc_data) ``` +This is what the entire code would look like: +```{python} +import json + +with open('fcc.json', 'r') as fcc_file: + fcc_data = json.load(fcc_file) + print(fcc_data) +``` + + + ### JavaScript Parse JSON #### Parse JSON String in JavaScript @@ -215,6 +257,8 @@ Name: Kotte College: BVRIT ``` +In the above program, the `JSONParser().parse()` is used, which is present in the `org.json.simple.parser.*` to parse the File.json file. + ## 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: From 16d6f3b848e58931135dbcf7c0e22532c660fff2 Mon Sep 17 00:00:00 2001 From: SIQING XU <95056407+lunaseaa@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:19:33 -0500 Subject: [PATCH 097/143] Update JsonParsing.md add reference section --- Topics/Tech_Stacks/JsonParsing.md | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/JsonParsing.md b/Topics/Tech_Stacks/JsonParsing.md index 2e05e111c..89b4e0ab7 100644 --- a/Topics/Tech_Stacks/JsonParsing.md +++ b/Topics/Tech_Stacks/JsonParsing.md @@ -270,7 +270,15 @@ Minimizing JSON Payload Size: Implementing data compression techniques, such as - +## Reference & External Resources + +* [performance comparison](https://www.adaltas.com/en/2021/03/22/performance-comparison-of-file-formats/#:~:text=For%20row%20based%20format%20bzip,snappy%2095%25%20and%2091%25) +* [json reduce data size](https://www.baeldung.com/json-reduce-data-size#:~:text=Compressing%20with%20gzip&text=That's%20why%20gzip%20is%20our,and%20compress%20it%20with%20gzip) +* [JavaScript Json parse](https://www.w3schools.com/js/js_json_parse.asp​​) +* [openAI](https://www.openai.com/research/chatgpt) +* [Java Json parse](https://www.geeksforgeeks.org/parse-json-java/) +* [Python Json parse](https://www.freecodecamp.org/news/python-parse-json-how-to-read-a-json-file/) +* [GZip Json](https://jcristharif.com/msgspec/) From 28823087671e39005598b7e3f8550d800b6fe56c Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:36:59 -0500 Subject: [PATCH 098/143] Create Firebase_and_Firestore --- Topics/Tech_Stacks/Firebase_and_Firestore | 42 +++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 Topics/Tech_Stacks/Firebase_and_Firestore diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore b/Topics/Tech_Stacks/Firebase_and_Firestore new file mode 100644 index 000000000..a26d6dc79 --- /dev/null +++ b/Topics/Tech_Stacks/Firebase_and_Firestore @@ -0,0 +1,42 @@ +# Firebase and Firestore + + +## This post will be about setting up Firebase and utilizing Firestore: + + +## Introduction: +Firebase is an all in one platform that hosts a myriad of services that cover the development cycle of an application. It includes services such as analytics, authentication, and for what we will be covering, database management. + +Firestore is a NoSql document database, this means that data is structured hierarchically within collections. + + +## Setting up Firebase for a Web Application : +1. First, create a firebase project and register that app w/ the project. +2. Once registering is done you'll get a firebase config object to connect your app with firebase reasources +3. In the firebase console follow the installation steps to create a new project +4. For App registration: +- In the Firebase console's project overview page, click the icon to set up, then enter the App's name and follow the instructions to add and initialize Firebase SDK int eh app +5. SDK initialization +- First do: npm i -g firebase-tools or npm i -D firebase-tools (as a dev tool) in your project’s terminal +- Next type npx firebase login, this will open up a browser to login with your firebase account +- Next, type npx firebase init hosting to begin the project setup process +- Next, follow the installation steps displayed in the terminal and choose the options you desire + + +## Setting Up Firestore +1. Before using in your app, go to the firebase console go to build > Firestore database > Create database >start in test mode >next +2. Add the following scripts in your app: +``` + + +``` +3. Install firebase if not already with this command in your terminal: +``` +npm install firebase@10.6.0 --save +``` +4. Manually import firebase and firestore at the top of the file in your code +``` +import firebase from "firebase/compat/app"; +import "firebase/firestore"; +``` + From bf00c821d3065a78db385d9b37ab0946590d7d8e Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:41:42 -0500 Subject: [PATCH 099/143] Rename Firebase_and_Firestore to Firebase_and_Firestore.md --- .../{Firebase_and_Firestore => Firebase_and_Firestore.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename Topics/Tech_Stacks/{Firebase_and_Firestore => Firebase_and_Firestore.md} (100%) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore b/Topics/Tech_Stacks/Firebase_and_Firestore.md similarity index 100% rename from Topics/Tech_Stacks/Firebase_and_Firestore rename to Topics/Tech_Stacks/Firebase_and_Firestore.md From ed4f0d89f9699dd474144596c6cfb2200bfc8477 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:46:03 -0500 Subject: [PATCH 100/143] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 28 ++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index a26d6dc79..400bff162 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -40,3 +40,31 @@ import firebase from "firebase/compat/app"; import "firebase/firestore"; ``` +## Writing to a Database +Firebase stores data in documents that are stored in collections. +Here's an example of adding data to the “users” collection in a hypothetical database +``` +db.collection("users").add({ + first: "Ada", + last: "Lovelace", + born: 1815 +}) +.then((docRef) => { + console.log("Document written with ID: ", docRef.id); +}) +.catch((error) => { + console.error("Error adding document: ", error); +}); +``` +FROM: https://firebase.google.com/docs/firestore/quickstart + + +Lets use another example and break it down +After you’ve initialized your app, first get a reference to firestore with the getFirestore() function +Then pass that reference into the doc() function along with the path to the document, in this example we are looking at the 2021-09-14 document in the dailySpecial collection + +``` +const firestore = getFirestore() + +const specialOfTheDay= doc(firestore, 'dailySpecial') +``` From 120834d10f579824abd5e4d844cbdedb58284c4a Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:48:37 -0500 Subject: [PATCH 101/143] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 400bff162..92ec40661 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -68,3 +68,18 @@ const firestore = getFirestore() const specialOfTheDay= doc(firestore, 'dailySpecial') ``` + +When we write to a document, we pass in the reference as well as data, this is represented as key-value pairs +``` +function write(){ + const data={ + val_1:a, + val_2:b + } +} + +write() +``` +Note that writing to a path will create the document if it doesn't exist and replace it with the new data if it does. +To resolve this, you may choose to do updateDoc() (with the same parameters above), but this requires the document existing, thus you may choose to add an additional parameter to the setDoc command to merge any updates, you pass in {merge:true} along with the parameters you’ve specified. +Since the setDoc() call is asynchronous, you must handle it as such. From 55e2e7551fac64220d62a633e1274ae3777ce8ad Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:49:39 -0500 Subject: [PATCH 102/143] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 92ec40661..428f6b3a9 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -60,7 +60,9 @@ FROM: https://firebase.google.com/docs/firestore/quickstart Lets use another example and break it down + After you’ve initialized your app, first get a reference to firestore with the getFirestore() function + Then pass that reference into the doc() function along with the path to the document, in this example we are looking at the 2021-09-14 document in the dailySpecial collection ``` @@ -81,5 +83,7 @@ function write(){ write() ``` Note that writing to a path will create the document if it doesn't exist and replace it with the new data if it does. + To resolve this, you may choose to do updateDoc() (with the same parameters above), but this requires the document existing, thus you may choose to add an additional parameter to the setDoc command to merge any updates, you pass in {merge:true} along with the parameters you’ve specified. + Since the setDoc() call is asynchronous, you must handle it as such. From d36c8dd1df92aaca47c9de82fda75d4345322aa6 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:50:19 -0500 Subject: [PATCH 103/143] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 428f6b3a9..e7dc0a5a6 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -61,9 +61,9 @@ FROM: https://firebase.google.com/docs/firestore/quickstart Lets use another example and break it down -After you’ve initialized your app, first get a reference to firestore with the getFirestore() function +After you’ve initialized your app, first get a reference to firestore with the getFirestore() function. -Then pass that reference into the doc() function along with the path to the document, in this example we are looking at the 2021-09-14 document in the dailySpecial collection +#Then pass that reference into the doc() function along with the path to the document, in this example we are looking at the 2021-09-14 document in the dailySpecial collection. ``` const firestore = getFirestore() @@ -71,7 +71,7 @@ const firestore = getFirestore() const specialOfTheDay= doc(firestore, 'dailySpecial') ``` -When we write to a document, we pass in the reference as well as data, this is represented as key-value pairs +When we write to a document, we pass in the reference as well as data, this is represented as key-value pairs. ``` function write(){ const data={ From c8d490f0c3d965e48ab64dc831bd63a78f421b2e Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:50:40 -0500 Subject: [PATCH 104/143] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index e7dc0a5a6..64bec6847 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -63,7 +63,7 @@ Lets use another example and break it down After you’ve initialized your app, first get a reference to firestore with the getFirestore() function. -#Then pass that reference into the doc() function along with the path to the document, in this example we are looking at the 2021-09-14 document in the dailySpecial collection. +Then pass that reference into the doc() function along with the path to the document, in this example we are looking at the 2021-09-14 document in the dailySpecial collection. ``` const firestore = getFirestore() From dafc2450b609356b119355249d554e6857202196 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sat, 25 Nov 2023 21:52:32 -0500 Subject: [PATCH 105/143] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 64bec6847..9d292b4ef 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -87,3 +87,12 @@ Note that writing to a path will create the document if it doesn't exist and rep To resolve this, you may choose to do updateDoc() (with the same parameters above), but this requires the document existing, thus you may choose to add an additional parameter to the setDoc command to merge any updates, you pass in {merge:true} along with the parameters you’ve specified. Since the setDoc() call is asynchronous, you must handle it as such. + + +## Extra Resources: +* Getting started with firebase on the web: https://www.youtube.com/watch?v=ILTo8IvFXJw +* Getting started with Firebase Authentication on the web https://www.youtube.com/watch?si=VSKhNhRBs6ZqYv7g&v=rbuSx1yEgV8&feature=youtu.be +* Getting started with Cloud Firestore for the web: https://www.youtube.com/watch?v=BjtxPj6jRM8&t=1s +* firestore documentation: https://firebase.google.com/docs/firestore + + From 86628f906b5e352a917d30542489214cfd58940a Mon Sep 17 00:00:00 2001 From: ruiting-chen Date: Sun, 26 Nov 2023 02:57:34 -0500 Subject: [PATCH 106/143] bold some texts, add more resource for how to start making Unity game, organized links in reference, added table of contents --- Topics/Tech_Stacks/Unity_Intro.md | 82 +++++++++++++++++++------------ 1 file changed, 50 insertions(+), 32 deletions(-) diff --git a/Topics/Tech_Stacks/Unity_Intro.md b/Topics/Tech_Stacks/Unity_Intro.md index 06c035964..d303af077 100644 --- a/Topics/Tech_Stacks/Unity_Intro.md +++ b/Topics/Tech_Stacks/Unity_Intro.md @@ -1,10 +1,19 @@ # Unity +## Table of contents +#### [Introduction](#introduction) +#### [Download and installation](#download-and-installation) +#### [Create new Unity project](#create-new-unity-project) +#### [Breif intro to Unity interface](#brief-intro-to-the-unity-interface) +#### [Additional resources](#additional-resources) +#### [References](#reference) + +## Introduction 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. ## 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 to licenses and access the Unity Asset Store efficiently. It can be used with the Unity Editor version 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). @@ -12,67 +21,76 @@ Open the installer file and follow the instructions in the Unity Hub setup windo #### License Activation: 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). +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 > Navigate to "Installs" on the left taskbar > 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 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" + - 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 icon** 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 > 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). +- 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 - 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 the project name and location for your project. + - On the **top**, you can select the Unity Editor version you want to use + - On the **right** side, you can specify the project name and location for your project. ## Brief Intro to the Unity Interface -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. +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: +1. **Hierarchy window**: 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 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. 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 the Game view. The toolbar also contains tabs to access your Unity Account, Unity Cloud Services, and Unity Collaborate. +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 in the **top left** corner of this section. +3. **Inspector window**: +If you click on a GameObject inside the hierarchy window, the inspector window will open on the **right** side of your screen. 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. 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 the Game view. The toolbar also contains tabs to access your Unity Account, Unity Cloud Services, and Unity Collaborate. + +Note that you can customize your Unity Interface, meaning that you can drag and move the windows to different places and also add/remove windows to change the interface appearance according to your preference. Some Unity tutorials that you might find may also have a different appearence of the interface. #### 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. + - 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. + - 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 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. +- [Getting started with the Unity Editor](https://subscription.packtpub.com/book/game-development/9781801078078/2/ch02lvl1sec04/getting-started-with-the-unity-editor): A detailed information page for Unity installation and the Unity interface. +- [Introduction to Unity fundamentals for absolute beginners](https://www.youtube.com/watch?v=ozL-h75vazQ): A tutorial video for how to place and manipulate objects in the Unity interface. +- [Create a 2D Game in Unity](https://www.youtube.com/watch?v=ewiw2tcfen8&list=PL0eyrZgxdwhxL5n_wJsnpI4Y9AFIFhhF8): A Youtube video series that provides a step-by-step tutorial from the installation to making a simple 2D game. +- [Build Your First 3D Game in Unity](https://www.youtube.com/watch?v=n0GQL5JgJcY&list=PLrnPJCHvNZuB5ATsJZLKX3AW4V9XaIV9b): A Youtube series that provides detailed guide for making 3D game in Unity. +- [Basics of Unity 2018](https://www.youtube.com/watch?v=OyuyV1Ec7J8&list=PLS57jztVd1_8aoX8ZT6LIyIPQ9JpZriJH&index=1): A beginners Youtube series that introduces Material, Texture, and Prefabs. You can follow this series to make a simple house Prefab in Unity. +- [Unity Manual](https://docs.unity3d.com/Manual/index.html): The official Unity website that provides information to different features and aspects that you can learn about in Unity. 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://getalow.com/unity-engine/introduction-to-unity-editor-and-unity-interface/16 +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.(What is the Unity Hub?) + +https://subscription.packtpub.com/book/game-development/9781801078078/2/ch02lvl1sec04/getting-started-with-the-unity-editor (Getting started with the Unity Editor) + +https://docs.unity3d.com/Manual/VisualStudioIntegration.html#:~:text=Unity%20automatically%20uses%20Visual%20Studio,into%20an%20existing%20Unity%20installation.(Unity Manual) + +https://getalow.com/unity-engine/introduction-to-unity-editor-and-unity-interface/16 (Introduction to Unity Editor and Unity Interface) From da6bfa119f983cc7256efb6a68b476e609bd3a82 Mon Sep 17 00:00:00 2001 From: ruiting-chen <51133017+ruiting-chen@users.noreply.github.com> Date: Sun, 26 Nov 2023 03:02:34 -0500 Subject: [PATCH 107/143] Add pics for license and editor installation add modules in Unity_Intro.md --- Topics/Tech_Stacks/Unity_Intro.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/Unity_Intro.md b/Topics/Tech_Stacks/Unity_Intro.md index d303af077..6cfedb29e 100644 --- a/Topics/Tech_Stacks/Unity_Intro.md +++ b/Topics/Tech_Stacks/Unity_Intro.md @@ -24,6 +24,7 @@ An activated license is needed to use Unity. When you sign in to the Unity Hub f 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). +image #### Install Unity Editor through Unity Hub: - Open Unity Hub > Navigate to **Installs** on the left taskbar > Select **Install Editor** @@ -35,6 +36,7 @@ You can choose to get a free personal license or get an educational (student) li - 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 icon** for the version of Unity Editor that you want to modify > Select **Add modules** + image-1 ## Create New Unity Project Once you have Unity downloaded, you can create a new project by: @@ -86,11 +88,11 @@ If you have not set the default editor or want to change the default editor, you - [Unity Manual](https://docs.unity3d.com/Manual/index.html): The official Unity website that provides information to different features and aspects that you can learn about in Unity. 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.(What is the Unity Hub?) +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. (What is the Unity Hub?) https://subscription.packtpub.com/book/game-development/9781801078078/2/ch02lvl1sec04/getting-started-with-the-unity-editor (Getting started with the Unity Editor) -https://docs.unity3d.com/Manual/VisualStudioIntegration.html#:~:text=Unity%20automatically%20uses%20Visual%20Studio,into%20an%20existing%20Unity%20installation.(Unity Manual) +https://docs.unity3d.com/Manual/VisualStudioIntegration.html#:~:text=Unity%20automatically%20uses%20Visual%20Studio,into%20an%20existing%20Unity%20installation. (Unity Manual) https://getalow.com/unity-engine/introduction-to-unity-editor-and-unity-interface/16 (Introduction to Unity Editor and Unity Interface) From ebe3ba1fae997e97107398b383d72745679a40e0 Mon Sep 17 00:00:00 2001 From: ruiting-chen <51133017+ruiting-chen@users.noreply.github.com> Date: Sun, 26 Nov 2023 03:04:33 -0500 Subject: [PATCH 108/143] Fix typos Unity_Intro.md --- Topics/Tech_Stacks/Unity_Intro.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Topics/Tech_Stacks/Unity_Intro.md b/Topics/Tech_Stacks/Unity_Intro.md index 6cfedb29e..60fef5e7b 100644 --- a/Topics/Tech_Stacks/Unity_Intro.md +++ b/Topics/Tech_Stacks/Unity_Intro.md @@ -4,7 +4,7 @@ #### [Introduction](#introduction) #### [Download and installation](#download-and-installation) #### [Create new Unity project](#create-new-unity-project) -#### [Breif intro to Unity interface](#brief-intro-to-the-unity-interface) +#### [Brief intro to Unity interface](#brief-intro-to-the-unity-interface) #### [Additional resources](#additional-resources) #### [References](#reference) @@ -13,7 +13,7 @@ Unity is a game engine that can be used to develop 2D, 3D, AR/VR games. It can a ## 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 to licenses and access the Unity Asset Store efficiently. It can be used with the Unity Editor version 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 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). @@ -66,10 +66,10 @@ The project window acts as a file browser, organizing asset files in folders. An 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 the Game view. The toolbar also contains tabs to access your Unity Account, Unity Cloud Services, and Unity Collaborate. -Note that you can customize your Unity Interface, meaning that you can drag and move the windows to different places and also add/remove windows to change the interface appearance according to your preference. Some Unity tutorials that you might find may also have a different appearence of the interface. +Note that you can customize your Unity Interface. You can drag and move the windows to different places and add/remove windows to change the interface appearance according to your preference. Some Unity tutorials that you might find may also have a different appearance of the interface. #### 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 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. From 1f0e5cbde7aa3fe9bd13d4d6cebd0a04284a6526 Mon Sep 17 00:00:00 2001 From: Samuel Chen Date: Sun, 26 Nov 2023 03:29:03 -0500 Subject: [PATCH 109/143] Unity ML-Agents basic tutorial Added a tutorial on installing ML-Agents and how to create a simple training setup --- Topics/Tech_Stacks/Unity_ML_Agents.md | 199 ++++++++++++++++++++++++++ 1 file changed, 199 insertions(+) create mode 100644 Topics/Tech_Stacks/Unity_ML_Agents.md diff --git a/Topics/Tech_Stacks/Unity_ML_Agents.md b/Topics/Tech_Stacks/Unity_ML_Agents.md new file mode 100644 index 000000000..e77120f18 --- /dev/null +++ b/Topics/Tech_Stacks/Unity_ML_Agents.md @@ -0,0 +1,199 @@ +# Introduction to Unity's ML-Agents Toolkit + +Unity's ML-Agents Toolkit, or simply ML Agents, is a package that provides a simple and intuitive way to develop agents capable of interacting with both 2D and 3D environments in Unity. It is a project that aims to bring machine learning together with the many environments that can be easily developed in Unity, and provide an easy and accessible way for game developers to work with machine learning. + +In this introductory tutorial, we will explore the basics of reinforcement learning with an example built completely from scratch. + +# Installation Guide +Before installing Unity's ML-Agents package, ensure that you installed the following: + +[Unity 2022.3 or Later](https://unity3d.com/get-unity/download) + +[Python 3.10.12 or Higher](https://www.python.org/downloads/) + +PyTorch, it is recommended that you create a virtual environment to avoid conflicts with any existing packages. + +```pip3 install torch~=1.13.1 -f https://download.pytorch.org/whl/torch_stable.html``` + +ML Agents Python Package, once again, install in a virtual environment. + +```pip3 install ./ml-agents-envs``` + +```pip3 install ./ml-agents``` + +Finally, within Unity's Package Manager, find and install the ```com.unity.ml-agents``` package. + +# What is Reinforcement Learning? + +In this tutorial we will use Unity's ML-Agents Toolkit to explore the basics of reinforcement learning. Reinforcement Learning is a form of machine learning where an agent will learn to make decisions by interacting with an environment. Based on the actions it performs, it will receive a reward that indicates how well it performed. Over time, the goal of the agent is to learn a strategy that maximizes the reward it receives. + +In order to do so, our agent will follow a simple cycle of 3 steps. It will first collect an observation from the environment. Using this information collected, it will perfmr an action. Finally, based on this action, we will give the agent a reward. + +Our agent will attempt to learn a strategy that will maximize the reward it receives over time. + + +# Setting up the Environment + +In this step by step tutorial, we will learn how to create a simple environment in which we are able to train an agent to play a simple game. The basic setup I will use to introduce the concepts of reinforcement learning will involve an **Agent**, and **two rewards** of varying sizes. + + + +In my setup, I have currently created a floor, an Agent, and 2 rewards. + +They are positioned along a straight line. Our environment will involve the agent being able to perform 3 actions, moving left, moving right, or doing nothing at all. Hopefully, we will be able to train this agent to move towards the larger value. + +Finally, to finish this section, create a C# script and attach it to your agent object. I have named the script ```BiggerRewardAgent.cs```, but feel free to change the name to anything you'd like. + +# Actions + +Now that our environment is set up, we will assign actions that our agent is able to perform. Begin by opening the ```CollectRewardAgent.cs``` script with any text editor you would like, such as Visual Studio or Visual Studio Code. We will begin by changing our MonoBehaviour into a Agent class. Make the following imports: + +``` +using UnityEngine; +using Unity.MLAgents; +using Unity.MLAgents.Sensors; +using Unity.MLAgents.Actuators; +``` + +We will also removing the ```Update()``` and ```Start()``` functions, and add the following overrides: + +```public override void OnEpisodeBegin()``` + +```public override void CollectObservations(VectorSensor sensor)``` + +```public override void OnActionReceived(ActionBuffers actions)``` + +```public void OnTriggerEnter(Collider other)``` + +In the following few sections, we will go through and explain each of these functions in detail. We will first begin with ```OnActionReceieved()``` + +Unlike us, our agent is only able to play through making actions through numbers. These numbers will be given through the ActionBuffer. As specified before, we want our agent to be able to move left, right, and stand still. We will accomplish this by assigning each action a number. We begin by obtaining the action from DiscreteActions, or integer actions. We will set up where our AI gets these DiscreteActions later in our observations section. + +``` +public override void OnActionReceived(ActionBuffers actions) + { + int action = actions.DiscreteActions[0]; + switch (action) + { + case 0: + transform.Translate(Vector3.left * Time.deltaTime); + break; + case 1: + transform.Translate(Vector3.right * Time.deltaTime); + break; + case 2: + break; + } + } +``` +While it might make sense for us to assign case 0 to moving left, and either case 1 or 2 to moving right, the agent does not have any context to what each number means. This means that any number can be assigned to any action, and they will all be treated equally by our agent. + +Now that our agent is capable of making moves, we will now make it able to make observations. + +# Observations + +In order for our agent to learn from its environment, it must be able to gather information from its environment. As our agent only needs to solve a very simple problem, we will give it some very simple information. To solve this problem, it should be able to observe its own position, and the position of both rewards. + +To make things easier, we should add a reference to both rewards at the start of our agent class + +``` +public class CollectRewardAgent : Agent +{ + public GameObject rewardSmall; + public GameObject rewardLarge; + ... +``` + +This will allow us to easily access the position of both reward objects as well. To add an observation, we simply go under the CollectObservations function and call ```Sensor.AddObservation()```. We would like to add the x value of all 3 positions, as our agent will only be capable of moving along the x axis. + +``` +public override void CollectObservations(VectorSensor sensor) + { + sensor.AddObservation(rewardSmall.transform.localPosition.x); + sensor.AddObservation(rewardLarge.transform.localPosition.x); + sensor.AddObservation(transform.localPosition.x); + } +``` + +Here we are adding the local positions of all 3 objects. I use local position here so that if we move our training setup around, everything stays functional. However, you can adjust this depending on how your training setup may look like. + +Our agent is now able to observe the world around it, as well as make movements left or right. The only thing left to do is to assign a reward function to tell our agent how well it is currently doing. +# Rewards + +Now to assign a reward, this process will differ depending on what you want to train your agent to do. For our scenario, it is sufficient to give the agent a reward when it touches a reward. We will accomplish this with Unity's ```OnTriggerEnter()``` function. + +``` +public void OnTriggerEnter(Collider other) + { + if (other.gameObject == rewardSmall) + { + SetReward(1f); + } + if (other.gameObject == rewardLarge) + { + SetReward(10f); + } + EndEpisode(); + } +``` + +From anywhere in Unity, we are able to assign rewards to our agent using the functions ```SetReward()``` and ```AddReward()```. For our purposes, we will set a reward when the agent collides with another object, in this case, either the small or large reward. While the amount you assign to each reward is arbitrary, they should be similar relative to each other. If the rewards are too close to each other, the agent might not learn effectively. Play with your values to find an optimal value. + +Something you might have noticed is the ```EndEpisode()``` after we assign the reward. This means that we want our iteration of training to stop when our agent gets its reward, so that it can start training all over again. In order to do so, we have one last function we should call. + +``` +public override void OnEpisodeBegin() + { + transform.position = new Vector3(0, 1, 0); + + int rand = Random.Range(0, 2); + if (rand == 0) + { + rewardSmall.transform.position = new Vector3(5, 1, 0); + rewardLarge.transform.position = new Vector3(-5, 1, 0); + } + else + { + rewardSmall.transform.position = new Vector3(-5, 1, 0); + rewardLarge.transform.position = new Vector3(5, 1, 0); + } + } +``` + +After each iteration, we want to reset our training environment. We can accomplish this by resetting the positions of each object when our training episode begins. This simply resets the position of my agent back to its starting location, and randomly assigns the rewards to place either the smaller or larger reward on either side. Feel free to adjust these values to match your training set up. + +# Training + +And with that, our setup is almost ready for training. Head to the inspector of our Agent. Observe the behavior parameters. There are 2 values that we should change. Feel free to assign a name to this behaviour if you would like to. + + + +Our **Vector Observation** should determine the amount of observations our agent is able to make. This should match the amount of observations we gave it in our prior example, which is 3. If your training set up differs, make sure to assign the number of observations correctly. + +Next, under the **Actions** section, we want to set the number of Discrete Branches to 1. This is where we are making our observations. Next, we want to set the size of our branch to 3. This should correspond to the number of possible actions our agent is able to make. As our agent is only able to move left, right, and stay still, the size of our action space is 3, as we assigned in the Actions section above. + + + +The final step is to add a Decision Requester. The only parameter here is how often our agent will make an action. Feel free to play with this value. + +With that, we can begin training our agent. +We can do so by opening a terminal and activating our virtual environment where we previously installed ML-Agents. To begin training, we will run + +```mlagents-learn --run-id="YOUR RUN ID HERE"``` + +Replacing with your own run ID. This ID could be anything that helps you identify a session of training. + +For additional parameters, run ```mlagents-learn --help``` to view them all. + +Annnnnnnnd voila! + + + +You've just learned how to train your first agent in Unity! While the agent might not appear very smart at first, it should eventually learn that moving towards the larger reward is much more rewarding than the smaller one. Over time, you should expect to see the average reward, provided every few minutes in the terminal, to increase. + +Feel free to make your own adjustments or create your own training environment. Fun additions you could try to build off of this example can include +- Movement along a 2d square instead of a line +- A penalty for taking a long time to reach a reward +- Additional obstacles your agent must avoid + +Feel free to explore both on your own, and with Unity's [official documentation](https://unity-technologies.github.io/ml-agents/ML-Agents-Toolkit-Documentation/) and the [ML-Agents Repo](https://github.com/Unity-Technologies/ml-agents). From 58feb4fe9894cf6021d3ea2c8a909a33769afc1d Mon Sep 17 00:00:00 2001 From: Mahir <103388045+ryukinouu@users.noreply.github.com> Date: Sun, 26 Nov 2023 11:32:58 -0500 Subject: [PATCH 110/143] Create DigitalOcean_Web_App.md Created a tutorial that explains how to create a droplet (virtual private server) in DigitalOcean and upload a web application to it. --- Topics/Tech_Stacks/DigitalOcean_Web_App.md | 129 +++++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 Topics/Tech_Stacks/DigitalOcean_Web_App.md diff --git a/Topics/Tech_Stacks/DigitalOcean_Web_App.md b/Topics/Tech_Stacks/DigitalOcean_Web_App.md new file mode 100644 index 000000000..5aee69f2e --- /dev/null +++ b/Topics/Tech_Stacks/DigitalOcean_Web_App.md @@ -0,0 +1,129 @@ +# Deploying a Web Application on DigitalOcean + +## Introduction +This tutorial will guide you step-by-step through the process of deploying a web application using DigitalOcean's hosting platform. DigitalOcean, a cloud service provider, provides a straightforward and user-friendly environment for hosting applications, making it an excellent choice for developers to use. + +## Prerequisites +Before you begin, ensure you have the following: + +1. **DigitalOcean Account**: Sign up for a DigitalOcean account if you don't have one already. (https://cloud.digitalocean.com/registrations/new) + +2. **Web Application Code**: Have your web application code ready for production. This could be a Node.js, Python, Ruby on Rails, or any other type of application. + +Now that you have these two prerequisites, you're ready to launch your web app into the world! Follow these steps: + +### Step 1: Create a Droplet +In digital ocean, a "Droplet" refers to a virtual private server (VPS) that you can deploy and manage on DigitalOcean's cloud infrastructure. It's essentially a scalable compute platform with add-on storage, where you can run applications, websites, and other services. + +1. Log in to your DigitalOcean account. +2. On the left panel, click on "Droplets" under "Manage" and press "Create Droplet". + +Note that droplets do have a price per month to host on their platform, but DigitalOcean provides a free $200 budget for 60 days to newly created accounts. + +2. Choose a data center region. If you'd like the fastest speeds between your device and the web app, choose the closest region to you. +3. Choose your operating system. Ubuntu is a popular choice for operating systems, as it is known to be fast. +4. Select a plan based on your application's requirements. The CPUs and sizes that the platform offers differ in price. +5. Optionally, you can also add an authentication method to your droplet to make it a private web app. +6. Click "Create Droplet." + + + +### Step 2: Access Your Droplet +Once the droplet is created, you will receive an email with login details. + +Use an SSH client to connect to your droplet. For example, run `ssh root@your_droplet_ip` in the terminal. + +### Step 3: Update System Packages +After logging in, update the system packages: + +```bash + sudo apt update + sudo apt upgrade +``` + +This ensures that your droplet's operating system is up-to-date with the latest security patches and software updates. + +### Step 4: Install Dependencies +Install any dependencies required for your web application, such as Node.js, Python, or database drivers. + +For example, if you're using Node.js, you could run the following command in the terminal: + +```bash + sudo apt install nodejs npm +``` + +Adjust the command based on the requirements of your specific application. + +### Step 5: Transfer your files +Transfer your application files to the droplet using SCP or any other method. To do this with SCP, follow these steps: + +1. Open a new terminal and use the cd command to navigate to the directory containing your application code. + +```bash + cd /path/ +``` + +2. Use the scp command to copy the files into the newly created droplet. + +```bash + scp -r your_application_directory user@droplet_ip:/remote/path +``` + +Replace the following: + your_application_directory: The local path to your application code. + user: The username used to log in to your droplet. + droplet_ip: The IP address of your droplet. You can get this on the webpage of the droplet. + /remote/path: The path on your droplet where you want to copy the files. + +3. Enter your password. You'll be prompted to enter the password using the login details from the email previously. + +### Step 6: Configure Environment Variables +Configure your application settings, such as environment variables and database connections. + +Some applications use configuration files to store settings. These files can be in various formats, such as JSON, YAML, or INI. For example, in a Node.js application, you might have a config.json file like this: + +```json + { + "database": { + "url": "your_database_connection_string" + }, + "api_key": "your_api_key" + } +``` + +If your application interacts with a database, you'll need to configure the connection details. This includes the database type (e.g., MySQL, PostgreSQL), host, port, username, password, and database name. Here's an example of a PostgreSQL connection string: + +```bash + postgres://username:password@localhost:5432/database_name +``` + +Depending on your application, there may be other settings you need to configure, such as the listening port for your web server, the location of static files, logging options, etc. Make sure to do this before running your application on the droplet. + +### Step 7: Deploy your Application +Execute the command to start your application. The command will depend on the programming language and framework used by your application. + +For example, if you have a Node.js application, the command might be: + +```bash + node app.js +``` + +### Step 8: Verify Your Application is Running +Once your application is started, you can verify that it's running by accessing it through a web browser or using tools like curl or wget to make HTTP requests. + +```bash + curl http://localhost:your_application_port +``` + +Running this command in your terminal will check to see if the application is up and running. + +### Step 9: Extend! +Congratulations! You have successfully deployed your web application on DigitalOcean. With your web app deployed, there are several things you can do to enhance, optimize, and manage your application, such as: +- Set up monitoring tools to track the performance of your web application. DigitalOcean provides monitoring graphs and alerts that can help you identify performance issues. +- Scale your infrastructure. This might involve upgrading your droplet, adding more droplets, or implementing load balancing. +- Regularly back up your application data and configurations to prevent data loss. DigitalOcean provides snapshot and backup features for your droplets. +- Enhance the security of your web application by regularly updating software, implementing firewalls, and following security best practices. Monitor your application logs for any suspicious activities. + +This tutorial covered the essential steps, but keep in mind that each application may have specific requirements. Refer to DigitalOcean's documentation for more advanced configurations and optimizations. (https://docs.digitalocean.com/) + +Happy coding! From 9d28af1b16f852ed3297f808e35490770b26e757 Mon Sep 17 00:00:00 2001 From: Patrick Fidler <71288159+PatrickFidler@users.noreply.github.com> Date: Sun, 26 Nov 2023 14:39:41 -0500 Subject: [PATCH 111/143] Add psycopg2 function example, additional resources clarity Incorporated requested changes, adding a fetchmany() example for article clarity, and added a few words to the additional resources section to make it more clear why the links could be useful. --- Topics/Tech_Stacks/PostgreSQL_psycopg2.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/PostgreSQL_psycopg2.md b/Topics/Tech_Stacks/PostgreSQL_psycopg2.md index 03b3ece32..67aa852a0 100644 --- a/Topics/Tech_Stacks/PostgreSQL_psycopg2.md +++ b/Topics/Tech_Stacks/PostgreSQL_psycopg2.md @@ -137,8 +137,10 @@ To start using PostgreSQL in a Python program with psycopg2, ensure you have fin psycopg2 can also be used for data processing, with built-in functions such as `fetchone()` and `fetchmany(x)` that return one row and x rows from a query response, respectively. From the example in step 5, after we run `cur.execute("SELECT * FROM test;")`, we can do `row = cur.fetchone()` to save the first row we selected from test to *row*. +These functions can be useful in many situations. For example, if you run a pet store, and possess a PostgreSQL database of adoptable pets, you may have a site that has room to show 4 pets, and an option to show more. Using psycopg2, if you wanted to choose 4 pets in your database, after executing your query with a cursor *cur*, you could call `data = cur.fetchmany(x)`, and then pass your data to your website in whatever way you desire, to be extracted and displayed (Flask has potentially useful psycopg2 integration for this task- see Additional Resourses at the bottom of this page). + For a comprehensive collection of psycopg2 information, including all provided functions and syntax, visit the [offical documentation](https://www.psycopg.org/docs/index.html#). ## Additional Resources -- For further psycopg2 examples, visit this [link](https://wiki.postgresql.org/wiki/Psycopg2_Tutorial). -- For information on using psycopg2 for a flask application, visit this [article](https://www.geeksforgeeks.org/making-a-flask-app-using-a-postgresql-database/). +- For further PostgreSQL with psycopg2 examples, and notably examples of full, functional programs, visit this [link](https://wiki.postgresql.org/wiki/Psycopg2_Tutorial). +- For information on using psycopg2 for a flask application, incorporating psycopg2 into your API, visit this [article](https://www.geeksforgeeks.org/making-a-flask-app-using-a-postgresql-database/). From 352a16c483e3672780328a07060e01f1c6e45ad0 Mon Sep 17 00:00:00 2001 From: Daniel Qiu Date: Sun, 26 Nov 2023 16:13:02 -0500 Subject: [PATCH 112/143] Add flutter showcase and dart language similarities --- Topics/Tech_Stacks/Flutter.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/Topics/Tech_Stacks/Flutter.md b/Topics/Tech_Stacks/Flutter.md index 9d5226cea..73c404369 100644 --- a/Topics/Tech_Stacks/Flutter.md +++ b/Topics/Tech_Stacks/Flutter.md @@ -18,6 +18,8 @@ Flutter uses the open-source programming language Dart, which was also developed Source: [Amazon AWS](https://aws.amazon.com/what-is/flutter/) +Many companies use Flutter to build their applications. Some of these companies include: Alibaba Group, Tencent, BMW and many more. For a full list of companies that use Flutter, click [here](https://flutter.dev/showcase). + ## Why Flutter? Pros and Cons ####Pros: @@ -27,16 +29,16 @@ Source: [Amazon AWS](https://aws.amazon.com/what-is/flutter/) 2. **Reduced Development Time** The requirements for Flutter application development are much lower. So the positive outcome is that there are no additional maintenance charges. Flutter makes it possible to create larger apps that use unique features. 3. **Hot Reload Feature** - The ability to hot reload is one of the main benefits of using Flutter. This is for effective cross-platform development so it can complement the nature of Flutter. This feature’s function speeds up application development. + The ability to hot reload is one of the main benefits of using Flutter. This is for effective cross-platform development so it can complement the nature of Flutter. This feature’s function speeds up application development. Hot reloading allows developers to see the changes they make to the code in real time without losing the state of the app. It is useful when editing the UI of an app. ###Cons: 1. **Dart’s low popularity** - It’s a fact that Dart is a reliable programming language since it is fast. It is also true that developers are starting to make it an option. Yet, Dart is still not able to compete with other top programming languages such as java, Kotlin, etc. + It’s a fact that Dart is a reliable programming language since it is fast. It is also true that developers are starting to make it an option. Yet, Dart is still not able to compete with other top programming languages such as Java, Kotlin, etc. However Dart is very similar to C# and Java, which makes it easy for programmers to learn. 2. **Large and Weighty Apps** A loophole that can’t be dismissed is the size of the large size of the applications under development. Software developers working with this toolkit may find it difficult to work with large files. This can cause them to choose a lighter alternative. 3. **Limited number of third-party libraries** - Flutter being relatively cannot be compared to native programming languages. Developers still need to spend more time building as many libraries as possible. + Flutter being relatively new cannot be compared to native programming languages. Developers still need to spend more time building as many libraries as possible. Source [Waverley Software](https://waverleysoftware.com/blog/why-use-flutter-pros-and-cons/#:~:text=Flutter%20allows%20developers%20to%20build,application%20development%20are%20much%20lower.) @@ -59,6 +61,7 @@ The following is a summary from the offical [Flutter Docs](https://docs.flutter. 3. Click Install. Installing the Flutter extension also installs the Dart extension. 3. **Create the app** + 1. Invoke **View > Command Palette**. This can be done with `ctrl shift p` on Windows or `cmd shift p` on Mac. VS Code Command Palette 2. Type "flutter", and select the **Flutter: New Project** @@ -69,7 +72,7 @@ The following is a summary from the offical [Flutter Docs](https://docs.flutter. 6. 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). 7. Your file structures should look as follows. - Final File Structure + Final File Structure 4. **Running the App** 1. Locate the VS Code status bar (the blue bar at the bottom of the window). From 01bc5eec16a5e2072ffb7ea3f05a09c46c091237 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sun, 26 Nov 2023 16:28:47 -0500 Subject: [PATCH 113/143] Update Tech_Stacks.md --- Topics/Tech_Stacks.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index b52785347..50a1e66da 100644 --- a/Topics/Tech_Stacks.md +++ b/Topics/Tech_Stacks.md @@ -18,3 +18,4 @@ ### [React Components Guide](./Tech_Stacks/React_Components.md) ### [Temporal For Workflow Orchestration](./Tech_Stacks/Temporal.md) ### [Learning Cypress](./Tech_Stacks/Cypress.md) +### [Learning Firebase Installation and Utilzing Firestore](./Tech_Stacks/Firebase_and_Firestore.md) From e32c182fb0f70218be906411a87120efd40b0002 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Sun, 26 Nov 2023 16:42:35 -0500 Subject: [PATCH 114/143] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 52 ++++++++++++++++++++ 1 file changed, 52 insertions(+) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 9d292b4ef..78dfce3c1 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -89,6 +89,58 @@ To resolve this, you may choose to do updateDoc() (with the same parameters abov Since the setDoc() call is asynchronous, you must handle it as such. +## Getting/Fetching a document +Lets Break down the following example: +``` + +const document_we_want= +async function readOneDocument(){ +const docSnapshot = await getDoc(document_we_want) + if (docSnapshot.exists()){ + const docData = docSnapshot.data() + // do something with this data + } +} +``` +We use the getDoc() call and pass in a document reference, which is the path to the document we want. + +This resolves to a snapshot which is essentially just the document itself at that point in time. + +Next, we check to see if it exists and if it does, we extract the data. + +Here you may choose to do something different, like parsing it and displaying it somewhere. + + +##Making Queries + +``` + +const artistQuery = query( + collection(firestore, 'music artists'), + where('musician', '==', 'Ado'), + limit(20) +); + +const artistQuerySnapshot = await getDocs(artistQuery); +const allAdoSongs = artistQuerySnapshot.forEach((song) => { +//do something with the data +} +) + +``` + +In databases, oftentimes you want to find multiple objects that fit some criteria, in firestore this is referred to as querying for multiple documents. + +In the query() call, you first pass in a collection instead of a document, then from there you may choose to add additional filters. + +From there when you getDocs instead of getDoc on the result of the query, what is returned is a snapshot of a query instead of a snapshot of a document. + +The query snapshot itself, is an array of documents. + +You may choose to use docs() on the returned data to directly return the array, however you may also choose to do a .forEach() on it, in order to iteratively parse it. + + + ## Extra Resources: * Getting started with firebase on the web: https://www.youtube.com/watch?v=ILTo8IvFXJw * Getting started with Firebase Authentication on the web https://www.youtube.com/watch?si=VSKhNhRBs6ZqYv7g&v=rbuSx1yEgV8&feature=youtu.be From d0fea6bb9d3107d85b526f873db3a8d0bb9269f2 Mon Sep 17 00:00:00 2001 From: ruiting-chen Date: Sun, 26 Nov 2023 18:54:54 -0500 Subject: [PATCH 115/143] organized links for get started to make games in Unity --- Topics/Tech_Stacks/Unity_Intro.md | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/Topics/Tech_Stacks/Unity_Intro.md b/Topics/Tech_Stacks/Unity_Intro.md index 60fef5e7b..61f4283bf 100644 --- a/Topics/Tech_Stacks/Unity_Intro.md +++ b/Topics/Tech_Stacks/Unity_Intro.md @@ -1,10 +1,11 @@ -# Unity +# Introduction to Unity Basics ## Table of contents #### [Introduction](#introduction) #### [Download and installation](#download-and-installation) #### [Create new Unity project](#create-new-unity-project) #### [Brief intro to Unity interface](#brief-intro-to-the-unity-interface) +#### [Making your First Unity game](#get-started-with-making-your-first-unity-game) #### [Additional resources](#additional-resources) #### [References](#reference) @@ -77,14 +78,15 @@ If you have not set the default editor or want to change the default editor, you - Click on the External Script Editor dropdown and select your preferred default editor or select **Browse** to find your editor. image-3 +## Get started with making your first Unity game +After you setup and get familiar with the Unity interface, you can start creating your own game in Unity. Here are some resources that could be useful to help you get started: +- [Get started with 2D Game](https://www.youtube.com/watch?v=ewiw2tcfen8&list=PL0eyrZgxdwhxL5n_wJsnpI4Y9AFIFhhF8): A Youtube video series that provides a step-by-step tutorial from the installation to making a simple 2D game. +- [Get started with 3D Game](https://www.youtube.com/watch?v=n0GQL5JgJcY&list=PLrnPJCHvNZuB5ATsJZLKX3AW4V9XaIV9b): A Youtube series that provides detailed guide for making 3D game in Unity. +- [Learn about making Prefabs in games](https://www.youtube.com/watch?v=OyuyV1Ec7J8&list=PLS57jztVd1_8aoX8ZT6LIyIPQ9JpZriJH&index=1): A beginners Youtube series that introduces Material, Texture, and Prefabs. You can follow this series to make a simple house Prefab in Unity. ## Additional Resources - - [Getting started with the Unity Editor](https://subscription.packtpub.com/book/game-development/9781801078078/2/ch02lvl1sec04/getting-started-with-the-unity-editor): A detailed information page for Unity installation and the Unity interface. - [Introduction to Unity fundamentals for absolute beginners](https://www.youtube.com/watch?v=ozL-h75vazQ): A tutorial video for how to place and manipulate objects in the Unity interface. -- [Create a 2D Game in Unity](https://www.youtube.com/watch?v=ewiw2tcfen8&list=PL0eyrZgxdwhxL5n_wJsnpI4Y9AFIFhhF8): A Youtube video series that provides a step-by-step tutorial from the installation to making a simple 2D game. -- [Build Your First 3D Game in Unity](https://www.youtube.com/watch?v=n0GQL5JgJcY&list=PLrnPJCHvNZuB5ATsJZLKX3AW4V9XaIV9b): A Youtube series that provides detailed guide for making 3D game in Unity. -- [Basics of Unity 2018](https://www.youtube.com/watch?v=OyuyV1Ec7J8&list=PLS57jztVd1_8aoX8ZT6LIyIPQ9JpZriJH&index=1): A beginners Youtube series that introduces Material, Texture, and Prefabs. You can follow this series to make a simple house Prefab in Unity. - [Unity Manual](https://docs.unity3d.com/Manual/index.html): The official Unity website that provides information to different features and aspects that you can learn about in Unity. Note that the manual is slightly different for different versions of Unity. ## Reference From c5f27f8a5ca3cd3a20e772612aaab93e48d7e9ef Mon Sep 17 00:00:00 2001 From: ruiting-chen <51133017+ruiting-chen@users.noreply.github.com> Date: Sun, 26 Nov 2023 19:00:26 -0500 Subject: [PATCH 116/143] Update license pic position Unity_Intro.md --- Topics/Tech_Stacks/Unity_Intro.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Topics/Tech_Stacks/Unity_Intro.md b/Topics/Tech_Stacks/Unity_Intro.md index 61f4283bf..e469a567a 100644 --- a/Topics/Tech_Stacks/Unity_Intro.md +++ b/Topics/Tech_Stacks/Unity_Intro.md @@ -25,6 +25,7 @@ An activated license is needed to use Unity. When you sign in to the Unity Hub f 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). + image #### Install Unity Editor through Unity Hub: From 99a7ba960ec5bfea65158d3300dfee00a8d70bed Mon Sep 17 00:00:00 2001 From: David Lin Date: Sun, 26 Nov 2023 19:31:14 -0500 Subject: [PATCH 117/143] Update WebRTC.md with diagrams --- Topics/Tech_Stacks/WebRTC.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Topics/Tech_Stacks/WebRTC.md b/Topics/Tech_Stacks/WebRTC.md index dce99dffc..82c4d420c 100644 --- a/Topics/Tech_Stacks/WebRTC.md +++ b/Topics/Tech_Stacks/WebRTC.md @@ -57,6 +57,9 @@ peerConnection.addEventListener('icecandidate', event => { } }); ``` +![webrtc-overview](https://github.com/davidlin2k/learning-software-engineering.github.io/assets/17074619/2d2c0426-7a93-4b42-93f4-0047d2377360) + +A diagram on how ICE candidates are retrived and exchanged. ## STUN and TURN servers From aa5ea97711521a846235d7a35828882c5849a333 Mon Sep 17 00:00:00 2001 From: David Lin Date: Sun, 26 Nov 2023 19:46:37 -0500 Subject: [PATCH 118/143] Update Tech_Stacks.md --- Topics/Tech_Stacks.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index b52785347..070e3e3fc 100644 --- a/Topics/Tech_Stacks.md +++ b/Topics/Tech_Stacks.md @@ -18,3 +18,4 @@ ### [React Components Guide](./Tech_Stacks/React_Components.md) ### [Temporal For Workflow Orchestration](./Tech_Stacks/Temporal.md) ### [Learning Cypress](./Tech_Stacks/Cypress.md) +### [Establishing Peer to Peer Connection with WebRTC](./Tech_Stacks/WebRTC.md) From 5c9490f681fb82b55dd42eb7f1613f76ea2d0478 Mon Sep 17 00:00:00 2001 From: ruiting-chen Date: Sun, 26 Nov 2023 20:08:25 -0500 Subject: [PATCH 119/143] organized links for reference section --- Topics/Tech_Stacks/Unity_Intro.md | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/Topics/Tech_Stacks/Unity_Intro.md b/Topics/Tech_Stacks/Unity_Intro.md index 61f4283bf..be18b0ecd 100644 --- a/Topics/Tech_Stacks/Unity_Intro.md +++ b/Topics/Tech_Stacks/Unity_Intro.md @@ -90,11 +90,8 @@ After you setup and get familiar with the Unity interface, you can start creatin - [Unity Manual](https://docs.unity3d.com/Manual/index.html): The official Unity website that provides information to different features and aspects that you can learn about in Unity. 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. (What is the Unity Hub?) - -https://subscription.packtpub.com/book/game-development/9781801078078/2/ch02lvl1sec04/getting-started-with-the-unity-editor (Getting started with the Unity Editor) - -https://docs.unity3d.com/Manual/VisualStudioIntegration.html#:~:text=Unity%20automatically%20uses%20Visual%20Studio,into%20an%20existing%20Unity%20installation. (Unity Manual) - -https://getalow.com/unity-engine/introduction-to-unity-editor-and-unity-interface/16 (Introduction to Unity Editor and Unity Interface) +[What is the Unity Hub?](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.) +[Getting started with the Unity Editor](https://subscription.packtpub.com/book/game-development/9781801078078/2/ch02lvl1sec04/getting-started-with-the-unity-editor) +[Unity Manual](https://docs.unity3d.com/Manual/VisualStudioIntegration.html#:~:text=Unity%20automatically%20uses%20Visual%20Studio,into%20an%20existing%20Unity%20installation.) +[Introduction to Unity Editor and Unity Interface](https://getalow.com/unity-engine/introduction-to-unity-editor-and-unity-interface/16) From 26cf3c97eee97e7fab689f62b5ab1a664bb7229c Mon Sep 17 00:00:00 2001 From: ayanaarahman Date: Sun, 26 Nov 2023 20:35:35 -0500 Subject: [PATCH 120/143] Expand Section 6 with details on automated localization and practical advantages of localization tools --- Topics/Software_Engineering/Localization.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/Topics/Software_Engineering/Localization.md b/Topics/Software_Engineering/Localization.md index d6735fe6d..b03ec466d 100644 --- a/Topics/Software_Engineering/Localization.md +++ b/Topics/Software_Engineering/Localization.md @@ -55,8 +55,19 @@ Key technical aspects of localization include: ## 6. Tools and Resources -- **Localization Platforms**: Tools like [Crowdin](https://crowdin.com/) and [Lokalise](https://lokalise.com/) help manage and automate the localization process. -- **Translation Services**: Professional services like [Smartling](https://www.smartling.com/) or [Mother Tongue](https://mothertongue.com/solutions/translation) provide accurate translations. +- **Localization Platforms**: Tools like [Crowdin](https://crowdin.com/) and [Lokalise](https://lokalise.com/) help manage and automate the localization process. Crowdin integrates with your development environment to synchronize content and offers a platform for translators. Lokalise provides features like real-time editing and automated tasks for efficient workflow management. + +- **Translation Services**: Services such as [Smartling](https://www.smartling.com/) combine translation technology with professional translators, while [Mother Tongue](https://mothertongue.com/solutions/translation) offers culturally relevant translations. + +- **Advantages of Using Localization Tools**: + - **Efficiency**: Automate repetitive tasks, reducing time required for localization. + - **Accuracy and Consistency**: Ensure consistent terminology across languages. + - **Collaboration and Scalability**: Facilitate easier management of large-scale projects. + - **Cost-Effectiveness**: Reduce errors and rework, lowering costs. + - **Real-Time Updates and Integration**: Offer seamless integration with development workflows, aligning localization with ongoing development. + +Using these specialized tools provides a more streamlined, accurate, and cost-effective approach to software localization compared to manual methods. + ## 7. Conclusion From c2fa37827a06b2b90d243cd572cc65d88acfc091 Mon Sep 17 00:00:00 2001 From: ICPRplshelp <93059453+ICPRplshelp@users.noreply.github.com> Date: Sun, 26 Nov 2023 20:38:53 -0500 Subject: [PATCH 121/143] Applied all requested changes / feedback --- Topics/Development_Process/Github_Pages.md | 26 +++++++--------------- 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/Topics/Development_Process/Github_Pages.md b/Topics/Development_Process/Github_Pages.md index 832fefff8..05748baa0 100644 --- a/Topics/Development_Process/Github_Pages.md +++ b/Topics/Development_Process/Github_Pages.md @@ -8,11 +8,11 @@ From the [GitHub docs](https://docs.github.com/en/pages/getting-started-with-git 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. +**Note:** Free for public repositories. You need [GitHub Pro](https://github.com/settings/billing/summary) 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. +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. **GitHub Pages is not a backend host; you'll need a separate backend for that.** Also, using routing with frameworks like React may be a bit more difficult. 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, being platforms that are able to host web apps and backends as well. **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. @@ -20,10 +20,10 @@ Many people use GitHub pages to host blogs and personal portfolios. You can also 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. Create a new GitHub repository. +2. Add your HTML/CSS/JS files to your GitHub repository and commit it. 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. + 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. @@ -60,7 +60,7 @@ https://user.github.io/repo/somerandomfolder or user.github.io/repo/somerandomfo https://user.github.io/repo/somerandomfolder/styles.css ``` -## Deploying a React project +## 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. @@ -72,20 +72,10 @@ Maybe you might want to [automate the process with GitHub actions?](https://gith ## Deploying an Angular Project -- [Here's your React equivalent.](https://github.com/angular-schule/angular-cli-ghpages) +- [Angular has a similar CLI tool for deploying projects to GitHub Pages.](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. +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 -- GitHub won't take your site down right away, but they'll try contacting you first. Beware that images are orders of magnitude larger than HTML code or plain text. From 0c3c97e545cc9171e9dd7a811886d2b99f855cf0 Mon Sep 17 00:00:00 2001 From: ruiting-chen <51133017+ruiting-chen@users.noreply.github.com> Date: Sun, 26 Nov 2023 22:32:13 -0500 Subject: [PATCH 122/143] Update reference link format 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 fcc0d7b33..3f74aef82 100644 --- a/Topics/Tech_Stacks/Unity_Intro.md +++ b/Topics/Tech_Stacks/Unity_Intro.md @@ -91,8 +91,8 @@ After you setup and get familiar with the Unity interface, you can start creatin - [Unity Manual](https://docs.unity3d.com/Manual/index.html): The official Unity website that provides information to different features and aspects that you can learn about in Unity. Note that the manual is slightly different for different versions of Unity. ## Reference -[What is the Unity Hub?](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.) -[Getting started with the Unity Editor](https://subscription.packtpub.com/book/game-development/9781801078078/2/ch02lvl1sec04/getting-started-with-the-unity-editor) -[Unity Manual](https://docs.unity3d.com/Manual/VisualStudioIntegration.html#:~:text=Unity%20automatically%20uses%20Visual%20Studio,into%20an%20existing%20Unity%20installation.) +[What is the Unity Hub?](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.) +[Getting started with the Unity Editor](https://subscription.packtpub.com/book/game-development/9781801078078/2/ch02lvl1sec04/getting-started-with-the-unity-editor) +[Unity Manual](https://docs.unity3d.com/Manual/VisualStudioIntegration.html#:~:text=Unity%20automatically%20uses%20Visual%20Studio,into%20an%20existing%20Unity%20installation.) [Introduction to Unity Editor and Unity Interface](https://getalow.com/unity-engine/introduction-to-unity-editor-and-unity-interface/16) From 9475345a22a743fd72ccc4e4a50d31c5ce1abc90 Mon Sep 17 00:00:00 2001 From: Luke Cheseldine Date: Sun, 26 Nov 2023 22:43:38 -0500 Subject: [PATCH 123/143] add instructions for windows and mac installation --- Topics/Development_Process/Nginx.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/Topics/Development_Process/Nginx.md b/Topics/Development_Process/Nginx.md index c973f108b..d2e81e02a 100644 --- a/Topics/Development_Process/Nginx.md +++ b/Topics/Development_Process/Nginx.md @@ -14,7 +14,10 @@ You can find a more exhaustive list on the [offical Nginx docs](https://nginx.or # Installation and Setup -The installation processes varies depending upon your OS. It's most common to install Nginx on a Linux server, since this is what most of the cloud runs on. Here, we'll demonstrate how to install and setup Nginx on a cloud server running on Ubuntu 22.04. +The installation processes varies depending upon your OS. It's most common to install Nginx on a Linux server, since this is what most of the cloud runs on. Here, we'll demonstrate how to install and setup Nginx on a cloud server running on Ubuntu 22.04. In case you want to install Nginx on Mac or Windows, try these tutorials: + +- [Install Nginx on MacOS](https://nginxtutorials.com/install-nginx-on-mac/) +- [Install Nginx on Windows](https://medium.com/@chandramuthuraj/installing-nginx-on-windows-a-step-by-step-guide-6750575c63e2) We assume that you have the following: From 2d18adeedd79b1329e3b2c4982a6517ec76f7f99 Mon Sep 17 00:00:00 2001 From: Luke Cheseldine Date: Sun, 26 Nov 2023 22:46:10 -0500 Subject: [PATCH 124/143] add nginx page to development process table of contents --- Topics/Development_Process.md | 67 ++++++++++++++++++++++------------- 1 file changed, 43 insertions(+), 24 deletions(-) diff --git a/Topics/Development_Process.md b/Topics/Development_Process.md index f0efa913a..ea19d283b 100644 --- a/Topics/Development_Process.md +++ b/Topics/Development_Process.md @@ -1,72 +1,91 @@ ## Resources for Development Process + ## Git + ### [Learning Git](./Development_Process/Git/Git.md) + ### [Trunk-Based Development](./Development_Process/Trunk_Development.md) + ### [Django Project Deployment: AWS, Vercel, and Railway](./Development_Process/Django_Deployment_AWS_Railway_Vercel.md) + ### [Automated Frontend Deployment with Vercel](./Development_Process/Frontend_Automated_Deployment_Vercel.md) + ### [Flask Application Deployment on Heroku](./Development_Process/Flask_App_Deployment_Heroku.md) + ### [Quality Assurance Testing](./Development_Process/QA_testing.md) + - [Automated Testing](./Development_Process/Automated_Testing.md) - [Large Language Model (LLM) for Testing and Debugging](./Development_Process/LLM_Testing_Debugging.md) + ### [Getting Started With Docker](./Development_Process/Docker.md) + ### [Getting Started With WSL 2](./Development_Process/WSL.md) +## Nginx + +### [Introduction to Nginx](./Development_Process/Nginx.md) + ## Build requirements + ### [Requirements.txt](./Development_Process/Build_Requirements/Requirements_txt.md) ## React Testing Library + ### [React Testing Library](./Development_Process/React_Testing_Library.md) ## URL Sanitization + ### [URL Sanitization](./Development_Process/URL_Sanitization.md) -## SOLID PRINCIPLES: +## SOLID PRINCIPLES: SOLID is a mnemonic acronym that represents a set of five very important software development principles which lead to code that is easier to read, maintain, and extend, leading to higher-quality software that is easier to evolve over time. The SOLID principles are: - - Single Responsibility Principle (SRP): A class should only have one cause to change, according to the Single Responsibility Principle (SRP). According to this theory, a class ought to have just one duty, which implies that there ought to be just one motivation for change. This makes the class more understandable, maintainable, and reuseable as well as more flexible. +- Single Responsibility Principle (SRP): A class should only have one cause to change, according to the Single Responsibility Principle (SRP). According to this theory, a class ought to have just one duty, which implies that there ought to be just one motivation for change. This makes the class more understandable, maintainable, and reuseable as well as more flexible. + +- Open/Closed Principle (OCP): Software entities (classes, modules, functions, etc.) should be available for extension but closed for modification, according to the available/Closed Principle (OCP). According to this principle, a system should be able to introduce new functionality without requiring changes to the existing code. Interfaces, polymorphism, and generalization are used to accomplish this. - - Open/Closed Principle (OCP): Software entities (classes, modules, functions, etc.) should be available for extension but closed for modification, according to the available/Closed Principle (OCP). According to this principle, a system should be able to introduce new functionality without requiring changes to the existing code. Interfaces, polymorphism, and generalization are used to accomplish this. +- Liskov Substitution Principle (LSP): Subtypes must be able to be used in place of their parent types. According to this concept, it should be possible to swap out objects from a superclass for objects from a subclass without having any negative effects on the program's correctness. This necessitates abiding by the superclass's compact. - - Liskov Substitution Principle (LSP): Subtypes must be able to be used in place of their parent types. According to this concept, it should be possible to swap out objects from a superclass for objects from a subclass without having any negative effects on the program's correctness. This necessitates abiding by the superclass's compact. +- Interface Segregation Principle (ISP): Clients should not be forced to depend on interfaces they do not use. This principle states that a client should not be forced to implement an interface if it does not use all of the methods defined by the interface. This helps to avoid the creation of fat interfaces, which are interfaces that contain more methods than the client needs. - - Interface Segregation Principle (ISP): Clients should not be forced to depend on interfaces they do not use. This principle states that a client should not be forced to implement an interface if it does not use all of the methods defined by the interface. This helps to avoid the creation of fat interfaces, which are interfaces that contain more methods than the client needs. +- Dependency Inversion Principle (DIP): High-level modules should not depend on low-level modules. Both should depend on abstractions. Abstractions should not depend on details. Details should depend on abstractions. This principle suggests that classes should depend on abstractions rather than concrete implementations, which makes the system more flexible and easier to modify. + +## Resource that gives examples of the uses cases of SOLID principles + +LINK : https://www.youtube.com/watch?v=_jDNAf3CzeY + +## Clean Architecture: - - Dependency Inversion Principle (DIP): High-level modules should not depend on low-level modules. Both should depend on abstractions. Abstractions should not depend on details. Details should depend on abstractions. This principle suggests that classes should depend on abstractions rather than concrete implementations, which makes the system more flexible and easier to modify. - - - ## Resource that gives examples of the uses cases of SOLID principles - LINK : https://www.youtube.com/watch?v=_jDNAf3CzeY - - ## Clean Architecture: - A system's design that divides it into logical parts and specifies how those parts may communicate with one another is referred to as clean architecture. The objective is to make the software system easier to design, deploy, operate, and maintain while still keeping as many options open  for as long as possible. Clean Architecture works on the well-defined division of layers. It is important to understand what the different layers are and which layers are allowed to interact with each other. The independence that clean architecute introduced to the a software system is vital since it reduces dependancies within the system. In clean architecture, the elements of the inner most layers should not have any information about the outermost layers. Anything declared in an outer layer must not be used anywhere within the inner layer of the code. -![image](https://user-images.githubusercontent.com/75923742/227027780-b5fbf347-ff78-49fa-a122-8f9ac4ef53d4.png) +![image](https://user-images.githubusercontent.com/75923742/227027780-b5fbf347-ff78-49fa-a122-8f9ac4ef53d4.png) +Some of the layers are (Simplified): + +- Business Rules: -Some of the layers are (Simplified): -- Business Rules: - Entity: A component of our computer system that represents a condensed set of critical business rules that are applied to crucial business data. - Use Case: Gives specifics on the input the user must supply and the output the system must deliver to the user. Additionally, it includes the processing steps required to create the result. -- Entities: Contains functions, variables, and other structures that hold the main objectives of our application, they must be general and have the highest level of rules. -- Interface Adaptors: Responsible for communicating between the layers, takes data in and transforms it such that it can be sent to lower levels. +- Entities: Contains functions, variables, and other structures that hold the main objectives of our application, they must be general and have the highest level of rules. +- Interface Adaptors: Responsible for communicating between the layers, takes data in and transforms it such that it can be sent to lower levels. - Framworks and Drivers: This section contains frameworks and databases responsible for communicating with the interface adapters. +This is only a simplification of what "Clean Architecture" is; the topic is so vast that there have been texts that have been dedicated to this topic. Some resources that can be beneficial in understanding and clearing up any doubts about the topic have been linked below. -This is only a simplification of what "Clean Architecture" is; the topic is so vast that there have been texts that have been dedicated to this topic. Some resources that can be beneficial in understanding and clearing up any doubts about the topic have been linked below. +- Text that goes into greater depth about each layer: -- Text that goes into greater depth about each layer: - - https://dev.to/rubemfsv/clean-architecture-the-concept-behind-the-code-52do#:~:text=The%20main%20rule%20for%20Clean,elements%20of%20an%20outermost%20layer. + - https://dev.to/rubemfsv/clean-architecture-the-concept-behind-the-code-52do#:~:text=The%20main%20rule%20for%20Clean,elements%20of%20an%20outermost%20layer. - Article Summarizing Clean Architecture (Examples and Code) - - https://pusher.com/tutorials/clean-architecture-introduction/ + + - https://pusher.com/tutorials/clean-architecture-introduction/ - 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 + - 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 From 92b88f8c16648fa2a43a7c18c4fc0df2620d1b57 Mon Sep 17 00:00:00 2001 From: ruiting-chen <51133017+ruiting-chen@users.noreply.github.com> Date: Sun, 26 Nov 2023 22:55:01 -0500 Subject: [PATCH 125/143] Update Tech_Stacks.md --- Topics/Tech_Stacks.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index 070e3e3fc..973e719fe 100644 --- a/Topics/Tech_Stacks.md +++ b/Topics/Tech_Stacks.md @@ -19,3 +19,4 @@ ### [Temporal For Workflow Orchestration](./Tech_Stacks/Temporal.md) ### [Learning Cypress](./Tech_Stacks/Cypress.md) ### [Establishing Peer to Peer Connection with WebRTC](./Tech_Stacks/WebRTC.md) +### [Introduction to Unity Basics](./Tech_Stacks/Unity_Intro.md) From 758d324f493e4ffa0cedaa8e71cdd03e9825c41f Mon Sep 17 00:00:00 2001 From: Daniel Qiu Date: Sun, 26 Nov 2023 22:57:18 -0500 Subject: [PATCH 126/143] Added new line for image and added spaces after hashtag --- Topics/Tech_Stacks/Flutter.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Topics/Tech_Stacks/Flutter.md b/Topics/Tech_Stacks/Flutter.md index 73c404369..8fe4c6a6b 100644 --- a/Topics/Tech_Stacks/Flutter.md +++ b/Topics/Tech_Stacks/Flutter.md @@ -22,7 +22,7 @@ Many companies use Flutter to build their applications. Some of these companies ## Why Flutter? Pros and Cons -####Pros: +#### Pros: 1. **Single codebase for all platforms** There is no need to create separate code bases when working on iOS and Android devices. Flutter allows developers to build a single codebase and use it for several platforms such as the web, desktop and mobile. This results in quicker app launch and is cost effective. @@ -31,7 +31,7 @@ Many companies use Flutter to build their applications. Some of these companies 3. **Hot Reload Feature** The ability to hot reload is one of the main benefits of using Flutter. This is for effective cross-platform development so it can complement the nature of Flutter. This feature’s function speeds up application development. Hot reloading allows developers to see the changes they make to the code in real time without losing the state of the app. It is useful when editing the UI of an app. -###Cons: +### Cons: 1. **Dart’s low popularity** It’s a fact that Dart is a reliable programming language since it is fast. It is also true that developers are starting to make it an option. Yet, Dart is still not able to compete with other top programming languages such as Java, Kotlin, etc. However Dart is very similar to C# and Java, which makes it easy for programmers to learn. @@ -71,7 +71,7 @@ The following is a summary from the offical [Flutter Docs](https://docs.flutter. 5. Enter a project name, such as `my_app`, and press **Enter**. 6. 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). - 7. Your file structures should look as follows. + 7. Your file structures should look as follows.
      Final File Structure 4. **Running the App** From 93825b5558cec5de6433e1cc9ed906b5543f5668 Mon Sep 17 00:00:00 2001 From: ruiting-chen <51133017+ruiting-chen@users.noreply.github.com> Date: Sun, 26 Nov 2023 22:58:12 -0500 Subject: [PATCH 127/143] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 8c8e9b172..5db62263b 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,8 @@ Potential Topics-- 7. React Native 1. Set up + 8. Unity + 1. Introduction to Unity Basics - Software Tools 1. Git From 36f9eb11c03199a6b503289441d542a232213831 Mon Sep 17 00:00:00 2001 From: Luke Cheseldine Date: Sun, 26 Nov 2023 22:58:17 -0500 Subject: [PATCH 128/143] add Apache vs Nginx section --- Topics/Development_Process/Nginx.md | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/Topics/Development_Process/Nginx.md b/Topics/Development_Process/Nginx.md index 032871d2b..aea0d8940 100644 --- a/Topics/Development_Process/Nginx.md +++ b/Topics/Development_Process/Nginx.md @@ -12,6 +12,20 @@ Nginx can do many things, like: You can find a more exhaustive list on the [offical Nginx docs](https://nginx.org/en/) +# Nginx vs. Apache + +Apache is another popular webserver that is often used in place of Nginx. Nginx has several advantages over Apache: + +- Due to its asynchronous, event-driven architecture, Nginx tends to have better performance when serving static content and dealing with many concurrent connections +- Nginx's configuration is easier to set up for reverse-proxying and load balancing than Apache, so it is often preferred as a gateway between your application and the public internet. + +There are also advantages to Apache, including: + +- Maturity. Apache has been around for a long time and has a large, stable ecosystem of modules available to extend its use-cases. +- Apache also uses `.htaccess` files for configuration, which some developers argue are simpler than Nginx's configurations + +At the end of the day though, they're both highly reliable, tried-and-true technologies, so there's really no wrong choice. That said, developers tend to prefer Nginx nowadays, since it's more well-known than Apache and has better performance at scale. + # Installation and Setup The installation processes varies depending upon your OS. It's most common to install Nginx on a Linux server, since this is what most of the cloud runs on. Here, we'll demonstrate how to install and setup Nginx on a cloud server running on Ubuntu 22.04. In case you want to install Nginx on Mac or Windows, try these tutorials: @@ -33,7 +47,7 @@ In order to install Nginx on our server, we will first need to be connected to o ## Install Nginx -On your server, run the following commands to refresh your server's package index, and install Nginx onto your server +On your server, run the following commands to refresh your server's package index and install Nginx onto your server: ``` sudo apt update @@ -46,7 +60,7 @@ Now, configure your server's firewall to allow HTTP traffic via Nginx: sudo ufw allow 'Nginx HTTP' ``` -You can confirm HTTP traffic is now allowed with +You can confirm HTTP traffic is now allowed with: ``` sudo ufw status @@ -56,7 +70,6 @@ The output should indicate that HTTP traffic is now allowed, like this: Screenshot 2023-11-22 at 1 05 44 AM - When we installed Nginx with `apt`, the operating system should have started the Nginx service at the end of the installation process. We can confirm Nginx is running by entering: ``` @@ -65,7 +78,6 @@ systemctl status nginx Screenshot 2023-11-22 at 1 08 52 AM - If we ever need to restart or stop the Nginx service, we can do so with `systemctl restart nginx` and `systemctl stop nginx`. Now, let's navigate to our server in the browser, and see what's there. Go to `http://yourdomain.com`, where `yourdomain.com` is the domain name you have pointed at your server. If all goes well, you should see the default Nginx landing page, letting you know that the web server is running! @@ -73,7 +85,9 @@ Now, let's navigate to our server in the browser, and see what's there. Go to `h ![Nginx Landing Page](https://assets.digitalocean.com/articles/nginx_1604/default_page.png) # Next Steps + Now that we have Nginx installed and running on our server, the possibilities are endless. Here's a few ideas: + 1. To configure Nginx as a reverse proxy for an application server like Django or Express, try this [tutorial](https://www.digitalocean.com/community/tutorials/how-to-configure-nginx-as-a-reverse-proxy-on-ubuntu-22-04) from Digital Ocean explaining how to reverse proxy a simple Gunicorn server. 2. To serve static content like prebuilt websites or images using Nginx, try this excellent [tutorial](https://docs.nginx.com/nginx/admin-guide/web-server/serving-static-content/) from the official Nginx website on how to serve static content. 3. To secure Nginx with Let's Encrypt SSL and allow your websites to be accessed over HTTPS, try this [tutorial](https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-20-04) from Digital Ocean on how to set up secure SSL encryption with Nginx. From d3b69f4fbc5ff67c3581e0028da00ddeee76a3f9 Mon Sep 17 00:00:00 2001 From: Daniel Qiu Date: Sun, 26 Nov 2023 23:09:35 -0500 Subject: [PATCH 129/143] Fix hastag to be consistent --- Topics/Tech_Stacks/Flutter.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/Flutter.md b/Topics/Tech_Stacks/Flutter.md index 8fe4c6a6b..787e40cd9 100644 --- a/Topics/Tech_Stacks/Flutter.md +++ b/Topics/Tech_Stacks/Flutter.md @@ -22,7 +22,7 @@ Many companies use Flutter to build their applications. Some of these companies ## Why Flutter? Pros and Cons -#### Pros: +### Pros: 1. **Single codebase for all platforms** There is no need to create separate code bases when working on iOS and Android devices. Flutter allows developers to build a single codebase and use it for several platforms such as the web, desktop and mobile. This results in quicker app launch and is cost effective. @@ -71,7 +71,7 @@ The following is a summary from the offical [Flutter Docs](https://docs.flutter. 5. Enter a project name, such as `my_app`, and press **Enter**. 6. 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). - 7. Your file structures should look as follows.
      + 7. Your file structures should look as follows.
      Final File Structure 4. **Running the App** From fa09286f27204e7a73b3d87a3dc9b39e433f6376 Mon Sep 17 00:00:00 2001 From: ayanaarahman Date: Sun, 26 Nov 2023 23:45:30 -0500 Subject: [PATCH 130/143] Add example for translatable UI elements in Section 4 --- Topics/Software_Engineering/Localization.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Topics/Software_Engineering/Localization.md b/Topics/Software_Engineering/Localization.md index b03ec466d..c34eaa62d 100644 --- a/Topics/Software_Engineering/Localization.md +++ b/Topics/Software_Engineering/Localization.md @@ -37,7 +37,9 @@ The localization process typically involves the following steps: ## 4. Key Technical Aspects of Localization Key technical aspects of localization include: -- **Translatable UI Elements**: Separating translatable content from the code. +- **Translatable UI Elements**: Separating translatable content from the code. + - For example, instead of hardcoding a button label like "Submit" in the code, use a key such as `submit_button_label`. + - This key is then mapped to the appropriate text in separate resource files for each language, like "Soumettre" in a French resource file. - **Text Length Variations**: Accounting for language-specific text length differences. - **Number and Currency Formats**: Adapting to local conventions. - **Date and Time Formats**: Accommodating regional variations. From e95448f605b2c0b862c9badcd71f5b574777146c Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Sun, 26 Nov 2023 23:57:03 -0500 Subject: [PATCH 131/143] address pr comments --- Topics/Tech_Stacks/JSONRPC.md | 27 +++++++++++++++++---------- 1 file changed, 17 insertions(+), 10 deletions(-) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index d62f757b1..31d17cc3d 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -1,25 +1,32 @@ -### JSON-RPC +# JSON-RPC ## Introduction -JSON-RPC is a an approach to building APIs for communication between different software systems. Let's compare it to REST, which is the most common way of developing APIs. JSON-RPC is not as popular, but it offers its own advantages. Like REST, JSON-RPC uses JSON for its data format and uses HTTP as a transport protocol. JSON-RPC focuses on remote procedure calls whereas the more popular REST is more focused on resource manipulation. +JSON-RPC is an approach to building APIs for communication between different software systems. Let's compare it to REST, which is the most common way of developing APIs. JSON-RPC is not as popular, but it offers its own advantages. Like REST, JSON-RPC uses JSON for its data format and uses HTTP as a transport protocol. JSON-RPC focuses on remote procedure calls whereas the more popular REST is more focused on resource manipulation. + +This makes it so that JSON-RPC is a better option in scenarios where remote functions have to be called on a server that require an action result. It's most useful for when complex calculations or calling remote procedures on the server are needed. For example, a good time to use JSON-RPC is transferring money between bank accounts on a remote system. + +REST is generally more useful in situations where actions such as adding data to databases or updating information are needed due to its ability to easily perform CRUD operations. [Read more about the differences between remote procedure calls and REST here](https://nordicapis.com/whats-the-difference-between-rpc-and-rest/). Below is a representation of how REST works. + + +![Rest Visualization](https://www.altexsoft.com/static/blog-post/2023/11/72f74918-0345-4be1-bed3-08d1cfe138cc.webp) -This makes it so JSON-RPC is a better option in scenarios where remote functions have to be called on a server that require an action result. It's most useful for when complex calculations or calling remote procedures on the server are needed. For example, a good time to JSON-RPC is transfering money between bank account on a remote system. -REST is generally more useful in situations where actions such as adding data to databases or updating information are needed due to its ability to easily perform CRUD operations. #### Request and Repsonse of JSON-RPC Calls JSON-RPC calls require two things, which are called request objects and response objects. Request objects are what are sent to the server during a JSON-RPC method call, and the response objects are what the server responds with at the end of the method call. -JSONRPC calls are represented by sending request objects to a server. These request objects contain the method to be called, parameters values that are passed into the method, an id that established by the client, and jsonrpc string that specifies the version of the JSON-RPC protocol. +JSON-RPC calls are represented by sending request objects to a server. These request objects contain the method to be called, parameters values that are passed into the method, an id that established by the client, and JSON-RPC string that specifies the version of the JSON-RPC protocol. Below is a representation of JSON-RPC in action. + +![JSON-RPC Visualization](https://assets-global.website-files.com/5ff66329429d880392f6cba2/61b76e7fdf48bbef0026f39a_JSON%20works.png) -The response object contains a result, which contains the correct value when the method results in a success, an error in cases where the method throws an error, and a jsonrpc string and id that are identical to the one in the request object. +The response object contains a result, which contains the correct value when the method results in a success, an error in cases where the method throws an error, and a JSON-RPC string and id that are identical to the one in the request object. -JSONRPC is very useful for a variety of reasons. It is simple and very straight forward due to its standard of remote procedure calls, making it easy to implement and understand. In addition, it serializes data in JSON format and is able to be implemented in a variety of languages, making it flexible. +JSON-RPC is very useful for a variety of reasons. It is simple and very straight forward due to its standard of remote procedure calls, making it easy to implement and understand. In addition, it serializes data in JSON format and is able to be implemented in a variety of languages, making it flexible. -Here is some basic documentation on JSON-RPC https://www.jsonrpc.org/specification +[Here is some basic documentation on JSON-RPC](https://www.jsonrpc.org/specification) -Read more about the differences between remote procedure calls and rest here https://nordicapis.com/whats-the-difference-between-rpc-and-rest/ +[Here is more on the benefits of JSON-RPC and more comparisons of JSON-RPC with REST](https://rpcfast.com/blog/remote-procedure-calls-what-is-json-rpc) -Here is an example of how to set up JSON-RPC using TypeScript and guide on how to install it using npm. https://www.npmjs.com/package/json-rpc-2.0 \ No newline at end of file +[Here is an example of how to set up JSON-RPC using TypeScript and guide on how to install it using npm](https://www.npmjs.com/package/json-rpc-2.0) \ No newline at end of file From a688fd798d52203d82568fed67b481cf6ea34e4a Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Mon, 27 Nov 2023 00:02:58 -0500 Subject: [PATCH 132/143] simplify terminology --- Topics/Tech_Stacks/JSONRPC.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index 31d17cc3d..6cb0b953f 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -1,9 +1,9 @@ # JSON-RPC ## Introduction -JSON-RPC is an approach to building APIs for communication between different software systems. Let's compare it to REST, which is the most common way of developing APIs. JSON-RPC is not as popular, but it offers its own advantages. Like REST, JSON-RPC uses JSON for its data format and uses HTTP as a transport protocol. JSON-RPC focuses on remote procedure calls whereas the more popular REST is more focused on resource manipulation. +JSON-RPC is an approach to building APIs for communication between different software systems. Let's compare it to REST, which is the most common way of developing APIs. JSON-RPC is not as popular, but it offers its own advantages. Like REST, JSON-RPC uses JSON for its data format and uses HTTP as a transport protocol. JSON-RPC is mainly focused on calling functions or procedures on a remote server and asking this server to perform a certain action. On the other hand, REST is focused on working with and changing data. -This makes it so that JSON-RPC is a better option in scenarios where remote functions have to be called on a server that require an action result. It's most useful for when complex calculations or calling remote procedures on the server are needed. For example, a good time to use JSON-RPC is transferring money between bank accounts on a remote system. +This makes it so that JSON-RPC is a better option in scenarios where remote functions have to be called on a server that require an action result. For example, a good time to use JSON-RPC is transferring money between bank accounts on a remote system. REST is generally more useful in situations where actions such as adding data to databases or updating information are needed due to its ability to easily perform CRUD operations. [Read more about the differences between remote procedure calls and REST here](https://nordicapis.com/whats-the-difference-between-rpc-and-rest/). Below is a representation of how REST works. From 74ef507cd859a1e99e1cc18adc066d227ada9c0f Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Mon, 27 Nov 2023 00:06:16 -0500 Subject: [PATCH 133/143] add info --- Topics/Tech_Stacks/JSONRPC.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index 6cb0b953f..9e123dd44 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -17,13 +17,13 @@ REST is generally more useful in situations where actions such as adding data to JSON-RPC calls require two things, which are called request objects and response objects. Request objects are what are sent to the server during a JSON-RPC method call, and the response objects are what the server responds with at the end of the method call. -JSON-RPC calls are represented by sending request objects to a server. These request objects contain the method to be called, parameters values that are passed into the method, an id that established by the client, and JSON-RPC string that specifies the version of the JSON-RPC protocol. Below is a representation of JSON-RPC in action. +JSON-RPC calls are represented by sending request objects to a server. These request objects contain the method to be called, parameters values that are passed into the method, an id that established by the client, and JSON-RPC string that specifies the version of the JSON-RPC protocol. -![JSON-RPC Visualization](https://assets-global.website-files.com/5ff66329429d880392f6cba2/61b76e7fdf48bbef0026f39a_JSON%20works.png) +The response object contains a result, which contains the correct value when the method results in a success, an error in cases where the method throws an error, and a JSON-RPC string and id that are identical to the one in the request object. Below is a representation of JSON-RPC in action. -The response object contains a result, which contains the correct value when the method results in a success, an error in cases where the method throws an error, and a JSON-RPC string and id that are identical to the one in the request object. +![JSON-RPC Visualization](https://assets-global.website-files.com/5ff66329429d880392f6cba2/61b76e7fdf48bbef0026f39a_JSON%20works.png) -JSON-RPC is very useful for a variety of reasons. It is simple and very straight forward due to its standard of remote procedure calls, making it easy to implement and understand. In addition, it serializes data in JSON format and is able to be implemented in a variety of languages, making it flexible. +JSON-RPC is very useful for a variety of reasons. It is simple and very straight forward due to its standard of remote procedure calls, making it easy to implement and understand. This also makes it so products built with JSON-RPC end up being more scalable. In addition, it serializes data in JSON format and is able to be implemented in a variety of languages, making it flexible. [Here is some basic documentation on JSON-RPC](https://www.jsonrpc.org/specification) From e2b58574bbf73e62c708db609ef2de1c05ca58d0 Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Mon, 27 Nov 2023 00:10:53 -0500 Subject: [PATCH 134/143] add summary sentence --- Topics/Tech_Stacks/JSONRPC.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index 9e123dd44..bef169ad7 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -23,7 +23,11 @@ The response object contains a result, which contains the correct value when the ![JSON-RPC Visualization](https://assets-global.website-files.com/5ff66329429d880392f6cba2/61b76e7fdf48bbef0026f39a_JSON%20works.png) -JSON-RPC is very useful for a variety of reasons. It is simple and very straight forward due to its standard of remote procedure calls, making it easy to implement and understand. This also makes it so products built with JSON-RPC end up being more scalable. In addition, it serializes data in JSON format and is able to be implemented in a variety of languages, making it flexible. +JSON-RPC is very useful for a variety of reasons. It is simple and very straight forward due to its standard of remote procedure calls, making it easy to implement and understand. This also makes it so products built with JSON-RPC end up being more scalable. In addition, it serializes data in JSON format and is able to be implemented in a variety of languages, making it flexible. Furthermore, JSON-RPC has standardized error handling, making debugging and troubleshooting a smoother process. + +Overall, JSON-RPC is a great tool due to its lightweight design and ease of implementation, making it a versatile and efficient choice for remote procedure calls in various applications. + +Below are some more resources related to JSON-RPC [Here is some basic documentation on JSON-RPC](https://www.jsonrpc.org/specification) From bd50923c5e9135a320129f294c861d8aab37359e Mon Sep 17 00:00:00 2001 From: liu-samuel Date: Mon, 27 Nov 2023 00:21:48 -0500 Subject: [PATCH 135/143] add code blocks --- Topics/Tech_Stacks/JSONRPC.md | 42 ++++++++++++++++++++++++++++------- 1 file changed, 34 insertions(+), 8 deletions(-) diff --git a/Topics/Tech_Stacks/JSONRPC.md b/Topics/Tech_Stacks/JSONRPC.md index bef169ad7..42c16e6ba 100644 --- a/Topics/Tech_Stacks/JSONRPC.md +++ b/Topics/Tech_Stacks/JSONRPC.md @@ -1,30 +1,56 @@ # JSON-RPC -## Introduction +### Introduction JSON-RPC is an approach to building APIs for communication between different software systems. Let's compare it to REST, which is the most common way of developing APIs. JSON-RPC is not as popular, but it offers its own advantages. Like REST, JSON-RPC uses JSON for its data format and uses HTTP as a transport protocol. JSON-RPC is mainly focused on calling functions or procedures on a remote server and asking this server to perform a certain action. On the other hand, REST is focused on working with and changing data. This makes it so that JSON-RPC is a better option in scenarios where remote functions have to be called on a server that require an action result. For example, a good time to use JSON-RPC is transferring money between bank accounts on a remote system. -REST is generally more useful in situations where actions such as adding data to databases or updating information are needed due to its ability to easily perform CRUD operations. [Read more about the differences between remote procedure calls and REST here](https://nordicapis.com/whats-the-difference-between-rpc-and-rest/). Below is a representation of how REST works. +REST is generally more useful in situations where actions such as adding data to databases or updating information are needed due to its ability to easily perform CRUD operations. [Read more about the differences between remote procedure calls and REST here](https://nordicapis.com/whats-the-difference-between-rpc-and-rest/). +Below is a representation of how JSON-RPC works. -![Rest Visualization](https://www.altexsoft.com/static/blog-post/2023/11/72f74918-0345-4be1-bed3-08d1cfe138cc.webp) +![JSON-RPC Visualization](https://assets-global.website-files.com/5ff66329429d880392f6cba2/61b76e7fdf48bbef0026f39a_JSON%20works.png) +#### Request and Response of JSON-RPC Calls +JSON-RPC calls require two things, which are called request objects and response objects. Request objects are what are sent to the server during a JSON-RPC method call, and the response objects are what the server responds with at the end of the method call. -#### Request and Repsonse of JSON-RPC Calls +JSON-RPC calls are represented by sending request objects to a server. These request objects contain the method to be called, parameters values that are passed into the method, an id that established by the client, and JSON-RPC string that specifies the version of the JSON-RPC protocol. -JSON-RPC calls require two things, which are called request objects and response objects. Request objects are what are sent to the server during a JSON-RPC method call, and the response objects are what the server responds with at the end of the method call. +Below is an example of a JSON object that is sent to call JSON-RPC methods. -JSON-RPC calls are represented by sending request objects to a server. These request objects contain the method to be called, parameters values that are passed into the method, an id that established by the client, and JSON-RPC string that specifies the version of the JSON-RPC protocol. +``` +{ + "jsonrpc": "2.0" + "method": + "params": { + : + : + ... + }, + "id": 1 +} +``` + +The response object contains a result, which contains the correct value when the method results in a success, an error in cases where the method throws an error, and a JSON-RPC string and id that are identical to the one in the request object. + +Below is an example of a JSON object that is returned from a JSON-RPC method. + +``` +{ + "jsonrpc": "2.0" + : + "id": 1 +} +``` -The response object contains a result, which contains the correct value when the method results in a success, an error in cases where the method throws an error, and a JSON-RPC string and id that are identical to the one in the request object. Below is a representation of JSON-RPC in action. -![JSON-RPC Visualization](https://assets-global.website-files.com/5ff66329429d880392f6cba2/61b76e7fdf48bbef0026f39a_JSON%20works.png) JSON-RPC is very useful for a variety of reasons. It is simple and very straight forward due to its standard of remote procedure calls, making it easy to implement and understand. This also makes it so products built with JSON-RPC end up being more scalable. In addition, it serializes data in JSON format and is able to be implemented in a variety of languages, making it flexible. Furthermore, JSON-RPC has standardized error handling, making debugging and troubleshooting a smoother process. + + Overall, JSON-RPC is a great tool due to its lightweight design and ease of implementation, making it a versatile and efficient choice for remote procedure calls in various applications. Below are some more resources related to JSON-RPC From c1408b0e7304b7eed91de07eeafa3fe0edfae3da Mon Sep 17 00:00:00 2001 From: Samuel Chen Date: Mon, 27 Nov 2023 02:19:36 -0500 Subject: [PATCH 136/143] Update Unity_ML_Agents.md --- Topics/Tech_Stacks/Unity_ML_Agents.md | 44 +++++++++++++++------------ 1 file changed, 25 insertions(+), 19 deletions(-) diff --git a/Topics/Tech_Stacks/Unity_ML_Agents.md b/Topics/Tech_Stacks/Unity_ML_Agents.md index e77120f18..c4ff1e2a5 100644 --- a/Topics/Tech_Stacks/Unity_ML_Agents.md +++ b/Topics/Tech_Stacks/Unity_ML_Agents.md @@ -1,8 +1,8 @@ # Introduction to Unity's ML-Agents Toolkit -Unity's ML-Agents Toolkit, or simply ML Agents, is a package that provides a simple and intuitive way to develop agents capable of interacting with both 2D and 3D environments in Unity. It is a project that aims to bring machine learning together with the many environments that can be easily developed in Unity, and provide an easy and accessible way for game developers to work with machine learning. +Unity's ML-Agents Toolkit, or simply ML Agents, is a package that provides a simple and intuitive way to develop agents capable of interacting with both 2D and 3D environments in Unity. It is a project that aims to bring machine learning together with the many environments that can be easily developed in Unity, and provide an easy and accessible way for game developers to work with machine learning. With ML-Agents, the focus is on giving game developers an opportunity to effortlessly incorporate machine learning capabilities. This toolkit opens up possibilities for training agents to navigate intricate environments and tackle challenging problems that might be impractical to solve manually through traditional algorithms. -In this introductory tutorial, we will explore the basics of reinforcement learning with an example built completely from scratch. +In this introductory tutorial, we will explore the basics of reinforcement learning with an example project built completely from scratch. # Installation Guide Before installing Unity's ML-Agents package, ensure that you installed the following: @@ -11,11 +11,16 @@ Before installing Unity's ML-Agents package, ensure that you installed the follo [Python 3.10.12 or Higher](https://www.python.org/downloads/) -PyTorch, it is recommended that you create a virtual environment to avoid conflicts with any existing packages. +Before we continue with any further installations, it is recommended that you create a virtual environment to avoid any potential conflicts with existing packages. To do so, create and navigate into a folder that will later hold this entire project. \ +To create the virtual environment, run ```py -m venv environment_name```, replacing environment name with the desired name of your environment. For the purposes of this tutorial, I will refer to the virtual environment as "venv". + +Finally, to access the virtual environment, run the following command in your terminal. ```venv\Scripts\Activate```. We will install the following packages in this virtual environment through your terminal. + +**PyTorch** ```pip3 install torch~=1.13.1 -f https://download.pytorch.org/whl/torch_stable.html``` -ML Agents Python Package, once again, install in a virtual environment. +**ML Agents Python Package** ```pip3 install ./ml-agents-envs``` @@ -25,9 +30,7 @@ Finally, within Unity's Package Manager, find and install the ```com.unity.ml-ag # What is Reinforcement Learning? -In this tutorial we will use Unity's ML-Agents Toolkit to explore the basics of reinforcement learning. Reinforcement Learning is a form of machine learning where an agent will learn to make decisions by interacting with an environment. Based on the actions it performs, it will receive a reward that indicates how well it performed. Over time, the goal of the agent is to learn a strategy that maximizes the reward it receives. - -In order to do so, our agent will follow a simple cycle of 3 steps. It will first collect an observation from the environment. Using this information collected, it will perfmr an action. Finally, based on this action, we will give the agent a reward. +In this tutorial we will use Unity's ML-Agents Toolkit to explore the basics of reinforcement learning. Reinforcement Learning is a form of machine learning where an agent will learn to make decisions by interacting with an environment. Based on the actions it performs, it will receive a reward that indicates how well it performed. Over time, the goal of the agent is to learn a strategy that maximizes the reward it receives. In order to do so, our agent will follow a simple cycle of 3 steps. It will first collect an observation from the environment. Using this information collected, it will perform an action. Finally, based on this action, we will give the agent a reward. Our agent will attempt to learn a strategy that will maximize the reward it receives over time. @@ -46,7 +49,7 @@ Finally, to finish this section, create a C# script and attach it to your agent # Actions -Now that our environment is set up, we will assign actions that our agent is able to perform. Begin by opening the ```CollectRewardAgent.cs``` script with any text editor you would like, such as Visual Studio or Visual Studio Code. We will begin by changing our MonoBehaviour into a Agent class. Make the following imports: +Now that our environment is set up, we will assign actions that our agent is able to perform. Begin by opening the ```CollectRewardAgent.cs``` script with any text editor you would like, such as Visual Studio or Visual Studio Code. In order to create an agent, we will change monobehaviour to agent. This means that our new agent will inherit from the **Agent** class, rather than **Monobehavior**. To utilize Unity's MLAgents Toolkit, we will import the following: ``` using UnityEngine; @@ -55,7 +58,7 @@ using Unity.MLAgents.Sensors; using Unity.MLAgents.Actuators; ``` -We will also removing the ```Update()``` and ```Start()``` functions, and add the following overrides: +We will also be removing the ```Update()``` and ```Start()``` functions, and adding the following overrides. These are the functions that control the behaviour of our agent. ```public override void OnEpisodeBegin()``` @@ -65,10 +68,12 @@ We will also removing the ```Update()``` and ```Start()``` functions, and add th ```public void OnTriggerEnter(Collider other)``` -In the following few sections, we will go through and explain each of these functions in detail. We will first begin with ```OnActionReceieved()``` +In the following few sections, we will go through and explain how to implement each of these functions in detail. We will first begin with ```OnActionReceieved()``` Unlike us, our agent is only able to play through making actions through numbers. These numbers will be given through the ActionBuffer. As specified before, we want our agent to be able to move left, right, and stand still. We will accomplish this by assigning each action a number. We begin by obtaining the action from DiscreteActions, or integer actions. We will set up where our AI gets these DiscreteActions later in our observations section. +This function allows our agent to perform actions based on a value it receieves from a ActionBuffer. You could think of the ActionBuffer as a signal, like a traffic light. Depending on the signal receieved, we must implement what our agent ultimately ends up doing, such as stopping if we receieve a red light. + ``` public override void OnActionReceived(ActionBuffers actions) { @@ -86,7 +91,7 @@ public override void OnActionReceived(ActionBuffers actions) } } ``` -While it might make sense for us to assign case 0 to moving left, and either case 1 or 2 to moving right, the agent does not have any context to what each number means. This means that any number can be assigned to any action, and they will all be treated equally by our agent. +In our case, our signal is an integer value from 0 to 2. When receiving a 0, our agent will move left. When receiving a 1, our agent moves right, and when receiving a 2, our agent does nothing. While it might make sense for us to assign case 0 to moving left, and either case 1 or 2 to moving right, the agent does not have any context to what each number means. This means that any number can be assigned to any action, and they will all be treated equally by our agent. Now that our agent is capable of making moves, we will now make it able to make observations. @@ -104,7 +109,7 @@ public class CollectRewardAgent : Agent ... ``` -This will allow us to easily access the position of both reward objects as well. To add an observation, we simply go under the CollectObservations function and call ```Sensor.AddObservation()```. We would like to add the x value of all 3 positions, as our agent will only be capable of moving along the x axis. +This will allow us to easily access the position of both reward objects as well. To add an observation, we simply go under the CollectObservations function and call ```sensor.AddObservation()```. We would like to add the x value of all 3 positions, as our agent will only be capable of moving along the x axis. ``` public override void CollectObservations(VectorSensor sensor) @@ -115,7 +120,7 @@ public override void CollectObservations(VectorSensor sensor) } ``` -Here we are adding the local positions of all 3 objects. I use local position here so that if we move our training setup around, everything stays functional. However, you can adjust this depending on how your training setup may look like. +Here we are adding the local positions of all 3 objects. We use localPositioning here so that our agent will be able to learn properly regardless of where it is located in your Unity environment. Our agent is now able to observe the world around it, as well as make movements left or right. The only thing left to do is to assign a reward function to tell our agent how well it is currently doing. # Rewards @@ -139,7 +144,7 @@ public void OnTriggerEnter(Collider other) From anywhere in Unity, we are able to assign rewards to our agent using the functions ```SetReward()``` and ```AddReward()```. For our purposes, we will set a reward when the agent collides with another object, in this case, either the small or large reward. While the amount you assign to each reward is arbitrary, they should be similar relative to each other. If the rewards are too close to each other, the agent might not learn effectively. Play with your values to find an optimal value. -Something you might have noticed is the ```EndEpisode()``` after we assign the reward. This means that we want our iteration of training to stop when our agent gets its reward, so that it can start training all over again. In order to do so, we have one last function we should call. +Something you might have noticed is the ```EndEpisode()``` after we assign the reward. In Unity's ML Agents, agents train in cycles known as episodes. When an episode ends, the agent takes its assigned reward value and attempts to learn by adjusting its behaviour, so that it can perform better in the future. However, upon ending an episode, we also need to begin a new one. We will accomplish this through the ```OnEpisodeBegin()``` function. ``` public override void OnEpisodeBegin() @@ -160,11 +165,11 @@ public override void OnEpisodeBegin() } ``` -After each iteration, we want to reset our training environment. We can accomplish this by resetting the positions of each object when our training episode begins. This simply resets the position of my agent back to its starting location, and randomly assigns the rewards to place either the smaller or larger reward on either side. Feel free to adjust these values to match your training set up. +After each iteration, we want to reset our training environment. We can accomplish this by resetting the positions of each object when our training episode begins. This simply resets the position of my agent back to its starting location, and randomly assigns the rewards to place either the smaller or larger reward on either side. # Training -And with that, our setup is almost ready for training. Head to the inspector of our Agent. Observe the behavior parameters. There are 2 values that we should change. Feel free to assign a name to this behaviour if you would like to. +And with that, our setup is almost ready for training. Head to the inspector of our Agent. Observe the behavior parameters. There are 2 values that we should change. You could also give the behavior a name to help you identify it down the line. @@ -174,7 +179,7 @@ Next, under the **Actions** section, we want to set the number of Discrete Branc -The final step is to add a Decision Requester. The only parameter here is how often our agent will make an action. Feel free to play with this value. +The final step is to add a Decision Requester. We have implemented actions our agent is able to take, and ways for the agent to be able to observe the environment. The final piece to tie it all together is the decision requester. This component steps in and acts as the bridge connecting its observations in the environment with the strategic decisions it wants to make. It is essentially the brain that makes choices based on what it has learned. With that, we can begin training our agent. We can do so by opening a terminal and activating our virtual environment where we previously installed ML-Agents. To begin training, we will run @@ -191,9 +196,10 @@ Annnnnnnnd voila! You've just learned how to train your first agent in Unity! While the agent might not appear very smart at first, it should eventually learn that moving towards the larger reward is much more rewarding than the smaller one. Over time, you should expect to see the average reward, provided every few minutes in the terminal, to increase. -Feel free to make your own adjustments or create your own training environment. Fun additions you could try to build off of this example can include +To make your training environment fun and unique, you could expand on this simple setup to create a more advanced one. Fun additions you could try to build off of this example can include: - Movement along a 2d square instead of a line +- Rewards placed at different distances away from the agent - A penalty for taking a long time to reach a reward - Additional obstacles your agent must avoid -Feel free to explore both on your own, and with Unity's [official documentation](https://unity-technologies.github.io/ml-agents/ML-Agents-Toolkit-Documentation/) and the [ML-Agents Repo](https://github.com/Unity-Technologies/ml-agents). +For further learning and exploration, you could check out Unity's [official documentation](https://unity-technologies.github.io/ml-agents/ML-Agents-Toolkit-Documentation/) and the [ML-Agents Repo](https://github.com/Unity-Technologies/ml-agents). From 4aa65f3448467e0c3e8f08783d179730f1bf8f17 Mon Sep 17 00:00:00 2001 From: Mahir <103388045+ryukinouu@users.noreply.github.com> Date: Mon, 27 Nov 2023 13:52:23 -0500 Subject: [PATCH 137/143] Update DigitalOcean_Web_App.md --- Topics/Tech_Stacks/DigitalOcean_Web_App.md | 30 ++++++++++++---------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/Topics/Tech_Stacks/DigitalOcean_Web_App.md b/Topics/Tech_Stacks/DigitalOcean_Web_App.md index 5aee69f2e..05419a8b9 100644 --- a/Topics/Tech_Stacks/DigitalOcean_Web_App.md +++ b/Topics/Tech_Stacks/DigitalOcean_Web_App.md @@ -1,37 +1,39 @@ # Deploying a Web Application on DigitalOcean ## Introduction -This tutorial will guide you step-by-step through the process of deploying a web application using DigitalOcean's hosting platform. DigitalOcean, a cloud service provider, provides a straightforward and user-friendly environment for hosting applications, making it an excellent choice for developers to use. +Ever wondered how you could access web applications that were created by other people around the world? DigitalOcean, a prominent cloud service provider, plays a pivotal role in enabling web developers and backend developers alike to host applications on the world wide web. This straightforward and user-friendly environment makes it an excellent choice for developers to deploy their projects, allowing people around the globe to access and interact with their applications. + +This tutorial will guide you through each step in the process of deploying a web application using the platform step-by-step. Whether you're new to web development or seeking a reliable hosting solution, DigitalOcean offers a seamless experience to showcase your projects and make them accessible to a global audience. ## Prerequisites Before you begin, ensure you have the following: -1. **DigitalOcean Account**: Sign up for a DigitalOcean account if you don't have one already. (https://cloud.digitalocean.com/registrations/new) +1. **DigitalOcean Account**: Sign up for a DigitalOcean account if you don't have one already. ([https://cloud.digitalocean.com/registrations/new](link)) 2. **Web Application Code**: Have your web application code ready for production. This could be a Node.js, Python, Ruby on Rails, or any other type of application. Now that you have these two prerequisites, you're ready to launch your web app into the world! Follow these steps: ### Step 1: Create a Droplet -In digital ocean, a "Droplet" refers to a virtual private server (VPS) that you can deploy and manage on DigitalOcean's cloud infrastructure. It's essentially a scalable compute platform with add-on storage, where you can run applications, websites, and other services. +In DigitalOcean, a "Droplet" refers to a virtual private server (VPS) that you can deploy and manage on DigitalOcean's cloud infrastructure. It's essentially a scalable compute platform with add-on storage, where you can run applications, websites, and other services. 1. Log in to your DigitalOcean account. 2. On the left panel, click on "Droplets" under "Manage" and press "Create Droplet". - -Note that droplets do have a price per month to host on their platform, but DigitalOcean provides a free $200 budget for 60 days to newly created accounts. - -2. Choose a data center region. If you'd like the fastest speeds between your device and the web app, choose the closest region to you. -3. Choose your operating system. Ubuntu is a popular choice for operating systems, as it is known to be fast. -4. Select a plan based on your application's requirements. The CPUs and sizes that the platform offers differ in price. -5. Optionally, you can also add an authentication method to your droplet to make it a private web app. -6. Click "Create Droplet." +3. Choose a data center region. If you'd like the fastest speeds between your device and the web app, choose the closest region to you. +4. Choose your operating system. Ubuntu is a popular choice among operating systems, for its performance efficiency and ease of use. +5. Select a plan based on your application's requirements. +6. Optionally, you can also add an authentication method to your droplet to make it a private web app. +7. Click "Create Droplet." +Note that droplets do have a price per month to host on their platform, but DigitalOcean provides a free $200 budget for 60 days to newly created accounts. +After 60 days, however, the pricing differs depending on CPU and storage size you select. + ### Step 2: Access Your Droplet Once the droplet is created, you will receive an email with login details. -Use an SSH client to connect to your droplet. For example, run `ssh root@your_droplet_ip` in the terminal. +Use an SSH client to connect to your droplet. We can accomplish this by running `ssh root@your_droplet_ip` in the terminal. ### Step 3: Update System Packages After logging in, update the system packages: @@ -75,7 +77,7 @@ Replace the following: droplet_ip: The IP address of your droplet. You can get this on the webpage of the droplet. /remote/path: The path on your droplet where you want to copy the files. -3. Enter your password. You'll be prompted to enter the password using the login details from the email previously. +3. Enter your password. You'll be prompted to enter the password using the login details from the email that you recieved from DigitalOcean on Step 2. ### Step 6: Configure Environment Variables Configure your application settings, such as environment variables and database connections. @@ -124,6 +126,6 @@ Congratulations! You have successfully deployed your web application on DigitalO - Regularly back up your application data and configurations to prevent data loss. DigitalOcean provides snapshot and backup features for your droplets. - Enhance the security of your web application by regularly updating software, implementing firewalls, and following security best practices. Monitor your application logs for any suspicious activities. -This tutorial covered the essential steps, but keep in mind that each application may have specific requirements. Refer to DigitalOcean's documentation for more advanced configurations and optimizations. (https://docs.digitalocean.com/) +This tutorial covered the essential steps, but keep in mind that each application may have specific requirements. Refer to DigitalOcean's documentation for more advanced configurations and optimizations, found at [https://docs.digitalocean.com](link). Happy coding! From 3fbc36fc1d24738fd913d46c0659618231d1fd27 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Mon, 27 Nov 2023 15:15:28 -0500 Subject: [PATCH 138/143] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 78dfce3c1..856d6f68d 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -11,6 +11,7 @@ Firestore is a NoSql document database, this means that data is structured hiera ## Setting up Firebase for a Web Application : +``` 1. First, create a firebase project and register that app w/ the project. 2. Once registering is done you'll get a firebase config object to connect your app with firebase reasources 3. In the firebase console follow the installation steps to create a new project @@ -21,7 +22,7 @@ Firestore is a NoSql document database, this means that data is structured hiera - Next type npx firebase login, this will open up a browser to login with your firebase account - Next, type npx firebase init hosting to begin the project setup process - Next, follow the installation steps displayed in the terminal and choose the options you desire - +``` ## Setting Up Firestore 1. Before using in your app, go to the firebase console go to build > Firestore database > Create database >start in test mode >next @@ -111,7 +112,7 @@ Next, we check to see if it exists and if it does, we extract the data. Here you may choose to do something different, like parsing it and displaying it somewhere. -##Making Queries +## Making Queries ``` From e13b626595ac9e5198561f559a806fb297836a27 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Mon, 27 Nov 2023 15:19:36 -0500 Subject: [PATCH 139/143] Update Firebase_and_Firestore.md --- Topics/Tech_Stacks/Firebase_and_Firestore.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Topics/Tech_Stacks/Firebase_and_Firestore.md b/Topics/Tech_Stacks/Firebase_and_Firestore.md index 856d6f68d..866477186 100644 --- a/Topics/Tech_Stacks/Firebase_and_Firestore.md +++ b/Topics/Tech_Stacks/Firebase_and_Firestore.md @@ -23,7 +23,7 @@ Firestore is a NoSql document database, this means that data is structured hiera - Next, type npx firebase init hosting to begin the project setup process - Next, follow the installation steps displayed in the terminal and choose the options you desire ``` - + ## Setting Up Firestore 1. Before using in your app, go to the firebase console go to build > Firestore database > Create database >start in test mode >next 2. Add the following scripts in your app: From 2cab3046e227528a6f238d97780f34124bd40d71 Mon Sep 17 00:00:00 2001 From: Mahir <103388045+ryukinouu@users.noreply.github.com> Date: Mon, 27 Nov 2023 15:41:03 -0500 Subject: [PATCH 140/143] Updated Links --- Topics/Tech_Stacks/DigitalOcean_Web_App.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/DigitalOcean_Web_App.md b/Topics/Tech_Stacks/DigitalOcean_Web_App.md index 05419a8b9..8577ee755 100644 --- a/Topics/Tech_Stacks/DigitalOcean_Web_App.md +++ b/Topics/Tech_Stacks/DigitalOcean_Web_App.md @@ -8,7 +8,7 @@ This tutorial will guide you through each step in the process of deploying a web ## Prerequisites Before you begin, ensure you have the following: -1. **DigitalOcean Account**: Sign up for a DigitalOcean account if you don't have one already. ([https://cloud.digitalocean.com/registrations/new](link)) +1. **DigitalOcean Account**: [https://cloud.digitalocean.com/registrations/new](Sign up) for a DigitalOcean account if you don't have one already. 2. **Web Application Code**: Have your web application code ready for production. This could be a Node.js, Python, Ruby on Rails, or any other type of application. @@ -126,6 +126,6 @@ Congratulations! You have successfully deployed your web application on DigitalO - Regularly back up your application data and configurations to prevent data loss. DigitalOcean provides snapshot and backup features for your droplets. - Enhance the security of your web application by regularly updating software, implementing firewalls, and following security best practices. Monitor your application logs for any suspicious activities. -This tutorial covered the essential steps, but keep in mind that each application may have specific requirements. Refer to DigitalOcean's documentation for more advanced configurations and optimizations, found at [https://docs.digitalocean.com](link). +This tutorial covered the essential steps, but keep in mind that each application may have specific requirements. Refer to DigitalOcean's [https://docs.digitalocean.com](documentation) for more advanced configurations and optimizations. Happy coding! From 0dce35c5a90cf8620d9eea5e9afd16f946933789 Mon Sep 17 00:00:00 2001 From: Mahir <103388045+ryukinouu@users.noreply.github.com> Date: Mon, 27 Nov 2023 15:41:56 -0500 Subject: [PATCH 141/143] Fixed links 2 --- Topics/Tech_Stacks/DigitalOcean_Web_App.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Topics/Tech_Stacks/DigitalOcean_Web_App.md b/Topics/Tech_Stacks/DigitalOcean_Web_App.md index 8577ee755..8af05f7b6 100644 --- a/Topics/Tech_Stacks/DigitalOcean_Web_App.md +++ b/Topics/Tech_Stacks/DigitalOcean_Web_App.md @@ -8,7 +8,7 @@ This tutorial will guide you through each step in the process of deploying a web ## Prerequisites Before you begin, ensure you have the following: -1. **DigitalOcean Account**: [https://cloud.digitalocean.com/registrations/new](Sign up) for a DigitalOcean account if you don't have one already. +1. **DigitalOcean Account**: [Sign up](https://cloud.digitalocean.com/registrations/new) for a DigitalOcean account if you don't have one already. 2. **Web Application Code**: Have your web application code ready for production. This could be a Node.js, Python, Ruby on Rails, or any other type of application. @@ -126,6 +126,6 @@ Congratulations! You have successfully deployed your web application on DigitalO - Regularly back up your application data and configurations to prevent data loss. DigitalOcean provides snapshot and backup features for your droplets. - Enhance the security of your web application by regularly updating software, implementing firewalls, and following security best practices. Monitor your application logs for any suspicious activities. -This tutorial covered the essential steps, but keep in mind that each application may have specific requirements. Refer to DigitalOcean's [https://docs.digitalocean.com](documentation) for more advanced configurations and optimizations. +This tutorial covered the essential steps, but keep in mind that each application may have specific requirements. Refer to DigitalOcean's [documentation](https://docs.digitalocean.com) for more advanced configurations and optimizations. Happy coding! From 5357d6f9a4a732d0f4cacd52e2621a79db43c507 Mon Sep 17 00:00:00 2001 From: NicholasMacasaet <113042065+NicholasMacasaet@users.noreply.github.com> Date: Mon, 27 Nov 2023 15:42:43 -0500 Subject: [PATCH 142/143] Update Tech_Stacks.md --- Topics/Tech_Stacks.md | 1 - 1 file changed, 1 deletion(-) diff --git a/Topics/Tech_Stacks.md b/Topics/Tech_Stacks.md index 50a1e66da..b52785347 100644 --- a/Topics/Tech_Stacks.md +++ b/Topics/Tech_Stacks.md @@ -18,4 +18,3 @@ ### [React Components Guide](./Tech_Stacks/React_Components.md) ### [Temporal For Workflow Orchestration](./Tech_Stacks/Temporal.md) ### [Learning Cypress](./Tech_Stacks/Cypress.md) -### [Learning Firebase Installation and Utilzing Firestore](./Tech_Stacks/Firebase_and_Firestore.md) From 0811b47b4af4730020a0e8113b455f3a69cadd86 Mon Sep 17 00:00:00 2001 From: Mahir <103388045+ryukinouu@users.noreply.github.com> Date: Mon, 27 Nov 2023 15:44:18 -0500 Subject: [PATCH 143/143] Fixed spacing --- Topics/Tech_Stacks/DigitalOcean_Web_App.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Topics/Tech_Stacks/DigitalOcean_Web_App.md b/Topics/Tech_Stacks/DigitalOcean_Web_App.md index 8af05f7b6..2a418ea21 100644 --- a/Topics/Tech_Stacks/DigitalOcean_Web_App.md +++ b/Topics/Tech_Stacks/DigitalOcean_Web_App.md @@ -72,9 +72,13 @@ Transfer your application files to the droplet using SCP or any other method. To ``` Replace the following: + your_application_directory: The local path to your application code. + user: The username used to log in to your droplet. + droplet_ip: The IP address of your droplet. You can get this on the webpage of the droplet. + /remote/path: The path on your droplet where you want to copy the files. 3. Enter your password. You'll be prompted to enter the password using the login details from the email that you recieved from DigitalOcean on Step 2.