1. Be stuck in tutorial hell

This was the worst mistake, when I started I just wanted to watch courses and read articles without actually using the knowledge I was grasping.
This went on for about a year but when I realized that making projects was as important as watching lectures, I started making projects until then I had already forgotten most of the concepts, so I had to re-watch the videos every time I needed to refresh some concept.

Start practicing as soon as you learn something new.

2. Imposter syndrome

When I finally started using the knowledge I gained, making projects, I was getting lots of errors and bugs -at that time I did not know it was normal, so I used to get discouraged. I started to think that coding was not for me, and I do not have enough knowledge to complete the project I started.

Never think that you cannot do it.

3. Be a lone wolf

Whenever I was stuck and needed help I did not ask for it, I felt stupid that I was asking such a dumb question. I wanted to learn everything on my own, which is not possible. So please do not hesitate when asking for help, no matter how dumb a question you have, there are a lot of great people out there ready to help.

Be a team player.

4. Not applying for a job sooner

I did not apply for a job even after learning to code and making lots of projects, I always thought I was not a good fit for the market and that there is a lot of competition out there, and I wouldn't get a chance. But later I realized that one can land a job right after learning HTML and CSS.

5. Not building an online presence

Until a few months back no one knew that I was a software developer. I started using Twitter recently and I am so glad that I did. You can get lots of opportunities using online platforms like Twitter, Instagram, Dev.to and Hashnode, etc.

Build an online presence.

Thanks a lot for reading. 💖

Please follow me on Twitter

It's been a long time since I published my last article. I got busy in learning deployment, AWS, Docker, Kubernetes, etcetera, which I will share here as well, so be tuned! 👀

Today's article is gonna be about 'events', more specifically 'event bubbling'.

Let's get started 🚀

Before starting the article I want you to familiarize with the word 'event' in JS. Those who are already familiar can skip the introduction section.

Introduction

What is an event 🤔?

One of the most important questions that an interviewer asks around JS and DOM, is about 'events'. When you start learning JS and playing with DOM (Document Object Model), you may hear/read the word 'event', so what is it?
In simple language when a user interact with the webpage in any way like click of a mouse button (left or right), pressing a keyboard button, form submission etc. These interactions are called 'events'.

Why 'events' are important 💭?

If you want to become a better front-end developer or a web developer in general, you really need to understand behind the scenes of what happens when user interacts with the web page.
Almost all the questions in the interview about DOM revolves around 'events'.
Now, when a user do something on the webpage that causes an event to happen you can capture that event and do some specific task accordingly.

What is 'Event Bubbling' 🙄?

With 'event' you will hear/read some more terms like 'Event Capturing', 'Event Propagation', and 'Event Bubbling'. Well, as you already know this article is gonna be about 'event bubbling', which is, without a doubt, is the most important.
Consider the following code snippet. 👇

<div>
  <ul>
    <li></li>
  </ul>
</div>

In the above example if you click on an li element, it will occur as if the click happened on its parent ul and all the other parents above it.
This is because the event bubbles up from the element it happened to all of its parents. It is called event bubbling.
Confusing 😵 right?
To visualize this I am creating a simple web page and attaching event listeners to div, ul and li.

<div class="list__container">
  <ul class="list">
    <li class="list__item">List item 1</li>
    <li class="list__item">List item 2</li>                     
    <li class="list__item">List item 3</li>
  </ul>
</div>

This is how it would look in in the inspector 👇

Now the magic of JS begins 💥

const listContainer = document.querySelector('.list__container');
const list = document.querySelector('.list');
const listItems = document.querySelectorAll('.list__item');

// on click changing the item's background color to be red.
listItems.forEach((listItem) => {
  listItem.addEventListener('click', function (event) {
    // `this` referes to the `li` element which was clicked.
    this.style.backgroundColor = 'red';
   });
});

The result 👇

Everything is working as expected right 👀? ... Now let's add event listeners to div and ul. 👇

// click event to `div`
listContainer.addEventListener('click', function (event) {
    this.style.backgroundColor = 'yellow';
});

// click event on `ul`
list.addEventListener('click', function (event) {
    this.style.backgroundColor = 'green';
});

The result 👇

🤯 I know you might be thinking, 'Woah, wait Shahid, you never clicked on ul or div why the hell their background color changed 🤔?'
The answer is: 'Event Bubbling'.
When you click an element the event is bubbled up to all of its parent and it seems that the click is happened on each of its parent.
We can make some cool shit using the power of event bubbling, but that is out of the scope of this article.
If you want me to write more (and show more example) on event bubbling, please leave a comment below ⬇️.
Thanks a lot for reading this article. 💓
Follow me twitter to show some love ❣️

Ever wondered how some websites have "click to copy" functionality?

• You can also do just that, whether you're building an e-commerce website where you want user to click on share button to write the url of the product on their website.
• or you are building some website/documentation where people can click somewhere and copy the code snippet.

In this article I will explain how you can mess around with the user's clipboard 😄.

Let's get started 🚀

To explain this better, I will create a demo project. You can follow along if you want to.

• Make a folder and name it whatever you like.
• In that folder make two files
  • 1. index.html
  • 1. app.js

Add the following HTML code in index.html.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Copy to Clipboard 📋</title>
    <style></style>
  </head>
  <body>
    <h2>Implementing copy to clipboard with a simple click 📋</h2>
    <button>Click to copy</button>
    <script src="./app.js"></script>
  </body>
</html>

• Now select h2 and button element in app.js:

  const h2 = document.querySelector('h2');
  const button = document.querySelector('button');
  

Preview the index.html in your browser.

Side note: This demo will not work in IE

It should look something like this 👇

Now to alter the user's clipboard we have to use Clipboard API.
The clipboard object is exposed by the navigator.clipboard property.

Add the following code in the app.js file:

const cb = navigator.clipboard;

• console.log(cb) will look something like this 👇

👉 Remember: Clipboard API is asnychronous, means every method will return a promise which will resolve or reject. To consume the promise we can either use async/await syntax or .then/.catch.

Reading text from clipboard 📋

• To read the text from clipboard I will add a click event listener to the button:
• In the event listener I will call a method called readText(), which is available on the cb object we accessed earlier:

  button.addEventListener('click', async () => {
  const text = await cb.readText();
  console.log(text);
    // output will be whatever you last copied, 
    // or empty string if the
    // copied data is not of type text.
  });
  

• To read the text from clipboard user must grant read permission, otherwise the operation will fail. 👇
  
• If permission is denied 👇

You check if the user granted the permission or not using the Permission API.

Writing text to clipboard 📋

• To write the text to user's clipboard we use writeText() method available on the cb object.
• Writing permission is given automatically by the browser.

Write the following the code in the app.js:

button.addEventListener('click', async () => {
  // const text = await cb.readText();
  // console.log(text);

  // writing the inner text of the h2 element
  // to the user's clipboard.  
    cb.writeText(h2.innerText).then(() => {
        console.log('text written to clipboard')
    })
});

That's it for this article guys.

See, how easy it is you mess with the user's clipboard 😂.

Thanks ❤️ for giving it a read, I hope you found it useful.

For concise tips and tricks, please follow me on Twitter

Happy Coding 💚

Today's article is about two interesting (also important) array methods:

1. .flat()
2. .flatMap()

Let's get started 🚀

1. .flat():

.flat() method recusively flattens the elements which are array into the original array and returns a new array.

Examples 👇

const array = [1,2,[3,4]];
const newArray = array.flat();
console.log(newArray);
// [1,2,3,4]

👉 .flat() receives an optional argument depth (1 by default).

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

👉 The .flat() method removes empty slots in arrays:

const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]

2. .flatMap():

.flatMap() is identical to a .map() followed by a .flat() of depth 1.

Examples 👇

let arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

👉 .flatMap() only flattens the array up to depth 1.

let arr1 = ["it's Sunny in", "", "California"];

arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]

arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"]

👉 As you know .map always works one-to-one, but flatMap can be used to modify the number of items during map.

A nice example I found on MDN 👇

// Let's say we want to remove all the negative numbers
// and split the odd numbers into an even number and a 1
let a = [5, 4, -3, 20, 17, -33, -4, 18]
//       |\  \  x   |  | \   x   x   |
//      [4,1, 4,   20, 16, 1,       18]

a.flatMap( (n) =>
  (n < 0) ?      [] :
  (n % 2 == 0) ? [n] :
                 [n-1, 1]
)

// [4, 1, 4, 20, 16, 1, 18]

That's it for this article, I hope you found it useful. 😊
Take a look on my article on array methods.
Please leave a like and follow me on twitter.

Thanks for reading. 💚

Happy coding.

There are a lot of array methods in JavaScript and often we get confused 😕 about which to use when.
In this article I will summarise these methods and do my best to clear about which method should we use according to our needs.

Let's get started 🚀

As I said we will study the array methods according to our needs, so just think what do you want...

I want...

1. to mutate the original array

a) add to original array

i) .push:
this method adds an element to the end of the original array and returns the new length of the array.

let numbers = [1,2,3];
number.push(4);
console.log(numbers) // [1,2,3,4]

ii) .unshift:
this method is like .push method, except it adds the element at the start of the original array.

let numbers = [2,3,4];
numbers.unshift(1);
console.log(numbers) // [1,2,3,4]

b) remove from the original array

i) .pop:
this method removes the last element of the array and returns the removed element.

let names = ['Sid', 'Marty', 'John'];
const removedName = names.pop();
console.log(names) // ['Sid', 'Marty']
console.log(removedName) // 'John'

ii) .shift:
.shift is just like .pop except it removes the element from the start.

iii) .splice:
this method is bit tricky, it can remove and/or add the element(s) to the original array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];

// At position 2, remove 1 element and add 2 elements:
fruits.splice(2, 1, "Lemon", "Kiwi");
console.log(fruits) // ["Banana", "Orange", "Lemon", "Kiwi", "Mongo"]

Other mutating array methods:
i) .reverse
this method reverses an array. The first element becomes the last, and the last array becomes the first.

const array = [1,2,3,4,5]
array.reverse();
console.log(array);
// [5,4,3,2,1]

ii) .sort
this method sorts the array in place and also returns the sorted array. This method converts all the element to string and sorts them in ascending order by default.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// [1, 100000, 21, 30, 4]

.sort receives an optional parameter a compare function, which can be used to override the default behaviour of .sort.
If compare function is supplied all array elements are sorted according to the return value of the compare function.
compare function receives two arguments say a and b. Where a is first element for comparison and b is second element for comparison.

• If compareFunction(a, b) returns a value > than 0, sort b before a.
• If compareFunction(a, b) returns a value < than 0, sort a before b.
• If compareFunction(a, b) returns 0, a and b are considered equal.

I know it sounds confusing 😅 , take a look at the example 👇.

let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => {
  return a - b;
})
console.log(numbers);
// [1,2,3,4,5]

iii) .fill
The .fill method changes all elements in an array to provided value, from a start index (which is 0 by default) to an end index (which is length of the array by default).

const array1 = [1, 2, 3, 4];
// fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// [1, 2, 0, 0]


// fill with 5 from position 1
console.log(array1.fill(5, 1));
// [1, 5, 5, 5]

console.log(array1.fill(6));
// [6, 6, 6, 6]

2. a new array

If you want a new array, please look at the following array methods:

i) .map:
As a react developer, .map is the most used array method for me. It loops over the array and perform a certain action on each element then returns the new array of the same length.

const numbers = [1,2,3,4];
const numberSqr = numbers.map((num) => num*num);
console.log(numberSqr) // [1,4,9,16]

• .map receives a callback function, which accepts the following arguments:
  i) The current element being processed in the array.
  ii) index of the current element being processed in the array.
  iii) array on which .map was called.

• value returned from the callback function will be mapped the corresponding element in the array.

ii) .filter:
This methods creates a new array with all the elements that passed the condition given in the callback function.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// ["exuberant", "destruction", "present"]

iii) .slice:
This method returns a copy of the portion of the array.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// ["camel", "duck"]

iv) .concat:
This method is used to merge two or more arrays. This method does not change the existing arrays, but instead returns a new array.

const letters = ['a', 'b', 'c'];
const numbers = [1, 2, 3];

letters.concat(numbers);
// result is ['a', 'b', 'c', 1, 2, 3]

3. an array index

i) .indexOf:
This method returns the first index at which a given element can be found in the array, or -1 if it is not present.

const fruits = ['Banana', 'Apple', 'Kiwi'];
console.log(fruits.indexOf('Apple')) // 1
console.log(fruits.indexOf('Orange')) // -1

ii) .findIndex:
This method returns the index of the first element that passed a given condition. Otherwise -1 indicating that no element passed the condition.

const numbers = [5,9,2,11,5];
const index = numbers.findIndex((element) => element > 8) // 2
const ind = numbers.findIndex((element) => element > 12) // -1

4. an array element

.find:
This method returns the first element which satisfies a provided condition. undefined otherwise.

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
// 12

5. to know if the array includes

i) .includes:
This methods returns true (if the array contains the element) or false.

const friends = ['Jon', 'Joe', 'Jack', 'Jill'];
console.log(friends.includes('Jon')) // true
console.log(friends.includes('Sid')) // false

ii) .some:
Name of this method sometimes confuse me 😣. This method returns true if at least one element passes the given condition.

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

iii) .every:
This method returns true if all the elements in the array pass the given condition, false otherwise.

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

6. a new string

.join:
This methods joins all the element of the array by a given string separator and return the string.

let words = ['JS', 'is', 'amazing'];
// joining the words by space
console.log(words.join(' ')) // 'JS is amazing'

// joining by dash ('-')
console.log(words.join('-')) // 'JS-is-amazing'

7. to just loop over an array

forEach:
This method executes a provided function once for each array element.

const array1 = ['a', 'b', 'c'];
array1.forEach(element => console.log(element));
// 'a'
// 'b'
// 'c'

8. to transform the array to a single value

.reduce:
This methods reduces the array to a single value.
This value can be of any type: number, string, boolean, array or object.

The reducer function takes four arguments:
a) Accumulator
b) Current Value
c) Current Index
d) Source Array

Reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single resulting value.

// sum of the elements of the array using .reduce
let numbers = [1,4,5];
const sum = numbers.reduce((acc, el, i, arr) => acc+el);
console.log(sum) // 10

Phew, this was a lot to take in 😅.

I hope you guys found this article helpful, if you did please leave a like.
Find me on twitter.

Thanks for reading. 💚

Happy coding.

There are three logical assignmet operators in JavaScript

1. Logical OR assignment operator (||=)
2. Logical AND assignment operator (&&=)
3. Nullish assignment (??=)

1. Logical OR assignment:

It performs an assignment if the logical operation would evaluate the right-hand side. In other words, x ||= y is equivalent to:

x || (x = y);

which means that the value of y will be assigned to x if x is falsy.

Examples

let name;  
name ||= 'John'  
console.log(name)  // John  

let person = {name: 'Percy'};  
person.age ||= 30;
console.log(person) // {name: 'Percy', age: 30}

Reference: Logical OR Assignment MDN

2. Logical AND assignment:

The logical AND assignment (x &&= y) operator only assigns if x is truthy.

let a = 1;
let b = 0;

a &&= 2;
console.log(a);
// expected output: 2

b &&= 2;
console.log(b);
// expected output: 0

Reference: Logical AND Operator MDN

3. Logical Nullish assignment:

The logical nullish assignment (x ??= y) operator only assigns if x is nullish (null or undefined).

function config(options) {
  options.duration ??= 100;
  options.speed ??= 25;
  return options;
}

config({ duration: 125 }); // { duration: 125, speed: 25 }
config({}); // { duration: 100, speed: 25 }

Reference: Logical Nullish assignment MDN

That's it for this blog guys, thank you for reading.
I hope you found it helpful, if you did please give a like and share.
This is my first blog on hashnode, if there is any mistake or room for improvement, please let me know.

Follow me on twitter