How I Built My First Plug-in for Hubgets Chat Service

A while ago, Vladut shared with you his first week of Cool Summer Internship at 4PSA. Now he’s back with the story of his first task.

Vladut, Frontend Intern @4PSA

Vladut, Frontend Intern @4PSA

Things went faster than I expected, because on my second day of internship I was already on a mission. Some call it a task, I call it a mission because the feeling I get here is that everything each of us does, whether as an intern or a senior Clouder, matters just as much.

My mission was to create a new plug-in for Hubgets chat editor that could recognize email addresses and encode them. To be honest, I must confess I panicked at first. Because I didn’t know where to start or how to get on the right path. Still, despite of the tons of questions and the fear that came along, as I realized that my first task would have a great impact on the soon-to-be-released Hubgets app, I had a good feeling about it. It felt important and, why not, I felt important 🙂

Back to my first plug-in. Luckily, Hubgets already had in place a plug-in that recognizes links, so I studied it and got a couple of clues on how mine should work. This type of plug-in relies on two processes: encoding and decoding. During encoding, the plug-in takes the plain text, validates it as an e-mail address and transforms it into a link that can open an email client. So, when the end-user clicks the link, the browser opens the compose tab of the email client. During decoding, the plug-in removes all the anchors applied to the plain text of the e-mail address and prepares the text to be sent to the server. The decoding process occurs before the text gets sent to the server because the server doesn’t know how to handle the HTML tags applied to the plain text during encoding. That’s why the plug-in must send an e-mail address written in plain text, just like the one the end-user typed in the chat editor in the first place.

Looks easy, I know, but it was not that easy! I got a lot of headaches from the regular expression that recognizes the e-mail and the functions returning the text node (the e-mail address) that the plug-in must encode and work with. The trouble was that the regular expression recognized even an empty character placed before @, whereas the functions hated my guts and never allowed me to place the cursor wherever I wanted. But it’s OK, we’re BFF now 😉 I realized how efficient it is for Hubgets users to be able to access e-mail addresses in a chat message with no sweat, so I did my best to make it work well and fast.

I tried various implementation scenarios. And the first lesson I’ve learned during this internship is that you’ve got to do everything in your power to make your end-result very good – to perfect – so that there is no need for your colleagues to do any rework. I pulled it through, in the end, with a little help. My mentors guided me through the process and I received a lot of support from my team leader and my colleague, Adriana. She still has my back regardless of all my silly, yet necessary questions 🙂

Post A Reply