Bootstrap 5 Alpha 1 is out

These are the notable changes

• Has more colors and improvised color palette
• jQuery is not included and is not required any more, still everything works. Isn’t that good?
• No IE support. (at last….)
• Updated form components
• Customization support for checkbox, radio, switches
• Utilities API – The utility API is a Sass based tool to generate utility classes.
• New xxl breakpoint
• New gutters class
• Bootstrap icons – Bootstrap now has its own icons – the SVG icons.

Check it out here https://v5.getbootstrap.com/

Please note that since its a alpha version there might be breaking changes in next release.

Optional Chaining in ES7

What is optional chaining?
Optional chaining allows you to access the value of a property in a nested object without the need to validate each object key/value in the chain.

I will try to explain it with an example.

I have an object, the value I have is deep inside a nested object.

  let data = {
    user: {
      feed: {
        edgeReels: {
          tray: {
            node: {
              dataExpiryDays: 2
            }
          }
        }
      }
    }
  };

I want to check the value of dataExpiryDays and do something.

We can do this like this

if(data.user.feed.edgeReels.tray.node.dataExpiryDays) {
    // do something
}

Wait…. anyone using JavaScript might know the potential dangers of this approach. If any of the nested object is not available or null the above line of code will break.

Example if the key edgeReels is not available, you will get an error like Cannot access tray of undefined .

So we write the above code like this.

  if (
    data &&
    data.user &&
    data.user.feed &&
    data.user.feed.edgeReels &&
    data.user.feed.edgeReels.tray &&
    data.user.feed.edgeReels.tray.node &&
    data.user.feed.edgeReels.tray.node.dataExpiryDays
  ) {
    // do something
  }

See you need to do a check for every keys in each nested level.

To avoid these kind of checks, there was new feature proposal called Optional Chaining to be included in ES7. The proposal is now in Stage 4 (5/31/2020 – when I was writing this.) . See the proposal here.

The Optional Chaining operator ?.

With optional chaining operator we can write the above if condition like this.

if(data?.user?.feed?.edgeReels?.tray?.node?.dataExpiryDays) {
    // do something
}

If any of the keys are missing subsequent checks are not done and the if condition fails.

Question 1: Can we validate an array position using Optional chaining?

Yes. like this

if(data?.nameArray?.[0]) {
 // nameArray has index 0
}

Now the big questions.

1. Can we use Optional chaining in my JavaScript project?
2. Can we use Optional chaining in my React App?

Can we use Optional chaining in my JavaScript project?

No. As Optional chaining is still in proposal stage, most browsers will NOT have full support implemented. So I recommend not to use it unless you add polyfills. As of 8/8/2022 all latest browser versions support optional chaining. The latest browser support can be viewed here in CanIUse website.

Can we use Optional chaining in my React App?

React CRA uses Babel. Babel is a JavaScript transcompiler  which makes new/next generation JavaScript features backward compatible with all browsers(don’t expect IE older versions).

So if you use React or Gastby or any other JavaScript project uses Babel 7.8 or above versions you are good to use Optional Chaining. If you are using React CRA check Babel version inside node-modules/@babel/core/package.json or check for a folder plugin-proposal-optional-chaining inside node-modules/@babel/

Check it out and post your comments if any.

Happy coding…. 🍺

Add dark mode in your website with 3 lines of code

Use the below 3 lines of code in your CSS file to active dark mode

Add below code in your style sheet.

html body * {
    background-color: black !important;
    color: white !important;
}

Show emoji in your webpage title or browser tab

You might have seen emoji in some websites’ browser title bar. I have not talking about the favicon. I am taking about emoji, thats what you see in browser tab right after favicon or anywhere in webpage.

This is what I am talking, you see the sun emoji in the browser tab.

Sun emoji in browser tab

How to do it:

1. Find an emoji. eg: Go to https://emojipedia.org/ search and find a emoji. Copy it.
2. Open you webpage which supports unicode. (Notepad++, VSCode etc)
3. Paste the emoji you copied, in the
   head > title tag.
4. Important step: Add the below meta tag inside your head tag.

<meta charset="UTF-8" />

You code will now look like this.

Thats it, save and open in browser. Your browser tab should display the emoji.

Peace ✌️

Convert JavaScript object to FormData

Scenario: I was using Formik in React. There was a need to convert formik values to FormData to send to API as post.

This is how it was done.

// A sample object  
let values = { name : 'Kiran', location: 'Sedona' };

let data = new FormData();
for (let key in values) {
    data.append(key, values[key]);
}
console.log(data);

How to check if a JavaScript object is empty

function isObjectEmpty(object)
{
  var isEmpty = true;
  for(keys in object)
  {
     isEmpty = false;
     break; // exiting since we found that the object is not empty
  }
  return isEmpty;
}

Example:

var myObject = {}; // Object is empty
var isEmpty  = isObjectEmpty(myObject); // will return true;

// populating the object
myObject = {"name":"John Smith","Address":"Kochi, Kerala"}; 

// check if the object is empty
isEmpty  = isObjectEmpty(myObject); // will return false;