<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Atharva Shirdhankar</title>
    <description>The latest articles on DEV Community by Atharva Shirdhankar (@hey_atharva).</description>
    <link>https://dev.to/hey_atharva</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F669994%2F7d1dc1c4-14bb-4bb8-8bc1-dd576cf2e6b9.png</url>
      <title>DEV Community: Atharva Shirdhankar</title>
      <link>https://dev.to/hey_atharva</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/hey_atharva"/>
    <language>en</language>
    <item>
      <title>BlueVision : AI Workflow Intelligence for All Developers</title>
      <dc:creator>Atharva Shirdhankar</dc:creator>
      <pubDate>Mon, 16 Feb 2026 07:07:03 +0000</pubDate>
      <link>https://dev.to/hey_atharva/bluevision-ai-workflow-intelligence-for-all-developers-e2a</link>
      <guid>https://dev.to/hey_atharva/bluevision-ai-workflow-intelligence-for-all-developers-e2a</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github-2026-01-21"&gt;GitHub Copilot CLI Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built BlueVision, an AI-powered workflow assistant for developers using GitHub Copilot CLI.&lt;/p&gt;

&lt;p&gt;BlueVision runs in the terminal and helps developers understand commands, fix errors, refactor code, and safely execute risky operations — all in a structured and calm way.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The goal is simple:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Help developers stay focused and reduce cognitive overload while working in the terminal.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Problem&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;As developers, we constantly deal with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Long error messages&lt;/li&gt;
&lt;li&gt;Confusing stack traces&lt;/li&gt;
&lt;li&gt;Complex command-line tools&lt;/li&gt;
&lt;li&gt;Multiple tasks at the same time&lt;/li&gt;
&lt;li&gt;Pressure to fix things quickly&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When something breaks, it rarely breaks in just one place.&lt;/p&gt;

&lt;p&gt;We often see:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;One error in the terminal&lt;/li&gt;
&lt;li&gt;Another issue in logs&lt;/li&gt;
&lt;li&gt;A failing test&lt;/li&gt;
&lt;li&gt;A deployment warning&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;All at once.&lt;/p&gt;

&lt;p&gt;This creates cognitive overload.&lt;/p&gt;

&lt;p&gt;Instead of focusing on solving one problem properly, we jump between errors. We Google things. We open multiple tabs. We try random fixes.&lt;/p&gt;

&lt;p&gt;Our brain is not designed to deeply process 5 problems at the same time.&lt;/p&gt;

&lt;p&gt;And that’s where productivity drops.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The Insight&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Humans perform better when they:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Focus on one task at a time&lt;/li&gt;
&lt;li&gt;Receive structured guidance&lt;/li&gt;
&lt;li&gt;See simplified explanations&lt;/li&gt;
&lt;li&gt;Work step-by-step&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Even though AI tools exist, most of them still dump a lot of information at once.&lt;/p&gt;

&lt;p&gt;What developers need is not just AI answers.&lt;/p&gt;

&lt;p&gt;They need:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Clear structure&lt;/li&gt;
&lt;li&gt;Reduced noise&lt;/li&gt;
&lt;li&gt;Safe guidance&lt;/li&gt;
&lt;li&gt;One problem at a time&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  The Solution: BlueVision
&lt;/h3&gt;

&lt;p&gt;BlueVision uses GitHub Copilot CLI in the background, but adds structure and safety on top of it.&lt;/p&gt;

&lt;p&gt;It helps developers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Explain commands clearly&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Fix errors step-by-step&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Convert natural language into safe terminal commands&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Analyze code and suggest refactoring improvements&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Check their current Git progress and suggest next steps&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Execute risky commands safely with confirmation and risk analysis&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It also includes a Calm Mode and accessibility-focused output that reduces aggressive language and presents information in smaller, clearer sections.&lt;/p&gt;

&lt;p&gt;Instead of overwhelming the developer with information, BlueVision organizes it.&lt;/p&gt;

&lt;p&gt;Instead of jumping between issues, BlueVision encourages solving one problem at a time.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why This Matters&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Productivity is not just about speed.&lt;/p&gt;

&lt;p&gt;It’s about:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Clarity&lt;/li&gt;
&lt;li&gt;Focus&lt;/li&gt;
&lt;li&gt;Mental energy&lt;/li&gt;
&lt;li&gt;Reduced stress&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When developers feel overwhelmed, mistakes increase.&lt;/p&gt;

&lt;p&gt;BlueVision aims to reduce that overload by turning the terminal into a guided assistant instead of a chaotic stream of errors.&lt;/p&gt;

&lt;p&gt;It brings structure to the workflow.&lt;/p&gt;

&lt;p&gt;It helps developers think clearly.&lt;/p&gt;

&lt;p&gt;And that makes them more productive.&lt;/p&gt;

&lt;h3&gt;
  
  
  How It Works
&lt;/h3&gt;

&lt;p&gt;BlueVision runs in the terminal and uses GitHub Copilot CLI in the background.&lt;/p&gt;

&lt;p&gt;When a developer runs a command like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;explain&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;fix&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;intent&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;safe&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;devcheckin&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;refactor&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;scan-issue&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;pull-req&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;BlueVision:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Collects the relevant context (command, error, file, or git state).&lt;/li&gt;
&lt;li&gt;Builds a structured and clear prompt.&lt;/li&gt;
&lt;li&gt;Sends it to GitHub Copilot CLI.&lt;/li&gt;
&lt;li&gt;Receives the response.&lt;/li&gt;
&lt;li&gt;Reformats it into a calm, structured, and easy-to-read output.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Instead of dumping raw AI output, BlueVision organizes the response into:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Clear sections&lt;/li&gt;
&lt;li&gt;Short bullet points&lt;/li&gt;
&lt;li&gt;Step-by-step guidance&lt;/li&gt;
&lt;li&gt;Risk awareness when needed&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It adds a safety layer before executing risky commands and encourages solving one problem at a time.&lt;/p&gt;

&lt;p&gt;In short:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Copilot provides intelligence.&lt;br&gt;
BlueVision provides structure, safety, and clarity.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Key Features
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;ExplainCommand&lt;/strong&gt;&lt;br&gt;
Understand any terminal command in plain English.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;IntentCLI&lt;/strong&gt;&lt;br&gt;
Convert natural language into safe shell commands.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;ErrorWhisperer (fix)&lt;/strong&gt;&lt;br&gt;
Analyze error messages and get structured, step-by-step solutions.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;RefactorAssist&lt;/strong&gt;&lt;br&gt;
Review code and suggest improvements for clarity and maintainability.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;SafeExecution&lt;/strong&gt;&lt;br&gt;
Analyze risky commands before running them and require confirmation.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;DevCheckin&lt;/strong&gt;&lt;br&gt;
Understand your current Git progress and get suggestions for next steps.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;ContainerAware&lt;/strong&gt;&lt;br&gt;
Detect whether you are inside Docker, Codespaces, or local environment.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;CalmMode&lt;/strong&gt;&lt;br&gt;
Reduce harsh wording and present information in a more structured way.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Accessibility-Focused Output&lt;/strong&gt;&lt;br&gt;
Break complex information into smaller sections to reduce cognitive overload.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;ScanIssue&lt;/strong&gt;&lt;br&gt;
Summarize GitHub issues and suggest maintainer actions directly from the terminal.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;PullRequestReview&lt;/strong&gt;&lt;br&gt;
Analyze pull requests, assess risk, and generate structured AI-assisted review feedback.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How It Helps Developers with Special Disabilities
&lt;/h2&gt;

&lt;p&gt;Many developer tools assume that everyone processes information in the same way.&lt;/p&gt;

&lt;p&gt;But that is not true.&lt;/p&gt;

&lt;p&gt;Some developers may experience:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;ADHD&lt;/li&gt;
&lt;li&gt;Dyslexia&lt;/li&gt;
&lt;li&gt;Autism spectrum conditions&lt;/li&gt;
&lt;li&gt;Anxiety under high-pressure debugging&lt;/li&gt;
&lt;li&gt;Cognitive fatigue&lt;/li&gt;
&lt;li&gt;Visual processing challenges&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;BlueVision helps by:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Breaking down complex explanations into smaller steps&lt;/li&gt;
&lt;li&gt;Avoiding overwhelming walls of text&lt;/li&gt;
&lt;li&gt;Reducing aggressive or alarming language&lt;/li&gt;
&lt;li&gt;Encouraging single-task focus&lt;/li&gt;
&lt;li&gt;Structuring information clearly and predictably&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead of flooding the user with information, it guides them calmly.&lt;/p&gt;

&lt;p&gt;This makes the terminal less stressful and more accessible — not only for developers with disabilities, but for everyone.&lt;/p&gt;

&lt;p&gt;Because accessibility improvements benefit all users.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;Github Repo : &lt;a href="https://github.com/StarTrooper08/blue-vision" rel="noopener noreferrer"&gt;https://github.com/StarTrooper08/blue-vision&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🚀 &lt;strong&gt;Try It Instantly with GitHub Codespaces&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;BlueVision is fully compatible with GitHub Codespaces.&lt;/p&gt;

&lt;p&gt;You can launch it directly from the repository without installing anything locally:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;No manual setup&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;No dependency conflicts&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Pre-configured development environment&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;GitHub Copilot CLI ready inside the container&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For developers with cognitive disabilities, ADHD, or those who find complex environment setup overwhelming, removing installation and configuration steps significantly reduces mental load.&lt;/p&gt;

&lt;p&gt;This makes BlueVision easier to try, easier to contribute to, and more accessible to everyone.&lt;/p&gt;

&lt;h2&gt;
  
  
  🚀 Feature Demo
&lt;/h2&gt;

&lt;p&gt;Below are real examples of how BlueVision improves the developer workflow directly inside the terminal.&lt;/p&gt;




&lt;h3&gt;
  
  
  🔎 1. Explain Complex Commands
&lt;/h3&gt;

&lt;p&gt;Understanding CLI tools like Docker, Git, or Kubernetes can be overwhelming.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example 1 :&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bv explain &lt;span class="s2"&gt;"SELECT Orders.OrderID, Customers.CustomerName, Orders.OrderDate
FROM Orders
INNER JOIN Customers ON Orders.CustomerID=Customers.CustomerID;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;This is **not a shell command** – it's a **SQL query** used for database operations.

## What It Does
Retrieves order information by combining data from two database tables (`Orders` and `Customers`), showing only records where a customer ID exists in both tables.

## Component Breakdown

1. **SELECT Orders.OrderID, Customers.CustomerName, Orders.OrderDate**
   - Specifies which columns to retrieve from the result

2. **FROM Orders**
   - Primary table to query from

3. **INNER JOIN Customers**
   - Combines rows from `Orders` with matching rows from `Customers`
   - INNER JOIN only returns rows where a match exists in BOTH tables

4. **ON Orders.CustomerID=Customers.CustomerID**
   - Join condition: matches records where CustomerID values are equal in both tables

## Risks

- **Excludes unmatched data**: Orders without a matching customer (orphaned records) won't appear
- **Performance**: Large tables without proper indexes on CustomerID can cause slow queries
- **Missing data**: If customer records are deleted but orders remain, those orders become invisible

## Typical Use Cases

- Generating customer order reports
- Creating invoices with customer details
- Analyzing purchase history per customer
- Data validation (finding orders with valid customer references)
- Business intelligence dashboards combining relational data

**To execute this in a shell**, you'd use a database client like:
bash
mysql -u username -p database_name -e "SELECT..."
psql -d database_name -c "SELECT..."
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;**Example 2 : &lt;/p&gt;

&lt;p&gt;Understanding unfamiliar code can slow down development — especially in large or legacy projects.&lt;/p&gt;

&lt;p&gt;BlueVision allows developers to explain specific lines of code directly from the terminal.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bv explain line 28 of bluevision.sh

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;● Read bluevision.sh lines 20-35
  └ 16 lines read

## Explanation of Line 28

**1. What this line does:**
The line `if [ -z "$COMMAND" ]; then` checks if the `$COMMAND` variable is empty or has zero length. The `-z` test returns true if the string is empty.

**2. Why it might be used:**
This is a defensive check to provide a default behavior when the user runs the script without any arguments. If no command is specified (line 25 assigns `$1`, the first argument), the script defaults to showing help (line 29) rather than failing or doing nothing.

**3. Potential concerns:**
- **Whitespace-only values:** A command consisting only of spaces would pass this check (not zero-length) but might be invalid. Consider using `[ -z "$COMMAND" ] || [ -z "${COMMAND// }" ]` to catch whitespace.
- **Missing quotes:** The quotes around `"$COMMAND"` are essential here. Without them, an empty variable would cause a syntax error in the test.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;BlueVision:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Explains what the command does&lt;/li&gt;
&lt;li&gt;Breaks down important parts&lt;/li&gt;
&lt;li&gt;Highlights possible risks&lt;/li&gt;
&lt;li&gt;Shows when it should be used&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead of searching documentation, you get a structured explanation instantly.&lt;/p&gt;




&lt;h3&gt;
  
  
  🧠 2. Guided Debugging (Step-by-Step Fixes)
&lt;/h3&gt;

&lt;p&gt;When errors occur, developers often get stuck reading long stack traces.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bv debug &lt;span class="s2"&gt;"ModuleNotFoundError: No module named requests"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; Starting Guided Debug Session...

## ModuleNotFoundError: No module named requests

### 1. What This Means
Python cannot find the `requests` library in the current environment. The code is trying to `import requests`, but the package isn't installed.

### 2. Most Likely Root Cause
- The `requests` package is not installed in the active Python environment
- Or you're using a different Python interpreter than where `requests` is installed

### 3. Step 1: Install requests
bash
pip install requests


**If using Python 3 specifically:**
bash
pip3 install requests


### 4. Step 2: Check Python/pip alignment
**Verify which Python is running:**
bash
python --version
which python


**Install using the specific Python:**
bash
python -m pip install requests
# or
python3 -m pip install requests


### 5. Step 3: Virtual environment issues
**If using venv/virtualenv:**
bash
# Activate your virtual environment first
source venv/bin/activate  # Linux/Mac
# or
venv\Scripts\activate     # Windows

# Then install
pip install requests


**If no venv exists, create one:**
bash
python -m venv venv
source venv/bin/activate
pip install requests


### 6. When to Investigate Deeper
Stop and investigate if:
- ✋ `pip install requests` succeeds but error persists → Multiple Python installations conflict
- ✋ Permission errors occur → May need `--user` flag or sudo (not recommended for venv)
- ✋ Using IDE (VS Code, PyCharm) → Check interpreter selection in IDE settings
- ✋ In production/containers → Check Dockerfile or requirements.txt
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;BlueVision:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Explains what the error means&lt;/li&gt;
&lt;li&gt;Identifies the likely root cause&lt;/li&gt;
&lt;li&gt;Suggests Step 1 to fix it&lt;/li&gt;
&lt;li&gt;Suggests what to try next if it fails&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This turns debugging into a guided, structured process instead of guesswork.&lt;/p&gt;




&lt;h3&gt;
  
  
  🔁 3. Convert Natural Language to Safe Commands
&lt;/h3&gt;

&lt;p&gt;Sometimes you know what you want to do, but not the exact command.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bv intent &lt;span class="s2"&gt;"remove unused docker images"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;## Shell Command

bash
docker image prune -a


## Explanation

Removes all unused Docker images (images not associated with any container). The `-a` flag removes all unused images, not just dangling ones (untagged images).

## Risks

- **Data loss**: Removes images you might need later, requiring re-download/rebuild
- **Storage temporarily increases**: If you remove and rebuild, you'll use more space during rebuild
- **No recovery**: Deleted images cannot be recovered (must pull/build again)

---

**Safer alternative** (removes only dangling images):
bash
docker image prune


**Add `-f` to skip confirmation prompt**:
bash
docker image prune -a -f

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;BlueVision:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Generates the correct shell command&lt;/li&gt;
&lt;li&gt;Explains what it does&lt;/li&gt;
&lt;li&gt;Warns about potential side effects&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This reduces the need to search online for CLI syntax.&lt;/p&gt;




&lt;h3&gt;
  
  
  🛡 4. Safe Execution with Risk Analysis
&lt;/h3&gt;

&lt;p&gt;Running destructive commands in the terminal can be dangerous.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bv safe &lt;span class="s2"&gt;"rm -rf /"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🔎 Analyzing command safety...

❌ This command attempts to remove the root directory.
Execution blocked for safety.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;BlueVision:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Analyzes the command&lt;/li&gt;
&lt;li&gt;Detects dangerous patterns&lt;/li&gt;
&lt;li&gt;Blocks catastrophic commands&lt;/li&gt;
&lt;li&gt;Requires confirmation for high-risk actions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This adds an AI safety layer before execution.&lt;/p&gt;




&lt;h3&gt;
  
  
  📊 5. Developer Workflow Awareness (Git)
&lt;/h3&gt;

&lt;p&gt;Understanding repository state is critical for productivity.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bv devcheckin
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;● List directory .
  └ 9 files found

● Read README.md
  └ 2 lines read

● Check recent commit history and changes
  $ cd /workspaces/blue-vision &amp;amp;&amp;amp; git --no-pager log --oneline -5 &amp;amp;&amp;amp; echo "---" &amp;amp;&amp;amp; git --no-pager
  diff HEAD~2..HEAD --stat
  └ 13 lines...

● List directory commands
  └ 8 files found

● Read bluevision.sh lines 1-50
  └ 50 lines read

● View latest commit details
  $ cd /workspaces/blue-vision &amp;amp;&amp;amp; git --no-pager show d696e92 --stat
  └ 11 lines...

## Development Context Analysis

### 1. **What You're Working On**
**BlueVision** - An AI-powered CLI workflow tool for developers that integrates with GitHub Copilot. You've just added two new features:
- **guideddebug**: Interactive debugging assistance
- **githuman**: Human-friendly git operations
- Recently polished the **safe** command and **calm** (accessibility) features

### 2. **Possible Risks or Blockers**
- ⚠️ **Minimal documentation**: README has only 2 lines - users won't know how to use the 8 commands
- ⚠️ **No tests**: No test directory visible - new features lack validation
- ⚠️ **Fast-paced feature additions**: 3+ features added rapidly without integration testing
- 🔍 **Unknown stability**: The "safe" and "calm" scripts underwent polishing - may need verification

### 3. **Small, Logical Next Step**
**Document the new commands** - Add usage examples for `guideddebug` and `githuman` to the README, plus a command overview section. This helps:
- Validate the features work as designed
- Make the tool usable by others
- Force you to think through edge cases

### 4. **Cleanup/Improvement Suggestions**
- Add a `--help` flag handler for each command
- Create a `/docs` folder for detailed command documentation
- Add a CHANGELOG.md to track feature additions
- Consider adding basic smoke tests (even just shell script assertions)
- The main script could benefit from better error handling for unknown commands
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;BlueVision:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reviews recent commits&lt;/li&gt;
&lt;li&gt;Suggests next logical steps&lt;/li&gt;
&lt;li&gt;Encourages better commit practices&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is especially helpful for open-source contributors.&lt;/p&gt;




&lt;h3&gt;
  
  
  ♻ 6. Code Refactoring Assistance
&lt;/h3&gt;

&lt;p&gt;Improving code readability and structure is easier with guidance.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bv refactor app.py
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;♻ Analyzing file for refactoring improvements...

## Code Review: Refactoring Suggestions

### 1. **Code Structure**

**Issues:**
- All business logic, UI, and data operations mixed in `main()`
- No separation between data layer, business layer, and presentation layer

**Suggestions:**
- Extract menu display logic into a separate function
- Create a `UserService` class to handle API interactions
- Create a `DataRepository` class for file operations
- Keep `main()` as a simple orchestrator

---

### 2. **Naming Improvements**

**Issues:**
- `getData()` / `saveData()` → Too generic
- `d`, `f`, `r`, `id` → Single-letter variables
- Function names not following PEP 8 (should be `snake_case`)

**Suggestions:**

getData()     → get_saved_user_data() or read_user_cache()
saveData()    → save_user_data() or cache_user_data()
fetchUser()   → fetch_user_by_id()
d             → data or user_data
f             → file or file_handle
r             → response
id            → user_id


---

### 3. **Error Handling**

**Critical Issues:**
- No exception handling for file I/O (permissions, disk full)
- No handling for HTTP errors (404, 500, network timeout)
- No validation of user input (non-numeric IDs)
- Unsafe dictionary access: `user["name"]` can raise KeyError

**Suggestions:**
python
# File operations need try-except
try:
    with open(DATA_FILE, "r") as f:
        return f.read()
except FileNotFoundError:
    return ""
except IOError as e:
    # Handle error appropriately

# HTTP requests need error handling
response.raise_for_status()  # Check for HTTP errors
if response.status_code == 200:
    user_data = response.json()
    # Validate JSON structure before accessing

# Input validation
if not user_id.isdigit():
    print("Error: User ID must be numeric")


---

### 4. **Separation of Concerns**

**Issues:**
- `main()` handles UI, business logic, and data persistence
- File operations directly in business logic
- No abstraction layers

**Suggestions:**
- **Data Layer**: Class/module for file operations
- **Service Layer**: Class for API calls and business logic
- **UI Layer**: Functions for user interaction and display
- **Main**: Orchestrate the flow only
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;BlueVision:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reviews the file&lt;/li&gt;
&lt;li&gt;Suggests structural improvements&lt;/li&gt;
&lt;li&gt;Recommends clearer naming and patterns&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This supports maintainability and clean code practices.&lt;/p&gt;




&lt;h3&gt;
  
  
  🧘 7. Accessibility Mode
&lt;/h3&gt;

&lt;p&gt;For developers who prefer simplified output:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bv &lt;span class="nt"&gt;--accessible&lt;/span&gt; explain &lt;span class="s2"&gt;"kubectl delete pod"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🔵 Accessible Mode Enabled
----------------------------------------

# kubectl delete pod

## What It Does
- Removes a running pod from your Kubernetes cluster
- Terminates all containers inside the pod
- Frees up the resources the pod was using
- **Note**: This command is incomplete - it needs a pod name (e.g., `kubectl delete pod my-pod`)


----------------------------------------
Output simplified for clarity.
Use without --accessible for full detail.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;BlueVision:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Uses simpler language&lt;/li&gt;
&lt;li&gt;Breaks output into small sections&lt;/li&gt;
&lt;li&gt;Reduces information density&lt;/li&gt;
&lt;li&gt;Encourages step-by-step understanding&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This helps reduce cognitive overload and makes terminal workflows more inclusive.&lt;/p&gt;

&lt;h3&gt;
  
  
  📊 8. GitHuman – Maintainer Intelligence
&lt;/h3&gt;

&lt;p&gt;Open-source maintainers often struggle with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Poor commit messages&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Inconsistent contribution patterns&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Hard-to-review changes&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;With BlueVision:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bv githuman
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt; Analyzing recent commit history...

● Get last 10 commits
  $ git --no-pager log --oneline -10
  └ 5 lines...

● Get detailed commit messages
  $ git --no-pager log --format="%h %s%n%b" -10
  └ 8 lines...

## Commit Message Quality Analysis

### **Observations:**
1. **Inconsistent capitalization** - Mix of lowercase ("added", "polished", "initial") and title case ("Initial commit")
2. **Vague descriptions** - "polished" and "added" don't explain *what changed* or *why*
3. **Typos/spacing** - Extra space in "added :" suggests formatting issues
4. **No conventional format** - Missing type prefixes (feat:, fix:, docs:)
5. **No commit bodies** - Zero context or explanation for any change

### **Does NOT Follow Good Practices:**
- ❌ Imperative mood (should be "Add" not "added", "Polish" not "polished")
- ❌ Clear, descriptive summaries
- ❌ Conventional commits format
- ❌ Explanatory bodies for non-trivial changes

### **Suggestions:**
1. **Use conventional commits**: `feat: add guided debug and githuman features`
2. **Write in imperative mood**: "Add feature" not "added feature"
3. **Be specific**: Instead of "polished", describe what was improved
4. **Add bodies for complex changes**: Explain the *why* and *what*
5. **Keep first line under 50 chars**, body wrapped at 72

### **Recommendations:**
- Adopt a commit message template or linter (e.g., commitlint)
- Consider semantic versioning triggers (feat/fix/BREAKING)
- Each commit should answer: *What* changed and *why* it matters
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;BlueVision:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Analyzes recent commit history&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Reviews commit message quality&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Suggests improvements&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Encourages better maintainability practices&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It acts like an AI assistant for repository hygiene.&lt;/p&gt;

&lt;p&gt;This helps:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Open-source maintainers&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Contributors writing better commits&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Teams improving collaboration standards&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  📂9. Scan and Summarize GitHub Issues
&lt;/h2&gt;

&lt;p&gt;Open-source maintainers often spend time reading long issue threads just to understand the actual problem.&lt;/p&gt;

&lt;p&gt;BlueVision simplifies that process.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bv scan-issue chainguard-dev/apko 2059
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;📂 Fetching issue #2059 from chainguard-dev/apko...

## Issue Analysis

### 1. Summary
Building a container with apko using Alpine edge repositories results in an unusable container. Running `apk info` inside fails with "v2 database format error" indicating the apk database was written incorrectly.

### 2. Main Technical Problem
- **Root cause**: The `i:` (install_if) field in the generated APK database index appears to be serialized with brackets `[]` (array format)
- **Expected**: According to apk documentation, `i:` should be a space-concatenated single line, not an array
- **Impact**: Incompatible database format prevents apk-tools from reading the package database
- **Likely location**: `pkg/apk/apk/apkindex.go` (per commenter suggestion)

### 3. Clarification Needed
- **Minimal**: Issue is well-described with clear reproduction steps
- **Nice to have**: 
  - apko version used
  - Actual database content showing malformed `i:` field
  - apk-tools version in resulting container

### 4. Suggested Maintainer Action
1. **Investigate** `pkg/apk/apk/apkindex.go` for install_if serialization logic
2. **Verify** against apk APKINDEX format specification
3. **Fix** serialization to output space-delimited string instead of array notation
4. **Add test** to prevent regression with install_if field formatting

### 5. Duplicate Likelihood
**Low** - This is a specific serialization bug. Would search for "install_if", "database format", or "v2 database" in existing issues to confirm.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;BlueVision:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Fetches issue details using GitHub CLI&lt;/li&gt;
&lt;li&gt;Analyzes the title, description, and metadata&lt;/li&gt;
&lt;li&gt;Summarizes the core problem&lt;/li&gt;
&lt;li&gt;Identifies the likely technical concern&lt;/li&gt;
&lt;li&gt;Suggests next steps for maintainers&lt;/li&gt;
&lt;li&gt;Flags if clarification or duplication might be needed&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead of manually parsing long discussions, maintainers get a structured summary in seconds.&lt;/p&gt;

&lt;p&gt;This reduces cognitive overload and speeds up triaging.&lt;/p&gt;

&lt;h3&gt;
  
  
  Why This Matters
&lt;/h3&gt;

&lt;p&gt;Maintainers often deal with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Long issue descriptions&lt;/li&gt;
&lt;li&gt;Incomplete bug reports&lt;/li&gt;
&lt;li&gt;Repetitive questions&lt;/li&gt;
&lt;li&gt;Duplicate issues&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;BlueVision acts as an AI triage assistant inside the terminal.&lt;/p&gt;

&lt;p&gt;It helps maintainers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Quickly understand context&lt;/li&gt;
&lt;li&gt;Decide whether to request clarification&lt;/li&gt;
&lt;li&gt;Prioritize issues more effectively&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;By combining GitHub CLI and Copilot CLI, BlueVision transforms issue management into a guided and structured workflow.&lt;/p&gt;

&lt;h2&gt;
  
  
  10. 🔎 AI-Assisted Pull Request Review
&lt;/h2&gt;

&lt;p&gt;Reviewing pull requests can be time-consuming, especially when changes are large or involve multiple files.&lt;/p&gt;

&lt;p&gt;BlueVision helps maintainers quickly understand what a PR does and what to look for.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;bv pull-req github/copilot-cli 1120
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Output :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;🔎 Fetching PR #1120 from github/copilot-cli...

## Code Review: GitHub Actions TKE Deployment Workflow

### 1. High-Level Summary
Adds a GitHub Actions workflow that builds a Docker image, pushes it to Tencent Cloud Registry, and deploys to TKE on main branch pushes. The workflow uses Kustomize for Kubernetes deployments and requires four secrets for authentication.

### 2. Risk Level
**HIGH** - Contains security vulnerabilities and critical functional bugs that will cause deployment failures.

### 3. Potential Bugs &amp;amp; Edge Cases

**Critical Issues:**
- **Line 49**: Docker login syntax is incorrect. `${TKE_IMAGE_URL}` includes the full image path, not just the registry hostname. Should be `ccr.ccs.tencentyun.com`
- **Line 76**: `kustomize edit set image` is incomplete - missing the image name/selector before the URL
- **Line 44**: No validation that `Dockerfile` exists in repository root
- **Line 70**: Context name assumes a specific naming pattern that may not exist

**Edge Cases:**
- No handling for when deployment already exists vs. new deployment
- Missing validation that required Kubernetes manifests exist (deployment.yml, kustomization.yml)
- No timeout specified - deployment could hang indefinitely
- Kustomize commands assume current directory structure without verification

### 4. Code Quality Concerns

**Security:**
- Secrets may leak in workflow logs despite single quotes
- No image vulnerability scanning before deployment
- Using account credentials for registry (consider service account)
- Downloading binary from GitHub without checksum verification (line 57)

**Outdated Dependencies:**
- Kustomize v3.1.0 (2019) is extremely outdated - current is v5.x
- Missing security patches and features

**Configuration:**
- Demo/placeholder values in env vars should have clear documentation
- Hard-coded registry hostname in multiple places

### 5. Maintainability Concerns

- **No rollback mechanism** if deployment fails
- **No cleanup** of built images or resources
- **No tagging strategy** - only uses Git SHA (consider semver tags)
- **Missing documentation** on required Kubernetes manifest structure
- **No environment-specific configuration** - production hardcoded
- **Missing health checks** between deployment steps
- Manual curl download instead of using GitHub Actions marketplace actions

### 6. Suggested Review Comments

yaml
# Line 49 - BLOCKER
- docker login -u ${{ secrets.TENCENT_CLOUD_ACCOUNT_ID }} -p '${{ secrets.TKE_REGISTRY_PASSWORD }}' ${TKE_IMAGE_URL}
+ docker login -u ${{ secrets.TENCENT_CLOUD_ACCOUNT_ID }} -p '${{ secrets.TKE_REGISTRY_PASSWORD }}' ccr.ccs.tencentyun.com

**Issue**: Registry URL should be just the hostname, not the full image path.

yaml
# Line 57 - HIGH PRIORITY
- curl -o kustomize --location https://github.com/kubernetes-sigs/kustomize/releases/download/v3.1.0/kustomize_3.1.0_linux_amd64
+ curl -s "https://raw.githubusercontent.com/kubernetes-sigs/kustomize/master/hack/install_kustomize.sh" | bash

**Issue**: Kustomize v3.1.0 is 7 years old. Use latest stable version.

yaml
# Line 76 - BLOCKER
- ./kustomize edit set image ${TKE_IMAGE_URL}:${GITHUB_SHA}
+ ./kustomize edit set image ${DEPLOYMENT_NAME}=${TKE_IMAGE_URL}:${GITHUB_SHA}

**Issue**: Missing image name selector - command will fail.

**Additional Recommendations:**
1. Add image scanning step (Trivy/Snyk) before push
2. Add deployment timeout: `kubectl rollout status --timeout=5m`
3. Implement rollback on failure
4. Add validation step to check required files exist
5. Use registry cache/buildx for faster builds
6. Add step to create/tag release after successful deployment
7. Consider using composite actions for reusability
8. Add notifications on deployment success/failure

**Documentation Needed:**
- Required Kubernetes manifest files and structure
- How to configure environment-specific values
- Rollback procedure
- Prerequisites checklist
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;BlueVision:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Fetches PR metadata using GitHub CLI&lt;/li&gt;
&lt;li&gt;Retrieves the code diff&lt;/li&gt;
&lt;li&gt;Analyzes the changes using Copilot CLI&lt;/li&gt;
&lt;li&gt;Generates a structured review summary&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Instead of manually scanning hundreds of lines of diff, maintainers receive:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;A high-level summary of changes&lt;/li&gt;
&lt;li&gt;Risk assessment (Low / Medium / High)&lt;/li&gt;
&lt;li&gt;Potential bugs or edge cases&lt;/li&gt;
&lt;li&gt;Code quality concerns&lt;/li&gt;
&lt;li&gt;Maintainability suggestions&lt;/li&gt;
&lt;li&gt;Suggested review comments&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  Why This Matters
&lt;/h3&gt;

&lt;p&gt;Maintainers often deal with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Large pull requests&lt;/li&gt;
&lt;li&gt;Time pressure&lt;/li&gt;
&lt;li&gt;Subtle edge cases&lt;/li&gt;
&lt;li&gt;Community contributions from different skill levels&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;BlueVision acts as an AI co-reviewer inside the terminal.&lt;/p&gt;

&lt;p&gt;It doesn’t replace human review — it enhances it.&lt;/p&gt;

&lt;p&gt;By summarizing changes and highlighting risks, it helps maintainers:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Review faster&lt;/li&gt;
&lt;li&gt;Catch potential issues earlier&lt;/li&gt;
&lt;li&gt;Make better decisions with less cognitive strain&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This turns the CLI into a structured review assistant rather than just a diff viewer.&lt;/p&gt;




&lt;h2&gt;
  
  
  🎯 What This Demonstrates
&lt;/h2&gt;

&lt;p&gt;Through these features, BlueVision:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Reduces context switching&lt;/li&gt;
&lt;li&gt;Simplifies complex CLI workflows&lt;/li&gt;
&lt;li&gt;Prevents risky mistakes&lt;/li&gt;
&lt;li&gt;Guides debugging step-by-step&lt;/li&gt;
&lt;li&gt;Makes terminal interaction more accessible&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It transforms the terminal from a reactive tool into a guided AI workflow assistant.&lt;/p&gt;

&lt;h2&gt;
  
  
  My Experience with GitHub Copilot CLI
&lt;/h2&gt;

&lt;p&gt;I genuinely enjoyed working with GitHub Copilot CLI.&lt;/p&gt;

&lt;p&gt;I’ve always preferred working in the terminal and Linux environments. For me, the CLI feels fast, direct, and powerful. So building something on top of Copilot CLI felt natural and exciting.&lt;/p&gt;

&lt;p&gt;What impressed me most was how flexible it is.&lt;/p&gt;

&lt;p&gt;Copilot CLI is not just a command explainer — it’s a reasoning engine inside the terminal.&lt;/p&gt;

&lt;p&gt;While building BlueVision, I used Copilot CLI to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Generate structured debugging logic&lt;/li&gt;
&lt;li&gt;Refine prompt formats&lt;/li&gt;
&lt;li&gt;Improve clarity of AI responses&lt;/li&gt;
&lt;li&gt;Experiment with safety-aware command analysis&lt;/li&gt;
&lt;li&gt;Shape step-by-step structured guidance&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It allowed me to think beyond simple command explanations and build a workflow layer on top of it.&lt;/p&gt;

&lt;p&gt;Copilot provided intelligence.&lt;/p&gt;

&lt;p&gt;BlueVision shaped that intelligence into something structured, safe, and accessibility-focused.&lt;/p&gt;




&lt;h2&gt;
  
  
  How GitHub Copilot CLI Helped Me Build BlueVision
&lt;/h2&gt;

&lt;p&gt;During development, Copilot CLI helped me:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Quickly prototype command behaviors&lt;/li&gt;
&lt;li&gt;Refine error analysis prompts&lt;/li&gt;
&lt;li&gt;Improve safety-check structures&lt;/li&gt;
&lt;li&gt;Think about better user interaction flows&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Because everything runs in the terminal, the feedback loop was fast.&lt;/p&gt;

&lt;p&gt;I could:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Modify prompt structure&lt;/li&gt;
&lt;li&gt;Test instantly&lt;/li&gt;
&lt;li&gt;Refine output behavior&lt;/li&gt;
&lt;li&gt;Improve formatting&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This rapid iteration cycle made development smooth and productive.&lt;/p&gt;

&lt;p&gt;It felt like building with an AI collaborator — not just using an autocomplete tool.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why This Matters
&lt;/h2&gt;

&lt;p&gt;GitHub Copilot CLI shows how AI can move beyond writing code.&lt;/p&gt;

&lt;p&gt;It can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Guide workflows&lt;/li&gt;
&lt;li&gt;Improve decision-making&lt;/li&gt;
&lt;li&gt;Reduce mental load&lt;/li&gt;
&lt;li&gt;Add safety layers&lt;/li&gt;
&lt;li&gt;Support accessibility&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;BlueVision demonstrates how Copilot CLI can be extended into a structured developer workflow assistant.&lt;/p&gt;

&lt;p&gt;Not just generating answers — but shaping how developers interact with problems.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;BlueVision stands out because it:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Extends Copilot CLI instead of just using it&lt;/li&gt;
&lt;li&gt;Focuses on reducing cognitive overload&lt;/li&gt;
&lt;li&gt;Introduces an accessibility-first modifier&lt;/li&gt;
&lt;li&gt;Adds a safety-aware execution layer&lt;/li&gt;
&lt;li&gt;Supports both developers and maintainers&lt;/li&gt;
&lt;li&gt;Integrates smoothly with GitHub Codespaces&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It combines:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;AI reasoning&lt;/li&gt;
&lt;li&gt;Structured UX design&lt;/li&gt;
&lt;li&gt;Terminal-native workflows&lt;/li&gt;
&lt;li&gt;Inclusive design thinking&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Closing Statement
&lt;/h2&gt;

&lt;p&gt;BlueVision transforms GitHub Copilot CLI into a structured, safety-aware, and accessibility-first workflow assistant for developers.&lt;/p&gt;

&lt;p&gt;It reduces cognitive overload, guides debugging step-by-step, and prevents risky terminal mistakes — all inside the CLI.&lt;/p&gt;

&lt;p&gt;By combining AI reasoning with thoughtful design, BlueVision makes the terminal calmer, smarter, and more inclusive.&lt;br&gt;
It’s not just about faster development — it’s about clearer thinking.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>cli</category>
      <category>githubcopilot</category>
    </item>
    <item>
      <title>Meteora</title>
      <dc:creator>Atharva Shirdhankar</dc:creator>
      <pubDate>Thu, 20 Nov 2025 11:50:41 +0000</pubDate>
      <link>https://dev.to/hey_atharva/meteora-2me7</link>
      <guid>https://dev.to/hey_atharva/meteora-2me7</guid>
      <description>&lt;p&gt;Draft&lt;/p&gt;

&lt;p&gt;Blog writing in progress...&lt;/p&gt;

&lt;p&gt;Application Info&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>opensource</category>
    </item>
    <item>
      <title>CartoonSpace with Complete Python Flask-OpenCV Dev Environment</title>
      <dc:creator>Atharva Shirdhankar</dc:creator>
      <pubDate>Tue, 23 May 2023 22:36:58 +0000</pubDate>
      <link>https://dev.to/hey_atharva/cartoonspace-with-complete-python-flask-opencv-dev-environment-1fl8</link>
      <guid>https://dev.to/hey_atharva/cartoonspace-with-complete-python-flask-opencv-dev-environment-1fl8</guid>
      <description>&lt;h2&gt;
  
  
  What I built
&lt;/h2&gt;

&lt;p&gt;The Github Codespace and Github Actions has became one of my favourite tools of all time. So tried to build something using it.&lt;br&gt;
I've build a sketch app which lets user create a sketch by taking image as input and create a cartoon version of it.&lt;/p&gt;
&lt;h3&gt;
  
  
  Category Submission: DIY Deployments, Maintainer Must-Haves, Wacky Wildcards
&lt;/h3&gt;
&lt;h3&gt;
  
  
  App Link
&lt;/h3&gt;

&lt;p&gt;Dockerhub :&lt;br&gt;
Docker cmd to try out CartoonSpace App:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker pull atharvas08/cvflaskcodespace
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Screenshots
&lt;/h3&gt;

&lt;p&gt;Sreenshots from Codespaces:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft6o1g6r86imtjg361q52.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft6o1g6r86imtjg361q52.png" alt=" " width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjy1qkmj25epqpxvauivp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjy1qkmj25epqpxvauivp.png" alt=" " width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft5cuzwb6xhljafbmuast.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft5cuzwb6xhljafbmuast.png" alt=" " width="800" height="407"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Dockerhub :&lt;br&gt;
Docker cmd to try out CartoonSpace App:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;docker pull atharvas08/cvflaskcodespace
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fahgmb49svlqz5kzsxt34.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fahgmb49svlqz5kzsxt34.png" alt=" " width="800" height="466"&gt;&lt;/a&gt;&lt;br&gt;
Successfully Build and Push FlaskOpenCV app docker image to dockerhub using github actions workflow.&lt;/p&gt;

&lt;p&gt;Slim Actions Workflow Report for the Following CartoonSpace app docker image:&lt;br&gt;
&lt;a href="https://github.com/StarTrooper08/CVFlaskCodeSpace/actions/runs/5062637681/jobs/9088369333" rel="noopener noreferrer"&gt;https://github.com/StarTrooper08/CVFlaskCodeSpace/actions/runs/5062637681/jobs/9088369333&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyvlhw2wp0bsu9dndfhms.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyvlhw2wp0bsu9dndfhms.png" alt=" " width="800" height="364"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Description
&lt;/h3&gt;

&lt;p&gt;I also faced a problem while developing the application locally like dependencies where not getting installed for application and also I have to continously build docker image and push it to dockerhub, so that I can share my application with others. And also optimize docker image locally using slimtoolkit.&lt;/p&gt;

&lt;p&gt;So I also thought why not create a codespace template which can let flask developers to easily create OpenCV flask application on codespace and also automate build,optimize and push docker image to dockerhub.&lt;/p&gt;

&lt;p&gt;So its like 2 in 1 project one solves the problem and other is just fun project.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Fan Fact&lt;/strong&gt;: The CartoonSpace is completely created on Codespaces.&lt;br&gt;
Firstly I created the flask-opencv template and then upon it created the CartoonSpace App.&lt;/p&gt;

&lt;h3&gt;
  
  
  Link to Source Code
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://github.com/StarTrooper08/CVFlaskCodeSpace" rel="noopener noreferrer"&gt;https://github.com/StarTrooper08/CVFlaskCodeSpace&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The cartoonspace project is on the cartoonspace github branch.&lt;br&gt;
The main branch consist of the flask-opencv dev env template. One can easily get started with developing flask-opencv app right away without any much installation.&lt;/p&gt;

&lt;h3&gt;
  
  
  Permissive License
&lt;/h3&gt;

&lt;p&gt;MIT License&lt;/p&gt;

&lt;h2&gt;
  
  
  Background (What made you decide to build this particular app? What inspired you?)
&lt;/h2&gt;

&lt;p&gt;Since, from the Generative AI era has started I wanted to create something similar to midjoruney. After some exploration I came across OpenCV and Hugging Face and many other tools.&lt;br&gt;
So I tried OpenCV and when I was doing the develpment process locally of this application I came across different problems I mentioned before in description. So I thought why not to create a codespace dev environment which can solves this issue, if someone wants to create flask-opencv app and build docker image of it. &lt;/p&gt;

&lt;h3&gt;
  
  
  How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Github Actions
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;I created a workflow which build and push docker image to dockerhub.&lt;/li&gt;
&lt;li&gt;And also created a workflow using slimtoolkit which creates docker report.&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  Github Codespace
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;One can get started with flask-opencv app dev right away with the codespace template which is present on main branch. &lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>githubhack23</category>
      <category>flask</category>
      <category>github</category>
    </item>
    <item>
      <title>Expense Stream | Streamlit and MongoDb Atlas App</title>
      <dc:creator>Atharva Shirdhankar</dc:creator>
      <pubDate>Thu, 08 Dec 2022 23:15:28 +0000</pubDate>
      <link>https://dev.to/hey_atharva/expense-stream-streamlit-and-mongodb-atlas-app-3elp</link>
      <guid>https://dev.to/hey_atharva/expense-stream-streamlit-and-mongodb-atlas-app-3elp</guid>
      <description>&lt;h1&gt;
  
  
  Background
&lt;/h1&gt;

&lt;p&gt;Since there is rise in inflation and continous happening of recession, which is a stressful thing. But to tackle this stressful scenerio there is one solution keeping track of our budget and manage money in great way. So I thought of creating this Expense tracking web app which will be helpful in tracking expense monthwise.&lt;/p&gt;

&lt;h1&gt;
  
  
  What I built
&lt;/h1&gt;

&lt;p&gt;I've built this web app using streamlit and mongodb atlas cluster to store data. It takes input like Total income available to spend and yeah even takes our spending and needful expenses as input and then it is stored into Mongodb database monthwise.&lt;br&gt;
And when we want to look for our data we can visualize in nice sankey chart form. Sankey chart shows the flow of earning and spending in great way.&lt;/p&gt;
&lt;h1&gt;
  
  
  Category Submission:
&lt;/h1&gt;

&lt;p&gt;Think Outside the JS Box&lt;/p&gt;
&lt;h1&gt;
  
  
  App Link
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://expensestream.azurewebsites.net/" rel="noopener noreferrer"&gt;https://expensestream.azurewebsites.net/&lt;/a&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  Screenshots
&lt;/h1&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdj034qjw5x9h7futrk7a.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdj034qjw5x9h7futrk7a.gif" alt=" " width="600" height="338"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fytwrq7sazqlpc7e3fj89.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fytwrq7sazqlpc7e3fj89.png" alt=" " width="800" height="525"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6a9hs7al9cq3ju5i1tl2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6a9hs7al9cq3ju5i1tl2.png" alt=" " width="800" height="525"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg5qzji5qmukrddjcif6v.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg5qzji5qmukrddjcif6v.png" alt=" " width="800" height="525"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftji7t9788fsuuuvd8cee.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftji7t9788fsuuuvd8cee.png" alt=" " width="800" height="525"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8a74epcv6hrjfwii5k90.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8a74epcv6hrjfwii5k90.png" alt=" " width="800" height="525"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5yzbs1lu7h8w3f6n5ba4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5yzbs1lu7h8w3f6n5ba4.png" alt=" " width="800" height="525"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Save Chart as an png image feature :&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9zb3ojehxzzxhowpzap3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9zb3ojehxzzxhowpzap3.png" alt=" " width="800" height="525"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h1&gt;
  
  
  Description
&lt;/h1&gt;

&lt;p&gt;Helping you to track your earnings and spending.&lt;/p&gt;
&lt;h1&gt;
  
  
  Link to Source Code
&lt;/h1&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/StarTrooper08" rel="noopener noreferrer"&gt;
        StarTrooper08
      &lt;/a&gt; / &lt;a href="https://github.com/StarTrooper08/ExpenseStream" rel="noopener noreferrer"&gt;
        ExpenseStream
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Helping you to track your earnings and spending.
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;ExpenseStream&lt;/h1&gt;

&lt;/div&gt;
&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/StarTrooper08/ExpenseStream" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


&lt;h1&gt;
  
  
  Permissive License
&lt;/h1&gt;

&lt;p&gt;MIT License&lt;/p&gt;

&lt;h1&gt;
  
  
  How I built it
&lt;/h1&gt;

&lt;p&gt;(How did you utilize MongoDB Atlas? Did you learn something new along the way? Pick up a new skill?)&lt;/p&gt;

&lt;h2&gt;
  
  
  Development Process :
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Setup and Initiating Virtual Environment
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Create empty github repository with readme.md and license file.&lt;/li&gt;
&lt;li&gt;Clone the repository locally
&lt;code&gt;git clone https://github.com/StarTrooper08/ExpenseStream.git&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;cd to the project file and initiate virtual env&lt;/li&gt;
&lt;li&gt;gitignore venv folder so that we dont push venv directory to github repo&lt;/li&gt;
&lt;li&gt;Install python libraries
Python libraries : streamlit, plotly, pymongo and streamlit_option_menu
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pip install streamlit plotly pymongo streamlit_option_menu
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgv16y65b9v9snx5jkube.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgv16y65b9v9snx5jkube.png" alt=" " width="800" height="177"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8qx6jldi5x54dv7y81l3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8qx6jldi5x54dv7y81l3.png" alt=" " width="800" height="177"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnjwp5vbm4pb6jsr1f2f7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnjwp5vbm4pb6jsr1f2f7.png" alt=" " width="800" height="201"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h3&gt;
  
  
  Coding Part :
&lt;/h3&gt;

&lt;p&gt;For this application we will create two python files one will be the &lt;code&gt;app.py&lt;/code&gt; where our frontend code and which will interact with database file for adding and fetching data from Mongodb database. And other file name &lt;code&gt;database.py&lt;/code&gt; will be dedicatedly used to create database functions which will help us create document inside our collection and get document from it when called in app.py file.&lt;/p&gt;

&lt;p&gt;Now lets create app.py inside our Expense Stream directory and write some code&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;App.py file&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="c1"&gt;#imports for our app
&lt;/span&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;streamlit&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;plotly.graph_objects&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;go&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;streamlit_option_menu&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;option_menu&lt;/span&gt;

&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;calendar&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;datetime&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;datetime&lt;/span&gt;

&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;database&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="n"&gt;db&lt;/span&gt; 

&lt;span class="c1"&gt;#variables
&lt;/span&gt;&lt;span class="n"&gt;incomes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Salary&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Blog&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Other Income&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="n"&gt;expenses&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Rent&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Utilities&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Groceries&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Car&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Saving&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="n"&gt;currency&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;USD&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;span class="n"&gt;page_title&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Expense Stream&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;span class="n"&gt;page_icon&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;:money_with_wings:&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;span class="n"&gt;layout&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;centered&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;

&lt;span class="c1"&gt;#setting title for our app
&lt;/span&gt;&lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;set_page_config&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;page_title&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;page_title&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;page_icon&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;page_icon&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;layout&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;layout&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;title&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;page_title&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="n"&gt;page_icon&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;


&lt;span class="n"&gt;years&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;datetime&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;today&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="n"&gt;year&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;datetime&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;today&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="n"&gt;year&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="n"&gt;months&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;list&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;calendar&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;month_name&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;:])&lt;/span&gt;

&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;get_all_periods&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt;
    &lt;span class="n"&gt;items&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;fetch_all_periods&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="n"&gt;periods&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;item&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;key&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;item&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;items&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;periods&lt;/span&gt;

&lt;span class="n"&gt;hide_st_style&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"""&lt;/span&gt;&lt;span class="s"&gt;
&amp;lt;style&amp;gt;
#MainMenu {visiblility: hidden;}
footer {visiblility: hidden;}
header {visiblility: hidden;}
&amp;lt;/style&amp;gt;
&lt;/span&gt;&lt;span class="sh"&gt;"""&lt;/span&gt;

&lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;markdown&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;hide_st_style&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;unsafe_allow_html&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;True&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;selected&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;option_menu&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="n"&gt;menu_title&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="bp"&gt;None&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="n"&gt;options&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Data Entry&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Data Visualization&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="n"&gt;icons&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;pencil-fill&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;bar-chart-fill&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
    &lt;span class="n"&gt;orientation&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;horizontal&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;)&lt;/span&gt;


&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;selected&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Data Entry&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;header&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Data Entry in &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;currency&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;with&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;form&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Entry_form&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;clear_on_submit&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;True&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
            &lt;span class="n"&gt;col1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;col2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;columns&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="n"&gt;col1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;selectbox&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Select Month:&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;months&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;month&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="n"&gt;col2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;selectbox&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Select Year:&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;years&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;year&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;


            &lt;span class="k"&gt;with&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;expander&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Income&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
                &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;income&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;incomes&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
                    &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;number_input&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;income&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;:&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;min_value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;format&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;%i&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;step&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;income&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="k"&gt;with&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;expander&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Expenses&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
                &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;expense&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;expenses&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
                    &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;number_input&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;expense&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt;:&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;min_value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="nb"&gt;format&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;%i&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;step&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;key&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;expense&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="k"&gt;with&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;expander&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Comment&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
                &lt;span class="n"&gt;comment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;text_area&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;""&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;placeholder&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Enter a comment hee ...&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;



            &lt;span class="n"&gt;submitted&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;form_submit_button&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Save Data&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;submitted&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
                &lt;span class="n"&gt;period&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;str&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;session_state&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;year&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nf"&gt;str&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;session_state&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;month&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt;
                &lt;span class="n"&gt;incomes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;income&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;session_state&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;income&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;income&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;incomes&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
                &lt;span class="n"&gt;expenses&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;expense&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;session_state&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;expense&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;expense&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;expenses&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
                &lt;span class="n"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;insert_period&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;period&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;incomes&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;expenses&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;comment&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;success&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Data Saved!&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;





&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;selected&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Data Visualization&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;header&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Data Visualization&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
        &lt;span class="k"&gt;with&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;form&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Saved periods&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
            &lt;span class="n"&gt;period&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;selectbox&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Select Period:&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nf"&gt;get_all_periods&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
            &lt;span class="n"&gt;submitted&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;form_submit_button&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Plot Period&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
            &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;submitted&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
                &lt;span class="n"&gt;period_data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;db&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get_period&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;period&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;doc&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;period_data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
                    &lt;span class="n"&gt;comment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;doc&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;comment&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
                    &lt;span class="n"&gt;expenses&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;doc&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;expenses&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
                    &lt;span class="n"&gt;incomes&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;doc&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;incomes&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;


                &lt;span class="n"&gt;total_income&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;incomes&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;values&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
                &lt;span class="n"&gt;total_expense&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;sum&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;expenses&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;values&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
                &lt;span class="n"&gt;remaining_budget&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;total_income&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="n"&gt;total_expense&lt;/span&gt;
                &lt;span class="n"&gt;col1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;col2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;col3&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;columns&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="n"&gt;col1&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;metric&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Total Income&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;total_income&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;currency&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="n"&gt;col2&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;metric&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Total Expense&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;total_expense&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;currency&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="n"&gt;col3&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;metric&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Remaining Budget&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;remaining_budget&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="s"&gt; &lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;currency&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;text&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sa"&gt;f&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Comment:&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="n"&gt;comment&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;


                &lt;span class="n"&gt;label&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;list&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;incomes&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;keys&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Total income&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nf"&gt;list&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;expenses&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;keys&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
                &lt;span class="n"&gt;source&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;list&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;len&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;incomes&lt;/span&gt;&lt;span class="p"&gt;)))&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nf"&gt;len&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;incomes&lt;/span&gt;&lt;span class="p"&gt;)]&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nf"&gt;len&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;expenses&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="n"&gt;target&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nf"&gt;len&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;incomes&lt;/span&gt;&lt;span class="p"&gt;)]&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="nf"&gt;len&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;incomes&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;label&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;index&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;expense&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;expense&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;expenses&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;keys&lt;/span&gt;&lt;span class="p"&gt;()]&lt;/span&gt;
                &lt;span class="n"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;list&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;incomes&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;values&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nf"&gt;list&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;expenses&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;values&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;


                &lt;span class="n"&gt;link&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;dict&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;source&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;source&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;target&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;target&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;value&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;value&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="n"&gt;node&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;dict&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;label&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;label&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;pad&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;20&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;thickness&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;25&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;color&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;#00684A&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="n"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;go&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Sankey&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;link&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;link&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;node&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;node&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

                &lt;span class="n"&gt;fig&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;go&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nc"&gt;Figure&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;data&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
                &lt;span class="n"&gt;fig&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;update_layout&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;margin&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="nf"&gt;dict&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;l&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;r&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;t&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;b&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
                &lt;span class="n"&gt;st&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;plotly_chart&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;fig&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;use_container_width&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="bp"&gt;True&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We can give theme to our app using streamlit config toml file, which will make our app design look great and consistent.&lt;br&gt;
First we will create .streamlit/config.toml directory inside our parent project directory.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;.streamlit/config.toml&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight toml"&gt;&lt;code&gt;&lt;span class="nn"&gt;[theme]&lt;/span&gt;

&lt;span class="py"&gt;primaryColor&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"#00684A"&lt;/span&gt;

&lt;span class="py"&gt;backgroundColor&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"#002b36"&lt;/span&gt;

&lt;span class="py"&gt;secondaryBackgroundColor&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"#586e75"&lt;/span&gt;

&lt;span class="py"&gt;textColor&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"#fafafa"&lt;/span&gt;

&lt;span class="py"&gt;font&lt;/span&gt; &lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="s"&gt;"sans serif"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Before we create database.py file and write code into it first lets setup Mongodb cluster for us to use.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;First click on project dropdown here you will find your existing project but we want to create new project we will click on new project and after that we will be asked to add members to our cluster but we will keep it as it is and move forward.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjb4r0b32jirn85bya6uo.png" alt=" " width="800" height="311"&gt;
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe7mitc54z129pqiullft.png" alt=" " width="800" height="659"&gt;
&lt;/li&gt;
&lt;li&gt;After that we will click on Create database.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fi4ub7az3d1j8dasx0pem.png" alt=" " width="800" height="300"&gt;
&lt;/li&gt;
&lt;li&gt;Then Select deployment option we will select free tier since this is just a demo app.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8vwadigbq3hslvfh8pqm.png" alt=" " width="800" height="356"&gt;
&lt;/li&gt;
&lt;li&gt;Select cloud provider and region for your cluster. Here I'm selecting GCP and my prefered region which is to close to me. After selecting cloud provider and region,click on create cluster.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwecw1hrqyfstor21ikau.png" alt=" " width="800" height="434"&gt;
&lt;/li&gt;
&lt;li&gt;Now we will asked to create user and password and add our local ip address. Its super simple to do just click on add ip address button and it will done automatically.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Flpqnz5lud2lu61yjdgfh.png" alt=" " width="800" height="420"&gt;
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffth66bpyrprc2w6k9xap.png" alt=" " width="800" height="499"&gt;
&lt;/li&gt;
&lt;li&gt;Within few minutes our cluster will be created.&lt;/li&gt;
&lt;li&gt;Now we have to connect our application to it. So we will click on connect button on the right side of our database section.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnl570uapitoczxjdqqea.png" alt=" " width="800" height="399"&gt;
&lt;/li&gt;
&lt;li&gt;After that we will get 4 options we will select &lt;code&gt;connect your application&lt;/code&gt; one.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8gotvbjgxeowrqgab0kz.png" alt=" " width="800" height="691"&gt;
&lt;/li&gt;
&lt;li&gt;After clicking on it we will get popup asking for our application language and version. We will select python and version we have installed on our local machine.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8bqiddau59ai34ekijmg.png" alt=" " width="800" height="674"&gt;
&lt;/li&gt;
&lt;li&gt;After that we will get our cluster access link.
Just one changes we have to make while using the link.
Instead of  embeded inside the link we have to pass actual password which we given earlier(step 5).
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd78zz2lfh3vuexzjww0i.png" alt=" " width="800" height="677"&gt;
Password can be passed using env variable for security purpose. I'm passing it directly for now.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;And that's it we are done with setting up our first MongoDB Atlas Cluster.&lt;/p&gt;

&lt;p&gt;Now lets use it in our application. To do use it I'm creating database file where I'll connect to database and do data operations.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;database.py file&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;pymongo&lt;/span&gt;
&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;pymongo&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt;  &lt;span class="n"&gt;MongoClient&lt;/span&gt;

&lt;span class="n"&gt;cluster&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;MongoClient&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;mongodb+srv://atharvas08:&amp;lt;password&amp;gt;@cluster0.jtpc66a.mongodb.net/?retryWrites=true&amp;amp;w=majority&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;db&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;cluster&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;monthly_reports&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="n"&gt;collection&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;db&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;expense_data&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;


&lt;span class="c1"&gt;#insert period as a document inside our mongodb
&lt;/span&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;insert_period&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;period&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;incomes&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;expenses&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="n"&gt;comment&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;collection&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;insert_one&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;key&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;period&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;incomes&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;incomes&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;expenses&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;expenses&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;comment&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="n"&gt;comment&lt;/span&gt;&lt;span class="p"&gt;})&lt;/span&gt;

&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;fetch_all_periods&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt;
    &lt;span class="n"&gt;res&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;collection&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;res&lt;/span&gt;

&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;get_period&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;period&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;

    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="ow"&gt;not&lt;/span&gt; &lt;span class="nf"&gt;isinstance&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;period&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nb"&gt;dict&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
        &lt;span class="n"&gt;period&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;key&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;period&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;collection&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;find&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;period&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now lets create requirements.txt file for our app so that we can easily deploy it on internet.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;dnspython==2.2.1
plotly==5.11.0
pymongo==4.3.3
python-dateutil==2.8.2
requests==2.28.1
streamlit==1.15.2
streamlit-option-menu==0.3.2
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Dockerfile
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="s"&gt;FROM python:3.9-slim&lt;/span&gt;
&lt;span class="s"&gt;COPY . /app&lt;/span&gt;
&lt;span class="s"&gt;WORKDIR /app&lt;/span&gt;
&lt;span class="s"&gt;RUN pip3 install -r requirements.txt&lt;/span&gt;
&lt;span class="s"&gt;EXPOSE &lt;/span&gt;&lt;span class="m"&gt;8501&lt;/span&gt;
&lt;span class="s"&gt;ENTRYPOINT ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Additional Resources/Info
&lt;/h3&gt;

&lt;p&gt;Sankey Chart/Diagram:&lt;br&gt;
&lt;a href="https://developers.google.com/chart/interactive/docs/gallery/sankey" rel="noopener noreferrer"&gt;https://developers.google.com/chart/interactive/docs/gallery/sankey&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Mongodb atlas and pymongo doc:&lt;br&gt;
&lt;a href="https://www.mongodb.com/languages/python" rel="noopener noreferrer"&gt;https://www.mongodb.com/languages/python&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Streamlit:&lt;br&gt;
&lt;a href="https://docs.streamlit.io/" rel="noopener noreferrer"&gt;https://docs.streamlit.io/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>watercooler</category>
    </item>
    <item>
      <title>How I use Peerlist to build my Portfolio?</title>
      <dc:creator>Atharva Shirdhankar</dc:creator>
      <pubDate>Sun, 25 Sep 2022 18:26:58 +0000</pubDate>
      <link>https://dev.to/hey_atharva/how-i-use-peerlist-to-build-my-portfolio-18nj</link>
      <guid>https://dev.to/hey_atharva/how-i-use-peerlist-to-build-my-portfolio-18nj</guid>
      <description>&lt;p&gt;Have you ever participated in Hackathon? Ever Contributed to Open Source? If not!&lt;br&gt;
Then this blog is for you. I'll be sharing my Hackathon experiences and Learnings from Open Source contributions. Moreover, how I used Peerlist to build my portfolio for Open Source Contributions and Hackathon Projects.&lt;/p&gt;

&lt;h2&gt;
  
  
  Hackathon Experience
&lt;/h2&gt;

&lt;p&gt;When I first came across term Hackathon. I was overwhelmed and used to think questions like! &lt;br&gt;
How these folks create amazing projects that too in short time?,&lt;br&gt;
How these folks do project pitching to judges so well?, etc.&lt;/p&gt;

&lt;p&gt;After that I teamed-up with one of my friend and both participated in one 12 Hours in-person Hackathon in 2019. We have to build any application(Web/Mobile) or any create something in innovative way using any technology on topics like Education, Environment etc.&lt;br&gt;
We created Mobile application half on Environment topic. Didn't make it for any prize for that Hackathon but it was alright, it was completely new experience for me and my friend and we learn new stuff.&lt;br&gt;
That's how I started with Hackathon in-short.&lt;/p&gt;

&lt;h3&gt;
  
  
  What type of Hackathon should a Beginner Participate?
&lt;/h3&gt;

&lt;p&gt;As a beginner I'll suggest to participate in 1 month or more timeline Hackathon as a Beginner.This will give you enough time to create project and explore new technolgy and even if you don't find any team member for Hackathon you can work alone cause of 1 month or more timeline.&lt;br&gt;
Many hackathon are based on Technolgy instead of some theme.&lt;br&gt;
Like I participated in Devto Hackathon where we have to create project using Github Actions and Azure services.&lt;/p&gt;

&lt;p&gt;Some advantages of Hackathon:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;You learn new Technology and sometimes even complete Tech Stack.&lt;/li&gt;
&lt;li&gt;Network with amazing Hackers around the globe (online hackathon)&lt;/li&gt;
&lt;li&gt;Learn to work in limited time.&lt;/li&gt;
&lt;li&gt;Fun and Collaboration with team members(which is important in Software Development world).&lt;/li&gt;
&lt;li&gt;Bonus - Swags , Prizes and free food(free food only available in in-person hackathons)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;With advantages there also comes some disadvantages or flaws :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Since in some hackathon we have to work straight for 12 or 24 Hrs . It may put us in stress and mental health.
Tip - So as a beginner start with month long Hackathons.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Do give this Mental Health Blog a read[Peerlist] :&lt;br&gt;
&lt;a href="https://blog.peerlist.io/how-to-protect-your-mental-health-when-working-remotely/" rel="noopener noreferrer"&gt;https://blog.peerlist.io/how-to-protect-your-mental-health-when-working-remotely/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Links to Hackathon Platforms:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Hackathons &lt;/li&gt;
&lt;li&gt;&lt;a href="https://mlh.io/seasons/2023/events" rel="noopener noreferrer"&gt;https://mlh.io/seasons/2023/events&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://devfolio.co/hackathons/" rel="noopener noreferrer"&gt;https://devfolio.co/hackathons/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;These platforms organizes both online and in-person Hackathons. You will find multiple Hackathon running at same time. And you can participate in hackathon whichever you find great Hackathon theme you would love to work.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;Hackathon and Writeothon/Blogathon :&lt;/li&gt;
&lt;li&gt;&lt;a href="https://dev.to/"&gt;https://dev.to/&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://hashnode.com/" rel="noopener noreferrer"&gt;https://hashnode.com/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;These platform organizes online Hackathons and Writeothon both on monthly basis.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Open Source Contribution :
&lt;/h2&gt;

&lt;p&gt;I started Open Source contribution from 2020 Hacktoberfest.&lt;br&gt;
Since Open Source contribution was new and use to get overwhelmed with huge codebase.&lt;br&gt;
So I came across Github projects Documentation which was open source.&lt;br&gt;
I just asked maintainer how can as a beginner contribute to documentation and they guided me.&lt;br&gt;
And slowly steadily started to contribute other projects also which contains code.&lt;/p&gt;

&lt;p&gt;Tips to get Started Open Source Contributions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;First learn git and github's fundamentals like how to clone repo, how to push to github, how to create branch, how to manage merge conflict etc. Then you are good to go.&lt;/li&gt;
&lt;li&gt;Initial start contributing to Documentation of Open source projects.
Cause documentation makes you comfortable with git and githubs workflow. And even documentation contains how to setup locally project and it has info regarding codebase. You will slowly and steadily learn.&lt;/li&gt;
&lt;li&gt;Open Source is all about community. So join Open Source community(Suggestion: EddieHub). Eddiehub is amazing and inclusive community for Open Source and tech enthusiast. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Now on lets get on main topic. &lt;/p&gt;

&lt;h2&gt;
  
  
  How I use Peerlist to build my Portfolio?
&lt;/h2&gt;

&lt;p&gt;There are multiple features and Integrations available on peerlist platform integrations like Hashnode, github, dribble, devto , Medium , RSS , gumroad and many more which are useful for developer to designers to build there portfolio.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3zzrrd4ucrks50uh6qm6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3zzrrd4ucrks50uh6qm6.png" alt=" " width="800" height="462"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But my personal favourite are Github and custom project.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4ofrekdxcrb6bf8m45i3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4ofrekdxcrb6bf8m45i3.png" alt=" " width="800" height="541"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Github integration :
This is amazing integrations cause one can add their open source contributions projects.
Even we can verify our Github account on peerlist.
And classic github contribution graph is also displayed.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;*Custom Projects:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm1ujzwb7jvri66itd6ui.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fm1ujzwb7jvri66itd6ui.png" alt=" " width="800" height="458"&gt;&lt;/a&gt;&lt;br&gt;
This integrations is helpful to showcase side projects or Hackathons projects.&lt;/p&gt;

&lt;p&gt;Why I use Peerlist Github pin repo feature to showcase my side projects?&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;I use github integration only for Open Source projects to which I have contributed and still working on. In one of the Open Source twitter space I heard from Open Source dev that Open Source contributions puts great impact which recuirters search for and this also depicts your favourite tech stack and codebase you are familiar with.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Reasons to Join Peerlist :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Amazing UI of the platform which makes it easy to use.&lt;/li&gt;
&lt;li&gt;Multiple integrations which makes helpful for Designers and Devs.&lt;/li&gt;
&lt;li&gt;Jobs section&lt;/li&gt;
&lt;li&gt;Scroll where amazing folks network.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Peerlist Profile : &lt;a href="https://peerlist.io/_Atharva_08" rel="noopener noreferrer"&gt;https://peerlist.io/_Atharva_08&lt;/a&gt;&lt;/p&gt;

</description>
      <category>peerlist</category>
      <category>writeothon</category>
    </item>
    <item>
      <title>3 Best Tools that you can use for Writing Awesome Articles</title>
      <dc:creator>Atharva Shirdhankar</dc:creator>
      <pubDate>Sat, 19 Mar 2022 12:48:40 +0000</pubDate>
      <link>https://dev.to/hey_atharva/3-best-tools-that-you-can-use-for-writing-awesome-articles-43g</link>
      <guid>https://dev.to/hey_atharva/3-best-tools-that-you-can-use-for-writing-awesome-articles-43g</guid>
      <description>&lt;h2&gt;
  
  
  3 Best Tools that you can use for writing an article that will surely Sky Rocket your article reader's experience.
&lt;/h2&gt;

&lt;p&gt;Whenever I write technical articles on programming or development. I like to add some code snips and explanatory illustrations.&lt;/p&gt;

&lt;p&gt;So here are some tools that I have used for a long time and a few just started to use. &lt;/p&gt;

&lt;h3&gt;
  
  
  1. Excalidraw
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyxubduywt3mzxntqkrvj.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyxubduywt3mzxntqkrvj.png" alt=" " width="800" height="756"&gt;&lt;/a&gt;&lt;code&gt;(This example image is created using poet.so)&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;The fascinating tool currently I have started using for my articles is &lt;strong&gt;Excalidraw&lt;/strong&gt;.&lt;br&gt;
(those articles are draft currently but soon will be released)&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It helps us create &lt;strong&gt;illustrative diagrams&lt;/strong&gt; easily.&lt;/li&gt;
&lt;li&gt;It is &lt;strong&gt;Free &amp;amp; Open Source&lt;/strong&gt; and basic features are more than enough. And need some more advanced features, you can just get a premium subscription called &lt;strong&gt;Excalidraw+&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;It has awesome collections of the &lt;strong&gt;library&lt;/strong&gt; which has &lt;strong&gt;Icons&lt;/strong&gt;, &lt;strong&gt;UML blocks and elements&lt;/strong&gt;, and many more to create awesome explanatory diagrams.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Link&lt;/strong&gt; : &lt;a href="https://excalidraw.com/" rel="noopener noreferrer"&gt;https://excalidraw.com/&lt;/a&gt;&lt;/p&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/excalidraw" rel="noopener noreferrer"&gt;
        excalidraw
      &lt;/a&gt; / &lt;a href="https://github.com/excalidraw/excalidraw" rel="noopener noreferrer"&gt;
        excalidraw
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Virtual whiteboard for sketching hand-drawn like diagrams
    &lt;/h3&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;h3&gt;
  
  
  2. Snappify
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmxez4pougr5lgihv5brr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmxez4pougr5lgihv5brr.png" alt=" " width="800" height="326"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Who doesn't like to add some code snippets in their article?&lt;br&gt;
So here is one amazing and easy-to-use tool that creates code snippets for us seamlessly. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It is &lt;strong&gt;free&lt;/strong&gt; with basic features and that's enough I guess for us to use in our article.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frutf7ufm16qo78dd15jq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frutf7ufm16qo78dd15jq.png" alt=" " width="800" height="409"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;It has customization for background &lt;strong&gt;gradient colour&lt;/strong&gt;.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0mc6skf7efyvh5vzjqnf.png" alt=" " width="430" height="402"&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Size&lt;/strong&gt; customization option for the snippet image.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Theme&lt;/strong&gt; customization option.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftoxa1l6ipax4f1nc4t9l.png" alt=" " width="678" height="386"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Link&lt;/strong&gt; : &lt;a href="https://snappify.io/" rel="noopener noreferrer"&gt;https://snappify.io/&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Poet.so
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcqro5oieqt0gxk6i353c.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcqro5oieqt0gxk6i353c.png" alt=" " width="800" height="412"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffjxxulls0ued86e99vit.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffjxxulls0ued86e99vit.png" alt=" " width="800" height="358"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Few a times we need to add a Twitter thread in our article.&lt;br&gt;
For example, many folks do #100daysoflearning in public and they create a thread on Twitter, so if they want to add that Twitter thread snap in the article and can be done using poetso.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;We have the option to include likes, retweets, and comments responses in the tweet snap image.&lt;/li&gt;
&lt;li&gt;It has different &lt;strong&gt;background gradient&lt;/strong&gt; color.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Size customization&lt;/strong&gt; option of the tweet snap.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Link&lt;/strong&gt; : &lt;a href="https://poet.so/" rel="noopener noreferrer"&gt;https://poet.so/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>codenewbie</category>
      <category>devjournal</category>
    </item>
    <item>
      <title>Birthdate Speciality | Azure SpringBoot</title>
      <dc:creator>Atharva Shirdhankar</dc:creator>
      <pubDate>Tue, 08 Mar 2022 19:50:44 +0000</pubDate>
      <link>https://dev.to/hey_atharva/birthdate-speciality-azure-springboot-2i4l</link>
      <guid>https://dev.to/hey_atharva/birthdate-speciality-azure-springboot-2i4l</guid>
      <description>&lt;p&gt;Hey,have you ever counted how many days are left for your birthday?Whats your birthstone? What's your Zodiac and Shēngxiào? No!&lt;br&gt;
Don't worry this web app will find it for you.&lt;/p&gt;
&lt;h3&gt;
  
  
  Submission Category: Java Jackpot
&lt;/h3&gt;
&lt;h3&gt;
  
  
  Overview of My Submission
&lt;/h3&gt;

&lt;p&gt;Hello everyone, here is my Fun type Java Spring boot web app which will help you count days left for your next Birthday.&lt;br&gt;
And Moreover,it will tell you your Birthstone,zodiac,etc.&lt;/p&gt;

&lt;p&gt;Lets start building the project and deploy it on Azure Web Service for Java&lt;/p&gt;
&lt;h4&gt;
  
  
  Setup and requirements for this project :
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;Java Framework : Spring Boot&lt;/li&gt;
&lt;li&gt;Project Management Tool : Maven&lt;/li&gt;
&lt;li&gt;IDE : IntelliJ&lt;/li&gt;
&lt;li&gt;IntelliJ plugin : Azure Toolkit for Intellij&lt;/li&gt;
&lt;li&gt;Deployment : Azure&lt;/li&gt;
&lt;li&gt;Browser : Chrome&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;and yes some coffee...&lt;/p&gt;
&lt;h4&gt;
  
  
  Step 1: Download SpringBoot Template from Spring Initializr
&lt;/h4&gt;

&lt;p&gt;Spring Initialzr helps us to create Spring boot Web app in easy way. It also has amazing option to add dependencies to our springboot app.&lt;/p&gt;

&lt;p&gt;Link : &lt;a href="https://start.spring.io/" rel="noopener noreferrer"&gt;https://start.spring.io/&lt;/a&gt;&lt;br&gt;
(official website from SpringBoot)&lt;/p&gt;

&lt;p&gt;Here is the Screenshot of this project bootstrapping with the help of Spring Initializr&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjqqmlissqj4kq0qqfhdu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjqqmlissqj4kq0qqfhdu.png" alt=" " width="800" height="449"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Give your project name and Description(you can also change the group but I have left it default)&lt;/li&gt;
&lt;li&gt;Dependencies : Spring Web, Spring Boot Devtools, Thymeleaf(Template engine).&lt;/li&gt;
&lt;li&gt;Select the options

&lt;ul&gt;
&lt;li&gt;Project : Maven&lt;/li&gt;
&lt;li&gt;Language : Java&lt;/li&gt;
&lt;li&gt;SpringBoot version : Leave it Default selected&lt;/li&gt;
&lt;li&gt;Packaging : jar&lt;/li&gt;
&lt;li&gt;Java : 11&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Then click on 'GENERATE'. Zip file will be downloaded.&lt;/p&gt;

&lt;p&gt;Yay!!!Our initial setup is ready🎉.&lt;/p&gt;
&lt;h4&gt;
  
  
  Step 2: Java Spring Boot Web App Code
&lt;/h4&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/StarTrooper08" rel="noopener noreferrer"&gt;
        StarTrooper08
      &lt;/a&gt; / &lt;a href="https://github.com/StarTrooper08/BirthdateSpeciality" rel="noopener noreferrer"&gt;
        BirthdateSpeciality
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Fun kind of SpringBoot project which shows details regarding Birthdate(days left for next birthday, zodiac,etc)
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;BirthdateSpeciality&lt;/h1&gt;

&lt;/div&gt;
&lt;p&gt;Explantory Blog : &lt;a href="https://dev.to/star_trooper/birthdate-speciality-azure-springboot-2i4l" rel="nofollow"&gt;https://dev.to/star_trooper/birthdate-speciality-azure-springboot-2i4l&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;WebApp link : &lt;a href="https://birthdate-speciality-service-birthdate-sp-app.azuremicroservices.io" rel="nofollow noopener noreferrer"&gt;https://birthdate-speciality-service-birthdate-sp-app.azuremicroservices.io&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;Licence : MIT&lt;/p&gt;
&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/StarTrooper08/BirthdateSpeciality" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


&lt;h4&gt;
  
  
  Step 3: Deployment Process using IntelliJ on Azure Spring Boot
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;After, we are done with building web app and tested by running on localhost. Lets deploy it to azure spring cloud using IntelliJ Azure plugin.&lt;/li&gt;
&lt;li&gt;Go to the settings option of IntelliJ(you can see it on top upper right side in the IDE)
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frw9r2vz22aznxi8nzvgi.png" alt=" " width="546" height="293"&gt;
&lt;/li&gt;
&lt;li&gt;Click on plugin option&lt;/li&gt;
&lt;li&gt;Search for Azure Toolkit plugin.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fp5neoh4bboy2f2zj3stp.png" alt=" " width="800" height="579"&gt;
&lt;/li&gt;
&lt;li&gt;Install the plugin and restart the IntelliJ IDE. It will get installed.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjxy0eevg9gbwl2wza4sc.png" alt=" " width="340" height="175"&gt;
&lt;/li&gt;
&lt;li&gt;Now click on the main project and head towards Azure option. After hovering on Azure you will see many option we will be using Spring Cloud option. But before that we need to connect intelliJ IDE with Azure.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkq4ykxm70ugjqldnk053.png" alt=" " width="800" height="1033"&gt;
&lt;/li&gt;
&lt;li&gt;Now click on Azure Spring Cloud.Here you will be asked to sign in with your Azure Account.Many options are available to sign in,you can go with any option.I have signup with OAuth option here.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feudmdsivhqgkibav8hq1.png" alt=" " width="520" height="317"&gt;
&lt;/li&gt;
&lt;li&gt;After done with sign-in. One pop up will be showed on IDE regarding Azure subscription. And IntelliJ and Azure connection will done successfully.&lt;/li&gt;
&lt;li&gt;And then go to the azure portal and select Azure Spring Cloud option for creating spring boot service instance for our web app.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdxn4fojqh0uln7nc04gz.png" alt=" " width="800" height="129"&gt;
&lt;/li&gt;
&lt;li&gt;Click on create button
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1ftoo6cghaqqde2o1ktc.png" alt=" " width="543" height="178"&gt;
&lt;/li&gt;
&lt;li&gt;Now we will be asked for giving our service instance name and asked to select region.After that click on review and create. Now have patience, let the Azure do the magic.It will take few minutes to deploy our service instance. After our service instance get deployed successfully. Head towards IntelliJ IDE(I suggest restarting IDE before moving to next step).
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fk5yvs7vnvro2sk4tjoks.png" alt=" " width="751" height="880"&gt;
&lt;/li&gt;
&lt;li&gt;Now we have service instance. Lets deploy our java spring boot web app on it. Open the option as shown in Step 3.6. And click on Azure Spring Cloud. You will get some pop up below.
Select the Service instance created and add the app name by clicking on the + sign.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdni4bn2y0aaeljfvb7mz.png" alt=" " width="670" height="550"&gt;
&lt;/li&gt;
&lt;li&gt;Now for app we need to select some options. Example below.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnlxwld5w69mlke5m007a.png" alt=" " width="594" height="569"&gt;
&lt;/li&gt;
&lt;li&gt;Now click on apply and run. The app deployment will start(please dont click on any buttons like run stop app in IDE or else the deployment process will stop and fails) 
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdni4bn2y0aaeljfvb7mz.png" alt=" " width="670" height="550"&gt;
&lt;/li&gt;
&lt;li&gt;After few minutes our app will deployed successfully and we will following output in our IDE console.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fckhpopin0lky0rl4mj1i.png" alt=" " width="800" height="246"&gt;
&lt;/li&gt;
&lt;li&gt;We can have a look in Azure portal to cross check whether our SpringBoot app is successfully deployed or not.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fd7ukhhki8abocuhyzxll.png" alt=" " width="800" height="141"&gt;
&lt;/li&gt;
&lt;li&gt;We can get the link to our springboot app in Application dashboard (And even in IDE console)
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvqrc1kblwilh881fkpy1.png" alt=" " width="800" height="165"&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  Final Output :
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;&lt;p&gt;Home Page:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwvtbro7y39u8m02cx3hf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwvtbro7y39u8m02cx3hf.png" alt=" " width="800" height="476"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Result Page:&lt;/p&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuvakgfuve9f4uulqjlkq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuvakgfuve9f4uulqjlkq.png" alt=" " width="800" height="535"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz97lr1a2nwakrw8a6vz5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz97lr1a2nwakrw8a6vz5.png" alt=" " width="800" height="572"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpyzbhy04ukkbz9ckp1sz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpyzbhy04ukkbz9ckp1sz.png" alt=" " width="800" height="569"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Web App link : &lt;a href="https://birthdate-speciality-service-birthdate-sp-app.azuremicroservices.io" rel="noopener noreferrer"&gt;https://birthdate-speciality-service-birthdate-sp-app.azuremicroservices.io&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
&lt;h5&gt;
  
  
  Yes we have successfully Created our Spring Boot Web Application and deployed it on Azure using Spring Cloud Service🎉🚀.
&lt;/h5&gt;
&lt;/blockquote&gt;

&lt;h5&gt;
  
  
  Resources credit:
&lt;/h5&gt;

&lt;ol&gt;
&lt;li&gt;Azure Docs : 

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://docs.microsoft.com/en-us/azure/spring-cloud/quickstart?tabs=IntelliJ&amp;amp;pivots=programming-language-java#provision-an-instance-of-azure-spring-cloud" rel="noopener noreferrer"&gt;https://docs.microsoft.com/en-us/azure/spring-cloud/quickstart?tabs=IntelliJ&amp;amp;pivots=programming-language-java#provision-an-instance-of-azure-spring-cloud&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://docs.microsoft.com/en-us/learn/paths/az-900-describe-cloud-concepts/" rel="noopener noreferrer"&gt;https://docs.microsoft.com/en-us/learn/paths/az-900-describe-cloud-concepts/&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Spring Boot : &lt;a href="https://spring.io/projects/spring-boot" rel="noopener noreferrer"&gt;https://spring.io/projects/spring-boot&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Apache Commons: &lt;a href="https://commons.apache.org/" rel="noopener noreferrer"&gt;https://commons.apache.org/&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;

</description>
      <category>azuretrialhack</category>
      <category>azure</category>
    </item>
    <item>
      <title>Simple Rock Paper Scissors game build using JuliaLang</title>
      <dc:creator>Atharva Shirdhankar</dc:creator>
      <pubDate>Mon, 31 Jan 2022 14:34:44 +0000</pubDate>
      <link>https://dev.to/hey_atharva/simple-rock-paper-scissors-game-build-using-julialang-1mn9</link>
      <guid>https://dev.to/hey_atharva/simple-rock-paper-scissors-game-build-using-julialang-1mn9</guid>
      <description>&lt;p&gt;Hello everyone 👋, in this article📃 I'll be discussing about how I m learning JuliaLang by building mini projects.&lt;/p&gt;

&lt;p&gt;Lets start building Rock Paper Scissors game using JuliaLang.&lt;br&gt;
But first we definitely need an IDE or TextEditor for running JuliaLang code. &lt;br&gt;
We can use VSCode with required extension for running JuliaLang code but since I have just started with JuliaLang so I used &lt;a href="https://replit.com/" rel="noopener noreferrer"&gt;repl.it&lt;/a&gt; here for coding and exploring JuliaLang(its an awesome online IDE try it).&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Motivation behind getting started with Learning JuliaLang:&lt;/strong&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Best part about JuliaLang is that it is easy to learn just like Python.&lt;/li&gt;
&lt;li&gt;The execution speed of JuliaLang is similar to C/C++. That means it's fast.&lt;/li&gt;
&lt;li&gt;And it is widely used for Data Science , Machine Learning , Deep Learning and even Web Development(And more lot stuff).&lt;/li&gt;
&lt;li&gt;And JuliaLang Community is wide &amp;amp; inclusive,if you stuck somewhere while creating any project using JuliaLang. There are many amazing folks to help you. And if are mathematics, bioinformatics or something related to Statistics and Maths or even you are just a Tech Enthusiast join JuliaLang &lt;a href="//julialang.slack.com"&gt;slack channel&lt;/a&gt;. You will find many awesome peers who are enthusiast from of the above fields.&lt;/li&gt;
&lt;li&gt;Around 200+ JuliaLang packages are present to make your development work more easy.&lt;/li&gt;
&lt;/ol&gt;
&lt;/blockquote&gt;

&lt;p&gt;Complete Code :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight julia"&gt;&lt;code&gt;&lt;span class="c"&gt;# learning julialang basics by creating classical stone paper scissors game&lt;/span&gt;


&lt;span class="k"&gt;function&lt;/span&gt;&lt;span class="nf"&gt; play_game&lt;/span&gt;&lt;span class="x"&gt;()&lt;/span&gt;
    &lt;span class="n"&gt;moves&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="x"&gt;[&lt;/span&gt;&lt;span class="s"&gt;"rock"&lt;/span&gt;&lt;span class="x"&gt;,&lt;/span&gt;&lt;span class="s"&gt;"paper"&lt;/span&gt;&lt;span class="x"&gt;,&lt;/span&gt;&lt;span class="s"&gt;"scissor"&lt;/span&gt;&lt;span class="x"&gt;]&lt;/span&gt;
    &lt;span class="n"&gt;computer_move&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;moves&lt;/span&gt;&lt;span class="x"&gt;[&lt;/span&gt;&lt;span class="n"&gt;rand&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="o"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="x"&gt;)]&lt;/span&gt;

    &lt;span class="n"&gt;human_move&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;Base&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;prompt&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Please enter stone, paper, or scissor"&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;

    &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Rock..."&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;sleep&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;1.0&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;

    &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Paper..."&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;sleep&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;1.0&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;

    &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Scissors..."&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;sleep&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="mf"&gt;1.0&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;

    &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Shoot!&lt;/span&gt;&lt;span class="se"&gt;\n&lt;/span&gt;&lt;span class="s"&gt;"&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;

    &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;computer_move&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="n"&gt;human_move&lt;/span&gt;
        &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"You tied, please try again"&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;elseif&lt;/span&gt; &lt;span class="n"&gt;computer_move&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="s"&gt;"rock"&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="n"&gt;human_move&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="s"&gt;"scissor"&lt;/span&gt;
        &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"You lose, the computer won with rock, please try again"&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;elseif&lt;/span&gt; &lt;span class="n"&gt;computer_move&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="s"&gt;"paper"&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="n"&gt;human_move&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="s"&gt;"rock"&lt;/span&gt;
        &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"You lose, the computer won with paper, please try again"&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;elseif&lt;/span&gt; &lt;span class="n"&gt;computer_move&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="s"&gt;"scissor"&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="n"&gt;human_move&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="s"&gt;"paper"&lt;/span&gt;
        &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"You lose, the computer won with scissor, please try again"&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;else&lt;/span&gt;
        &lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"You won, the computer lost with &lt;/span&gt;&lt;span class="si"&gt;$&lt;/span&gt;&lt;span class="s"&gt;computer_move, nice work!"&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;end&lt;/span&gt;

&lt;span class="k"&gt;end&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h4&gt;
  
  
  My Learnings from this mini project build:
&lt;/h4&gt;

&lt;p&gt;1) Learned how to write comment in JuliaLang.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight julia"&gt;&lt;code&gt;&lt;span class="c"&gt;# This is how we write JuliaLang comments&lt;/span&gt;
&lt;span class="c"&gt;# hashtag followed with text you wanted to commented&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;2) Learned how to print text.&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight julia"&gt;&lt;code&gt;&lt;span class="n"&gt;print&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"Your text here inside double quotes"&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;3) Learned how to create function(without parameters)&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight julia"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt;&lt;span class="nf"&gt; fun_name&lt;/span&gt;&lt;span class="x"&gt;()&lt;/span&gt;
&lt;span class="o"&gt;.&lt;/span&gt;
&lt;span class="n"&gt;your&lt;/span&gt; &lt;span class="n"&gt;code&lt;/span&gt; &lt;span class="n"&gt;here&lt;/span&gt;
&lt;span class="o"&gt;.&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Whenever you create function its necessary to tell compiler where to stop by using end keyword in JuliaLang.&lt;/p&gt;

&lt;p&gt;4) Learned how to use conditional loop (if-elseif-else loop).&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight julia"&gt;&lt;code&gt;&lt;span class="k"&gt;function&lt;/span&gt;&lt;span class="nf"&gt; test&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt;&lt;span class="x"&gt;,&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
           &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;
               &lt;span class="n"&gt;println&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"x is less than y"&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
           &lt;span class="k"&gt;elseif&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt;
               &lt;span class="n"&gt;println&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"x is greater than y"&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
           &lt;span class="k"&gt;else&lt;/span&gt;
               &lt;span class="n"&gt;println&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"x is equal to y"&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
           &lt;span class="k"&gt;end&lt;/span&gt;
       &lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Whenever we use if-else or if-elseif-else conditional loop after the else condition statement we should use end keyword to tell compiler where does the conditional loops ends.&lt;/p&gt;

&lt;p&gt;5) Learned about few inbuilt function.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;sleep() : Its an inbuilt method of JuliaLang which comes under Base class and we don't need to import package for it. It basically stops execution of code for specified time. The minimum sleep time is 1 milliseconds.
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight julia"&gt;&lt;code&gt;&lt;span class="n"&gt;sleep&lt;/span&gt;&lt;span class="x"&gt;(&lt;/span&gt;&lt;span class="n"&gt;seconds&lt;/span&gt;&lt;span class="x"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;rand() : It picks random element from array or list of elements. And similar to sleep method its an inbuilt method which comes under Base class.
&lt;/li&gt;
&lt;/ul&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;rand(1:3)
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Here we randomly selected 1 element from 3 elements inside the collection.&lt;/p&gt;
&lt;h5&gt;
  
  
  Source :
&lt;/h5&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;a href="https://docs.julialang.org/en/v1/manual/getting-started/" rel="noopener noreferrer"&gt;JuliaLang Docs&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;Github Repository for mini Projects using JuliaLang&lt;br&gt;
(Thanks &lt;a class="mentioned-user" href="https://dev.to/logankilpatrick"&gt;@logankilpatrick&lt;/a&gt; for providing awesome mini projects repository)&lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/logankilpatrick" rel="noopener noreferrer"&gt;
        logankilpatrick
      &lt;/a&gt; / &lt;a href="https://github.com/logankilpatrick/Julia-Projects-for-Beginners" rel="noopener noreferrer"&gt;
        Julia-Projects-for-Beginners
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Julia Projects for Beginners — Easy Ideas to Get Started Coding in Julia
    &lt;/h3&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;/li&gt;

&lt;/ul&gt;

</description>
      <category>julialang</category>
      <category>beginners</category>
      <category>opensource</category>
      <category>learnings</category>
    </item>
    <item>
      <title>How I m Learning new Technologies so Quickly and how you can do it too(Open Source Way)?!</title>
      <dc:creator>Atharva Shirdhankar</dc:creator>
      <pubDate>Tue, 28 Dec 2021 21:29:19 +0000</pubDate>
      <link>https://dev.to/hey_atharva/how-i-m-learning-new-technologies-so-quicklyopen-source-way-58ao</link>
      <guid>https://dev.to/hey_atharva/how-i-m-learning-new-technologies-so-quicklyopen-source-way-58ao</guid>
      <description>&lt;p&gt;When I see myself one year back I was completely confused like how should I learn new things and do some progress in the Tech Field🙁.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj9jeptqrqh87zb821lvw.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj9jeptqrqh87zb821lvw.gif" alt=" " width="220" height="190"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But now!!!! when I see back in time currently I m doing great progress and easily learning new technologies😁.&lt;/p&gt;

&lt;p&gt;But actually, what I did or steps I took the cause of which I m doing great progress within a year.&lt;br&gt;
Let me tell you how I did it in this article and even how you can do it if you are struggling in Coding or learning new technologies.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh7b78igp3k00ey08omep.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh7b78igp3k00ey08omep.gif" alt=" " width="220" height="146"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Many things helped me learn new technical things but let start this first article let me share with you how Open Source helped me&lt;br&gt;
(More article on &lt;strong&gt;How I m Learning new Technologies so Quickly&lt;/strong&gt; is &lt;strong&gt;coming soon...&lt;/strong&gt;)&lt;/p&gt;
&lt;h2&gt;
  
  
  Open Source Contribution
&lt;/h2&gt;
&lt;h3&gt;
  
  
  My Open Source Journey
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;I started Open Source Contribution in November 2020 somewhat and I made my first contribution to GitHub-docs as a contributor cause only text and typo were needed to be corrected which was perfect for a beginner like me to get started with open source contribution.&lt;/li&gt;
&lt;/ul&gt;


&lt;div class="ltag_github-liquid-tag"&gt;
  &lt;h1&gt;
    &lt;a href="https://github.com/github/docs/pull/1242" rel="noopener noreferrer"&gt;
      &lt;img class="github-logo" alt="GitHub logo" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg"&gt;
      &lt;span class="issue-title"&gt;
        Improve documentation issue no #1034
      &lt;/span&gt;
      &lt;span class="issue-number"&gt;#1242&lt;/span&gt;
    &lt;/a&gt;
  &lt;/h1&gt;
  &lt;div class="github-thread"&gt;
    &lt;div class="timeline-comment-header"&gt;
      &lt;a href="https://github.com/StarTrooper08" rel="noopener noreferrer"&gt;
        &lt;img class="github-liquid-tag-img" src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Favatars.githubusercontent.com%2Fu%2F72031540%3Fv%3D4" alt="StarTrooper08 avatar"&gt;
      &lt;/a&gt;
      &lt;div class="timeline-comment-header-text"&gt;
        &lt;strong&gt;
          &lt;a href="https://github.com/StarTrooper08" rel="noopener noreferrer"&gt;StarTrooper08&lt;/a&gt;
        &lt;/strong&gt; posted on &lt;a href="https://github.com/github/docs/pull/1242" rel="noopener noreferrer"&gt;&lt;time&gt;Nov 10, 2020&lt;/time&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="ltag-github-body"&gt;
      &lt;p&gt;Done with the minor fixes for open issue number #1034 .&lt;/p&gt;

&lt;h3&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;Why:&lt;/h3&gt;

&lt;h3&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;What's being changed:&lt;/h3&gt;

&lt;h3&gt;
&lt;span class="octicon octicon-link"&gt;&lt;/span&gt;Check off the following:&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;[ ] All of the tests are passing.&lt;/li&gt;
&lt;li&gt;[ ] I have reviewed my changes in staging.&lt;/li&gt;
&lt;li&gt;[ ] For content changes, I have reviewed the &lt;a href="https://github.com/github/docs/blob/main/contributing/localization-checklist.md" rel="noopener noreferrer"&gt;localization checklist&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;[ ] For content changes, I have reviewed the &lt;a href="https://github.com/github/docs/blob/main/contributing/content-style-guide.md" rel="noopener noreferrer"&gt;Content style guide for GitHub Docs&lt;/a&gt;.&lt;/li&gt;
&lt;/ul&gt;

    &lt;/div&gt;
    &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/github/docs/pull/1242" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


&lt;ul&gt;
&lt;li&gt;And when I doing my first contribution I was literally confused about what should I do cause I was not familiar with Git and Github.The mechanism of committing and creating pull requests was new to me.&lt;/li&gt;
&lt;li&gt;But thanks to the Github docs maintainer team they helped a lot in my first contribution and even I explored and learned about Git and Github on the way.&lt;/li&gt;
&lt;li&gt;After my first contribution I did more 2 contributions to GitHub docs that were too related to documentation and typo work.&lt;/li&gt;
&lt;li&gt;As I did my 3 contributions I got used to Github's contribution workflow (fork repository, commit changes, create pull request stuff)and even got the confidence to contribute to another project which has actual coding stuff.&lt;/li&gt;
&lt;li&gt;I started with contributing to HTML , CSS , javascript codebase projects. Slow and steady I started contributing to Reactjs codebase projects and now currently working on Docker and Android-related issues.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  What did I learn from Open Source and by doing contribution to OSS?
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;The journey of Open Source was amazing I learned so new many things on the way. And not only learned new technologies and frameworks but also made new friends.&lt;/li&gt;
&lt;li&gt;The Open Source contribution I did help me to learn different web frameworks like Django, Flask, etc. And frontend library reactJs.&lt;/li&gt;
&lt;li&gt;Many times during open-source contribution I came across a codebase that was overwhelming at first. Even came across new technologies I'd never heard of. So by doing Open Source contribution I was learning on the way and I learned those stuff first and I used to implement it by contributing.&lt;/li&gt;
&lt;li&gt;By contributing to open-source software I became habitual to dealing with the overwhelming codebase, reading the codebase, and do the changes in the code where required.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;And yes if you think how I can those new technologies and do the contribution work.&lt;br&gt;
Just ask for some help in the open-source community. There will surely be someone to help you and guide you if you are stuck somewhere. &lt;strong&gt;That's the amazing part,I like about Open Source😃&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;ul&gt;
&lt;li&gt;When you do Open Source Contribution you are gaining experience which will surely help in the future.&lt;/li&gt;
&lt;/ul&gt;

&lt;blockquote&gt;
&lt;p&gt;Conclusion &lt;br&gt;
In short, I learned a new programming language, new technologies in public and also implemented those learnings on the way and gained some experience.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h3&gt;
  
  
  How you can start with Open Source and learn new things
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;To get started with open source at first you need to know a few &lt;strong&gt;git commands like clone, commit, push&lt;/strong&gt;. And a little bit familiar with &lt;strong&gt;Github's issue, pull request feature&lt;/strong&gt;. Other advanced concepts of git and Github you will &lt;strong&gt;learn on the way by doing contribution&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;After learning a few concepts of git and GitHub.
On GitHub search for some repositories which are specific for &lt;strong&gt;documentation&lt;/strong&gt; or &lt;strong&gt;HTML, CSS, javascript&lt;/strong&gt; base project and best for beginners to start with open source.
Below are Few of them to which I contributed and still contribute
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/github" rel="noopener noreferrer"&gt;
        github
      &lt;/a&gt; / &lt;a href="https://github.com/github/docs" rel="noopener noreferrer"&gt;
        docs
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      The open-source repo for docs.github.com
    &lt;/h3&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/EddieHubCommunity" rel="noopener noreferrer"&gt;
        EddieHubCommunity
      &lt;/a&gt; / &lt;a href="https://github.com/EddieHubCommunity/BioDrop" rel="noopener noreferrer"&gt;
        BioDrop
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Connect to your audience with a single link. Showcase the content you create and your projects in one place. Make it easier for people to find, follow and subscribe.
    &lt;/h3&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/EddieHubCommunity" rel="noopener noreferrer"&gt;
        EddieHubCommunity
      &lt;/a&gt; / &lt;a href="https://github.com/EddieHubCommunity/EventCalendar" rel="noopener noreferrer"&gt;
        EventCalendar
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Community events from TwitterSpaces to Live streams to Conferences
    &lt;/h3&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/JuliaLang" rel="noopener noreferrer"&gt;
        JuliaLang
      &lt;/a&gt; / &lt;a href="https://github.com/JuliaLang/www.julialang.org" rel="noopener noreferrer"&gt;
        www.julialang.org
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Julia Project website
    &lt;/h3&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;li&gt;Now search for good first issues in the issue tab.&lt;/li&gt;
&lt;li&gt;And work on those issues accordingly&lt;/li&gt;
&lt;li&gt;After getting used to with Github workflow(find an issue, do some required changes in code or documentation(text), create pull request and merge your code), I recommend working on the project which you think is quite overwhelming for you or you want to learn programming language search for those projects which include it.&lt;/li&gt;
&lt;li&gt;Slow and steady you will learn new programming language or technology and that too efficiently.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;(I didn't mention everything in detail about how you can do open source contribution but I m sure you got this😅. My motive behind this article is simple to do open source contribution and learn new things on the way and also gain some experience 🚀)&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F54jznykroempml165f25.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F54jznykroempml165f25.gif" alt=" " width="220" height="123"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Thank You for Reading this Article and yes stay tuned for the next part of this blog series by following me.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>programming</category>
      <category>opensource</category>
      <category>devjournal</category>
    </item>
    <item>
      <title>IoT Commit : IoT Github Action</title>
      <dc:creator>Atharva Shirdhankar</dc:creator>
      <pubDate>Wed, 08 Dec 2021 20:08:58 +0000</pubDate>
      <link>https://dev.to/star_trooper/iot-commit-iot-github-action-369n</link>
      <guid>https://dev.to/star_trooper/iot-commit-iot-github-action-369n</guid>
      <description>&lt;h3&gt;
  
  
  My Workflow
&lt;/h3&gt;

&lt;h4&gt;
  
  
  What does this github action do ?
&lt;/h4&gt;

&lt;p&gt;This action is basically fun IoT base project. It basically connects to the home smart lights with the help of VeSync's python package ,which I have used in this project and whenever someone makes commits on github the lights get on for few mins(Here I have set the timer to 3600s you can change if you want). And after the specified time the lights get automatically off. To make lights on again you have to create commit again.&lt;/p&gt;

&lt;h4&gt;
  
  
  Few Benefits of the Github Action:
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;The on and off event of the lights for specified time let you know that this much time has been passed(here it is 3600s).
So inshort, this action will work as Alarm or timer for you but little bit interesting one.&lt;/li&gt;
&lt;li&gt;To start the lights on again for 3600 seconds(time can be changed) you need to commit code again on github. So you can do your task effectively and quickly.&lt;/li&gt;
&lt;/ol&gt;

&lt;h4&gt;
  
  
  Submission Category:
&lt;/h4&gt;

&lt;p&gt;Interesting IoT&lt;/p&gt;

&lt;h3&gt;
  
  
  Yaml File or Link to Code
&lt;/h3&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/StarTrooper08"&gt;
        StarTrooper08
      &lt;/a&gt; / &lt;a href="https://github.com/StarTrooper08/IoT-Commit"&gt;
        IoT-Commit
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;h1&gt;
Light-Commit&lt;/h1&gt;
&lt;h4&gt;
Home IoT device based Github Actions&lt;/h4&gt;
&lt;p&gt;Blog : &lt;a href="https://dev.to/star_trooper/iot-commit-iot-github-action-369n" rel="nofollow"&gt;https://dev.to/star_trooper/iot-commit-iot-github-action-369n&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/StarTrooper08/IoT-Commit"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


&lt;p&gt;Usage:&lt;br&gt;
Create &lt;code&gt;.github/workflows/main.yml&lt;/code&gt; directory in your repository&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;name: smart light action

on:
  push:
    branches: [ master ]

jobs:
  smart_lights_job:
    runs-on: ubuntu-latest
    name: Turn on smart lights
    steps:
    - uses: actions/checkout@v2

    - name: Trigger lights 
      uses: StarTrooper08/Light-Commit
      with:
        VESYNC_PASS: ${{ secrets.VESYNC_PASS }}
        VESYNC_EMAIL: ${{ secrets.VESYNC_EMAIL }}

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h4&gt;
  
  
  Secrets Configuration :
&lt;/h4&gt;

&lt;p&gt;Add 2 parameter(VESYNC email and password) as repository secrets.&lt;br&gt;
You can name the secrets(recommended) as above or different if you used different name don't forget to change it in other yaml code too. &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Hardware config : You need to signup on VeSync portal with your email and connect smart light with it(you can also use Android App from playstore).&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--oZSpcZ6Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmdlolx6gxv4i5d5y4e1.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--oZSpcZ6Y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmdlolx6gxv4i5d5y4e1.jpg" alt="Image description" width="880" height="620"&gt;&lt;/a&gt;&lt;br&gt;
Add email and password as Repository secrets. &lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Limitations :&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The process only works if your smart lights are connected to VeSync.&lt;/li&gt;
&lt;li&gt;Few a times the process quits automatically.&lt;/li&gt;
&lt;li&gt;Only few well known smart lights brand can be connected to VeSync.&lt;/li&gt;
&lt;/ul&gt;

&lt;h5&gt;
  
  
  License
&lt;/h5&gt;

&lt;p&gt;The MIT License&lt;/p&gt;

&lt;p&gt;Copyright (c) 2021 StarTrooper08&lt;/p&gt;

&lt;p&gt;Permission is hereby granted, free of charge, to any person obtaining a copy&lt;br&gt;
of this software and associated documentation files (the "Software"), to deal&lt;br&gt;
in the Software without restriction, including without limitation the rights&lt;br&gt;
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell&lt;br&gt;
copies of the Software, and to permit persons to whom the Software is&lt;br&gt;
furnished to do so, subject to the following conditions:&lt;/p&gt;

&lt;p&gt;The above copyright notice and this permission notice shall be included in&lt;br&gt;
all copies or substantial portions of the Software.&lt;/p&gt;

&lt;p&gt;THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR&lt;br&gt;
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,&lt;br&gt;
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE&lt;br&gt;
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER&lt;br&gt;
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,&lt;br&gt;
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN&lt;br&gt;
THE SOFTWARE.&lt;/p&gt;

</description>
      <category>actionshackathon21</category>
      <category>github</category>
      <category>iot</category>
      <category>python</category>
    </item>
    <item>
      <title>Notify Bot : Github Action + Workflow</title>
      <dc:creator>Atharva Shirdhankar</dc:creator>
      <pubDate>Tue, 07 Dec 2021 23:19:32 +0000</pubDate>
      <link>https://dev.to/hey_atharva/notify-bot-github-action-workflow-2676</link>
      <guid>https://dev.to/hey_atharva/notify-bot-github-action-workflow-2676</guid>
      <description>&lt;h3&gt;
  
  
  My Workflow
&lt;/h3&gt;

&lt;h4&gt;
  
  
  Motivation for Building building this Github Action :
&lt;/h4&gt;

&lt;p&gt;If you are Open Source Maintainer or Contributor or a developer working with team which has huge number of members then you have definitely used Slack at one point. And as a developer we even used Github. &lt;br&gt;
Since I m Open Source Contributor and Maintainer many a times I have to find issues and take help regarding those from community members to solve that issue or direct the beginner contributor to proper issue . And mostly I have communicate and collaborate with other maintainer and contributors on Slack so I thought building this action which will surely save time of Maintainers and contributors .&lt;/p&gt;
&lt;h4&gt;
  
  
  Features:
&lt;/h4&gt;

&lt;ol&gt;
&lt;li&gt;Greet - When contributor of the project creates pull request a "Thank you" greet is send .&lt;/li&gt;
&lt;li&gt;Issue Notification - When someone creates new issue few context like issue title, issue creator/contributor username and link to the github issue is shared on Slack channel.&lt;/li&gt;
&lt;li&gt;Issue Notification - When someone creates pull request few context like issue title, pull request creator/contributor username and link to the github issue is shared on Slack channel.&lt;/li&gt;
&lt;/ol&gt;
&lt;h4&gt;
  
  
  What will this github action do? If I use it in my github project!!
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;If you are maintainer of project this github action will surely save your time . And let help newbie contributors effectively and discuss them about the following issue on slack. You can direct new contributors to the good first issue and direct them properly.&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;
  
  
  Submission Category:
&lt;/h4&gt;

&lt;p&gt;Maintainer Must-Haves&lt;/p&gt;
&lt;h4&gt;
  
  
  Yaml File or Link to Code:
&lt;/h4&gt;


&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fassets.dev.to%2Fassets%2Fgithub-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/StarTrooper08" rel="noopener noreferrer"&gt;
        StarTrooper08
      &lt;/a&gt; / &lt;a href="https://github.com/StarTrooper08/Notify-Bot" rel="noopener noreferrer"&gt;
        Notify-Bot
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Maintainer Friendly Github Actions
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;Notify-Bot&lt;/h1&gt;

&lt;/div&gt;
&lt;p&gt;Features :&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Notification: Sends Message on Slack channel when someone create's issue or Pull Request.&lt;/li&gt;
&lt;li&gt;Greeting: Greets to the Contributors when they create new Pull Request&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Detailed Blog :
&lt;a href="https://dev.to/star_trooper/notify-bot-github-action-workflow-2676" rel="nofollow"&gt;https://dev.to/star_trooper/notify-bot-github-action-workflow-2676&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;



&lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/StarTrooper08/Notify-Bot" rel="noopener noreferrer"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;
 

&lt;h4&gt;
  
  
  How to get and configure Tokens :
&lt;/h4&gt;

&lt;p&gt;To use this action + workflow we need 3 Tokens/API keys/Security keys:&lt;br&gt;
They are as following:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Github Token : You don't need worry about this token since it will be automatically configured by Github.&lt;/li&gt;
&lt;li&gt;Tenor gif Token: &lt;/li&gt;
&lt;li&gt;Go ahead and visit the &lt;a href="https://tenor.com/gifapi/documentation" rel="noopener noreferrer"&gt;tenor gif developer portal&lt;/a&gt; and sign up with gmail and get your free api key.&lt;/li&gt;
&lt;li&gt;After getting your Tenor Token you can go to your github repository where you want to setup this action then go to settings of that repository .&lt;/li&gt;
&lt;li&gt;Search for 'secrets' option. And then click on new repository secrets.&lt;/li&gt;
&lt;li&gt;Give it a name and paste the token(eg.name: TENOR_TOKEN value: copied token from tenor gif portal).&lt;/li&gt;
&lt;li&gt;Slack App Token:&lt;/li&gt;
&lt;li&gt;Go to &lt;a href="https://api.slack.com/apps" rel="noopener noreferrer"&gt;Slack App portal&lt;/a&gt; and click on 'Create an App'
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy30epf7blbxmbbs7viuj.JPG" alt=" " width="800" height="334"&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;After clicking on 'create an app' you will be asked whether you want to start from scratch or from app manifest we will go for 'from scratch option' &lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F166sknhw588v82vxbme8.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F166sknhw588v82vxbme8.JPG" alt=" " width="672" height="476"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Then one popup will arise asking for app name and to use it in which slack workspace.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fge7re1p417kgzuwhedkl.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fge7re1p417kgzuwhedkl.JPG" alt=" " width="655" height="605"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Now search for Review scopes something like this option. Click on that button.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj8on84j6xd8nv6itgpl2.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj8on84j6xd8nv6itgpl2.JPG" alt=" " width="800" height="355"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;And add 2 scopes. Shown in the figure below.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmwqaztuzrvqyl54ibebd.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmwqaztuzrvqyl54ibebd.JPG" alt=" " width="800" height="440"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;You will see OAuth and Permissions option in the left side bar. Go to that option and scroll little down and click on  'install to workspace' to the workspace(workspace which we selected at the start)&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvcdq8k5xbw4hv1wtok0p.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvcdq8k5xbw4hv1wtok0p.JPG" alt=" " width="782" height="593"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Allow the App to join the workspace.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faisyc72kjvks73d56aa8.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faisyc72kjvks73d56aa8.JPG" alt=" " width="711" height="635"&gt;&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;After this above step you will see your slack app token copy it and store it in repository secrets similar to tenor token.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9ei5utel6vroemt2flga.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9ei5utel6vroemt2flga.JPG" alt=" " width="800" height="294"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Lastly invite your app into the slack channel you want.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F31m53id9jx9njl82dz6a.JPG" alt=" " width="361" height="154"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  How to setup this action + workflow on our repository:
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;After the configuring the token stuff you are just few steps away.&lt;/li&gt;
&lt;li&gt;Create &lt;code&gt;.github/workflows/my_action.yml&lt;/code&gt; directory.&lt;/li&gt;
&lt;li&gt;After that paste this yml code into &lt;code&gt;my_action.yml&lt;/code&gt; file.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;name: Notify Bot

on:
  pull_request:
      branches: [ master , main ] 
      types: [opened,closed]
  issues:
      types: [opened]


jobs:
  Greet:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: StarTrooper08/Notify-Bot
        with:
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
          TENOR_TOKEN: ${{secrets.TENOR_TOKEN}}


  notifyPR:

    runs-on: ubuntu-latest
    steps:
    - name: Notify slack about PR
      env:
        SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
      uses: abinoda/slack-action@master
      with:
        args: '{\"channel\":\"channel_id\",\"blocks\":[{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"*Github Pull Request:* ${{ github.event.pull_request.title }}\"}},{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"*Contributor Github Username:* ${{ github.event.pull_request.user.login }}\n*Request State:* ${{ github.event.pull_request.state }}\"}},{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"&amp;lt;${{ github.event.pull_request.html_url }}|View Pull Request&amp;gt;\"}}]}'


  notifyissue:

    runs-on: ubuntu-latest

    steps:
    - name: Notify slack about issue
      env:
        SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
      uses: abinoda/slack-action@master
      with:
        args: '{\"channel\":\"channel_id\",\"blocks\":[{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"*Github Issue:* ${{ github.event.issue.title }}\"}},{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"*Contributor Github Username:* ${{ github.event.issue.user.login }}\n*Issue State:* ${{ github.event.issue.state }}\"}},{\"type\":\"section\",\"text\":{\"type\":\"mrkdwn\",\"text\":\"&amp;lt;${{ github.event.issue.html_url }}|View Issue&amp;gt;\"}}]}'

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; Wherever I have written &lt;code&gt;channel_id&lt;/code&gt; in &lt;code&gt;args&lt;/code&gt; of the &lt;code&gt;notifyissue&lt;/code&gt; and &lt;code&gt;notifyPR&lt;/code&gt; jobs in my_action.yml file put the id of the channel where you have install your slack app. You will get the channel id in the link of slack workspace&lt;br&gt;
&lt;code&gt;https://app.slack.com/client/[workspace ID]/[channel ID]&lt;/code&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Congrats You have Successfully added the Github Workflow🎉🚀.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn528erea22378vtio15w.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fn528erea22378vtio15w.png" alt=" " width="498" height="225"&gt;&lt;/a&gt;&lt;br&gt;
Now you can create new pull request and issue and see the Magic happening ✨!!!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffog938ybi3qxkvvw450n.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffog938ybi3qxkvvw450n.png" alt=" " width="500" height="274"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>actionshackathon21</category>
      <category>github</category>
      <category>actions</category>
      <category>javascript</category>
    </item>
    <item>
      <title>Interesting Python Module PyTube</title>
      <dc:creator>Atharva Shirdhankar</dc:creator>
      <pubDate>Fri, 26 Nov 2021 11:07:58 +0000</pubDate>
      <link>https://dev.to/hey_atharva/interesting-python-module-1-pytube-4f7e</link>
      <guid>https://dev.to/hey_atharva/interesting-python-module-1-pytube-4f7e</guid>
      <description>&lt;p&gt;Hello Everyone ,&lt;br&gt;
In this Interesting Python Module series I will be discussing about interesting python module you must know.&lt;br&gt;
And it will be actually a fun way to learn python by making some micro projects using some interesting python module. So lets started...&lt;/p&gt;

&lt;p&gt;In this blog I will be discussing about &lt;code&gt;PyTube&lt;/code&gt;. Its an awesome python module which helps us download youtube video!!!&lt;/p&gt;

&lt;p&gt;I know ,I know ,you will be surprised by reading this, but yes this module help us download youtube video.&lt;/p&gt;

&lt;blockquote&gt;
&lt;h4&gt;
  
  
  Problem Statement :
&lt;/h4&gt;

&lt;p&gt;As we know youtube video can be downloaded and can be watched offline on mobile(iOS and Android) but on desktop its not possible . Using this python pytube module we can download youtube video on desktop.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;So not just waste time and learn how we can write python code to download youtube video.&lt;/p&gt;

&lt;p&gt;Before starting with the code part we must have python 2.7 or 3 version installed.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Note :&lt;br&gt;
When you are installing python do check the box which says something like "pip" we will required it for installing pytube module . If we dont do that we will get error during installation of pytube module.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And after python installed properly one more thing need to be installed and that is Pytube Module.&lt;br&gt;
So just open command prompt and type this pip command which will install our module.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;pip install pytube
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We will get output for the pip command something like this&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsrwrfrqhuggcgct9z02u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsrwrfrqhuggcgct9z02u.png" alt="pip install output" width="498" height="125"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;And I have also created one folder which has initially one python file and in this folder I m going to download youtube video.&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F313w7whvzf678hoagtf0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F313w7whvzf678hoagtf0.png" alt=" " width="769" height="143"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Now lets open ide and understand how code will work(I'm using the IDE which comes with python itself)&lt;/p&gt;
&lt;h4&gt;
  
  
  Code :
&lt;/h4&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="c1"&gt;# importing the pytube module
&lt;/span&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="n"&gt;pytube&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;YouTube&lt;/span&gt;


&lt;span class="c1"&gt;# link of the video to be downloaded
&lt;/span&gt;&lt;span class="n"&gt;link&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;https://youtu.be/z-vLtsKvp_4&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;

&lt;span class="n"&gt;yt&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nc"&gt;YouTube&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;link&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;# getting title of the video
&lt;/span&gt;&lt;span class="n"&gt;head&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;yt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;title&lt;/span&gt;
&lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;head&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="c1"&gt;#the streams is pytube class which help filter the content and download just audio or video or both
&lt;/span&gt;
&lt;span class="n"&gt;dl&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;yt&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;streams&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;get_by_itag&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;22&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;#itag is the value given to different video quality stuff.
# For example here itag value 22 means video quality is 720p and we download both audio as well as video format
# Similarly itag value 18 means video quality is 360p and there are many itag value through which you can download differently like just audio or video or both with different video quality.
&lt;/span&gt;
&lt;span class="n"&gt;dl&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;download&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h4&gt;
  
  
  Output:
&lt;/h4&gt;

&lt;p&gt;On console/python shell we get title of the youtube video printed.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foodpt1o8tgbixvh87pek.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foodpt1o8tgbixvh87pek.png" alt="Output 1" width="659" height="92"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Our video gets downloaded were our python file is present automatically&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F43sqr2wfrsipc1kjs661.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F43sqr2wfrsipc1kjs661.png" alt="video" width="796" height="154"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There is many methods and features to be explored of pytube ,you can read those on official pytube docs.&lt;/p&gt;

&lt;p&gt;Pytube : &lt;a href="https://pytube.io/en/latest/" rel="noopener noreferrer"&gt;Docs&lt;/a&gt; | &lt;a href="https://github.com/pytube/pytube" rel="noopener noreferrer"&gt;Github&lt;/a&gt; &lt;/p&gt;

&lt;blockquote&gt;
&lt;h4&gt;
  
  
  Idea for Mini Project using Pytube Module :
&lt;/h4&gt;

&lt;p&gt;We can make one mini project using PyTube and Tkinter which will download youtube video of different video quality and create GUI which will ask input from user for "youtube link","video quality",etc.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;I m a individual content writer and if you like my work ,do consider buying me a book your small contribution will help be to bring more awesome content.&lt;/p&gt;

&lt;p&gt;
&lt;a href="https://www.buymeacoffee.com/Atharva08" rel="noopener noreferrer"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn.buymeacoffee.com%2Fbuttons%2Fdefault-orange.png" alt="Buy Me A Coffee" width="434" height="100"&gt;&lt;/a&gt;
&lt;/p&gt;

</description>
      <category>python</category>
      <category>miniproject</category>
      <category>youtube</category>
      <category>beginners</category>
    </item>
  </channel>
</rss>
