DEV Community: Mahamud Pino

LeetCode Problem Solving

Mahamud Pino — Thu, 28 Jul 2022 22:44:06 +0000

2. Two Sum

**
var twoSum = function (nums, target) {
for (let i = 0; i < nums.length; i++) {
let remaining = target - nums[i]
for (let j = i + 1; j < nums.length; j++) {
if (remaining === nums[j]) return [i, j]
}
}
return false
};
console.log(twoSum([3, 2, 4], 6)) //[1,2]

11. Container With Most Water

**
var maxArea = function (height) {
let total = 0
let start = 0
let end = height.length - 1
while (start < end) {
let heights = Math.min(height[start], height[end])
let width = end - start
let current = heights * width
total = Math.max(total, current)
if (height[start] <= height[end]) {
start++
}
else {
end--
}
}
return total
};
console.log(maxArea([1, 8, 6, 2, 5, 4, 8, 3, 7])) //49

E-commerce mobile app Figma UI Design

Mahamud Pino — Thu, 28 Jul 2022 16:20:08 +0000

**Hi everyone,
A simple UI design for react native mobile app.
😊😊😊😊😊

How to Build an eCommerce Website Using NextJs, NodeJs, Redux, MongoDB, JavaScript, Firebase Authentication.

Mahamud Pino — Thu, 28 Jul 2022 01:11:00 +0000

Hi everyone,
Now I am very excited to share an eCommerce website. I already done a lot of projects using react but now I am trying to do something new using NextJS.
😊😊😊😊😊
I also used redux in this project and also Node.js, MongoDB, Express-js, Firebase Authentication, Heroku.

Link:[(https://redux-ecommerce-final.vercel.app/]

GitHub:[https://github.com/mahamud751]

React Native App

Mahamud Pino — Mon, 25 Jul 2022 20:11:00 +0000

Hi everyone,
I am very excited to share a my first react native app.
😊😊😊😊😊😊😊😊

Expo Link: exp://exp.host/@pino751/native_redux?release-channel=default

Technology Used: React native, Node.js, MongoDB, Express.jsFirebase Authentication, Heroku.

Overview:

• E-Commerce android app.
• The user can sell all products.
• The user can buy products and also cancel orders.
• Admin can add products and categories.
• Admin can also delete any products and categories also edit products and categories.

ES6 Magic

Mahamud Pino — Mon, 25 Jul 2022 19:55:39 +0000

let num = [12, 11, -22, 111, 2, 1, -02]

find just numbers
const num2 = num.filter((x) => typeof (x) === 'number')
console.log(num2)//12, 11, -22, 111, 2, 1, 2

reduce (sum)
const sum = num2.reduce((a, b) => a + b)
console.log(sum = ${sum}) //113

every
const everyNum = num.every((a) => a > 2)
console.log(everyNum) //false ...all need true

some

const someNum = num.some((a) => a > 2)
console.log(someNum) //true...if any element true

lowestNum
const lowestNum = Math.min(...num2)
console.log(lowestNum) //-22

highestNum
const highest = Math.max(...num2)
console.log(highest) //111

evenNum
const evenNum = num2.filter((x) => x % 2 === 0)
console.log('even ' + evenNum) //12,-22,2,-2

oddNum
const oddNum = num2.filter((x) => x % 2 !== 0)
console.log('odd ' + oddNum) //11,111,1

compare
const compare = highest - lowestNum
console.log(compare) //133

sort

let numSort = [12, 11, -22, 111, 2, 1, -02]
const sort = numSort.sort((a, b) => a - b)
console.log(sort) // -22, -2, 1, 2, 11, 12, 'ss', 111

*sort *

let country = ['Bangladesh', 'India', 'Usa', 'Pakistan', 'Australia', 'Japan']
const sortCountry = country.sort()
console.log(sortCountry) //[ 'Australia', 'Bangladesh', 'India', 'Japan', 'Pakistan', 'Usa' ]

Data Structure and Algorithms JavaScript

Mahamud Pino — Mon, 25 Jul 2022 18:16:00 +0000

Linear Search:

function search(arr, value) {
for (let i = 0; i < arr.length; i++) {
if (arr[i] === value) return i
}
return -1
}

console.log(search([2, 11, 23, 44, 9], 23))
Answer: 2

         😊😊😊😊😊😊😊😊

Binary Search:

function binary(arr, value) {
let start = 0
let end = arr.length - 1
while (start <= end) {
let middle = Math.round((start + end) / 2)
if (arr[middle] === value) return middle
if (value > arr[middle]) {
start = middle + 1
}
else if (value < arr[middle]) {
end = middle - 1
}
}
return -1
}

console.log(binary([2, 3, 5, 8, 11, 44, 76, 88], 44))
Answer: 5

                  😊😊😊😊😊😊😊😊

Bubble Sort: O(n2)

                 😊😊😊😊😊😊😊😊

SelectionSort:

             😊😊😊😊😊😊😊😊

Insertion Sort:

Database

Mahamud Pino — Fri, 24 Dec 2021 12:28:12 +0000

*JWT *

JWT access token means a compact and self-contained way for securely transmitting information between parties as a JSON object. JWT normally uses a secret key to secure from others.
We use this for authorization and information exchange. Most common for using this JWT for authorization. When a user logged in, each subsequent request will include the JWT and allow the user to access routes, services and resources that are permitted with that token.
Other information exchange means when JSON web tokens are a good way of securely transmitting information between parties.
JSON web tokens consist of three parts separated by dots( . ),which are mainly: Header, Payload and Signature.

*CRUD Operations *

When we worked with a database we must know about CRUD Operations. We need to know four basic functions of persistent storage. They are: create, read, update and delete. It is the foundation of most dynamic websites. We need to differentiate CRUD from the HTTP action verbs.
When you want to create a new record on your database you should use the ‘POST’ method. If you need something to update your database you need to use the ‘PUT or PATCH’ method and sometimes you need to delete something from your database you need to use the method ‘DELETE’. Using these CRUD Operations users can edit, update, delete or browse the record database.
CRUD operations are very useful for a programmer. A programmer handles this very easily. CRUD operations performance is very useful for us. The SQL server will create a new execution plan for the query. You can remove, add something using these CRUD operations.

*What is Nodejs? Difference between Nodejs and javaScript *

Nodejs is a popular tool for any project with an open-source, cross-platform JavaScript runtime environment. Nodejs library runs web applications outside the client’s browser. Nodejs used to create server-side web applications.
Difference between Nodejs and javaScript are :
Nodejs : Nodejs is a Javascript runtime environment. Mostly used on the server-side. Written in C,C++ and Javascript. Express js is a nodeJs module.
JavaScript : A programming language that is used for writing scripts on the website. Used on the client-side. Written in C++. Frameworks are RamdaJs, TypeJs.

*Relational database (MySql) *

MySql Relational Database is a collection of data items with pre-defined relationships between them. It is an assemblage of relational data that is structured or organized in the form of tables, columns and rows and tables represent the objects, columns represent the fields and rows represent the records. SQL is a programming language which is used to create, update, delete and manage the tables and its contents, as MYSQL is supported with the basic SQL queries.

JavaScript React

Mahamud Pino — Thu, 23 Dec 2021 12:46:08 +0000

*Context API *

The Context API is a React structure that enables you to exchange unique details and assists in solving prop-drilling from all levels of your application and prop-drilling is a process where we pass a props with another component with the help of all the components that come between them. Actually we use context api pass some unique data from one component to another so this is very important in React.

*JSX *

JSX is a syntax extension which describes React object tree. It is just like an XML-like extension to ECMAScript.
A JSX compiler will translate any JSX into regular javaScript before the file gets to the web browser. A React element which is produced by JSX and it is simply an object and its representation of a DOM node.

*Virtual DOM and diffing- algorithm *

Virtual dom is representing a UI which is a copy of the original DOM kept in the memory and synced with the real DOM by libraries such as ReactDOM. This process is called Reconciliation.
Virtual Dom: Best for mobile-first application. Representation of a dom object.
Real Dom : Representation of a web page. Represent the document as nodes and objects.
Diff algorithm : A programming tool and using this tool we can differentiate between two or more files. To find a heuristic to change anything from a state to another is the main work of a diff algorithm.

*Props and states *

Props : Props are read-only and immutable. Pass data from one component to other components as an argument. Can be accessed by the child component.
State : State changes can be asynchronous and mutable. State holds information about the components. Can’t be accessed by child components.

*React component lifecycle *

React component lifecycle can be describe into four parts:
Initialization,
Mounting,
Updating,
Unmounting.

*UseState *

A function is a built-in hook that can be imported from the react package. It allows us to track state in a function component.
It is a special function that passes a function as an argument if the initial state has to be computed and the value returned by the function will be used as the initial state.

*Differentiate between stateful and stateless components *

Differentiate between stateful and stateless components are:
Stateful components: Manages the state in class-based with state or functional with useState. Have authority to change state. Data keeps changing.
Stateless components: No initial state management in it. Do not have authority to change state. Data remains the same.

JavaScript

Mahamud Pino — Wed, 22 Dec 2021 12:40:10 +0000

Double equal (==) vs triple equal (===):

Double equal (==) just compare values and triple equal (===) compare values and types.

Example:

Here this code number and StringNumber look similar. Here values are the same but type is not the same for this reason, when just checking values it returns true but when checking values and types it returns false.

What is an API, the purpose of API, GET, POST:

API means data connection from one software product to another one. Sometimes in our projects we use api. We collect data from the internet and sometimes we also send some data to reuse in future.
Get is used to request data from a specified resource.
Post is used to send data to a server to create or update a resource.

Scope, block scope, window, global variable, global scope:

Scope determines the visibility or accessibility of a variable or other resource in the area of your code.
Block scope: A variable when declared inside the if or switch conditions or inside for or while loops, are accessible within that particular condition or loop.
Global scope: The variable can be accessed from any part of the code.

Closure:

The combination of a function bundled together (enclosed) with references to its lexical environment surrounding state.
Closures are created every time a function is created, at function creation time. To use a closure, define a function inside another function and expose it. The inner function will have access to the variables in the outer function scope, even after the outer function has returned

Prototype chain:

In JavaScript every object has a private property which holds a link to another object called its prototype. That prototype object has a prototype of its own, and so on until an object is reached with null as its prototype. By definition, null has no prototype, and acts as the final link in this prototype chain.

Bind, call and apply:

Bind, call and apply are three important functions in javaScript.
Bind creates a function.
Call and apply call a function.
Call method pass arguments individually and apply method as an argument array.

Event bubble, Event delegate and purpose of Event bubble:

A method where JavaScript allows DOM elements to be nested inside each other. In such a case, if the handler of the child is clicked, the handler of the parent will also work as if it were clicked too.

JavaScript Topic

Mahamud Pino — Tue, 21 Dec 2021 14:35:30 +0000

JavaScript Shift :

In JavaScript this method removes the first element from an array and returns the removed element. Shift() method mostly used to sort an array.

Syntax of JavaScript Shift Function:

Example:

Here this code removes the first word ‘hasan’ from the array.

JavaScript Slice:

This function returns a slice object. This method returns a shallow copy of a portion of an array into a new array object selected from start to end.

Syntax of JavaScript Shift Function:

Example:

Here this code starts a slice from index 3 means (l) and ends index 10.

JavaScript Spread Operator:

This function allows an iterable to expand in places where 0+ arguments are expected. Mostly used in the variable array where there are more than 1 values are expected. In JavaScript we use it to copy the full array and add it with a new array.

Example:

In this code ‘tom’ will be added with a full ‘data’ array.

JavaScript Reduce:

The method executes a reducer function for array elements. The reduce() method returns a single value. Normally we can tell this function will add total value in a single value.

Example:

This code returns answer 6.

JavaScript template string:

This function is a powerful feature of ES6. It is mainly called Literals. It added two parts into a string. It is mainly used to connect multiple lines into a single line. Before the release of ES6 it was difficult to use but now we can do that very easily.

Example:

CSS TOPICS

Mahamud Pino — Mon, 20 Dec 2021 12:24:42 +0000

                CSS  TOPICS

*Animation CSS: *

An open source online pre-made animation file. In our project sometimes we use some animation which makes our project more beautiful. Animation files are too small and we can use them very easily. There are many animation libraries we can find online. There are many online sites but [https://animate.style] is one of the most common online sites for animation.

*Tailwind CSS: *

Tailwind CSS is one of the most popular frameworks. Using this library we can easily handle our project. Bootstraps is also a popular CSS library framework and we have been using this library for several years but in 2017 Tailwind CSS first time release and in this short time we can see that there are many advance code already done for us and I hope this CSS library will be more popular in future. Using this framework we can easily design our project.

*Media Queries: *

Media queries are also very important to customize our design layout. Very easy to use and we can handle this very easily. Actually media queries are needed when we use the smallest resolution display monitor just like phones and tabs. Using media queries we can handle the whole project.

*CSS 3D Transforms: *

This is also a powerful feature in CSS. Sometimes we use this in our project. Using this we can easily shifted, slanted, and rotate our small project design. Also we can design 3D transforms and add a new dimension to traditional websites.

*Box Model: *

We use it to design our website layout page. There are four parts. When we use this in our browser we can easily control our layout design to fixed content, padding, border and margin. This is very essential to customize our design.

*Scroll Snapping: *

This is also one of the advanced CSS techniques. Using this developer control scroll experiences. Normally we use this to page or photo scroll. This scroll-snap-type decides scrolling x or y.
Gradients:

*Gradients: *

We use it to create smooth transitions between color without having to resort to images. This is a little tool to make our design page more colorful. We can find many gradient color codes online. It is determined by an angle or direction. It is defined by the center of the box containing the gradient image and by an angle. The colors of the gradient are determined by two or more points. One is the starting and the other is the ending point.

*Z-Index: *

A CSS property that defines the order of overlapping Html elements. Elements with a higher index will be placed on top of elements with a lower index.

DEV Community: Mahamud Pino

LeetCode Problem Solving

2. Two Sum

11. Container With Most Water

E-commerce mobile app Figma UI Design

How to Build an eCommerce Website Using NextJs, NodeJs, Redux, MongoDB, JavaScript, Firebase Authentication.

GitHub:[https://github.com/mahamud751]

React Native App

ES6 Magic

let num = [12, 11, -22, 111, 2, 1, -02]

Data Structure and Algorithms JavaScript

Linear Search:

Binary Search:

Bubble Sort: O(n2)

SelectionSort:

Insertion Sort:

Database

JavaScript React

JavaScript

JavaScript Topic

*JavaScript Shift : *

*JavaScript Slice: *

*JavaScript Spread Operator: *

JavaScript Reduce:

JavaScript template string:

CSS TOPICS

JavaScript Shift :

JavaScript Slice:

JavaScript Spread Operator: