DEV Community: Prathamesh Mali

My programming journey in 2020

Prathamesh Mali — Thu, 31 Dec 2020 07:55:41 +0000

I would like to share my programming experience in 2020. I've been coding consistently throughout the year, so I thought would be an interesting story.

This was an amazing year for me productivity-wise, I had so much time to learn the things I always want to learn, I started coding/ programming in 16th December 2019 from offline classes @s learning Java, cleared all my fundamentals there while doing an MSc which is still going on.
Honestly, in my whole 3 years of BSc I haven't learned much about programming or practically coding in general so I've decided that I should dedicate my time to learning these things. And because of lockdown, I got a plethora of time to invest in my skills.

Because of the lockdown, the offline classes were closed and we have so much free time Because I knew Java it was easier for me to pick up new languages, So that's what I did learned python from April, then made some small projects in python. While doing that I was also doing a front end web design course from freecodecamp.org. Then I just kept learning. Learned HTML, CSS, and JS took Modern JavaScript from Beginning course from Brad traversey. Then made some projects in JS and other third-party APIs. Along with courses I was solving problems on Edabit and Hackerrank daily it helped me to build logic. And I was also making small projects and some big ones, built my portfolio. Got a ton of certification but not very useful.

Now I'm still learning React and Nodejs, my goal is to solidify what I've learned and keep learning every day. I forgot to mention my friend @anki was also coding with me we were doing the same courses from udemy and freecodeamp we have the end of the day call explaining to each other what we learned and solving doubts on Teamviewer. Having a coding partner helps, you can motivate each other to solve each other's bugs.

The most important thing I learned is being consistent and believing in yourself, programming is not easy. If you're just wanted to learn for the sake of the job then you'll get bored or demotivated often times. Focus on learning and building skills having fun with it. My friends ask how do you keep yourself motivated, my answer is to keep the long term goal in the mind and do code every day even for an hour or 30 minutes. I had built the routine around the courses and projects that I took. Every day I almost learned for 4-5 hours on an average thanks to lockdown. I was also tracking my projects and course hours with clockify while learning it helped me to reflect on the time that I've spent per month, week, or day. And GitHub contributions chart is also the place to track your coding activity. I have created a repo for each programming language and frameworks that I've learned on Github and I was committing in it every day

My advice to anyone who wants to get started in coding is only this, "code every day" focus on the long term. It's not too late, start today and be consistent. I was very privileged to be in the condition and not worry about working, if you're in the same place don't waste your time get up and start working. I hope this motivates someone to get started with their journey. Best of luck everyone for the new year and may you achieve all your goals

Some stats to back up story:

My github contributions page:

Clockify:

Total Hours Spent coding, learning, building stuff, problem solving:

Connect with me:

Trying out Arch linux and i3 window manager.

Prathamesh Mali — Wed, 04 Nov 2020 07:40:49 +0000

Entering into the realm of Arch linux.
Previously I was using PopOS a debian based distribution mainly Ubuntu. It felt pretty bloated with the given gnome desktop environment. I was searching for something else customizable, practical and minimal.
When I went on reddit find about r/unixporn where I found about lots of custom setups based on arch, nix, gentoo and manjaro. Its beautiful, how you can change each and everything on your OS.
I got inspired and installed Manjaro linux on as a daily driver specfically Manjaro i3 editon. The best and challengin part is that it does not have a normal desktop environment it has i3 a window manager which gives a powerful keyboard navigation and not the use of mouse. Its pretty hard to get used to but makes the workflow much faster and efficient. So I'm switching to it and will keep learning. And also from last month I switched from Vscode to Vim(Neovim) its been amazing learning experience I was amazed by the speed of it and with tmux its just great. The whole concept of ditching the mouse and using only keyboard for navigation is seems fishy at first but when you get used to it there is no going back.

My current setup, fully customized:

Specs:

Neovim setup:

My dotfiles:
Click here

Connect with me:

Enable syntax highlighting in your code snippets

Prathamesh Mali — Thu, 03 Sep 2020 16:07:24 +0000

Photo by Chris Ried on Unsplash

I've noticed this on web on some sites they didn't have syntax highlighting for their code snippets the code is just white text on black background.
When you add your code snippets on the web or here on dev.to you can specify the language of the snippet in markdown while using it in that way the syntax highlighting is enabled.You can add it html and markdown.So it provides better readability. Hope this helps out someone.

Example code snippet without specified language:

const funYou = () => console.log("I am function 😃");
funYou();

def add(n1,n2):
    return n1 + n2

echo "Hello World"

{
   "Name": "jack",
   "Age": 25,
   "Location":"Spain"
}

You can add syntax highlighting by just adding the language name after 3rd backtick. just like following example:

Example code snippet with specified language:

const funYou = () => console.log("I am function 😃");
funYou();

def add(n1,n2):
    return n1 + n2

echo "Hello World"

{
   "Name": "jack",
   "Age": 25,
   "Location":"Spain"
}

Conclusion: All major languages are supported with markdown. This is just a suggestion that I want to make so if someone didn't know now you know. As always thanks for reading.

Connect with me:

Fetch API in node.js with weather API

Prathamesh Mali — Thu, 03 Sep 2020 12:55:14 +0000

Photo by Mia Anderson on Unsplash

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:

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

Now we can use the fetch module.

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 and go to account page 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.

Simple Fetch Example:

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:

{
  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:

{
  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.

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.

Fetch with async await:

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();

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.

(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

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 😄.

Weather App implementation Source code

Live site for example

Video Links:

Learn fetch API in 6 minutes

Connect with me:

Functional programming in JS using(map, filter and reduce)

Prathamesh Mali — Tue, 01 Sep 2020 23:32:08 +0000

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.

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.

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

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:

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.

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.

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:



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.



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.

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



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 ]

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.



// 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.

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



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

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

Without using Map:



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:



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

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

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

Object that we will be working with:



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",
        },
    ],
};



// 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",
];

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.

Syntax:

Regular JS:



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

Using ES6 arrow functions:



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.

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



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

Without using Filter:



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

console.log(passed); // 5

With Filter:



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

Example 2: Find dogs from the given array

Return the array of animal which has species dog



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:



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:



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

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

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:



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

Using ES6 arrow functions:



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:

Example 1: Find the sum of the provided numbers



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

Without using Reduce:



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:



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

Example 2: Find the average salary of the given employees



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



const salaries = EmployeesObject.Employees;

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


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

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 .

Video links:

Learning functional programming (JS conf)

Fun fun function's playlist

Connect with me:

Django starter with models

Prathamesh Mali — Tue, 25 Aug 2020 14:29:16 +0000

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

Django installation:

➜ python -m pip install Django

Steps for creating the same app:

1. Creating new site

➜ django-admin startproject employee_site

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

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

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

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.

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


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

http://localhost:8000/employees/

4. Adding models

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

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.

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.

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.

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

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

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

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)

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:

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.

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.

<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.

🥳 Our app is now completed 🎉

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:

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

DEV Community: Prathamesh Mali

My programming journey in 2020

Connect with me:

Trying out Arch linux and i3 window manager.

Connect with me:

Enable syntax highlighting in your code snippets

Conclusion: All major languages are supported with markdown. This is just a suggestion that I want to make so if someone didn't know now you know. As always thanks for reading.

Connect with me:

Fetch API in node.js with weather API

1. Installing node-fetch package

2. Fetching weather info from openweathermap API

Simple Fetch Example:

3. Async/Await :

Fetch with async await:

Example with IFFIE: (Immediately Invoked Function Expression)

Links:

Weather App implementation Source code

Live site for example

Further Reading:

Video Links:

Connect with me:

Functional programming in JS using(map, filter and reduce)

Programming Paradigms

1. Imperative Programming

Advantages:

Disadvantages:

Examples:

2. Declarative Programming

Advantages:

Disadvantages:

Examples:

Functional Programming

Main concepts to learn in Functional Programming:

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.

1. Map

Syntax:

Where can I use it ?

Example 1: Finding square of each number in array

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

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

2. Filter

Syntax:

Example 1: Find how many students pass the test

Example 2: Find dogs from the given array

3. Reduce

Syntax:

Example 1: Find the sum of the provided numbers

Example 2: Find the average salary of the given employees

Further Reading:

Video links:

Connect with me:

Django starter with models

Pre-requisites software to be installed:

Steps for creating the same app:

1. Creating new site

2. Creating new app

3. Creating new view

4. Adding models

5. Accessing the admin panel

6. Registering the models

7. Creating templates and adding it to views

8. Fetching the data from models

9. Rendering data to templates

For running the app:

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

In the end our site will something like this:

Conclusion