DEV Community: Palash Mondal

Top 7 JavaScript Array sort() Method Use Cases

Palash Mondal — Thu, 02 Sep 2021 08:10:27 +0000

Hi Everyone 👋

Today I wanted to share some of the most common use cases for Array sort() method in JavaScript. The sort() method sorts the elements of an array and returns the sorted array, and no copy is made. The default sort order is ascending. In this article, we will see how we can utilise its power to the fullest. 🚀

Let's start!

Sort an Array of Strings
Case-insensitive Sort an Array of Strings
Sort an Array of Numbers
Sort an Array of Date Strings
Sort an Array except for one Element
Sort Array of Objects by Property Value
Sort Array of Objects by Multiple Property values

1. Sort an Array of Strings

Ascending (A to Z):

We can sort a simple array of strings using a functionless array sort() method like this:

let fruits = ['Apples', 'Watermelon', 'Bananas', 'Cherries'];
fruits.sort();    // 👈 default sort

console.log( fruits );
// ["Apples", "Bananas", "Cherries", "Watermelon"]
// A → B → C → W

Descending (Z to A):

To sort the array of strings in descending order we can use String localeCompare() method like this:

let fruits = ['Apples', 'Watermelon', 'Bananas', 'Cherries'];
fruits.sort((a, b) => b.localeCompare(a));

console.log( fruits );
// ["Watermelon", "Cherries", "Bananas", "Apples"]
// W → C → B → A

↑ Back to top

2. Case-insensitive Sort an Array of Strings

Issue:

Let us first see what happens when we do a default sort for an array containing both lowercase and uppercase string elements.

let fruits = ['Apples', 'Watermelon', 'Bananas', 'cherries'];
fruits.sort(); 

console.log( fruits );
// ["Apples", "Bananas", "Watermelon", "cherries"]
// A → B → W → c

As you can see above output, with default sorting word Watermelon starting with a uppercase W is coming before cherries starting with a lowercase c. This happens because strings are sorted according to each character's Unicode code point value. Using string charCodeAt() we can get the UTF-16 code unit for each character and then see that:

'C'.charCodeAt()   // 67
'W'.charCodeAt()   // 87
'c'.charCodeAt()   // 99

// 67 < 87 < 99
// C → W → c

Ascending (aA to zZ):

Using case-insensitive sorting we can make sure that we get a properly sorted array, no matter what the casing for each string element in the array is:

let fruits = ['Apples', 'Watermelon', 'Bananas', 'cherries'];
fruits.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())); 

console.log( fruits );
// ["Apples", "Bananas", "cherries", "Watermelon"]
// A → B → c → W

Or,

let fruits = ['Apples', 'Watermelon', 'Bananas', 'cherries'];
fruits.sort((a, b) => a.localeCompare(b, 'en', { sensitivity: 'base' })); 

console.log( fruits );
// ["Apples", "Bananas", "cherries", "Watermelon"]

Descending (zZ to aA):

For case-insensitive sorting of array of strings in descending order we can simply interchange a & b element in the sorting compare function like this:

let fruits = ['Apples', 'Watermelon', 'Bananas', 'cherries'];
fruits.sort((a, b) => b.toLowerCase().localeCompare(a.toLowerCase())); 

console.log( fruits );
// ["Watermelon", "cherries", "Bananas", "Apples"]
// W → c → B → A

Or,

let fruits = ['Apples', 'Watermelon', 'Bananas', 'cherries'];
fruits.sort((a, b) => b.localeCompare(a, 'en', { sensitivity: 'base' })); 

console.log( fruits );
//  ["Apples", "Bananas", "cherries", "Watermelon"]

↑ Back to top

3. Sort an Array of Numbers

Issue:

let numbers = [4, 2, 5, 1, 3, 10];
numbers.sort();    // 👈 default sort

console.log( numbers );
//  [1, 10, 2, 3, 4, 5]

In the above example, we can see that if we use a default sort on the numbers array we are getting an incorrect output as 10 is coming before 2 when it should be at the last position. This happens because array elements are sorted by converting them to strings and comparing strings in UTF-16 code units order. Thus in a numeric sort, 2 should come before 10, but because numbers are converted to strings, "10" comes before "2" in the Unicode order.

Ascending:

We can sort an array of numbers in ascending order using a simple compare function like this

let numbers = [4, 2, 5, 1, 3, 10];
numbers.sort((a, b) => a - b);   // 👈 compare function, simply return a - b

console.log( numbers );
// [1, 2, 3, 4, 5, 10]

Descending:

To sort an array of numbers in descending order we can simply interchange a & b elements in the sorting compare function like this:

let numbers = [4, 2, 5, 1, 3, 10];
numbers.sort((a, b) => b - a);   // 👈 interchange `a` & `b` and return b - a

console.log( numbers );
// [10, 5, 4, 3, 2, 1]

↑ Back to top

4. Sort an Array of Date Strings

Issue:

// Date string in YYYY-MM-D format
let dates = [
  '2021-08-1',
  '2021-08-4',
  '2021-08-10',
  '2021-08-2'
];
dates.sort()    // 👈 default sort

console.log( dates )
// ["2021-08-1", "2021-08-10", "2021-08-2", "2021-08-4"]

In the above example, we can see that the date string "2021-08-10" is coming before "2021-08-2" which is not the expected output. It happens because of the same reason when sorting number array, where we found that 10 was coming before 2 when using default sorting.

Ascending:

To properly sort an array of date strings we can create a Date object by passing the date string to a new Date() inside the compare function like this:

let dates = [ '2021-08-1', '2021-08-4', '2021-08-10', '2021-08-2' ];
dates.sort((a, b) => new Date(a) - new Date(b))  // 👈 using `Date` constructor here

console.log( dates )
// ["2021-08-1", "2021-08-2", "2021-08-4", "2021-08-10"]

Descending:

For descending order we can simply interchange a & b elements in the sorting compare function like this:

let dates = [ '2021-08-1', '2021-08-4', '2021-08-10', '2021-08-2' ];
dates.sort((a, b) => new Date(b) - new Date(a))  // 👈  here

console.log( dates )
// ["2021-08-10", "2021-08-4", "2021-08-2", "2021-08-1"]

↑ Back to top

5. Sort an Array except for one Element

Let say we have a simple array like this

let fruits = ['Select', 'Apples', 'Watermelon', 'Bananas', 'Cherries'];

and we want to sort all elements in this array, except "Select". So, no matter if we are sorting the array in ascending/descending order we should always have "Select" at the first position. For this simple demo, we are assuming there are no duplicates in this array and each element starts with an uppercase and the rest of the letters are in lowercase. So we are not doing any case-insensitive sorting just to keep things simple.

Ascending:

We can do this in ascending order by adding a little bit of extra logic to the sort compare function like this:

let fruits = ['Select', 'Apples', 'Watermelon', 'Bananas', 'Cherries'];

fruits.sort((a, b) => {

  // If the first element value is "Select",
  // then keep it before second element. a < b
  if (a === 'Select') return -1;

  // If second element value is "Select",
  // then keep it before first element. a > b
  if (b === 'Select') return 1;

  // Else default sorting of string
  return a.localeCompare(b);
});

console.log( fruits )
// ["Select", "Apples", "Bananas", "Cherries", "Watermelon"]
// ↑ "Select" is at the first position and rest of the element is sorted

Descending:

For descending order logic we just need to interchange a & b for the localeCompare logic and we get the desired output.

let fruits = ['Select', 'Apples', 'Watermelon', 'Bananas', 'Cherries'];

fruits.sort((a, b) => {
  if (a === 'Select') return -1; 
  if (b === 'Select') return 1;

  return b.localeCompare(a);  // 👈 interchange `a` & `b` here
});

console.log( fruits )
// ["Select", "Watermelon", "Cherries", "Bananas", "Apples"]
// ↑ "Select" is still at the first position and rest of the element is sorted

↑ Back to top

6. Sort Array of Objects by Property Value

Ascending:

We can sort an array of objects by a property value like this:

let inventory = [
  {name: 'Bananas', quantity: 5},
  {name: 'Apples',  quantity: 10},
  {name: 'Grapes',  quantity: 2}
];

// Sort by the "quantity" property value
inventory.sort((a, b) => a.quantity - b.quantity);  // 👈 here

console.log( inventory )
// Output
/*
[
  { "name": "Grapes",  "quantity": 2 },
  { "name": "Bananas", "quantity": 5 },
  { "name": "Apples",  "quantity": 10 }
]
*/

Now we can see that in the above array after sorting in ascending order, the object with name property value "Grapes" is coming first as its quantity value is lowest 2, then we have an object with quantity value 5 and then 10.

Descending:

For descending order logic we just need to interchange a & b in the sort compare function like:

let inventory = [
  {name: 'Bananas', quantity: 5},
  {name: 'Apples',  quantity: 10},
  {name: 'Grapes',  quantity: 2}
];

// Sort by the "quantity" property value
inventory.sort((a, b) => b.quantity - a.quantity);  // 👈 interchange `a` & `b` here

console.log( inventory )
// Output
/*
[
  { "name": "Apples",  "quantity": 10 },
  { "name": "Bananas", "quantity": 5 },
  { "name": "Grapes",  "quantity": 2 }
]
*/

↑ Back to top

7. Sort Array of Objects by Multiple Property values

Ascending:

Let say we have an array like this:

let inventory = [
  {name:"Bananas", color:"Yellow", quantity:5},
  {name:"Apples", color:"Red", quantity:4},
  {name:"Apples", color:"Green", quantity:10},
  {name:"Grapes", color:"Green", quantity:2},
  {name:"Apples", color:"Yellow", quantity:6}
];

Our requirement is:

First, we need to sort the name property values in ascending order.
Then, we need to sort the quantity property values in ascending order.

So, we are looking for output like:

name	quantity	color
Apples	4	Red
Apples	6	Yellow
Apples	10	Green
Bananas	5	Yellow
Grapes	2	Green

So, you can see name column is sorted first alphabetically. Then for each having the same name value we sort them by quantity column.

Thus we have

// First
Apples → Bananas → Grapes 
A → B → G

// Then by quantity 
For Apples: 4 → 6 → 10
For Bananas: 5
For Grapes: 2

// Final output for quantity column
4 → 6 → 10 → 5 → 2

Though this logic seems super complex, but its solution is super easy:

let inventory = [
  {name:"Bananas", color:"Yellow", quantity:5},
  {name:"Apples", color:"Red", quantity:4},
  {name:"Apples", color:"Green", quantity:10},
  {name:"Grapes", color:"Green", quantity:2},
  {name:"Apples", color:"Yellow", quantity:6}
];

// Sort by the "name" property value, then by "quantity"
inventory.sort((a, b) => {
  let compareNames = a.name.localeCompare(b.name);
  let compareQuantity = a.quantity - b.quantity;

  // First compare using names
  // If values for "name" porperty for both a & b is same,
  // then compare by "quantity" property value
  return compareNames || compareQuantity;
})

// Output is the same as shown in the above table

Or, we can also write this in a one-line like:

inventory.sort((a, b) => a.name.localeCompare(b.name) || a.quantity - b.quantity);

and we still get the same output.

Descending:

Let say our requirement is now something like:

First, we need to sort the name property values in ascending order.
Then, we need to sort the quantity property values in descending order.

For this we just need to interchange a & b in the sort compare function for just quantity property only like:

// Sort by the "name" property value, then by "quantity" descending order
inventory.sort((a, b) => {
  let compareNames = a.name.localeCompare(b.name);
  let compareQuantity = b.quantity - a.quantity;  // 👈 interchange `a` & `b` here

  // First compare using names
  // If values for "name" porperty for both a & b is same,
  // then compare by "quantity" property value
  return compareNames || compareQuantity;
})

Or, just in one-line like:

inventory.sort((a, b) => a.name.localeCompare(b.name) || b.quantity - a.quantity);

And we get output like:

name	quantity	color
Apples	10	Green
Apples	6	Yellow
Apples	4	Red
Bananas	5	Yellow
Grapes	2	Green

↑ Back to top

Wrap Up

I hope you will find this post useful and learn something new in the process. If you have any comments, additions or questions please let me know in the comment section.

Feedback, suggestions, and recommendations are highly welcome. This will really help me a lot and motivate me to share more content like this in future also. 😀

Happy Coding!

6 Awesome CSS Layout Generators

Palash Mondal — Mon, 16 Aug 2021 05:42:07 +0000

Hi everyone 👋

Today I wanted to share with you 6 awesome CSS layout generators/tools that will help you in rapid prototyping and front-end development of CSS layouts for your projects. I hope you will find it useful and bookmark it so that you can refer to it easily in future.

Let's start!

1. Interactive CSS Grid Generator By Layoutit

Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with this interactive CSS Grid Generator.

Link: https://grid.layoutit.com/

Here is a simple layout created using the code generated from this site and also adding some custom CSS:

2. CSS Layout

Popular Layouts & patterns made with CSS. Zero Dependencies. No Frameworks. No CSS Hacks. Real Use Cases. Good Practices. You can select a pattern and it has all the code related to that pattern which we can copy-paste in our projects.

Link: https://csslayout.io/

Here is a simple layout created using the code present on the site for the most common Holy Grail Pattern:

3. Griddy

Easily create CSS Grid layouts by setting the number of columns and rows using various units. We can also set column and row gap and see the generated code at the bottom which we can copy-paste in our projects. It doesn't support adding grid-template-areas or grid-area like the Layoutit site, but still it's a very helpful tool.

Link: https://griddy.io/

Here is a simple layout created using the CSS code generated from this site and also adding some custom CSS:

4. CSS Grid Layout generator by Masaya Kazama

This layout generator has two awesome presets: Holy Grail & Article List, which we can modify visually based on our requirements and all of the HTML & CSS code is generated for us. It also supports grid areas, which is super cool.

Link: https://vue-grid-generator.netlify.app/

Here is a simple demo using the code from this site:

5. CSS Grid Generator by Sarah Drasner

A small tool for everyone. You can designate rows, columns, gaps, and units, and then drag to create child divs to make dynamic layouts with ease!

Link: https://cssgrid-generator.netlify.app/

Here is a simple demo using the code from this site:

6. Bootstrap 4 Interface Builder | LayoutIt

Another awesome site by LayoutIt helps us to quickly drag-and-drop Bootstrap 4 Grid system, base CSS elements, components, etc., and build web layouts with this interactive Bootstrap 4 Interface Builder.

Link: https://www.layoutit.com/build

I hope these layout generators/tools will help you to create awesome layouts rapidly and increase your front-end development productivity.

Is there any other site which you like to use for this purpose? Please add them in the comments below. It would help a lot.

If you liked this article, be sure to ❤ it.

Happy Coding!

10 Awesome JavaScript Shorthands

Palash Mondal — Thu, 29 Jul 2021 12:48:11 +0000

Hi everyone 👋

Today I wanted to share with you 10 awesome JavaScript shorthands that will increase your speed by helping you to write less code and do more.

Let's start!

1. Merge Arrays

Longhand:

We usually merge two arrays using Array concat() method. The concat() method is used to merge two or more arrays. This method does not change the existing arrays but instead returns a new array. Here is a simple example:

let apples = ['🍎', '🍏'];
let fruits = ['🍉', '🍊', '🍇'].concat(apples);

console.log( fruits );
//=> ["🍉", "🍊", "🍇", "🍎", "🍏"]

Shorthand:

We can shorten this a bit by using ES6 Spread Operator (...) like this:

let apples = ['🍎', '🍏'];
let fruits = ['🍉', '🍊', '🍇', ...apples];  // <-- here

console.log( fruits );
//=> ["🍉", "🍊", "🍇", "🍎", "🍏"]

and we are still getting the same output as before. 😃

2. Merge Arrays (but at the start)

Longhand:

Let's say we want to add all the items from the apples array at the start of fruits array, instead of at the end like we have seen in the last example. We can do this using Array.prototype.unshift() like this:

let apples = ['🍎', '🍏'];
let fruits = ['🥭', '🍌', '🍒'];

// Add all items from apples onto fruits at start
Array.prototype.unshift.apply(fruits, apples)

console.log( fruits );
//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]

Now the two red & green apples are at the start instead of the end after merging.

Shorthand:

We can shorten this long code again using ES6 Spread Operator (...) like this:

let apples = ['🍎', '🍏'];
let fruits = [...apples, '🥭', '🍌', '🍒'];  // <-- here

console.log( fruits );
//=> ["🍎", "🍏", "🥭", "🍌", "🍒"]

3. Clone Array

Longhand:

We can easily clone an array using the Array slice() method like this:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
let cloneFruits = fruits.slice();

console.log( cloneFruits );
//=> ["🍉", "🍊", "🍇", "🍎"]

Shorthand:

Using ES6 Spread Operator (...) we can clone an array like this:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
let cloneFruits = [...fruits];  // <-- here

console.log( cloneFruits );
//=> ["🍉", "🍊", "🍇", "🍎"]

4. Destructuring Assignment

Longhand:

While working with arrays, we sometimes need to "unpack" arrays into a bunch of variables like this:

let apples = ['🍎', '🍏'];
let redApple = apples[0];
let greenApple = apples[1];

console.log( redApple );    //=> 🍎
console.log( greenApple );  //=> 🍏

Shorthand:

We can achieve the same result in a single line using Destructuring assignment like this:

let apples = ['🍎', '🍏'];
let [redApple, greenApple] = apples;  // <-- here

console.log( redApple );    //=> 🍎
console.log( greenApple );  //=> 🍏

5. Template literals

Longhand:

Usually, when we have to add an expression to a string we do it like:

// Display name in between two strings
let name = 'Palash';
console.log('Hello, ' + name + '!');
//=> Hello, Palash!

// Add & Subtract two numbers
let num1 = 20;
let num2 = 10;
console.log('Sum = ' + (num1 + num2) + ' and Subtract = ' + (num1 - num2));
//=> Sum = 30 and Subtract = 10

Shorthand:

With Template literals we can use backticks (`), which allow us to embed any expression into the string, by wrapping it in ${...} like this:

// Display name in between two strings
let name = 'Palash';
console.log(`Hello, ${name}!`);  // <-- No need to use + var + anymore
//=> Hello, Palash!

// Add two numbers
let num1 = 20;
let num2 = 10;
console.log(`Sum = ${num1 + num2} and Subtract = ${num1 - num2}`);
//=> Sum = 30 and Subtract = 10

6. For Loop

Longhand:

Using the for loop we can loop through an array like this:

let fruits = ['🍉', '🍊', '🍇', '🍎'];

// Loop through each fruit
for (let index = 0; index < fruits.length; index++) { 
  console.log( fruits[index] );  // <-- get the fruit at current index
}

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

Shorthand:

We can achieve the same result using the for...of statement but with very little code like this:

let fruits = ['🍉', '🍊', '🍇', '🍎'];

// Using for...of statement 
for (let fruit of fruits) {
  console.log( fruit );
}

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

7. Arrow Functions

Longhand:

To loop through an array we can also use Array forEach() method. But we have to write a bit more code, which is less than the most common for loop we have seen above, but still a bit more than the for...of statement :

let fruits = ['🍉', '🍊', '🍇', '🍎'];

// Using forEach method
fruits.forEach(function(fruit){
  console.log( fruit );
});

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

Shorthand:

But with Arrow function expressions we can write the full loop code in a single line like this:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
fruits.forEach(fruit => console.log( fruit ));  // <-- Magic ✨

//=> 🍉
//=> 🍊
//=> 🍇
//=> 🍎

I mostly use forEach loop with arrow functions, but I wanted to show you both the shorthand for looping: for...of statement and forEach loop. So that you can use whichever code you like based on your preference. 😃

8. Find an object in an array

Longhand:

To find an object in an array of objects by one of its properties, we usually use for loop like this:

let inventory = [
  {name: 'Bananas', quantity: 5},
  {name: 'Apples', quantity: 10},
  {name: 'Grapes', quantity: 2}
];

// Get the object with the name `Apples` inside the array
function getApples(arr, value) {
  for (let index = 0; index < arr.length; index++) {

    // Check the value of this object property `name` is same as 'Apples'
    if (arr[index].name === 'Apples') {  //=> 🍎

      // A match was found, return this object
      return arr[index];
    }
  }
}

let result = getApples(inventory);
console.log( result )
//=> { name: "Apples", quantity: 10 }

Shorthand:

Wow! We have to write so much previously, to implement this logic. But with Array find() method and arrow function =>, we can easily achieve this in one line like this:

// Get the object with the name `Apples` inside the array
function getApples(arr, value) {
  return arr.find(obj => obj.name === 'Apples');  // <-- here
}

let result = getApples(inventory);
console.log( result )
//=> { name: "Apples", quantity: 10 }

9. Convert String to Integer

Longhand:

The parseInt() function is used to parse a string and return an integer:

let num = parseInt("10")

console.log( num )         //=> 10
console.log( typeof num )  //=> "number"

Shorthand:

We can achieve the same result by adding a + prefix before the string like this:

let num = +"10";

console.log( num )           //=> 10
console.log( typeof num )    //=> "number"
console.log( +"10" === 10 )  //=> true

10. Short-circuit Evaluation

Longhand:

Mostly if-else statement is used if we have to set a value based on another value is not a falsy value like this:

function getUserRole(role) {
  let userRole;

  // If role is not falsy value
  // set `userRole` as passed `role` value
  if (role) {
    userRole = role;
  } else {

    // else set the `userRole` as USER
    userRole = 'USER';
  }

  return userRole;
}

console.log( getUserRole() )         //=> "USER"
console.log( getUserRole('ADMIN') )  //=> "ADMIN"

Shorthand:

But using short-circuit evaluation (||), we can do this in one line like this:

function getUserRole(role) {
  return role || 'USER';  // <-- here
}

console.log( getUserRole() )         //=> "USER"
console.log( getUserRole('ADMIN') )  //=> "ADMIN"

Basically, expression1 || expression2 is short-circuit evaluated to the truthy expression. So, it's like saying that if the first part is true don't bother evaluating the rest of the expression.

Finally, I would like to end this article by sharing one quote by Jeff Atwood:

Code is only our enemy because there are so many of us programmers writing so damn much of it. If you can’t get away with no code, the next best thing is to start with brevity.

If you love writing code — really, truly love to write code — you’ll love it enough to write as little of it as possible.

If you liked this article, be sure to ❤ it.

You can also checkout my previous blog:

Ultimate Cheatsheet Compilation

Palash Mondal ・ Feb 25 '21

#productivity #webdev #beginners #javascript

Happy Coding!

Community Input

@jessycormier

Arrow Functions

If you don't need the this context you can shorten even further when you use arrow functions:

let fruits = ['🍉', '🍊', '🍇', '🍎'];
fruits.forEach(console.log);

@lukeshiru

Find an object in an array

You can use object destructure and arrow functions to make it leaner:

// Get the object with the name `Apples` inside the array
const getApples = array => array.find(({ name }) => name === "Apples");

let result = getApples(inventory);
console.log(result);
//=> { name: "Apples", quantity: 10 }

Short-circuit Evaluation Alternatives

const getUserRole1 = (role = "USER") => role;
const getUserRole2 = role => role ?? "USER";
const getUserRole3 = role => role ? role : "USER";

Thank you for your feedbacks! ❤️

Awesome JavaScript Posts (Week 28)

Palash Mondal — Mon, 26 Jul 2021 17:16:44 +0000

Here is a curated list of the latest posts, blogs and repositories related to JavaScript from last week (week 28). I hope you will find it useful and it will help you to gain more knowledge about what's latest happening in the world of JavaScript.

Let's start!

1. Building A Dynamic Header With Intersection Observer

Have you ever needed to build a UI where some component on the page needs to respond to elements as they’re scrolled to a certain threshold within the viewport — or perhaps in and out of the viewport itself? In JavaScript, attaching an event listener to constantly fire a callback on the scroll can be performance-intensive, and if used unwisely, can make for a sluggish user experience. But there is a better way with Intersection Observer.

Link: dynamic-header-intersection-observer

2. The Ultimate Guide to Browser-Side Storage

Browsers have evolved over the past three decades so it’s not surprising they offer a multitude of storage APIs which essentially do the same thing. It’s not always easy to find the *best *option and you may have to combine several depending on the functionality you’re implementing. Here is the ultimate guide to browser-side storage.

Link: the-ultimate-guide-to-browser-side-storage

3. Freelance React Developer Checklist

Essentially this checklist makes your onboarding as a React freelance developer more seaming-less when entering a new project and team because before a company can hire you as a React freelancer, both sides need to talk through this checklist to get their requirements aligned.

Link: freelance-react-developer

4. Vue 3 Migration Build: safely upgrade your app to Vue 3 (Pt. 1)

The Vue team has recently released the highly anticipated migration build for Vue 3. If you’ve been thinking about upgrading your Vue 2 app to Vue 3, this is what you need. The process of upgrading an app to the latest version of the framework can be a daunting task. This article series is created to make that process easier.

Link: vue-3-migration-build

5. How To Migrate From jQuery To Next.js

In this article, we’re taking a closer look at different approaches and strategies on how we can migrate a web application that uses the jQuery framework, and start using one of the coolest React frameworks in the market: Next.js.

Link: migrate-jquery-nextjs

6. New Tailwind App CLI

A zero-configuration cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications. Set up a tailwind app with

# install the CLI globally
npm install -g new-tailwind-app

# use it with npx (recommended)
npx new-tailwind-app [app_name] --flag

# create a react.js tailwind app
npx new-tailwind-app [app_name] --react

# create a react.js tailwind app with prettier
npx new-tailwind-app [app_name] --react --prettier

Link: new-tailwind-app

7. Using Redis with Node.js

Redis is a super fast and efficient in-memory, key-value cache and store. It’s also known as a data structure server, as the keys can contain strings, lists, sets, hashes and other data structures. This tutorial explains basic Redis data structures and interactions, as well as several common use cases using the node-redis library.

Link: using-redis-node-js

8. How to convert arrays to human-readable lists in JavaScript

Oftentimes, you might end up in situations where you have an array and you just want to deflate the entire array content in a human-readable form. Or more specifically in a list-like format. This tutorial explains how would you achieve this.

Link: convert-arrays-to-human-readable-lists-in-javascript

9. How to Structure a Large Scale Vue.js Application

What is the best way to structure a Vue.js application so that it scales and remains maintainable and extendable the more it grows? This is a question that I've heard on numerous occasions and I think one answer to that question lies in the principle of predictability. When it comes to creating a scalable project you want everything about it to be as predictable as possible.

Link: structure-a-large-scale-vue-js-application

10. The Road to Ember 4.0

In his EmberConf 2021 keynote, Yehuda shared a name for Ember's next edition: Polaris. In order to unblock Polaris providing the best, most productive experience the Ember project can build, we're going to remove already-deprecated APIs in a 4.0 release. Ember 4.0 will be released around September 20th.

Link: the-road-to-ember-4-0

If you have read or found a quality post or blog recently related to JavaScript that you will like to be included in the GitHub repository, then please submit a PR here:

https://github.com/palashmon/awesome-js-posts

Also, if you liked this article, be sure to ❤ it.

Happy Coding!

Center Text Vertically and Horizontally in CSS

Palash Mondal — Mon, 08 Mar 2021 16:18:52 +0000

Hi Everyone 👋

Today I wanted to share with you how to center text vertically and horizontally in CSS. We will look into three methods to achieve this using CSS Flexbox Layout (Flexible Box) and CSS Grid Layout. Also, in the end, I will show you the easiest way to center text vertically and horizontally.

1. Using CSS Flexbox

We can center text using CSS Flexbox by just these 3 lines of code.

display: flex;
align-items: center;
justify-content: center;

Demo:

2. Using CSS Grid (Method #1)

We can center text using CSS Grid by just these 3 lines of code.

display: grid;
justify-content: center;
align-content: center;

Demo:

3. Using CSS Grid (Method #2) - Easiest way

Now, the easiest way to center text vertically and horizontally when using CSS Grid (method #2) is using just 2 lines of code.

display: grid;
place-content: center;

Demo:

Questions

1. We can also do this using

display: grid;
place-items: center;

So what is the diff between place-items and place-content?

A: Yes, that is correct but place-items: center only works for test case #1 & #2 where we have simple text or text inside an element as you can see in this demo:

But in case we have text inside multiple elements like:

<div class="container2 items">
  <span>Lorem</span>
  <span>Lorem</span>
  <span>Lorem</span>
</div>

Then in that case place-items:center will actually center the text & the element inside each grid row instead of a container, as you can see in the image below.

^{Btw, I am using the Firefox DevTools CSS Grid Inspector for this image}

But, when we use place-content: center, then grid items are packed flush to each other toward the center of the alignment container as you can see below.

And that is the result we are actually looking for, that's why we have used place-content: center; instead. I hope that makes sense.

Also, here is the code demo if you want to check it out:

If you prefer watching a video, please check out this video where all the points are explained in full details:

[Center Text Vertically and Horizontally in CSS](https://youtu.be/swYeGG7mjk8)

Demo

Github Pages

Code

CSS Demos

Wrap Up

I hope you will find this video useful and learn something new in the process. If you want to learn more HTML, CSS, JavaScript and web development tips & tricks, please make sure to subscribe on YouTube.

Happy Coding!

Style console.log() output with CSS - Part 2

Palash Mondal — Wed, 03 Mar 2021 04:31:54 +0000

This video is part 2 of How to style console.log() output with CSS. In this video, I am going to explain about how can we create a generic logic so that we can easily style console log output and do it a bit faster.

Issue Faced

So, right now in order to apply a css styling to multiple console.log() output, we would do something like this:

console.log("%cSome text here 1", "color:green" );
console.log("%cSome text here 2", "color:red" );
console.log("%cSome text here 3", "color:blue" );

console.log("%cSome text here 4", "color:green" );
console.log("%cSome text here 5", "color:red" );
console.log("%cSome text here 6", "color:blue" );

You can see in the above examples, only the console log text is changing and the style is being repeated multiple times. I think we can create a generic logic and just call few functions and pass the text as a parameter to those functions and that would handle the styling for us.

Solution

So first, we will create a main logColor function:

function logColor(color, args) {
  console.log("%c" + args.join(" "), "color:" + color);
}

Then we will create a generic log object:

const log = {
  green: (...args) => logColor("green", args),
  red: (...args) => logColor("red", args),
  blue: (...args) => logColor("blue", args),
};

and then we can call it like:

log.green("Some text here 1");
log.red("Some text here 2");
log.blue("Some text here 3");

As you can see, we can now use these methods anywhere in your project without typing %c (CSS format specifier) and color name part every time. Yay!

Please check out this video where the solution for this issue is explained in full details:

How to style console.log() output with CSS - Part 2

Wrap Up

Happy Coding!

Style console.log() output with CSS

Palash Mondal — Mon, 01 Mar 2021 14:42:41 +0000

In this video, I’ll show you how to style console.log() output with CSS. We will use a CSS format specifier which allows us to customize the display in the console and we will also see few demos related to it.

Format specifier

A format specifier consists of a % symbol followed by a letter that indicates the formatting that applies to the value. The parameters following the string apply to the placeholders in order.

CSS Format specifier

The CSS format specifier allows us to customize the display in the console. We will need to start the string with the specifier (%c) and give the style you wish to apply as the second parameter.

Demo Code

If we try to copy-paste the below code in the Google Chrome dev tools console,

// Console output, but with green color
console.log("%cHello World", "color: green");

and we get an output like this in the console:

and if we try this:

// Same console output, but with green color & bold font weight
console.log("%cHello World", "color: green; font-weight: bold;");

Output:

and if we try this below code:

// Here is another example using multiple CSS style rules
console.log(
  "%cShare on Twitter",
  `color: #fff;
  background-color: #1da1f2;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: 8px;`
);

and we get an awesome output in the console like this:

I have a full video where this is explained in full details if you're interested.

[How to style console.log() output with CSS](https://youtu.be/4RTBegxiE50)

Wrap Up

Happy Coding!

Ultimate Cheatsheet Compilation

Palash Mondal — Thu, 25 Feb 2021 05:43:20 +0000

Hi everyone 👋

Today I wanted to share with you the Ultimate Cheatsheet Compilation.

I hope aspiring/new developers will find this compilation helpful for quick reference whenever needed.

Git CheatSheet
Git CheatSheet with more details
Javascript Operator Cheatsheet
Javascript String Cheatsheet
Javascript Date Cheatsheet
Javascript Object Cheatsheet
Javascript Array Cheatsheet
Cron Cheatsheet
HTTP Status Code Cheatsheet
Javascript DOM Cheatsheet
CSS Selectors Cheatsheet
Javascript Regex Cheatsheet
Command-Line Cheatsheet
VSCode Keyboard Shortcuts CheatSheet
Module Cheatsheet
Array Methods Cheatsheet

Wrap Up

I hope you will find this blog post useful and keep it handy for a quick reference. If you want to learn more HTML, CSS, JavaScript and web development tips & tricks, then please subscribe on YouTube.

Happy Coding!

DEV Community: Palash Mondal

Top 7 JavaScript Array sort() Method Use Cases

Table of Contents

1. Sort an Array of Strings

Ascending (A to Z):

Descending (Z to A):

2. Case-insensitive Sort an Array of Strings

Issue:

Ascending (aA to zZ):

Descending (zZ to aA):

3. Sort an Array of Numbers

Issue:

Ascending:

Descending:

4. Sort an Array of Date Strings

Issue:

Ascending:

Descending:

5. Sort an Array except for one Element

Ascending:

Descending:

6. Sort Array of Objects by Property Value

Ascending:

Descending:

7. Sort Array of Objects by Multiple Property values

Ascending:

Descending:

Wrap Up

Happy Coding!

6 Awesome CSS Layout Generators

1. Interactive CSS Grid Generator By Layoutit

2. CSS Layout

3. Griddy

4. CSS Grid Layout generator by Masaya Kazama

5. CSS Grid Generator by Sarah Drasner

6. Bootstrap 4 Interface Builder | LayoutIt

Happy Coding!

10 Awesome JavaScript Shorthands

1. Merge Arrays

Longhand:

Shorthand:

2. Merge Arrays (but at the start)

Longhand:

Shorthand:

3. Clone Array

Longhand:

Shorthand:

4. Destructuring Assignment

Longhand:

Shorthand:

5. Template literals

Longhand:

Shorthand:

6. For Loop

Longhand:

Shorthand:

7. Arrow Functions

Longhand:

Shorthand:

8. Find an object in an array

Longhand:

Shorthand:

9. Convert String to Integer

Longhand:

Shorthand:

10. Short-circuit Evaluation

Longhand:

Shorthand:

Ultimate Cheatsheet Compilation

Palash Mondal ・ Feb 25 '21

Happy Coding!

Community Input

Awesome JavaScript Posts (Week 28)

1. Building A Dynamic Header With Intersection Observer

2. The Ultimate Guide to Browser-Side Storage

3. Freelance React Developer Checklist

4. Vue 3 Migration Build: safely upgrade your app to Vue 3 (Pt. 1)

5. How To Migrate From jQuery To Next.js

6. New Tailwind App CLI

7. Using Redis with Node.js