DEV Community: Pratik Chaudhari

The choice of Tech Stack is overrated!

Pratik Chaudhari — Sat, 15 Mar 2025 04:07:25 +0000

I think, as developers, we focus too much on the Tech Stack.

Your tech stack is just raw materials.

If the roof of your house starts leaking after a light drizzle, does it matter that it was built using the most expensive cement out there?

Similarly, if a company fails to monetise its product (and goes under as a result) that it built using the latest, greatest, and the hottest programming language / web framework / database that's out there, and goes under as a result, does anything actually matter, let alone the choice of their tech stack?

Shortly after its collapse, people will forget that the company ever existed, and no one will care what it did and how it did it.

On the contrary, if the same company succeeds, and its founders & employees become millionaires overnight, its tech stack will be treated as the holy grail of success!

Why the difference?

Why should the choice of the Tech stack matter in the latter case, if it doesn't matter in the former?

Does the success of a company using a specific technology really guarantee the success of others who follow in its footsteps?

Over the past decade or so, we have seen dozens of companies fail miserably.

They tried to copy the successful incumbents in the markets.

They used the same technology under the hood as their successful counterparts. Some of them even went so far as to poach the developers from their rivals!

These developers brought in their "tech expertise" from their previous employer, and yet, their new employer's product failed to gain traction in the market, ultimately leading to its inevitable death!

What does this mean?

Does it mean that the developers became "less capable" when their employer changed? Does it mean that the technology lost its "magic charm" as soon as it was removed from premises of the successful company?

Is the technology like Rapunzel's hair? Does it lose its magical properties as soon as it's cut?

No, it's not.

In fact, I would go so far as to say that it's a "superstition" to believe that a specific technology could guarantee success.

It's the same thing as believing that your marriage will succeed just because you married on a specific date or that crossing paths with a black cat will bring bad luck!

We fail to acknowledge the fact that the Tech Stack is merely a means to an end and not the end in itself!

There are many other aspects to a success story that are simply not known to the public at large for one reason or another.

As a result, people simply attribute the success to aspects that they can see, and it's most primarily the tech stack!

The Tech stack is just a small cog in the wheel.

Frankly, it's nothing more than an investment.

What really matters is the return on investment! And if that's zero, no one gives a shit!

Implementing Your Own Event Loop From Scratch

Pratik Chaudhari — Sun, 21 May 2023 15:09:47 +0000

Hello Folks,

I've always wondered how an Event Loop works.

"How does it accept a task? How does it delegate that task?"

"How does it continue accepting new tasks without pausing the execution of previously accepted tasks?"

"How does it know that a previous task has completed its execution and the result should be returned to the caller?"

Given that the Event Loop sits at the core of languages such as JavaScript and non-blocking client server Java frameworks such as Netty that are widely used in our day-to-day development, I felt that it's essential to gain a first-hand understanding of its inner workings!

And, hence, I decided to implement an Event Loop from scratch in Java!

Here's how I went ahead with it...

I started with one of the core building blocks of an Event Loop: the Event:

By definition, an Event in a software system is an entity that denotes some sort of activity or a change in the system.

This change might be introduced due a user action or it might be even triggered due a system activity that runs in the background (such as a CRON job).

Events that are produced by a system might be consumed (or processed) by the same system internally or relayed to an external system for further processing.

In either case, the event must contain sufficient information that enables its consumers to process it independently!

Hence, for the sake our implementation, we'll assume that an event holds the following fields:

public final class Event {
    public final String key;
    public final String data;
    public final boolean asynchronous;

    public Event(String key, String data, boolean asynchronous) {
        this.key = key;
        this.data = data;
        this.asynchronous = asynchronous;
    }
}

Looking at the above class, one might wonder what's the significance of the asynchronous field?

Usually, there's a single thread or a process (depending on implementation) backing an Event Loop, i.e., the code of the Event Loop is executed by this single thread or process.

For the sake of simplicity and to avoid unnecessary repetition, we'll assume that a thread is roughly equivalent to a process and henceforth shall use the term "thread" alone.

We can call this thread as the main thread.

If this main thread were to accept & execute a task by itself, it would have to block before accepting a new task, thus resulting in reduced throughput.

Hence, instead of executing the task by itself, the main thread "delegates" the task to a worker thread.

If we assume that an event is generated for each such task, we can say that the event is processed asynchronously.

However, there might be certain tasks that are extremely "lightweight", meaning executing these tasks won't consume much time, and hence, these could be executed synchronously by the main thread.

To represent such tasks, we need a differentiator in their events to treat them differently from the other tasks.

The asynchronous field in the Event class serves this purpose!

Now that we are clear with that, let's move ahead and implement the next building block (and probably the most important one), i.e., the EventLoop:

public class EventLoop {
    ...
}

Let's fill in all the details in the above class line by line...

As we know, an event loop doesn't execute all the tasks itself.

Instead, it delegates these to a worker thread that runs in the background.

But until that delegation happens the Event Loop needs to store these tasks somewhere.

And hence, it needs some sort of data structure to hold this data.

Let's declare a field called events that plays the role of an event store, like so:

public class EventLoop {
    private final Deque<Event> events;
}

For the sake of simplicity, we are assuming that the incoming tasks are prioritised for execution in a "first come, first serve" manner, and hence, the events field in the above class is of type Deque, which is a type of Queue.

Next, the Event Loop needs to know what code to execute in response to an event generated for a given task, i.e., it needs another data structure to map an event to its respective handler!

And the same can be done as shown in the following code snippet:

public class EventLoop {
    private final Deque<Event> events;
    private final Map<String, Function<String, String>> handlers;
}

The handlers field in the above code snippet is defined as a Map of String & Function, wherein the String serves as a unique identifier for an event and the Function holds the code that will serve as a handler (or a processor) for the said event.

Now that we know where to store the events and how to map them to their handlers, are we done here?

Certainly not!

Once the event handlers complete their execution, the results that they generate must be stored somewhere.

But why do we need separate storage for the results?

Why can't the results be sent directly to the callers who had submitted the tasks?

Remember that a majority of the tasks submitted to the Event Loop are executed asynchronously by worker threads that run in the background.

The sole job of these worker threads is to complete the tasks and send a signal to the main thread stating the same.

Now, what would be an effective way of signalling to the main thread that a given task is complete without making any sort of blocking call?

The answer is simple: Use another queue to store the results.

The main thread would be then periodically poll this queue to check for new results.

Let's do that by adding a new field called ‌processedEvents to our EventLoop class as follows:

public class EventLoop {
    private final Deque<Event> events;

    private final Map<String, Function<String, String>> handlers;

    private final Deque<EventResult> processedEvents;
}

Now, let's add a default constructor to the above class to initialise all the fields mentioned above:

public class EventLoop {
    private final Deque<Event> events;
    private final Map<String, Function<String, String>> handlers;
    private final Deque<EventResult> processedEvents;

    EventLoop() {
        events = new ArrayDeque<>();
        handlers = new HashMap<>();
        processedEvents = new ArrayDeque<>();
    }
}

So far so good, now that we have all the data structures in place, let's think about wiring the events with their respective handlers.

Let's add a method to the above class that does this:

public class EventLoop {
    private final Deque<Event> events;
    private final Map<String, Function<String, String>> handlers;
    private final Deque<EventResult> processedEvents;

    EventLoop() {
        events = new ArrayDeque<>();
        handlers = new HashMap<>();
        processedEvents = new ArrayDeque<>();
    }

    public EventLoop on(String key, Function<String, String> handler) {
        handlers.put(key, handler);
        return this;
    }
}

The on() method in the above code populates the handlers fields with an identifier for a given event and the code that should be executed in response to that event.

Next, we need schedule the event for execution, and that can be done by adding another method dispatch() as shown below:

public class EventLoop {
    private final Deque<Event> events;
    private final Map<String, Function<String, String>> handlers;
    private final Deque<EventResult> processedEvents;

    EventLoop() {
        events = new ArrayDeque<>();
        handlers = new HashMap<>();
        processedEvents = new ArrayDeque<>();
    }

    public EventLoop on(String key, Function<String, String> handler) {
        handlers.put(key, handler);
        return this;
    }

    public void dispatch(Event event) {
        events.add(event);
    }
}

Okay, so now we have a neat looking class with all the essential fields and the code to populate those fields.

Will this be enough?

No, not really, we still need some code that will take each event and call its event handler to execute the task for which that event was generated.

So, let's create a method called run() to do that:

public void run() {

    Event event = events.poll();

    if (event != null) {
        System.out.printf("%nReceived Event: %s%n", event.key);

        if (handlers.containsKey(event.key)) {

            var startTime = Instant.now();

            if (event.asynchronous) {
                processAsynchronously(event);
            } else {
                    processSynchronously(event);
            }

            var endTime = Instant.now();

            System.out.printf("%nEvent Loop was blocked for %s ms due to this operation %n%n",Duration.between(startTime, endTime).toMillis());

        } else {
                System.out.printf("No handler found for %s%n%n", event.key);
        }
    }

    var processedEvent = processedEvents.poll();

    if (processedEvent != null) {
        produceOutputFor(processedEvent);
    }
}

But what is this run() method doing exactly?

Let's dissect it line by line:

The first thing that it needs to do is to check if there are any events that haven't been "processed" yet.
And to do that, it uses the pop() method of the events field. This method removes the first event in the queue and returns it.
It's possible that the pop() method might return nothing (null) if there are no unprocessed events, hence the run() method needs to ensure that it has retrieved a valid event before processing it further.
If the retrieved event is valid, run() prints a message stating the same (useful for debugging purposes, of course).
Next, it tries to find the event handler for the retrieved event in the handlers field.
Once the event handler is found, run() needs to decide how to execute it: synchronously or asynchronously?
To make this decision, it uses the asynchronous field of the event and invokes:
- processAsynchronously() if asynchronous is set to true
- processSynchronously() if asynchronous is set to false
But what do these methods do? Let's have a look at their code:

private void processAsynchronously(Event event) {
    new Thread(() -> processedEvents.add(new EventResult(event.key, handlers.get(event.key).apply(event.data)))).start();
}

private void processSynchronously(Event event) {
    produceOutputFor(new EventResult(event.key, handlers.get(event.key).apply(event.data)));
}

The processAsynchronously() method creates a new worker thread using the Thread class of Java and passes a lambda function (denoted by () ->) to it that acts a runnable, i.e., code that can be executed concurrently.
And what does the lambda function do?
Well, it creates a new instance of the EventResult class (which represents a "processed event") using the event's unique identifier, i.e., event.key and the value produced by the event handler mapped against the event and adds it to the list of processedEvents.
The processAsynchronously() method then invokes the start() method of this newly created Thread to send a signal to the Java Virtual Machine that this thread needs to be executed without blocking the calling thread (in this case the main thread which is currently executing the code of the processAsynchronously() method).
Here's a simplified version of the above code for better understanding:

new Thread(() -> {

    var eventHandler = handlers.get(event.key);

    var result = eventHandler.apply(event.data);

    var processedEvent = new EventResult(event.key, result);

    processedEvents.add(processedEvent);

}).start();

In case you haven't noticed, the event handler is actually invoked using its apply() method, and the event's data is passed to it as an argument.
But since this invocation happens inside the lambda that's passed to the new Thread instance, the main thread isn't blocked by it, and hence we can say that the event is processed "asynchronously!"
On the other hand, the processSynchronously() simply invokes another method, produceOutputFor() with a new instance of the EventResult class.
And the produceOutputFor() simply prints the result of the processed event as illustrated below:

private void produceOutputFor(EventResult eventResult) {
    System.out.printf("%nOutput for Event %s : %s%n", eventResult.key, eventResult.result);
}

However, unlike the processAsynchronously() method, since the processSynchronously() method invokes the apply() method of the event handler directly in the main thread, the code contained in the event handler and the code inside the produceOutputFor() is executed by the main thread only, thereby resulting in the blocking of the main thread.
Hence, in this case, we can say that event is executed "synchronously!"

Notice that we are capturing the startTime and endTime in the run() method above and then computing the difference between and printing it as follows:

System.out.printf("%nEvent Loop was blocked for %s ms due to this operation %n%n", Duration.between(startTime,endTime).toMillis());

We'll understand the importance of the above code once we start executing our EventLoop. Until then, let's move ahead...

This is what the final EventLoop class looks like with all the methods described so far:

package event.loop.demo;

import java.time.Duration;
import java.time.Instant;
import java.util.ArrayDeque;
import java.util.HashMap;
import java.util.Map;
import java.util.Deque;
import java.util.function.Function;

public class EventLoop {
    private final Deque<Event> events;
    private final Map<String, Function<String, String>> handlers;
    private final Deque<EventResult> processedEvents;

    EventLoop() {
        events = new ArrayDeque<>();
        handlers = new HashMap<>();
        processedEvents = new ArrayDeque<>();
    }

    public EventLoop on(String key, Function<String, String> handler) {
        handlers.put(key, handler);
        return this;
    }

    public void dispatch(Event event) {
        events.add(event);
    }

    public void run() {

        Event event = events.poll();

        if (event != null) {
            System.out.printf("%nReceived Event: %s%n", event.key);

            if (handlers.containsKey(event.key)) {
                var startTime = Instant.now();

                if (event.asynchronous) {
                    processAsynchronously(event);
                } else {
                    processSynchronously(event);
                }

                var endTime = Instant.now();

                System.out.printf("%nEvent Loop was blocked for %s ms due to this operation %n%n",
                        Duration.between(startTime, endTime).toMillis());
            } else {
                System.out.printf("No handler found for %s%n%n", event.key);
            }
        }

        var processedEvent = processedEvents.poll();

        if (processedEvent != null) {
            produceOutputFor(processedEvent);
        }
    }

    private void processAsynchronously(Event event) {
        new Thread(() -> processedEvents.add(new EventResult(event.key, handlers.get(event.key).apply(event.data)))).start();
    }

    private void processSynchronously(Event event) {
        produceOutputFor(new EventResult(event.key, handlers.get(event.key).apply(event.data)));
    }

    private void produceOutputFor(EventResult eventResult) {
        System.out.printf("%nOutput for Event %s : %s%n", eventResult.key, eventResult.result);
    }
}

Now that all the basic building blocks of our Event Loop are ready, let's create a small App to put it to some use:

package event.loop.demo;

import utils.Utils;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

public class App {
    public static void main(String[] args) throws IOException {
        EventLoop eventLoop = new EventLoop();

        var utils = new Utils();

        try (var reader = new BufferedReader(new InputStreamReader(System.in))) {

            var eventId = 0;

            outer:
            do {
                System.out.println("What kind of task would you like to submit to the Event Loop?");
                System.out.println(" 1. Wish me Hello");
                System.out.println(" 2. Print the contents of a file named hello.txt");
                System.out.println(" 3. Retrieve the latest news from New York Times & print it");
                System.out.println(" 4. Print output of previously submitted asynchronous task");
                System.out.println(" 5. Exit!");
                System.out.print(" > ");

                var usersChoice = reader.readLine();
                var operationType = "1";

                if (utils.userHasNotChosenToExit(usersChoice) && !usersChoice.equals("4")) {

                    System.out.println("How would like to execute this operation?");
                    System.out.println(
                            " 1. Synchronously (this would block the Event Loop until the operation completes)");
                    System.out.println(" 2. Asynchronously (this won't block Event Loop in any way)");
                    System.out.print(" > ");

                    operationType = reader.readLine();
                }

                var uniqueEventKey = "";

                switch (usersChoice) {
                    case "1":
                        uniqueEventKey = utils.generateUniqueEventKey("hello", eventId++);
                        eventLoop
                                .on(uniqueEventKey, data -> String.format("Hello! %s", data))
                                .dispatch(new Event(uniqueEventKey, "How are you doing today?",
                                        utils.isAsynchronous(operationType)));
                        break;
                    case "2":
                        uniqueEventKey = utils.generateUniqueEventKey("read-file", eventId++);
                        eventLoop
                                .on(uniqueEventKey, utils::readFile)
                                .dispatch(
                                        new Event(uniqueEventKey,
                                                "hello.txt",
                                                utils.isAsynchronous(operationType)));
                        break;
                    case "3":
                        uniqueEventKey = utils.generateUniqueEventKey("fetch-latest-news", eventId++);
                        eventLoop
                                .on(uniqueEventKey, utils::fetchLatestNewsItemFromNewYorkTimes)
                                .dispatch(new Event(uniqueEventKey,
                                        System.getenv("API_KEY"),
                                        utils.isAsynchronous(operationType)));
                        break;
                    case "4": break;
                    case "5":
                    default:
                        break outer;
                }

                eventLoop.run();

            } while (true);

        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

Let's deep dive into the above code to understand what's happening there...

The first thing that we are doing is creating a new instance of our EventLoop class:

EventLoop eventLoop = new EventLoop();

Next, we are creating a new instance of a class called Utils that contains many utility functions as depicted below:

package utils;

import com.fasterxml.jackson.databind.ObjectMapper;
import event.loop.demo.NewsItems;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.Random;
import java.util.Scanner;

public class Utils {

    Random random = new Random();

    public String readFile(String fileName) {
        var lines = new StringBuilder();

        var fileURL = getClass().getClassLoader().getResource(fileName);

        if (fileURL != null) {
            try (Scanner file = new Scanner(new File(fileURL.getFile()))) {

                while (file.hasNextLine()) {
                    lines.append(file.nextLine()).append(" ");
                }

            } catch (FileNotFoundException e) {
                e.printStackTrace();
            }
        }
        return lines.toString();
    }

    public String fetchLatestNewsItemFromNewYorkTimes(String apiKey) {
        var latestNews = new StringBuilder();
        var httpClient = new OkHttpClient();

        var newsItemIndex = random.nextInt(11);

        var request = new Request.Builder()
                .url(String.format("https://api.nytimes.com/svc/topstories/v2/technology.json?api-key=%s", apiKey))
                .build();

        try {
            var response = httpClient.newCall(request).execute();

            NewsItems newsItems = new ObjectMapper().readValue(response.body().byteStream(), NewsItems.class);

            if (newsItemsAreAvailable(newsItems)) {
                latestNews.append(
                        String.format("%s - %s", newsItems.results.get(newsItemIndex).title, newsItems.results.get(newsItemIndex).byLine));
            }

        } catch (IOException e) {
            latestNews.append("Failed to get latest news");
            e.printStackTrace();
        }

        return latestNews.toString();
    }

    public String generateUniqueEventKey(String humanReadableEventKey, int eventCount) {
        return String.format("%s-%s", humanReadableEventKey, eventCount);
    }

    public boolean newsItemsAreAvailable(NewsItems newsItems) {
        return (newsItems != null && newsItems.results != null && !newsItems.results.isEmpty());
    }

    public boolean isAsynchronous(String operationType) {
        return operationType.equals("2");
    }
    public boolean userHasNotChosenToExit(String userChoice) {
        return !userChoice.equals("5");
    }
}

Let's have a look at each method in the Utils class to gain a better understanding of the role that it plays in the grand scheme of things:

readFile(fileName) - This method will try to read a file whose name is specified as a parameter. For simplicity, we have assumed that the file will be located in the resources folder of this Java project.
fetchLatestNewsItemFromNewYorkTimes() - This method retrieves the latest news from The New York Times website using their public API.
generateUniqueEventKey(humanReadableEventKey,eventCount) - This method creates a unique key for every event. It does this by using the humanReadableEventKey and the eventCount parameters that are passed to it.
newsItemsAreAvailable(newsItems) - This method ensures that the data returned by the The New York Times API is non-empty and non-null (we don't want any NullPointerException or IndexOutOfBoundsException to crash our code).
isAsynchronous(operationType) - This methods determines whether user wants the EventLoop to execute a given operation synchronously or asynchronously (we'll get more clarity on this as we proceed with the explanation of the App class).
userHasNotChosenToExit(userChoice) - It determines whether the end-user has chosen to exit the program or to continue further.

Coming back to the main() method in the App class, we are seeking user's input via the command line against the following choices:

 1. Wish me Hello
 2. Print the contents of a file named hello.txt
 3. Retrieve the latest news from New York Times & print it
 4. Print output of previously submitted asynchronous task
 5. Exit!

User can choose to execute these tasks (except the last two) synchronously or asynchronously, and the methods of the Utils class described above help with the same!

When user submits a task and specifies its execution mode (synchronous or asynchronous), we submit it to the EventLoop using the following code:

eventLoop
 .on(uniqueEventKey, eventHandlerForTheTask)
 .dispatch(new Event(uniqueEventKey, eventData, utils.isAsynchronous(operationType)));

The eventHandlerForTheTask in the above code snippet is a placeholder that for the actual event handler that we create based on the type of task chosen by the user, and eventData acts as placeholder for the actual data required to perform the task.

For example, if the user chose the following task...

Retrieve the latest news from New York Times & print it

...then the code for submitting it to the event loop would look something like below:

 eventLoop
    .on(uniqueEventKey,  
       utils::fetchLatestNewsItemFromNewYorkTimes)
    .dispatch(new Event(uniqueEventKey, System.getenv("API_KEY"),  
       utils.isAsynchronous(operationType)));

In the above case, the fetchLatestNewsItemFromNewYorkTimes() method of the Utils class serves as an event handler and the API_KEY is the data that's required for retrieving the latest new from The New York Times API.

The API_KEY can be obtained from Developer Portal of the New York Times

Once the event is dispatched, we invoke the run() method of the EventLoop:

eventLoop.run();

Invoking the run() method starts a "new iteration" of the EventLoop.

Alright!

Enough with all the theory, it's time to see our EventLoop in action:

To start the execution, let's fire up the Terminal and execute the following command:

./gradlew run --console=plain

Image Credit: Pratik Chaudhari

Next, let's select the first task ("Wish me Hello"):

Image Credit: Pratik Chaudhari

Now, let's tell our EventLoop to execute it synchronously:

Image Credit: Pratik Chaudhari

The results:

Image Credit: Pratik Chaudhari

As we can see from the above screenshot, executing the first task synchronously blocked the EventLoop for about 0 ms.
Also, notice that a unique id has been assigned to the event generated for this task: hello-0

Next, let's choose the second task ("Print the contents of a file named hello.txt"):

Image Credit: Pratik Chaudhari

Let's tell our EventLoop to execute it synchronously:

Image Credit: Pratik Chaudhari

The results:

Image Credit: Pratik Chaudhari

As we can see from the above screenshot, executing the second task synchronously blocked the EventLoop for about 9 ms or 0.009 seconds, and the unique id that's assigned to its event is read-file-1.

Next, let's choose the third task ("Retrieve the latest news from New York Times & print it"):

Image Credit: Pratik Chaudhari

As with the other two tasks, we again instruct our EventLoop to execute it synchronously:

Image Credit: Pratik Chaudhari

The results:

Image Credit: Pratik Chaudhari

As we can see from the above screenshot, executing the event with id fetch-latest-news-2 synchronously blocked the EventLoop for about 3835 ms or 3.8 seconds.

So, it seems printing a simple message on the screen takes the smallest amount of time whereas fetching data from the Internet takes the longest!

Now, let's make one small change to the tasks that took more than 0 ms: to execute: let's switch the execution mode of these tasks to asynchronous.

Let's do this for the second task: "Print the contents of a file named hello.txt"

Image Credit: Pratik Chaudhari

As we can see in the above screenshot, the EventLoop was blocked for 0 ms this time! Also, notice that this time the event id has changed to read-file-3.

But wait, where's the output of the task?

Here's the catch: since the main thread delegated the task to a worker thread, it won't have access to the output until the worker thread finishes its execution.

So, how will the main thread come to know that the worker thread has finished the execution of the task?

It will have to check the list of processedEvents and look for the results stored against the unique id of the event generated for this task: read-file-3

But in order to do this, the EventLoop will have to execute another iteration.

But how will it execute another iteration if it's waiting for the user to give it another task?

Well, it won't!

We'll have to give it a special task ("Print output of previously submitted asynchronous task") so that it is forced to execute another iteration and, in the process, picks up the result of the previous task.

This is what it looks like:

Image Credit: Pratik Chaudhari

That's it, folks!

I hope you found this exercise as useful as I did.

In case anyone wants to fiddle around with the code, feel free to fork the following repo:

https://github.com/pratikgchaudhari/event-loop-demo

10 Hilarious Cartoons That Depict Real-Life Problems of Programmers

Pratik Chaudhari — Sat, 06 Nov 2021 10:28:15 +0000

And how they deal with them...

1. Estimations:

Estimating the amount of time required to complete your own work is nothing short of a herculean feat.

But the fun begins when you add more people to the equation.

Then estimating becomes a sport of throwing darts (and that too in the dark):

Image Credit: workchronicles.com

2. Fixing Bugs:

Humans prefer immediate gratification, which means we choose to indulge (or invest) in activities that could provide us with immediate rewards while conveniently overlooking the (heavy) price we may have to pay in the future.

But when we do this in our workplaces, we might not be ones paying the price in the end:

Image Credit: workchronicles.com

3. Dealing With Ambitious Sales Rep:

Sales representatives have targets to meet. We understand that.

But when some overzealous sales rep promises the moon to the clients, programmers are the ones who bear the burnt:

Image Credit: workchronicles.com

4. Socializing:

"Blessed are the Geek, for they shall reign over the world."

The Tech industry has had a tremendous impact on our lives: people can look up anything on Google and hook up with anyone on the likes of Tinder and Bumble.

As people who built the tech industry, we are its Alpha & Omega.

And yet, when it comes to in-person interactions and shaping conversations, we are at a loss for words:

Image Credit: workchronicles.com

5. Finding a new Job:

There are literally hundreds of websites out there that promise to join a potential employee and an employer into holy matrimony 😂

But none of them can help you escape recruiters who sound more like sales reps. Deciphering the actual meaning behind their words is somewhat of an arcane art:

Image Credit: workchronicles.com

6. Feature Requests:

"The 'stories' feature is so popular on the XYZ app. We should introduce it too."

"What if our users could find a date, book a cab, and rent a villa in Europe all at the same time?"

And so goes the discussion about the new features that we could provide to our users.

We understand that there's a need to experiment and evolve, but adding a feature just of the sake of adding it is not cool:

Image Credit: workchronicles.com

7. Status Updates:

The daily stand-up meeting in Agile is an excellent way for the team to discuss the overall progress on their work and any impediments that might be blocking them.

But once we are done with that, we are literally done with the status updates.

There was no substantial progress on that "critical" feature five minutes ago and there won't be any five minutes from now:

Image Credit: workchronicles.com

8. Showing off Our Work:

We are geeks. Many of us are introverts. Not all of us like announcing our work out loud to the entire world.

But that doesn't mean we aren't working hard enough or that we aren't worthy of a well-deserved promotion:

Image Credit: workchronicles.com

9. Getting Our Priorities Right:

Product Managers, please understand this:

If all the features are on priority, then none of them are on priority:

Image Credit: workchronicles.com

10. Meeting (Unrealistic) Expectations:

Need I say more:

Image Credit: workchronicles.com

(Okay, I admit this one's not specific to programmers, but it nevertheless depicts a chilling reality)

I hope you folks enjoyed reading this blog!

Feel free to leave your comments (if any) in the comments section below 👇

Replace 'em all With ES2021

Pratik Chaudhari — Mon, 23 Nov 2020 03:04:03 +0000

The newly introduced replaceAll() method removes the need for using a regex

If you have ever worked with strings in JavaScript, you know what a pain it is to replace all the matching substrings in a string!

Okay, maybe I'm being a little dramatic here, but it sure as hell wasn't something you could do easily as a novice.

For example, when I first started working with JavaScript (I was fairly new to programming back then) and wanted to replace all the occurrences of a word in a string, I just couldn't figure out how to do it by reading the replace() method's documentation.

I wondered why I needed to use something so complicated as a regex to do something so simple as replacing all occurrences of a word in a string (I wasn't a big fan of regex back then, and to be frank, I still am not).

Anyway, come ES2021, you won't need to use a regex for the said operation!

That's because ES2021 has introduced a new (and a long-awaited) utility method for replacing all occurrences of a substring in a given string: replaceAll().

Let me walk you guys through an example to give you a better idea of what I'm talking about:

let aString = "I love Java. Java is very very easy to learn. Java's a very popular programming language"

let newString = aString.replaceAll("Java","JavaScript")

console.log(newString)

//I love JavaScript! JavaScript is very very easy to learn. JavaScript's a very popular programming language!

Here's a gif depicting the execution of the above code in Chrome's console (Yeah, Chrome has already shipped this feature, and so have the other browsers):

A gif depicting the use of the 'replaceAll()' method in Chrome's console. Image Credits: Pratik Chaudhari

The replaceAll() method keeps the original string intact and returns a new string.

Make note here that replaceAll() makes a case-sensitive comparison while searching for the target substring.

If I were to replace the uppercase 'J' of 'Java' with a lowercase 'j', replaceAll() won't replace it, and the new string will resemble the old one.

Here's another gif to show you what I mean:

A gif depicting the behavior of 'replaceAll()' when we use a lowercase 'j.' Image Credits: Pratik Chaudhari

Like its cousin replace(), replaceAll() also allows you to specify a regex in place of the target substring (i.e., the substring to be replaced), but I think doing so would defeat the entire purpose of using replaceAll().

If you'd like to know more about replaceAll(), feel free to go through its MDN documentation.

That's all for this article, folks!

Hope you enjoyed reading this piece and learned something new.

Getting Started With the Github CLI

Pratik Chaudhari — Sun, 08 Nov 2020 10:38:52 +0000

GitHub, the popular Git Provider has created a command-line tool that allows its users to access GitHub without leaving their terminals!

In this post, I'll walk you guys through the process of setting up the GitHub CLI on your local machine.

So, let's start!

Step 1 - Install the GitHub CLI

Before you can start using the GitHub CLI, you must install it on your local machine.

Installing on Mac

If you're using macOS, you can install it using Homebrew, like so:

brew install gh

Here's a gif to give you a better idea:

Installing the GitHub CLI. Image Credit: Pratik Chaudhari

Installing on Linux

For Linux users, too, Homebrew should work just fine.

Although, if you're using a Linux distro that isn't officially supported by GitHub, you'll have to rely on the community-maintained versions of the CLI.

Instructions for installing the CLI on such distros can be found here.

Installing on Windows

If you're a Windows user, you can use Chocolatey to install the CLI, like so:

choco install gh

Once installed, you can access it using the gh command, like so:

gh

Here's what the above command will output:

Output after firing the 'gh' command. Image Credit: Pratik Chaudhari.

Now that the CLI has been installed and is accessible via the Terminal, let's do something interesting using the CLI, like viewing a GitHub repository:

gh repo view pratikgchaudhari/vue-3-projects

The above command is supposed to display all the info of the vue-3-projects repo created by its owner pratikgchaudhari, i.e., me.

But here's what we get instead:

Output of 'gh repo view pratikgchaudhari/vue-3-projects' command. Image Credit: Pratik Chaudhari.

The GitHub CLI requires you to authenticate yourself with your GitHub credentials before doing anything else with it!

And that brings us to our next step!

Step 2 - Authentication

To authenticate yourself, punch in the following command:

gh auth login

Here's what you'll see:

Output of 'gh auth login' command. Image Credit: Pratik Chaudhari.

The GitHub CLI is asking you whether you want to sign in using your account on GitHub.com, which is free for all users, or whether you want to use the GitHub Enterprise account (most probably owned by your employer or maybe just you).

Since I don't have an enterprise account, I'll proceed with my GitHub account.

Here's what I see after selecting the said option:

Output after selecting the 'GitHub.com' option. Image Credit: Pratik Chaudhari.

Since I don't have an authentication token (yet), I'll choose the Login with a web browser option.

Once I choose the said option, the CLI provides me with a one-time code:

Output after selecting the 'Log in with a web browser' option. Image Credit: Pratik Chaudhari.

I copy the one-time code provided by the CLI and press the Enter/Return key.

As expected, a browser window opens where I need to paste the one-time code that I just copied:

The browser window where the 'one-time' code must be pasted. Image Credit: Pratik Chaudhari.

After I click the Continue button, I see the following screen:

The OAuth authorization interface for 'GitHub CLI' in browser. Image Credit: Pratik Chaudhari.

Basically, I'm being prompted to authorize the GitHub CLI to access various resources from my GitHub account.

So, I'll grant it the access that it requires by clicking on the Authorize github button. Here's what I see next:

The OAuth authorization success interface in browser. Image Credit: Pratik Chaudhari.

The above screen tells me that the authentication process is complete!

When I switch to my Terminal and press the Enter/Return key, the CLI asks me to choose between the following two protocols that it'll use while communicating with the GitHub server:

HTTPS
SSH

The 'Terminal' prompting user to select a communication protocol. Image Credit: Pratik Chaudhari.

I'll choose the SSH protocol here, but there's no harm in selecting the HTTPS protocol either:

Output after selecting the SSH protocol. Image Credit: Pratik Chaudhari.

And it's done!

Let's execute the following command again and see what happens:

gh repo view pratikgchaudhari/vue-3-projects

Output of 'gh repo view pratikgchaudhari/vue-3-projects' command. Image Credit: Pratik Chaudhari.

As you can see in the above screenshot, the title of the repository along with the contents of its README are displayed on the Terminal.

The GitHub CLI provides many more commands which I'll be covering in detail in a separate article in the future.

For now, this is it!

Meet Deno: The New JavaScript/TypeScript Runtime

Pratik Chaudhari — Sun, 01 Nov 2020 18:18:39 +0000

Photo by Frank P. via Pixabay

Deno 1.0 was released on May 13, 2020

Deno is Ryan Dahl's (yeah, you guessed it right, the guy who created Node.js) latest venture.

But it isn't just another JavaScript Engine. It also supports TypeScript - JavaScript's strictly typed cousin - out of the box.

Installing Deno

On macOS, you can install Deno using Homebrew - the open-source software package manager for macOS:

brew install deno

Here's a GIF to give you a better idea:

The output of the "brew install deno" command. Image Credit: Pratik Chaudhari (Author)

On Windows, Chocolately serves as an alternative to macOS's Homebrew:

choco install deno

On Linux, good ol' curl will do the job:

curl -fsSL https://deno.land/x/install/install.sh | sh

Once Deno is installed, one can run the following command to see all the command-line options that are available:

deno --help

The output of the above command will look something like below:

The output of executing the "deno" command on Terminal. Image Credit: Pratik Chaudhari (Author)

Hello, Deno!

You can run Deno in REPL (Read-Eval-Print Loop) mode by simply executing the following command in the Terminal/Powershell/Shell:

deno

Once the REPL is active, type the following code on the prompt and press the Enter/Return key:

console.log('Hello, Deno!')

Here's what you'll see:

The output of console.log('Hello, Deno!'). Image Credit: Pratik Chaudhari (Author)

This is all good and fine. But it's just like all other "Hello World!" programs out there!

Let's have some real fun.

Let's see if we can build a web server in Deno!

Using third-party/external packages

In Node.js, if you want to (or rather, need to) use a third-party library in your code, you first need to install it using npm, like so:

npm i express

And then you import it into your code using this:

require('express')

But Deno allows you to import such packages directly. You just need to specify the package's URL in your code. Let's see how:

Fire up the nano editor and add the following code to it:

import { serve } from "https://deno.land/std@0.63.0/http/server.ts";

const s = serve({ port: 8000 });

console.log("http://localhost:8000/");

for await (const req of s) {
    req.respond({ body: "Hello World\n" });
}

Save this in a file named server.ts.

The code to create a web server in the nano editor. Image Credit: Pratik Chaudhari (Author)

Exit the nano editor or open a new terminal and execute the following command:

deno run server.ts

With the above command, the server should start listening over port 8000.

But what we get instead is this:

Error after running the "deno run server.ts" command. Image Credit: Pratik Chaudhari.

What does the following error in the above screenshot mean?

error: Uncaught PermissionDenied: network access to "0.0.0.0:8000", run again with the --allow-net flag

You see, you need to explicitly grant Deno the permission to access the network. This is one of the many security features that are built into Deno (that's why they call it a secure runtime).

You can allow Deno to access the network by specifying the command line flag --allow-net

deno run --allow-net server.ts

And voila! The server starts listening for requests on port 8000.

The web server running on port 8000. Image Credit: Pratik Chaudhari (Author)

If you look at the following line of code, you'll notice that we have specified the full URL of the server.ts file which contains the serve() function that we use in our code to listen & serve requests on port 8000.

import { serve } from "https://deno.land/std@0.63.0/http/server.ts"

We didn't have to install it using npm beforehand. Deno automatically downloads it while executing the above code.

Deno also downloads any other packages that might be required by server.ts i.e., it also takes care of the transitive dependencies.

This saves us the trouble of executing npm install before running our programs.

This is something that's new and unique to Deno (apart from the need for explicit permissions, that we saw before) and makes it stand apart from Node.js.

Closing Comments

So far, Deno seems to be a good alternative to Node.js.

But will it be able to take its place someday?

Only time will tell.

Vue.js 3: First Steps

Pratik Chaudhari — Sun, 01 Nov 2020 14:52:17 +0000

Vue.js 3.0. Image Credits: JavaScript Weekly

Code-named "One Piece," Vue 3.0 is the latest version of one of the most popular front-end frameworks.

Sept 18th, 2020, came bearing the good news of Vue 3.0's release.

The Vue.js team announced its release via its official Twitter account:

// Detect dark theme var iframe = document.getElementById('tweet-1306992969728380930-594'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1306992969728380930&theme=dark" }

I was excited to try it out and decided to create a small Todo app.

In this article, I'll walk you guys through the process of creating a web app using Vue 3.0.

But before we start, let me give you a glimpse of what we are about to create:

The Todo app created using Vue 3.0. Image Credits: Pratik Chaudhari (Author)

Now that you have got a visual clue of how it's going to look and how it's going to function, let's dive into the code.

Step 1.

Setting up your app to use Vue 3.0

We won't be using npm, the popular JavaScript package manager, to keep things simple.

Instead, we'll use the good ol' <script> tag to import vue.js into our app directly from a CDN:

<script src="https://unpkg.com/vue@next"></script>
```



Note the _**@next**_ in the above code. It is used to indicate to [unpkg.com](https://unpkg.com/) that we want the latest version of vue.js.

If you omit the _**@next**_, [unpkg.com](https://unpkg.com/) will provide you with vue 2.6.12, the current [LTS](https://en.wikipedia.org/wiki/Long-term_support) version of Vue.js.

## Step 2.

### Importing other third-party libraries

The only third-party library that I have used is the [Materialize CSS](https://materializecss.com/).

This isn't really necessary, but it gives the app a nice swanky look :)

So let's import it:



```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
```



As you can see, we need two imports here:

1. The Materialize CSS file
2. The Materialize JS file

The JS file is required for displaying toasters and tooltips provided by the Materialize CSS.

## Step 3.

### Creating the HTML template

We'll need a form with two input fields: one for the title and one for the description. We'll also need a button that will allow the user to submit a todo item to the app.

Here's the code:



```html
<form class="col s12">
    <div class="row">
        <div class="input-field col s4">
            <i class="material-icons prefix">title</i>
            <textarea v-model="todo.title" id="todo_title" class="materialize-textarea"></textarea>
            <label for="todo_title">A small title would be nice...</label>
        </div>
        <div class="input-field col s4">
            <i class="material-icons prefix">description</i>
            <textarea v-model="todo.description" id="todo_description" class="materialize-textarea"></textarea>
            <label for="todo_description">Maybe add a little description...</label>
        </div>
        <div class="s4">
            <a class="btn-floating btn-large waves-effect waves-light red tooltipped" data-position="bottom"
                data-tooltip="Add Todo!" @click="addTodo()"><i class="material-icons">add</i></a>
        </div>
    </div>
</form>
```



We'll also need a table to display all the todos that the user has added.

Here's how we design it:



```html
<table class="striped centered responsive-table">
    <thead>
        <th></th>
        <th>
            Title
        </th>
        <th>
            Description
        </th>
        <th></th>
    </thead>
    <tbody>
        <tr v-for="(todo,id) in todos">
            <td>
                {{id}}
            </td>
            <td>
                {{todo.title}}
            </td>
            <td>
                {{todo.description}}
            </td>
            <td>
                <a 
                   v-show="!todo.done"
                   class="btn-floating btn-large waves-effect 
                   waves-light light-green accent-4 tooltipped"
                   data-position="bottom" 
                   data-tooltip="I'm done with this one!" 
                   @click="markAsDone(todo.id)">
                    <i class="material-icons">check</i>
                </a>

                <i v-if="todo.done" 
                   class="todo-done-tick material-icons 
                   tooltipped" 
                   data-position="bottom"
                   data-tooltip="You're done with this 
                   one!">
                 check
               </i>
            </td>
        </tr>
        <tr v-show="todoCount == 0">
            <td colspan="4">
              You haven't added any Todos yet :(
            </td>
        </tr>
    </tbody>
</table>
```



## Step 4.

### Creating the app.js

Let's create the app.js, which will bring our app to life:



```javascript
const TodoApp = {
    data() {
        return {
            todoCount: 0,
            todo: {
                id: 0,
                title: '',
                description: '',
                done: false
            },
            todos: {}
        }
    },
    mounted() {
        const vm = this;
        vm.initialize();
    },
    methods: {
        initialize() {
            const vm = this;
            vm.addTooltips(vm.findTooltippedElementsFromDOM());
        },
        addTooltips(tooltippedElements) {
            const vm = this;
            M.Tooltip.init(tooltippedElements, {});
        },
        findTooltippedElementsFromDOM() {
            const vm = this;
            return document.querySelectorAll('.tooltipped');
        },
        addTodo() {
            const vm = this;

            if (!vm.todo.title || vm.todo.title.trim() === '') {
                M.toast({ html: 'Need a title for this Todo!', classes: 'rounded' });
                return;
            }

            if (!vm.todo.description || vm.todo.description.trim() === '') {
                M.toast({ html: 'A small description would be nice!', classes: 'rounded' });
                return;
            }

            vm.todo.id = ++vm.todoCount;
            vm.todos[vm.todo.id] = vm.todo;

            vm.todo = { title: '', description: '' };
            vm.addTooltipsToDynamicElements();
        },
        markAsDone(id) {
            const vm = this;
            vm.todos[id].done = true;
            vm.addTooltipsToDynamicElements();
        },
        addTooltipsToDynamicElements() {
            const vm = this;

            setTimeout(function () {
                vm.addTooltips(vm.findTooltippedElementsFromDOM());
            }, 500);
        }
    }
}

Vue.createApp(TodoApp).mount('#todoapp');
```



Once we glue all the above code together, our app will begin to function, as we'd seen in the gif at the beginning of the article.

In case you want to see a live demo of this app (and maybe change its code and play with it), head over to the Codepen below, where I've uploaded all the code:

Bonjour V!

Pratik Chaudhari — Sun, 01 Mar 2020 10:57:19 +0000

Let's meet the new kid on the programming block.

V is a brand new programming language that's been making quite a few waves in the programming community.

I stumbled upon it a few months back when I read this article.

While V is still in its infancy as of this writing (there are only six questions about it on SO), it is gaining popularity (it has around 15.9K stars on GitHub).

And it's also under active development (as evidenced by the recent commits in its GitHub repo).

So, I thought, why not give it a try. After all, what's the harm in being an early adopter, right?

So, let's get started!

Step 1. Install V on your local machine

You can install V using prebuilt binaries (such as this one), or you can directly compile its source code.

Since I use a MacBook Air (13-inch, 2007) running macOS Catalina (version 10.15.3), I downloaded this prebuilt binary for macOS.

I extracted its contents and fired up the macOS Terminal. Then, I navigated to the directory where I'd extracted the prebuilt binary and fired the following command in the Terminal:

./v version

It's supposed to display V's current version, something like below:

V 0.1.24 0d93eeb

But instead, the following prompt popped up on the screen:

You see, macOS blocks the execution of apps that haven't been notarized (meaning, apple can't verify the origins of the app, and as a result, can't guarantee that the application isn't malicious).

So, what do we do now? Give up?

Absolutely not!

There's a workaround: We can tell macOS to make an exception for such unnotarized apps by navigating to System Preferences > Security & Privacy and click the "Allow Anyway" button. Take a peek at the gif below to get a better idea:

Now that we've told the bouncer (macOS 😀) to let the guest in, we should be able to start the party, right? (run V via the Terminal without any issue)

But no! 😯 That's not what happens. When we execute the ./v version on the Terminal again, the following screen pops up:

This is the same pop-up that we encountered a while back, but this time, macOS has provided us with the "Open" button. Let's click it and see what happens:

As soon as we click "Open", the ./v version command executes and prints its output on the Terminal.

Step 2. Start writing code in V

Now that V's compiler is up & running on our local machine, we can start writing programs in V.

But wait! Don't we need a fancy IDE like VSCode, with all its elegant themes and plugins 😄 (just joking, it's my favorite IDE.)

No, not yet, at least!

V provides a REPL interface that allows you to play around with the language without having to create any files on your hard disk.

So, as the Hello World Tradition dictates, let's write our first program in V:

print("Bonjour V!")

Press the "enter/return" key on your keyboard and let the magic begin!

Voila! It worked!

That's it, guys!

Stay tuned for more stories about V programming!

DEV Community: Pratik Chaudhari

The choice of Tech Stack is overrated!

Implementing Your Own Event Loop From Scratch

10 Hilarious Cartoons That Depict Real-Life Problems of Programmers

1. Estimations:

2. Fixing Bugs:

3. Dealing With Ambitious Sales Rep:

4. Socializing:

5. Finding a new Job:

6. Feature Requests:

7. Status Updates:

8. Showing off Our Work:

9. Getting Our Priorities Right:

10. Meeting (Unrealistic) Expectations:

Replace 'em all With ES2021

Getting Started With the Github CLI

GitHub, the popular Git Provider has created a command-line tool that allows its users to access `GitHub` without leaving their terminals!

Step 1 - Install the GitHub CLI

Installing on Mac

Installing on Linux

Installing on Windows

Step 2 - Authentication

Meet Deno: The New JavaScript/TypeScript Runtime

Deno 1.0 was released on May 13, 2020

Installing Deno

Hello, Deno!

Using third-party/external packages

Closing Comments

Vue.js 3: First Steps

Step 1.

Setting up your app to use Vue 3.0

Bonjour V!

Step 1. Install V on your local machine

`./v version`

`V 0.1.24 0d93eeb`

Step 2. Start writing code in V

`print("Bonjour V!")`

DEV Community: Pratik Chaudhari

The choice of Tech Stack is overrated!

Implementing Your Own Event Loop From Scratch

10 Hilarious Cartoons That Depict Real-Life Problems of Programmers

1. Estimations:

2. Fixing Bugs:

3. Dealing With Ambitious Sales Rep:

4. Socializing:

5. Finding a new Job:

6. Feature Requests:

7. Status Updates:

8. Showing off Our Work:

9. Getting Our Priorities Right:

10. Meeting (Unrealistic) Expectations:

Replace 'em all With ES2021

Getting Started With the Github CLI

GitHub, the popular Git Provider has created a command-line tool that allows its users to access GitHub without leaving their terminals!

Step 1 - Install the GitHub CLI

Installing on Mac

Installing on Linux

Installing on Windows

Step 2 - Authentication

Meet Deno: The New JavaScript/TypeScript Runtime

Deno 1.0 was released on May 13, 2020

Installing Deno

Hello, Deno!

Using third-party/external packages

Closing Comments

Vue.js 3: First Steps

Step 1.

Setting up your app to use Vue 3.0

Bonjour V!

Step 1. Install V on your local machine

./v version

V 0.1.24 0d93eeb

Step 2. Start writing code in V

print("Bonjour V!")

GitHub, the popular Git Provider has created a command-line tool that allows its users to access `GitHub` without leaving their terminals!

`./v version`

`V 0.1.24 0d93eeb`

`print("Bonjour V!")`