Forem: Sagar Chakravarthy

Building a quick-chat view for Google Meet

Sagar Chakravarthy — Mon, 08 May 2023 02:40:56 +0000

This is the second post about building Meaty Meets, you can read the first one here.

🤯 Problem

As a presenter, I have noticed that it's easy to miss chat notifications during Google Meet calls. People, including myself, often struggle to locate the Google Meet tab amidst a sea of open tabs whenever there is a notification sound. This can lead to awkward pauses, as you thumb through all your open tabs, revealing to the audience who you really are (of course, we wouldn’t want that).

As the cliche goes, there had to be a better way!

💡Solution

The solution comprises of three main parts, which are:

Watching for new messages
Transmitting and storing the messages
Displaying the messages

Content scripts

Content scripts are files that run in the context of web pages. By using the standard Document Object Model (DOM), they are able to read details of the web pages the browser visits, make changes to them, and pass information to their parent extension

[Source]

Content scripts can be used to watch the Google Meet page for any changes in the chat box section where new messages would show up. Vanilla JavaScript can be used to check the state of the chat box every fixed interval.

Message passing

Communication between extensions and their content scripts works by using message passing. Either side can listen for messages sent from the other end, and respond on the same channel.

[Source]

One-way messages were sufficient for this use-case; new messages detected by the content script could be sent to the Service Worker through the sendMessage function, and the service worker listened to the message from content scripts and stored them in the local storage.

Popup action

Extensions provide the functionality of showing custom popup UI when the extension icon on the toolbar is clicked. This was utilized to show the messages as it's easily accessible throughout.

As an icing on the cake, extension also provide support for displaying a badge:

A bit of text layered over the icon. This makes it easy to update the action to display a small amount of information about the state of the extension, such as a counter. The badge has a text component and a background color.

[Source]

I used this to show notification-count like UI for new messages.

That’s it, combining all three parts resulted in an easy-to-access chat box extension for Google Meet:

📝 Final thoughts

In conclusion, the power of browser extensions is truly remarkable. With capabilities such as storage, inter-process communication, and the ability to build frontends without hosting, extensions provide an incredible opportunity for developers to create unique and useful tools that enhance the user experience.

Having discovered the potential of extensions, I'm excited to explore further and find more ways to leverage them in my work. Compared to traditional web apps, extensions offers features that is hard to match. It's a technology that's definitely worth exploring and experimenting with for any developer looking to build innovative tools that solve real-world problems.

Building a Chrome extension to join meetings on time

Sagar Chakravarthy — Sun, 26 Mar 2023 09:01:27 +0000

From concept to implementation of Meaty Meets

🤯 Problem

I've lost count of how many times I've accidentally closed a meeting notification and found myself frantically searching through my calendar for the link at the last minute.

So, I started wondering: could I automate the process of opening links just in time for the meeting? Building a browser extension was the only way to open a new tab or window automatically without any user interaction. And I wanted to create a simple MVP to validate the idea.

💡Solution

At my workplace, we use Google Suite and Google Meet so I set out to solve problem for myself for dogfooding (I find dogfooding term amusing). I considered implementing Google OAuth on the server side, however, doing so would introduce a host of complexities. Not only would I have to deploy and maintain a server, but I would also need to seamlessly hand-off the access token from the server to the Chrome extension.

Without a server and in turn no publicly available callback URL, I wasn't sure how to make the post login redirection work, as the Chrome extension's path is only available locally. That's when I discovered Chrome Identity API.

With just a couple of lines of code, I could get the user's access token without the need for any backend or UI. Once the clientId is configured, the following snippet can be used:

chrome.identity.getAuthToken({ interactive: true }, function(token) {
  // Use the token to call the Google Calendar API
});

When interactive is set to true, it opens up the Sign in screen for the user to select the Google account. With the returned access token after signing in (which should have read-only access to the calendar), I was able to fetch upcoming meetings and open the URL on time. It was an easy and elegant solution that saved me a lot of time and effort.

I wrapped this solution with a couple of configuration options:

Customize how early you’d like to join the meetings, and
An option to open meeting attachments as well Here’s how it looks 👇

📝 Final thoughts

Integrating Google authentication with Chrome extension was a breeze. It opens up so many possibilities without needing a complex setup. Browser extensions are great platforms for implementing low-cost side projects, in my case it was actually 0!

I have been using Meaty Meets myself to open meeting links a few minutes in advance and I quite like the convenience (of course I might be biased). If you use Google Suite and Google Meet at work, try out Meaty Meets and share your thoughts. It's free and takes only a couple of minutes to set it up.

In the next article, I’ll write about how I ideated and built the quick chat view right in the extension’s popup. Stay tuned!

Resume review thread

Sagar Chakravarthy — Tue, 07 Dec 2021 16:11:42 +0000

👋 Hey everyone! I'm Sagar, Full Stack engineer based in Singapore. I've been working in the software / web development industry for almost 7 years now.

I've been part of a number of interviews both as an interviewer and interviewee. I would like to give back to the community by reviewing and giving feedback for your resume / portfolio. Feel free to drop links to your resumes in the comments 👇

Automating personal investment reports with Gitlab Pages and CI/CD pipelines

Sagar Chakravarthy — Sat, 04 Dec 2021 11:23:03 +0000

👋 Introduction

I’ve been investing in stocks and mutual funds in the Indian stock market for a couple of years. The reports available on the trading platforms are not sufficient. Moreover, I use multiple platforms making it impossible to look at the health of my portfolio as a whole. So I set out to create my personal investment report. These were my expectations:

Reports should be available at my fingertips
Minimal cost and maintenance

You can read about my investment strategy here.

💸 Data collection

To create reports I needed two datasets:

Trades (buys and sells)
Latest prices

1. Trades

The trading platform I use doesn’t provide APIs to fetch my trades automatically 😕. So I manually export the trade book (as CSV) end of every month and store them in a “data” folder in the repository.

2. Latest prices

I wrote a python script that crawls the stock exchange sites. It collects the end of day prices which is good enough for my usecase. You can check out the code here.

📈 Report generation

With all my trades and their latest prices, I could calculate the metrics that I was interested in:

Total investment
Current value of the portfolio
Returns (absolute and percentage)
XIRR (code to calculate XIRR)

I segregated my trades into equity and debt and calculated the same metrics for the two categories as well. With these metrics, I used Jinja templating engine to display these numbers in a simple cards design 👇

Finally, I set up Gitlab’s pipeline schedule to generate the above HTML file every day after the markets closed. And with Gitlab pages, served the same HTML by placing it inside the public folder. For private repositories, only members can access the Gitlab pages thus making it my personal investment report 👻

Are you an investor looking to create a personal investment report just like this one? Feel free to drop your comments (or reach out to me on Twitter), I can share more details.

If you liked this article, you can subscribe to my newsletter to get new articles directly in your inbox 🙏

Getting started with writing a simple recursive program

Sagar Chakravarthy — Sun, 03 Oct 2021 07:43:27 +0000

While writing a recursive program is not a necessary skill, it opens doors to solving problems in new ways that might feel clunky to solve the iterative way.

Here is a step by step guide to convert an iterative function to a recursive function. The guide works well for cases where we accumulate a result in each iteration.

I’ll be using factorial of a number as an example.

1. Write it the iterative way

We use result variable to accumulate the answer while iterating from 1 through n

def factorial(n):
    result = 1
    for i in range(1, n + 1):
        result = result * i
    return result

2. Parameterize (with defaults) all the variables

Apart from n we are using result and i. We add them as function parameters and set the initial value as default value.

Our function signature would look like this:

def factorial(n, result=1, i=1):

3. Function body would be for loop’s body

We make the same updates to variables as in our for loop:

result = result * i
i = i + 1

At the end, call its own function with the updated variables

return factorial(n, result, i)

Our function now looks like this:

def factorial(n, result=1, i=1):
    result = result * i
    i = i + 1
    return factorial(n, result, i)

Refactor: We can directly pass the new values to the function call instead of mutating the variables

def factorial(n, result=1, i=1):
    return factorial(n, result * i, i + 1)

4. Add terminating condition

Add the same for loop’s terminating condition. When we exit our loop, we return the result. We’ll do the same here.

def factorial(n, result=1, i=1):
    if i > n:
        return result
    return factorial(n, result * i, i + 1)

5. Get rid of extra function parameters

This is where we need to think creatively to get rid of as many function parameters as possible.

i. Getting rid of i

n is used only for the termination condition and nowhere else in the logic. So if we reverse the order of iteration (n..1) our termination condition would be i == 0

def factorial(n, result=1, i=None):
    i = i or n # initialize i with n
    if i == 0:
        return result
    return factorial(n, result * i, i - 1)

Now we can clearly see n is not being used anywhere other than initialization. So we can merge n and i into a single variable

def factorial(n, result=1):
    if n == 0:
        return result
    return factorial(n - 1, result * n)

ii. Getting rid of result

To remove result parameter, we update the logic to return result instead of accumulating it. So we would get the following termination condition. Which makes sense, because factorial of 0 is 1.

if n == 0:
    return 1

Since the return value is now result we can apply the operation on the return value instead. Which would be:

return n * factorial(n - 1)

6. That’s it, we’re done

We now have a recursive function for calculating the factorial

def factorial(n):
    if n == 0:
        return 1
    return n * factorial(n - 1)

Another example

Let’s take a popular interview question and apply the same formula to create a recursive function.

Problem: Chunk Array

Description: Given an array and chunk size as parameters, write a function that will divide the array into several subarrays where each subarray has a length of chunk size

# Step 1: iterative version
def chunk(arr, size):
    chunked = []
    index = 0
    while index < len(arr):
        chunked.append(arr[index:index + size])
        index += size
    return chunked

# Step 2,3,4: add function parameters, body and terminating condition
def chunk(arr, size, index = 0, chunked = []):
    if index >= len(arr):
        return chunked
    return chunk(arr, size, index + size, chunked + arr[index: index + size])

# Step 5.1: get rid of index variable by cutting out the
# chunked part of the arr and assume index is always 0
def chunk(arr, size, chunked = []):
    # update the termination condition accordingly
    if len(arr) == 0:
        return chunked
    chunked.append(arr[:size])    
    return chunk(arr[size:], size, chunked)

# Step 5.2: get rid of `chunked` variable by returning
# the result and extracting the operation outside
def chunk(arr, size):
    # termination condition
    if len(arr) <= size:
        return [arr]
    return [arr[:size]] + chunk(arr[size:], size, chunked)

The final code looks like a recursive mathematical definition of a function. If we already have the definition, it would be as easy as writing the same with a programming language. So, often finding a recursive solution would be about finding such definitions that can solve the problem.

While this seems more mathematical, I personally feel recursive programs are best for solving problems involving combinations and patterns. I’ll be writing an article about this pretty soon, subscribe to get notified.

4 reasons to write your resume in Markdown

Sagar Chakravarthy — Mon, 20 Sep 2021 14:01:13 +0000

As Software Developers, we often use Markdown to write readme files, take notes or write a blog post like this one 😛. Its simple syntax helps format content easily. Apart from quick formatting there are several reasons why I would recommend writing resume in Markdown

🎯 Increased focus on your content

Content is the heart of your resume. But quite often we spend more time on its design and aesthetics. With Markdown’s syntax, you can write neatly formatted content first and then apply various themes or designs tailored to your needs.

📄 Easier to keep it updated

It is recommended to revisit your resume at least twice a year to keep it updated with your latest achievements, responsibilities and skills. With file formats like DOC, PDF, Tex or JPG it is extremely difficult (sometimes impossible) to edit without using any additional tools. In contrast, Markdown is just a text file which can be easily edited. Moving your sections around is as simple as cutting and pasting text. You can even store this file in a git repository to keep track of the changes made over time.

🎨 Flexibility to switch design

Markdown is rendered as HTML. And with a sprinkle of CSS you can create a beautiful, crisp and unique design for your resume. You can even change this design at any point of time without making any changes to your core content. A bunch of CSS themes for Markdown are available online.

👀 Better readability

Markdown provides structure for your content in a relatively simple way because of its simple plain-text-formatting syntax.

Markdown is a great tool for formatting your resume with advantages like maintainability, readability and flexibility. When I was looking for a job, I created a bunch of designs for my resumes. I have now converted it into a web application where you can write your resume in Markdown, try out these designs and download as PDF. Check it out at Resumey.Pro and let me know what you think in the comments below 👇