DEV Community: Amol Shelke

How To get Started with programming as a beginner.

Amol Shelke — Sun, 30 Oct 2022 19:33:58 +0000

Getting started.

What comes to your mind when you think about programming. In my mind the first comes is programming is hard. tones of coding languages.
but it's just before you started. once you started you will feel like oh how silly I was thinking.

Programming Language.

The most important thing Programming Language. there are plenty of programming languages available in the programming world. Which one we choose if we just getting started. Well it depends on person to person or what you want to, programming is not just about print('hello world'). There are to many different jobs out there which uses all different languages and frameworks. So which one we should learn. I suggest if you have never code in your life then choose Python it's easy to write its syntax is like writing an English sentence.
make small projects with it, make your coding basics clear and then you can switch from Python to any other language.

What do you Want to become.

well now you learnt a Programming Language. but what do you want to become. there are many different things out there you can do when you started your journey as a programmer.
for example:

Web Development
App Development
Game Development
Machine Learning.
many more.

choose any one field and learn it and create projects deployed them share with other peoples.

Just Learn enough!

You don't have to become a master Just learn this much that you can create something on your own. programming is all about creating things, being stuck on a problem, finding a solution.

How I started My Open-Source contribution Journey.

Amol Shelke — Sat, 09 Apr 2022 11:24:32 +0000

first contribution..

I still remember my fist issue and first pull request in one of my friends project resumegen it was a react project but I'm not familiar with react that time. So I just create a Readme.md file for that project😅. and I think that why he will merged my pull request even I don't did anything just create a Readme.md file and write some information about his project only 20 line of markdown I contribute in that project because I was curious about contributing in open-source project I did my first pull request and after a day my pull request was merged by the owner of the project..

And that's how I started contributing in open-source projects and then after a month I get to know that there is an open-source program is organized by Girl Script Summer of code it was a 3 month long program in which we have to choose any project according to our interest and contribute to them and I join the program I was selected as an open-source contributor I have contributed in many frontEnd projects and still contributing it was a great experience

I highly suggest to beginner developers to contribute in open-source projects it gives you an idea of real world programming how to understand others code and many more

Wish you a good day❤️

Drop your Github Usernames Would love to see your profiles💕

Amol Shelke — Mon, 28 Mar 2022 16:36:01 +0000

What tips will you give to a newbie JavaScript learner?

Amol Shelke — Sat, 26 Mar 2022 08:37:43 +0000

Spread operator in JavaScript.

Amol Shelke — Mon, 21 Mar 2022 12:46:40 +0000

Using spread operator we can separate the elements of an array, object.

for Example:

const num = [1, 2, 3, 4]

Without spread operator we have to write like this

console.log(num[0], num[1], num[2], num[3]) // 1, 2, 3, 4

but using spread operator we can simply log them without writing to much code like this

console.log(...num);

NOTE

the spread operator is actually a bit similar to destructuring because it also helps us get elements out of array,
Now the big difference is that the spread operator takes all elements from the array and it also dose not create a new variable, and as a consequence we would use it where we write values separated by commas.

Importance use cases of spread operator

Iterables are strings, arrays, maps, sets NOT Objects

const str = 'amol'
const letter = [...amol, '', 's.']
console.log(letter)

Output //['a', 'm', 'o', 'l', '', 's.']

Now just Keep in mind that we can still only use the spread operator when building an array or where we pass values into a function.

console.log(`${...str}`) // here it will not work.

Because this is not a place that expects multiple values separated by commas. So again multiple values separated by comma are usually expected when we pass argument into a function or when we build a new array.

When should we use Let and const in our code🤔.

Amol Shelke — Fri, 25 Feb 2022 05:26:43 +0000

Why we should use let and const in our code?

So the Let and Const come in ES6 Update and the let and const are often used by many developers, if you went and watch a tutorial now, you'll get to see let and const everywhere.
So the let is use to declare a variable, and we can reassign the value of the let declare variable anywhere in our program.
And the Const is used to declare a variable, and we cannot mute the value of the const to declare the variable in our program.

So when we use let? and when we use const?

use let when you are sure that you will need to change the value of a variable throughout your program.

For Example

let age = 19;

So in this example, I declare a variable age with the let keyword, because I know that the value of the age variable is need to be changed after a year. and I can change it in my code anywhere. like this.

let age = 20;

and use const when you are sure that you will not need to change the value of a variable throughout your program.

For Example

const birthYear = 20;

So in this example, I declare a variable with the const keyword, because I know that the value of the birthYear variable is don't need to change anywhere in my program. And same thing with any variable that are declare with const variable we can't reassigned the value of them or cannot change them in anywhere in our program.

CSS Box Model Explain!

Amol Shelke — Thu, 17 Feb 2022 08:36:27 +0000

CSS Box model:
As a front End Developer I myself not good at CSS but when I was a beginner in CSS I might get confused between margin padding border such properties because I never learn them properly so in this post I'm going to show you how simple it is.

An Element: As if you are familiar with HTML then you should know that every html tag is an element. So the first thing that comes in box model that is Element. We can style it using the box model properties or any properties that are present in CSS .

<button class="btn">Cick me</button>

Padding: Padding is a property for of both sides of the Element, It's basically give space inside any Element. and using Padding property we can make our any element beautiful. it has four different properties padding-top, padding-bottom, padding-right, padding-left;

.btn {
     padding-top: 10px;
     padding-bottom: 10px;
     padding-right: 10px;
     padding-left: 10px;
}

Border: Border is an property from box model it is useful for making the borders outside of an element also. We can use them to remove the borders that already have on buttons and all that stuff using border: none property

.btn {
    border: 2px solid #fff;
}

Margin: As similar as padding the margin is also use to giving the space to an Element, But not from inside the margin gives the space outside to an Element it is most useful property that you have be working with most of your time if you are a front end Developer

How JavaScript works behind the scenes?

Amol Shelke — Tue, 25 Jan 2022 16:21:25 +0000

Everything in javaSscript happens inside an execution context

Execution context

Execution context is like an big box and it has two component in it.

The first component is known as memory component so this is a place where a variable and function are store as an key value pair and it is also know as Variable environment
The second component of the execution context is the code component so this is the place where the code is executed one line at a time. and it is also know as thread of execution

JavaScript is a synchronous single threaded Language

The single threaded means that JavaScript can only execute one command at a time. and in a specific order the next line of code will execute after the first line of code. As soon as a JavaScript program run a brand new execution context will created.

It has two component:-

memory creation phase
code execution phase

var a = 2;
 function square(num){
  var ans = num * num;
  return ans;
}

var square2 = square(num);
var square4 = square(4)

Memory Creation Phase:
In Memory Creation Phase we are allocating all variable and function in global space inside the whole program and we allocate the variable with undefined and in case of function we just stored the function as it is.
Code Execution Phase:
In this phase the JavaScript being single threaded language will run line by line and allocate the value of a variable and update the values of variable and function.

Javascript Closures

Amol Shelke — Wed, 19 Jan 2022 13:24:26 +0000

JavaScript variables can belong to the local or global scope.

Global variables can be made local (private) with closures.

Global variable

A function can access all variable defined inside the function like this:-

 function calculateNum() {
  let a = 4;
  return a * a 
}

But a function can also access the variable outside of the function like this:-

let i = 4; 
function calculateNum() {
return i * i
}

in the above example a is a global variable.
In a webpage global variable belong to the window object.

In the first example, a is a local variable.

A local variable can only used inside the function where it is defined. it is hidden from other function they can't use them.

Global and local variables with the same name are different variables. Modifying one, does not modify the other.

Closures Example

const add = (function () {
  let counter = 0;
  return function () {counter += 1; return counter}
})();

add();
add();
add();

Example explained

a variable add is assigned to the returning value of a self invoking function
a self invoking function only runs a once. it's sets the counter set to(0) and return a function expression
This way add becomes a function. The "wonderful" part is that it can access the counter in the parent scope.
This is called a JavaScript closure. It makes it possible for a function to have "private" variables.
The counter is protected by the scope of the anonymous function, and can only be changed using the add function.

A closure is a function having access to the parent scope, even after the parent function has closed

What is an IIFE in Javascript?

Amol Shelke — Sun, 16 Jan 2022 08:37:33 +0000

IIFE

An IIFE is (Immediately Invoked function Expression) that runs as soon it is defined.

(function () {
  var number = Math.random() * 10
  console.log(number >= 5)
})()

It is a design pattern also known as self executing anonymous function and contains two major parts

The first is the anonymous function with lexical scope enclosed withing the grouping selector (). This Prevents accessing variable withing the IIFE idiom as well as polluting the global scope.
The second part is the Immediately invoked function expression (). through which javascript engine will interpret the function

uses of IIFE

(function () {
  var Num = 17;
  console.log(1 + Num)
})

console.log(Num) // This will throw an error

A common use of an IIFE is that a function or a Variable declare inside of a IIFE block cannot be accessed outside of an IIFE block, thus preventing global scope from getting polluted. Also help us manage memory in efficient way.