P2P Zero-Knowledge-Proof based Opensource Social Network - HexHoot

I find that the domain name that I purchased on an impulse, hexhoot.com, would be the ideal name for the p2p social network; both of which I described in some of my previous posts. I have been working on it during my pasttime for about a month now, and I decided to make it opensource. You can have a look at the project using the following link: https://github.com/zenineasa/hexhoot I have attempted to follow all the best development practices as much as I can. I have written tests, and, enabled continuous integration feature in GitHub to run all the tests, lint and copyright checks for the code changes that is being made. I also have captured all the foreseeable tasks in a Trello dashboard. This helps me keep track of all the bugs that I have detected and all the important tasks that need to be completed. There are quite a lot of tasks left to make this bug-free and feature-rich. I hope I will find enough time and motivation to do the same in the coming days.

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

Regarding a Covid-19 related project that I worked on a few months ago

Went into the University for the first time

Preparing my journey to Switzerland