Went into the University for the first time

I went into the university for the first time today. It is less than a kilometer from the apartment. I had to go there to finalize certain documents regarding my accomodation. I arrived at the university during the lunch time and hence I had to wait for a couple of hours for the office staffs to return. During the time, I roamed around the campus. The place is aesthetically pleasing, however, it is pretty small, especially since where I did my bachelor's, IIT Patna, had a campus spread across over 500 acres. I also went to the nearby Lidl to get a few frozen pizzas. I had that for lunch, evening snack and dinner. I had thought about cooking something for dinner, but I felt a bit lazy to do the same. However, I did modify the last frozen pizza by adding some mushrooms, pizza sauce and pepper. I think this could be a good trick moving forward - buy a few frozen pizzas and chopped vegetables from Lidl and fuse them. I think this would make the pizzas a bit more healthier and the effor

Emoji converter for WhatsApp web - from ":P" to "😝"

I don't use emoji's on WhatsApp very often. But recently, as I was texting using WhatsApp web, I inserted in an emoji and just as I was about to send it, I decided to select everything (ctrl + A) and cut it (ctrl + X). Later during the conversation, I decided to paste what I had selected and I observed that the emoji that I added was coming up just as it was. I was curious to know if WhatsApp uses a rich text editor, but it doesn't. Aparently, the emoji that I was using is a standalone Unicode character. I did a quick printing on Chrome developer console to verify that and Google search to know more about it.


"😝" is the emoji that I used to use very frequently. Infact, back in the day when I was using the initial versions of Facebook chat, I used to press on ":P" after almost every message. After entering the WhatsApp days, I changed my habit as the shortcut no longer works. Now that I discovered the emoji is a Unicode character, I have decided to have some fun with it. I shall write a simple JavaScript code to automatically convert ":P" into "😝".

To begin with, I opened up WhatsApp web, chose a person to message and then opened up the Chrome Developer Console and inserted the following code. Node that I used 'querySelectorAll' with the parameter specified in the code after inspecting the HTML element where we type the message.

var div = document.querySelectorAll('[spellcheck=true]')[0];

div.addEventListener("DOMCharacterDataModified", function (event) {

    div.innerHTML = div.innerText.replaceAll(':P', '😝');

});

After this, as I typed in any message, it would come up reversely. For instance, if I type in "batman", the message area would have "namtab". For some reason, the cursor gets reset to the begginning everytime the value of 'innerHTML' is set. Even so, if I type in "batman P:", it would come up with "namtab 😝", which means that this could work. I just need to make sure that the cursor pointer does not get reset to the beginning.

But, I was not able to find a direct way to set the cursor to the end. WhatsApp doesn't use the standard methods of text inputs, like 'textarea' or 'input' tags. Instead, it uses a 'div' and some extensive JavaScript coding to make it behave like an 'input' or 'textarea'. I need to find a workaround for that.

One of the easiest way is to simply take the last entered text and move it to the end. The 'event' variable will have the information about the data of the current and the previous states. I could use this to my advantage.

var div = document.querySelectorAll('[spellcheck=true]')[0];
div.addEventListener("DOMCharacterDataModified", function (event) {
    div.innerText = (event.prevValue + event.newValue[0]).replaceAll(':P', '😝');
});



This will still have the curser to be present at the beginning. But, then again, it serves my purpose.

Now that there is a working basic method, one could create a Chrome Extension and have the process automated. You can take inspiration from my blogpost 'How to Create your own Ad Blocker Chrome Extension' for the same.

Let me know in the comments below if you have any emoji's that you want to create a shortcut like this. If you have a better solution for this, then please do let me know here as well.

Comments

Popular posts from this blog

A decade of BuddyGo.net

Bought a new domain - chickfort.com

My attempt to create a Quine in MATLAB