DEV Community: Pranish Shrestha

25 Algorithms that all developers should know

Pranish Shrestha — Wed, 02 Mar 2022 17:44:46 +0000

Searching Algorithms

Linear search
Binary search
Depth first search
Breath first search

Sorting

Insertion sort
heap sort 3.Counting sort
merge sort
selection sort
Quick sort

Graphs

Kruskal's Algorithm
Les Algorithm
Dijkstra's Algorithm
Bellman Ford Algorithm
Floyd Warshall Algorithm
Topological sort Algorithm
Flood Fill Algorithm

Arrays

kadane's Algorithm
Floyd's Cycle detection Algorithm
KMP Algorithm
Quick select Algorithm
Boyer - more majority vote Algorithm

Basics

Huffman Coding Compression Algorithm
Euclid's Algorithm
Union Find Algorithm

Some of web dev resources for beginners

Pranish Shrestha — Tue, 01 Mar 2022 17:20:36 +0000

50 days of js
Css tricks
React resources
codewars
cs50

Enjoyy

Here are some weird Javascript

Pranish Shrestha — Mon, 28 Feb 2022 17:34:13 +0000

written in console :

>typeof NaN
'number'

>9999999999999999
10000000000000000

>0.1 + 0.2 == 0.3
false

>Math.max()
-Infinity
>Math.min()
Infinity

>[]+[]
''

>[]+{}
'[object Object]'

>{}+[]
0

>true + true + true === 3
true

>true- true
0

>(!+[]+[]+![]).length
9

>91-"1"
90

>[]==0
true

30 JavaScript Projects for beginners

Pranish Shrestha — Sun, 27 Feb 2022 03:39:29 +0000

30 javascript projects

This projects includes :

JavaScript Drumkit
CSS + JS Clock
Playing with CSS Variables and JS
Array Cardio Day 1
Flex Panels Image Gallery
Ajax Type Ahead
Array Cardio Day 2
Fun with HTML5 Canvas
14 Must Know Dev Tools Tricks
Hold Shift to Check Multiple Checkboxes
Custom HTML5 Video Player
Key Sequence Detection (KONAMI CODE)
Slide In on Scroll
Object and Arrays - Reference VS Copy
LocalStorage and Event Delegation
CSS Text Shadow Mouse Move Effect
Sorting Band Names without articles
Tally String Times with Reduce
Unreal Webcam Fun
Native Speech Recognition
Geolocation based Speedometer and Compass
Follow Along Links
Speech Synthesis
Sticky Nav
Event Capture, Propagation, Bubbling and Once
Stripe Follow Along Dropdown
Click and Drag to Scroll
Video Speed Controller UI
Countdown Clock
Whack A Mole Game

Also, for a better UI for Weather app
Better UI for weather app

Arrays in Javascript

Pranish Shrestha — Sat, 26 Feb 2022 16:55:00 +0000

Arrays in JavaScript is an object which stores a collection of multiple items in a single variable.

Here are some important JavaScript arrays :

[9,10,23,66].at(-2) //23 

['a','b','c'].concat('h') //['a','b','c','h']

[1, 30, 39, 29, 10, 13].every((x)=> x < 40) //true 

[1,2,3].fill(5,1,2) //[1,5,5]

[2,4,5,6,8].filter((x) => x % 2 === 0) //[2,4,6,8]

[2,4,5,6,8].find((x) => x%2 === 0) //[2]

[2,4,5,6].findIndex((x) => x%2 !==0) //2

[1,2,3].forEach(x => console.log(x)) 
//1
//2
//3

[1,2,3].includes(2) //true

['a','b','c'].join() //"a,b,c"

['a','b','c'].indexOf('a') //0
or ['a','b','c'].indexOf('e') //-1

['a','b','c'].length //3

[1,3,5,7].map((x)=> x*2) //[2,6,10,14]

[1,2,3].push(4) // [1,2,3,4]

[1,2,3].pop() //[1,2]

[1,2,3,4]reduce((prev,cur)=>(prev + cur)) //10

[1,2,3,4].reverse() //[4,3,2,1]

[1,2,3].shift() //1

[2,3,5,6].some((x) => x > 6) //false

[1,10000,5,2,2222,5555,7777,6666].sort() //[1,10000,2,2222,5,5555,6666,7777]

['a','b','c'].slice(1) //['b','c']

['a','b','d','e'].splice(2,0,'c') //['a','b','c','d','e']

destructuring
[a,b] = [10,20] //a= 10 , b=20

...(spread op)
[a,b,...rest] = [10,20,30,40,50]
console.log(rest); //[30,40,50]
console.log(a); [10];

10 websites to look for a remote web dev jobs in 2022.👇

Pranish Shrestha — Tue, 28 Dec 2021 00:07:29 +0000

Conclusion ⌛
I hope you found these tips helpful. If you need any help please let me know in the comment section.

👋 Thanks for reading, See you next time

Eloquent JavaScript(Part I : Chapter 3/Functions)

Pranish Shrestha — Mon, 27 Dec 2021 12:15:07 +0000

In this post, we will learn about:

Defining a Function
Bindings and Scopes
Nested Scope
Functions as Values
Declaration Notation
Arrow Functions
The Call Stack
Optional Arguments
Closure
Recursion
Growing Functions
Functions and Side Effects

Defining a function

A JavaScript function is a block of code designed to perform a particular task. It is executed when something invokes it.

const square = function(x){
return x*x;
}
function cube(y){
return y*y*y;
}
console.log(square(12)); //144
console.log(cube(6)); //216

function is created with an expression that starts with the keyword function. Functions have a set of parameters(in this case x and y) and a body which contains a statement that are to be called when a function is called. Functions are always wrapped with braces'{}' even when there is only one statement.
A function can have multiple parameters or no at all.

const makeNoise = function() {
  console.log("Pling!");
};

makeNoise();
// → Pling!

const power = function(base, exponent) {
  let result = 1;
  for (let count = 0; count < exponent; count++) {
    result *= base;
  }
  return result;
};

console.log(power(2, 10));
// → 1024

Some values produce a value, such as power, square and cube and some dont like makeNoise, whose only result is a side effect. A return statement determines the value the function returns. Functions that don’t have a return statement at all, such as makeNoise, similarly return undefined.

Syntax:

function name([parameter1, parameter2, parameter3) {
   statements
}

Bindings and Scopes

Each binding(variable) has a scope, which is the part of the program in which the binding is visible.
Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, scope determines the visibility of variables and other resources in areas of your code.
Variables defined inside a function are in local scope while variables defined outside of a function are in the global scope.

JavaScript has 3 types of scope: block, function and global scope. Before ES6(2015) JavaScript only has global and function scope. ES6 introduced let and const variable which provide block scope in JavaScript.

Block scope:

{
var x=2; 
let y=4;
}
//x can be used here but y cannot be used here

Variables declared with the var keyword can NOT have block scope.
Local Scope: Variables declared within a JavaScript function, become LOCAL to the function.

Function scope : Variables defined inside a function are not accessible (visible) from outside the function.Variables declared with var, let and const are quite similar when declared inside a function.

function number(){
var num = 2; //function scope
}

Global scope: Variable outside of a function becomes a function.

let x= 2;
//x can be used here
function sum(){
 //x can be used here
}
//x can be used here

Nested Scope

Blocks and functions can be created inside other blocks and functions, producing multiple degrees of locality.It is known as nested scope.

const hummus = function(factor) {
  const ingredient = function(amount, unit, name) {
    let ingredientAmount = amount * factor;
    if (ingredientAmount > 1) {
      unit += "s";
    }
    console.log(`${ingredientAmount} ${unit} ${name}`);
  };
  ingredient(1, "can", "chickpeas");
  ingredient(0.25, "cup", "tahini");
  ingredient(0.25, "cup", "lemon juice");
  ingredient(1, "clove", "garlic");
  ingredient(2, "tablespoon", "olive oil");
  ingredient(0.5, "teaspoon", "cumin");
};

The code inside the ingredient function can see the factor binding from the outer function. But its local bindings, such as unit or ingredientAmount, are not visible in the outer function.
Each local scope can also see all the local scopes that contain it, and all scopes can see the global scope. This approach to binding visibility is called lexical scoping.

Functions as Values

It is possible to store a function value in a new binding, pass it as an argument to a function, and so on. Similarly, a binding that holds a function is still just a regular binding and can, if not constant, be assigned a new value, like so:

let launchMissiles = function() {
  missileSystem.launch("now");
};
if (safeMode) {
  launchMissiles = function() {/* do nothing */};
}

Declaration Notation

There is a slightly shorter way to create a function binding. When the function keyword is used at the start of a statement, it works differently.

function square(x) {
  return x * x;
}

Function declarations are not part of the regular top-to-bottom flow of control.They are conceptually moved to the top of their scope and can be used by all the code in that scope. This is sometimes useful because it offers the freedom to order code in a way that seems meaningful, without worrying about having to define all functions before they are used.

Arrow functions

An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be used in all situations.

// Traditional Function
function bob (a){
  return a + 100;
}

// Arrow Function
let bob = a => a + 100;

The Call Stack

The way control flows through functions is somewhat involved. Let’s take a closer look at it. Here is a simple program that makes a few function calls:

function greet(who) {
  console.log("Hello " + who);
}
greet("Harry");
console.log("Bye");

A run through this program goes roughly like this: the call to greet causes control to jump to the start of that function (line 2). The function calls console.log, which takes control, does its job, and then returns control to line 2. There it reaches the end of the greet function, so it returns to the place that called it, which is line 4. The line after that calls console.log again. After that returns, the program reaches its end.

Optional Arguments

function square(x) { return x * x; }
console.log(square(4, true, "hedgehog"));
// → 16

In simple words, the extra arguments are ignored and just returns the value which it demands.
JavaScript is extremely broad-minded about the number of arguments you pass to a function. If you pass too many, the extra ones are ignored. If you pass too few, the missing parameters get assigned the value undefined.

The downside of this is that it is possible—likely, even—that you’ll accidentally pass the wrong number of arguments to functions. And no one will tell you about it.

The upside is that this behavior can be used to allow a function to be called with different numbers of arguments.

function minus(a, b) {
  if (b === undefined) return -a;
  else return a - b;
}

console.log(minus(10));
// → -10
console.log(minus(10, 5));
// → 5

Closure

A closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

function multiplier(factor) {
  return number => number * factor;
}

let twice = multiplier(2);
console.log(twice(5));
// → 10

In the example, multiplier is called and creates an environment in which its factor parameter is bound to 2. The function value it returns, which is stored in twice, remembers this environment. So when that is called, it multiplies its argument by 2.

Recursion

It is perfectly okay for a function to call itself, as long as it doesn’t do it so often that it overflows the stack. A function that calls itself is called recursive.

Imperative approach(loop)

function countDownFrom(number) {
    for (let i = number; i > 0; i--) {
        console.log(i);
    }   
}

countDownFrom(5);
// 5
// 4
// 3
// 2
// 1

Recursive approach

function countDownFrom(number) {
    if (number === 0) {
        return;
    }

    console.log(number);    
    countDownFrom(number - 1);
}

countDownFrom(5);
// 5
// 4
// 3
// 2
// 1

Growing Functions

writing a good function name that defines the code in it refers to growing functions. Function name that gives precise explanation is helpful to understand the code but don't write every bit of functionality you come across--you'll just be writing code that you never use.

Functions and side Effects

Functions can be divided into those that they called for their side effects and those that are called for their return values.(also possible to have both in same function).
A pure function is a specific kind of value-producing function that not only has no side effects but also doesn’t rely on side effects from other code.
When you are not sure that a pure function is working correctly, you can test it by simply calling it and know that if it works in that context, it will work in any context.

Conclusion ⌛
I hope you found these tips helpful. If you need any help please let me know in the comment section.

👋 Thanks for reading, See you next time

5 Free React Courses To Learn In 2022, If You're Just Starting Out.

Pranish Shrestha — Sun, 26 Dec 2021 15:36:29 +0000

1: Learn React for free

11 hour-long course, completely free from @bobziroll .
It contains 140+ interactive coding challenges and 9 projects! Best to begin with.

https://scrimba.com/learn/learnreact

2: 30 days of react
Beginner friendly and easy to understand with projects.

https://github.com/Asabeneh/30-Days-Of-React

3: The Beginner's Guide to React

No BS, React only course, working with a single HTML file through all the 28 lessons. @kentcdodds is my favorite teacher in the React community. Check out his other courses, newsletter, etc you won't regret it.

https://egghead.io/courses/the-beginner-s-guide-to-react

4: Develop Accessible Web Apps with React
The instructor is an expert in creating accessible React applications. This course will give you a concrete process for testing, refactoring, and building your applications with accessibility in mind.

https://egghead.io/courses/develop-accessible-web-apps-with-react

5: Build a Web App with React

A free, 5-part video course with interactive code examples that will help you learn React from glitch.
https://blog.glitch.com/post/react-starter-kit

Conclusion ⌛
I hope you found these tips helpful. If you need any help please let me know in the comment section.

👋 Thanks for reading, See you next time

Eloquent JavaScript (Part I: Chapter 1/values, types and Operators)

Pranish Shrestha — Sun, 26 Dec 2021 13:27:31 +0000

In this post, we will learn about:

Values
Numbers
Special Characters
Strings
Unary Operators and binary Operators
Boolean values
Comparison
Logical Operators
Empty Values
Automatic type Conversion
Short circuiting of Logical Operators

Values
To be able to work with large quantities of bits without getting lost, we must separate them into chunks that represent pieces of information. In a JavaScript environment, those chunks are called values.Every value has a type that determines its role. Some values are numbers, some values are pieces of text, some values are functions, and so on.

Numbers
values of the number type are numeric values. for a number of 16, it will cause the bit pattern for the number 16 to come to existence.
JavaScript uses 64 bits to store a single values.

Arithmetic
Main thing to do with arithmetic is numbers
10+20*3
first the computer uses 20*3 and then it adds with the rest. to make the addition first we use parenthesis.
(10+20)3 //now first adds then multiply
the computer solves in this order /+- .i.e. division, multiplication, addition and then subtraction.
There's also another one i.e. %.

Special Numbers
There are only three special values in JavaScript.
first two are infinty and - infinity and the 3rd one is NaN which stands for not a number.
if you try to calculate 0/0 or infinity - infinity etc. , you'll get NaN.

Strings
anything inside quotes are strings.

"hello this is a string"

"hello \n this is a string"
Output: 
hello
this is a string

/t is a tabline character

console.log(`half of 100 is ${100 / 2}`)
output: half of 100 is 50

Unary Operators
Operators that use one values are called unary operators.

console.log(typeof 4.5)
// → number
console.log(typeof "x")
// → string

operators that use two values are called binary operators
example:

console.log(- (10 - 2))
// → -8

Boolean Value
JavaScript produce two boolean values : true and false

Comparison

console.log(3 > 2)
// → true
console.log(3 < 2)
// → false

The way strings are ordered in roughly alphabetic.When comparing strings, JavaScript goes over the characters from left to right, comparing the Unicode codes one by one.

"a"<"b"<"c"<"d" etc.
"A"<"a"

There is only one value in JavaScript that is not equal to itself, and that is NaN (“not a number”).

console.log(NaN == NaN)
// → false

==,!=,<,>,<=,>= are used.

Logical Operators
JavaScript supports three logical operators: and , or , not
And(&&), OR(||), not(!)
Example:

console.log(true&&false) //false
console.log(true||false) //true

ternary operator:

console.log(true ? 1 : 2);
// → 1

Empty values
There are two special valus: null and undefined The difference in meaning between undefined and null is an accident of JavaScript’s design, and it doesn’t matter most of the time. In cases where you actually have to concern yourself with these values, I recommend treating them as mostly interchangeable.

Automatic Type Conversion

console.log(8 * null) //null becomes zero
// → 0
console.log("5" - 1)
// → 4
console.log("5" + 1) //concatenate
// → 51
console.log("five" * 2) //string and a number results Not a number(Nan)
// → NaN
console.log(false == 0)
// → true

When an operator is applied to the “wrong” type of value, JavaScript will quietly convert that value to the type it needs, using a set of rules that often aren’t what you want or expect. This is called type coercion

I recommend using the three-character comparison operators defensively to prevent unexpected type conversions from tripping you up. But when you’re certain the types on both sides will be the same, there is no problem with using the shorter operators.

Short-circuiting of logical operators

The logical operators && and || handle values of different types in a peculiar way. They will convert the value on their left side to Boolean type in order to decide what to do, but depending on the operator and the result of that conversion, they will return either the original left-hand value or the right-hand value.

example:

console.log(null || "user")
// → user
console.log("Agnes" || "user")
// → Agnes

If the initial value can be converted to false, you’ll get the replacement instead. The rules for converting strings and numbers to Boolean values state that 0, NaN, and the empty string ("") count as false, while all the other values count as true. So 0 || -1 produces -1, and "" || "!?" yields "!?".

The && operator works similarly but the other way around. When the value to its left is something that converts to false, it returns that value, and otherwise it returns the value on its right.

Another important property of these two operators is that the part to their right is evaluated only when necessary. In the case of true || X, no matter what X is—even if it’s a piece of program that does something terrible—the result will be true, and X is never evaluated. The same goes for false && X, which is false and will ignore X. This is called short-circuit evaluation.

Conclusion ⌛
I hope you found these tips helpful. If you need any help please let me know in the comment section.

👋 Thanks for reading, See you next time

Eloquent JavaScript (Part I : Chapter 2/Program Structure)

Pranish Shrestha — Sun, 26 Dec 2021 12:22:03 +0000

As JavaScript can work in most of the fields like web development, mobile apps, desktop apps etc. It is a vital programming language to day to learn.
This blog is inspired by a book Eloquent JavaScript

What you will learn in this post

Expressions and statements
Bindings
Binding Names
the environment
Functions
console.log function
return value
control flow
conditional execution (if, else, if else)
loops(while, do-while, for)
Indenting Code
Breaking out of a loop
Updating Bindings Succinctly
Dispatching on available with switch
Capitalization
Comments

Expressions and Statements

A fragment of code that produces a value is called an expression.Expression is a piece of code that resolves to a value. Example: const number = 5; 5 is an expression and the whole const number = 5 is an statement. Programs build statements which themselves sometimes is made out of statements and sometimes expressions contains by some other small expressions.

Bindings

We know that new values can be made by old values and if new values aren't used immediately then it can disappear again. To catch and hold values , JavaScript Provides a thing called Binding or a variable.

Example:

let today = 'day';
 console.log (today);
//day

today ='night';
console.log(today);
//night

Binding doesn't contain the values , they grasp them with var, let, const.

Binding Names
Rules for writing names :

can include numbers but cannot start with number eg: hello123 is good but 123hello is not accepted.
may include $ and underScore(_) but except no other are taken. No Spaces are used. -binding names or variable names cannot be used of the keywords eg : break case catch class const continue debugger default delete do else enum export extends false finally for function if implements import interface in instanceof let new package private protected public return static super switch this throw true try typeof var void while with yield

Don’t worry about memorizing this list. When creating a binding produces an unexpected syntax error, see whether you’re trying to define a reserved word.

The Environment

The collection of bindings and their values that exist at a given time is called the environment.When a program starts up, this environment is not empty. It always contains bindings that are part of the language standard, and most of the time, it also has bindings that provide ways to interact with the surrounding system. For example, in a browser, there are functions to interact with the currently loaded website and to read mouse and keyboard input.

functions
functions are a piece of a program wrapped in a value. Values are given to a function called arguments.
example:

function sum() {
...
}

console.log function
In the javascript we use console.log function to see what the output has come. It cannot be seen in the viewing area of the browser but can be see in the inspect of the browsers. f12 on windows and command-option-I on mac.

Return Value
When a function produces a value, it is said to return a value.
example:

 console.log(Math.max(2,4))
//4

Control Flow
In more than one statement, the statements are executed as if there are a story from top to bottom.
example:

let num = number(prompt("Pick a number"))
console.log("your number is " + num)

Conditional execution
if there comes a choice then this execution can be used:
if condition
example:

if(1+1=2) console.log("Its true")
//Its true

if 1+2 isnt 2 then the console wouldnt have worked.
for multiple choices example:

let num = Number(prompt("Pick a number"));

if (num < 10) {
  console.log("Small");
} else if (num < 100) {
  console.log("Medium");
} else {
  console.log("Large");
}

Loops
to do a repeated work
While loop
we need is a way to run a piece of code multiple times. This form of control flow is called a loop.
example:

let number = 0;
while (number <= 12) {
  console.log(number);
  number = number + 2;
}
// → 0
// → 2
//   … etcetera

do while
In this loop atleast the loop will run atleast once.
example:

let yourName;
do {
  yourName = prompt("Who are you?");
} while (!yourName);
console.log(yourName);

for loop
example:

for( var i=0;i<5;i++){
...
}

Indenting Code
Many coders uses tabs to indent their code to look nice and easier to read.

Breaking out of a loop
To prevent from the loop that will run continuously so the break statement is used.
example:

for(let number=15; number=number+1){
  if (number%7==0){
console.log(number);
break;
}
}
//21

Imagine if the break statement wasn't here then the loop would've run infinite times so to prevent it, the break statement is used and if there want to continue for the other loops then the continue statement is used. continue;

Updating bindings Succinctly
(succinctly means brief or to the point)
Instead of number =number +1, we can also write number+=1 or number++ or number--.

Dispatching on a value with switch
Instead of if condition to go into a decision. switch is more preferred.
example:

switch (prompt("What is the weather like?")) {
  case "rainy":
    console.log("Remember to bring an umbrella.");
    break;
  case "sunny":
    console.log("Dress lightly.");
  case "cloudy":
    console.log("Go outside.");
    break;
  default:
    console.log("Unknown weather type!");
    break;
}

Capitalization
There are 5 types to write a variable name in JS:

hellopeopleoftheworld
hello_people_of_the_world
HelloPeopleOfTheWorld
helloPeopleOfTheWorld
HELLO_PEOPLE_OF_THE_WORLD

1st one is hard to read. 2nd one is difficult to write the underscore. The effective way to write in a JavaScript is the 4th one: capitalizing every initials of the word except the first word;it is also called camelCase. the fifth one is basically used to define constants.

Comments
// is used for single line comment and /**/ is used for multiple line comment.
Example:

// this is a good code
/*this code contains
alot of defining terms
to understand
*

Conclusion ⌛
I hope you found these tips helpful. If you need any help please let me know in the comment section.

👋 Thanks for reading, See you next time