DEV Community: Khwaja Billal Siddiqi

How to sort objects according to True and False values in Javascript

Khwaja Billal Siddiqi — Thu, 15 Jun 2023 10:40:21 +0000

You can sort an array of objects according to their boolean properties by the .sort() method. Here’s an example of how you can sort an array of objects with a boolean property:

const users = [
    {
        name: "John",
        isVerified: false,
    },
    {
        name: "Kim",
        isVerified: true,
    },
    {
        name: "Mehdi",
        isVerified: false,
    },
]
users.sort((a,b) =>{ 
    if(a.isVerified && !b.isVerified) {
        return -1;
    }else if (!a.isVerified && b.isVerified){
        return 1;
    }else {
        return 0
    }
})
console.log(users);
// [
     { name: "Kim", isVerified: true },
     { name: "John", isVerified: false },
     { name: "Mehdi", isVerified: false }
   ]

In the .sort() method if the comparator function returns a value less than 0, it means that a should come before b in the sorted array. If it returns a value greater than 0, it means that b should come before a. If it returns 0, it means that the relative order of a and b doesn’t matter.

Reference Vs Value in JavaScript?

Khwaja Billal Siddiqi — Sat, 13 May 2023 13:13:30 +0000

In JavaScript, you can pass by value and by reference. The main difference between the two is that passing by value happens when assigning primitives while passing by reference when assigning objects.
When you pass a primitive type variable like a string or a number into a function, you are passing it by value. This means that any changes to that variable within the function have no effect on the data outside of the function.
On the other hand, when you pass an object into a function, you are passing it by reference. This means that if you change a property of that object within the function, that change will be reflected outside of the function as well.

let myNumber = 10;
let myObject = {value: 20};

function change(number, object) {
    number = number * 2;
    object.value = object.value * 2;
}

change(myNumber, myObject);
console.log(myNumber); // 10
console.log(myObject); // 40

In this example, myNumber is a primitive type and is passed by value into the change function. This means that any changes to the number parameter within the function have no effect on myNumber outside of the function.
On the other hand, myObject is an object and is passed by reference into the change function. This means that when we change the value property of the object parameter within the function, that change is reflected in myObject.value outside of the function.

Follow me on Github & Twitter

How to monitor changes in JavaScript?

Khwaja Billal Siddiqi — Wed, 03 May 2023 08:40:24 +0000

For monitoring the changes that have been made to the DOM tree you can use MutationObserver.
MutationObserver is a built-in object that observes a DOM element and fires a callback when it detects a change. It provides the ability to watch for changes being made to the DOM tree and is designed as a replacement for the older Mutation Events feature.

Some common use cases for MutationObserver include:

Augmenting third-party libraries that modify the DOM in some way but you want to extend this further or capture something from it.
Reacting to changes in the DOM, such as when elements are created or when property changes occur.

To use MutationObserver, you first create an observer with a callback-function and then attach it to a DOM node. The config object specifies what kind of changes to react on, such as changes in the direct children of the node, changes in all descendants of the node, changes in attributes of the node, etc.

Here is an example adapted from MDN:

const targetNode = document.getElementById("some-id");
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {
    if (mutation.type === "childList") {
      console.log("A child node has been added or removed.");
    } else if (mutation.type === "attributes") {
      console.log(`The ${mutation.attributeName} attribute was modified.`);
    }
  }
};

const observer = new MutationObserver(callback);
observer.observe(targetNode, config);

// Later, you can stop observing
observer.disconnect();

Follow me on Github & Twitter

Local Storage: Store data into the user’s browser

Khwaja Billal Siddiqi — Mon, 17 May 2021 16:21:06 +0000

To avoid the long process of store a user's simple activities in the database is to store them in his/her browser.

Local Storage is key-value pairs and it’s read-only. So you can access Local Storage in Javascript via the window.localStorage property.

For storing data you need to use setItem() which takes two parameters: a key and a value.

localStorage.setItem(‘name’, ‘Jonh Doe’);

If you want to store an array or an object you need to convert them into a string.

const seatsIndex= [1,4,5]
localStorage.setItem(‘selectedSeats’, JSON.stringify(seatsIndex));

For getting back the data from the Local Storage, use getItem() method. This one only accepts the key parameter.

localStorage.getItem(‘name’);

And if you converted array or object to a string, for retrieving, you should convert it back.

const selectedSeats = JSON.parse(localStorage.getItem(‘selectedSeats’));

For removing a single item, use removeItem() method.

localStorage.removeItem(‘name’)

And For clearing all items, use clear() method.

localStorage.clear()

Web browsers also have another storage called Session Storage and the difference between them is the Local Storage has no expiration date so the data not be deleted when the browser refreshed or closed, but the Session Storage deletes data when the tab is closed.

note: do not store user’s sensitive data in Local Storage.

How to customize error messages in Laravel 8

Khwaja Billal Siddiqi — Tue, 30 Mar 2021 14:47:16 +0000

On a website, validation errors and full-page errors are ways to show the user that the request does not proceed so they should be as clear as crystal.

Customize Validation Errors

For customizing the rule and attribute of validation Laravel has a separate file called validation.php in

resources/lang/xx/validation.php.

If you just want to edit the validation message you should define your custom message with attribute name in the “custom” array.

'custom' => [
    'name' => [
        'required' => 'Please Enter Your Name'
    ],
],

For customizing the attributes name just add your attribute name in the “attributes” array

'attributes' => [
    'name' => 'Full Name',
],

Customize Error Pages

Laravel 8 error pages are in the vendor folder so you need to publish those pages into resources/views

php artisan vendor:publish --tag=laravel-errors

after publishing pages, you have access to them in

resources/views/errors

Feel free to edit the messages or the whole layout.

How to do maintenance on a live website (Laravel 8)

Khwaja Billal Siddiqi — Tue, 30 Mar 2021 07:25:04 +0000

Maintenance injects fresh blood into the application.

After deploying your application to production it needs to be maintained. So Laravel makes it easy for you.
To active maintenance mode, you just need to run this command

php artisan down

This will disable your application and show a 503 error page for the user.

By adding a secret key while you enable maintenance mode you can access the application even it’s in maintenance mode

php artisan down --secret="123456789"

https://yourDomain.com/123456789

What if you want to redirect all requests to a specific route? for doing that just add the flag of redirect while you enable maintenance mode.

php artisan down --redirect=/about

And finally after completing the maintenance run this command to disable maintenance mode & let the user enjoy using your application.

php artisan up

For digging deeper visit: Laravel Maintenance Mode