
Here's how I manage my Git workflow—fast, clean, and without switching between tabs:

### 🔹 Create Branch

Using oh-my-zsh shortcut:

```bash
gcb feat/add-company-logo
```

(No more typing long `git checkout -b` commands.)

### 🔹 Make Commits

Using **git-cz** (Commitizen) for consistent, structured commits — picking the right type (`feat`, `fix`, etc.) and writing clear messages.

```bash
git cz
```

### 🔹 Create Pull Request

This is where it gets powerful:

```bash
gh pr create --base main
```

With GitHub CLI, I can open a PR from the terminal, get the link instantly, and skip the GitHub UI altogether.

### ✅ Why I love this:

- No context switching
- Clean commit history
- PR in seconds, ready to share or merge

**P.S.** I use `gh` CLI only for PRs — everything else is regular git + terminal + zsh.



When building a simple Todo app using **vanilla JavaScript**, one common question that comes up is:

> **“If I have multiple todos, how does each delete button know which `<li>` to remove?”**

Let’s break it down with a real example, code walkthrough, and a clear explanation of the JavaScript magic — **closures** — that make this possible.

---

### ✅ The Goal

We’re building a dynamic list where each todo item is added like this:

```html
<li>Buy Milk <button>X</button></li>
```

Clicking the ❌ button should remove only that specific `<li>` item — even when there are multiple in the list.

---

### 🛠️ HTML Setup

Here’s the basic HTML:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h1>Vanilla JS Practice</h1>

    <h2>Todo App</h2>
    <div id="todoContainer">
      <input id="todoInput" placeholder="Enter Todo here" type="text" />
      <button id="todoBtn">Add Todo</button>
    </div>

    <ul id="todoList"></ul>

    <script src="./index.js"></script>
  </body>
</html>
```

---

### 💡 JavaScript Code

```js
console.log({
  msg: "Hello from script",
});

// capture elements
const todoBtn = document.getElementById("todoBtn");
const todoInput = document.getElementById("todoInput");
const todoList = document.getElementById("todoList");

// function to generate a random 3-digit ID
const getRandomId = () => {
  return Math.floor(100 + Math.random() * 900);
};

// Add event listener to "Add Todo" button
todoBtn.addEventListener("click", () => {
  const currentInputText = todoInput.value;
  if (!currentInputText) return;

  // create new <li>
  const todoItem = document.createElement("li");
  todoItem.id = getRandomId();

  // create delete button
  const deletBtn = document.createElement("button");
  deletBtn.textContent = "X";
  deletBtn.style.cssText = "margin-left:10px";

  // ⛔️ here's the magic: this delete button "remembers" its todoItem
  deletBtn.addEventListener("click", () => {
    console.log("Delete clicked:", todoItem.id);
    todoItem.remove(); // removes *only this specific* <li>
  });

  // assemble and render
  todoItem.textContent = currentInputText.trim();
  todoItem.appendChild(deletBtn);
  todoList.appendChild(todoItem);
  todoInput.value = "";
});
```

---

### 🤯 How Does Each Delete Button Know Which `<li>` to Delete?

Even though all delete buttons are created inside the same event listener, **each delete button gets a unique reference to the `<li>` it was created with**.

That’s because of how **JavaScript closures** work.

> A closure is when a function “remembers” the variables from its outer scope — even after that outer function has finished executing.

So in our case:

```js
deletBtn.addEventListener("click", () => {
  todoItem.remove(); // this closure "remembers" the specific todoItem
});
```

Each ❌ button **closes over** the `todoItem` that was in memory at the time of creation. That means every button knows **exactly** which list item it belongs to.

---

### 🔁 Multiple Items? Still Works!

Let's say you add these todos:

1. Buy milk → `<li id="item-101">`
2. Walk dog → `<li id="item-202">`
3. Read book → `<li id="item-303">`

Each of their delete buttons was created **inside a separate click event**, each with its own `todoItem`. So when you click any ❌, **only that specific `<li>` is removed**.

---

### 🧠 What You’ve Learned

✅ How to create a dynamic list using vanilla JS  
✅ How to attach delete buttons to each item  
✅ Why JavaScript closures make it all work

---

## 💬 Want to Go Further?

If you're building more advanced apps, you might want to:

- Use **event delegation** for better performance
- Add **localStorage** to save todos
- Add **editing** or **completion** checkboxes

Let me know in the comments or reach out on [Twitter](https://twitter.com/Pratham_82) if you want a follow-up post on that!

---

### 🔗 Final Thoughts

This is a perfect example of how **understanding JavaScript fundamentals like closures** can help you write cleaner and more powerful code — even without a framework.

Happy hacking! 🧠✨



I think this is the most important topic in JS or you can say in Web development. Being a developer it's part of our job to work with backend and fetching information from the databases or from the internet. So knowing fetch is very essential for every web developer. I made this tutorial for simply get you started with fetch API and little bit of async/await so you can use it in the further projects.

Fetch API is one of the simplest way to make asynchronous HTTP request in the web browser. It uses JS **Promises** to deliver more flexible features for making requests on the browser. Fetch method returns a **Promise** so we can make use of **.then()** and **.catch()** methods to handle the response.

This is example of fetch request in node.js. You apply the same this tutorial with from part 2 for vanilla JS, **fetch** is available in vanilla JS out of the box so you don't have to go through the npm package installation.

## **1. Installing node-fetch package**

We first need to create a directory with and start the npm project in the same directory then create a javascript file.

```
mkdir weather-app
npm init -y
touch app.js
```

Installing "node-fetch" npm package.

```
npm i node-fetch --save
```

In the app.js file we have to import the package, for importing the package we have to use require statement as follows:

```javascript
const fetch = require("node-fetch");
```

Now we can use the fetch module.

<br />

## **2. Fetching weather info from openweathermap API**

For demonstration I will be using openweathermap API . Its free to use you can sign up for it [here](https://openweathermap.org/) and go to [account page](https://home.openweathermap.org/api_keys) and get you API_KEY.

Now we can make a http request by passing the url in fetch method.
First we will make a simple fetch request for checking if our API call works and then logging the data to the console.

But first lets check out the code how its actually working?.
We are passing the URL in fetch so, it will return a response object which has all the information we need, provided our URL and API is correct. If we pass wrong url or API key we will get an error object.

- **url**: Inside fetch the first chunk of info before the ? is our API endpoint.
- **?q:** q stands for query and in the query we can pass the city name so we will get info about that city. for this example I am hard coding the city to Mumbai. You can later take the city name from the user dynamically. link for my github repo for reference.
- **&units:** this is measuring units for eg. celsius or fahrenheit.
- **APP_ID:** this is our API Key.

This function will return a **Promise** in order to handle the promise we will use **.then()** is a method callback which is available after a **promise** is **resolved**. Promise is resolved means the request was successful and there is no error. The **.catch()** method deals with **rejected** cases only when the request is **not resolved** it will return the block of code in the **.catch()** method. And I'm using arrow function as callback functions inside .then and ,catch.

<br />

### **Simple Fetch Example:**

```javascript
fetch(
  "https://api.openweathermap.org/data/2.5/weather?q=mumbai&units=metric&APPID=YOUR_KEY",
)
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => console.log(err));
```

We can just run following :

```
node app.js
```

If everything works out, you will get this response in your console, this is JS Object so we can pull out the information as we need and render it on the front end.

**Successful response:**

```javascript
{
  coord: { lon: 72.85, lat: 19.01 },
  weather: [ { id: 721, main: 'Haze', description: 'haze', icon: '50d' } ],
  base: 'stations',
  main: {
    temp: 31.49,
    feels_like: 34.13,
    temp_min: 31,
    temp_max: 32,
    pressure: 1006,
    humidity: 70
  },
  visibility: 5000,
  wind: { speed: 5.7, deg: 300 },
  clouds: { all: 40 },
  dt: 1599127310,
  sys: {
    type: 1,
    id: 9052,
    country: 'IN',
    sunrise: 1599094455,
    sunset: 1599139321
  },
  timezone: 19800,
  id: 1275339,
  name: 'Mumbai',
  cod: 200
}
```

If the key is wrong will look **error** will look something like this:

```javascript
{
  cod: 401,
  message: 'Invalid API key. Please see http://openweathermap.org/faq#error401 for more info.'
}
```

We will further see how to catch the error and return a meaning full response in the dev console using try catch block.

<br />

## **3. Async/Await :**

In javascript there is a special syntax to work with promises i.e async/await

- **async:** For implementing it we just have to use **async** in the front of our function, which means the function will always returns a promise. The return values will be automatically wrapped in the promise. Simply the async function makes sure that our function will return a promise.
- **await:** It only works inside of async function. Await keyword makes javascript **wait** till the **promise** **settles** and **returns** itself means the JS will wait till the promise is **resolved** or **rejected**.

Now coming back to our example here we are creating a new function which returns the response from the fetch call i.e either a **resolved promise**(object with valid weather info) or **rejected promise**(error object).
In the method first we are using await to wait till the fetch is response is settled.

The function execution will **pauses** on the line where **await** is called and resumes when the promise is settled. It doesn’t cost any CPU resources, because the JavaScript engine can do other jobs in the meantime: execute other scripts, handle events, etc.

And in the end we are just calling the getWeather method.

<br />

### **Fetch with async await:**

```javascript
async function getWeather() {
  const weather = await fetch(
    "https://api.openweathermap.org/data/2.5/weather?q=mumbai&units=metric&APPID=YOUR_KEY",
  );
  let response = await weather.json();
  console.log(response);
}

getWeather();
```

<br />

### **Example with IFFIE:** (Immediately Invoked Function Expression)

this function will be immediately invoked as the name suggests. And I have used try and catch block for handling exceptions. This instead of storing the weather info in a variable we can directly use use url with fetch. Instead of just logging the data we can use specific info on the response object and store it in a variable. and then use it front end for showing weather information.

```javascript
(async () => {
  await fetch(
    "https://api.openweathermap.org/data/2.5/weather?q=mumbai&units=metric&APPID=YOUR_KEY",
  )
    .then((response) => response.json())
    .then((data) => {
      const forecast = data.weather[0].description;
      const temperature = data.main.temp;
      const name = data.name;
      console.log(`Today's forecast for ${name}: ${forecast}`);
      console.log(`It's currently ${temperature}°C `);
    })
    .catch(console.log(`Error: ${err}`));
})();
```

```
Today's forecast for Mumbai: haze
It's currently 30°C
```

<br />

#### **Conclusion:** We learned how to install fetch for nodejs. How to implement simple fetch callback. And finally async await. This was an initial step for fetching a weather API you can use lots of cool things with it If you want to see a live example of this weather API you can go the link below. Most of the things we've done here with an API is same for every API. So in future you can make use of fetch. Thanks for reading 😄.

<br />

### **Links:**

### Weather App implementation [Source code](https://github.com/Pratham82/Weather-JS)

### [Live site for example](https://weather-app-new.netlify.app/)

<br />

### **Further Reading:**

[Fetch API](<https://www.javascripttutorial.net/javascript-fetch-api/#:~:text=The%20Fetch%20API%20allows%20you,text()%20or%20json()%20.>)

[Async/await](https://javascript.info/async-await)

### **Video Links:**

[Learn fetch API in 6 minutes](https://www.youtube.com/watch?v=cuEtnrL9-H0)

<br />

#### **Connect with me:**



![](image.jpg)

Ever since I started learning react I heard this buzzword **Functional Programming**. I have searched all over the internet and found some useful resources, watched countless youtube videos and finally got the hang of it, And probably you'll get it too till the end of this article.
First we will see how programming paradigm works, then we will cover functional programming and once we know the basics we will go over the implementation with JavaScript's Map, Reduce and Filter method.

<br />

## **Programming Paradigms**

Basically there are various approaches to write you programs. If you've done a CS major you'd probably know these and if you didn't don't worry its a method to solve a problem. There are two main paradigms **Imperative programming** and **Declarative programming**.

<br />

### 1. Imperative Programming

**Imperative programming** works by **changing** the **program state** through **assignment statements**. The main focus in this approach is **how we achieve the goal**

#### **Advantages**:

- Very easy to implement
- Contains loops and variables

#### **Disadvantages**:

- More buggy compared to Declarative
- Hard to maintain
- Less efficient for long term
- Parallel programming not available

#### **Examples**:

**OOPS** is one of the most famous programming paradigm. OOPS short for (Object Oriented Programming) it comes under Imperative programming. In this paradigm everything is revolving around classes and objects.

- **Languages**: Java,Python,C++,Ruby, Smalltalk

<br />

### 2. Declarative Programming

**Declarative programming** is a way of building programs that **express** the **logic** of computation **without describing** its **control flow**.

#### **Advantages**:

- Short and Efficient Code
- Implemented by the methods not yet known at the time of programming
- Characterized by **high level of abstraction** that's why easier to represent complex logic
- Maintenance is possible irrespective of application development.

#### **Disadvantages**:

- Hard to understand for external Devs
- Hard to take characteristics of individual applications into account during programming

#### **Examples**:

<br />

**Functional programming** The functional programming paradigms has its roots in mathematics and it is language independent. The central model for the abstraction is the function which are meant for some specific computation and not the data structure. Data are loosely coupled to functions.

- **Languages**: JavaScript,Haskell,Scala,Erlang, Lisp

## **Functional Programming**

Functional programming is the process of building software by **composing** **pure functions**, **avoiding shared state**, **mutable data**, and **side-effects**. In functional programming application state flows through pure functions. As compared with **OOP** where the state is shared with methods and objects.

## Main concepts to learn in Functional Programming:

- **Pure functions:** pure function is the function which takes the input and gives the same output every single time. It does not affect the state. Pure function has no side effects
- **Function Composition:** it is the process of combining two or more functions which gives us a new function. Composing functions together is like snapping together a series of pipes for our data to flow through.
- **Avoiding shared states:** **shared state** is any variable, object or memory space in a program. which can be passed down between multiple scopes. But in functional programming we should avoid this for avoiding mutation of states which changes the state.
- **Avoiding side effects:** side effect is a function causing the state change which is observable outside the function call other than its return value. In simple words when our current function is modifying the state outside the current function.

<br />

## **Implementing of functional programming in JS with (Map, Reduce and Filter)**

### I will be covering most used functional array methods and JS which are **Map, Reduce and Filter**. These are the holy grail of functional programming in JavaScript. It is the best way iterate over arrays without changing them. Lets get started.

<br />

## **1. Map**

It can be applied to an array. The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

### **Syntax:**

**Regular JS:**

```javascript
let newArr = arr.map(function (currentValue, index, currentArray) {
  //logic for new array
});
```

**Using ES6 arrow functions:**

I would suggest using arrow function where possible its a great way of writing JS. Because its cleaner and more readable.

```javascript
let newArr = arr.map((currentValue, index, currentArray) => {
  //logic for new array;
});
```

- **function:** This will be callback function which can be declared before can be added as we use it.
- **currentValue:** Current value is similar to arr[i] when we iterate over array using for loops
- **index:** Current index of the item
- **currentArray:** the array we are iterating over. In this case its "arr"

- **newArr** will return a new array with our applied modifications.

### **Where can I use it ?**

We can use map while iterating over arrays, normally where you use for loop, we can use map method instead. We can extract the valuable info from the objects and return it in a form of an array. Simply it can be used on the array which has definite length. I loved using map and ditched "for loop" since I started learning it, its a good practice in writing clean code.

<br />

#### **Example 1: Finding square of each number in array**

**Without using Map:**
In regular JS fashion we would approach this problem something like this. Create an empty array. Iterate over the given array. Take the item from the current array and square it.Push the squared item in the empty array.Return the new array

```javascript
let arr = [1, 2, 3, 4, 5];

let squaredArray = [];

for (let i = 0; i < arr.length; i++) {
  squaredArray.push(arr[i] ** 2);
}

// Output:
console.log(squaredArray); // [ 1, 4, 9, 16, 25 ]
```

<br />

**With Map:**
Now we can see some map magic. While doing the same thing using map we don't have to explicitly declare a new array map method creates it under the hood. map method returns a copy of the array.

```javascript
// Using map and arrow function it be applied something like this:
const newArr = arr.map((val) => val ** 2);
console.log(newArr); // [ 1, 4, 9, 16, 25 ]
```

In the above example we are calling the map method on **arr** and passing in the callback function which will return an array of

So now you can see, how powerful it is. If you are seeing it for the first time it can be little confusing but trust me if you try to embrace the difficulty and start using it.

<br />

#### **Example 2: Add the index of the current item into itself**

```javascript
// Input:
const arr = [0, 1, 2, 3, 4, 5];

// Output:
// [ 0, 2, 4, 6, 8 ]
```

**Without using Map:**

```javascript
let newArray = [];

for (let i = 0; i < arr.length; i++) {
  newArray.push(arr[i] + i);
}

console.log(newArray); // [ 0, 2, 4, 6, 8 ]
```

In the following example we will make use of 3 parameters. **val** is the current value of item, **index** od current item, **arr** is the current array that we are iterating

**With Map:**

```javascript
const newArray = arr.map((val, index, arr) => val + arr[index]);

console.log(newArray); // [ 0, 2, 4, 6, 8 ]
```

<br />

#### **Example 3: Extract full name and title of the employees from given object**

Object that we will be working with:

```javascript
let EmployeesObject = {
  Employees: [
    {
      userId: "rirani",
      jobTitleName: "Developer",
      firstName: "Romin",
      lastName: "Irani",
      employeeCode: "E1",
      region: "CA",
      phoneNumber: "408-1234567",
      emailAddress: "romin.k.irani@gmail.com",
    },
    {
      userId: "nirani",
      jobTitleName: "Database Admin",
      firstName: "Neil",
      lastName: "Irani",
      employeeCode: "E2",
      region: "CA",
      phoneNumber: "408-1111111",
      emailAddress: "neilrirani@gmail.com",
    },
    {
      userId: "thanks",
      jobTitleName: "Program Directory",
      firstName: "Tom",
      lastName: "Hanks",
      employeeCode: "E3",
      region: "CA",
      phoneNumber: "408-2222222",
      emailAddress: "tomhanks@gmail.com",
    },
  ],
};
```

```javascript
// Storing employee Array in separately for readability
const data = EmployeesObject.Employees;

// Extracting the required data and storing into new array
const curatedData = data.map(
  (employee) =>
    `Name: ${employee.firstName} ${employee.lastName}, Title: ${employee.jobTitleName}`,
);

console.log(curatedData);

// Output:
[
  "Name: Romin Irani, Title: Developer",
  "Name: Neil Irani, Title: Database Admin",
  "Name: Tom Hanks, Title: Program Directory",
];
```

<br />

## **2. Filter**

Filter is a higher order function which will loops through an array, and for each item going to pass it in callback function. It will expect the callback function to return either true or false, to tell filter whether pr not this item should be in the new array. The filer() method also creates a new array but only with the elements which passes the test provided in the callback function.

<br />

### **Syntax:**

**Regular JS:**

```javascript
let newArr = arr.filter(function (currentValue, index, currentArray) {
  //Condition for new array
});
```

**Using ES6 arrow functions:**

```javascript
let newArr = arr.filter((currentValue, index, currentArray) => {
  // Condition for new array
});
```

- **function:** This will be callback function which checks the condition if its true or false for each item
- **currentValue:** Current value is similar to arr[i] when we iterate over array using for loops
- **index:** Current index of the item
- **currentArray:** the array we are iterating over. In this case its "arr"

- **newArr** will return a new array with our applied modifications.

<br />

#### **Example 1: Find how many students pass the test**

You are provided with the marks of students, passing marks is 35, you have to find how many students passed the test

```javascript
let marks = [34, 56, 67, 12, 98, 71, 45, 32];
```

**Without using Filter:**

```javascript
let passed = 0;
for (let i = 0; i < marks.length; i++) {
  if (marks[i] > 35) {
    passed++;
  }
}

console.log(passed); // 5
```

**With Filter:**

```javascript
let passedStudents = marks.filter((mark) => mark > 35).length; // 5
```

<br />

#### **Example 2: Find dogs from the given array**

Return the array of animal which has species dog

```javascript
let animals = [
  { name: "FluffyKins 🐇", Species: "rabbit" },
  { name: "DexLuthor 🐕", Species: "dog" },
  { name: "Trenton 🐕", Species: "dog" },
  { name: "Joey 🐕", Species: "dog" },
  { name: "FetchFishy 🐟", Species: "fish" },
  { name: "Dianna 🐟", Species: "fish" },
  { name: "CatePurry 🐈", Species: "cat " },
  { name: "BobBear 🐻", Species: "bear" },
  { name: "Todd 🐻", Species: "bear" },
  { name: "AlexLeon 🦁", Species: "lion" },
];
```

**Without using Filter:**

```javascript
let dogsFor = [];
for (let i = 0; i < animals.length; i++) {
  if (animals[i].Species == "dog") {
    dogsFor.push(animals[i]);
  }
}

console.log(dogsFor);

//Output:
[
  { name: "DexLuthor 🐕", Species: "dog" },
  { name: "Trenton 🐕", Species: "dog" },
  { name: "Joey 🐕", Species: "dog" },
];
```

**With Filter:**

```javascript
const dogs = animals.filter((animal) => animal.Species === "dog");

//Output:
[
  { name: "DexLuthor 🐕", Species: "dog" },
  { name: "Trenton 🐕", Species: "dog" },
  { name: "Joey 🐕", Species: "dog" },
];
```

<br />

## **3. Reduce**

This can be the most confusing method in the bunch, its just has lots of **parameters**. Basically we are taking a **iterable** array or object and converting it to a **single value**. Normally we have to use the **accumulator**(it can be an array or the value 0) for storing the **data**, but **reduce** method gives us this accumulator **out of the box**. It is the **first parameter** in the **callback function**, and the **initial value** of this accumulator is provided **after** the **function callback** inside round braces.

Reduce method executes a reducer function that you provide as a callback and returns a single output. In other words it takes the iterable and reducer function then return a reduced value.

Reducer comes with some terminology such as reducer and accumulator.

- The accumulator is the value that we end with and the reducer is what action we will perform in order get to one value.
- accumulator is just a fancy word for an empty array or zero.
- Reduce will return one value and one value only hence the name is reduce

### **Syntax:**

**Regular JS:**

```javascript
let newArr = arr.reduce(function (accumulator, currentVal, index, currentArr) {
  //Reducer function
}, initialValue);
```

**Using ES6 arrow functions:**

```javascript
let newArr = arr.reduce((accumulator, currentValue, index, currentArray) => {
  //Reducer logic
}, initialValue);
```

- **function:** This will be callback function which checks the condition if its true or false for each item
- **accumulator:** The accumulator accumulates callback's return values. It means its stores all the values returned by callback. It can be a number, array or object.
- **currentValue:** Current value is similar to arr[i] when we iterate over array using for loops
- **index:** Current index of the item
- **currentArray:** the array we are iterating over. In this case its "arr"

- **newArr:** will return a new reduced array.
- **initialValue:** A value to use as the first argument to the first call of the callback.
  Further Reading:

<br />

#### **Example 1: Find the sum of the provided numbers**

```javascript
let scores = [99, 45, 67, 35, 76, 29, 78, 83, 69, 88];
```

**Without using Reduce:**

```javascript
let avg = 0;

function avgFor(arr) {
  for (i = 0; i < arr.length; i++) {
    avg += arr[i];
  }
  return avg;
}

console.log(avgFor(scores)); // 669
```

**Wit Reduce:**

```javascript
let avg = scores.reduce((sum, score) => sum + score);
console.log(avg); //669
```

<br />

#### **Example 2: Find the average salary of the given employees**

```javascript
let EmployeesObject = {
  Employees: [
    {
      userId: "rirani",
      jobTitleName: "Developer",
      firstName: "Romin",
      lastName: "Irani",
      preferredFullName: "Romin Irani",
      employeeCode: "E1",
      salary: 75000,
      region: "CA",
      phoneNumber: "408-1234567",
      emailAddress: "romin.k.irani@gmail.com",
    },
    {
      userId: "nirani",
      jobTitleName: "Database Admin",
      firstName: "Neil",
      lastName: "Irani",
      preferredFullName: "Neil Irani",
      employeeCode: "E2",
      region: "CA",
      salary: 90000,
      phoneNumber: "408-1111111",
      emailAddress: "neilrirani@gmail.com",
    },
    {
      userId: "thanks",
      jobTitleName: "Program Directory",
      firstName: "Tom",
      lastName: "Hanks",
      preferredFullName: "Tom Hanks",
      employeeCode: "E3",
      region: "CA",
      salary: 150000,
      phoneNumber: "408-2222222",
      emailAddress: "tomhanks@gmail.com",
    },
    {
      userId: "draks",
      jobTitleName: "Full Stack Developer",
      firstName: "Drake",
      lastName: "Smith",
      preferredFullName: "Drake Smith",
      employeeCode: "E3",
      region: "CA",
      salary: 150000,
      phoneNumber: "408-2222222",
      emailAddress: "tomhanks@gmail.com",
    },
  ],
};
```

Storing employees array in a variable. finding the sum of the salary and storing it in an accumulator which initializes at 0, and finally dividing it by salaries length which will give us an average salary

```javascript
const salaries = EmployeesObject.Employees;

const avgSalary =
  salaries.reduce((avg, employee) => avg + employee.salary, 0) /
  salaries.length;

// Output
console.log(avgSalary); // 116250
```

<br />

#### **Conclusion**: I've just scratched a surface using on the functional programming part, JS has many other methods which comes under functional programming, But I think these are the main ones. My react journey has been very easy because of these methods and overall JS too. I encourage you to master these methods so you can write efficient JS code. Thanks for reading. Follow me on github I post well documented code with various examples on m [github](https://github.com/Pratham82/) .

<br />

### **Further Reading:**

[Functional Programming](https://link.medium.com/vHX7Nzr8o)

[Programming Paradigms](https://www.geeksforgeeks.org/introduction-of-programming-paradigms/)

### **Video links:**

[Learning functional programming (JS conf)](https://www.youtube.com/watch?v=e-5obm1G_FY)

[Fun fun function's playlist](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84)

<br />



## Essential Software Installation

1. Get Dotfiles
2. Shell
3. Terminal
4. Fonts
5. Browsers
6. Programming related
7. Multimedia

- Get Dotfiles

  ```bash
  git clone https://github.com/Pratham82/dotfiles.git

  # Move all Dotfiles in ~/
  cp .tmux.conf .vimrc .zshrc ~/

  # Copy kitty config
  cp -r dotfiles/.config/kitty/* ~/.config/kitty
  ```

- Shell

  - zsh

    ```bash
    # Install zsh
    sudo apt install zsh

    # change the default shell to zsh
    chsh -s $(which zsh)

    # logout and login again
    ```

  - ohmyzsh

    ```bash
    sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
    ```

  - ohzsh extensions

    ```bash
    # zsh autosuggestions
    git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

    # zsh syntax hughlight
    git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

    # FZF
    git clone --depth 1 https://github.com/junegunn/fzf.git ~/.fzf

    ~/.fzf/install
    ```

  - spaceship prompt

    ```bash
    # Cloning extensions
    git clone https://github.com/spaceship-prompt/spaceship-prompt.git "$ZSH_CUSTOM/themes/spaceship-prompt" --depth=1

    # Symlink
    ln -s "$ZSH_CUSTOM/themes/spaceship-prompt/spaceship.zsh-theme" "$ZSH_CUSTOM/themes/spaceship.zsh-theme"
    ```

  - tmux, neofetch, htop

    ```bash
    sudo apt install tmux htop neofetch ncdu
    ```

  - lsd

    ```bash
    # Download latest lsd
    https://github.com/Peltoche/lsd/releases

    # Install lsd
    sudo dpkg -i lsd-musl_0.20.1_amd64.deb
    ```

- Terminal

  - Kitty

    ```bash
    sudo apt install kitty
    ```

- Fonts

  - Nerd Fonts

    ```bash
    # Go to NerfFonts folder
    sudo cp -r * /usr/share/fonts
    ```

- Browsers

  - Google chrome

    ```bash
    wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

    sudo dpkg -i google-chrome-stable_current_amd64.deb
    ```

- Programming related

  - Git setup

    - Personal account with SSH keys

      Step 1. Goto .ssh folder and generate ssh keys for all your github accounts

      ```bash
      cd ~/.ssh

      # If no present create one
      mkdir .ssh
      ```

      Step 2. Make rsa key pair

      ```bash
      # For personal email ID
      ssh-keygen -t rsa -b 4096 -C "mali.prathamesh82@gmail.com"

      # Save as personal ID
      id_rsa_pratham82

      # For work email ID
      ssh-keygen -t rsa -b 4096 -C "prathamesh@edulab.in"

      # Save as work ID
      id_rsa_prathameshedulab

      ```

      Step 3. Copy and paste the RSA key to the respective github account

      ```bash
      cat id_rsa_pratham82.pub
      # Copy the ouput to SSH Keys/ Add new

      cat id_rsa_prathameshedulab.pub
      # Copy the ouput to SSH Keys/ Add new
      ```

      Step 4: Create config file in .ssh folder And add below configs

      ```bash
      vim config

      # Copy paste the following
      # Personal account - default config
      Host github.com-pratham82
         HostName github.com
         User git
         IdentityFile ~/.ssh/id_rsa_pratham82
      # Work account
      Host github.com-prathameshedulab
         HostName github.com
         User git
         IdentityFile ~/.ssh/id_rsa_prathameshedulab
      ```

      Step 5. Make a common .gitconfig

      ```bash
      vim ~/.gitconfig
      # Copy pasete the follwoing in the file
      [user]
          name = pratham82
          email = mali.prathamesh82@gmail.com
      [includeIf "gitdir:~/Work/"]
          path = ~/Work/.gitconfig

      # Making gitcofig for "Work" direcotry
      cd ~/Work
      vim .gitconfig
      [user]
          name = prathameshedulab
          email = prathamesh@edulab.in
      ```

      Step 6. Remove all identities

      ```bash
      # Go to .ssh
      cd ~/.ssh

      # Remove all identites
      ssh-add -D

      # Add the identites
      ssh-add id_rsa_pratham82
      ssh-add id_rsa_prathameshedulab

      # Verify if all identites are added
      ssh-add -l
      ```

      Step 7: Check configuration is right by pinging to github with below commands

      ```bash
      # Check with personl account
      ssh -T github.com-pratham82

      # Check with work account
      ssh -T github.com-prathameshedulab
      ```

  - Languages specific

    - Node (fnm)

      ```bash
      curl -fsSL https://fnm.vercel.app/install | bash -s -- --install-dir "./.fnm" --skip-shell
      ```

    - python3 & pip3

      ```bash
      sudo apt update
      sudo apt install python3-pip
      ```

    - lua

      ```bash
      curl -R -O http://www.lua.org/ftp/lua-5.3.5.tar.gz
      tar -zxf lua-5.3.5.tar.gz
      cd lua-5.3.5/
      make linux test
      sudo make install
      lua

      Download luarocks
      ./configure --with-lua-include=/usr/local/include
      make
      sudo make install
      luarocks install --server=https://luarocks.org/dev luaformatter
      ```

  - DB

    - Mongo

      ```bash
      # Import the public key used by the package management system.¶
      wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -

      sudo apt-get install gnupg

      wget -qO - https://www.mongodb.org/static/pgp/server-4.4.asc | sudo apt-key add -

      # Create a list file for MongoDB
      echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.4.list

      # Update packages
      sudo apt-get update

      # Install mongo
      sudo apt-get install -y mongodb-org

      # Start mongodb
      sudo systemctl start mongod

      # Verify that MongoDB has started successfully
      sudo systemctl status mongod
      ```

    - MySQL

      ```bash
      https://stackoverflow.com/questions/39281594/error-1698-28000-access-denied-for-user-rootlocalhost
      sudo apt update
      sudo apt install mysql-server

      # Check status
      sudo systemctl status mysql

      # Use secure installation for setting password
      sudo mysql_secure_installation
      ***press N for validating password

      # Fixing the root login with following commands
      sudo mysql
      use mysql;

      # Check what plugin is used for root auth
      SELECT User, Host, plugin FROM mysql.user;

      # Change root user plugin auth
      ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '9892';
      FLUSH PRIVILEGES;

      ------------------------------------------------------------------
      # Create new user in MySQL
      CREATE USER 'pratham82'@'localhost' IDENTIFIED BY 'rootedpirate';
      # CREATE USER 'pratham82'@'localhost' IDENTIFIED BY '9892';
      GRANT ALL PRIVILEGES ON *.* TO 'pratham82'@'localhost' WITH GRANT OPTION;

      sudo systemctl stop mysql
      sudo apt-get remove --purge mysql-server
      sudo apt-get autoremove
      sudo apt-get autoclean

      # Remove mysql server
      sudo systemctl stop mysql
      sudo apt remove --purge mysql-server
      sudo apt purge mysql-server
      sudo apt autoremove
      sudo apt autoclean
      sudo apt remove dbconfig-mysql
      ```

    - Mongo compass

      ```bash
      https://www.mongodb.com/try/download/compass?tck=docs_compass

      https://downloads.mongodb.com/compass/mongodb-compass_1.26.1_amd64.deb

      sudo dpkg --install mongodb-compass_1.26.1_amd64.deb

      sudo apt --fix-broken install
      ```

    - dbeaver

      ```bash
      https://dbeaver.io/download/

      sudo dpkg -i
      ```

  - Containerization

    - Docker

      ```bash
      # Install docker
      sudo apt-get update
      sudo apt-get install \
          apt-transport-https \
          ca-certificates \
          curl \
          gnupg \
          lsb-release

      # Add Docker’s official GPG key:
      curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

      # Add docker in package list
      echo \
        "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu \
        $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

      # Add permission to current user
      sudo groupadd docker

      sudo usermod -aG docker ${USER}

      # Install docker-compose
      sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

      sudo chmod +x /usr/local/bin/docker-compose
      ```

  - Other tools

    - Remina SSH client

      ```bash
      sudo snap install remmina
      ```

    - Filezilla

      ```bash
      sudo apt update
      sudo apt install filezilla
      ```

  - IDEs & text editors

    - VScode with synced settings

      ```bash
      # Download vscode .db package
      https://code.visualstudio.com/download

      # Install vscode
      sudo dpkg -i code*.deb
      ```

    - Pycharm

      ```bash
      sudo snap install pycharm-community --classic
      ```

  - API related

    - Postman

      ```bash
      sudo snap install postman
      ```

- Multimedia

  - VLC media player

  ```bash
  sudo snap install vlc
  ```



<br />

## Introduction 📢

Python is an easy to learn, powerful programming language.
It has efficient high-level data structures and a simple but effective approach to object-oriented programming.
Python’s elegant syntax and dynamic typing, together with its interpreted nature,make it an ideal language
for scripting and rapid application development in many areas on most platforms.

<br />

### Hello world 👋

In this program we are using python3 . You can get it here.
After installation you directly get stared with python IDLE.
Or else you can use your favourite text editor and add python extension.
In python IDLE you can get the output,
directly as you have written the code and pressed entered.

In this program we are just printing out hello world string. If you are familiar with another programming language,
then you can notice there is no main method here. Actually we don't have to explicitly call in the main method here.
Python compiler will do this for us, That is one of the best part of python it is very easy get familiar with syntax.

First program:

copy code from here:

```python
print("Hello world, this is my first line code ever!")
```

<br />

#### Variables 📦

Variables in python
Variables are basically like empty containers where you can store values.
Unlike many conventional languages it doesn't have command for declaring Variables.

```python
num1 = 234
num2 = 2434.46
name1 = 'John Snow'

```

<br />

#### Multiple Assignment

```python
a= b=c=d=1
print(c)

a,b,c,d = 12,44,546, "Var 4"
print(d)
```

<br />

#### Data types 💾

Data types are the classification or categorization of data items.
It represents the kind of value that tells what operations can be performed on a particular data.

Data types in python:

• 1. Numbers  
• 2. Strings  
• 3. List  
• 4. Tuple  
• 5. Dictionary

<br />

#### Similarities between Java

- Tuple is similar to the list. but for its declaration we use parenthesis()
- Tuples cannot be updated like list
- Dictionary is Similar to hashtable.
- Dictionaries are enclosed by curly braces { } and values can be assigned and accessed using square braces ([])

```python
# 1. Numbers

number1 = 3423

# 2. Strings

str1 = "This is the Testing string"
print(str1)       # Prints complete string

# 3. List

list = ['normal 1', 7834, " snow", 45641.54, 'john', 70.2 ]
print(list)         # Prints complete list
print(list[0])       # Prints first element of the list

# 4. Tuple

tuple1 = (342,35.54564,"new1",211,"FIle34",'Rock',2352)
print(tuple1)          # Prints complete tuple
print(tuple1[4])       # Prints fifth element of the tuple

# 5. Dictionary

dict1 ={'student 1':123,'Lecture 34':411,'Food':'Category'}
print(dict1)             #Printing whole dictionary
print(dict1['student 1'])    # Prints value for 'Student 1' key
```

<br />

#### If else 👍 / 👎

An else statement can be combined with an if statement.
An else statement contains the block of code that executes if the conditional expression in
the if statement resolves to 0 or a FALSE value. The else statement is an optional statement and there could be at most only
one else statement following if.

```python
n1 = 122
n2 = 223

if(n1 !=n2):
  print ("n1 is not equal to n2")

if n1>n2:
  print ("n1 is greater than n2")

elif n1==n2:
    print ("n1 is equal to n2")

else:
    print ("n1 is lesser than n2")
```

<br />

#### Functions 🏂

A function is a block of organized, reusable code that is used to perform a single, related action.
Functions provide better modularity for your application and a high degree of code reusing.
Functions help break our program into smaller and modular chunks. As our program grows larger and larger,
functions make it more organized and manageable.make it an ideal language for scripting and rapid application
development in many areas on most platforms.
Furthermore, it avoids repetition and makes the code reusable.

```python
num1 = int(input("Enter number: "))

def EvenOdd(num1):

  if num1%2==0:
    print("Entered number is Even ")

  else:
    print("Entered number is Odd ")

EvenOdd(num1)
```

<br />

References 🔗

Taken from TutorialsPoint and porgrammiz.
You can connect me via below links



This is my first post on Dev.to. I'm trying out new things, and I came acress django and the setup seemed bit confusing so I am making this tutorial/blog for the same topic.

This basic starter for django I have gone through the steps of creating a project and app for future reference. This is a django application for saving employee information and rendering it to the webpage.

### Pre-requisites software to be installed:

- Python
- Django

<br />
Django installation:

```
➜ python -m pip install Django
```

<br />

## Steps for creating the same app:

### 1. Creating new site

```
➜ django-admin startproject employee_site
```

<br />

### 2. Creating new app

```
➜ django-admin startapp employees
```

- ❗️ In the whole doc I will be referring **employee_site** as **site** and **employees** as **app**

- ❗️ In the shell commands I have used **python3** since I have a linux OS. If you are using windows use **python** instead of **python3**

<br />

### 3. Creating new view

Add new view in **views.py** of app
Create **urls.py** file in "app" directory
Copy paste the following code in view.py

```python
from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.
def employees_page(request):
   return HttpResponse('Hello World')
```

Add the url for view in **urls.py**

```python
from django.urls import path
from .import  views
urlpatterns = [
	path('',views.employees_page, name="employees")
]
```

Go to **urls.py** in "site" and add new path to the app using include method.

```python
from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('employees/', include("employees.urls")),
]

```

Now add your app name in **settings.py** inside the **site**

```python

INSTALLED_APPS = [
    'exmployees',
    'django.contrib.admin',
....
```

Now we can go the url mentioned in the app we can see the response added in **views.py**

```url
http://localhost:8000/employees/
```

<br />

### 4. Adding models

Go to **models.py** in "app" and create new model:

```python
from django.db import models

# Create your models here.
class employees_db(models.Model):
	emp_id = models.AutoField
	firstName = models.CharField(max_length=30)
	lastName = models.CharField(max_length=30)
	dept = models.CharField(max_length=30)
	salary = models.IntegerField()

	def __str__(self):
	 return self.firstName
```

For adding the model inside to the **site** we have to add the **appConfig** inside the **site's** **settings.py**

For copying the config first go to **apps.py** in "app" copy the "AppNameConfig" in our example it is **EmployeesConfig**. It wil be created automatically.

```python
from django.apps import AppConfig


class EmployeesConfig(AppConfig):
    name = 'employees'

```

Now go to **settings.py** in site and go to installed apps list and add "appName.apps.AppNameConfig" in our example it is **EmployeesConfig**.

```python
INSTALLED_APPS = [
    'employees.apps.EmployeesConfig',
    'django.contrib.admin',
    ...
]
```

Go to terminal and update the migrations and migrate. Make sure you are in the same directory as **manage.py**

```
➜ python3 manage.py makemigrations
➜ python3 manage.py migrate
```

Now our models are added to the database.

<br />

### 5. Accessing the admin panel

First we have to create a new super user

```
➜ python3 manage.py createsuperuser
```

Add the appropriate info and password
And Run server again

```
➜ python3 manage.py runserver
```

Go to /admin page and add the admin name and password

```
http://localhost:8000/admin
```

<br />

### 6. Registering the models

In order to use the models we have to register it

For doing that go to **admin.py** in **app**

Import our newly created model

Register the model
Code :

```python
from django.contrib import admin
from .models import employees_db

# Register your models here.
admin.site.register(employees_db)
```

Restart the server
We can check the models filed in our admin panel now

<br />

### 7. Creating templates and adding it to views

Create new folder named "templates" in app directory and add new html file

```
➜ mkdir templates
➜ touch index.html
```

Now go to **views.py** in our app and add return statement which renders our html page in **templates**

```
return render(request, 'index.html',dbData)
```

<br />

### 8. Fetching the data from models

First go to admin page:

```
http://localhost:8000/admin
```

Now you can see that **employees_db** has been created we can click on it and add new employees

Once it is done go to **view.py** in **app**

Now first we will import our **model** which is **employees_db** and then
store the **db data** to one variable and pass that data to the template as a third parameter.

Code:

```python
from django.shortcuts import render
from django.http import HttpResponse
from employees.models import employees_db

# Create your views here.
def employees_page(request):

	# fetching data from models
	dbData = {"data" : employees_db.objects.all()}

	return render(request, 'index.html',dbData)
```

Now we can access data from Database through **dbData** variable.

<br />

### 9. Rendering data to templates

Go to **templates\/** and open **index.html**

We can use the **data** key passed in the **dbData** object/dictionary.

We loop over it and render the values of attributes for eg. **emp.firstName** will give us firstName value.

```html
<div class="container-style">
  {% for emp in data %}
  <div class="emp-card">
    <p class="id"><b>ID:</b> {{emp.id}}</p>
    <p class="name"><b>Name:</b> {{emp.firstName}} {{emp.lastName}}</p>
    <p class="dept"><b>Dept:</b> {{emp.dept}}</p>
    <p class="salary"><b>Salary:</b> $ {{emp.salary}}</p>
  </div>
  {% endfor %}
</div>
```

You can add the optional styling which is included in my **index.html** page.

<br />

🥳 Our app is now completed 🎉

<br />

### For running the app:

```
python3 manage.py runserver
```

### Check the **employees** page. For checking go to the following link:

```
http://localhost:8000/employees/
```

### In the end our site will something like this:

![](https://i.postimg.cc/prRzPhnn/Screenshot-from-2020-08-24-19-39-02.png)

### Conclusion

So far we have learned have learned how to create a project and app in django and create models. We also learned how to create an admin and add new properties to the models, then rendering the properties to our html page.

Feel free to fork my repo tinker around with it 😄

Checkout the github repo [here](https://github.com/Pratham82/Django-starter-with-models)
