DEV Community: Shuvo

How To Use Mdi Font With Next.js

Shuvo — Sun, 10 Jul 2022 08:32:32 +0000

1.Install mdi font into your project from their official web site or simply run this command in terminal

using npm

npm install @mdi/font

using yarn

yarn add @mdi/font

2.Import the css file from node_modules in your main.css or global.css file

@import url("@mdi/font/css/materialdesignicons.css");

In your component or pages use like this

<span className="mdi mdi-cube"></span>

There your just need to change the class name to use different icon.

That's it.You have done with setup for using mdi icon.

Thanks For Reading.

Common Array Opreations

Shuvo — Tue, 14 Jun 2022 17:02:06 +0000

Create An Array This example shows three ways to create new array: first using array literal notation, then using the Array() constructor, and finally using String.prototype.split() to build the array from a string.

// 'fruits' array created using array literal notation.
const fruits = ['Apple', 'Banana'];
console.log(fruits.length);
// 2

// 'fruits' array created using the Array() constructor.
const fruits = new Array('Apple', 'Banana');
console.log(fruits.length);
// 2

// 'fruits' array created using String.prototype.split().
const fruits = 'Apple, Banana'.split(', ');
console.log(fruits.length);
// 2

2.Create a string from an array
Use the join() method to create a string from array.

const fruits = ['Apple', 'Banana'];
const fruitsString = fruits.join(', ');
console.log(typeof fruitsString,fruitsString);
//string
// "Apple, Banana"

Access an array item by its index

Access items in array by specifying the index number of their position in the array.


const fruits = ['Apple', 'Banana'];

// The index of an array's first element is always 0.
fruits[0]; // Apple

// The index of an array's second element is always 1.
fruits[1]; // Banana

// The index of an array's last element is always one
// less than the length of the array.
fruits[fruits.length - 1]; // Banana

// Using a index number larger than the array's length
// returns 'undefined'.
fruits[99]; // undefined

** Find the index of an item in an array ** The indexOf() method to find the position (index) of the string "Banana" in the fruits array.If no item of that index, it returns -1

const fruits = ['Apple', 'Banana'];
console.log(fruits.indexOf('Banana'));

Check if an array contains a certain item The fruits array contains "Banana" and "Cherry": first with the includes() method, and then with the indexOf() method to test for an index value that's not -1.

const fruits = ['Apple', 'Banana'];

fruits.includes('Banana'); // true
fruits.includes('Cherry'); // false

// If indexOf() doesn't return -1, the array contains the given item.
fruits.indexOf('Banana') !== -1; // true
fruits.indexOf('Cherry') !== -1; // false

6.Append an item to an array

The push() method to append a new string to the fruits array.

const fruits = ['Apple', 'Banana'];
const newLength = fruits.push('Orange');
console.log(fruits);
// ["Apple", "Banana", "Orange"]
console.log(newLength);
// 3

7.Remove multiple items from the end of an array

Using The splice() method to remove the last 3 items from the fruits array.

const fruits = ['Apple', 'Banana', 'Strawberry', 'Mango', 'Cherry'];
const start = -3;
const removedItems = fruits.splice(start);
console.log(fruits);
// ["Apple", "Banana"]
console.log(removedItems);
// ["Strawberry", "Mango", "Cherry"]

Truncate an array down to just its first N items

This example uses the splice() method to truncate the fruits array down to just its first 2 items.

const fruits = ['Apple', 'Banana', 'Strawberry', 'Mango', 'Cherry'];
const start = 2;
const removedItems = fruits.splice(start);
console.log(fruits);
// ["Apple", "Banana"]
console.log(removedItems);
// ["Strawberry", "Mango", "Cherry"]

9.Remove the first item from an array

The shift() method to remove the first item from the fruits array. It returns the removed item and modifies the original array.


const fruits = ['Apple', 'Banana'];
const removedItem = fruits.shift();
console.log(fruits);
// ["Banana"]
console.log(removedItem);
// Apple

10.Remove multiple items from the beginning of an array

splice() method to remove the first 3 items from the fruits array.

const fruits = ['Apple', 'Strawberry', 'Cherry', 'Banana', 'Mango'];
const start = 0;
const deleteCount = 3;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["Banana", "Mango"]
console.log(removedItems);
// ["Apple", "Strawberry", "Cherry"]

11.Add a new first item to an array

unshift() method to add, at index 0, a new item to the fruits array — making it the new first item in the array.This method return the array new length and modifies the array.


const fruits = ['Banana', 'Mango'];
const newLength = fruits.unshift('Strawberry');
console.log(fruits);
// ["Strawberry", "Banana", "Mango"]
console.log(newLength);
// 3

Remove a single item by index

The splice() method to remove the string "Banana" from the fruits array — by specifying the index position of "Banana".

const fruits = ['Strawberry', 'Banana', 'Mango'];
const start = fruits.indexOf('Banana');
const deleteCount = 1;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["Strawberry", "Mango"]
console.log(removedItems);
// ["Banana"]

13.**Remove multiple items by index**

The **splice()** method to remove the strings "Banana" and "Strawberry" from the fruits array — by specifying the index position of "Banana", along with a count of the number of total items to remove.

js
const fruits = ['Apple', 'Banana', 'Strawberry', 'Mango'];
const start = 1;
const deleteCount = 2;
const removedItems = fruits.splice(start, deleteCount);
console.log(fruits);
// ["Apple", "Mango"]
console.log(removedItems);
// ["Banana", "Strawberry"]

Replace multiple items in an array

This example uses the splice() method to replace the last 2 items in the fruits array with new items.

const fruits = ['Apple', 'Banana', 'Strawberry'];
const start = -2;
const deleteCount = 2;
const removedItems = fruits.splice(start, deleteCount, 'Mango', 'Cherry');
console.log(fruits);
// ["Apple", "Mango", "Cherry"]
console.log(removedItems);
// ["Banana", "Strawberry"]

Iterate over an array

for...of loop to iterate over the fruits array, logging each item to the console.

const fruits = ['Apple', 'Mango', 'Cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}
// Apple
// Mango
// Cherry

15.Copy an array

first by using spread syntax, then by using the from() method, and then by using the slice() method.

const fruits = ['Strawberry', 'Mango'];

// Create a copy using spread syntax.
const fruitsCopy = [...fruits];
// ["Strawberry", "Mango"]

// Create a copy using the from() method.
const fruitsCopy = Array.from(fruits);
// ["Strawberry", "Mango"]

// Create a copy using the slice() method.
const fruitsCopy = fruits.slice();
// ["Strawberry", "Mango"]

Understanding Javascript Normal Function VS Arrow Function

Shuvo — Sat, 28 May 2022 10:51:17 +0000

Sometimes in our code we use javascript regular functions and also a function called arrow function.Both are functions but there are certain difference between them.

1.First we see the syntactical difference between them.

//normal function
function normalFunc() {
  console.log('hi');
}

normalFunc(); //hi

//arrow function

let arrFunc = () => {
  console.log('i am arrow function');
};

arrFunc(); //i am arrow function

2.Accessing the 'this' key word.
Arrow function doesn't have it's own this key world.It works something like lexical scoping.

But normal function always have its own this key word and it is the global this or window or the parent object where it has been declared.


let person = {
  name: 'Jhone',
  gfg1: () => {
    console.log('hello ' + this.name); // hello undefined
  },
  gfg2() {
    console.log('hi ' + this.name); // hi Jhone
  },
};
person.gfg1();
person.gfg2();

3.In arrow function we can not access the arguments object but in normal function we can.

//normal function
function food(a, b, c) {
  console.log(arguments);
}

food('rice', 'milk', 'fish'); // {0: "rice", 1: "milk", 2: "fish"}


//arrow function
let fruits = (a, b, c) => {
  console.log(...arguments); //ReferenceError: arguments is not defined
};

fruits('apple', 'banana', 'berry');

4.Using normal function to return something you have to use return statement but in arrow function you can use implicit return.

//normal function
function nFunc() {
  return 'i am normal function';
}
console.log(nFunc());

//arrow function
let arrFunc = () => 'i am arrow function';
console.log(arrFunc());

5.Normal javascript functios are constructible but arrow funtions are not. You can not create constructor function usig arrow functon but with notmal functions you can.

  function nFunc(name, email) {
  this.name = name;
  this.email = email;

}

let preson = new nFunc('jony', 'jony@gmail.com');

console.log("name: ",preson.name,' ',"email: ",preson.email); // name: jony email: jony@gmail.com

How To Loop Over An Object In Javascript

Shuvo — Sat, 21 May 2022 08:44:02 +0000

1. Use Object.keys to get an array of keys of the object and loop over it.

let myObj = {
  name: 'Shuvo',
  tech: 'javascript',
  hobby: 'learning javascript',
  favFood: 'beef steak!',
};

// way: 1
 Object.keys(myObj).map((key) => {
   console.log(`key: ${key} value: ${myObj[key]}`);
 });


// output

// key: name value: Shuvo

// key: tech value: javascript

// key: hobby value: learning javascript

// key: favFood value: beef steak!

2. Use For...in Loop to over the object.

// way: 2
for (key in myObj) {
  console.log(`key: ${key} value: ${myObj[key]}`);
}

// output

// key: name value: Shuvo

// key: tech value: javascript

// key: hobby value: learning javascript

// key: favFood value: beef steak!

3. Use Object.values() method. In this time you will get all the value of the remaining keys.

// way: 3 

Object.values(myObj).forEach((value) => {
  console.log('value: ', value);
});

// output
// value: Shuvo

// value: javascript

// value: learning javascript

// value: beef steak!

4. Use Object.entries() method. It will return array of key and value



// way: 4 

Object.entries(myObj).forEach((arr) => {
  console.log('arr: ', arr);
});

// output
// arr: ["name", "Shuvo"]

// arr: ["tech", "javascript"]

// arr: ["hobby", "learning javascript"]

// arr: ["favFood", "beef steak!"]

And that's it.Play with it more 🚀

Vue.js Transition See Up

Shuvo — Wed, 18 May 2022 20:25:05 +0000

In this article i will share my concept How To Make Drawer with Animation From Left to Right using vuejs transition Component

1. Create Drawer Component named Drawer.vue in components folder and then paste the code bellow.

<template>
  <transition name="slide">
    <div class="drawer" v-if="open">
      <ul>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer">Home</a>
        </li>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer">About</a>
        </li>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer"
            >Portfolio</a
          >
        </li>
        <li>
          <a href="http://#" target="_blank" rel="noopener noreferrer"
            >Contact</a
          >
        </li>
      </ul>
    </div>
  </transition>
</template>

<script>
export default {
  name: "drawer",
  props: ["open"],
  created() {
    console.log("props: ", this.open);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.drawer {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(228, 70, 70, 0.7);
  z-index: 2;
  overflow-y: hidden;
  padding: 1em;
}

.drawer ul li {
  margin: 0;
  list-style: none;
  text-align: center;
  margin: 1em;
}

.drawer ul li a {
  text-decoration: none;
  color: white;
}

.slide-enter-active {
  transition: all 0.7s ease;
  transform: translateX(-90%);
  opacity: 1;
}

.slide-enter-to {
  transition: all 0.7s ease;
  transform: translateX(0%);
}

.slide-leave-active {
  transition: all 0.7s ease;
  transform: translateX(-30%);
  opacity: 0;
}
</style>

2. In App.vue component import the Drawer.vue component and use it.Also create a button that will toggle the drawer component.See the codes beloew in App.vue

<template>
  <div class="main">
    <Drawer :open="open" />

    <button @click="open = !open">Toggle Drawer</button>
  </div>
</template>

<script>
import Drawer from "./components/Drawer";
export default {
  name: "App",
  data: function () {
    return {
      open: true,
    };
  },
  components: {
    Drawer,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

button {
  background: crimson;
  color: white;
  padding: 1em;
  border: none;
  outline: none;
  cursor: pointer;
}
</style>

And that's it. You have made an awsome Drawer component with vuejs and vuejs built in transition component 🚀

You will find the whole project below 👇

See in code sandbox

Thank You 😊

How To Bind CSS Class with Vue template

Shuvo — Mon, 09 May 2022 13:22:35 +0000

Some time we may need to bind css class conditional in vuejs app.Here you can follow this example to bind css class with vue template.

1. There is button.when we click on it the color of the text will be changed by adding a class

<template>
  <div class="main">
    <p class="p-me color-me">Awsome vue</p>

    <button @click="colorMe = true">Add Class</button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      colorMe: false,
    };
  },
};
</script>

<style scoped>
.change-me {
  font-size: 2rem;
}

.color-me {
  color: goldenrod;
}
</style>

2. add event listener on the button that will change the value of 'colorMe'

<button @click="colorMe = true">Add Class</button>

3. Define a data property in vue instance named 'colorMe'

export default {
  name: "App",
  data() {
    return {
      colorMe: false,
    };
  },
};

4. Make css class which will be applied after button click

<style scoped>
.change-me {
  font-size: 2rem;
}

.color-me {
  color: goldenrod;
}
</style>

5. Here the awesome part comes.Bind the class like :class and apply with js es6 template literal expression.

 <p :class="`p-me ${colorMe && 'color-me'}`">Awsome vue</p>

👉 You can also toggle class by setting the reverse value of colorMe as value of colorMe.Like below

  <button @click="colorMe = !colorMe">Add Class</button>

And thats it.You have done awsome class binding feature of vuejs 😃

See the complete code here Here 🚀