DEV Community

Cover image for WhatsApp for Developers
Kehinde_Daniels
Kehinde_Daniels

Posted on

WhatsApp for Developers

Someone saw me writing code (JavaScript) and literally asked me, do I speak 1s and 0s too. I couldn’t help but laugh😂 (don’t worry, she was a friend, so no offense was taken, and I helped her understand better too☺️). That’s what we were taught in primary school — that the computer’s language is 0s and 1s, right? So, to be a computer programmer, you should know how to ‘speak’ binary code… I bet that’s what you’re thinking too😂.

But unless you have a CS (computer science) degree, which I don’t (I’m self-taught), no YouTube video will teach you JavaScript starting with zeros and ones. In fact, no programmer communicates with the computer in 0s and 1s directly; that’s the job of compilers and interpreters, which convert what we write into machine language. But let me not bore you with all that computer jargon, because I don’t fully understand how that magic works either.

Well, write code in high-level languages, which are easier for humans to understand and use. But hey, it’s not just plain English, least you think you can just start coding and get a job…

Try it

#include <stdio.h>

int main() {
    printf("Hello, World!\n");
    return 0;
}

Enter fullscreen mode Exit fullscreen mode

I bet this looks like an alien language to you, except if you’re a developer. This is an example of a high-level language that will be compiled into binary code for the computer to understand.

Why I’m Writing This Case Study

This meme got me on my knees😂. But that's the truth, yeah? Even Mozart’s pet can feel our pain.

WhatsApp is a platform for communities, and one prevalent community is the tech world. I belong to a few myself

A WhatsApp group home page

I can say for sure that many have received help and rendered help by reviewing and correcting other people’s code snippets. But helping or asking for help can often be very stressful. No one talks about the developer experience… so sad, yeah.

Often, you have to make a screenshot or copy and paste code snippets, which is a hassle because the code will be almost ‘unreadable’

The image shows a comparison between a code snippet displayed on WhatsApp versus a code snippet displayed on a text editor. On the left side, the code snippet is shown in WhatsApp, lacking syntax highlighting and formatting. On the right side, the same code snippet is shown in a text editor with proper syntax highlighting and formatting, making it easier to read and understand. The difference highlights the advantage of using a text editor for viewing and editing code.

Now, whether you’re a dev or not, don’t try to understand the code. I just want you to compare both visuals and judge which is more appealing and looks more comprehensible. The second image, right? It’s not easy to understand a programming language; it’s harder to grasp without its proper syntax format (like the reds and blues you see in the image).

What If?

What if WhatsApp supported markdown features with syntax formatting? That would make the lives of developers less stressful. I know they've got this using a backtick around a word that gives it a mono-spacing styling, but I'm talking about a bit more sophisticated markdown with syntax formatting.

How Would It Work?

Auto-detect:

A smartphone screen displaying a WhatsApp chat conversation with a user named Toyan He/Him. The chat background is dark-themed with green text bubbles. The conversation includes a message asking, “How can I center a div?” The response is “Check this” with a dropdown menu visible showing code options such as Auto detect, HTML, JavaScript, Bash, C#, CSS, and Go. The WhatsApp logo is visible in the top left corner of the image.

Once it brings out the dialogue code block, it can auto-detect as you start typing. Or you could specify the language you want to write in.

No Need to Reinvent the Wheel

They’ve got an attachment menu that allows users to send various types of files in chats. They could extend this functionality by adding an ‘Embed Code Block’ option to the menu.

Two side-by-side screenshots of a smartphone screen displaying a WhatsApp chat. The left screenshot shows the attachment options without a code block feature, including Document, Camera, Gallery, Audio, Payment, Location, Contact, and Poll. The right screenshot shows the same attachment options with an additional “Code Block” feature highlighted in purple. The WhatsApp logo is visible in the top left corner of the image

Addressing Edge Cases

  1. What if I’m not a developer? I recognize not not everyone is a developer, and might have no use for it at all. Well, for non-developers, the platform continues to offer secure and efficient communication. The introduction of developer-specific features does not detract from its usability for everyday conversations. Instead, it expands the versatility of WhatsApp, making it a more comprehensive tool for various types of interactions.

But some users might find it unnecessary, So, I made a developer option in the settings, Users can toggle the dev option.

A GIF showing two sections of a WhatsApp interface. The left section displays WhatsApp chat settings, with options like “Enter is send,” “Media visibility,” “Developer Option,” and others. The “Developer Option” is toggled on. The right section shows the attachment options menu with Document, Camera, Gallery, Audio, Payment, Location, Contact, Poll, and the newly added “Code Block” feature highlighted in purple. The background features a grid pattern

  1. Limited Screen Space

Of course, it is not expected that you build an entire website on WhatsApp, the goal is not to replace our regular code editor, rather it’s to help communication flow better. Good enough we have WhatsApp desktop, so while you’re working in your code editor and you encounter a problem, you can just quickly copy a code snippet to the clipboard and paste it into the Whatsapp code block. Plus I Implemented a scrollable code block and a pinch-to-zoom feature for better readability.

WhatsApp’s desktop application displayed on a laptop screen. The chat shows a conversation between two users discussing a JavaScript code snippet. The code snippet is shown with syntax highlighting within the WhatsApp chat window.

  1. Typing on mobile devices can be cumbersome:

It's integrated with desktop or web versions plus enhanced support for code editing, like syntax highlighting, and very importantly, autocomplete.

So, in Conclusion
Just imagine it’s one line of code causing an error for a junior dev; you don’t want to open your editor and start typing all over. You could copy, paste, and edit right there without leaving WhatsApp. This is the goal!

I dropped a design case study on Behance for this, kindly check here , to see visuals.

But I’m curious anyway

If WhatsApp were to implement these features, would developers really use it? Are there any other edge cases to consider before giving it a go? Let me know!

Top comments (2)

Collapse
 
fyodorio profile image
Fyodor

FWIW Telegram gives much better options for communities and communication, including markdown-like message formatting (and code snippets in markdown-habitual way)

Collapse
 
kehindedaniels profile image
Kehinde_Daniels

Wow, really? I know Telegram has lots of features. It'd be pretty nice for WhatsApp to follow suit!